Skip to content

Commit 7f084b9

Browse files
committed
fix(material/stepper): ensure sufficient contrast of step icon in M2
Currently, the step icon M2 theming does not work correctly. The foreground color uses the contrast color of the primary color, but this does not necessarily provide enough contrast to the background. With this changes, the default foreground color is adjusted to ensure sufficient contrast to the background, regardless of the primary contrast color.
1 parent 1b6052f commit 7f084b9

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

src/material/stepper/_m2-stepper.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
stepper-header-optional-label-text-color: map.get($system, on-surface-variant),
2424
stepper-header-selected-state-label-text-color: map.get($system, on-surface),
2525
stepper-header-error-state-label-text-color: map.get($system, error),
26+
stepper-header-icon-foreground-color: map.get($system, surface),
2627
stepper-header-icon-background-color: map.get($system, on-surface-variant),
2728
stepper-header-error-state-icon-foreground-color: map.get($system, error),
2829
stepper-header-error-state-icon-background-color: transparent)
@@ -54,7 +55,6 @@
5455
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
5556

5657
@return (
57-
stepper-header-icon-foreground-color: map.get($system, on-primary),
5858
stepper-header-selected-state-icon-background-color: map.get($system, primary),
5959
stepper-header-selected-state-icon-foreground-color: map.get($system, on-primary),
6060
stepper-header-done-state-icon-background-color: map.get($system, primary),

0 commit comments

Comments
 (0)