fix(step): use vanilla theme colors for stepper component (#1220)

edlerd · web-flow · commit f4c34d2712ca · 2025-07-01T19:20:08.000+02:00
Signed-off-by: David Edler &lt;david.edler@canonical.com&gt;
diff --git a/src/components/Stepper/Step/Step.scss b/src/components/Stepper/Step/Step.scss
@@ -1,7 +1,7 @@
 @import "vanilla-framework";
 
 .step-number {
-  border: 0.08rem solid black;
+  border: 0.08rem solid $colors--theme--border-high-contrast;
   border-radius: 1rem;
   height: 1.4rem;
   line-height: 1.3;
@@ -13,8 +13,8 @@
 }
 
 .step-number-disabled {
-  border: 0.08rem solid #757575;
-  color: #757575;
+  border: 0.08rem solid $colors--theme--text-muted;
+  color: $colors--theme--text-muted;
 }
 
 .step-content {
@@ -30,7 +30,7 @@
 }
 
 .step-disabled {
-  color: #757575;
+  color: $colors--theme--text-muted;
   pointer-events: none;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .step-selected {
-  background-color: var(--vf-color-background-alt);
+  background-color: $colors--theme--background-active;
 }
 
 .step-optional-content {
@@ -57,7 +57,7 @@
   }
 
   .step {
-    border-top: 0.2rem solid var(--vf-color-border-default);
+    border-top: 0.2rem solid $colors--theme--border-default;
     display: flex;
     height: 100%;
     padding: 0.4rem $spv--medium;
@@ -77,7 +77,7 @@
   }
 
   .progress-line {
-    border-top: 0.2rem solid black;
+    border-top: 0.2rem solid $colors--theme--border-high-contrast;
   }
 
   :first-child .step {
@@ -92,15 +92,15 @@
   }
 
   .step {
-    border-left: 0.2rem solid var(--vf-color-border-default);
+    border-left: 0.2rem solid $colors--theme--border-default;
     display: flex;
     padding: $spv--medium 0;
     padding-right: 0.5rem;
     width: fit-content;
   }
 
   .progress-line {
-    border-left: 0.2rem solid black;
+    border-left: 0.2rem solid $colors--theme--border-high-contrast;
   }
 
   :first-child .step {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@import "vanilla-framework";`
`2`	`2`
`3`	`3`	`.step-number {`
`4`		`- border: 0.08rem solid black;`
	`4`	`+ border: 0.08rem solid $colors--theme--border-high-contrast;`
`5`	`5`	`border-radius: 1rem;`
`6`	`6`	`height: 1.4rem;`
`7`	`7`	`line-height: 1.3;`
`@@ -13,8 +13,8 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.step-number-disabled {`
`16`		`- border: 0.08rem solid #757575;`
`17`		`- color: #757575;`
	`16`	`+ border: 0.08rem solid $colors--theme--text-muted;`
	`17`	`+ color: $colors--theme--text-muted;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.step-content {`
`@@ -30,7 +30,7 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.step-disabled {`
`33`		`- color: #757575;`
	`33`	`+ color: $colors--theme--text-muted;`
`34`	`34`	`pointer-events: none;`
`35`	`35`	`}`
`36`	`36`
`@@ -41,7 +41,7 @@`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`.step-selected {`
`44`		`- background-color: var(--vf-color-background-alt);`
	`44`	`+ background-color: $colors--theme--background-active;`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`.step-optional-content {`
`@@ -57,7 +57,7 @@`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`.step {`
`60`		`- border-top: 0.2rem solid var(--vf-color-border-default);`
	`60`	`+ border-top: 0.2rem solid $colors--theme--border-default;`
`61`	`61`	`display: flex;`
`62`	`62`	`height: 100%;`
`63`	`63`	`padding: 0.4rem $spv--medium;`
`@@ -77,7 +77,7 @@`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`.progress-line {`
`80`		`- border-top: 0.2rem solid black;`
	`80`	`+ border-top: 0.2rem solid $colors--theme--border-high-contrast;`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`:first-child .step {`
`@@ -92,15 +92,15 @@`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`.step {`
`95`		`- border-left: 0.2rem solid var(--vf-color-border-default);`
	`95`	`+ border-left: 0.2rem solid $colors--theme--border-default;`
`96`	`96`	`display: flex;`
`97`	`97`	`padding: $spv--medium 0;`
`98`	`98`	`padding-right: 0.5rem;`
`99`	`99`	`width: fit-content;`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`.progress-line {`
`103`		`- border-left: 0.2rem solid black;`
	`103`	`+ border-left: 0.2rem solid $colors--theme--border-high-contrast;`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`:first-child .step {`