@design-factory/design-factory 15.2.3 → 16.0.0

package/styles/scss/components/stepper/_stepper.mixins.scss

@@ -5,188 +5,148 @@
 }
 
 @mixin df-stepper-common-number() {
-  border-radius: $df-stepper-icon-border-radius;
-  text-align: $df-stepper-icon-text-align;
-  padding: $df-stepper-icon-padding;
-  border-style: $df-stepper-icon-border-style;
-  border-width: $border-width;
-  width: $df-stepper-icon-width;
-  height: $df-stepper-icon-height;
-  line-height: $df-stepper-number-line-height;
-  font-weight: $df-stepper-number-font-size;
-}
-
-@mixin df-stepper-line-variant($color, $value) {
-  .df-stepper-line-wrapper .df-stepper-line .df-stepper-horizontal-line.df-stepper-line-#{$color} {
-    border-color: $value;
+  border-radius: var(--#{$prefix}stepper-icon-border-radius);
+  text-align: var(--#{$prefix}stepper-icon-text-align);
+  padding: var(--#{$prefix}stepper-icon-padding);
+  border-style: var(--#{$prefix}stepper-icon-border-style);
+  border-width: var(--#{$prefix}stepper-border-width);
+  width: var(--#{$prefix}stepper-icon-width);
+  min-width: var(--#{$prefix}stepper-icon-width);
+  height: var(--#{$prefix}stepper-icon-height);
+  line-height: var(--#{$prefix}stepper-icon-height);
+  display: var(--#{$prefix}stepper-icon-display);
+  align-items: var(--#{$prefix}stepper-icon-align-items);
+  justify-content: var(--#{$prefix}stepper-icon-justify-content);
+  > span {
+    width: var(--#{$prefix}stepper-icon-width);
+    min-width: var(--#{$prefix}stepper-icon-width);
+    height: var(--#{$prefix}stepper-icon-height);
+    line-height: var(--#{$prefix}stepper-icon-height);
   }
 }
 
-@mixin df-stepper-icon-variant($color, $value) {
-  .df-stepper-step-#{$color} {
+@mixin df-stepper-icon-variant($state, $name) {
+  $value: shades-css-var($name, 'text-color');
+  $valuehover: shades-css-var($name, 'text-color');
+  $valueactive: shades-css-var($name, 'text-color');
+  $valuebghovercolor: $df-hover-bg-color;
+
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    $valuehover: shades-css-var($name, 'text-hover-color');
+    $valuebghovercolor: shades-css-var($name, 'bg-subtle-hover-color');
+    $valueactive: shades-css-var($name, 'text-active-color');
+  }
+  .df-stepper-step-#{$state} {
+    // Icon with number outline variant
+    .df-stepper-outline-number-#{$state} {
+      @include df-stepper-common-number();
+      @include df-stepper-fill-number($value, $df-stepper-outline-bg-color, $value);
+    }
+    // Icon with number plain version
+    .df-stepper-number-#{$state} {
+      @include df-stepper-common-number();
+      @include df-stepper-fill-number($df-stepper-icon-color, $value, $value);
+    }
+    
     .df-stepper-optional-label {
       // todo correct this
-      color: $df-stepper-optional-label-color;
-      font-size: $df-stepper-optional-label-font-size;
-      font-weight: $df-stepper-optional-label-font-weight;
+      text-align: var(--#{$prefix}stepper-optional-label-text-align);
+      color: var(--#{$prefix}stepper-optional-label-color);
+      font-size: var(--#{$prefix}stepper-optional-label-font-size);
+      font-weight: var(--#{$prefix}stepper-optional-label-font-weight);
     }
     .df-stepper-icon::before {
-      color: $df-stepper-icon-color;
-      @if #{$color} == 'green' {
-        background-color: $brand-green;
-      } @else {
-        background-color: $value;
-      }
+      display: inline-block;
+      text-decoration: none;
+      color: var(--#{$prefix}stepper-icon-color);
+      background-color: $value;
     }
-    .df-stepper-outline-icon::before {
-      @if #{$color} == 'green' {
-        color: $brand-green;
+    .df-stepper-outline-icon {
+      &::before {
+        display: inline-block;
+        text-decoration: none;
+        background-color: transparent;
       }
-      background-color: $white;
     }
     color: $value; // override btn-link
-    &:hover {
-      // override the btn-link feature
-      color: $value;
-      text-decoration: $df-stepper-text-decoration-hover;
-    }
-    &:focus {
-      text-decoration: $df-stepper-text-decoration-focus;
-    }
-    &:not(:disabled):not(.disabled):active {
-      color: $value;
-      text-decoration: $df-stepper-text-decoration-active;
-      font-weight: $font-weight-base;
-    }
-    &:not(:disabled):not(.disabled).active {
-      // override the btn-link feature
-      color: $value;
-      text-decoration: $df-stepper-text-decoration-active;
-      font-weight: $df-font-weight-semi-bold;
-    }
-    &.active {
-      color: $value;
-      &:hover {
+    &:not(:disabled):not(.disabled) {
+      &:hover, &:hover .df-stepper-label {
         // override the btn-link feature
-        color: $value;
+        color: $valuehover;
+        text-decoration: var(--#{$prefix}stepper-text-decoration-hover);
+        background-color: $valuebghovercolor;
+        // Icon with number outline variant
+        .df-stepper-outline-number-#{$state} {
+          @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
+        }
+        // Icon with number plain version
+        .df-stepper-number-#{$state} {
+          @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
+        }
+        .df-stepper-icon::before {
+          background-color: $valuehover;
+        }
       }
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active {
-        // override the btn-link feature
+      &:focus:not(:hover), &:focus:not(:hover) .df-stepper-label {
+        text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
         color: $value;
       }
-    }
-  }
-  // Icon with number outline variant
-  .df-stepper-outline-number-#{$color} {
-    @include df-stepper-common-number();
-    @include df-stepper-fill-number($value, $df-stepper-outline-bg-color, $value);
-  }
-  // Icon with number plain version
-  .df-stepper-number-#{$color} {
-    @include df-stepper-common-number();
-    @include df-stepper-fill-number($df-stepper-icon-color, $value, $value);
-  }
-  [aria-disabled='true'].df-stepper-step,
-  [disabled].df-stepper-step {
-    .df-stepper-number-#{$color} {
-      @include df-stepper-fill-number(
-        $df-stepper-icon-disabled-color,
-        $df-stepper-icon-disabled-bg-color,
-        $df-stepper-icon-disabled-border-color
-      );
-    }
-    // outline variant
-    .df-stepper-outline-number-#{$color} {
-      @include df-stepper-fill-number(
-        $df-stepper-icon-outline-disabled-color,
-        $df-stepper-icon-outline-disabled-bg-color,
-        $df-stepper-icon-outline-disabled-border-color
-      );
-    }
-    // verify this.
-    .df-stepper-icon {
-      @include df-stepper-fill-number(
-        $df-stepper-icon-outline-disabled-color,
-        $df-stepper-icon-outline-disabled-bg-color,
-        $df-stepper-icon-outline-disabled-border-color
-      );
-    }
-    // todo verify this
-    .df-stepper-outline-icon {
-      @include df-stepper-fill-number(
-        $df-stepper-icon-outline-disabled-color,
-        $df-stepper-icon-outline-disabled-bg-color,
-        $df-stepper-icon-outline-disabled-border-color
-      );
+      &.active, &.active .df-stepper-label {
+        text-decoration: var(--#{$prefix}stepper-text-decoration-active);
+        font-weight: $df-font-weight-semi-bold;
+      }
+      &:hover.active, &:hover.active .df-stepper-label {
+        color: $valuehover;
+        .df-stepper-number-#{$state} {
+          @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
+        }
+      }
+      &:not(:hover).active, &:not(:hover).active .df-stepper-label {
+        color: $valueactive;
+        .df-stepper-number-#{$state} {
+          @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
+        }
+      }
+      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        &.btn-link:focus {
+          --#{$prefix}box-shadow-color: #{$value};
+          &:hover {
+            --#{$prefix}box-shadow-color: #{$valuehover};
+          }
+          &:active:not(:hover), &.active:not(:hover) {
+            --#{$prefix}box-shadow-color: #{$valueactive};
+          }
+          box-shadow: $df-btn-focus-box-shadow;
+        }
+      }
     }
   }
 }
 
 // Stepper sizes
-@mixin df-stepper-icon-variant-size($color, $stepper-icon-width, $stepper-icon-height, $stepper-icon-line-height) {
+@mixin df-stepper-icon-variant-size($color) {
   // outline variant
   .df-stepper-outline-number-#{$color} {
-    line-height: $stepper-icon-line-height;
-    width: $stepper-icon-width;
-    height: $stepper-icon-height;
+    line-height: var(--#{$prefix}stepper-icon-line-height);
+    width: var(--#{$prefix}stepper-icon-width);
+    min-width: var(--#{$prefix}stepper-icon-width);
+    height: var(--#{$prefix}stepper-icon-height);
   }
   .df-stepper-number-#{$color} {
-    line-height: $stepper-icon-line-height;
-    width: $stepper-icon-width;
-    height: $stepper-icon-height;
+    line-height: var(--#{$prefix}stepper-icon-line-height);
+    width: var(--#{$prefix}stepper-icon-width);
+    min-width: var(--#{$prefix}stepper-icon-width);
+    height: var(--#{$prefix}stepper-icon-height);
   }
 }
 
 // Stepper sizes todo font-size
-@mixin df-stepper-size(
-  $padding-y,
-  $padding-x,
-  $font-size,
-  $stepper-icon-width,
-  $stepper-icon-height,
-  $stepper-icon-line-height,
-  $stepper-icon-only-font-size,
-  $stepper-outline-icon-only-font-size
-) {
-  @include font-size($font-size);
+@mixin df-stepper-size() {
   .df-stepper-step {
-    padding: $padding-y $padding-x;
-    .df-stepper-icon::before,
-    .df-stepper-outline-icon::before {
-      width: $stepper-icon-width;
-      height: $stepper-icon-height;
-      line-height: $stepper-icon-line-height;
-      font-size: $stepper-icon-only-font-size;
-    }
-    .df-stepper-outline-icon::before {
-      font-size: $stepper-outline-icon-only-font-size;
-    }
     /* stepper icon color*/
-    @each $color, $value in $theme-colors {
-      @include df-stepper-icon-variant-size(
-        $color,
-        $stepper-icon-width,
-        $stepper-icon-height,
-        $stepper-icon-line-height
-      );
-    }
-
-    @each $color, $value in $colors {
-      @include df-stepper-icon-variant-size(
-        $color,
-        $stepper-icon-width,
-        $stepper-icon-height,
-        $stepper-icon-line-height
-      );
-    }
-
-    @each $color, $value in $grays {
+    @each $state, $name in $df-stepper-steps-colors {
       @include df-stepper-icon-variant-size(
-        $color,
-        $stepper-icon-width,
-        $stepper-icon-height,
-        $stepper-icon-line-height
+        $state
       );
     }
   }

package/styles/scss/components/stepper/_stepper.scss

@@ -1,48 +1,125 @@
 @import 'stepper.mixins';
 
 .df-stepper {
+  --#{$prefix}stepper-border-width: #{$df-stepper-border-width};
+  --#{$prefix}stepper-line-border: #{$df-stepper-line-border};
+  --#{$prefix}stepper-icon-border-radius: #{$df-stepper-icon-border-radius};
+  --#{$prefix}stepper-icon-border-style: #{$df-stepper-icon-border-style};
+  --#{$prefix}stepper-icon-color: #{$df-stepper-icon-color};
+  --#{$prefix}stepper-icon-text-align: #{$df-stepper-icon-text-align};
+  --#{$prefix}stepper-icon-width: #{$df-stepper-icon-width};
+  --#{$prefix}stepper-icon-height: #{$df-stepper-icon-height};
+  --#{$prefix}stepper-icon-line-height: #{$df-stepper-icon-line-height};
+  --#{$prefix}stepper-icon-padding: #{$df-stepper-icon-padding};
+  --#{$prefix}stepper-number-line-height: #{$df-stepper-number-line-height};
+  --#{$prefix}stepper-outline-bg-color: #{$df-stepper-outline-bg-color};
+  --#{$prefix}stepper-disabled-color: #{$df-stepper-disabled-color};
+  --#{$prefix}stepper-icon-outline-disabled-color: #{$df-stepper-icon-outline-disabled-color};
+  --#{$prefix}stepper-icon-disabled-bg-color: #{$df-stepper-icon-disabled-bg-color};
+  --#{$prefix}stepper-icon-disabled-border-color: #{$df-stepper-icon-disabled-border-color};
+  --#{$prefix}stepper-icon-disabled-color: #{$df-stepper-icon-disabled-color};
+  --#{$prefix}stepper-icon-outline-disabled-bg-color: #{$df-stepper-icon-outline-disabled-bg-color};
+  --#{$prefix}stepper-icon-outline-disabled-border-color: #{$df-stepper-icon-outline-disabled-border-color};
+  --#{$prefix}stepper-step-min-width: #{$df-stepper-step-min-width};
+  --#{$prefix}stepper-step-padding-y: #{$df-stepper-step-padding-y};
+  --#{$prefix}stepper-step-padding-x: #{$df-stepper-step-padding-x};
+  --#{$prefix}stepper-step-height: #{$df-stepper-step-height};
+  --#{$prefix}stepper-hl-height: #{$df-stepper-hl-height};
+  --#{$prefix}stepper-hl-margin: #{$df-stepper-hl-margin};
+  --#{$prefix}stepper-optional-label-text-align: #{$df-stepper-optional-label-text-align};
+  --#{$prefix}stepper-optional-label-color: #{$df-stepper-optional-label-color};
+  --#{$prefix}stepper-optional-label-font-size: #{$df-stepper-optional-label-font-size};
+  --#{$prefix}stepper-optional-label-font-weight: #{$df-stepper-optional-label-font-weight};
+  --#{$prefix}stepper-div-step-border: #{$df-stepper-div-step-border};
+  --#{$prefix}stepper-label-max-width: #{$df-stepper-label-max-width};
+  --#{$prefix}stepper-line-completed-color: #{$df-stepper-line-completed-color};
+  --#{$prefix}stepper-disabled-opacity: #{$df-stepper-disabled-opacity};
+  --#{$prefix}stepper-font-size: #{$df-stepper-font-size};
+  --#{$prefix}stepper-font-size-sm: #{$df-stepper-font-size-sm};
+  --#{$prefix}stepper-font-size-lg: #{$df-stepper-font-size-lg};
+  --#{$prefix}stepper-text-decoration: #{$df-stepper-text-decoration};
+  --#{$prefix}stepper-text-decoration-hover: #{$df-stepper-text-decoration-hover};
+  --#{$prefix}stepper-text-decoration-focus: #{$df-stepper-text-decoration-focus};
+  --#{$prefix}stepper-text-decoration-active: #{$df-stepper-text-decoration-active};
+  --#{$prefix}vertical-stepper-panel-margin-y: #{$df-vertical-stepper-panel-margin-y};
+  --#{$prefix}vertical-stepper-panel-margin-start: #{$df-vertical-stepper-panel-margin-start};
+  --#{$prefix}vertical-stepper-panel-padding-start: #{$df-vertical-stepper-panel-padding-start};
+  --#{$prefix}vertical-stepper-line-position: #{$df-vertical-stepper-line-position};
+  --#{$prefix}stepper-icon-display: #{$df-stepper-icon-display};
+  --#{$prefix}stepper-icon-align-items: #{$df-stepper-icon-align-items};
+  --#{$prefix}stepper-icon-justify-content: #{$df-stepper-icon-justify-content};
+  --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size};
+
   align-items: stretch;
   display: flex;
   flex-direction: row;
+  &.df-vertical-stepper {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+  }
+  .btn {
+    --#{$prefix}btn-font-size: #{$df-stepper-font-size};
+  }
   .df-stepper-step {
-    border: $df-stepper-div-step-border; // override to have same border as btn
-    height: $df-stepper-step-height;
+    border: var(--#{$prefix}stepper-div-step-border); // override to have same border as btn
+    height: var(--#{$prefix}stepper-step-height);
     display: flex;
     flex-direction: column;
-    min-width: $df-stepper-step-min-width; // TO work with the negative margin even in mobile version
+    min-width: var(--#{$prefix}stepper-step-min-width); // TO work with the negative margin even in mobile version
     // put it depending of the button padding and as the btn-sm size
-    padding: $df-stepper-step-padding-y $df-stepper-step-padding-x;
+    padding: var(--#{$prefix}stepper-step-padding-y) var(--#{$prefix}stepper-step-padding-x);
     align-items: center;
     &.active {
+      &:not(:hover) {
+        background-color: $body-bg;
+      }
       .df-stepper-label {
         text-decoration: none;
       }
     }
     &:not(.flex-row) ~ .df-stepper-line-wrapper {
       .df-stepper-line {
-        padding-top: $df-stepper-step-padding-y;
+        padding-top: var(--#{$prefix}stepper-step-padding-y);
       }
     }
-    .df-stepper-icon::before,
-    .df-stepper-outline-icon::before {
-      width: $df-stepper-icon-width;
-      height: $df-stepper-icon-height;
-      line-height: $df-stepper-icon-line-height;
-      text-align: $df-stepper-icon-text-align;
-      font-size: $df-stepper-icon-only-font-size;
-      border-radius: $df-stepper-icon-only-border-radius;
+    .df-stepper-icon, .df-stepper-outline-icon {
+      & > * {
+        display: none;
+      }    
     }
-    .df-stepper-outline-icon::before {
-      font-size: $df-stepper-outline-icon-only-font-size;
+    .df-stepper-outline-icon.icon-exclamation-triangle::before {
+      font-size: var(--#{$prefix}stepper-outline-icon-only-font-size);
     }
+    .df-stepper-icon::before,
+    .df-stepper-outline-icon::before,
+    .df-stepper-icon {
+      width: var(--#{$prefix}stepper-icon-width);
+      height: var(--#{$prefix}stepper-icon-height);
+      min-width: var(--#{$prefix}stepper-icon-width);
+      line-height: var(--#{$prefix}stepper-icon-line-height);
+      text-align: var(--#{$prefix}stepper-icon-text-align);
+      border-radius: var(--#{$prefix}stepper-icon-border-radius);
+    }
+
     .df-stepper-label {
       display: block;
       white-space: nowrap;
-      max-width: $df-stepper-label-max-width;
+      max-width: var(--#{$prefix}stepper-label-max-width);
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;
     }
+    &.flex-row {
+      .df-stepper-label, .df-stepper-optional-label {
+        @extend .ms-4;
+      }
+    }
+    &.flex-row + .df-stepper-line-wrapper {
+      .df-stepper-line:not(:first-child) {
+        display: none !important;
+      }
+    }
   }
   .df-stepper-line-wrapper {
     display: flex;
@@ -55,76 +132,93 @@
       align-items: center;
       .df-stepper-horizontal-line {
         flex-grow: 1;
-        border-top: $df-stepper-line-border-color;
-        height: $df-stepper-hl-height;
-        margin: $df-stepper-hl-margin;
-        z-index: $df-stepper-line-zindex;
+        border-top: var(--#{$prefix}stepper-line-border);
+        height: var(--#{$prefix}stepper-hl-height);
+        margin: var(--#{$prefix}stepper-hl-margin);
       }
     }
   }
-
-  // TODO there is still an opacity 0.65 on disable button...how to do it
-  [aria-disabled='true'].df-stepper-step,
-  [disabled].df-stepper-step {
-    color: $df-stepper-disabled-color;
-    opacity: $df-stepper-disabled-opacity;
-    &:hover {
-      color: $df-stepper-disabled-color;
-    }
-    > .df-stepper-label {
-      color: $df-stepper-disabled-color;
+  .df-stepper-step-completed + .df-stepper-line-wrapper {
+      .df-stepper-line {
+        .df-stepper-horizontal-line {
+          border-color: var(--#{$prefix}stepper-line-completed-color);
+      }
     }
   }
 
   /* stepper icon color */
-  @each $color, $value in $theme-colors {
-    @include df-stepper-icon-variant($color, $value);
-    @include df-stepper-line-variant($color, $value);
+  @each $state, $name in $df-stepper-steps-colors {
+    @include df-stepper-icon-variant($state, $name);
   }
 
-  @each $color, $value in $colors {
-    @include df-stepper-icon-variant($color, $value);
-    @include df-stepper-line-variant($color, $value);
+  // Stepper sizing
+  &.df-stepper-sm {
+    --#{$prefix}stepper-step-padding-y: #{$df-stepper-step-padding-y-sm};
+    --#{$prefix}stepper-step-padding-x: #{$df-stepper-step-padding-x-sm};
+    --#{$prefix}stepper-icon-width: #{$df-stepper-icon-width-sm};
+    --#{$prefix}stepper-icon-height: #{$df-stepper-icon-height-sm};
+    --#{$prefix}stepper-icon-line-height: #{$df-stepper-icon-line-height-sm};
+    --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size-sm};
+
+    .btn {
+      --#{$prefix}btn-font-size: var(--#{$prefix}stepper-font-size);
+    }
+
+    @include df-stepper-size();
   }
 
-  @each $color, $value in $grays {
-    @include df-stepper-icon-variant($color, $value);
+  &.df-stepper-lg {
+    --#{$prefix}stepper-step-padding-y: #{$df-stepper-step-padding-y-lg};
+    --#{$prefix}stepper-step-padding-x: #{$df-stepper-step-padding-x-lg};
+    --#{$prefix}stepper-icon-width: #{$df-stepper-icon-width-lg};
+    --#{$prefix}stepper-icon-height: #{$df-stepper-icon-height-lg};
+    --#{$prefix}stepper-icon-line-height: #{$df-stepper-icon-line-height-lg};
+    --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size-lg};
+
+    .btn {
+      --#{$prefix}btn-font-size: #{$df-stepper-font-size-lg};
+    }
+
+    @include df-stepper-size();
   }
 
-  // Stepper sizing
-  &.df-stepper-sm {
-    .df-stepper-step:not(.flex-row) ~ .df-stepper-line-wrapper {
-      .df-stepper-line {
-        padding-top: $df-stepper-step-padding-y-sm;
+  .df-vertical-stepper-panel {
+    margin-top: var(--#{$prefix}vertical-stepper-panel-margin-y);
+    margin-bottom: var(--#{$prefix}vertical-stepper-panel-margin-y);
+    @include ltr {
+      padding-left: var(--#{$prefix}vertical-stepper-panel-padding-start);
+      margin-left: var(--#{$prefix}vertical-stepper-panel-margin-start);
+    }
+    @include rtl {
+      padding-right: var(--#{$prefix}vertical-stepper-panel-padding-start);
+      margin-right: var(--#{$prefix}vertical-stepper-panel-margin-start);
+    }
+    // Line
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      @include ltr {
+        left: var(--#{$prefix}vertical-stepper-line-position);
+        border-left: var(--#{$prefix}stepper-line-border);
+      }
+      @include rtl {
+        right: var(--#{$prefix}vertical-stepper-line-position);
+        border-right: var(--#{$prefix}stepper-line-border);
       }
+      top: calc(-1 * var(--#{$prefix}vertical-stepper-panel-margin-y));
+      bottom: calc(-1 * var(--#{$prefix}vertical-stepper-panel-margin-y));
     }
-    @include df-stepper-size(
-      $df-stepper-step-padding-y-sm,
-      $df-stepper-step-padding-x-sm,
-      $df-stepper-font-size-sm,
-      $df-stepper-icon-width-sm,
-      $df-stepper-icon-height-sm,
-      $df-stepper-icon-line-height-sm,
-      $df-stepper-icon-only-font-size-sm,
-      $df-stepper-outline-icon-only-font-size-sm
-    );
   }
-
-  &.df-stepper-lg {
-    .df-stepper-step:not(.flex-row) ~ .df-stepper-line-wrapper {
-      .df-stepper-line {
-        padding-top: $df-stepper-step-padding-y-lg;
+  
+  .df-stepper-step-completed + .df-vertical-stepper-panel {
+    &::before {
+      @include ltr {
+        border-color: var(--#{$prefix}stepper-line-completed-color);
+      }
+      @include rtl {
+        border-color: var(--#{$prefix}stepper-line-completed-color);
       }
     }
-    @include df-stepper-size(
-      $df-stepper-step-padding-y-lg,
-      $df-stepper-step-padding-x-lg,
-      $df-stepper-font-size-lg,
-      $df-stepper-icon-width-lg,
-      $df-stepper-icon-height-lg,
-      $df-stepper-icon-line-height-lg,
-      $df-stepper-icon-only-font-size-lg,
-      $df-stepper-outline-icon-only-font-size-lg
-    );
   }
 }

package/styles/scss/components/stepper/_stepper.variables.scss

@@ -1,33 +1,29 @@
 @use 'sass:map';
+@use 'sass:math';
 
-$df-stepper-line-border-color: $border-width solid $gray-200 !default;
+$df-stepper-border-width: math.div(strip-units($border-width), 16) + rem !default;
 $df-stepper-icon-border-radius: 50% !default;
 $df-stepper-icon-border-style: solid !default;
 $df-stepper-icon-color: $white !default;
 $df-stepper-icon-text-align: center !default;
 $df-stepper-icon-disabled-color: white !default;
-$df-stepper-icon-width: 28px !default;
-$df-stepper-icon-height: 28px !default;
+$df-stepper-icon-width: 1.75rem !default;
+$df-stepper-icon-height: $df-stepper-icon-width !default;
+$df-stepper-icon-width-sm: $df-stepper-icon-width * map.get($df-size-ratios, 'sm') !default;
+$df-stepper-icon-height-sm: $df-stepper-icon-height * map.get($df-size-ratios, 'sm') !default;
 $df-stepper-icon-line-height: $df-stepper-icon-height !default;
-$df-stepper-number-line-height: $df-stepper-icon-height - $border-width !default;
-$df-stepper-number-font-size: $df-font-weight-semi-bold !default;
-$df-stepper-icon-disabled-color: $white !default;
-$df-stepper-icon-only-font-size: 1rem !default;
-$df-stepper-icon-only-font-size-sm: $df-stepper-icon-only-font-size * map.get($df-size-ratios, 'sm') !default;
-$df-stepper-icon-only-font-size-lg: $df-stepper-icon-only-font-size * map.get($df-size-ratios, 'lg') !default;
-$df-stepper-icon-only-border-radius: 50% !default;
+$df-stepper-line-border: $border-width solid $gray-200 !default;
+$df-stepper-number-line-height: $df-stepper-icon-height - $df-stepper-border-width !default;
 $df-stepper-outline-icon-only-font-size: 1.5rem !default;
 $df-stepper-outline-icon-only-font-size-sm: $df-stepper-outline-icon-only-font-size * map.get($df-size-ratios, 'sm') !default;
 $df-stepper-outline-icon-only-font-size-lg: $df-stepper-outline-icon-only-font-size * map.get($df-size-ratios, 'lg') !default;
-$df-stepper-icon-width-sm: $df-stepper-icon-width * map.get($df-size-ratios, 'sm') !default;
-$df-stepper-icon-height-sm: $df-stepper-icon-height * map.get($df-size-ratios, 'sm') !default;
-$df-stepper-icon-line-height-sm: $df-stepper-icon-height-sm !default;
 $df-stepper-icon-width-lg: $df-stepper-icon-width * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-icon-line-height-sm: $df-stepper-icon-height-sm !default;
 $df-stepper-icon-height-lg: $df-stepper-icon-height * map.get($df-size-ratios, 'lg') !default;
-$df-stepper-icon-line-height-lg: $df-stepper-icon-height-lg - $border-width !default;
+$df-stepper-icon-line-height-lg: $df-stepper-icon-height-lg !default;
 $df-stepper-icon-padding: 0 !default;
 $df-stepper-outline-bg-color: transparent !default;
-$df-stepper-disabled-color: $df-disabled-color !default;
+$df-stepper-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-stepper-icon-outline-disabled-color: $df-stepper-disabled-color !default;
 $df-stepper-icon-disabled-bg-color: $df-stepper-disabled-color !default;
 $df-stepper-icon-disabled-border-color: $df-stepper-icon-disabled-bg-color !default;
@@ -48,8 +44,6 @@ $df-stepper-hl-height: 0px !default;
 $df-stepper-hl-margin: 2 * $border-width 0 0 0 !default; //0.5
 $df-stepper-label-max-width: 13.75rem !default;
 $df-stepper-disabled-opacity: $btn-disabled-opacity !default;
-// Attention stepper may not work in modal or other element with a zindex higher.
-$df-stepper-line-zindex: 1 !default;
 $df-stepper-font-size: $font-size-base !default;
 $df-stepper-font-size-sm: $font-size-sm !default;
 $df-stepper-font-size-lg: $font-size-lg !default;
@@ -60,4 +54,16 @@ $df-stepper-text-decoration-active: $df-stepper-text-decoration !default;
 $df-stepper-optional-label-color: $body-color !default;
 $df-stepper-optional-label-font-size: 0.75rem !default;
 $df-stepper-optional-label-font-weight: $font-weight-base !default;
+$df-stepper-optional-label-text-align: start !default;
 $df-stepper-div-step-border: 1px solid transparent !default; // same as btn-link
+$df-vertical-stepper-panel-margin-start: math.div(strip-units($df-stepper-icon-width), 32) + strip-units($df-stepper-step-padding-x) + math.div(strip-units($df-stepper-icon-width), 2) + rem !default;
+$df-vertical-stepper-panel-padding-start: 1rem !default;
+$df-vertical-stepper-panel-margin-y: 1rem !default;
+$df-vertical-stepper-line-width: 1px !default;
+$df-vertical-stepper-line-style: solid !default;
+$df-vertical-stepper-line-position: 0 !default;
+$df-stepper-icon-display: flex !default;
+$df-stepper-icon-align-items: center !default;
+$df-stepper-icon-justify-content: center !default;
+$df-stepper-steps-colors:  ("current": "primary", "future" : "gray", "completed": "green", "warning": "warning") !default;
+$df-stepper-line-completed-color: shades-css-var(map.get($df-stepper-steps-colors, "completed"), 'inert-color') !default;