fix(material-experimental/theming): Add support for color variants in…

… slide-toggle, select, and radio (#28445)
angular · Jan 18, 2024 · 29a1e5d · 29a1e5d
1 parent a3b9fd9
commit 29a1e5d
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 54 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -22,6 +22,18 @@
     @include mat.tabs-color($theme, $color-variant: $color-variant);
   }
 
+  &.mat-mdc-slide-toggle {
+    @include mat.slide-toggle-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.select-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-radio-button {
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
   // M3 dropped support for warn/error color FABs.
   @if $color-variant != error {
     &.mat-mdc-fab,

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -368,7 +368,7 @@
     color: _hardcode(inherit, $exclude-hardcoded),
   ), (
     // Color variants:
-    neutral: (), // Default, no overrides needed.
+    surface: (), // Default, no overrides needed.
     primary: (
       color: map.get($systems, md-sys-color, primary),
     ),
@@ -627,12 +627,24 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-radio
 @function radio($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     ripple-color: map.get($systems, md-sys-color, on-surface),
     checked-ripple-color: map.get($systems, md-sys-color, primary),
     disabled-label-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed
+    secondary: (
+      checked-ripple-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      checked-ripple-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      checked-ripple-color: map.get($systems, md-sys-color, error),
+    ),
+  ));
 }
 
 /// Generates custom tokens for the mat-ripple.
@@ -650,7 +662,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-select
 @function select($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, trigger-text, body-large),
     (
       panel-background-color: map.get($systems, md-sys-color, surface-container),
@@ -664,7 +676,19 @@
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
     )
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed
+    secondary: (
+      focused-arrow-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      focused-arrow-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      focused-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-sidenav.
@@ -684,14 +708,6 @@
   );
 }
 
-/// Generates custom tokens for the mat-slide-toggle.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-slide-toggle
-@function slide-toggle($systems, $exclude-hardcoded) {
-  @return _generate-typography-tokens($systems, label-text, label-large);
-}
-
 /// Generates custom tokens for the mat-slider.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -1010,3 +1026,97 @@
     ),
   );
 }
+
+/// Generates custom token overrides for the mdc-switch color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-switch
+@function mdc-switch-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-track-color: map.get($systems, md-sys-color, secondary),
+      selected-handle-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-track-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-track-color: map.get($systems, md-sys-color, secondary),
+      selected-track-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-handle-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-track-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-focus-track-color: map.get($systems, md-sys-color, error),
+      selected-handle-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-track-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-pressed-track-color: map.get($systems, md-sys-color, error),
+      selected-track-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+@function mdc-radio-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
@@ -643,7 +643,10 @@
     ),
     _namespace-tokens(
       (mdc, radio),
-      mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-radio-color-variants($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -661,7 +664,10 @@
     ),
     _namespace-tokens(
       (mdc, switch),
-      mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-switch-color-variants($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -818,11 +824,6 @@
       custom-tokens.sidenav($systems, $exclude-hardcoded),
       $token-slots
     ),
-    _namespace-tokens(
-      (mat, slide-toggle),
-      custom-tokens.slide-toggle($systems, $exclude-hardcoded),
-      $token-slots
-    ),
     _namespace-tokens(
       (mat, slider),
       custom-tokens.slider($systems, $exclude-hardcoded),

diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss
@@ -72,8 +72,8 @@
 /// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the icon: neutral, primary, secondary, tertiary,
-///     or error (If not specified, default neutral color will be used).
+///   $color-variant: The color variant to use for the icon: surface, primary, secondary, tertiary,
+///     or error (If not specified, default surface color will be used).
 @mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {
     @if inspection.get-theme-version($theme) == 1 {

diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
 @use '../core/style/sass-utils';
@@ -10,6 +9,9 @@
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-radio.
+/// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
@@ -23,9 +25,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the radio button: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     .mat-mdc-radio-button {
@@ -52,6 +59,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -69,6 +78,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -84,10 +95,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the radio button: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -104,11 +120,13 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix));
-    @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...);
+  $mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...);
+  // Don't pass $options here, since the mdc-form-field doesn't support color options,
+  // only the mdc-radio and mat-radio do.
+  $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);
+  @include mdc-radio-theme.theme($mdc-radio-tokens);
+  @include mdc-form-field-theme.theme($mdc-form-field-tokens);
+  @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens);
 }