From 2f064971432c8a780d784f5a6a67427849df95db Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Thu, 7 Mar 2024 18:35:11 -0600
Subject: [PATCH 01/16] feat(stepper,stepper-item): add component tokens

---
 .../components/stepper-item/stepper-item.scss | 128 ++++++++++--------
 .../src/components/stepper/stepper.scss       |  38 +++---
 2 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index c4b9a288238..1f2b1de090d 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -1,12 +1,15 @@
 :host([scale="s"]) {
-  --calcite-stepper-item-spacing-unit-s: theme("spacing.1");
-  --calcite-stepper-item-spacing-unit-m: theme("spacing.3");
-  --calcite-stepper-item-spacing-unit-l: theme("spacing.4");
-  --calcite-internal-stepper-action-inline-size: theme("spacing.8");
-  @apply text-n1h;
+  --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-xxs);
+  --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-md);
+  --calcite-stepper-item-spacing-unit-l: var(--calcite-spacing-xl);
+  --calcite-internal-stepper-action-inline-size: var(--calcite-spacing-xxxl);
+
+  font-size: var(--calcite-font-size);
+  line-height: var(--calcite-font-line-height-fixed-base);
   margin-inline-end: theme("margin.1");
   .stepper-item-description {
-    @apply text-n2h;
+    font-size: var(--calcite-font-size-sm);
+    line-height: var(--calcite-font-line-height-fixed-base);
   }
 }
 
@@ -15,10 +18,13 @@
   --calcite-stepper-item-spacing-unit-m: theme("spacing.4");
   --calcite-stepper-item-spacing-unit-l: theme("spacing.5");
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
-  @apply text-0h;
+
+  font-size: var(--calcite-font-size-md);
+  line-height: var(--calcite-font-line-height-fixed-xl);
   margin-inline-end: theme("margin.2");
   .stepper-item-description {
-    @apply text-n1h;
+    font-size: var(--calcite-font-size);
+    line-height: var(--calcite-font-line-height-fixed-base);
   }
 }
 
@@ -27,10 +33,13 @@
   --calcite-stepper-item-spacing-unit-m: theme("spacing.5");
   --calcite-stepper-item-spacing-unit-l: theme("spacing.6");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
-  @apply text-1h;
+
+  font-size: var(calcite-font-size-lg);
+  line-height: var(--calcite-font-line-height-fixed-xl);
   margin-inline-end: theme("margin.3");
   .stepper-item-description {
-    @apply text-0h;
+    font-size: var(--calcite-font-size-md);
+    line-height: var(--calcite-font-line-height-fixed-xl);
   }
 }
 
@@ -44,9 +53,7 @@
 }
 
 :host .container {
-  @apply text-color-3
-    border-color-3
-    relative
+  @apply relative
     flex
     flex-grow
     cursor-pointer
@@ -58,6 +65,8 @@
     outline-none
     duration-150
     ease-in-out;
+  color: var(--calcite-color-text-3);
+  border-color: var(--calcite-color-border-3);
 }
 
 // focus styles
@@ -89,24 +98,25 @@
 }
 
 :host .stepper-item-content {
-  @apply text-n2-wrap
-    hidden
+  @apply hidden
     w-full
     flex-col;
+  font-size: var(--calcite-font-size-sm);
+  line-height: 1.375;
 }
 
 // stepper item icon
 :host .stepper-item-icon {
   margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
-  @apply text-color-3
-    opacity-disabled
-    mt-px
+  @apply mt-px
     inline-flex
     h-3
     flex-shrink-0
     self-start
     duration-150
     ease-in-out;
+  color: var(--calcite-color-text-3);
+  opacity: var(--calcite-opacity-disabled);
 }
 
 // stepper item title
@@ -121,18 +131,21 @@
   @apply flex w-full;
 }
 :host .stepper-item-heading {
-  @apply text-color-2 mb-1 font-medium;
+  @apply mb-1;
+
+  color: var(--calcite-color-text-2);
+  font-weight: var(--calcite-font-weight-medium);
 }
 :host .stepper-item-description {
-  @apply text-color-3;
+  color: var(--calcite-color-text-3);
 }
 
 :host .stepper-item-number {
-  @apply text-color-3
-    font-medium
-    duration-150
+  @apply duration-150
     ease-in-out;
   margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  color: var(--calcite-color-text-3);
+  font-weight: var(--calcite-font-weight-medium);
 }
 
 @include disabled();
@@ -141,53 +154,52 @@
   // todo dark mode
   border-color: rgba($h-bb-060, 0.5);
   & .stepper-item-icon {
-    color: theme("backgroundColor.brand");
+    color: var(--calcite-color-brand);
   }
 }
 
 :host([error]) .container {
-  @apply border-t-color-danger;
+  border-block-start-color: var(--calcite-color-status-danger);
   & .stepper-item-number {
-    color: theme("backgroundColor.danger");
+    color: var(--calcite-color-status-danger);
   }
   & .stepper-item-icon {
-    @apply opacity-100;
-    color: theme("backgroundColor.danger");
+    opacity: var(--calcite-opacity-full);
+    color: var(--calcite-color-status-danger);
   }
 }
 
 :host(:hover:not([disabled]):not([selected])) .container,
 :host(:focus:not([disabled]):not([selected])) .container {
-  @apply border-t-color-brand;
-
+  border-block-start-color: var(--calcite-color-brand);
   & .stepper-item-heading {
-    @apply text-color-1;
+    color: var(--calcite-color-text-1);
   }
   & .stepper-item-description {
-    @apply text-color-2;
+    color: var(--calcite-color-text-2);
   }
 }
 
 :host([error]:hover:not([disabled]):not([selected])) .container,
 :host([error]:focus:not([disabled]):not([selected])) .container {
-  @apply border-t-color-danger-hover;
+  border-block-start-color: var(--calcite-color-status-danger-hover);
 }
 
 :host([selected]) .container {
-  border-block-start-color: theme("backgroundColor.brand");
+  border-block-start-color: var(--calcite-color-brand);
   & .stepper-item-heading {
-    @apply text-color-1;
+    color: var(--calcite-color-text-1);
   }
   & .stepper-item-description {
-    @apply text-color-2;
+    color: var(--calcite-color-text-2);
   }
   & .stepper-item-number {
-    color: theme("backgroundColor.brand");
+    color: var(--calcite-color-brand);
   }
 
   & .stepper-item-icon {
-    color: theme("backgroundColor.brand");
-    @apply opacity-100;
+    color: var(--calcite-color-brand);
+    opacity: var(--calcite-opacity-full);
   }
 }
 
@@ -198,13 +210,13 @@
 }
 
 :host([layout="vertical"]) .container {
-  @apply border-color-3
-  mx-0
+  @apply mx-0
   mt-0
   flex-auto
   border-t-0
   border-solid
   py-0;
+  border-color: var(--calcite-color-border-3);
   border-inline-start-width: theme("borderWidth.2");
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 
@@ -226,13 +238,13 @@
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
-  @apply border-color-brand;
+  border-color: var(--calcite-color-brand);
 }
 :host([layout="vertical"][error]) .container {
-  @apply border-color-danger;
+  border-color: var(--calcite-color-status-danger);
 }
 :host([layout="vertical"][selected]) .container {
-  @apply border-color-brand;
+  border-color: var(--calcite-color-brand);
 
   & .stepper-item-content:not(:empty) {
     margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
@@ -244,7 +256,7 @@
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
-  @apply border-color-danger-hover;
+  border-color: var(--calcite-color-status-danger-hover);
 }
 
 :host([layout="horizontal"]),
@@ -256,12 +268,12 @@
   }
 
   .stepper-item-header {
-    @apply border-color-3
-    border-0
+    @apply border-0
     border-solid
     border-t-2
     focus-base;
     grid-row: items;
+    border-color: var(--calcite-color-border-3);
 
     &:focus {
       @apply focus-outset;
@@ -307,19 +319,19 @@
 :host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    @apply border-color-brand;
+    border-color: var(--calcite-color-brand);
   }
 }
 :host([layout="horizontal"][error]),
 :host([layout="horizontal-single"][error]) {
   .stepper-item-header {
-    @apply border-color-danger;
+    border-color: var(--calcite-color-status-danger);
   }
 }
 :host([layout="horizontal"][selected]),
 :host([layout="horizontal-single"][selected]) {
   .stepper-item-header {
-    @apply border-color-brand;
+    border-color: var(--calcite-color-brand);
   }
 }
 :host([layout="horizontal"]:hover:not([disabled]):not([selected])),
@@ -335,7 +347,7 @@
 :host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    @apply border-color-danger-hover;
+    border-color: var(--calcite-color-status-danger-hover);
   }
 }
 
@@ -374,28 +386,28 @@
 
 :host([layout="horizontal-single"][error]) .container {
   & .stepper-item-number {
-    color: theme("backgroundColor.danger");
+    color: var(--calcite-color-status-danger);
   }
   & .stepper-item-icon {
-    @apply opacity-100;
-    color: theme("backgroundColor.danger");
+    opacity: var(--calcite-opacity-full);
+    color: var(--calcite-color-status-danger);
   }
 }
 
 :host([layout="horizontal-single"][error][selected]),
 :host([layout="horizontal-single"][complete][selected]) .container {
-  @apply text-color-3;
+  color: var(--calcite-color-text-3);
   & .stepper-item-heading {
-    @apply text-color-2;
+    color: var(--calcite-color-text-2);
   }
 }
 
 :host([layout="horizontal-single"][complete][selected]) .container {
   & .stepper-item-icon {
-    @apply opacity-disabled;
+    opacity: var(--calcite-opacity-disabled);
   }
   & .stepper-item-number {
-    @apply text-color-3;
+    color: var(--calcite-color-text-3);
   }
 }
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 884398a6481..74e7e8a24af 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -1,3 +1,5 @@
+@import "~@esri/calcite-design-tokens/dist/scss/core";
+
 /**
  * CSS Custom Properties
  *
@@ -10,23 +12,23 @@
  */
 
 :host([scale="s"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.1");
+  --calcite-internal-stepper-item-spacing-unit-s: var(--calcite-spacing-xxs);
   --calcite-internal-stepper-action-block-size: theme("spacing.11");
-  --calcite-internal-stepper-action-inline-size: theme("spacing.8");
-  --calcite-internal-step-bar-gap: theme("spacing.1");
+  --calcite-internal-stepper-action-inline-size: var(--calcite-spacing-xxxl);
+  --calcite-internal-step-bar-gap: var(--calcite-spacing-xxs);
 }
 
 :host([scale="m"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.2");
+  --calcite-internal-stepper-item-spacing-unit-s: var(--calcite-spacing-sm);
   --calcite-internal-stepper-action-block-size: theme("spacing.13");
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
 }
 
 :host([scale="l"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.3");
+  --calcite-internal-stepper-item-spacing-unit-s: var(--calcite-spacing-md);
   --calcite-internal-stepper-action-block-size: theme("spacing.16");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
-  --calcite-internal-step-bar-gap: theme("spacing.3");
+  --calcite-internal-step-bar-gap: var(--calcite-spacing-md);
 }
 
 :host {
@@ -57,21 +59,21 @@
     grid-template-areas:
       "items"
       "content";
-    gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
+    gap: var(--calcite-spacing-sm) var(--calcite-internal-stepper-item-spacing-unit-s);
   }
 }
 
 :host([layout="horizontal"][scale="s"]),
 :host([layout="horizontal-single"][scale="s"]) {
   .container {
-    gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
+    gap: var(--calcite-spacing-xxs) var(--calcite-internal-stepper-item-spacing-unit-s);
   }
 }
 
 :host([layout="horizontal"][scale="l"]),
 :host([layout="horizontal-single"][scale="l"]) {
   .container {
-    gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
+    gap: var(--calcite-spacing-md) var(--calcite-internal-stepper-item-spacing-unit-s);
   }
 }
 
@@ -87,28 +89,28 @@
 
 .action-container {
   @apply absolute flex justify-between;
-  padding-block: 0.25rem;
-  inline-size: 100%;
+  padding-block: var(--calcite-spacing-xxs);
+  inline-size: #{$calcite-size-relative-100};
 }
 
 @mixin stepBar {
   .step-bar {
     @apply flex;
-    block-size: 100%;
-    inline-size: 100%;
+    block-size: #{$calcite-size-relative-100};
+    inline-size: #{$calcite-size-relative-100};
   }
 
   .step-bar-container {
     @apply flex absolute justify-between items-start;
     block-size: 0.125rem;
     inline-size: 100%;
-    gap: var(--calcite-internal-step-bar-gap, 0.5rem);
+    gap: var(--calcite-internal-step-bar-gap, var(--calcite-spacing-sm));
   }
 
   .step-bar--inactive {
     fill: var(--calcite-color-border-3, #dfdfdf);
-    fill-opacity: 1;
-    block-size: 100%;
+    fill-opacity: var(--calcite-opacity-full);
+    block-size: #{$calcite-size-relative-100};
   }
 
   .step-bar--active {
@@ -117,7 +119,7 @@
 
   .step-bar--complete {
     fill: var(--calcite-color-brand);
-    fill-opacity: 0.5;
+    fill-opacity: var(--calcite-opacity-half);
   }
 
   .step-bar--error {
@@ -125,7 +127,7 @@
   }
 
   .step-bar--disabled {
-    opacity: 0.5;
+    opacity: var(--calcite-opacity-half);
   }
 }
 

From 457b4f5d8a69a3d73f8e4d4392a770ee08150938 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Mar 2024 13:54:20 -0600
Subject: [PATCH 02/16] add step-bar fill color token

---
 .../components/stepper-item/stepper-item.scss |  2 +-
 .../src/components/stepper/stepper.scss       | 21 ++++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 1f2b1de090d..1cfe27f9fe1 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -380,7 +380,7 @@
 :host([layout="horizontal-single"]) .stepper-item-header {
   @apply border-none box-border
   me-0;
-  inline-size: 100%;
+  inline-size: var(--calcite-container-size-content-fluid);
   padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
 }
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 74e7e8a24af..dd53dcffcff 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -8,6 +8,7 @@
  * @prop --calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
  * @prop --calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
+ * @prop --calcite-stepper-step-bar-color : Specifies fill color for step-bar when layout="horizontal-single".
  *
  */
 
@@ -38,12 +39,12 @@
 .container {
   @apply relative
     flex
-    w-full
     min-w-fit
     flex-row
     flex-wrap
     items-stretch
     justify-between;
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 :host([layout="vertical"]) .container {
@@ -90,35 +91,35 @@
 .action-container {
   @apply absolute flex justify-between;
   padding-block: var(--calcite-spacing-xxs);
-  inline-size: #{$calcite-size-relative-100};
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 @mixin stepBar {
   .step-bar {
     @apply flex;
-    block-size: #{$calcite-size-relative-100};
-    inline-size: #{$calcite-size-relative-100};
+    block-size: var(--calcite-container-size-content-fluid);
+    inline-size: var(--calcite-container-size-content-fluid);
   }
 
   .step-bar-container {
     @apply flex absolute justify-between items-start;
-    block-size: 0.125rem;
-    inline-size: 100%;
+    block-size: var(--calcite-spacing-base);
+    inline-size: var(--calcite-container-size-content-fluid);
     gap: var(--calcite-internal-step-bar-gap, var(--calcite-spacing-sm));
   }
 
   .step-bar--inactive {
-    fill: var(--calcite-color-border-3, #dfdfdf);
+    fill: var(--calcite-stepper-step-bar-color, var(--calcite-color-border-3));
     fill-opacity: var(--calcite-opacity-full);
-    block-size: #{$calcite-size-relative-100};
+    block-size: var(--calcite-container-size-content-fluid);
   }
 
   .step-bar--active {
-    fill: var(--calcite-color-brand);
+    fill: var(--calcite-stepper-step-bar-color, var(--calcite-color-brand));
   }
 
   .step-bar--complete {
-    fill: var(--calcite-color-brand);
+    fill: var(--calcite-stepper-step-bar-color, var(--calcite-color-brand));
     fill-opacity: var(--calcite-opacity-half);
   }
 

From c817c85ecbc0b203cc5e77390234af1e54f03704 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 11 Mar 2024 18:46:31 -0500
Subject: [PATCH 03/16] add tokens for stepper-item

---
 .../components/stepper-item/stepper-item.scss | 94 +++++++++++++------
 .../src/components/stepper/stepper.scss       | 13 ++-
 2 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 1cfe27f9fe1..00767dff957 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -1,3 +1,17 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ * --calcite-stepper-item-text-color
+ * --calcite-stepper-item-icon-color
+ * --calcite-stepper-item-border-color
+ * --calcite-stepper-item-number-text-color
+ * --calcite-stepper-item-heading-text-color
+ * --calcite-stepper-item-description-text-color
+ * 
+ *
+ */
+
 :host([scale="s"]) {
   --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-xxs);
   --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-md);
@@ -14,9 +28,9 @@
 }
 
 :host([scale="m"]) {
-  --calcite-stepper-item-spacing-unit-s: theme("spacing.2");
-  --calcite-stepper-item-spacing-unit-m: theme("spacing.4");
-  --calcite-stepper-item-spacing-unit-l: theme("spacing.5");
+  --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-sm);
+  --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-xl);
+  --calcite-stepper-item-spacing-unit-l: var(--calcite-spacing-xxl);
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
 
   font-size: var(--calcite-font-size-md);
@@ -29,8 +43,8 @@
 }
 
 :host([scale="l"]) {
-  --calcite-stepper-item-spacing-unit-s: theme("spacing.3");
-  --calcite-stepper-item-spacing-unit-m: theme("spacing.5");
+  --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-md);
+  --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-xxl);
   --calcite-stepper-item-spacing-unit-l: theme("spacing.6");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
 
@@ -59,14 +73,17 @@
     cursor-pointer
     flex-col
     border-0
-    border-t-2
     border-solid
     no-underline
     outline-none
     duration-150
     ease-in-out;
-  color: var(--calcite-color-text-3);
-  border-color: var(--calcite-color-border-3);
+  border-block-start-width: var(--calcite-spacing-base);
+  color: var(--calcite-stepper-item-text-color, var(--calcite-color-text-3));
+  border-color: var(
+    --calcite-stepper-item-border-color,
+    var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
+  );
 }
 
 // focus styles
@@ -99,10 +116,10 @@
 
 :host .stepper-item-content {
   @apply hidden
-    w-full
     flex-col;
+  inline-size: var(--calcite-container-size-content-fluid);
   font-size: var(--calcite-font-size-sm);
-  line-height: 1.375;
+  line-height: var(--calcite-font-line-height-relative-snug);
 }
 
 // stepper item icon
@@ -115,7 +132,11 @@
     self-start
     duration-150
     ease-in-out;
-  color: var(--calcite-color-text-3);
+  color: var(
+    --calcite-stepper-item-icon-color,
+    var(--calcite-internal-stepper-item-icon-color),
+    var(--calcite-color-text-3)
+  );
   opacity: var(--calcite-opacity-disabled);
 }
 
@@ -130,21 +151,32 @@
 :host .stepper-item-description {
   @apply flex w-full;
 }
+
 :host .stepper-item-heading {
   @apply mb-1;
 
-  color: var(--calcite-color-text-2);
+  color: var(
+    --calcite-stepper-item-heading-text-color,
+    var(--calcite-internal-stepper-item-heading-text-color, var(--calcite-color-text-2))
+  );
   font-weight: var(--calcite-font-weight-medium);
 }
+
 :host .stepper-item-description {
-  color: var(--calcite-color-text-3);
+  color: var(
+    --calcite-stepper-item-description-text-color,
+    var(--calcite-internal-stepper-item-description-text-color, var(--calcite-color-text-3))
+  );
 }
 
 :host .stepper-item-number {
   @apply duration-150
     ease-in-out;
   margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
-  color: var(--calcite-color-text-3);
+  color: var(
+    --calcite-stepper-item-number-text-color,
+    var(--calcite-internal-stepper-item-number-text-color, var(--calcite-color-text-3))
+  );
   font-weight: var(--calcite-font-weight-medium);
 }
 
@@ -152,20 +184,20 @@
 
 :host([complete]) .container {
   // todo dark mode
-  border-color: rgba($h-bb-060, 0.5);
+  --calcite-internal-stepper-item-border-color: rgba(var(--calcite-color-brand), 0.5);
   & .stepper-item-icon {
-    color: var(--calcite-color-brand);
+    --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
   }
 }
 
 :host([error]) .container {
-  border-block-start-color: var(--calcite-color-status-danger);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
   & .stepper-item-number {
-    color: var(--calcite-color-status-danger);
+    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
   }
   & .stepper-item-icon {
     opacity: var(--calcite-opacity-full);
-    color: var(--calcite-color-status-danger);
+    --calcite-internal-stepper-item-icon-color: var(--calcite-color-status-danger);
   }
 }
 
@@ -173,32 +205,32 @@
 :host(:focus:not([disabled]):not([selected])) .container {
   border-block-start-color: var(--calcite-color-brand);
   & .stepper-item-heading {
-    color: var(--calcite-color-text-1);
+    --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
   }
   & .stepper-item-description {
-    color: var(--calcite-color-text-2);
+    --calcite-internal-stepper-item-description-text-color: var(--calcite-color-text-2);
   }
 }
 
 :host([error]:hover:not([disabled]):not([selected])) .container,
 :host([error]:focus:not([disabled]):not([selected])) .container {
-  border-block-start-color: var(--calcite-color-status-danger-hover);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
 }
 
 :host([selected]) .container {
-  border-block-start-color: var(--calcite-color-brand);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
   & .stepper-item-heading {
-    color: var(--calcite-color-text-1);
+    --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
   }
   & .stepper-item-description {
-    color: var(--calcite-color-text-2);
+    --calcite-internal-stepper-item-description-text-color: var(--calcite-color-text-2);
   }
   & .stepper-item-number {
-    color: var(--calcite-color-brand);
+    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-brand);
   }
 
   & .stepper-item-icon {
-    color: var(--calcite-color-brand);
+    --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
     opacity: var(--calcite-opacity-full);
   }
 }
@@ -234,7 +266,7 @@
 }
 
 :host([layout="vertical"][complete]) .container {
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: rgba(var(--calcite-color-brand), 0.5);
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
@@ -252,7 +284,7 @@
 }
 :host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: rgba(var(--calcite-color-brand), 0.5);
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
@@ -311,7 +343,7 @@
 :host([layout="horizontal"][complete]),
 :host([layout="horizontal-single"][complete]) {
   .stepper-item-header {
-    border-color: rgba($h-bb-060, 0.5);
+    border-color: rgba(var(--calcite-color-brand), 0.5);
   }
 }
 :host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
@@ -339,7 +371,7 @@
 :host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: rgba($h-bb-060, 0.5);
+    border-color: rgba(var(--calcite-color-brand), 0.5);
   }
 }
 :host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index dd53dcffcff..20145eed94e 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -8,7 +8,10 @@
  * @prop --calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
  * @prop --calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
- * @prop --calcite-stepper-step-bar-color : Specifies fill color for step-bar when layout="horizontal-single".
+ * @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar when `layout="horizontal-single"`.
+ * @prop --calcite-stepper-step-bar-active-fill-color : Specifies fill color for active step-bar when `layout="horizontal-single"`.
+ * @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar when `layout="horizontal-single"`.
+ * @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar when `layout="horizontal-single"`.
  *
  */
 
@@ -109,22 +112,22 @@
   }
 
   .step-bar--inactive {
-    fill: var(--calcite-stepper-step-bar-color, var(--calcite-color-border-3));
+    fill: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
     fill-opacity: var(--calcite-opacity-full);
     block-size: var(--calcite-container-size-content-fluid);
   }
 
   .step-bar--active {
-    fill: var(--calcite-stepper-step-bar-color, var(--calcite-color-brand));
+    fill: var(--calcite-stepper-step-bar-active-fill-color, var(--calcite-color-brand));
   }
 
   .step-bar--complete {
-    fill: var(--calcite-stepper-step-bar-color, var(--calcite-color-brand));
+    fill: var(--calcite-stepper-step-bar-complete-fill-color, var(--calcite-color-brand));
     fill-opacity: var(--calcite-opacity-half);
   }
 
   .step-bar--error {
-    fill: var(--calcite-color-status-danger);
+    fill: var(--calcite-stepper-step-bar-error-fill-color, var(--calcite-color-status-danger));
   }
 
   .step-bar--disabled {

From 96badf478ed8fd9772b0ce435c88604c5e113c81 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 12 Mar 2024 10:49:21 -0500
Subject: [PATCH 04/16] update jsdoc

---
 .../components/stepper-item/stepper-item.scss | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 00767dff957..2bdfd235315 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -2,13 +2,14 @@
  * CSS Custom Properties
  *
  * These properties can be overridden using the component's tag as selector.
- * --calcite-stepper-item-text-color
- * --calcite-stepper-item-icon-color
- * --calcite-stepper-item-border-color
- * --calcite-stepper-item-number-text-color
- * --calcite-stepper-item-heading-text-color
- * --calcite-stepper-item-description-text-color
- * 
+ *
+ * @prop --calcite-stepper-item-border-color: Specifies border color of component.
+ * @prop --calcite-stepper-item-description-text-color: Specifies text color of description of component.
+ * @prop --calcite-stepper-item-heading-text-color: Specifies text color of heading of component.
+ * @prop --calcite-stepper-item-icon-color: Specifies color of icon of component.
+ * @prop --calcite-stepper-item-icon-color: Specifies icon color of component.
+ * @prop --calcite-stepper-item-number-text-color: Specifies text color of number of component.
+ * @prop --calcite-stepper-item-text-color: Specifies text color of component.
  *
  */
 
@@ -79,7 +80,10 @@
     duration-150
     ease-in-out;
   border-block-start-width: var(--calcite-spacing-base);
-  color: var(--calcite-stepper-item-text-color, var(--calcite-color-text-3));
+  color: var(
+    --calcite-stepper-item-text-color,
+    var(--calcite-internal-stepper-item-text-color, var(--calcite-color-text-3))
+  );
   border-color: var(
     --calcite-stepper-item-border-color,
     var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
@@ -248,7 +252,10 @@
   border-t-0
   border-solid
   py-0;
-  border-color: var(--calcite-color-border-3);
+  border-color: var(
+    --calcite-stepper-item-border-color,
+    var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
+  );
   border-inline-start-width: theme("borderWidth.2");
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 
@@ -266,17 +273,17 @@
 }
 
 :host([layout="vertical"][complete]) .container {
-  border-color: rgba(var(--calcite-color-brand), 0.5);
+  --calcite-internal-stepper-item-border-color: rgba(var(--calcite-color-brand), 0.5);
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
-  border-color: var(--calcite-color-brand);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
 }
 :host([layout="vertical"][error]) .container {
-  border-color: var(--calcite-color-status-danger);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
 }
 :host([layout="vertical"][selected]) .container {
-  border-color: var(--calcite-color-brand);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
 
   & .stepper-item-content:not(:empty) {
     margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
@@ -284,11 +291,11 @@
 }
 :host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
-  border-color: rgba(var(--calcite-color-brand), 0.5);
+  --calcite-internal-stepper-item-border-color: rgba(var(--calcite-color-brand), 0.5);
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
-  border-color: var(--calcite-color-status-danger-hover);
+  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
 }
 
 :host([layout="horizontal"]),
@@ -302,11 +309,10 @@
   .stepper-item-header {
     @apply border-0
     border-solid
-    border-t-2
     focus-base;
     grid-row: items;
+    border-block-start-width: var(--calcite-spacing-base);
     border-color: var(--calcite-color-border-3);
-
     &:focus {
       @apply focus-outset;
     }
@@ -418,19 +424,19 @@
 
 :host([layout="horizontal-single"][error]) .container {
   & .stepper-item-number {
-    color: var(--calcite-color-status-danger);
+    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
   }
   & .stepper-item-icon {
     opacity: var(--calcite-opacity-full);
-    color: var(--calcite-color-status-danger);
+    --calcite-internal-stepper-item-icon-color: var(--calcite-color-status-danger);
   }
 }
 
 :host([layout="horizontal-single"][error][selected]),
 :host([layout="horizontal-single"][complete][selected]) .container {
-  color: var(--calcite-color-text-3);
+  --calcite-internal-stepper-item-text-color: var(--calcite-color-text-3);
   & .stepper-item-heading {
-    color: var(--calcite-color-text-2);
+    --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-2);
   }
 }
 
@@ -439,7 +445,7 @@
     opacity: var(--calcite-opacity-disabled);
   }
   & .stepper-item-number {
-    color: var(--calcite-color-text-3);
+    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-text-3);
   }
 }
 

From 58e448838658dbb2fc7a929571defe7a7aba4707 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 12 Mar 2024 11:55:41 -0500
Subject: [PATCH 05/16] fix icon colors

---
 .../src/components/stepper-item/stepper-item.scss  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 2bdfd235315..8bba77617b6 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -7,7 +7,6 @@
  * @prop --calcite-stepper-item-description-text-color: Specifies text color of description of component.
  * @prop --calcite-stepper-item-heading-text-color: Specifies text color of heading of component.
  * @prop --calcite-stepper-item-icon-color: Specifies color of icon of component.
- * @prop --calcite-stepper-item-icon-color: Specifies icon color of component.
  * @prop --calcite-stepper-item-number-text-color: Specifies text color of number of component.
  * @prop --calcite-stepper-item-text-color: Specifies text color of component.
  *
@@ -138,8 +137,7 @@
     ease-in-out;
   color: var(
     --calcite-stepper-item-icon-color,
-    var(--calcite-internal-stepper-item-icon-color),
-    var(--calcite-color-text-3)
+    var(--calcite-internal-stepper-item-icon-color, var(--calcite-color-text-3))
   );
   opacity: var(--calcite-opacity-disabled);
 }
@@ -188,7 +186,7 @@
 
 :host([complete]) .container {
   // todo dark mode
-  --calcite-internal-stepper-item-border-color: rgba(var(--calcite-color-brand), 0.5);
+  --calcite-internal-stepper-item-border-color: #007ac280;
   & .stepper-item-icon {
     --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
   }
@@ -273,7 +271,7 @@
 }
 
 :host([layout="vertical"][complete]) .container {
-  --calcite-internal-stepper-item-border-color: rgba(var(--calcite-color-brand), 0.5);
+  --calcite-internal-stepper-item-border-color: #007ac280;
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
@@ -291,7 +289,7 @@
 }
 :host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
-  --calcite-internal-stepper-item-border-color: rgba(var(--calcite-color-brand), 0.5);
+  --calcite-internal-stepper-item-border-color: #007ac280;
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
@@ -349,7 +347,7 @@
 :host([layout="horizontal"][complete]),
 :host([layout="horizontal-single"][complete]) {
   .stepper-item-header {
-    border-color: rgba(var(--calcite-color-brand), 0.5);
+    border-color: #007ac280;
   }
 }
 :host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
@@ -377,7 +375,7 @@
 :host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: rgba(var(--calcite-color-brand), 0.5);
+    border-color: #007ac280;
   }
 }
 :host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),

From b1b0d2371394d5ff3efde2c423cfb0749852d721 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 12 Mar 2024 14:14:46 -0500
Subject: [PATCH 06/16] add storybook tests

---
 .../components/stepper-item/stepper-item.scss |  35 +++---
 .../src/components/stepper/stepper.stories.ts | 104 ++++++++++++++++++
 2 files changed, 125 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 8bba77617b6..0b98444b18c 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -186,14 +186,12 @@
 
 :host([complete]) .container {
   // todo dark mode
-  --calcite-internal-stepper-item-border-color: #007ac280;
   & .stepper-item-icon {
     --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
   }
 }
 
 :host([error]) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
   & .stepper-item-number {
     --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
   }
@@ -214,13 +212,7 @@
   }
 }
 
-:host([error]:hover:not([disabled]):not([selected])) .container,
-:host([error]:focus:not([disabled]):not([selected])) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
-}
-
 :host([selected]) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
   & .stepper-item-heading {
     --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
   }
@@ -344,46 +336,61 @@
   }
 }
 
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
+  .stepper-item-header {
+    border-color: var(
+      --calcite-stepper-item-border-color,
+      var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
+    );
+  }
+}
+
 :host([layout="horizontal"][complete]),
 :host([layout="horizontal-single"][complete]) {
   .stepper-item-header {
-    border-color: #007ac280;
+    --calcite-internal-stepper-item-border-color: #007ac280;
   }
 }
+
 :host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: var(--calcite-color-brand);
+    --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
   }
 }
+
 :host([layout="horizontal"][error]),
 :host([layout="horizontal-single"][error]) {
   .stepper-item-header {
-    border-color: var(--calcite-color-status-danger);
+    --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
   }
 }
+
 :host([layout="horizontal"][selected]),
 :host([layout="horizontal-single"][selected]) {
   .stepper-item-header {
-    border-color: var(--calcite-color-brand);
+    --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
   }
 }
+
 :host([layout="horizontal"]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal"]:focus:not([disabled]):not([selected])),
 :host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: #007ac280;
+    --calcite-internal-stepper-item-border-color: #007ac280;
   }
 }
+
 :host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal"][error]:focus:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: var(--calcite-color-status-danger-hover);
+    --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
   }
 }
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 2fdd5b64187..1bad25efad0 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -278,3 +278,107 @@ export const horizontalSingleLayout_TestOnly = (): string => html`
     </calcite-stepper>
   </div>
 `;
+
+export const theming_TestOnly = (): string => html`
+  <style>
+    calcite-stepper {
+      --calcite-stepper-action-background-color: #294b29;
+      --calcite-stepper-step-bar-fill-color: green;
+      --calcite-stepper-step-bar-active-fill-color: #e9f6ff;
+      --calcite-stepper-step-bar-complete-fill-color: #280274;
+      --calcite-stepper-step-bar-error-fill-color: #fe7a36;
+    }
+    calcite-stepper-item {
+      --calcite-stepper-item-border-color: green;
+      --calcite-stepper-item-description-text-color: #294b29;
+      --calcite-stepper-item-heading-text-color: #50623a;
+      --calcite-stepper-item-icon-color: blue;
+      --calcite-stepper-item-number-text-color: orange;
+      --calcite-stepper-item-text-color: black;
+    }
+
+    calcite-stepper-item[error] {
+      --calcite-stepper-item-border-color: #fe7a36;
+      --calcite-stepper-item-icon-color: #fe7a36;
+    }
+
+    calcite-stepper-item[complete] {
+      --calcite-stepper-item-border-color: #280274;
+      --calcite-stepper-item-icon-color: #280274;
+    }
+
+    calcite-stepper-item[selected] {
+      --calcite-stepper-item-border-color: #e9f6ff;
+      --calcite-stepper-item-icon-color: #e9f6ff;
+    }
+  </style>
+
+  <calcite-stepper layout="horizontal" numbered icon scale="s">
+    <calcite-stepper-item heading="Choose method" complete>
+      <calcite-notice open width="full">
+        <div slot="message">Step 1 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Compile member list" complete>
+      <calcite-notice open width="full">
+        <div slot="message">Step 2 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+      <calcite-notice open width="full">
+        <div slot="message">Step 3 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Confirm and complete">
+      <calcite-notice open width="full">
+        <div slot="message">Step 4 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+  </calcite-stepper>
+
+  <calcite-stepper layout="vertical" numbered icon scale="s">
+    <calcite-stepper-item heading="Choose method" complete>
+      <calcite-notice open width="full">
+        <div slot="message">Step 1 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Compile member list" complete>
+      <calcite-notice open width="full">
+        <div slot="message">Step 2 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+      <calcite-notice open width="full">
+        <div slot="message">Step 3 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Confirm and complete">
+      <calcite-notice open width="full">
+        <div slot="message">Step 4 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+  </calcite-stepper>
+
+  <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+    <calcite-stepper-item heading="Choose method" complete>
+      <calcite-notice open width="full">
+        <div slot="message">Step 1 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Compile member list" complete>
+      <calcite-notice open width="full">
+        <div slot="message">Step 2 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+      <calcite-notice open width="full">
+        <div slot="message">Step 3 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item heading="Confirm and complete">
+      <calcite-notice open width="full">
+        <div slot="message">Step 4 Content Goes Here</div>
+      </calcite-notice>
+    </calcite-stepper-item>
+  </calcite-stepper>
+`;

From 2db6551eaea5cec65c61f3f9b9abfdc748ada35d Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 12 Mar 2024 16:23:10 -0500
Subject: [PATCH 07/16] fix regression

---
 .../src/components/stepper-item/stepper-item.scss               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 0b98444b18c..aec125eac47 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -34,7 +34,7 @@
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
 
   font-size: var(--calcite-font-size-md);
-  line-height: var(--calcite-font-line-height-fixed-xl);
+  line-height: var(--calcite-font-line-height-fixed-lg);
   margin-inline-end: theme("margin.2");
   .stepper-item-description {
     font-size: var(--calcite-font-size);

From 3c0e657167d3abc3094ca9da618be6812e8e220d Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 12 Mar 2024 16:39:29 -0500
Subject: [PATCH 08/16] fix typo

---
 .../src/components/stepper-item/stepper-item.scss               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index aec125eac47..dac3575d880 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -48,7 +48,7 @@
   --calcite-stepper-item-spacing-unit-l: theme("spacing.6");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
 
-  font-size: var(calcite-font-size-lg);
+  font-size: var(--calcite-font-size-lg);
   line-height: var(--calcite-font-line-height-fixed-xl);
   margin-inline-end: theme("margin.3");
   .stepper-item-description {

From 4f1447c4f8dd5ff206c20522f8d8d51e54569828 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 12 Mar 2024 16:55:49 -0500
Subject: [PATCH 09/16] fix line height

---
 .../src/components/stepper-item/stepper-item.scss               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index dac3575d880..f94289e6762 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -53,7 +53,7 @@
   margin-inline-end: theme("margin.3");
   .stepper-item-description {
     font-size: var(--calcite-font-size-md);
-    line-height: var(--calcite-font-line-height-fixed-xl);
+    line-height: var(--calcite-font-line-height-fixed-lg);
   }
 }
 

From ceca6cd8f525f9fd50a43315dcd883006dda56e6 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 15 Mar 2024 12:25:33 -0500
Subject: [PATCH 10/16] refactor

---
 .../components/stepper-item/stepper-item.scss | 37 +++++++++----------
 .../src/components/stepper/stepper.scss       | 25 ++++++++++---
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index f94289e6762..320b41a4369 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -242,10 +242,7 @@
   border-t-0
   border-solid
   py-0;
-  border-color: var(
-    --calcite-stepper-item-border-color,
-    var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
-  );
+  border-color: var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3));
   border-inline-start-width: theme("borderWidth.2");
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 
@@ -263,17 +260,17 @@
 }
 
 :host([layout="vertical"][complete]) .container {
-  --calcite-internal-stepper-item-border-color: #007ac280;
+  border-color: var(--calcite-internal-stepper-item-complete-border-color, #007ac280);
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
+  border-color: var(--calcite-internal-stepper-item-complete-border-color-hover, var(--calcite-color-brand));
 }
 :host([layout="vertical"][error]) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
+  border-color: var(--calcite-internal-stepper-item-error-border-color, var(--calcite-color-status-danger));
 }
 :host([layout="vertical"][selected]) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
+  border-color: var(--calcite-internal-stepper-item-selected-border-color, var(--calcite-color-brand));
 
   & .stepper-item-content:not(:empty) {
     margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
@@ -281,11 +278,11 @@
 }
 :host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
-  --calcite-internal-stepper-item-border-color: #007ac280;
+  border-color: var(--calcite-internal-stepper-item-border-color-hover, #007ac280);
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
-  --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
+  border-color: var(--calcite-internal-stepper-item-error-border-color-hover, var(--calcite-color-status-danger-hover));
 }
 
 :host([layout="horizontal"]),
@@ -339,17 +336,14 @@
 :host([layout="horizontal"]),
 :host([layout="horizontal-single"]) {
   .stepper-item-header {
-    border-color: var(
-      --calcite-stepper-item-border-color,
-      var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
-    );
+    border-color: var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3));
   }
 }
 
 :host([layout="horizontal"][complete]),
 :host([layout="horizontal-single"][complete]) {
   .stepper-item-header {
-    --calcite-internal-stepper-item-border-color: #007ac280;
+    border-color: var(--calcite-internal-stepper-item-complete-border-color, #007ac280);
   }
 }
 
@@ -358,21 +352,21 @@
 :host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
+    border-color: var(--calcite-internal-stepper-item-complete-border-color-hover, var(--calcite-color-brand));
   }
 }
 
 :host([layout="horizontal"][error]),
 :host([layout="horizontal-single"][error]) {
   .stepper-item-header {
-    --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger);
+    border-color: var(--calcite-internal-stepper-item-error-border-color, var(--calcite-color-status-danger));
   }
 }
 
 :host([layout="horizontal"][selected]),
 :host([layout="horizontal-single"][selected]) {
   .stepper-item-header {
-    --calcite-internal-stepper-item-border-color: var(--calcite-color-brand);
+    border-color: var(--calcite-internal-stepper-item-selected-border-color, var(--calcite-color-brand));
   }
 }
 
@@ -381,7 +375,7 @@
 :host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    --calcite-internal-stepper-item-border-color: #007ac280;
+    border-color: var(--calcite-internal-stepper-item-border-color-hover, #007ac280);
   }
 }
 
@@ -390,7 +384,10 @@
 :host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    --calcite-internal-stepper-item-border-color: var(--calcite-color-status-danger-hover);
+    border-color: var(
+      --calcite-internal-stepper-item-error-border-color-hover,
+      var(--calcite-color-status-danger-hover)
+    );
   }
 }
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 20145eed94e..111cd11e4fd 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -8,10 +8,13 @@
  * @prop --calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
  * @prop --calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
- * @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar when `layout="horizontal-single"`.
- * @prop --calcite-stepper-step-bar-active-fill-color : Specifies fill color for active step-bar when `layout="horizontal-single"`.
- * @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar when `layout="horizontal-single"`.
- * @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar when `layout="horizontal-single"`.
+ * @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar.
+ * @prop --calcite-stepper-step-bar-fill-color-hover : Specifies fill color for step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-selected-fill-color : Specifies fill color for selected step-bar.
+ * @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar.
+ * @prop --calcite-stepper-step-bar-completed-fill-color-hover : Specifies fill color for completed step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar.
+ * @prop --calcite-stepper-step-bar-error-fill-color-hover : Specifies fill color for error step-bar when hovered.
  *
  */
 
@@ -118,7 +121,7 @@
   }
 
   .step-bar--active {
-    fill: var(--calcite-stepper-step-bar-active-fill-color, var(--calcite-color-brand));
+    fill: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
   }
 
   .step-bar--complete {
@@ -147,5 +150,17 @@ calcite-action {
   }
 }
 
+calcite-stepper-item {
+  --calcite-internal-stepper-item-border-color: var(--calcite-stepper-step-bar-fill-color);
+  --calcite-internal-stepper-item-complete-border-color: var(--calcite-stepper-step-bar-complete-fill-color);
+  --calcite-internal-stepper-item-complete-border-color-hover: var(
+    --calcite-stepper-step-bar-complete-fill-color-hover
+  );
+  --calcite-internal-stepper-item-error-border-color: var(--calcite-stepper-step-bar-error-fill-color);
+  --calcite-internal-stepper-item-selected-border-color: var(--calcite-stepper-step-bar-active-fill-color);
+  --calcite-internal-stepper-item-border-color-hover: var(--calcite-stepper-step-bar-fill-color-hover);
+  --calcite-internal-stepper-item-error-border-color-hover: var(--calcite-stepper-step-bar-error-fill-color-hover);
+}
+
 @include stepBar();
 @include base-component();

From a4ccd735fa49e1fd2802495a51fe7a2527b1f267 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 15 Mar 2024 15:11:13 -0500
Subject: [PATCH 11/16] fix regression

---
 .../components/stepper-item/stepper-item.scss | 34 ++++++++-----------
 .../stepper/functional/step-bar.tsx           | 10 +++---
 .../src/components/stepper/stepper.scss       | 31 +++++------------
 .../src/components/stepper/stepper.tsx        |  2 +-
 4 files changed, 29 insertions(+), 48 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 320b41a4369..b002646af41 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -3,7 +3,6 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-stepper-item-border-color: Specifies border color of component.
  * @prop --calcite-stepper-item-description-text-color: Specifies text color of description of component.
  * @prop --calcite-stepper-item-heading-text-color: Specifies text color of heading of component.
  * @prop --calcite-stepper-item-icon-color: Specifies color of icon of component.
@@ -85,7 +84,7 @@
   );
   border-color: var(
     --calcite-stepper-item-border-color,
-    var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3))
+    var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3))
   );
 }
 
@@ -242,7 +241,7 @@
   border-t-0
   border-solid
   py-0;
-  border-color: var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3));
+  border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
   border-inline-start-width: theme("borderWidth.2");
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 
@@ -260,17 +259,17 @@
 }
 
 :host([layout="vertical"][complete]) .container {
-  border-color: var(--calcite-internal-stepper-item-complete-border-color, #007ac280);
+  border-color: var(--calcite-stepper-step-bar-complete-fill-color, #007ac280);
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
-  border-color: var(--calcite-internal-stepper-item-complete-border-color-hover, var(--calcite-color-brand));
+  border-color: var(--calcite-stepper-step-bar-complete-fill-color-hover, var(--calcite-color-brand));
 }
 :host([layout="vertical"][error]) .container {
-  border-color: var(--calcite-internal-stepper-item-error-border-color, var(--calcite-color-status-danger));
+  border-color: var(--calcite-stepper-step-bar-error-fill-color, var(--calcite-color-status-danger));
 }
 :host([layout="vertical"][selected]) .container {
-  border-color: var(--calcite-internal-stepper-item-selected-border-color, var(--calcite-color-brand));
+  border-color: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
 
   & .stepper-item-content:not(:empty) {
     margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
@@ -278,11 +277,11 @@
 }
 :host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
-  border-color: var(--calcite-internal-stepper-item-border-color-hover, #007ac280);
+  border-color: var(--calcite-stepper-step-bar-fill-color-hover, #007ac280);
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
-  border-color: var(--calcite-internal-stepper-item-error-border-color-hover, var(--calcite-color-status-danger-hover));
+  border-color: var(--calcite-stepper-step-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover));
 }
 
 :host([layout="horizontal"]),
@@ -336,14 +335,14 @@
 :host([layout="horizontal"]),
 :host([layout="horizontal-single"]) {
   .stepper-item-header {
-    border-color: var(--calcite-internal-stepper-item-border-color, var(--calcite-color-border-3));
+    border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
   }
 }
 
 :host([layout="horizontal"][complete]),
 :host([layout="horizontal-single"][complete]) {
   .stepper-item-header {
-    border-color: var(--calcite-internal-stepper-item-complete-border-color, #007ac280);
+    border-color: var(--calcite-stepper-step-bar-complete-fill-color, #007ac280);
   }
 }
 
@@ -352,21 +351,21 @@
 :host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: var(--calcite-internal-stepper-item-complete-border-color-hover, var(--calcite-color-brand));
+    border-color: var(--calcite-stepper-step-bar-complete-fill-color-hover, var(--calcite-color-brand));
   }
 }
 
 :host([layout="horizontal"][error]),
 :host([layout="horizontal-single"][error]) {
   .stepper-item-header {
-    border-color: var(--calcite-internal-stepper-item-error-border-color, var(--calcite-color-status-danger));
+    border-color: var(--calcite-stepper-step-bar-error-fill-color, var(--calcite-color-status-danger));
   }
 }
 
 :host([layout="horizontal"][selected]),
 :host([layout="horizontal-single"][selected]) {
   .stepper-item-header {
-    border-color: var(--calcite-internal-stepper-item-selected-border-color, var(--calcite-color-brand));
+    border-color: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
   }
 }
 
@@ -375,7 +374,7 @@
 :host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: var(--calcite-internal-stepper-item-border-color-hover, #007ac280);
+    border-color: var(--calcite-stepper-step-bar-fill-color-hover, #007ac280);
   }
 }
 
@@ -384,10 +383,7 @@
 :host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
 :host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
   .stepper-item-header {
-    border-color: var(
-      --calcite-internal-stepper-item-error-border-color-hover,
-      var(--calcite-color-status-danger-hover)
-    );
+    border-color: var(--calcite-stepper-step-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover));
   }
 }
 
diff --git a/packages/calcite-components/src/components/stepper/functional/step-bar.tsx b/packages/calcite-components/src/components/stepper/functional/step-bar.tsx
index d32e8add7fc..89bf5f795cc 100644
--- a/packages/calcite-components/src/components/stepper/functional/step-bar.tsx
+++ b/packages/calcite-components/src/components/stepper/functional/step-bar.tsx
@@ -1,7 +1,7 @@
 import { FunctionalComponent, h } from "@stencil/core";
 
 interface StepBarProps {
-  active: boolean;
+  selected: boolean;
   complete: boolean;
   error: boolean;
   disabled: boolean;
@@ -10,16 +10,15 @@ interface StepBarProps {
 
 export const CSS = {
   stepBar: "step-bar",
-  stepBarActive: "step-bar--active",
+  stepBarActive: "step-bar--selected",
   stepBarComplete: "step-bar--complete",
   stepBarDisabled: "step-bar--disabled",
   stepBarError: "step-bar--error",
-  stepBarInActive: "step-bar--inactive",
 };
 
 export const StepBar: FunctionalComponent<StepBarProps> = ({
   disabled,
-  active,
+  selected,
   complete,
   error,
   key,
@@ -32,11 +31,10 @@ export const StepBar: FunctionalComponent<StepBarProps> = ({
   >
     <rect
       class={{
-        [CSS.stepBarActive]: active,
+        [CSS.stepBarActive]: selected,
         [CSS.stepBarComplete]: complete,
         [CSS.stepBarDisabled]: disabled,
         [CSS.stepBarError]: error,
-        [CSS.stepBarInActive]: true,
       }}
       width="100%"
       x="0"
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 111cd11e4fd..2702227fa77 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -105,6 +105,11 @@
     @apply flex;
     block-size: var(--calcite-container-size-content-fluid);
     inline-size: var(--calcite-container-size-content-fluid);
+    rect {
+      fill: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
+      fill-opacity: var(--calcite-opacity-full);
+      block-size: var(--calcite-container-size-content-fluid);
+    }
   }
 
   .step-bar-container {
@@ -114,26 +119,20 @@
     gap: var(--calcite-internal-step-bar-gap, var(--calcite-spacing-sm));
   }
 
-  .step-bar--inactive {
-    fill: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
-    fill-opacity: var(--calcite-opacity-full);
-    block-size: var(--calcite-container-size-content-fluid);
-  }
-
-  .step-bar--active {
+  rect.step-bar--selected {
     fill: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
   }
 
-  .step-bar--complete {
+  rect.step-bar--complete {
     fill: var(--calcite-stepper-step-bar-complete-fill-color, var(--calcite-color-brand));
     fill-opacity: var(--calcite-opacity-half);
   }
 
-  .step-bar--error {
+  rect.step-bar--error {
     fill: var(--calcite-stepper-step-bar-error-fill-color, var(--calcite-color-status-danger));
   }
 
-  .step-bar--disabled {
+  rect.step-bar--disabled {
     opacity: var(--calcite-opacity-half);
   }
 }
@@ -150,17 +149,5 @@ calcite-action {
   }
 }
 
-calcite-stepper-item {
-  --calcite-internal-stepper-item-border-color: var(--calcite-stepper-step-bar-fill-color);
-  --calcite-internal-stepper-item-complete-border-color: var(--calcite-stepper-step-bar-complete-fill-color);
-  --calcite-internal-stepper-item-complete-border-color-hover: var(
-    --calcite-stepper-step-bar-complete-fill-color-hover
-  );
-  --calcite-internal-stepper-item-error-border-color: var(--calcite-stepper-step-bar-error-fill-color);
-  --calcite-internal-stepper-item-selected-border-color: var(--calcite-stepper-step-bar-active-fill-color);
-  --calcite-internal-stepper-item-border-color-hover: var(--calcite-stepper-step-bar-fill-color-hover);
-  --calcite-internal-stepper-item-error-border-color-hover: var(--calcite-stepper-step-bar-error-fill-color-hover);
-}
-
 @include stepBar();
 @include base-component();
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index a4f64bac65d..6d691a55171 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -183,11 +183,11 @@ export class Stepper implements LocalizedComponent, T9nComponent {
             <div class={{ [CSS.stepBarContainer]: true }}>
               {this.items.map((item, index) => (
                 <StepBar
-                  active={index === this.currentActivePosition}
                   complete={item.complete && index !== this.currentActivePosition && !item.error}
                   disabled={item.disabled && index !== this.currentActivePosition}
                   error={item.error && index !== this.currentActivePosition}
                   key={index}
+                  selected={index === this.currentActivePosition}
                 />
               ))}
             </div>

From 8b0a64874575421ee5831b8c7dd000c908ba1b4d Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 15 Mar 2024 18:58:12 -0500
Subject: [PATCH 12/16] refactor and remove

---
 .../components/stepper-item/stepper-item.scss | 265 +++++++-----------
 .../src/components/stepper/stepper.scss       |  16 +-
 .../src/components/stepper/stepper.stories.ts |  20 +-
 3 files changed, 109 insertions(+), 192 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index b002646af41..b0b9f977777 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -7,53 +7,40 @@
  * @prop --calcite-stepper-item-heading-text-color: Specifies text color of heading of component.
  * @prop --calcite-stepper-item-icon-color: Specifies color of icon of component.
  * @prop --calcite-stepper-item-number-text-color: Specifies text color of number of component.
- * @prop --calcite-stepper-item-text-color: Specifies text color of component.
  *
  */
 
 :host([scale="s"]) {
-  --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-xxs);
-  --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-md);
-  --calcite-stepper-item-spacing-unit-l: var(--calcite-spacing-xl);
-  --calcite-internal-stepper-action-inline-size: var(--calcite-spacing-xxxl);
-
-  font-size: var(--calcite-font-size);
-  line-height: var(--calcite-font-line-height-fixed-base);
-  margin-inline-end: theme("margin.1");
-  .stepper-item-description {
-    font-size: var(--calcite-font-size-sm);
-    line-height: var(--calcite-font-line-height-fixed-base);
-  }
+  --calcite-internal-stepper-action-inline-size: theme("spacing.8");
+  --calcite-internal-stepper-item-description-font-size: var(--calcite-font-size-sm);
+  --calcite-internal-stepper-item-description-line-height: var(--calcite-font-line-height-fixed-base);
+  --calcite-internal-stepper-item-font-size: var(--calcite-font-size);
+  --calcite-internal-stepper-item-line-height: var(--calcite-font-line-height-fixed-base);
+  --calcite-internal-stepper-item-space-unit-l: theme("spacing.4");
+  --calcite-internal-stepper-item-space-unit-m: theme("spacing.3");
+  --calcite-internal-stepper-item-space-unit-s: theme("spacing.1");
 }
 
 :host([scale="m"]) {
-  --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-sm);
-  --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-xl);
-  --calcite-stepper-item-spacing-unit-l: var(--calcite-spacing-xxl);
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
-
-  font-size: var(--calcite-font-size-md);
-  line-height: var(--calcite-font-line-height-fixed-lg);
-  margin-inline-end: theme("margin.2");
-  .stepper-item-description {
-    font-size: var(--calcite-font-size);
-    line-height: var(--calcite-font-line-height-fixed-base);
-  }
+  --calcite-internal-stepper-item-description-font-size: var(--calcite-font-size);
+  --calcite-internal-stepper-item-description-line-height: var(--calcite-font-line-height-fixed-base);
+  --calcite-internal-stepper-item-font-size: var(--calcite-font-size-md);
+  --calcite-internal-stepper-item-line-height: var(--calcite-font-line-height-fixed-lg);
+  --calcite-internal-stepper-item-space-unit-l: theme("spacing.5");
+  --calcite-internal-stepper-item-space-unit-m: theme("spacing.4");
+  --calcite-internal-stepper-item-space-unit-s: theme("spacing.2");
 }
 
 :host([scale="l"]) {
-  --calcite-stepper-item-spacing-unit-s: var(--calcite-spacing-md);
-  --calcite-stepper-item-spacing-unit-m: var(--calcite-spacing-xxl);
-  --calcite-stepper-item-spacing-unit-l: theme("spacing.6");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
-
-  font-size: var(--calcite-font-size-lg);
-  line-height: var(--calcite-font-line-height-fixed-xl);
-  margin-inline-end: theme("margin.3");
-  .stepper-item-description {
-    font-size: var(--calcite-font-size-md);
-    line-height: var(--calcite-font-line-height-fixed-lg);
-  }
+  --calcite-internal-stepper-item-description-font-size: var(--calcite-font-size-md);
+  --calcite-internal-stepper-item-description-line-height: var(--calcite-font-line-height-fixed-lg);
+  --calcite-internal-stepper-item-font-size: var(--calcite-font-size-lg);
+  --calcite-internal-stepper-item-line-height: var(--calcite-font-line-height-fixed-xl);
+  --calcite-internal-stepper-item-space-unit-l: theme("spacing.6");
+  --calcite-internal-stepper-item-space-unit-m: theme("spacing.5");
+  --calcite-internal-stepper-item-space-unit-s: theme("spacing.3");
 }
 
 :host {
@@ -61,11 +48,15 @@
   flex
   flex-grow
   flex-col
-  self-start;
-  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+  self-start
+  focus-base;
+  margin-block-end: var(--calcite-internal-stepper-item-space-unit-s);
+  margin-inline-end: var(--calcite-internal-stepper-item-space-unit-s);
+  font-size: var(--calcite-internal-stepper-item-font-size);
+  line-height: var(--calcite-internal-stepper-item-line-height);
 }
 
-:host .container {
+.container {
   @apply relative
     flex
     flex-grow
@@ -78,45 +69,36 @@
     duration-150
     ease-in-out;
   border-block-start-width: var(--calcite-spacing-base);
-  color: var(
-    --calcite-stepper-item-text-color,
-    var(--calcite-internal-stepper-item-text-color, var(--calcite-color-text-3))
-  );
   border-color: var(
     --calcite-stepper-item-border-color,
     var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3))
   );
 }
 
-// focus styles
-:host {
-  @apply focus-base;
-}
 :host(:focus) {
   @apply focus-outset;
 }
 
-// .stepper-item-header / content
-:host .stepper-item-header {
+.stepper-item-header {
   @apply flex cursor-pointer items-start;
 }
 
-:host .stepper-item-content,
-:host .stepper-item-header {
+.stepper-item-content,
+.stepper-item-header {
   @apply duration-150 ease-in-out;
-  padding-block: var(--calcite-stepper-item-spacing-unit-l);
-  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  padding-block: var(--calcite-internal-stepper-item-space-unit-l);
+  padding-inline-end: var(--calcite-internal-stepper-item-space-unit-m);
   text-align: start;
 }
 
-:host .stepper-item-header * {
+.stepper-item-header * {
   @apply inline-flex
     items-center
     duration-150
     ease-in-out;
 }
 
-:host .stepper-item-content {
+.stepper-item-content {
   @apply hidden
     flex-col;
   inline-size: var(--calcite-container-size-content-fluid);
@@ -124,9 +106,8 @@
   line-height: var(--calcite-font-line-height-relative-snug);
 }
 
-// stepper item icon
-:host .stepper-item-icon {
-  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+.stepper-item-icon {
+  margin-inline-end: var(--calcite-internal-stepper-item-space-unit-m);
   @apply mt-px
     inline-flex
     h-3
@@ -138,22 +119,21 @@
     --calcite-stepper-item-icon-color,
     var(--calcite-internal-stepper-item-icon-color, var(--calcite-color-text-3))
   );
-  opacity: var(--calcite-opacity-disabled);
+  opacity: var(--calcite-internal-stepper-item-icon-opacity, var(--calcite-opacity-disabled));
 }
 
-// stepper item title
-:host .stepper-item-header-text {
+.stepper-item-header-text {
   @apply flex-col;
   text-align: initial;
   margin-inline-end: auto;
 }
 
-:host .stepper-item-heading,
-:host .stepper-item-description {
+.stepper-item-heading,
+.stepper-item-description {
   @apply flex w-full;
 }
 
-:host .stepper-item-heading {
+.stepper-item-heading {
   @apply mb-1;
 
   color: var(
@@ -163,17 +143,19 @@
   font-weight: var(--calcite-font-weight-medium);
 }
 
-:host .stepper-item-description {
+.stepper-item-description {
+  font-size: var(--calcite-internal-stepper-item-description-font-size);
+  line-height: var(--calcite-internal-stepper-item-description-line-height);
   color: var(
     --calcite-stepper-item-description-text-color,
     var(--calcite-internal-stepper-item-description-text-color, var(--calcite-color-text-3))
   );
 }
 
-:host .stepper-item-number {
+.stepper-item-number {
   @apply duration-150
     ease-in-out;
-  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  margin-inline-end: var(--calcite-internal-stepper-item-space-unit-m);
   color: var(
     --calcite-stepper-item-number-text-color,
     var(--calcite-internal-stepper-item-number-text-color, var(--calcite-color-text-3))
@@ -191,41 +173,24 @@
 }
 
 :host([error]) .container {
-  & .stepper-item-number {
-    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
-  }
-  & .stepper-item-icon {
-    opacity: var(--calcite-opacity-full);
-    --calcite-internal-stepper-item-icon-color: var(--calcite-color-status-danger);
-  }
+  --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
+  --calcite-internal-stepper-item-icon-opacity: var(--calcite-opacity-full);
+  --calcite-internal-stepper-item-icon-color: var(--calcite-color-status-danger);
 }
 
-:host(:hover:not([disabled]):not([selected])) .container,
-:host(:focus:not([disabled]):not([selected])) .container {
+:host(:hover):not([selected]) .container,
+:host(:focus):not([selected]) .container {
   border-block-start-color: var(--calcite-color-brand);
-  & .stepper-item-heading {
-    --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
-  }
-  & .stepper-item-description {
-    --calcite-internal-stepper-item-description-text-color: var(--calcite-color-text-2);
-  }
+  --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
+  --calcite-internal-stepper-item-description-text-color: var(--calcite-color-text-2);
 }
 
 :host([selected]) .container {
-  & .stepper-item-heading {
-    --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
-  }
-  & .stepper-item-description {
-    --calcite-internal-stepper-item-description-text-color: var(--calcite-color-text-2);
-  }
-  & .stepper-item-number {
-    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-brand);
-  }
-
-  & .stepper-item-icon {
-    --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
-    opacity: var(--calcite-opacity-full);
-  }
+  --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-1);
+  --calcite-internal-stepper-item-description-text-color: var(--calcite-color-text-2);
+  --calcite-internal-stepper-item-number-text-color: var(--calcite-color-brand);
+  --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
+  --calcite-internal-stepper-item-icon-opacity: var(--calcite-opacity-full);
 }
 
 :host([selected]) .container {
@@ -243,11 +208,11 @@
   py-0;
   border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
   border-inline-start-width: theme("borderWidth.2");
-  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
+  padding-inline-start: var(--calcite-internal-stepper-item-space-unit-l);
 
   & .stepper-item-icon {
     @apply order-3 mt-px mb-0;
-    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);
+    padding-inline-start: var(--calcite-internal-stepper-item-space-unit-s);
     margin-inline-start: theme("margin.auto");
   }
   & .stepper-item-header {
@@ -261,8 +226,8 @@
 :host([layout="vertical"][complete]) .container {
   border-color: var(--calcite-stepper-step-bar-complete-fill-color, #007ac280);
 }
-:host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
-:host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
+:host([layout="vertical"][complete]:hover):not([selected]) .container,
+:host([layout="vertical"][complete]:focus):not([selected]) .container {
   border-color: var(--calcite-stepper-step-bar-complete-fill-color-hover, var(--calcite-color-brand));
 }
 :host([layout="vertical"][error]) .container {
@@ -272,15 +237,15 @@
   border-color: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
 
   & .stepper-item-content:not(:empty) {
-    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
+    margin-block-end: var(--calcite-internal-stepper-item-space-unit-l);
   }
 }
-:host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
-:host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
+:host([layout="vertical"]:hover):not([selected]) .container,
+:host([layout="vertical"]:focus):not([selected]) .container {
   border-color: var(--calcite-stepper-step-bar-fill-color-hover, #007ac280);
 }
-:host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
-:host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
+:host([layout="vertical"][error]:hover:not([selected])) .container,
+:host([layout="vertical"][error]:focus:not([selected])) .container {
   border-color: var(--calcite-stepper-step-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover));
 }
 
@@ -298,7 +263,7 @@
     focus-base;
     grid-row: items;
     border-block-start-width: var(--calcite-spacing-base);
-    border-color: var(--calcite-color-border-3);
+    border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
     &:focus {
       @apply focus-outset;
     }
@@ -307,7 +272,7 @@
   .stepper-item-content {
     @apply cursor-auto duration-150 ease-in-out;
     padding-block: 0;
-    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+    padding-inline-end: var(--calcite-internal-stepper-item-space-unit-m);
     text-align: start;
   }
 }
@@ -332,13 +297,6 @@
   }
 }
 
-:host([layout="horizontal"]),
-:host([layout="horizontal-single"]) {
-  .stepper-item-header {
-    border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
-  }
-}
-
 :host([layout="horizontal"][complete]),
 :host([layout="horizontal-single"][complete]) {
   .stepper-item-header {
@@ -346,10 +304,10 @@
   }
 }
 
-:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
-:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])),
-:host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
-:host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
+:host([layout="horizontal"][complete]:hover):not([selected]),
+:host([layout="horizontal"][complete]:focus):not([selected]),
+:host([layout="horizontal-single"][complete]:hover):not([selected]),
+:host([layout="horizontal-single"][complete]:focus):not([selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-complete-fill-color-hover, var(--calcite-color-brand));
   }
@@ -369,24 +327,47 @@
   }
 }
 
-:host([layout="horizontal"]:hover:not([disabled]):not([selected])),
-:host([layout="horizontal"]:focus:not([disabled]):not([selected])),
-:host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
-:host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
+:host([layout="horizontal"]:hover):not([selected]),
+:host([layout="horizontal"]:focus):not([selected]),
+:host([layout="horizontal-single"]:hover):not([selected]),
+:host([layout="horizontal-single"]:focus):not([selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-fill-color-hover, #007ac280);
   }
 }
 
-:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),
-:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])),
-:host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
-:host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
+:host([layout="horizontal"][error]:hover):not([selected]),
+:host([layout="horizontal"][error]:focus):not([selected]),
+:host([layout="horizontal-single"][error]:hover):not([selected]),
+:host([layout="horizontal-single"][error]:focus):not([selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover));
   }
 }
 
+:host([layout="horizontal-single"]) .stepper-item-header {
+  @apply border-none box-border
+  me-0;
+  inline-size: var(--calcite-container-size-content-fluid);
+  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
+}
+
+:host([layout="horizontal-single"][error]) .container {
+  --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
+  --calcite-internal-stepper-item-icon-opacity: var(--calcite-opacity-full);
+  --calcite-internal-stepper-item-icon-color: var(--calcite-color-status-danger);
+}
+
+:host([layout="horizontal-single"][error][selected]),
+:host([layout="horizontal-single"][complete][selected]) .container {
+  --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-2);
+}
+
+:host([layout="horizontal-single"][complete][selected]) .container {
+  --calcite-internal-stepper-item-icon-opacity: var(--calcite-opacity-disabled);
+  --calcite-internal-stepper-item-number-text-color: var(--calcite-color-text-3);
+}
+
 @media (forced-colors: active) {
   :host .container {
     outline-width: 0;
@@ -413,40 +394,6 @@
   }
 }
 
-:host([layout="horizontal-single"]) .stepper-item-header {
-  @apply border-none box-border
-  me-0;
-  inline-size: var(--calcite-container-size-content-fluid);
-  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
-}
-
-:host([layout="horizontal-single"][error]) .container {
-  & .stepper-item-number {
-    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-status-danger);
-  }
-  & .stepper-item-icon {
-    opacity: var(--calcite-opacity-full);
-    --calcite-internal-stepper-item-icon-color: var(--calcite-color-status-danger);
-  }
-}
-
-:host([layout="horizontal-single"][error][selected]),
-:host([layout="horizontal-single"][complete][selected]) .container {
-  --calcite-internal-stepper-item-text-color: var(--calcite-color-text-3);
-  & .stepper-item-heading {
-    --calcite-internal-stepper-item-heading-text-color: var(--calcite-color-text-2);
-  }
-}
-
-:host([layout="horizontal-single"][complete][selected]) .container {
-  & .stepper-item-icon {
-    opacity: var(--calcite-opacity-disabled);
-  }
-  & .stepper-item-number {
-    --calcite-internal-stepper-item-number-text-color: var(--calcite-color-text-3);
-  }
-}
-
 .visually-hidden {
   @apply sr-only;
 }
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 2702227fa77..5797a40a8b0 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -66,21 +66,7 @@
     grid-template-areas:
       "items"
       "content";
-    gap: var(--calcite-spacing-sm) var(--calcite-internal-stepper-item-spacing-unit-s);
-  }
-}
-
-:host([layout="horizontal"][scale="s"]),
-:host([layout="horizontal-single"][scale="s"]) {
-  .container {
-    gap: var(--calcite-spacing-xxs) var(--calcite-internal-stepper-item-spacing-unit-s);
-  }
-}
-
-:host([layout="horizontal"][scale="l"]),
-:host([layout="horizontal-single"][scale="l"]) {
-  .container {
-    gap: var(--calcite-spacing-md) var(--calcite-internal-stepper-item-spacing-unit-s);
+    gap: var(--calcite-internal-stepper-item-spacing-unit-s) var(--calcite-internal-stepper-item-spacing-unit-s);
   }
 }
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 1bad25efad0..e0ffac5523c 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -284,32 +284,16 @@ export const theming_TestOnly = (): string => html`
     calcite-stepper {
       --calcite-stepper-action-background-color: #294b29;
       --calcite-stepper-step-bar-fill-color: green;
-      --calcite-stepper-step-bar-active-fill-color: #e9f6ff;
+      --calcite-stepper-step-bar-selected-fill-color: #e9f6ff;
       --calcite-stepper-step-bar-complete-fill-color: #280274;
       --calcite-stepper-step-bar-error-fill-color: #fe7a36;
     }
+
     calcite-stepper-item {
-      --calcite-stepper-item-border-color: green;
       --calcite-stepper-item-description-text-color: #294b29;
       --calcite-stepper-item-heading-text-color: #50623a;
       --calcite-stepper-item-icon-color: blue;
       --calcite-stepper-item-number-text-color: orange;
-      --calcite-stepper-item-text-color: black;
-    }
-
-    calcite-stepper-item[error] {
-      --calcite-stepper-item-border-color: #fe7a36;
-      --calcite-stepper-item-icon-color: #fe7a36;
-    }
-
-    calcite-stepper-item[complete] {
-      --calcite-stepper-item-border-color: #280274;
-      --calcite-stepper-item-icon-color: #280274;
-    }
-
-    calcite-stepper-item[selected] {
-      --calcite-stepper-item-border-color: #e9f6ff;
-      --calcite-stepper-item-icon-color: #e9f6ff;
     }
   </style>
 

From d9dc14c695d81593488c2462d5114674c4af0534 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 15 Mar 2024 19:35:15 -0500
Subject: [PATCH 13/16] fix regressions

---
 .../src/components/stepper-item/stepper-item.scss      | 10 ++++++----
 .../src/components/stepper/stepper.stories.ts          |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index b0b9f977777..f5b79aacff0 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -7,6 +7,7 @@
  * @prop --calcite-stepper-item-heading-text-color: Specifies text color of heading of component.
  * @prop --calcite-stepper-item-icon-color: Specifies color of icon of component.
  * @prop --calcite-stepper-item-number-text-color: Specifies text color of number of component.
+ * @prop --calcite-stepper-item-text-color: Specifies text color of component.
  *
  */
 
@@ -73,6 +74,10 @@
     --calcite-stepper-item-border-color,
     var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3))
   );
+  color: var(
+    --calcite-stepper-item-text-color,
+    var(--calcite-internal-stepper-item-text-color, var(--calcite-color-text-3))
+  );
 }
 
 :host(:focus) {
@@ -166,10 +171,7 @@
 @include disabled();
 
 :host([complete]) .container {
-  // todo dark mode
-  & .stepper-item-icon {
-    --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
-  }
+  --calcite-internal-stepper-item-icon-color: var(--calcite-color-brand);
 }
 
 :host([error]) .container {
diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index e0ffac5523c..186bcf42a54 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -287,6 +287,7 @@ export const theming_TestOnly = (): string => html`
       --calcite-stepper-step-bar-selected-fill-color: #e9f6ff;
       --calcite-stepper-step-bar-complete-fill-color: #280274;
       --calcite-stepper-step-bar-error-fill-color: #fe7a36;
+      --calcite-stepper-item-text-color: black;
     }
 
     calcite-stepper-item {

From f7ee2ee09675e823ac6084a76b029a4e2a4dcd82 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 18 Mar 2024 11:07:49 -0500
Subject: [PATCH 14/16] clean up

---
 .../components/stepper-item/stepper-item.scss | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index f5b79aacff0..e754bac9149 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -265,7 +265,6 @@
     focus-base;
     grid-row: items;
     border-block-start-width: var(--calcite-spacing-base);
-    border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
     &:focus {
       @apply focus-outset;
     }
@@ -286,12 +285,6 @@
   }
 }
 
-:host([layout="horizontal-single"]) {
-  .stepper-item-header {
-    grid-area: 1 / 1 / 1 / -1;
-  }
-}
-
 :host([layout="horizontal"]),
 :host([layout="horizontal-single"]) {
   .stepper-item-content {
@@ -299,49 +292,46 @@
   }
 }
 
-:host([layout="horizontal"][complete]),
-:host([layout="horizontal-single"][complete]) {
+:host([layout="horizontal"]) {
+  .stepper-item-header {
+    border-color: var(--calcite-stepper-step-bar-fill-color, var(--calcite-color-border-3));
+  }
+}
+
+:host([layout="horizontal"][complete]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-complete-fill-color, #007ac280);
   }
 }
 
 :host([layout="horizontal"][complete]:hover):not([selected]),
-:host([layout="horizontal"][complete]:focus):not([selected]),
-:host([layout="horizontal-single"][complete]:hover):not([selected]),
-:host([layout="horizontal-single"][complete]:focus):not([selected]) {
+:host([layout="horizontal"][complete]:focus):not([selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-complete-fill-color-hover, var(--calcite-color-brand));
   }
 }
 
-:host([layout="horizontal"][error]),
-:host([layout="horizontal-single"][error]) {
+:host([layout="horizontal"][error]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-error-fill-color, var(--calcite-color-status-danger));
   }
 }
 
-:host([layout="horizontal"][selected]),
-:host([layout="horizontal-single"][selected]) {
+:host([layout="horizontal"][selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-selected-fill-color, var(--calcite-color-brand));
   }
 }
 
 :host([layout="horizontal"]:hover):not([selected]),
-:host([layout="horizontal"]:focus):not([selected]),
-:host([layout="horizontal-single"]:hover):not([selected]),
-:host([layout="horizontal-single"]:focus):not([selected]) {
+:host([layout="horizontal"]:focus):not([selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-fill-color-hover, #007ac280);
   }
 }
 
 :host([layout="horizontal"][error]:hover):not([selected]),
-:host([layout="horizontal"][error]:focus):not([selected]),
-:host([layout="horizontal-single"][error]:hover):not([selected]),
-:host([layout="horizontal-single"][error]:focus):not([selected]) {
+:host([layout="horizontal"][error]:focus):not([selected]) {
   .stepper-item-header {
     border-color: var(--calcite-stepper-step-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover));
   }
@@ -350,6 +340,7 @@
 :host([layout="horizontal-single"]) .stepper-item-header {
   @apply border-none box-border
   me-0;
+  grid-area: 1 / 1 / 1 / -1;
   inline-size: var(--calcite-container-size-content-fluid);
   padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
 }

From 3b090f1c27fa417c669e53297d4650a8947154e4 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 18 Mar 2024 11:11:55 -0500
Subject: [PATCH 15/16] restore rem values in stepper

---
 .../src/components/stepper/stepper.scss                | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 5797a40a8b0..84f32f3b66c 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -19,23 +19,21 @@
  */
 
 :host([scale="s"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: var(--calcite-spacing-xxs);
+  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.1");
   --calcite-internal-stepper-action-block-size: theme("spacing.11");
-  --calcite-internal-stepper-action-inline-size: var(--calcite-spacing-xxxl);
-  --calcite-internal-step-bar-gap: var(--calcite-spacing-xxs);
+  --calcite-internal-stepper-action-inline-size: theme("spacing.8");
 }
 
 :host([scale="m"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: var(--calcite-spacing-sm);
+  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.2");
   --calcite-internal-stepper-action-block-size: theme("spacing.13");
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
 }
 
 :host([scale="l"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: var(--calcite-spacing-md);
+  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.3");
   --calcite-internal-stepper-action-block-size: theme("spacing.16");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
-  --calcite-internal-step-bar-gap: var(--calcite-spacing-md);
 }
 
 :host {

From 6872d426b1598a913bdc64e4e2f867d11f3e404d Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 18 Mar 2024 11:53:51 -0500
Subject: [PATCH 16/16] change spacing to space

---
 .../src/components/stepper/stepper.scss                | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 84f32f3b66c..e72722e14a5 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -19,19 +19,19 @@
  */
 
 :host([scale="s"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.1");
+  --calcite-internal-stepper-item-space-unit-s: theme("spacing.1");
   --calcite-internal-stepper-action-block-size: theme("spacing.11");
   --calcite-internal-stepper-action-inline-size: theme("spacing.8");
 }
 
 :host([scale="m"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.2");
+  --calcite-internal-stepper-item-space-unit-s: theme("spacing.2");
   --calcite-internal-stepper-action-block-size: theme("spacing.13");
   --calcite-internal-stepper-action-inline-size: theme("spacing.10");
 }
 
 :host([scale="l"]) {
-  --calcite-internal-stepper-item-spacing-unit-s: theme("spacing.3");
+  --calcite-internal-stepper-item-space-unit-s: theme("spacing.3");
   --calcite-internal-stepper-action-block-size: theme("spacing.16");
   --calcite-internal-stepper-action-inline-size: theme("spacing.12");
 }
@@ -64,7 +64,7 @@
     grid-template-areas:
       "items"
       "content";
-    gap: var(--calcite-internal-stepper-item-spacing-unit-s) var(--calcite-internal-stepper-item-spacing-unit-s);
+    gap: var(--calcite-internal-stepper-item-space-unit-s);
   }
 }
 
@@ -100,7 +100,7 @@
     @apply flex absolute justify-between items-start;
     block-size: var(--calcite-spacing-base);
     inline-size: var(--calcite-container-size-content-fluid);
-    gap: var(--calcite-internal-step-bar-gap, var(--calcite-spacing-sm));
+    gap: var(--calcite-internal-stepper-item-space-unit-s, var(--calcite-spacing-sm));
   }
 
   rect.step-bar--selected {