devextreme-themebuilder 25.1.1-alpha → 25.1.3

package/data/scss/widgets/material/gridBase/_index.scss

@@ -82,9 +82,11 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       }
 
       .dx-texteditor {
-        .dx-texteditor-input,
-        .dx-placeholder::before {
-          padding-left: $material-grid-base-texteditor-input-padding;
+        .dx-texteditor-container {
+          .dx-texteditor-input,
+          .dx-placeholder::before {
+            padding-left: $material-grid-base-texteditor-input-padding;
+          }
         }
       }
     }
@@ -458,13 +460,15 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         font-size: $material-grid-base-cell-font-size;
         height: $material-grid-base-cell-height;
         line-height: $material-grid-base-cell-height;
-        padding-right: $material-grid-base-cell-horizontal-padding;
-        padding-left: $material-grid-base-cell-horizontal-padding;
         padding-top: 0;
         padding-bottom: 0;
         margin-top: 0;
       }
 
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 $material-grid-base-cell-horizontal-padding;
+      }
+
       .dx-placeholder::before {
         padding-right: $material-grid-base-cell-horizontal-padding;
         padding-left: $material-grid-base-cell-horizontal-padding;
@@ -706,6 +710,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           }
         }
       }
+
+      .dx-row {
+        &.dx-header-row {
+          > td {
+            border-right: 1px solid $material-grid-base-border-color;
+          }
+        }
+      }
     }
 
     &.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) {
@@ -714,7 +726,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           .dx-row {
             &.dx-header-row {
               > td {
-                border-right: 1px solid $material-grid-base-border-color;
                 border-left: 1px solid $material-grid-base-border-color;
 
                 &:first-child {
@@ -1004,7 +1015,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       &.dx-data-row {
         & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
         & .dx-command-edit .dx-link {
-          background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
 
           & .dx-#{$widget-name}-group-opened,
@@ -1013,6 +1023,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           }
         }
 
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+          background-color: $datagrid-row-focused-bg;
+        }
+
         & .dx-command-edit .dx-link:focus {
           background-color: $datagrid-base-background-color;
           color: $datagrid-link-color;
@@ -1110,7 +1124,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     }
 
     &.dx-#{$widget-name}-sticky-columns {
-      .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
         padding-top: $material-grid-base-cell-vertical-padding + 1px;
       }
 
@@ -1138,6 +1152,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       .dx-row.dx-row-lines.dx-edit-row > td {
         border-top-width: 0;
       }
+
+      .dx-row-removed:not(.dx-row-lines) > td {
+        border-bottom-width: 0;
+      }
+
+      .dx-row-removed.dx-row-lines > td {
+        border-top-width: 0;
+      }
     }
   }
 

package/data/scss/widgets/material/htmlEditor/_index.scss

@@ -10,8 +10,10 @@
 @use "../textEditor/colors" as *;
 @use "../toolbar/sizes" as *;
 @use "../common/mixins" as *;
+@use "../common/sizes" as *;
 @use "../fileUploader/sizes" as *;
 @use "../popup/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -342,3 +344,32 @@
     box-shadow: $material-popup-overlay-content-shadow;
   }
 }
+
+.dx-aidialog {
+  .dx-toolbar.dx-popup-bottom {
+    padding: $material-aidialog-toolbar-padding;
+  }
+
+  .dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper {
+    .dx-overlay-content {
+      box-shadow: $material-popup-overlay-content-shadow;
+    }
+  }
+
+  .dx-aidialog-controls {
+    gap: $material-aidialog-selects-gap;
+
+    .dx-selectbox {
+      max-width: calc(50% - $material-aidialog-selects-gap * 0.5);
+    }
+  }
+
+  .dx-aidialog-content {
+    padding: $material-aidialog-content-padding;
+    gap: $material-aidialog-content-gap;
+  }
+
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+}

package/data/scss/widgets/material/htmlEditor/_sizes.scss

@@ -6,15 +6,27 @@
 $material-toolbar-size-editor-width: null !default;
 $material-htmleditor-toolbar-padding: null !default;
 $material-html-editor-add-image-dialog-fileuploader-padding: null !default;
+$material-aidialog-selects-gap: null !default;
+$material-aidialog-content-gap: null !default;
+$material-aidialog-content-padding: null !default;
+$material-aidialog-toolbar-padding: null !default;
 
 @if $size == "default" {
   $material-toolbar-size-editor-width: 120px !default;
   $material-htmleditor-toolbar-padding: 16px !default;
   $material-html-editor-add-image-dialog-fileuploader-padding: 50px 40px;
+  $material-aidialog-selects-gap: 8px;
+  $material-aidialog-content-gap: 24px;
+  $material-aidialog-content-padding: 24px;
+  $material-aidialog-toolbar-padding: 16px 24px;
 }
 
 @else if $size == "compact" {
   $material-toolbar-size-editor-width: 90px !default;
   $material-htmleditor-toolbar-padding: 11px !default;
   $material-html-editor-add-image-dialog-fileuploader-padding: 40px 30px;
+  $material-aidialog-selects-gap: 8px;
+  $material-aidialog-content-gap: 16px;
+  $material-aidialog-content-padding: 16px;
+  $material-aidialog-toolbar-padding: 8px 16px;
 }

package/data/scss/widgets/material/informer/_colors.scss

@@ -0,0 +1,19 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-error-color: $base-danger !default;
+$informer-error-background-color: null !default;
+$informer-info-color: $base-text-color !default;
+$informer-info-background-color: null !default;
+
+@if $mode == "light" {
+  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, 1), 24.92), 38.24);
+  $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -240), 100.00), 48.63);
+}
+
+@if $mode == "dark" {
+  $informer-error-background-color: darken(desaturate(adjust-hue($base-danger, 1), 41.80), 53.92);
+  $informer-info-background-color: darken(saturate(adjust-hue($base-text-color, 240), 6.04), 70.78);
+}

package/data/scss/widgets/material/informer/_index.scss

@@ -0,0 +1,18 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+
+// adduse
+
+@include informer(
+  $informer-error-color,
+  $informer-error-background-color,
+  $informer-info-color,
+  $informer-info-background-color,
+  $informer-border-radius,
+  $informer-icon-size,
+  $informer-padding-inline,
+  $informer-padding-block,
+  $informer-column-gap,
+);

package/data/scss/widgets/material/informer/_sizes.scss

@@ -0,0 +1,24 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+
+$informer-icon-size: $material-base-icon-size !default;
+$informer-padding-inline: null !default;
+$informer-padding-block: null !default;
+$informer-column-gap: null !default;
+$informer-border-radius: null !default;
+
+@if $size == "default" {
+  $informer-padding-inline: 12px !default;
+  $informer-padding-block: 8px !default;
+  $informer-column-gap: 8px !default;
+  $informer-border-radius: 4px !default;
+}
+
+@else if $size == "compact" {
+  $informer-padding-inline: 8px !default;
+  $informer-padding-block: 6px !default;
+  $informer-column-gap: 4px !default;
+  $informer-border-radius: 3px !default;
+}

package/data/scss/widgets/material/loadIndicator/_colors.scss

@@ -6,6 +6,21 @@ $load-indicator-segment-bg-color: getCustomVar(("$load-indicator-segment-bg-colo
 
 // adduse
 $load-indicator-segment-bg-color: $base-accent !default;
+$load-indicator-animation-sparkle-bg-color1: null !default;
+$load-indicator-animation-sparkle-bg-color2: null !default;
+$load-indicator-animation-sparkle-bg-color3: null !default;
+
+@if $mode == "light" {
+  $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 3.66), 12.94) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 3.68), 25.88) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, -1), 5.90), 34.31) !default;
+}
+
+@else if $mode == "dark" {
+  $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 3.66), 12.94) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 3.68), 25.88) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, -1), 5.90), 34.31) !default;
+}
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,
 ));

package/data/scss/widgets/material/loadIndicator/_index.scss

@@ -3,19 +3,17 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/loadIndicator";
+@use "../../base/loadIndicator" as *;
 
 // adduse
 
 .dx-loadindicator {
-  background-color: transparent;
   line-height: 100%;
 }
 
 .dx-loadindicator-content {
   height: 100%;
   width: 100%;
-  animation: dx-content-rotation 1568ms linear infinite;
 }
 
 .dx-loadindicator-image {
@@ -25,10 +23,8 @@
 }
 
 .dx-loadindicator-icon {
-  position: absolute;
   height: 100%;
   width: 100%;
-  animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 .dx-loadindicator-segment {
@@ -48,53 +44,70 @@
   border-radius: 50%;
 }
 
-.dx-loadindicator-segment2,
-.dx-loadindicator-segment0 {
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
+.dx-loadindicator-content-circle {
+  .dx-loadindicator-content {
+    animation: dx-content-rotation 1568ms linear infinite;
+  }
 
-  .dx-loadindicator-segment-inner {
-    width: 200%;
+  .dx-loadindicator-icon {
+    position: absolute;
+    animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
   }
-}
 
-.dx-loadindicator-segment2 {
-  left: 0;
+  .dx-loadindicator-segment2,
+  .dx-loadindicator-segment0 {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
 
-  .dx-loadindicator-segment-inner {
-    border-right-color: transparent;
-    transform: rotate(-129deg);
-    animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    .dx-loadindicator-segment-inner {
+      width: 200%;
+    }
   }
-}
 
-.dx-loadindicator-segment0 {
-  right: 0;
+  .dx-loadindicator-segment2 {
+    left: 0;
 
-  .dx-loadindicator-segment-inner {
-    left: -100%;
-    border-left-color: transparent;
-    transform: rotate(129deg);
-    animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    .dx-loadindicator-segment-inner {
+      border-right-color: transparent;
+      transform: rotate(-129deg);
+      animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
   }
-}
 
-.dx-loadindicator-segment1 {
-  position: absolute;
-  top: 0;
-  left: 45%;
-  width: 10%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
+  .dx-loadindicator-segment0 {
+    right: 0;
 
-  .dx-loadindicator-segment-inner {
-    width: 1000%;
-    left: -450%;
+    .dx-loadindicator-segment-inner {
+      left: -100%;
+      border-left-color: transparent;
+      transform: rotate(129deg);
+      animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+  }
+
+  .dx-loadindicator-segment1 {
+    position: absolute;
+    top: 0;
+    left: 45%;
+    width: 10%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .dx-loadindicator-segment-inner {
+      width: 1000%;
+      left: -450%;
+    }
   }
 }
 
+@include loadindicator-animation-sparkle(
+  $load-indicator-animation-sparkle-bg-color1,
+  $load-indicator-animation-sparkle-bg-color2,
+  $load-indicator-animation-sparkle-bg-color3
+);
+
 @keyframes dx-content-rotation {
   to { transform: rotate(360deg); }
 }

package/data/scss/widgets/material/recurrenceEditor/_index.scss

@@ -12,7 +12,6 @@
 $material-recurrence-number-box-margin: 11px;
 $material-recurrence-button-group-padding: 6px;
 $material-recurrence-radio-group-margin: 15px;
-$material-recurrence-date-box-mergin-left: 23px;
 
 .dx-recurrence-numberbox-interval {
   margin-right: $material-recurrence-number-box-margin;
@@ -38,10 +37,9 @@ $material-recurrence-date-box-mergin-left: 23px;
 }
 
 .dx-recurrence-datebox-until-date {
-  margin-left: $material-recurrence-date-box-mergin-left;
+  margin-top: $material-recurrence-until-date-box-top-margin;
 }
 
 .dx-recurrence-numberbox-repeat-count {
-  margin: 0 $material-recurrence-number-box-margin 0 $material-recurrence-number-box-margin;
+  margin-top: $material-recurrence-count-number-box-top-margin;
 }
-

package/data/scss/widgets/material/recurrenceEditor/_sizes.scss

@@ -2,12 +2,18 @@
 
 // adduse
 
+$material-recurrence-until-date-box-top-margin: null !default;
+$material-recurrence-count-number-box-top-margin: null !default;
 $material-recurrence-interval-number-box-margin-top: null !default;
 
 @if $size == "default" {
-  $material-recurrence-interval-number-box-margin-top: 40px !default;
+  $material-recurrence-until-date-box-top-margin: 60px !default;
+  $material-recurrence-count-number-box-top-margin: 100px !default;
+  $material-recurrence-interval-number-box-margin-top: 55px !default;
 }
 
 @else if $size == "compact" {
-  $material-recurrence-interval-number-box-margin-top: 25px !default;
+  $material-recurrence-until-date-box-top-margin: 50px !default;
+  $material-recurrence-count-number-box-top-margin: 82px !default;
+  $material-recurrence-interval-number-box-margin-top: 33px !default;
 }

package/data/scss/widgets/material/scheduler/_index.scss

@@ -378,8 +378,8 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-header {
   @include header-sizes(
     $material-scheduler-header-height,
+    $material-scheduler-header-offset,
     $material-scheduler-toolbar-item-offset,
-    baseScheduler.$scheduler-base-border,
   );
   @include header-buttons(
     $button-normal-bg,

package/data/scss/widgets/material/scheduler/_sizes.scss

@@ -39,7 +39,8 @@ $material-scheduler-workspace-month-header-height: 22px !default;
 $material-scheduler-workspace-month-timeline--time-height: 34px !default;
 
 $agenda-appointment-title-font-size: null !default;
-$material-scheduler-header-height: $material-toolbar-height + 2px !default;
+$material-scheduler-header-height: null !default;
+$material-scheduler-header-offset: null !default;
 
 $scheduler-timeline-cell-height: 50px !default;
 
@@ -47,9 +48,11 @@ $scheduler-timeline-cell-height: 50px !default;
 @if $size == "default" {
   $material-scheduler-workspace-date-table-cell-height: 38px !default;
 
-  $material-scheduler-toolbar-item-offset: 0 16px !default;
   $material-scheduler-navigator-height: 36px !default;
   $material-scheduler-header-panel-day-font-size: 30px !default;
+  $material-scheduler-header-height: 54px !default;
+  $material-scheduler-header-offset: 2px 16px !default;
+  $material-scheduler-toolbar-item-offset: 4px !default;
 
   $material-scheduler-appointment-tooltip-title-font-size: 18px !default;
   $material-scheduler-appointment-tooltip-date-font-size: 14px !default;
@@ -74,9 +77,11 @@ $scheduler-timeline-cell-height: 50px !default;
 @else if $size == "compact" {
   $material-scheduler-workspace-date-table-cell-height: 28px !default;
 
-  $material-scheduler-toolbar-item-offset: 0 11px !default;
   $material-scheduler-navigator-height: 28px !default;
   $material-scheduler-header-panel-day-font-size: 20px !default;
+  $material-scheduler-header-height: 38px !default;
+  $material-scheduler-header-offset: 0 8px !default;
+  $material-scheduler-toolbar-item-offset: 0 !default;
 
   $material-scheduler-appointment-tooltip-title-font-size: 14px !default;
   $material-scheduler-appointment-tooltip-date-font-size: 11px !default;

package/data/scss/widgets/material/stepper/_colors.scss

@@ -1,36 +1,114 @@
+$stepper-step-accent-bg: getCustomVar(("$stepper-step-accent-bg")) !default;
+$stepper-step-accent-hover-bg: getCustomVar(("$stepper-step-accent-hover-bg")) !default;
+$stepper-step-danger-bg: getCustomVar(("$stepper-step-danger-bg")) !default;
+$stepper-step-danger-hover-bg: getCustomVar(("$stepper-step-danger-hover-bg")) !default;
+$stepper-step-base-bg: getCustomVar(("$stepper-step-base-bg")) !default;
+$stepper-step-base-hover-bg: getCustomVar(("$stepper-step-base-hover-bg")) !default;
+$stepper-step-base-text-color: getCustomVar(("$stepper-step-base-text-color")) !default;
+$stepper-step-base-label-color: getCustomVar(("$stepper-step-base-label-color")) !default;
+$stepper-step-disabled-bg: getCustomVar(("$stepper-step-disabled-bg")) !default;
+$stepper-step-disabled-text-color: getCustomVar(("$stepper-step-disabled-text-color")) !default;
+$stepper-connector-bg: getCustomVar(("$stepper-connector-bg")) !default;
+$stepper-connector-value-bg: getCustomVar(("$stepper-connector-value-bg")) !default;
+$stepper-step-base-border-color: getCustomVar(("$stepper-step-base-border-color")) !default;
+$stepper-step-base-hover-border-color: getCustomVar(("$stepper-step-base-hover-border-color")) !default;
+$stepper-step-selected-bg: getCustomVar(("$stepper-step-selected-bg")) !default;
+$stepper-step-selected-hover-bg: getCustomVar(("$stepper-step-selected-hover-bg")) !default;
+$stepper-step-selected-text-color: getCustomVar(("$stepper-step-selected-text-color")) !default;
+$stepper-step-selected-label-color: getCustomVar(("$stepper-step-selected-label-color")) !default;
+$stepper-step-invalid-bg: getCustomVar(("$stepper-step-invalid-bg")) !default;
+$stepper-step-invalid-hover-bg: getCustomVar(("$stepper-step-invalid-hover-bg")) !default;
+$stepper-step-invalid-border-color: getCustomVar(("$stepper-step-invalid-border-color")) !default;
+$stepper-step-invalid-hover-border-color: getCustomVar(("$stepper-step-invalid-hover-border-color")) !default;
+$stepper-step-invalid-text-color: getCustomVar(("$stepper-step-invalid-text-color")) !default;
+$stepper-step-invalid-hover-text-color: getCustomVar(("$stepper-step-invalid-hover-text-color")) !default;
+$stepper-step-invalid-label-color: getCustomVar(("$stepper-step-invalid-label-color")) !default;
+$stepper-step-invalid-selected-bg: getCustomVar(("$stepper-step-invalid-selected-bg")) !default;
+$stepper-step-invalid-selected-hover-bg: getCustomVar(("$stepper-step-invalid-selected-hover-bg")) !default;
+$stepper-step-shadow-color: getCustomVar(("$stepper-step-shadow-color")) !default;
+
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
 @use "../button/colors" as *;
 
 // adduse
-
-$stepper-step-bg: $typography-bg !default;
-$stepper-step-hover-bg: $button-normal-hover-bg !default;
-
-$stepper-step-color-selected: $base-inverted-text-color !default;
-$stepper-step-selected-bg: $button-default-bg !default;
-$stepper-step-selected-hover-bg: $button-default-hover-bg !default;
-
-$stepper-step-invalid-bg: $button-danger-bg !default;
-$stepper-step-invalid-hover-bg: $button-danger-hover-bg !default;
-
-$stepper-step-border-color: $base-border-color !default;
-$stepper-step-hover-border-color: null !default;
-
-$stepper-step-focused-border-color: $stepper-step-selected-hover-bg !default;
-$stepper-step-selected-border-color: $base-accent !default;
-
+$stepper-step-accent-bg: $base-accent !default;
+$stepper-step-accent-hover-bg: null !default;
+$stepper-step-danger-bg: $base-danger !default;
+$stepper-step-danger-hover-bg: null !default;
+$stepper-step-base-bg: null !default;
+$stepper-step-base-hover-bg: null !default;
+$stepper-step-base-text-color: $base-inverted-text-color !default;
+$stepper-step-base-label-color: $base-label-color !default;
+$stepper-step-disabled-shadow: $base-bg !default;
+$stepper-step-disabled-bg: null !default;
+$stepper-step-disabled-text-color: $base-disabled-color !default;
 $stepper-connector-bg: $base-border-color !default;
-$stepper-connector-value-bg: $base-accent !default;
-
-$stepper-step-disabled-text-color: color.change($base-text-color, $alpha: 0.38) !default;
-$stepper-step-disabled-bg: $base-border-color !default;
+$stepper-connector-value-bg: $base-label-color !default;
 
 @if $mode == 'light' {
-  $stepper-step-hover-border-color: darken($base-border-color, 6%) !default;
+  $stepper-step-base-bg: darken($base-bg, 38%) !default;
+  $stepper-step-base-hover-bg: darken($base-bg, 42%) !default;
+
+  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 8.5%) !default;
+  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 8.5%) !default;
+
+  $stepper-step-disabled-bg: darken($base-bg, 12%) !default;
 }
 
 @if $mode == 'dark' {
-  $stepper-step-hover-border-color: lighten($base-border-color, 6%) !default;
+  $stepper-step-base-bg: lighten(desaturate($base-bg, 5.59), 29.22%) !default;
+  $stepper-step-base-hover-bg: lighten(desaturate($base-bg, 5.84), 32.16) !default;
+
+  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 8.5%) !default;
+  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 8.5%) !default;
+
+  $stepper-step-disabled-bg: lighten(desaturate($base-bg, 3.02), 9.22) !default;
 }
+$stepper-step-base-border-color: $stepper-step-base-bg !default;
+$stepper-step-base-hover-border-color: $stepper-step-base-hover-bg !default;
+$stepper-step-selected-bg: $stepper-step-accent-bg !default;
+$stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default;
+$stepper-step-selected-text-color: $base-inverted-text-color !default;
+$stepper-step-selected-label-color: $base-text-color !default;
+$stepper-step-invalid-bg: $stepper-step-danger-bg !default;
+$stepper-step-invalid-hover-bg: $stepper-step-danger-hover-bg !default;
+$stepper-step-invalid-border-color: $stepper-step-invalid-bg !default;
+$stepper-step-invalid-hover-border-color: $stepper-step-invalid-hover-bg !default;
+$stepper-step-invalid-text-color: $base-inverted-text-color !default;
+$stepper-step-invalid-hover-text-color: $base-inverted-text-color !default;
+$stepper-step-invalid-label-color: $base-text-color !default;
+$stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default;
+$stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default;
+$stepper-step-shadow-color: $base-bg !default;
+$never-used: collector((
+"$stepper-step-accent-bg": $stepper-step-accent-bg,
+"$stepper-step-accent-hover-bg": $stepper-step-accent-hover-bg,
+"$stepper-step-danger-bg": $stepper-step-danger-bg,
+"$stepper-step-danger-hover-bg": $stepper-step-danger-hover-bg,
+"$stepper-step-base-bg": $stepper-step-base-bg,
+"$stepper-step-base-hover-bg": $stepper-step-base-hover-bg,
+"$stepper-step-base-text-color": $stepper-step-base-text-color,
+"$stepper-step-base-label-color": $stepper-step-base-label-color,
+"$stepper-step-disabled-bg": $stepper-step-disabled-bg,
+"$stepper-step-disabled-text-color": $stepper-step-disabled-text-color,
+"$stepper-connector-bg": $stepper-connector-bg,
+"$stepper-connector-value-bg": $stepper-connector-value-bg,
+"$stepper-step-base-border-color": $stepper-step-base-border-color,
+"$stepper-step-base-hover-border-color": $stepper-step-base-hover-border-color,
+"$stepper-step-selected-bg": $stepper-step-selected-bg,
+"$stepper-step-selected-hover-bg": $stepper-step-selected-hover-bg,
+"$stepper-step-selected-text-color": $stepper-step-selected-text-color,
+"$stepper-step-selected-label-color": $stepper-step-selected-label-color,
+"$stepper-step-invalid-bg": $stepper-step-invalid-bg,
+"$stepper-step-invalid-hover-bg": $stepper-step-invalid-hover-bg,
+"$stepper-step-invalid-border-color": $stepper-step-invalid-border-color,
+"$stepper-step-invalid-hover-border-color": $stepper-step-invalid-hover-border-color,
+"$stepper-step-invalid-text-color": $stepper-step-invalid-text-color,
+"$stepper-step-invalid-hover-text-color": $stepper-step-invalid-hover-text-color,
+"$stepper-step-invalid-label-color": $stepper-step-invalid-label-color,
+"$stepper-step-invalid-selected-bg": $stepper-step-invalid-selected-bg,
+"$stepper-step-invalid-selected-hover-bg": $stepper-step-invalid-selected-hover-bg,
+"$stepper-step-shadow-color": $stepper-step-shadow-color,
+));