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

… option, checkbox, and fab (#28412)
angular · Jan 16, 2024 · 08c97ab · 08c97ab
1 parent ba3680e
commit 08c97ab
Show file tree

Hide file tree

Showing 7 changed files with 256 additions and 56 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -6,15 +6,49 @@
 //  a demo thing.
 @mixin color-variants-back-compat($theme) {
   .mat-primary {
-    &.mat-icon { @include mat.icon-color($theme, $color-variant: primary); }
+    @include mat.option-color($theme, $color-variant: primary);
+
+    &.mat-icon {
+      @include mat.icon-color($theme, $color-variant: primary);
+    }
+
+    &.mat-mdc-checkbox {
+      @include mat.checkbox-color($theme, $color-variant: primary);
+    }
+
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab {
+      @include mat.fab-color($theme, $color-variant: primary);
+    }
   }
 
   .mat-accent {
-    &.mat-icon { @include mat.icon-color($theme, $color-variant: secondary); }
+    @include mat.option-color($theme, $color-variant: secondary);
+
+    &.mat-icon {
+      @include mat.icon-color($theme, $color-variant: secondary);
+    }
+
+    &.mat-mdc-checkbox {
+      @include mat.checkbox-color($theme, $color-variant: secondary);
+    }
+
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab {
+      @include mat.fab-color($theme, $color-variant: secondary);
+    }
   }
 
   .mat-warn {
-    &.mat-icon { @include mat.icon-color($theme, $color-variant: error); }
+    @include mat.option-color($theme, $color-variant: error);
+
+    &.mat-icon {
+      @include mat.icon-color($theme, $color-variant: error);
+    }
+
+    &.mat-mdc-checkbox {
+      @include mat.checkbox-color($theme, $color-variant: error);
+    }
   }
 }
 

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -272,7 +272,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-fab
 @function fab($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     foreground-color: map.get($systems, md-sys-color, on-primary-container),
     state-layer-color: map.get($systems, md-sys-color, primary-container),
     ripple-color: mat.private-safe-color-change(
@@ -286,7 +286,26 @@
       map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
     disabled-state-foreground-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: (
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, secondary-container),
+      ripple-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+      ripple-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-form-field.
@@ -338,6 +357,7 @@
     color: _hardcode(inherit, $exclude-hardcoded),
   ), (
     // Color variants:
+    neutral: (), // Default, no overrides needed.
     primary: (
       color: map.get($systems, md-sys-color, primary),
     ),
@@ -485,7 +505,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-option
 @function option($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, label-large),
     (
       selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
@@ -500,7 +520,22 @@
       ),
       selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
     ),
-  );
+  ), (
+    // Color variants:
+    primary: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, primary-container),
+    ),
+    secondary: (), // Default, no overrides needed
+    tertiary: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    error: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, error-container),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-paginator.
@@ -801,3 +836,52 @@
     node-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
   );
 }
+
+/// Generates custom token overrides for the mdc-checkbox 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-checkbox
+@function mdc-checkbox-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-container-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-container-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-container-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-pressed-container-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-pressed-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-container-color: map.get($systems, md-sys-color, error),
+      selected-focus-container-color: map.get($systems, md-sys-color, error),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-container-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-pressed-container-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-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
@@ -8,6 +8,18 @@
 
 // TODO(mmalerba): Split up this file into smaller pieces.
 
+/// Maps the values in a map to new values using the given mapping function
+/// @param {Map} $map The maps whose values will be mapped to new values.
+/// @param {Function} $fn The value mapping function.
+/// @param {Map} A new map with its values updated using the mapping function.
+@function _map-values($map, $fn) {
+  $result: ();
+  @each $key, $value in $map {
+    $result: map.set($result, $key, meta.call($fn, $value));
+  }
+  @return $result;
+}
+
 /// Picks a submap containing only the given keys out the given map.
 /// @param {Map} $map The map to pick from.
 /// @param {List} $keys The map keys to pick.
@@ -169,7 +181,11 @@
 /// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values.
 /// This is necessary in order to do opacity lookups.
 /// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
-@function _fix-checkbox-tokens($tokens, $all-tokens) {
+@function _fix-checkbox-tokens($tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-checkbox-values((), false);
+
   $rename-keys: (
     selected-icon-color: selected-checkmark-color,
     selected-disabled-icon-color: disabled-selected-checkmark-color,
@@ -188,9 +204,9 @@
   );
 
   $remapped-tokens: _rename-map-keys($tokens, $rename-keys);
-  $remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);
+  $remapped-hardcoded-tokens: _rename-map-keys($hardcoded-tokens, $rename-keys);
 
-  @return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
+  @return _combine-color-tokens($remapped-tokens, $remapped-hardcoded-tokens, (
     (
       color: disabled-selected-icon-color,
       opacity: disabled-selected-icon-opacity,
@@ -474,11 +490,12 @@
     // Get the official MDC component tokens
     _namespace-tokens(
       (mdc, checkbox),
-      _fix-checkbox-tokens(
-        mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-checkbox-values($systems, false)
+      (
+        _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
+        _map_values(
+            custom-tokens.mdc-checkbox-color-variants($systems, $exclude-hardcoded),
+            meta.get-function(_fix-checkbox-tokens)
+        )
       ),
       $token-slots
     ),
@@ -504,12 +521,29 @@
     ),
     _namespace-tokens(
       (mdc, fab),
-      mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
+        (
+          // Color variants
+          primary: (), // Default, no overrides needed.
+          secondary: mdc-tokens.md-comp-fab-secondary-values($systems, $exclude-hardcoded),
+          tertiary: mdc-tokens.md-comp-fab-tertiary-values($systems, $exclude-hardcoded)
+        )
+      ),
       $token-slots
     ),
     _namespace-tokens(
       (mdc, extended-fab),
-      mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
+        (
+          // Color variants
+          primary: (), // Default, no overrides needed.
+          secondary: mdc-tokens.md-comp-extended-fab-secondary-values($systems, $exclude-hardcoded),
+          tertiary: mdc-tokens.md-comp-extended-fab-tertiary-values($systems, $exclude-hardcoded),
+          error: () // TODO(mmalerba): Should we add our own error variant?
+        ),
+      ),
       $token-slots
     ),
     _namespace-tokens(

diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 @use '../core/style/sass-utils';
@@ -10,6 +9,9 @@
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-fab.
+/// @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));
@@ -40,9 +42,14 @@
   @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-fab.
+/// @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 fab: primary, secondary, or tertiary
+///     (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 {
     @include sass-utils.current-selector-or-root() {
@@ -67,6 +74,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-fab.
+/// @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));
@@ -80,6 +89,8 @@
   }
 }
 
+/// Outputs density theme styles for the mat-fab.
+/// @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));
@@ -92,10 +103,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
+/// @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 fab: primary, secondary, or tertiary
+///     (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @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);
@@ -112,11 +128,12 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-extended-fab-theme.theme(map.get($tokens, tokens-mdc-extended-fab.$prefix));
-    @include mdc-fab-theme.theme(map.get($tokens, tokens-mdc-fab.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-fab.$prefix, map.get($tokens, tokens-mat-fab.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-extended-fab-tokens: token-utils.get-tokens-for(
+      $tokens, tokens-mdc-extended-fab.$prefix, $options...);
+  $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
+  $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
+  @include mdc-extended-fab-theme.theme($mdc-extended-fab-tokens);
+  @include mdc-fab-theme.theme($mdc-fab-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
 }