devextreme-themebuilder 24.2.6 → 25.1.1-alpha

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

@@ -0,0 +1,40 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper(
+  $stepper-margin,
+);
+@include connector(
+  $stepper-connector-bg,
+  $stepper-connector-value-bg,
+  $stepper-connector-margin-start,
+);
+@include step(
+  $stepper-step-min-size,
+  $stepper-step-indicator-size,
+  $stepper-step-indicator-size,
+  $stepper-step-content-row-gap,
+  $stepper-step-content-column-gap,
+  $stepper-step-optional-mark-font-size,
+);
+@include step-states(
+  $stepper-step-bg,
+  $stepper-step-hover-bg,
+  $stepper-step-color-selected,
+  $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-invalid-bg,
+  $stepper-step-invalid-hover-bg,
+  $stepper-step-disabled-text-color,
+  $stepper-step-disabled-bg,
+);

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

@@ -0,0 +1,32 @@
+@use "sass:math";
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../typography/sizes" as *;
+
+// adduse
+
+$stepper-margin: 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;
+
+@if $size == "default" {
+  $stepper-margin: 12px !default;
+  $stepper-step-min-size: 48px !default;
+  $stepper-step-indicator-size: 32px !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-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);

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

@@ -24,41 +24,49 @@
 }
 
 .dx-tabpanel-tabs-position-top {
-  .dx-tabs {
-    border-bottom: 1px solid $base-border-color;
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-bottom: 1px solid $base-border-color;
 
-    @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-bottom: none;
+      @at-root #{selector-append(".dx-empty-collection", &)} {
+        border-bottom: none;
+      }
     }
   }
 }
 
 .dx-tabpanel-tabs-position-bottom {
-  .dx-tabs {
-    border-top: 1px solid $base-border-color;
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-top: 1px solid $base-border-color;
 
-    @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-top: none;
+      @at-root #{selector-append(".dx-empty-collection", &)} {
+        border-top: none;
+      }
     }
   }
 }
 
 .dx-tabpanel-tabs-position-left {
-  .dx-tabs {
-    border-right: 1px solid $base-border-color;
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-right: 1px solid $base-border-color;
 
-    @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-right: none;
+      @at-root #{selector-append(".dx-empty-collection", &)} {
+        border-right: none;
+      }
     }
   }
 }
 
 .dx-tabpanel-tabs-position-right {
-  .dx-tabs {
-    border-left: 1px solid $base-border-color;
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-left: 1px solid $base-border-color;
 
-    @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-left: none;
+      @at-root #{selector-append(".dx-empty-collection", &)} {
+        border-left: none;
+      }
     }
   }
 }

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

@@ -5,6 +5,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./stepper";
 @use "./splitter";
 @use "./checkBox";
 @use "./switch";

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

@@ -83,14 +83,15 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 }
 
 .dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: $generic-scheduler-all-day-table-cell-height;
-  line-height: $generic-scheduler-all-day-table-cell-height;
   font-size: $generic-scheduler-all-day-title-font-size;
   font-weight: bold;
 
   .dx-scheduler-work-space-all-day-collapsed & {
     height: $generic-scheduler-collapsed-all-day-table-cell-height;
-    line-height: $generic-scheduler-collapsed-all-day-table-cell-height;
   }
 }
 
@@ -148,6 +149,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   @include header-sizes(
     $generic-scheduler-header-height,
     $generic-scheduler-toolbar-item-offset,
+    baseScheduler.$scheduler-base-border,
   );
 
   background-color: $scheduler-header-bg;

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

@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+@use "../button/colors" as *;
+
+// adduse
+
+$stepper-step-bg: $typography-bg !default;
+$stepper-step-hover-bg: $button-normal-contained-bg-hover !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-invalid-bg: $button-danger-bg !default;
+$stepper-step-invalid-hover-bg: $button-danger-contained-bg-hover !default;
+
+$stepper-step-border-color: $base-border-color !default;
+$stepper-step-hover-border-color: $base-border-color !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-disabled-text-color: color.change($base-text-color, $alpha: $base-disabled-opacity) !default;
+$stepper-step-disabled-bg: $base-border-color !default;

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

@@ -0,0 +1,40 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper(
+  $stepper-margin,
+);
+@include connector(
+  $stepper-connector-bg,
+  $stepper-connector-value-bg,
+  $stepper-connector-margin-start,
+);
+@include step(
+  $stepper-step-min-size,
+  $stepper-step-indicator-size,
+  $stepper-step-indicator-size,
+  $stepper-step-content-row-gap,
+  $stepper-step-content-column-gap,
+  $stepper-step-optional-mark-font-size,
+);
+@include step-states(
+  $stepper-step-bg,
+  $stepper-step-hover-bg,
+  $stepper-step-color-selected,
+  $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-invalid-bg,
+  $stepper-step-invalid-hover-bg,
+  $stepper-step-disabled-text-color,
+  $stepper-step-disabled-bg,
+);

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

@@ -0,0 +1,32 @@
+@use "sass:math";
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../typography/sizes" as *;
+
+// adduse
+
+$stepper-margin: 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;
+
+@if $size == "default" {
+  $stepper-margin: 12px !default;
+  $stepper-step-min-size: 48px !default;
+  $stepper-step-indicator-size: 32px !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-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);

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss

@@ -13,8 +13,8 @@
 // adduse
 
 .dx-tabpanel-tabs-position-bottom {
-  .dx-tabpanel-tab {
-    &.dx-tab-selected {
+  > .dx-tabpanel-tabs {
+    .dx-tab-selected {
       @include dx-tabs-border-mixin(
         $generic-tabpanel-tab-border-transparent,
         null,

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss

@@ -13,8 +13,8 @@
 // adduse
 
 .dx-tabpanel-tabs-position-left {
-  .dx-tabpanel-tab {
-    &.dx-tab-selected {
+  > .dx-tabpanel-tabs {
+    .dx-tab-selected {
       @include dx-tabs-border-mixin(
         null,
         $generic-tabpanel-tab-border-transparent,

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss

@@ -13,8 +13,8 @@
 // adduse
 
 .dx-tabpanel-tabs-position-right {
-  .dx-tabpanel-tab {
-    &.dx-tab-selected {
+  > .dx-tabpanel-tabs {
+    .dx-tab-selected {
       @include dx-tabs-border-mixin(
         null,
         null,

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss

@@ -13,8 +13,8 @@
 // adduse
 
 .dx-tabpanel-tabs-position-top {
-  .dx-tabpanel-tab {
-    &.dx-tab-selected {
+  > .dx-tabpanel-tabs {
+    .dx-tab-selected {
       @include dx-tabs-border-mixin(
         null,
         null,

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss

@@ -14,18 +14,20 @@
 
 
 .dx-tabpanel {
-  .dx-tabs-wrapper {
-    border: none;
+  > .dx-tabpanel-tabs {
+    .dx-tabs-wrapper {
+      border: none;
 
-    &::after {
-      top: 0;
-      bottom: 0;
+      &::after {
+        top: 0;
+        bottom: 0;
+      }
     }
-  }
 
-  .dx-tabs .dx-tabs-scrollable {
-    .dx-tabs-wrapper::after {
-      content: none;
+    .dx-tabs-scrollable {
+      .dx-tabs-wrapper::after {
+        content: none;
+      }
     }
   }
 

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss

@@ -13,35 +13,39 @@
 // adduse
 
 .dx-tabpanel-tabs-position-bottom {
-  .dx-tabs-wrapper {
-    border-block-start: $generic-tabs-border;
-    border-block-end: $generic-tabs-border;
+  > .dx-tabpanel-tabs {
+    .dx-tabs-wrapper {
+      border-block-start: $generic-tabs-border;
+      border-block-end: $generic-tabs-border;
 
-    @include dx-tabs-border-mixin(
-      none,
-      $generic-tabs-border,
-      none,
-      $generic-tabs-border,
-    );
-  }
+      @include dx-tabs-border-mixin(
+        none,
+        $generic-tabs-border,
+        none,
+        $generic-tabs-border,
+      );
+    }
 
-  .dx-tabs .dx-tabs-scrollable {
-    @include dx-tabs-border-mixin(
-      none,
-      $generic-tabs-border-width solid,
-      none,
-      $generic-tabs-border-width solid,
-    );
+    .dx-tabs-scrollable {
+      @include dx-tabs-border-mixin(
+        none,
+        $generic-tabs-border-width solid,
+        none,
+        $generic-tabs-border-width solid,
+      );
 
-    &::after {
-      top: $generic-tabs-border-width;
-      bottom: 0;
+      &::after {
+        top: $generic-tabs-border-width;
+        bottom: 0;
+      }
     }
   }
 
   &:not(.dx-empty-collection) {
-    .dx-multiview-wrapper {
-      border-block-end: none;
+    > .dx-tabpanel-container {
+      > .dx-multiview-wrapper {
+        border-block-end: none;
+      }
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss

@@ -13,28 +13,32 @@
 // adduse
 
 .dx-tabpanel-tabs-position-left {
-  .dx-tabs-wrapper {
-    border-inline-start: $generic-tabs-border;
-    border-inline-end: $generic-tabs-border;
-  }
+  > .dx-tabpanel-tabs {
+    .dx-tabs-wrapper {
+      border-inline-start: $generic-tabs-border;
+      border-inline-end: $generic-tabs-border;
+    }
 
-  .dx-tabs .dx-tabs-scrollable {
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border-width solid,
-      none,
-      $generic-tabs-border-width solid,
-      none,
-    );
+    .dx-tabs-scrollable {
+      @include dx-tabs-border-mixin(
+        $generic-tabs-border-width solid,
+        none,
+        $generic-tabs-border-width solid,
+        none,
+      );
 
-    &::after {
-      left: 0;
-      right: $generic-tabs-border-width;
+      &::after {
+        left: 0;
+        right: $generic-tabs-border-width;
+      }
     }
   }
 
   &:not(.dx-empty-collection) {
-    .dx-multiview-wrapper {
-      border-inline-start: none;
+    > .dx-tabpanel-container {
+      > .dx-multiview-wrapper {
+        border-inline-start: none;
+      }
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss

@@ -13,28 +13,32 @@
 // adduse
 
 .dx-tabpanel-tabs-position-right {
-  .dx-tabs-wrapper {
-    border-inline-start: $generic-tabs-border;
-    border-inline-end: $generic-tabs-border;
-  }
+  > .dx-tabpanel-tabs {
+    .dx-tabs-wrapper {
+      border-inline-start: $generic-tabs-border;
+      border-inline-end: $generic-tabs-border;
+    }
 
-  .dx-tabs .dx-tabs-scrollable {
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border-width solid,
-      none,
-      $generic-tabs-border-width solid,
-      none,
-    );
+    .dx-tabs-scrollable {
+      @include dx-tabs-border-mixin(
+        $generic-tabs-border-width solid,
+        none,
+        $generic-tabs-border-width solid,
+        none,
+      );
 
-    &::after {
-      right: 0;
-      left: $generic-tabs-border-width;
+      &::after {
+        right: 0;
+        left: $generic-tabs-border-width;
+      }
     }
   }
 
   &:not(.dx-empty-collection) {
-    .dx-multiview-wrapper {
-      border-inline-end: none;
+    > .dx-tabpanel-container {
+      > .dx-multiview-wrapper {
+        border-inline-end: none;
+      }
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss

@@ -13,35 +13,39 @@
 // adduse
 
 .dx-tabpanel-tabs-position-top {
-  .dx-tabs-wrapper {
-    border-block-start: $generic-tabs-border;
-    border-block-end: $generic-tabs-border;
+  > .dx-tabpanel-tabs {
+    .dx-tabs-wrapper {
+      border-block-start: $generic-tabs-border;
+      border-block-end: $generic-tabs-border;
 
-    @include dx-tabs-border-mixin(
-      none,
-      $generic-tabs-border,
-      none,
-      $generic-tabs-border,
-    );
-  }
+      @include dx-tabs-border-mixin(
+        none,
+        $generic-tabs-border,
+        none,
+        $generic-tabs-border,
+      );
+    }
 
-  .dx-tabs .dx-tabs-scrollable {
-    @include dx-tabs-border-mixin(
-      none,
-      $generic-tabs-border-width solid,
-      none,
-      $generic-tabs-border-width solid,
-    );
+    .dx-tabs-scrollable {
+      @include dx-tabs-border-mixin(
+        none,
+        $generic-tabs-border-width solid,
+        none,
+        $generic-tabs-border-width solid,
+      );
 
-    &::after {
-      top: 0;
-      bottom: $generic-tabs-border-width;
+      &::after {
+        top: 0;
+        bottom: $generic-tabs-border-width;
+      }
     }
   }
 
   &:not(.dx-empty-collection) {
-    .dx-multiview-wrapper {
-      border-block-start: none;
+    > .dx-tabpanel-container {
+      > .dx-multiview-wrapper {
+        border-block-start: none;
+      }
     }
   }
 }

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

@@ -5,6 +5,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./stepper";
 @use "./splitter";
 @use "./checkBox";
 @use "./switch";

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

@@ -39,6 +39,7 @@ $material-menu-font-size: $material-base-font-size;
 
   .dx-menu-vertical {
     .dx-menu-item-popout {
+      margin-inline-start: $material-menu-icon-to-text-offset;
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -105,8 +105,10 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: $material-scheduler-all-day-table-cell-height;
-  line-height: $material-scheduler-all-day-table-cell-height;
   font-size: $material-scheduler-all-day-title-font-size;
   border-bottom: baseScheduler.$scheduler-base-border;
 
@@ -116,7 +118,6 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
   .dx-scheduler-work-space-all-day-collapsed & {
     height: $material-scheduler-collapsed-all-day-table-cell-height;
-    line-height: $material-scheduler-collapsed-all-day-table-cell-height;
   }
 }
 
@@ -378,6 +379,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   @include header-sizes(
     $material-scheduler-header-height,
     $material-scheduler-toolbar-item-offset,
+    baseScheduler.$scheduler-base-border,
   );
   @include header-buttons(
     $button-normal-bg,

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

@@ -0,0 +1,36 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+@use "../button/colors" as *;
+
+// adduse
+
+$stepper-step-bg: $typography-bg !default;
+$stepper-step-hover-bg: $button-normal-hover-bg !default;
+
+$stepper-step-color-selected: $base-inverted-text-color !default;
+$stepper-step-selected-bg: $button-default-bg !default;
+$stepper-step-selected-hover-bg: $button-default-hover-bg !default;
+
+$stepper-step-invalid-bg: $button-danger-bg !default;
+$stepper-step-invalid-hover-bg: $button-danger-hover-bg !default;
+
+$stepper-step-border-color: $base-border-color !default;
+$stepper-step-hover-border-color: null !default;
+
+$stepper-step-focused-border-color: $stepper-step-selected-hover-bg !default;
+$stepper-step-selected-border-color: $base-accent !default;
+
+$stepper-connector-bg: $base-border-color !default;
+$stepper-connector-value-bg: $base-accent !default;
+
+$stepper-step-disabled-text-color: color.change($base-text-color, $alpha: 0.38) !default;
+$stepper-step-disabled-bg: $base-border-color !default;
+
+@if $mode == 'light' {
+  $stepper-step-hover-border-color: darken($base-border-color, 6%) !default;
+}
+
+@if $mode == 'dark' {
+  $stepper-step-hover-border-color: lighten($base-border-color, 6%) !default;
+}