Skip to content

Commit 0ba8bef

Browse files
author
Andrew Seguin
committed
fix(material/stepper): align state colors
1 parent 7fbc4d4 commit 0ba8bef

File tree

2 files changed

+10
-4
lines changed

2 files changed

+10
-4
lines changed

src/material/stepper/_m2-stepper.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@use 'sass:map';
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
4+
@use '../core/tokens/m2-utils';
5+
@use '../core/tokens/m3-utils';
46

57
// Tokens that can't be configured through Angular Material's current theming API,
68
// but may be in a future version of the theming API.
@@ -13,11 +15,15 @@
1315

1416
// Tokens that can be configured through Angular Material's color theming API.
1517
@function get-color-tokens($theme) {
18+
$system: m2-utils.get-system($theme);
19+
1620
@return map.merge(private-get-color-palette-color-tokens($theme, primary), (
1721
stepper-container-color: inspection.get-theme-color($theme, system, surface),
1822
stepper-line-color: inspection.get-theme-color($theme, system, outline),
19-
stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
20-
stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
23+
stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
24+
map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
25+
stepper-header-focus-state-layer-color: m3-utils.color-with-opacity(
26+
map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
2127
stepper-header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
2228
stepper-header-optional-label-text-color: inspection.get-theme-color(
2329
$theme, foreground, secondary-text),

src/material/stepper/_m3-stepper.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ $prefix: (mat, stepper);
3131
stepper-header-error-state-icon-foreground-color: map.get($system, error),
3232
stepper-header-error-state-label-text-color: map.get($system, error),
3333
stepper-header-focus-state-layer-color: m3-utils.color-with-opacity(
34-
map.get($system, inverse-surface), map.get($system, focus-state-layer-opacity)),
34+
map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
3535
stepper-header-hover-state-layer-color: m3-utils.color-with-opacity(
36-
map.get($system, inverse-surface), map.get($system, hover-state-layer-opacity)),
36+
map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
3737
stepper-header-icon-background-color: map.get($system, on-surface-variant),
3838
stepper-header-icon-foreground-color: map.get($system, surface),
3939
stepper-header-label-text-color: map.get($system, on-surface-variant),

0 commit comments

Comments
 (0)