devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

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

@@ -0,0 +1,47 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-color: $base-invalid-color !default;
+$informer-background-color: null !default;
+
+@if $color == "carmine" {
+  $informer-color: darken(desaturate(adjust-hue($base-danger, -351), 26.91), 5.49);
+  $informer-background-color: lighten(desaturate(adjust-hue($base-danger, -347), 26.69), 33.14);
+}
+
+@if $color == "contrast" {
+  $informer-color: darken(desaturate(adjust-hue($base-danger, 2), 16.93), 6.08);
+  $informer-background-color: rgba(212, 63, 58, 0.1);
+}
+
+@if $color == "dark" {
+  $informer-color: $base-danger;
+  $informer-background-color: rgba(212, 63, 58, 0.1);
+}
+
+@if $color == "darkmoon" {
+  $informer-color: darken(desaturate(adjust-hue($base-danger, -342), 28.85), 6.67);
+  $informer-background-color: rgba(212, 63, 58, 0.1);
+}
+
+@if $color == "darkviolet" {
+  $informer-color: $base-danger;
+  $informer-background-color: rgba(212, 63, 58, 0.1);
+}
+
+@if $color == "greenmist" {
+  $informer-color: darken(desaturate(adjust-hue($base-danger, -351), 27.05), 4.90);
+  $informer-background-color: lighten(desaturate(adjust-hue($base-danger, -348), 26.83), 33.73);
+}
+
+@if $color == "light" {
+  $informer-color: $base-danger;
+  $informer-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+}
+
+@if $color == "softblue" {
+  $informer-color: $base-danger;
+  $informer-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+}

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

@@ -0,0 +1,16 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+
+// adduse
+
+@include informer(
+  $informer-color,
+  $informer-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,192 @@
+$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-shadow-color: getCustomVar(("$stepper-step-shadow-color")) !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-shadow: getCustomVar(("$stepper-step-disabled-shadow")) !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;
+
 @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-shadow-color: $base-bg !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;
+$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-shadow-color": $stepper-step-shadow-color,
+"$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-shadow": $stepper-step-disabled-shadow,
+"$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,
+));

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

@@ -8,12 +8,14 @@
 // adduse
 
 @include stepper(
-  $stepper-margin,
+  $stepper-padding,
 );
 @include connector(
   $stepper-connector-bg,
   $stepper-connector-value-bg,
-  $stepper-connector-margin-start,
+  $stepper-connector-size,
+  $stepper-connector-padding,
+  $stepper-connector-thickness,
 );
 @include step(
   $stepper-step-min-size,
@@ -22,19 +24,32 @@
   $stepper-step-content-row-gap,
   $stepper-step-content-column-gap,
   $stepper-step-optional-mark-font-size,
+  $stepper-step-icon-size,
+  $stepper-step-transition-duration,
 );
 @include step-states(
-  $stepper-step-bg,
-  $stepper-step-hover-bg,
-  $stepper-step-color-selected,
+  $stepper-step-shadow-color,
+  $stepper-step-base-bg,
+  $stepper-step-base-hover-bg,
+  $stepper-step-base-border-color,
+  $stepper-step-base-hover-border-color,
+  $stepper-step-base-text-color,
+  $stepper-step-base-label-color,
   $stepper-step-selected-bg,
   $stepper-step-selected-hover-bg,
-  $stepper-step-border-color,
-  $stepper-step-hover-border-color,
-  $stepper-step-focused-border-color,
-  $stepper-step-selected-border-color,
+  $stepper-step-selected-text-color,
+  $stepper-step-selected-label-color,
+  $stepper-step-selected-font-weight,
   $stepper-step-invalid-bg,
   $stepper-step-invalid-hover-bg,
+  $stepper-step-invalid-border-color,
+  $stepper-step-invalid-hover-border-color,
+  $stepper-step-invalid-text-color,
+  $stepper-step-invalid-hover-text-color,
+  $stepper-step-invalid-label-color,
+  $stepper-step-invalid-selected-bg,
+  $stepper-step-invalid-selected-hover-bg,
   $stepper-step-disabled-text-color,
   $stepper-step-disabled-bg,
+  $stepper-step-disabled-shadow,
 );

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

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use "colors" as *;
 @use "../colors" as *;
 @use "../sizes" as *;
@@ -6,27 +5,33 @@
 
 // adduse
 
-$stepper-margin: null !default;
+$stepper-padding: null !default;
 $stepper-step-min-size: null !default;
 $stepper-step-indicator-size: null !default;
 $stepper-step-content-row-gap: null !default;
 $stepper-step-content-column-gap: null !default;
 $stepper-step-optional-mark-font-size: $generic-xs-font-size !default;
+$stepper-step-icon-size: $generic-base-icon-size !default;
+
+$stepper-step-selected-font-weight: 400 !default;
+$stepper-step-transition-duration: .2s !default;
 
 @if $size == "default" {
-  $stepper-margin: 12px !default;
-  $stepper-step-min-size: 48px !default;
-  $stepper-step-indicator-size: 32px !default;
+  $stepper-padding: 12px !default;
+  $stepper-step-min-size: 52px !default;
+  $stepper-step-indicator-size: 36px !default;
   $stepper-step-content-row-gap: 8px !default;
   $stepper-step-content-column-gap: 12px !default;
 }
 
 @else if $size == "compact" {
-  $stepper-margin: 8px !default;
-  $stepper-step-min-size: 40px !default;
-  $stepper-step-indicator-size: 24px !default;
+  $stepper-padding: 8px !default;
+  $stepper-step-min-size: 42px !default;
+  $stepper-step-indicator-size: 26px !default;
   $stepper-step-content-row-gap: 6px !default;
   $stepper-step-content-column-gap: 8px !default;
 }
 
-$stepper-connector-margin-start: math.div($stepper-step-indicator-size - $generic-base-border-width * 2, 2);
+$stepper-connector-thickness: 1px !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;

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

@@ -21,4 +21,13 @@
 @use "layout/tab-panel/position-bottom" as *;
 @use "layout/tab-panel/position-left" as *;
 
+
 // adduse
+
+.dx-tabpanel {
+  .dx-tabs-vertical {
+    .dx-tabpanel-tab {
+      flex-basis: unset;
+    }
+  }
+}

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

@@ -13,6 +13,7 @@
 @use "./validation";
 @use "./textBox";
 @use "./dropDownBox";
+@use "./informer";
 @use "./list";
 @use "./textArea";
 @use "./numberBox";
@@ -61,3 +62,4 @@
 @use "./sortable";
 @use "./deferRendering";
 @use "./map";
+@use "./cardView";