fix(style): synced stepper with pattern library (#1251)

packages/react/src/components/Stepper/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import TooltipTabstop from '../TooltipTabstop';
+import Icon from '../Icon';
 
 interface BaseStepProps extends React.LiHTMLAttributes<HTMLLIElement> {
   status: 'current' | 'complete' | 'future';
@@ -44,7 +45,12 @@ export const Step = (props: StepProps) => {
       aria-current={status === 'current' ? 'step' : 'false'}
       {...liProps}
     >
-      <div className="Stepper__step-line" />
+      <div
+        className={classNames(
+          'Stepper__step-line',
+          `Stepper__step--${status}-line`
+        )}
+      />
       <div className="Stepper__step-content">
         {isTooltip ? (
           <TooltipTabstop
@@ -58,13 +64,35 @@ export const Step = (props: StepProps) => {
             association="aria-labelledby"
             aria-label={tooltipText}
           >
-            <div className="Stepper__step-indicator" />
+            <div
+              className={classNames(
+                'Stepper__step-indicator',
+                `Stepper__step--${status}-indicator`
+              )}
+            >
+              {status === 'complete' && <Icon type={'check'} />}
+            </div>
           </TooltipTabstop>
         ) : (
           <>
-            <div className="Stepper__step-indicator" />
+            <div
+              className={classNames(
+                'Stepper__step-indicator',
+                `Stepper__step--${status}-indicator`
+              )}
+            >
+              {status === 'complete' && <Icon type={'check'} />}
+            </div>
+
             {children ? (
-              <div className="Stepper__step-label">{children}</div>
+              <div
+                className={classNames(
+                  'Stepper__step-label',
+                  `Stepper__step--${status}-label`
+                )}
+              >
+                {children}
+              </div>
             ) : null}
           </>
         )}

packages/styles/stepper.css

@@ -1,12 +1,58 @@
-.Stepper {
-  --step-indicator-size: 2em;
-  --step-line-height: 0.53em;
-  --step-line-offset: 1.33em;
+:root {
+  --step-indicator-size: 1.75rem;
+  --step-line-height: 0.5rem;
+  --step-line-offset: 1.438rem;
+
+  --step-indicator-content-size: 1rem;
+
+  --step-label-color: var(--gray-60);
+  --step-line-color: var(--accent-light);
+  --step-indicator-background: var(--accent-light);
+  --step-indicator-color: var(--gray-90);
+
+  --step-current-indicator-background: #fff;
+  --step-current-indicator-color: var(--accent-dark);
+  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark);
+  --step-current-complete-line-border-color: var(--accent-dark);
+
+  --step-complete-indicator-background: var(--accent-dark);
+  --step-complete-indicator-color: #fff;
+
+  --step-current-label-color: var(--gray-90);
+  --step-complete-indicator-svg-color: var(--accent-success);
+
+  --stepper-color: var(--gray-90);
+}
+
+/* Dark theme variables */
+.cauldron--theme-dark {
+  --step-label-color: var(--accent-light);
+  --step-line-color: var(--accent-medium);
+  --step-indicator-color: #fff;
+  --step-indicator-background: var(--accent-medium);
+
+  --step-current-indicator-background: #fff;
+  --step-current-indicator-color: var(--accent-dark);
+  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark),
+    0 0 0 4px var(--accent-info);
+  --step-current-complete-line-border-color: var(--accent-info);
+
+  --step-complete-indicator-background: var(--accent-info);
+  --step-complete-indicator-color: var(--accent-dark);
 
+  --step-current-label-color: #fff;
+  --step-complete-indicator-svg-color: #000;
+
+  --stepper-color: var(--accent-light);
+  --stepper-background-color: var(--accent-dark);
+}
+
+.Stepper {
   display: flex;
   padding: var(--space-medium);
   align-items: flex-start;
-  color: var(--gray-90);
+  color: var(--stepper-color);
+  background-color: var(--stepper-background-color);
   counter-reset: stepper;
   list-style-type: none;
   margin: 0 auto;
@@ -24,7 +70,7 @@
   left: calc(-50% + var(--step-line-offset));
   right: calc(50% + var(--step-line-offset));
   flex: 1 1 auto;
-  border-top: var(--step-line-height) solid var(--accent-light);
+  border-top: var(--step-line-height) solid var(--step-line-color);
 }
 
 .Stepper__step:first-child .Stepper__step-line {
@@ -41,16 +87,16 @@
   width: var(--step-indicator-size);
   height: var(--step-indicator-size);
   border-radius: 50%;
-  background: var(--accent-light);
-  color: var(--gray-90);
+  background: var(--step-indicator-background);
+  color: var(--step-indicator-color);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.Stepper__step-indicator::before {
-  font-size: var(--text-size-smallest);
+.Stepper__step-indicator:before {
+  font-size: var(--text-size-small);
   counter-increment: stepper;
   content: counter(stepper);
 }
@@ -60,59 +106,44 @@
   width: 100%;
   padding-top: var(--space-smallest);
   font-size: var(--text-size-smaller);
+  color: var(--step-label-color);
 }
 
 /*
   status-specific styles
 */
 
-.Stepper__step--current .Stepper__step-indicator {
-  background: var(--white);
-  color: var(--accent-dark);
-  box-shadow: 0 0 0 2px var(--accent-dark);
-}
-
-.Stepper__step--current .Stepper__step-label {
-  font-weight: var(--font-weight-bold);
-}
-
-.Stepper__step--current .Stepper__step-line,
-.Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-dark);
-}
-
-.Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-dark);
-  color: var(--white);
+.Stepper__step--current-indicator {
+  background: var(--step-current-indicator-background);
+  color: var(--step-current-indicator-color);
+  box-shadow: var(--step-current-indicator-shadow);
 }
 
-/* Dark Theme */
-.cauldron--theme-dark .Stepper {
-  color: var(--accent-light);
-  background-color: var(--accent-dark);
+.Stepper__step--current-indicator:before {
+  font-weight: var(--font-weight-medium);
 }
 
-.cauldron--theme-dark .Stepper__step-line {
-  border-top: var(--step-line-height) solid var(--accent-medium);
+.Stepper__step--current-label {
+  font-weight: var(--font-weight-medium);
+  color: var(--step-current-label-color);
 }
 
-.cauldron--theme-dark .Stepper__step-indicator {
-  color: var(--white);
-  background: var(--accent-medium);
+.Stepper__step--current-line,
+.Stepper__step--complete-line {
+  border-color: var(--step-current-complete-line-border-color);
 }
 
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-indicator {
-  background: var(--white);
-  color: var(--accent-dark);
-  box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-info);
+.Stepper__step--complete-indicator {
+  background: var(--step-complete-indicator-background);
+  color: var(--step-complete-indicator-color);
 }
 
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-line,
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-info);
+.Stepper__step--complete-indicator:before {
+  content: '';
 }
 
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-info);
-  color: var(--accent-dark);
+.Stepper__step--complete-indicator svg {
+  height: var(--step-indicator-content-size);
+  width: var(--step-indicator-content-size);
+  color: var(--step-complete-indicator-svg-color);
 }