From b519b4785b1da26becdb88e3810d606b9bddedfc Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 23 Oct 2024 09:41:22 -0600 Subject: [PATCH] feat(material/core): default to color-scheme theme type (#29907) --- src/dev-app/theme-m3.scss | 13 +----- .../core/theming/_config-validation.scss | 4 +- src/material/core/tokens/_m3-system.scss | 45 +++++++++++++++---- 3 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 1bbbc4846795..7beab1a85606 100644 --- a/src/dev-app/theme-m3.scss +++ b/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); diff --git a/src/material/core/theming/_config-validation.scss b/src/material/core/theming/_config-validation.scss index ab78fbaf0918..3f904929cc8b 100644 --- a/src/material/core/theming/_config-validation.scss +++ b/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) ); } diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss index 205ae6eb0d74..3e68ebc2cfbf 100644 --- a/src/material/core/tokens/_m3-system.scss +++ b/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);