From 504b862472bb87a79fce247d2c8088351ee54680 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 9 Mar 2026 10:27:26 +0200 Subject: [PATCH 1/2] fix(stepper): fix box-shadow of invalid indicator --- src/components/stepper/themes/step/shared/step.common.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/stepper/themes/step/shared/step.common.scss b/src/components/stepper/themes/step/shared/step.common.scss index 5df24387b..faddf6446 100644 --- a/src/components/stepper/themes/step/shared/step.common.scss +++ b/src/components/stepper/themes/step/shared/step.common.scss @@ -117,7 +117,7 @@ $theme: $material; [part~='indicator'] { color: var-get($theme, 'invalid-indicator-color'); background: var-get($theme, 'invalid-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); + box-shadow: 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); } [part~='title'] { @@ -179,7 +179,7 @@ $theme: $material; &:focus-within, &:active { background: var-get($theme, 'complete-step-focus-background'); - + [part~='title'] { color: var-get($theme, 'complete-title-focus-color'); } From b6b4351718601b57ecf4103fd49495a95a8dc8b8 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 9 Mar 2026 13:30:30 +0200 Subject: [PATCH 2/2] refactor(stepper): unite box-shadow styles in the common file --- .../themes/step/shared/step.bootstrap.scss | 20 -------------- .../themes/step/shared/step.common.scss | 8 +++--- .../themes/step/shared/step.fluent.scss | 26 ------------------- .../themes/step/shared/step.indigo.scss | 18 ------------- src/components/stepper/themes/step/themes.ts | 5 ++-- 5 files changed, 6 insertions(+), 71 deletions(-) delete mode 100644 src/components/stepper/themes/step/shared/step.fluent.scss diff --git a/src/components/stepper/themes/step/shared/step.bootstrap.scss b/src/components/stepper/themes/step/shared/step.bootstrap.scss index 11acad935..011de6440 100644 --- a/src/components/stepper/themes/step/shared/step.bootstrap.scss +++ b/src/components/stepper/themes/step/shared/step.bootstrap.scss @@ -11,22 +11,6 @@ $theme: $bootstrap; } } -[part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); - } -} - -:host([active]) { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); - } -} - [part~='disabled'] { &:focus, &:focus-visible, @@ -37,8 +21,4 @@ $theme: $bootstrap; box-shadow: none; } } - - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); - } } diff --git a/src/components/stepper/themes/step/shared/step.common.scss b/src/components/stepper/themes/step/shared/step.common.scss index faddf6446..f6dec7da8 100644 --- a/src/components/stepper/themes/step/shared/step.common.scss +++ b/src/components/stepper/themes/step/shared/step.common.scss @@ -68,7 +68,7 @@ $theme: $material; border-radius: var-get($theme, 'border-radius-indicator'); background: var-get($theme, 'indicator-background'); color: var-get($theme, 'indicator-color'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'indicator-outline'); + box-shadow: 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); } [part~='complete-start'] { @@ -87,7 +87,7 @@ $theme: $material; [part~='indicator'] { background: var-get($theme, 'complete-indicator-background'); color: var-get($theme, 'complete-indicator-color'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'complete-indicator-outline'); + box-shadow: 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); } [part~='title'] { @@ -232,7 +232,7 @@ $theme: $material; [part~='indicator'] { background: var-get($theme, 'current-indicator-background'); color: var-get($theme, 'current-indicator-color'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'current-indicator-outline'); + box-shadow: 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); } [part~='title'] { @@ -273,7 +273,7 @@ $theme: $material; [part~='indicator'] { color: var-get($theme, 'disabled-indicator-color'); background: var-get($theme, 'disabled-indicator-background'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'disabled-indicator-outline'); + box-shadow: 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); } [part~='title'] { diff --git a/src/components/stepper/themes/step/shared/step.fluent.scss b/src/components/stepper/themes/step/shared/step.fluent.scss deleted file mode 100644 index 977373063..000000000 --- a/src/components/stepper/themes/step/shared/step.fluent.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use 'styles/utilities' as *; -@use '../light/themes' as *; - -$theme: $fluent; - -[part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); - } -} - -:host([active]) { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); - } -} - -[part~='disabled'] { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); - } -} diff --git a/src/components/stepper/themes/step/shared/step.indigo.scss b/src/components/stepper/themes/step/shared/step.indigo.scss index fc2965829..de1ed58ef 100644 --- a/src/components/stepper/themes/step/shared/step.indigo.scss +++ b/src/components/stepper/themes/step/shared/step.indigo.scss @@ -5,28 +5,10 @@ $theme: $indigo; [part~='indicator'] { @include type-style('button'); - - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); - } } :host([active]) { [part~='title'] { @include type-style('subtitle-2'); } - - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); - } -} - -[part~='disabled'] { - [part~='indicator'] { - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); - } } diff --git a/src/components/stepper/themes/step/themes.ts b/src/components/stepper/themes/step/themes.ts index 1c1bb1404..2c7388eef 100644 --- a/src/components/stepper/themes/step/themes.ts +++ b/src/components/stepper/themes/step/themes.ts @@ -15,7 +15,6 @@ import { styles as materialLight } from './light/step.material.css.js'; import { styles as sharedLight } from './light/step.shared.css.js'; // Shared Styles import { styles as bootstrap } from './shared/step.bootstrap.css.js'; -import { styles as fluent } from './shared/step.fluent.css.js'; import { styles as indigo } from './shared/step.indigo.css.js'; const light = { @@ -29,7 +28,7 @@ const light = { ${materialLight} `, fluent: css` - ${fluent} ${fluentLight} + ${fluentLight} `, indigo: css` ${indigo} ${indigoLight} @@ -47,7 +46,7 @@ const dark = { ${materialDark} `, fluent: css` - ${fluent} ${fluentDark} + ${fluentDark} `, indigo: css` ${indigo} ${indigoDark}