@hashicorp/design-system-components 4.10.0 → 4.11.0

package/dist/styles/components/stepper/step-indicator.scss

@@ -7,7 +7,12 @@
 // STEPPER > INDICATOR > STEP
 //
 
-$hds-stepper-indicator-step-statuses: ( "incomplete", "progress", "processing", "complete" );
+$hds-stepper-indicator-step-statuses: (
+  "incomplete",
+  "progress",
+  "processing",
+  "complete"
+);
 $hds-stepper-indicator-step-size: 24px;
 
 // Base stepper indicator styling
@@ -72,19 +77,31 @@ $hds-stepper-indicator-step-non-interactive-props: (
     "text-color": var(--token-color-foreground-high-contrast),
     "fill-color": var(--token-color-foreground-strong),
     "stroke-color": var(--token-color-foreground-strong),
-  )
+  ),
 );
 
 @each $status in $hds-stepper-indicator-step-statuses {
   // For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $non-interactive-props
   .hds-stepper-indicator-step--status-#{$status} {
     .hds-stepper-indicator-step__status {
-      color: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "text-color");
+      color: map-get(
+        $hds-stepper-indicator-step-non-interactive-props,
+        $status,
+        "text-color"
+      );
     }
 
     .hds-stepper-indicator-step__svg-hexagon path {
-      fill: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "fill-color");
-      stroke: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "stroke-color");
+      fill: map-get(
+        $hds-stepper-indicator-step-non-interactive-props,
+        $status,
+        "fill-color"
+      );
+      stroke: map-get(
+        $hds-stepper-indicator-step-non-interactive-props,
+        $status,
+        "stroke-color"
+      );
     }
   }
 }
@@ -120,7 +137,7 @@ $hds-stepper-indicator-step-status-props: (
   ),
   "complete": (
     "text-color-default": var(--token-color-palette-blue-200),
-    "fill-color-default": var(--token-color-palette-blue-50),
+    "fill-color-default": var(--token-color-surface-action),
     "stroke-color-default": var(--token-color-palette-blue-300),
     "text-color-hover": var(--token-color-palette-blue-300),
     "fill-color-hover": var(--token-color-palette-blue-100),
@@ -128,7 +145,7 @@ $hds-stepper-indicator-step-status-props: (
     "text-color-active": var(--token-color-palette-blue-400),
     "fill-color-active": var(--token-color-palette-blue-100),
     "stroke-color-active": var(--token-color-palette-blue-400),
-  )
+  ),
 );
 
 .hds-stepper-indicator-step--is-interactive {
@@ -138,24 +155,48 @@ $hds-stepper-indicator-step-status-props: (
     // For each status set the text, svg fill, and svg stroke color based on $hds-stepper-indicator-step-status-props
     &.hds-stepper-indicator-step--status-#{$status} {
       .hds-stepper-indicator-step__status {
-        color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-default");
+        color: map-get(
+          $hds-stepper-indicator-step-status-props,
+          $status,
+          "text-color-default"
+        );
       }
 
       .hds-stepper-indicator-step__svg-hexagon path {
-        fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-default");
-        stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-default");
+        fill: map-get(
+          $hds-stepper-indicator-step-status-props,
+          $status,
+          "fill-color-default"
+        );
+        stroke: map-get(
+          $hds-stepper-indicator-step-status-props,
+          $status,
+          "stroke-color-default"
+        );
       }
 
       &:hover,
       &.mock-hover {
         .hds-stepper-indicator-step__status {
-          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-hover");
+          color: map-get(
+            $hds-stepper-indicator-step-status-props,
+            $status,
+            "text-color-hover"
+          );
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-hover");
-            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-hover");
+            fill: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "fill-color-hover"
+            );
+            stroke: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "stroke-color-hover"
+            );
           }
         }
       }
@@ -163,13 +204,25 @@ $hds-stepper-indicator-step-status-props: (
       &:active,
       &.mock-active {
         .hds-stepper-indicator-step__status {
-          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-active");
+          color: map-get(
+            $hds-stepper-indicator-step-status-props,
+            $status,
+            "text-color-active"
+          );
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-active");
-            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-active");
+            fill: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "fill-color-active"
+            );
+            stroke: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "stroke-color-active"
+            );
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -39,7 +39,7 @@
     "@embroider/addon-shim": "^1.8.7",
     "@floating-ui/dom": "^1.6.3",
     "@hashicorp/design-system-tokens": "^2.2.1",
-    "@hashicorp/flight-icons": "^3.5.0",
+    "@hashicorp/flight-icons": "^3.6.0",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.3",
     "ember-cli-sass": "^11.0.1",
@@ -79,8 +79,8 @@
     "@types/prismjs": "^1.26.4",
     "@types/qunit": "^2.19.10",
     "@types/rsvp": "^4.0.9",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "babel-plugin-ember-template-compilation": "^2.2.4",
     "concurrently": "^8.2.2",
     "ember-basic-dropdown": "^8.1.0",