From 33cc2c269fe5b6c6b6b81bbbe65ee26f800a5113 Mon Sep 17 00:00:00 2001
From: orest-s <orest.hlodan@deque.com>
Date: Thu, 19 Oct 2023 12:04:28 +0300
Subject: [PATCH 1/7] feat: added checkmark to indicated complited

---
 packages/react/src/components/Stepper/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Stepper/index.tsx b/packages/react/src/components/Stepper/index.tsx
index a8e63dd57..536f1ea15 100644
--- a/packages/react/src/components/Stepper/index.tsx
+++ b/packages/react/src/components/Stepper/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TooltipTabstop from '../TooltipTabstop';
+import Icon from '../Icon';
 
 interface BaseStepProps extends React.LiHTMLAttributes<HTMLLIElement> {
   status: 'current' | 'complete' | 'future';
@@ -59,11 +60,16 @@ export const Step = (props: StepProps) => {
             association="aria-labelledby"
             aria-label={tooltipText}
           >
-            <div className="Stepper__step-indicator" />
+            <div className="Stepper__step-indicator">
+              {props.status === 'complete' && <Icon type={'check'} />}
+            </div>
           </TooltipTabstop>
         ) : (
           <>
-            <div className="Stepper__step-indicator" />
+            <div className="Stepper__step-indicator">
+              {props.status === 'complete' && <Icon type={'check'} />}
+            </div>
+
             {children ? (
               <div className="Stepper__step-label">{children}</div>
             ) : null}

From 382a5406a3807f31b3fa8320bf9529784844373a Mon Sep 17 00:00:00 2001
From: orest-s <orest.hlodan@deque.com>
Date: Thu, 19 Oct 2023 12:05:20 +0300
Subject: [PATCH 2/7] feat: synced circle-size/colors/gap/differences for
 dark/light theme

---
 packages/styles/stepper.css | 38 +++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/styles/stepper.css b/packages/styles/stepper.css
index 0ce8f3094..dd7d35795 100644
--- a/packages/styles/stepper.css
+++ b/packages/styles/stepper.css
@@ -1,7 +1,9 @@
 .Stepper {
-  --step-indicator-size: 2em;
+  --step-indicator-size: 1.867em;
   --step-line-height: 0.53em;
-  --step-line-offset: 1.33em;
+  --step-line-offset: 1.53em;
+
+  --step-indicator-content-size: 1.067em;
 
   display: flex;
   padding: var(--space-medium);
@@ -50,7 +52,7 @@
 }
 
 .Stepper__step-indicator::before {
-  font-size: var(--text-size-smallest);
+  font-size: var(--text-size-small);
   counter-increment: stepper;
   content: counter(stepper);
 }
@@ -60,6 +62,7 @@
   width: 100%;
   padding-top: var(--space-smallest);
   font-size: var(--text-size-smaller);
+  color: var(--gray-60);
 }
 
 /*
@@ -72,8 +75,13 @@
   box-shadow: 0 0 0 2px var(--accent-dark);
 }
 
+.Stepper__step--current .Stepper__step-indicator::before {
+  font-weight: var(--font-weight-medium);
+}
+
 .Stepper__step--current .Stepper__step-label {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
+  color: var(--gray-90);
 }
 
 .Stepper__step--current .Stepper__step-line,
@@ -86,12 +94,26 @@
   color: var(--white);
 }
 
+.Stepper__step--complete .Stepper__step-indicator::before {
+  content: '';
+}
+
+.Stepper__step--complete .Stepper__step-indicator svg {
+  height: var(--step-indicator-content-size);
+  width: var(--step-indicator-content-size);
+  color: var(--accent-success);
+}
+
 /* Dark Theme */
 .cauldron--theme-dark .Stepper {
   color: var(--accent-light);
   background-color: var(--accent-dark);
 }
 
+.cauldron--theme-dark .Stepper__step-label {
+  color: var(--accent-light);
+}
+
 .cauldron--theme-dark .Stepper__step-line {
   border-top: var(--step-line-height) solid var(--accent-medium);
 }
@@ -116,3 +138,11 @@
   background: var(--accent-info);
   color: var(--accent-dark);
 }
+
+.cauldron--theme-dark .Stepper__step--current .Stepper__step-label {
+  color: var(--white);
+}
+
+.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator svg {
+  color: var(--black);
+}

From 688ab986f61ebf169784facaba4816d7658ca379 Mon Sep 17 00:00:00 2001
From: orest-s <139442720+orest-s@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:24:26 +0200
Subject: [PATCH 3/7] Update packages/react/src/components/Stepper/index.tsx

Co-authored-by: Jason <jason@scurker.com>
---
 packages/react/src/components/Stepper/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Stepper/index.tsx b/packages/react/src/components/Stepper/index.tsx
index 536f1ea15..e3e47469e 100644
--- a/packages/react/src/components/Stepper/index.tsx
+++ b/packages/react/src/components/Stepper/index.tsx
@@ -61,7 +61,7 @@ export const Step = (props: StepProps) => {
             aria-label={tooltipText}
           >
             <div className="Stepper__step-indicator">
-              {props.status === 'complete' && <Icon type={'check'} />}
+              {status === 'complete' && <Icon type="check" />}
             </div>
           </TooltipTabstop>
         ) : (

From c3a79a13814d861c4ee8b9b12cd046b0b4bf3128 Mon Sep 17 00:00:00 2001
From: orest-s <139442720+orest-s@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:24:33 +0200
Subject: [PATCH 4/7] Update packages/react/src/components/Stepper/index.tsx

Co-authored-by: Jason <jason@scurker.com>
---
 packages/react/src/components/Stepper/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Stepper/index.tsx b/packages/react/src/components/Stepper/index.tsx
index e3e47469e..a79604aff 100644
--- a/packages/react/src/components/Stepper/index.tsx
+++ b/packages/react/src/components/Stepper/index.tsx
@@ -67,7 +67,7 @@ export const Step = (props: StepProps) => {
         ) : (
           <>
             <div className="Stepper__step-indicator">
-              {props.status === 'complete' && <Icon type={'check'} />}
+              {status === 'complete' && <Icon type="check" />}
             </div>
 
             {children ? (

From bd7a002efcc1d34ca20f69c8712318e2412091c9 Mon Sep 17 00:00:00 2001
From: orest-s <139442720+orest-s@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:24:40 +0200
Subject: [PATCH 5/7] Update packages/styles/stepper.css

Co-authored-by: Jason <jason@scurker.com>
---
 packages/styles/stepper.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/stepper.css b/packages/styles/stepper.css
index dd7d35795..cef37fcc7 100644
--- a/packages/styles/stepper.css
+++ b/packages/styles/stepper.css
@@ -75,7 +75,7 @@
   box-shadow: 0 0 0 2px var(--accent-dark);
 }
 
-.Stepper__step--current .Stepper__step-indicator::before {
+.Stepper__step--current .Stepper__step-indicator:before {
   font-weight: var(--font-weight-medium);
 }
 

From 6f6081fce30ce869447bd9f1ecf9f380e4a479d1 Mon Sep 17 00:00:00 2001
From: orest-s <orest.hlodan@deque.com>
Date: Thu, 16 Nov 2023 00:27:03 +0200
Subject: [PATCH 6/7] fix: refactored code on new style and fixed minor nits
 with using ::before and --black var

---
 .../react/src/components/Stepper/index.tsx    |  34 ++++-
 packages/styles/stepper.css                   | 133 +++++++++---------
 2 files changed, 95 insertions(+), 72 deletions(-)

diff --git a/packages/react/src/components/Stepper/index.tsx b/packages/react/src/components/Stepper/index.tsx
index a79604aff..199951380 100644
--- a/packages/react/src/components/Stepper/index.tsx
+++ b/packages/react/src/components/Stepper/index.tsx
@@ -46,7 +46,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
@@ -60,18 +65,35 @@ export const Step = (props: StepProps) => {
             association="aria-labelledby"
             aria-label={tooltipText}
           >
-            <div className="Stepper__step-indicator">
-              {status === 'complete' && <Icon type="check" />}
+            <div
+              className={classNames(
+                'Stepper__step-indicator',
+                `Stepper__step--${status}-indicator`
+              )}
+            >
+              {status === 'complete' && <Icon type={'check'} />}
             </div>
           </TooltipTabstop>
         ) : (
           <>
-            <div className="Stepper__step-indicator">
-              {status === 'complete' && <Icon type="check" />}
+            <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}
           </>
         )}
diff --git a/packages/styles/stepper.css b/packages/styles/stepper.css
index cef37fcc7..92e44426f 100644
--- a/packages/styles/stepper.css
+++ b/packages/styles/stepper.css
@@ -1,14 +1,58 @@
-.Stepper {
+:root {
   --step-indicator-size: 1.867em;
   --step-line-height: 0.53em;
   --step-line-offset: 1.53em;
 
   --step-indicator-content-size: 1.067em;
 
+  --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;
@@ -26,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 {
@@ -43,15 +87,15 @@
   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 {
+.Stepper__step-indicator:before {
   font-size: var(--text-size-small);
   counter-increment: stepper;
   content: counter(stepper);
@@ -62,87 +106,44 @@
   width: 100%;
   padding-top: var(--space-smallest);
   font-size: var(--text-size-smaller);
-  color: var(--gray-60);
+  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-indicator {
+  background: var(--step-current-indicator-background);
+  color: var(--step-current-indicator-color);
+  box-shadow: var(--step-current-indicator-shadow);
 }
 
-.Stepper__step--current .Stepper__step-indicator:before {
+.Stepper__step--current-indicator:before {
   font-weight: var(--font-weight-medium);
 }
 
-.Stepper__step--current .Stepper__step-label {
+.Stepper__step--current-label {
   font-weight: var(--font-weight-medium);
-  color: var(--gray-90);
+  color: var(--step-current-label-color);
 }
 
-.Stepper__step--current .Stepper__step-line,
-.Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-dark);
+.Stepper__step--current-line,
+.Stepper__step--complete-line {
+  border-color: var(--step-current-complete-line-border-color);
 }
 
-.Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-dark);
-  color: var(--white);
+.Stepper__step--complete-indicator {
+  background: var(--step-complete-indicator-background);
+  color: var(--step-complete-indicator-color);
 }
 
-.Stepper__step--complete .Stepper__step-indicator::before {
+.Stepper__step--complete-indicator:before {
   content: '';
 }
 
-.Stepper__step--complete .Stepper__step-indicator svg {
+.Stepper__step--complete-indicator svg {
   height: var(--step-indicator-content-size);
   width: var(--step-indicator-content-size);
-  color: var(--accent-success);
-}
-
-/* Dark Theme */
-.cauldron--theme-dark .Stepper {
-  color: var(--accent-light);
-  background-color: var(--accent-dark);
-}
-
-.cauldron--theme-dark .Stepper__step-label {
-  color: var(--accent-light);
-}
-
-.cauldron--theme-dark .Stepper__step-line {
-  border-top: var(--step-line-height) solid var(--accent-medium);
-}
-
-.cauldron--theme-dark .Stepper__step-indicator {
-  color: var(--white);
-  background: var(--accent-medium);
-}
-
-.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);
-}
-
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-line,
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-info);
-}
-
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-info);
-  color: var(--accent-dark);
-}
-
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-label {
-  color: var(--white);
-}
-
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator svg {
-  color: var(--black);
+  color: var(--step-complete-indicator-svg-color);
 }

From 640762810fca00e0f9f802072d539efa6f34fd69 Mon Sep 17 00:00:00 2001
From: orest-s <orest.hlodan@deque.com>
Date: Fri, 22 Dec 2023 17:26:44 +0200
Subject: [PATCH 7/7] fix: changed em to rem

---
 packages/styles/stepper.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/styles/stepper.css b/packages/styles/stepper.css
index 92e44426f..c4298a991 100644
--- a/packages/styles/stepper.css
+++ b/packages/styles/stepper.css
@@ -1,9 +1,9 @@
 :root {
-  --step-indicator-size: 1.867em;
-  --step-line-height: 0.53em;
-  --step-line-offset: 1.53em;
+  --step-indicator-size: 1.75rem;
+  --step-line-height: 0.5rem;
+  --step-line-offset: 1.438rem;
 
-  --step-indicator-content-size: 1.067em;
+  --step-indicator-content-size: 1rem;
 
   --step-label-color: var(--gray-60);
   --step-line-color: var(--accent-light);