From e386cd271549549f4947b76e41dfc88e5bb1f4df Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Tue, 16 Jan 2024 19:36:32 +0000
Subject: [PATCH] fix(material/stepper): Update token values for M3 and add
 color variant support

---
 src/dev-app/theme-m3.scss                     |  3 ++
 .../theming/_custom-tokens.scss               | 43 ++++++++++++++++---
 src/material/core/tokens/m2/mat/_stepper.scss |  5 ++-
 src/material/stepper/_stepper-theme.scss      | 30 ++++++++++---
 src/material/stepper/step-header.scss         |  2 +
 5 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
index a5a53b7b2d5a..e833a6fe3ca8 100644
--- a/src/dev-app/theme-m3.scss
+++ b/src/dev-app/theme-m3.scss
@@ -6,14 +6,17 @@
 //  a demo thing.
 @mixin color-variants-back-compat($theme) {
   .mat-primary {
+    @include mat.stepper-color($theme, $color-variant: primary);
     &.mat-icon { @include mat.icon-color($theme, $color-variant: primary); }
   }
 
   .mat-accent {
+    @include mat.stepper-color($theme, $color-variant: secondary);
     &.mat-icon { @include mat.icon-color($theme, $color-variant: secondary); }
   }
 
   .mat-warn {
+    @include mat.stepper-color($theme, $color-variant: error);
     &.mat-icon { @include mat.icon-color($theme, $color-variant: error); }
   }
 }
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index c63c50e694b9..65be127cc507 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/src/material-experimental/theming/_custom-tokens.scss
@@ -683,7 +683,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),
@@ -697,9 +697,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),
@@ -708,10 +710,39 @@
       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-hover-border-radius: 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
index 8a2fe0f5fbbb..bf23ce9494a3 100644
--- a/src/material/core/tokens/m2/mat/_stepper.scss
+++ b/src/material/core/tokens/m2/mat/_stepper.scss
@@ -10,7 +10,10 @@ $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 hover
+    header-hover-border-radius: 0px,
+  );
 }
 
 // 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
index 3a64b47c58b9..3e63b772a0e0 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -6,6 +6,9 @@
 @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));
@@ -13,9 +16,14 @@
   @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, default 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 +43,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 +57,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 +71,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, default 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 +96,10 @@
   }
 }
 
-@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
index 746be3dbf50a..37fd113b1aec 100644
--- 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-border-radius);
     }
 
     &.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-hover-border-radius);
     }
   }