devextreme-themebuilder 25.1.1-alpha → 25.1.3

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

@@ -522,6 +522,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
     .dx-menu-item {
       &.dx-state-focused {
         background-color: transparent;
+        color: $datagrid-menu-icon-color;
 
         &::after {
           border: 2px solid $datagrid-focused-border-color;
@@ -770,6 +771,11 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       color: $datagrid-cell-removed-text-color;
     }
 
+    .dx-row-removed:not(.dx-row-lines) > td {
+      border-top-color: $datagrid-row-removed-bg;
+      border-bottom-width: 0;
+    }
+
     @include dx-set-checkbox-border-color-as-background();
 
     .dx-adaptive-detail-row {
@@ -806,7 +812,6 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
         & > td:not(.dx-focused),
         & > tr > td:not(.dx-focused),
         & .dx-command-edit:not(.dx-focused) .dx-link {
-          background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
 
           .dx-texteditor-input {
@@ -819,6 +824,11 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
           }
         }
 
+        & > td:not(.dx-focused),
+        & > tr > td:not(.dx-focused) {
+          background-color: $datagrid-row-focused-bg;
+        }
+
         & .dx-command-edit .dx-link:focus {
           background-color: $datagrid-base-background-color;
           color: $datagrid-base-color;
@@ -1019,7 +1029,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
   }
 
   .dx-#{$widget-name}-rowsview.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: $generic-grid-base-cell-padding + 1px;
     }
 
@@ -1046,6 +1056,14 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
     .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;
+    }
   }
 
   .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column {

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

@@ -11,6 +11,8 @@
 @use "../fileUploader/sizes" as *;
 @use "../toolbar/sizes" as *;
 @use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -298,3 +300,26 @@
     background-color: $htmleditor-cells-separator-bg;
   }
 }
+
+.dx-aidialog {
+  .dx-aidialog-controls {
+    gap: $generic-aidialog-selects-gap;
+
+    .dx-selectbox {
+      max-width: calc(50% - $generic-aidialog-selects-gap * 0.5);
+    }
+  }
+
+  .dx-aidialog-content {
+    padding: $generic-aidialog-content-padding;
+    gap: $generic-aidialog-content-gap;
+  }
+
+  .dx-button {
+    min-width: auto;
+  }
+
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+}

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

@@ -5,13 +5,22 @@
 $generic-toolbar-size-editor-width: null !default;
 $generic-html-editor-add-image-dialog-base-padding: 5px !default;
 $generic-html-editor-add-image-dialog-fileuploader-padding: null !default;
+$generic-aidialog-selects-gap: null !default;
+$generic-aidialog-content-gap: null !default;
+$generic-aidialog-content-padding: null !default;
 
 @if $size == "default" {
   $generic-toolbar-size-editor-width: 105px !default;
   $generic-html-editor-add-image-dialog-fileuploader-padding: 60px 20px !default;
+  $generic-aidialog-selects-gap: 10px;
+  $generic-aidialog-content-gap: 20px;
+  $generic-aidialog-content-padding: 20px;
 }
 
 @else if $size == "compact" {
   $generic-toolbar-size-editor-width: 80px !default;
   $generic-html-editor-add-image-dialog-fileuploader-padding: 40px 20px !default;
+  $generic-aidialog-selects-gap: 5px;
+  $generic-aidialog-content-gap: 10px;
+  $generic-aidialog-content-padding: 10px;
 }

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

@@ -0,0 +1,65 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-error-color: null !default;
+$informer-error-background-color: null !default;
+$informer-info-color: null !default;
+$informer-info-background-color: null !default;
+
+@if $color == "carmine" {
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 26.91), 5.49);
+  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -347), 26.69), 33.14);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: lighten($base-text-color, 72.16);
+}
+
+@if $color == "contrast" {
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, 2), 16.93), 6.08);
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: darken($base-text-color, 12.94);
+  $informer-info-background-color: darken($base-text-color, 68.63);;
+}
+
+@if $color == "dark" {
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: darken($base-text-color, 55.69)
+}
+
+@if $color == "darkmoon" {
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -342), 28.85), 6.67);
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: darken($base-text-color, 12.94);
+  $informer-info-background-color: darken($base-text-color, 68.63);
+}
+
+@if $color == "darkviolet" {
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 9.41);
+  $informer-info-background-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 65.10);
+}
+
+@if $color == "greenmist" {
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 27.05), 4.90);
+  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -348), 26.83), 33.73);
+  $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -191), 32.77), 3.33);
+  $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -191), 32.77), 68.82)
+}
+
+@if $color == "light" {
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: lighten($base-text-color, 72.16);
+}
+
+@if $color == "softblue" {
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: lighten($base-text-color, 72.16);
+}

package/data/scss/widgets/generic/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/generic/informer/_sizes.scss

@@ -0,0 +1,26 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+
+$informer-icon-size: null !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-icon-size: $generic-base-icon-size !default;
+  $informer-padding-inline: 12px !default;
+  $informer-padding-block: 8px !default;
+  $informer-column-gap: 6px !default;
+  $informer-border-radius: 4px !default;
+}
+
+@else if $size == "compact" {
+  $informer-icon-size: $generic-base-icon-size + 2px !default;
+  $informer-padding-inline: 8px !default;
+  $informer-padding-block: 6px !default;
+  $informer-column-gap: 4px !default;
+  $informer-border-radius: 3px !default;
+}

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

@@ -7,47 +7,72 @@ $loadindicator-bg: getCustomVar(("$loadindicator-bg")) !default;
 // adduse
 $loadindicator-bg: null !default;
 $loadindicator-segment-shadow-color: null !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 $color == "carmine" {
-
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.09), 7.84) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -1), 0.09), 18.63) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(saturate($base-accent, 0.35), 29.22) !default;
 }
 
 @if $color == "contrast" {
   $loadindicator-bg: $base-inverted-bg !default;
   $loadindicator-segment-shadow-color: $base-shadow-color !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.47), 2.16) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 1), 0.47), 14.12) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -2), 9.36), 26.08) !default;
 }
 
 @if $color == "dark" {
   $loadindicator-bg: darken($base-text-color, 17.5%) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.47), 2.16) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 1), 0.47), 14.12) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -2), 9.36), 26.08) !default;
 }
 
 @if $color == "darkmoon" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.47), 2.16) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 1), 0.47), 14.12) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -2), 9.36), 26.08) !default;
 }
 
 @if $color == "darkviolet" {
   $loadindicator-bg: $base-accent-highlight-color !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.47), 2.16) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 1), 0.47), 14.12) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -2), 9.36), 26.08) !default;
 }
 
 @if $color == "greenmist" {
   $loadindicator-bg: lighten($base-text-color, 17.5%) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.09), 7.84) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -1), 0.09), 18.63) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(saturate($base-accent, 0.35), 29.22) !default;
 }
 
 @if $color == "light" {
   $loadindicator-bg: lighten($base-text-color, 17.5%) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.09), 7.84) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -1), 0.09), 18.63) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(saturate($base-accent, 0.35), 29.22) !default;
 }
 
 @if $color == "softblue" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(desaturate(adjust-hue($base-accent, -2), 0.42), 4.90) !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -3), 0.86), 12.94) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, -2), 2.61), 23.33) !default;
 }
 
 $never-used: collector((

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

@@ -3,7 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/loadIndicator";
+@use "../../base/loadIndicator" as *;
 
 // adduse
 
@@ -11,12 +11,13 @@
   background-color: transparent;
 }
 
-.dx-loadindicator-icon {
-  position: relative;
-  top: 15%;
-  inset-inline-start: 15%;
-  width: 70%;
-  height: 70%;
+.dx-loadindicator-content-circle {
+  .dx-loadindicator-icon {
+    top: 15%;
+    inset-inline-start: 15%;
+    width: 70%;
+    height: 70%;
+  }
 
   .dx-loadindicator-segment {
     position: absolute;
@@ -33,16 +34,6 @@
     animation: dx-generic-loadindicator-opacity 1s linear infinite;
   }
 
-  @keyframes dx-generic-loadindicator-opacity {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0.55;
-    }
-  }
-
   .dx-loadindicator-segment0 {
     transform: rotate(0deg) translate(0, -142%);
     animation-delay: 0s;
@@ -94,3 +85,20 @@
     display: none;
   }
 }
+
+.dx-loadindicator-icon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@include loadindicator-animation-sparkle(
+  $load-indicator-animation-sparkle-bg-color1,
+  $load-indicator-animation-sparkle-bg-color2,
+  $load-indicator-animation-sparkle-bg-color3
+);
+
+@keyframes dx-generic-loadindicator-opacity {
+  from { opacity: 1; }
+  to { opacity: 0.55; }
+}

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

@@ -25,3 +25,11 @@ $generic-recurrence-number-box-margin-right: 11px;
 .dx-recurrence-numberbox-interval-label {
   margin-top: $generic-recurrence-interval-number-box-margin-top;
 }
+
+.dx-recurrence-datebox-until-date {
+  margin-top: $generic-recurrence-until-date-box-top-margin;
+}
+
+.dx-recurrence-numberbox-repeat-count {
+  margin-top: $generic-recurrence-count-number-box-top-margin;
+}

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

@@ -2,12 +2,18 @@
 
 // adduse
 
+$generic-recurrence-until-date-box-top-margin: null !default;
+$generic-recurrence-count-number-box-top-margin: null !default;
 $generic-recurrence-interval-number-box-margin-top: null !default;
 
 @if $size == "default" {
-  $generic-recurrence-interval-number-box-margin-top: 25px !default;
+  $generic-recurrence-until-date-box-top-margin: 30px !default;
+  $generic-recurrence-count-number-box-top-margin: 66px !default;
+  $generic-recurrence-interval-number-box-margin-top: 31px !default;
 }
 
 @else if $size == "compact" {
-  $generic-recurrence-interval-number-box-margin-top: 18px !default;
+  $generic-recurrence-until-date-box-top-margin: 28px !default;
+  $generic-recurrence-count-number-box-top-margin: 56px !default;
+  $generic-recurrence-interval-number-box-margin-top: 23px !default;
 }

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

@@ -148,8 +148,8 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 .dx-scheduler-header {
   @include header-sizes(
     $generic-scheduler-header-height,
+    $generic-scheduler-header-offset,
     $generic-scheduler-toolbar-item-offset,
-    baseScheduler.$scheduler-base-border,
   );
 
   background-color: $scheduler-header-bg;

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

@@ -6,6 +6,7 @@
 $generic-scheduler-workspace-date-table-cell-height: null !default;
 $generic-scheduler-timeline-date-table-cell-height: null !default;
 $generic-scheduler-header-height: null !default;
+$generic-scheduler-header-offset: null !default;
 $generic-scheduler-toolbar-item-offset: null !default;
 $generic-scheduler-navigator-height: null !default;
 $generic-scheduler-navigation-buttons-padding: null !default;
@@ -31,8 +32,9 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-workspace-date-table-cell-height: 50px !default;
   $generic-scheduler-timeline-date-table-cell-height: 75px !default;
 
-  $generic-scheduler-header-height: 56px !default;
-  $generic-scheduler-toolbar-item-offset: 9px !default;
+  $generic-scheduler-header-height: 36px !default;
+  $generic-scheduler-header-offset: 9px 10px !default;
+  $generic-scheduler-toolbar-item-offset: 2px !default;
   $generic-scheduler-navigator-height: 36px !default;
   $generic-scheduler-navigation-buttons-padding: 6px !default;
 
@@ -60,8 +62,9 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-workspace-date-table-cell-height: 36px !default;
   $generic-scheduler-timeline-date-table-cell-height: 50px !default;
 
-  $generic-scheduler-header-height: 39px !default;
-  $generic-scheduler-toolbar-item-offset: 5px !default;
+  $generic-scheduler-header-height: 26px !default;
+  $generic-scheduler-header-offset: 6px 7px !default;
+  $generic-scheduler-toolbar-item-offset: 0 !default;
   $generic-scheduler-navigator-height: 25px !default;
   $generic-scheduler-navigation-buttons-padding: 4px !default;
 

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

@@ -1,28 +1,190 @@
+$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-accent-bg: null !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-text-color !default;
+$stepper-step-base-label-color: $base-text-color !default;
+$stepper-step-disabled-shadow: $base-bg !default;
+$stepper-step-disabled-bg: null !default;
+$stepper-step-disabled-text-color: color.change($base-text-color, $alpha: $base-disabled-opacity) !default;
+$stepper-connector-bg: $base-border-color !default;
+$stepper-connector-value-bg: $base-text-color !default;
 
-$stepper-step-bg: $typography-bg !default;
-$stepper-step-hover-bg: $button-normal-contained-bg-hover !default;
+@if $color == "carmine" {
+  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
+  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !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-contained-bg-hover !default;
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
 
-$stepper-step-invalid-bg: $button-danger-bg !default;
-$stepper-step-invalid-hover-bg: $button-danger-contained-bg-hover !default;
+  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
 
-$stepper-step-border-color: $base-border-color !default;
-$stepper-step-hover-border-color: $base-border-color !default;
+  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+}
 
-$stepper-step-focused-border-color: $stepper-step-selected-hover-bg !default;
-$stepper-step-selected-border-color: $base-accent !default;
+@if $color == "contrast" {
+  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
+  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
 
-$stepper-connector-bg: $base-border-color !default;
-$stepper-connector-value-bg: $base-accent !default;
+  $stepper-step-accent-bg: $base-default !default;
+  $stepper-step-accent-hover-bg: $base-inverted-bg !default;
 
-$stepper-step-disabled-text-color: color.change($base-text-color, $alpha: $base-disabled-opacity) !default;
-$stepper-step-disabled-bg: $base-border-color !default;
+  $stepper-step-danger-hover-bg: $base-inverted-bg !default;
+
+  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+}
+
+@if $color == 'dark' {
+  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
+  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default;
+
+  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default;
+
+  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+}
+
+@if $color == "darkmoon" {
+  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
+  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default;
+
+  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default;
+
+  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+}
+
+@if $color == "darkviolet" {
+  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
+  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default;
+
+  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default;
+
+  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+}
+
+@if $color == "greenmist" {
+  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
+  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+
+  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+
+  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+}
+
+@if $color == 'light' {
+  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
+  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+
+  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+
+  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+}
+
+@if $color == "softblue" {
+  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
+  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+
+  $stepper-step-accent-bg: $base-accent !default;
+  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+
+  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+
+  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !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,
+));