devextreme-themebuilder 25.1.1-alpha → 25.1.3

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

@@ -1,36 +1,94 @@
+$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-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-base-text-color: getCustomVar(("$stepper-step-base-text-color")) !default;
+$stepper-step-base-label-color: getCustomVar(("$stepper-step-base-label-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-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-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: $base-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: $base-border-color-hover !default;
-
-$stepper-step-focused-border-color: $stepper-step-selected-hover-bg !default;
-$stepper-step-selected-border-color: $base-accent !default;
-
-$stepper-connector-bg: $base-border-color !default;
-$stepper-connector-value-bg: $base-accent !default;
-
+$stepper-step-accent-bg: $base-accent !default;
+$stepper-step-accent-hover-bg: $base-accent-hover !default;
+$stepper-step-danger-bg: $base-danger !default;
+$stepper-step-danger-hover-bg: $base-danger-hover !default;
+$stepper-step-base-bg: $base-bg !default;
+$stepper-step-base-hover-bg: $base-hover-bg !default;
+$stepper-step-base-border-color: $base-border-color !default;
+$stepper-step-base-hover-border-color: $base-border-color-hover !default;
+$stepper-step-base-text-color: $base-text-color !default;
+$stepper-step-base-label-color: $base-text-color !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: $stepper-step-accent-bg !default;
+$stepper-step-invalid-bg: $stepper-step-base-bg !default;
+$stepper-step-invalid-hover-bg: $stepper-step-base-hover-bg !default;
+$stepper-step-invalid-border-color: $stepper-step-base-border-color !default;
+$stepper-step-invalid-hover-border-color: $stepper-step-base-hover-border-color !default;
+$stepper-step-invalid-text-color: $stepper-step-danger-bg !default;
+$stepper-step-invalid-hover-text-color: $stepper-step-danger-hover-bg !default;
+$stepper-step-invalid-label-color: $stepper-step-danger-bg !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-disabled-shadow: $base-bg !default;
+$stepper-step-disabled-bg: $base-background-disabled !default;
 $stepper-step-disabled-text-color: $base-foreground-disabled !default;
-$stepper-step-disabled-bg: null !default;
-
-@if $mode == 'light' {
-  $stepper-step-disabled-bg: $base-background-disabled !default;
-}
-
-@if $mode == 'dark' {
-  $stepper-step-disabled-bg: $base-background-disabled !default;
-}
+$stepper-connector-bg: $base-separator-color !default;
+$stepper-connector-value-bg: $base-accent !default;
+$stepper-step-shadow-color: $base-typography-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-border-color": $stepper-step-base-border-color,
+"$stepper-step-base-hover-border-color": $stepper-step-base-hover-border-color,
+"$stepper-step-base-text-color": $stepper-step-base-text-color,
+"$stepper-step-base-label-color": $stepper-step-base-label-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-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-shadow-color": $stepper-step-shadow-color,
+));

package/data/scss/widgets/fluent/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/fluent/stepper/_sizes.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use "colors" as *;
 @use "../colors" as *;
 @use "../sizes" as *;
@@ -6,15 +5,19 @@
 
 // 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: $fluent-xs-font-size !default;
+$stepper-step-icon-size: $fluent-button-icon-size !default;
+
+$stepper-step-selected-font-weight: 600 !default;
+$stepper-step-transition-duration: .4s !default;
 
 @if $size == "default" {
-  $stepper-margin: 12px !default;
+  $stepper-padding: 12px !default;
   $stepper-step-min-size: 48px !default;
   $stepper-step-indicator-size: 32px !default;
   $stepper-step-content-row-gap: 8px !default;
@@ -22,11 +25,13 @@ $stepper-step-optional-mark-font-size: $fluent-xs-font-size !default;
 }
 
 @else if $size == "compact" {
-  $stepper-margin: 8px !default;
+  $stepper-padding: 8px !default;
   $stepper-step-min-size: 40px !default;
   $stepper-step-indicator-size: 24px !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 - $fluent-base-border-width * 2, 2);
+$stepper-connector-thickness: 2px !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;

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

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