feat(material/core): default to color-scheme theme type (#29907)

Author: andrewseguin

src/dev-app/theme-m3.scss

@@ -32,6 +32,7 @@ $dark-theme: create-theme($type: dark);
 
 // Include the default theme styles.
 html {
+  color-scheme: light;
   body:not(.demo-experimental-theme) {
     @include mat.all-component-themes($light-theme);
     @include mat.system-level-colors($light-theme);
@@ -44,7 +45,6 @@ html {
   body.demo-experimental-theme {
     @include mat.theme((
       color: (
-        theme-type: light,
         primary: $primary,
         tertiary: $tertiary,
       ),
@@ -68,6 +68,7 @@ html {
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 body.demo-unicorn-dark-theme {
+  color-scheme: dark;
   &:not(.demo-experimental-theme) {
     // Include the dark theme color styles.
     @include mat.all-component-colors($dark-theme);
@@ -77,16 +78,6 @@ body.demo-unicorn-dark-theme {
     // @include matx.popover-edit-color($dark-theme);
   }
 
-  &.demo-experimental-theme {
-    @include mat.theme((
-      color: (
-        theme-type: dark,
-        primary: $primary,
-        tertiary: $tertiary,
-      ),
-    ));
-  }
-
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
     @include mat.strong-focus-indicators-color($dark-theme);

src/material/core/theming/_config-validation.scss

@@ -100,9 +100,9 @@
     );
   }
   @if $config and map.has-key($config, theme-type) and
-      not list.index((light, dark), map.get($config, theme-type)) {
+      not list.index((light, dark, color-scheme), map.get($config, theme-type)) {
     @return (
-      #{'Expected $config.theme-type to be one of: light, dark. Got:'}
+      #{'Expected $config.theme-type to be one of: light, dark, color-scheme. Got:'}
       map.get($config, theme-type)
     );
   }

src/material/core/tokens/_m3-system.scss

@@ -18,11 +18,11 @@ $_system-level-prefix: sys;
 /// config map. The config map can have values color, typography, and/or density.
 ///
 /// If the config map's color value is an Angular Material color palette, it will be used as the
-/// primary and tertiary colors with a light theme type. Otherwise if the color value is a map,
-/// it must have a `primary` value containing an Angular Material color palette, and optionally
-/// a different `tertiary` palette (defaults to primary palette) and `theme-type` that is either
-/// `light` or `dark` (defaults to light). Color variable definitions will not be emitted if there
-/// are no color values in the config.
+/// primary and tertiary colors with a `color-scheme` theme type. Otherwise if the color value is a
+/// map, it must have a `primary` value containing an Angular Material color palette, and
+/// optionally a different `tertiary` palette (defaults to primary palette) and `theme-type` that
+/// is either `light`, `dark`, or 'color-scheme` (defaults to `color-scheme`). Color variable
+/// definitions will not be emitted if there are no color values in the config.
 ///
 /// If the config map's typography value is a font family string, it will be used as the
 /// plain and brand font family with default bold, medium, and regular weights of 700, 500, and 400,
@@ -44,9 +44,14 @@ $_system-level-prefix: sys;
   $color: map.get($config, color);
   $color-config: null;
   @if ($color) {
+    // Default to "color-scheme" theme type if the config's color does not provide one.
+    @if (meta.type-of($color) == 'map' and not map.has-key($color, theme-type)) {
+      $color: map.set($color, theme-type, color-scheme);
+    }
+
     $color-config: if(meta.type-of($color) == 'map',
       definition.define-colors($color),
-      definition.define-colors((primary: $color)));
+      definition.define-colors((primary: $color, theme-type: color-scheme)));
     @include system-level-colors($color-config, $overrides, $_system-fallback-prefix);
     @include system-level-elevation($color-config, $overrides, $_system-fallback-prefix);
   }
@@ -126,9 +131,7 @@ $_system-level-prefix: sys;
     md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
-  $sys-colors: if($type == dark,
-    definitions.md-sys-color-values-dark($ref),
-    definitions.md-sys-color-values-light($ref));
+  $sys-colors: _generate-sys-colors($ref, $type);
 
   // Manually insert a subset of palette values that are used directly by components
   // instead of system variables.
@@ -144,6 +147,30 @@ $_system-level-prefix: sys;
   }
 }
 
+@function _generate-sys-colors($ref, $type) {
+  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  @if ($type == light) {
+    @return $light-sys-colors;
+  }
+
+  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  @if ($type == dark) {
+    @return $dark-sys-colors;
+  }
+
+  @if ($type == color-scheme) {
+    $light-dark-sys-colors: ();
+    @each $name, $light-value in $light-sys-colors {
+      $dark-value: map.get($dark-sys-colors, $name);
+      $light-dark-sys-colors:
+          map.set($light-dark-sys-colors, $name, light-dark($light-value, $dark-value));
+    }
+    @return $light-dark-sys-colors;
+  }
+
+  @error 'Unknown theme-type provided: #{$type}';
+}
+
 @mixin system-level-typography($theme, $overrides: (), $prefix: null) {
   $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
   $brand: map.get($font-definition, brand);