fix: inner step styling (#8464)

shapeshift · Jan 6, 2025 · 35b73ab · 35b73ab
1 parent 636a011
commit 35b73ab
Showing 1 changed file with 27 additions and 25 deletions.
diff --git a/src/components/Stepper.theme.ts b/src/components/Stepper.theme.ts
@@ -37,36 +37,38 @@ const baseStyle = {
       bg: 'border.base',
     },
   },
-  innerSteps: {
-    step: {
-      '&[data-status=active]': {
-        bg: 'background.surface.raised.base',
-        borderRadius: '8px',
-      },
+}
+
+const innerSteps = {
+  step: {
+    '&[data-status=active]': {
+      bg: 'background.surface.raised.base',
+      borderRadius: '8px',
     },
-    indicator: {
-      width: '20px',
-      height: '20px',
-      minWidth: '20px',
+  },
+  indicator: {
+    width: '20px',
+    height: '20px',
+    minWidth: '20px',
+    borderWidth: '3px',
+    // Override the throbbing animation
+    '&[data-status=active]:not(.step-pending)': {
+      animation: 'none',
+    },
+    '&[data-status=active]': {
+      borderWidth: '3px',
+    },
+    '&[data-status=incomplete]': {
+      borderWidth: '3px',
+    },
+    '&[data-status=complete]': {
       borderWidth: '3px',
-      // Override the throbbing animation
-      '&[data-status=active]:not(.step-pending)': {
-        animation: 'none',
-      },
-      '&[data-status=active]': {
-        borderWidth: '3px',
-      },
-      '&[data-status=incomplete]': {
-        borderWidth: '3px',
-      },
-      '&[data-status=complete]': {
-        borderWidth: '3px',
-      },
     },
   },
 }
 
 const variants = {
+  innerSteps,
   error: {
     indicator: {
       '&[data-status=active]': {
@@ -83,9 +85,9 @@ const variants = {
     },
   },
   innerStepsError: {
-    ...baseStyle.innerSteps,
+    ...innerSteps,
     indicator: {
-      ...baseStyle.innerSteps.indicator,
+      ...innerSteps.indicator,
       '&[data-status=active]:not(.step-pending)': {
         animation: 'none',
         borderWidth: '0',