fix(material/stepper): Update token values for M3 and add color varia…

…nt support (#28430)
angular · Jan 25, 2024 · 2455a42 · 2455a42
1 parent 5733100
commit 2455a42
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 14 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -6,6 +6,7 @@
   @include mat.option-color($theme, $color-variant: $color-variant);
   @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
   @include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
+  @include mat.stepper-color($theme, $color-variant: $color-variant);
 
   &.mat-icon {
     @include mat.icon-color($theme, $color-variant: $color-variant);

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -1077,7 +1077,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-stepper
 @function stepper($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (
     (
       container-color: map.get($systems, md-sys-color, surface),
       line-color: map.get($systems, md-sys-color, outline-variant),
@@ -1091,9 +1091,11 @@
       ),
       header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-      header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface),
-      header-icon-background-color: map.get($systems, md-sys-color, inverse-surface),
-      header-icon-foreground-color: map.get($systems, md-sys-color, inverse-on-surface),
+      header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-icon-foreground-color: map.get($systems, md-sys-color, surface),
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
       header-error-state-label-text-color: map.get($systems, md-sys-color, error),
       header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
       header-error-state-icon-background-color: _hardcode(transparent, $exclude-hardcoded),
@@ -1102,10 +1104,40 @@
       header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
       header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
       header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
-      header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-szie),
+      header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+      header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+      header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
       header-selected-state-label-text-weight: map.get(
           $systems, md-sys-typescale, title-small-weight),
-    ),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+    ), (
+      // Color variants
+      primary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+      ),
+      secondary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+      ),
+      tertiary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+      ),
+      error: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, error),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, error),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+      )
+    )
   );
 }
 

diff --git a/src/material/core/tokens/m2/mat/_stepper.scss b/src/material/core/tokens/m2/mat/_stepper.scss
@@ -10,7 +10,12 @@ $prefix: (mat, stepper);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // Border radius for step header on focus
+    header-focus-state-layer-shape: 0,
+    // Border radius for step header on hover
+    header-hover-state-layer-shape: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
@@ -1,21 +1,28 @@
-@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for mat-stepper.
+/// @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));
   }
   @else {}
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for mat-stepper.
+/// @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 stepper: primary, secondary,
+///   tertiary, or error (If not specified, primary color values 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() {
@@ -35,6 +42,8 @@
   }
 }
 
+/// Outputs typography theme styles for mat-stepper.
+/// @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));
@@ -47,6 +56,8 @@
   }
 }
 
+/// Outputs density theme styles for mat-stepper.
+/// @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));
@@ -59,10 +70,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for mat-stepper.
+/// @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 stepper: primary, secondary,
+///   tertiary, or error (If not specified, primary color values will be used).
+@mixin theme($theme,  $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
     @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);
@@ -79,9 +95,14 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
+@mixin _theme-from-tokens($tokens, $options...) {
   @if ($tokens != ()) {
+    $mat-stepper-tokens: token-utils.get-tokens-for(
+      $tokens,
+      tokens-mat-stepper.$prefix,
+      $options...
+    );
     @include token-utils.create-token-values(
-        tokens-mat-stepper.$prefix, map.get($tokens, tokens-mat-stepper.$prefix));
+        tokens-mat-stepper.$prefix, $mat-stepper-tokens);
   }
 }
diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss
@@ -28,11 +28,13 @@
     &:hover:not([aria-disabled]),
     &:hover[aria-disabled='false'] {
       @include token-utils.create-token-slot(background-color, header-hover-state-layer-color);
+      @include token-utils.create-token-slot(border-radius, header-hover-state-layer-shape);
     }
 
     &.cdk-keyboard-focused,
     &.cdk-program-focused {
       @include token-utils.create-token-slot(background-color, header-focus-state-layer-color);
+      @include token-utils.create-token-slot(border-radius, header-focus-state-layer-shape);
     }
   }