devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

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

@@ -11,6 +11,9 @@ $fluent-html-editor-toolbar-menu-separator-margin: 4px !default;
 $fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default;
 $fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default;
 $fluent-html-editor-add-image-dialog-tabs-padding: null !default;
+$fluent-aidialog-selects-gap: null !default;
+$fluent-aidialog-content-gap: null !default;
+$fluent-aidialog-content-padding: null !default;
 
 @if $size == "default" {
   $fluent-toolbar-size-editor-width: 120px !default;
@@ -18,6 +21,9 @@ $fluent-html-editor-add-image-dialog-tabs-padding: null !default;
   $fluent-html-editor-horizontal-padding: 16px !default;
   $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px;
   $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default;
+  $fluent-aidialog-selects-gap: 8px;
+  $fluent-aidialog-content-gap: 16px;
+  $fluent-aidialog-content-padding: 16px 24px;
 }
 
 @else if $size == "compact" {
@@ -26,6 +32,9 @@ $fluent-html-editor-add-image-dialog-tabs-padding: null !default;
   $fluent-html-editor-horizontal-padding: 12px !default;
   $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px;
   $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default;
+  $fluent-aidialog-selects-gap: 4px;
+  $fluent-aidialog-content-gap: 12px;
+  $fluent-aidialog-content-padding: 12px 16px;
 }
 
 $fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default;

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

@@ -0,0 +1,15 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-color: $base-invalid-color !default;
+$informer-background-color: null !default;
+
+@if $mode == "light" {
+  $informer-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67);
+}
+
+@if $mode == "dark" {
+  $informer-background-color: darken(desaturate($base-danger, 5.06), 53.53);
+}

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

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

package/data/scss/widgets/fluent/list/_index.scss

@@ -406,6 +406,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
     &.dx-list-select-checkbox-container,
     &.dx-list-select-radiobutton-container {
       display: flex;
+      flex-shrink: 0;
       width: $fluent-list-item-height;
       justify-content: center;
       align-items: center;

package/data/scss/widgets/fluent/list/_sizes.scss

@@ -4,7 +4,6 @@
 
 $fluent-list-vertical-padding: 4px !default;
 $fluent-list-item-margin-inline: 4px !default;
-$fluent-list-item-checkbox-margin-inline: null !default;
 $fluent-list-bottom-padding: 4px !default;
 $fluent-list-searchbox-margin-bottom: 4px !default;
 $fluent-list-item-height: null !default;
@@ -15,7 +14,6 @@ $fluent-list-group-header-vertical-padding: null !default;
 $fluent-list-next-button-horizontal-padding: null !default;
 
 @if $size == "default" {
-  $fluent-list-item-checkbox-margin-inline: 8px !default;
   $fluent-list-item-height: 32px !default;
   $fluent-list-item-vertical-padding: 6px !default;
   $fluent-list-item-horizontal-padding: 12px !default;
@@ -24,7 +22,6 @@ $fluent-list-next-button-horizontal-padding: null !default;
 }
 
 @else if $size == "compact" {
-  $fluent-list-item-checkbox-margin-inline: 4px !default;
   $fluent-list-item-height: 24px !default;
   $fluent-list-item-vertical-padding: 4px !default;
   $fluent-list-item-horizontal-padding: 8px !default;

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

@@ -8,19 +8,31 @@ $load-indicator-inner-segment-border-color: getCustomVar(("$load-indicator-inner
 // adduse
 $load-indicator-segment-bg-color: $base-accent !default;
 $load-indicator-inner-segment-border-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 $mode == "light" {
   @if $color == "blue" {
     $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($load-indicator-segment-bg-color, 2.9), 2.2), 44.3) !default;
+    $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.33), 30.00) !default;
+    $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 0.98), 40.00) !default;
+    $load-indicator-animation-sparkle-bg-color3: lighten(desaturate($base-accent, 0.88), 44.90) !default;
   }
 
   @if $color == "saas" {
     $load-indicator-inner-segment-border-color: mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default;
+    $load-indicator-animation-sparkle-bg-color1: lighten(desaturate(adjust-hue($base-accent, -15), 14.38), 3.53) !default;
+    $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, -15), 15.69), 13.53) !default;
+    $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -15), 15.58), 18.43) !default;
   }
 }
 
 @if $mode == "dark" {
   $load-indicator-inner-segment-border-color: $base-accent-selected !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;
 }
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,

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

@@ -3,21 +3,14 @@
 @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 {
   .dx-loadindicator-content {
     animation: none;
@@ -25,16 +18,14 @@
 }
 
 .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 {
+  position: absolute;
   height: 100%;
   width: 100%;
-  position: absolute;
 }
 
 .dx-loadindicator-segment-inner {
@@ -48,58 +39,73 @@
   border-radius: 50%;
 }
 
-.dx-loadindicator-segment0,
-.dx-loadindicator-segment1 {
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
+.dx-loadindicator-content-circle {
+  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-segment0 {
-  left: 0;
+  .dx-loadindicator-segment0,
+  .dx-loadindicator-segment1 {
+    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-segment2 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
+  .dx-loadindicator-segment0 {
+    left: 0;
 
-  .dx-loadindicator-segment-inner {
-    border-color: $load-indicator-inner-segment-border-color;
-    width: 100%;
+    .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-segment2 {
+    position: absolute;
+    top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .dx-loadindicator-segment-inner {
+      border-color: $load-indicator-inner-segment-border-color;
+      width: 100%;
+      left: 0;
+    }
   }
-}
 
-.dx-loadindicator-segment1 {
-  right: 0;
+  .dx-loadindicator-segment1 {
+    right: 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 {
+      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;
 
-    &::after {
-      right: 0;
+      &::after {
+        right: 0;
+      }
     }
   }
 }
 
+@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/fluent/recurrenceEditor/_index.scss

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

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

@@ -2,12 +2,18 @@
 
 // adduse
 
+$fluent-recurrence-until-date-box-top-margin: null !default;
+$fluent-recurrence-count-number-box-top-margin: null !default;
 $fluent-recurrence-interval-number-box-margin-top: null !default;
 
 @if $size == "default" {
-  $fluent-recurrence-interval-number-box-margin-top: 40px !default;
+  $fluent-recurrence-until-date-box-top-margin: 60px !default;
+  $fluent-recurrence-count-number-box-top-margin: 102px !default;
+  $fluent-recurrence-interval-number-box-margin-top: 30px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-recurrence-interval-number-box-margin-top: 25px !default;
+  $fluent-recurrence-until-date-box-top-margin: 46px !default;
+  $fluent-recurrence-count-number-box-top-margin: 78px !default;
+  $fluent-recurrence-interval-number-box-margin-top: 22px !default;
 }

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

@@ -441,8 +441,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-header {
   @include header-sizes(
     $fluent-scheduler-header-height,
+    $fluent-scheduler-header-offset,
     $fluent-scheduler-toolbar-item-offset,
-    baseScheduler.$scheduler-base-border,
   );
 
   .dx-scheduler-navigator-next,

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

@@ -43,7 +43,8 @@ $fluent-scheduler-workspace-month-header-height: 22px !default;
 $fluent-scheduler-workspace-month-timeline--time-height: 34px !default;
 
 $agenda-appointment-title-font-size: null !default;
-$fluent-scheduler-header-height: $fluent-toolbar-height + 2px !default;
+$fluent-scheduler-header-height: null !default;
+$fluent-scheduler-header-offset: null !default;
 
 $scheduler-timeline-cell-height: 50px !default;
 
@@ -62,9 +63,11 @@ $header-panel-time-cell-padding: null !default;
   $header-day-element-height: 26px;
   $fluent-scheduler-workspace-date-table-cell-height: 38px !default;
 
-  $fluent-scheduler-toolbar-item-offset: 0 12px !default;
   $fluent-scheduler-navigator-height: 36px !default;
   $fluent-scheduler-header-panel-day-font-size: 16px !default;
+  $fluent-scheduler-header-height: 46px !default;
+  $fluent-scheduler-header-offset: 0 12px !default;
+  $fluent-scheduler-toolbar-item-offset: 4px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default;
@@ -94,9 +97,11 @@ $header-panel-time-cell-padding: null !default;
   $header-day-element-height: 24px;
   $fluent-scheduler-workspace-date-table-cell-height: 28px !default;
 
-  $fluent-scheduler-toolbar-item-offset: 0 8px !default;
   $fluent-scheduler-navigator-height: 28px !default;
   $fluent-scheduler-header-panel-day-font-size: 14px !default;
+  $fluent-scheduler-header-height: 34px !default;
+  $fluent-scheduler-header-offset: 2px 8px !default;
+  $fluent-scheduler-toolbar-item-offset: 4px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default;

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

@@ -1,36 +1,96 @@
+$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-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-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;
+
 @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-shadow-color: $base-typography-bg !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;
+$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-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-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,
+));

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";