From 311e30d7c69b41663c6d8e56e7ca2ec6484c87e3 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 26 May 2025 20:12:52 -0600 Subject: [PATCH] fix(material/stepper): align state colors # Conflicts: # src/material/stepper/_m2-stepper.scss --- src/material/stepper/_m2-stepper.scss | 7 +++++-- src/material/stepper/_m3-stepper.scss | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss index d8227b244641..c09fde5dacc2 100644 --- a/src/material/stepper/_m2-stepper.scss +++ b/src/material/stepper/_m2-stepper.scss @@ -2,6 +2,7 @@ @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. @@ -18,8 +19,10 @@ @return map.merge(private-get-color-palette-color-tokens($theme, primary), ( stepper-container-color: map.get($system, surface), stepper-line-color: map.get($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: map.get($system, on-surface-variant), stepper-header-optional-label-text-color: map.get($system, on-surface-variant), stepper-header-selected-state-label-text-color: map.get($system, on-surface), diff --git a/src/material/stepper/_m3-stepper.scss b/src/material/stepper/_m3-stepper.scss index 7b9f25a1f19e..d93ba1136d47 100644 --- a/src/material/stepper/_m3-stepper.scss +++ b/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),