fix(material/stepper): align state colors

Author: Andrew Seguin

src/material/stepper/_m2-stepper.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -13,11 +15,15 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
     stepper-container-color: inspection.get-theme-color($theme, system, surface),
     stepper-line-color: inspection.get-theme-color($theme, system, outline),
-    stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
+    stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    stepper-header-focus-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
     stepper-header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
     stepper-header-optional-label-text-color: inspection.get-theme-color(
         $theme, foreground, secondary-text),

src/material/stepper/_m3-stepper.scss

@@ -31,9 +31,9 @@ $prefix: (mat, stepper);
       stepper-header-error-state-icon-foreground-color: map.get($system, error),
       stepper-header-error-state-label-text-color: map.get($system, error),
       stepper-header-focus-state-layer-color: m3-utils.color-with-opacity(
-          map.get($system, inverse-surface), map.get($system, focus-state-layer-opacity)),
+          map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
       stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
-          map.get($system, inverse-surface), map.get($system, hover-state-layer-opacity)),
+          map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
       stepper-header-icon-background-color: map.get($system, on-surface-variant),
       stepper-header-icon-foreground-color: map.get($system, surface),
       stepper-header-label-text-color: map.get($system, on-surface-variant),