devextreme-themebuilder 23.2.6 → 24.1.2-beta

package/data/scss/widgets/base/textEditor/_mixins.scss

@@ -175,7 +175,7 @@
       margin-right: -2px;
       border-radius: 1px;
       clip-path: inset(-$texteditor-label-font-size 1px -1px 1px);
-  
+
       span {
         position: relative;
         font-size: $texteditor-label-font-size;
@@ -200,7 +200,7 @@
       min-width: $label-before-min-width;
       clip-path: inset(-1px 1px -1px -1px);
     }
-  
+
     .dx-label-after {
       flex-grow: 1;
       min-width: $label-after-min-width;
@@ -215,12 +215,12 @@
       border-end-end-radius: $texteditor-input-border-radius;
       clip-path: inset(-1px -1px -1px 1px);
     }
-  
+
     &.dx-rtl {
       .dx-label-before {
         clip-path: inset(-1px -1px -1px 1px);
       }
-  
+
       .dx-label-after {
         clip-path: inset(-1px 1px -1px -1px);
       }
@@ -249,7 +249,7 @@
     &.dx-texteditor-with-floating-label {
       outline: none;
       margin-top: $label-offset-y;
-  
+
       &.dx-texteditor:not(.dx-daterangebox) {
         border: $texteditor-border;
         box-shadow: none;
@@ -259,11 +259,11 @@
         @include dx-state-border-style($label-readonly-border-style);
         @include dx-state-border-color($texteditor-readonly-color, $texteditor-readonly-color);
       }
-  
+
       &.dx-state-disabled {
         @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
       }
-  
+
       &.dx-invalid {
         @include dx-state-border-color($texteditor-invalid-faded-border-color, $texteditor-invalid-faded-border-color);
 
@@ -272,11 +272,11 @@
           @include dx-state-border-color($texteditor-invalid-focused-border-color, $texteditor-invalid-focused-border-color);
         }
       }
-  
+
       &.dx-state-hover {
         @include dx-state-border-color($texteditor-hover-border-color, $texteditor-hover-border-bottom-color);
       }
-  
+
       &.dx-state-focused {
         @include dx-state-border-color($texteditor-focused-border-color, $texteditor-focused-border-bottom-color);
         @include dx-state-border-width($label-active-border-width);
@@ -304,7 +304,7 @@
         border-end-end-radius: 1px;
         margin-inline-start: 0;
         padding: 0;
-    
+
         span {
           position: absolute;
           width: 100%;
@@ -342,7 +342,7 @@
           $label-empty-margin-top,
           $texteditor-input-top-padding
         );
-  
+
         &.dx-state-focused,
         &.dx-dropdowneditor-active {
           @include dx-state(
@@ -352,12 +352,12 @@
             $label-backdrop-bg
           );
         }
-  
+
         &.dx-state-readonly {
           .dx-placeholder {
             display: none;
           }
-  
+
           &.dx-state-focused {
             @include dx-state-empty(
               $label-active-border-width,
@@ -406,7 +406,7 @@
         padding-top: $texteditor-filled-input-with-label-top-padding;
         padding-bottom: $texteditor-filled-input-with-label-bottom-padding;
       }
-      
+
       .dx-lookup-field {
         .dx-placeholder::before {
           padding: 0;
@@ -515,7 +515,7 @@
 ) {
   .dx-editor-underlined {
     &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
-    &.dx-texteditor-with-floating-label {  
+    &.dx-texteditor-with-floating-label {
       .dx-texteditor-input,
       .dx-lookup-field,
       .dx-placeholder::before {
@@ -564,14 +564,14 @@
         }
       }
     }
-  
+
     &.dx-texteditor-with-floating-label {
       &.dx-texteditor-empty,
       &.dx-texteditor-empty.dx-state-readonly {
         .dx-placeholder {
           display: none;
         }
-  
+
         .dx-texteditor-label {
           transition: $texteditor-label-transition;
           transform: translate(0, 0);
@@ -581,7 +581,7 @@
           top: 50%;
           margin-top: math.div(-$texteditor-empty-label-height, 2);
         }
-  
+
         &.dx-textarea {
           .dx-texteditor-label {
             top: $texteditor-with-label-input-top-padding;
@@ -589,13 +589,13 @@
           }
         }
       }
-  
+
       &.dx-state-focused,
       &.dx-dropdowneditor-active {
         .dx-placeholder {
           display: block;
         }
-  
+
         .dx-texteditor-label {
           transform: translate(0, 0);
           font-size: $texteditor-label-font-size;
@@ -604,7 +604,7 @@
           top: $texteditor-label-top-offset;
           margin-top: 0;
         }
-  
+
         &.dx-textarea {
           .dx-texteditor-label {
             top: $texteditor-label-top-offset;
@@ -630,12 +630,12 @@
       margin-bottom: 1px;
       margin-inline-start: $generic-texteditor-custom-button-margin;
       margin-inline-end: $generic-texteditor-custom-button-margin;
-  
+
       > .dx-button-content {
         padding-top: $generic-texteditor-button-top-padding;
         padding-bottom: $generic-texteditor-button-bottom-padding;
       }
-  
+
       &.dx-button-has-icon:not(.dx-button-has-text) {
         > .dx-button-content {
           padding: $generic-texteditor-button-icononly-top-padding $generic-texteditor-button-icononly-horizontal-padding $generic-texteditor-button-icononly-bottom-padding;
@@ -672,7 +672,7 @@
           &:first-child {
             margin-left: 0;
           }
-  
+
           &:last-child {
             margin-right: 0;
           }
@@ -686,7 +686,6 @@
   $material-underlined-editor-button-height,
   $material-editor-custom-button-margin,
   $material-editor-custom-button-last-child-margin,
-  $material-filled-texteditor-input-button-horizontal-padding,
   $material-filled-texteditor-spin-button-horizontal-padding,
   $last-button-horizontal-padding,
   $material-button-vertical-padding,
@@ -751,33 +750,33 @@
             margin-bottom: 3px;
             margin-inline-end: $material-editor-custom-button-margin;
             margin-inline-start: $material-editor-custom-button-margin;
-  
+
             .dx-button-content {
               display: flex;
               justify-content: center;
               padding-top: $material-button-vertical-padding - 1px;
-  
+
               .dx-icon {
                 align-self: center;
                 margin-top: 1px;
               }
             }
-  
+
             &.dx-button-has-text {
               .dx-button-content .dx-icon {
                 margin-top: 3px;
               }
             }
-  
+
             &:not(.dx-button-has-text) {
               min-width: $material-underlined-editor-button-height;
-  
+
               .dx-button-content {
                 padding: 2px;
               }
             }
           }
-  
+
           &:first-child {
             > .dx-button {
               &:first-child {
@@ -785,7 +784,7 @@
               }
             }
           }
-  
+
           &:last-child {
             > .dx-button {
               &:last-child {
@@ -805,33 +804,33 @@
           margin-bottom: 3px;
           margin-inline-end: $material-editor-custom-button-margin;
           margin-inline-start: $material-editor-custom-button-margin;
-  
+
           .dx-button-content {
             display: flex;
             justify-content: center;
             padding-top: $material-button-vertical-padding - 1px;
-  
+
             .dx-icon {
               align-self: center;
               margin-top: 1px;
             }
           }
-  
+
           &.dx-button-has-text {
             .dx-button-content .dx-icon {
               margin-top: 3px;
             }
           }
-  
+
           &:not(.dx-button-has-text) {
             min-width: $material-underlined-editor-button-height;
-  
+
             .dx-button-content {
               padding: 2px;
             }
           }
         }
-  
+
         &:first-child {
           > .dx-button {
             &:first-child {
@@ -839,7 +838,7 @@
             }
           }
         }
-  
+
         &:last-child {
           > .dx-button {
             &:last-child {

package/data/scss/widgets/base/treeView/_common.scss

@@ -4,7 +4,6 @@
 // adduse
 
 $treeview-searchbox-margin-bottom: 5px;
-$tree-view-icon-size: 24px;
 
 .dx-treeview-loadindicator-wrapper {
   text-align: center;

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

@@ -188,7 +188,6 @@ $scrollview-pulldown-path: null !default;
   $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default;
   $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default;
   $base-border-color-disabled: darken($base-border-color, 12.16) !default;
-
   $base-separator-color: darken($base-border-color, 5.88) !default;
 
   $base-inverted-bg: lighten($base-bg, 100%) !default;
@@ -206,6 +205,8 @@ $base-focus-color: $base-inverted-text-color !default;
 $base-focus-bg: $base-hover-bg !default;
 $base-spin-icon-color: $base-icon-color !default;
 $base-link-color: $base-accent !default;
+
+$typography-color: $base-text-color !default;
 $typography-link-color: $base-link-color !default;
 
 $base-element-bg: $base-bg !default;
@@ -214,6 +215,23 @@ $base-invalid-color: $base-danger !default;
 $base-invalid-color-hover: $base-danger-hover !default;
 $base-invalid-color-active: $base-danger-active !default;
 $base-invalid-color-selected: $base-danger-selected !default;
+
+
+:root {
+  --dx-component-color-bg: #{$base-bg};
+  --dx-color-main-bg: #{$base-typography-bg};
+  --dx-color-primary: #{$base-accent};
+  --dx-color-danger: #{$base-danger};
+  --dx-color-success: #{$base-success};
+  --dx-color-warning: #{$base-warning};
+  --dx-color-border: #{$base-border-color};
+  --dx-color-text: #{$base-text-color};
+  --dx-color-icon: #{$base-icon-color};
+  --dx-color-spin-icon: #{$base-spin-icon-color};
+  --dx-color-link: #{$base-link-color};
+  --dx-color-shadow: #{$base-shadow-color};
+  --dx-color-separator: #{$base-separator-color};
+}
 $never-used: collector((
 "$base-accent": $base-accent,
 "$base-font-family": $base-font-family,

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

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

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

@@ -59,6 +59,15 @@ $fluent-base-border-width: 1px !default;
 $base-border-radius: $fluent-base-border-radius !default;
 
 $fluent-base-standard-texteditor-input-horizontal-padding: 0 !default;
+
+
+:root { 
+  --dx-component-height: #{$fluent-base-inline-widget-height};
+  --dx-font-size: #{$fluent-base-font-size};
+  --dx-border-width: #{$fluent-base-border-width}; 
+  --dx-border-radius: #{$fluent-base-border-radius}; 
+  --dx-font-size-icon: #{$fluent-base-icon-size}; 
+} 
 $never-used: collector((
 "$fluent-button-height": $fluent-button-height,
 "$fluent-button-icon-size": $fluent-button-icon-size,

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

@@ -9,7 +9,6 @@ $fluent-accordion-title-vertical-padding: 6px !default;
 $fluent-accordion-body-padding: null !default;
 $fluent-accordion-title-height: null !default;
 
-$fluent-accordion-shadow: null !default;
 $accordion-title-icon-margin: null !default;
 $accordion-title-icon-size: null !default;
 $accordion-item-border-radius: $fluent-base-border-radius !default;

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

@@ -36,7 +36,6 @@ $button-success-selected-bg: getCustomVar(("$button-success-selected-bg")) !defa
 $button-border-radius: $base-border-radius !default;
 $button-disabled-background: $base-background-disabled !default;
 $button-disabled-icon-opacity: 0.6 !default;
-$button-disabled-text-opacity: 0.6 !default;
 $button-shadow-color: null !default;
 $button-normal-color: $base-text-color !default;
 $button-normal-bg: $base-element-bg !default;
@@ -137,7 +136,7 @@ $button-accent-foreground-color: null !default;
     $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
     $button-danger-outlined-active-bg: darken($button-danger-outlined-hover-bg, 4) !default;
     $button-danger-outlined-selected-bg: darken($button-danger-outlined-hover-bg, 4) !default;
-  
+
     $button-success-outlined-hover-bg: mix($base-bg, $base-success, 90%) !default;
     $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
     $button-success-outlined-active-bg: darken($button-success-outlined-hover-bg, 4) !default;

package/data/scss/widgets/fluent/button/_mixins.scss

@@ -7,8 +7,6 @@
 @use "../../base/icons" as *;
 @use "../../base/button/mixins" as *;
 
-$fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizontal-padding;
-
 @mixin dx-button-onlyicon-sizing($icon-size: $fluent-button-icon-size) {
   min-width: $fluent-button-height;
 
@@ -35,7 +33,7 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
 
 @mixin dx-button-text-and-icon-sizing() {
   @include dx-button-sizing(
-    $fluent-button-vertical-padding, 
+    $fluent-button-vertical-padding,
     $fluent-button-icon-text-padding,
     $fluent-button-horizontal-padding,
     $fluent-button-icon-size,
@@ -52,7 +50,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
   $hover-background-color,
   $focused-background-color,
   $active-background-color,
-  $disabled-background-color,
   $icon-color,
   $selected-background-color: $active-background-color,
   $selected-color: $text-color,
@@ -84,7 +81,7 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
 
   &.dx-state-focused {
     background-color: $focused-background-color;
-    
+
     &,
     .dx-icon {
       color: $text-color-hover;
@@ -93,7 +90,7 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
 
   &.dx-state-active {
     background-color: $active-background-color;
-    
+
     &,
     .dx-icon {
       color: $text-color-active;
@@ -121,7 +118,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
     $button-hover-bg,
     $button-focused-bg,
     $button-active-bg,
-    $button-disabled-background,
     $button-icon-color,
     $button-selected-bg,
     $button-selected-color,
@@ -158,7 +154,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
     $hover-bg,
     $focused-bg,
     $active-bg,
-    transparent,
     $button-color,
     $selected-bg,
     $selected-color,
@@ -179,7 +174,7 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
   border-width: 1px;
   border-style: solid;
   border-color: $border-color;
-  
+
   @include dx-button-styling-variant(
     transparent,
     $button-color,
@@ -188,7 +183,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
     $hover-bg,
     $focused-bg,
     $active-bg,
-    transparent,
     $button-color,
     $selected-bg,
     $selected-color,

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

@@ -27,3 +27,7 @@ $fluent-button-box-shadow-size: 0 1px 3px !default;
   $fluent-button-icon-padding: 4px !default;
   $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
 }
+
+:root { 
+  --dx-button-padding-inline: #{$fluent-button-horizontal-padding}; 
+} 

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

@@ -30,7 +30,6 @@
   $calendar-navigator-text-color,
 );
 @include dx-calendar-body-mixin(
-  $calendar-cell-other-color,
   $calendar-week-number-cell-color,
   $calendar-week-number-cell-bg,
   $calendar-week-number-border-radius,

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

@@ -6,19 +6,19 @@
 @use "../sizes" as *;
 @use "../../base/icons" as *;
 @use "../../base/checkBox";
+@use "../../base/checkBox/mixins" as *;
 
 // adduse
 
-$icon-position: relative;
-
 .dx-checkbox-icon {
-  width: $fluent-checkbox-size;
-  height: $fluent-checkbox-size;
+  width: $fluent-checkbox-arrow-icon-size;
+  height: $fluent-checkbox-arrow-icon-size;
   border-width: $fluent-checkbox-border-width;
   border-style: solid;
   border-color: $checkbox-border-color;
-  border-radius: $fluent-checkbox-border-radius;
+  border-radius: $fluent-checkbox-icon-border-radius;
   background-color: $checkbox-foreground-color;
+  font-size: $fluent-checkbox-icon-font-size;
 
   &::before {
     z-index: 2;
@@ -93,13 +93,14 @@ $icon-position: relative;
 .dx-checkbox-checked {
   .dx-checkbox-icon {
     color: $checkbox-foreground-color;
-    border: 1px solid $checkbox-accent-color;
+    border-color: $checkbox-accent-color;
     background-color: $checkbox-accent-color;
 
     @include dx-icon(check);
-    @include dx-icon-font-centered-sizing($fluent-checkbox-arrow-icon-size, $icon-position);
 
-    font-size: $fluent-checkbox-arrow-font-size;
+    font-size: $fluent-checkbox-icon-font-size;
+
+    @include dx-checkbox-icon-centered($fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-font-size);
   }
 
   &.dx-state-hover {
@@ -148,22 +149,17 @@ $icon-position: relative;
   }
 }
 
+@include dx-checkbox-icon-indeterminate(
+  $checkbox-foreground-color,
+  $checkbox-accent-color,
+  $fluent-checkbox-indeterminate-icon-height,
+  $fluent-checkbox-indeterminate-icon-width,
+  $fluent-checkbox-indeterminate-icon-border-radius,
+);
+
 .dx-checkbox-indeterminate {
   .dx-checkbox-icon {
-    background-color: $checkbox-foreground-color;
-    border: 1px solid $checkbox-accent-color;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: 4px;
-      background-color: $checkbox-accent-color;
-      border: 3px solid $base-element-bg;
-    }
-
-    font-size: $fluent-checkbox-indeterminate-font-size;
+    border-color: $checkbox-accent-color;
   }
 
   &.dx-invalid {

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

@@ -3,35 +3,26 @@
 
 // adduse
 
-$fluent-checkbox-arrow-icon-size: null !default;
-$fluent-checkbox-arrow-font-size: null !default;
-$fluent-checkbox-indeterminate-icon-size: null !default;
-$fluent-checkbox-indeterminate-font-size: null !default;
+$fluent-checkbox-icon-font-size: 16px !default;
+
 $fluent-checkbox-border-width: 1px !default;
-$checkbox-icon-border-radius: 2px !default;
-$fluent-checkbox-border-radius: null !default;
-$fluent-checkbox-size: null !default;
+$fluent-checkbox-icon-border-radius: 2px !default;
+
+$fluent-checkbox-arrow-icon-size: 1em !default;
+$fluent-checkbox-arrow-font-size: 0.75em !default;
+$fluent-checkbox-indeterminate-icon-height: 0.5em !default;
+$fluent-checkbox-indeterminate-icon-width: 0.5em !default;
+$fluent-checkbox-indeterminate-icon-border-radius: 2px !default;
+
 $fluent-checkbox-text-padding-start: null !default;
 $fluent-checkbox-text-padding-end: null !default;
 
 @if $size == "default" {
   $fluent-checkbox-text-padding-start: 12px !default;
   $fluent-checkbox-text-padding-end: 8px !default;
-  $fluent-checkbox-arrow-icon-size: 1em !default;
-  $fluent-checkbox-arrow-font-size: 12px !default;
-  $fluent-checkbox-indeterminate-icon-size: 1em !default;
-  $fluent-checkbox-indeterminate-font-size: 20px !default;
-  $fluent-checkbox-border-radius: $checkbox-icon-border-radius !default;
-  $fluent-checkbox-size: 16px !default;
 }
 
 @else if $size == "compact" {
   $fluent-checkbox-text-padding-start: 8px !default;
   $fluent-checkbox-text-padding-end: 6px !default;
-  $fluent-checkbox-arrow-icon-size: 1em !default;
-  $fluent-checkbox-arrow-font-size: 12px !default;
-  $fluent-checkbox-indeterminate-icon-size: 1em !default;
-  $fluent-checkbox-indeterminate-font-size: 18px !default;
-  $fluent-checkbox-border-radius: 2px !default;
-  $fluent-checkbox-size: 16px !default;
 }

package/data/scss/widgets/fluent/common/_mixins.scss

@@ -11,7 +11,7 @@ $badge-invalid-bg: $base-invalid-color;
 
 @mixin dx-base-typography() {
   @include dx-base-typography-mixin(
-      $base-text-color,
+      $typography-color,
       $fluent-base-font-size,
       $base-font-family,
       $fluent-line-height

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

@@ -27,3 +27,7 @@ $fluent-base-dropdown-widgets-shadow: null !default;
   $fluent-line-height: 1.3333 !default;
   $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default;
 }
+
+:root { 
+  --dx-line-height: #{$fluent-line-height};
+} 

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

@@ -79,7 +79,7 @@
       }
     }
 
-    @include dx-field-value-widget-position(dx-checkbox, $fluent-checkbox-size);
+    @include dx-field-value-widget-position(dx-checkbox, $fluent-checkbox-icon-font-size);
     @include dx-field-value-widget-position(dx-switch, $fluent-switch-height);
     @include dx-field-value-widget-position(dx-slider, $fluent-slider-height);
     @include dx-field-value-widget-position(dx-radiogroup, $fluent-radiogroup-min-height);

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

@@ -16,7 +16,6 @@ $filemanager-file-item-select-bg: color.change($base-accent, $alpha: 0.8) !defau
 $filemanager-file-item-select-focus-color: $base-bg !default;
 $filemanager-file-item-select-focus-bg: color.change($base-accent, $alpha: 0.7) !default;
 $filemanager-file-item-hover-bg: $base-hover-bg !default;
-$filemanager-file-item-focused-bg: $base-accent !default;
 $filemanager-file-item-focused-border: $base-accent !default;
 $filemanager-item-focused-color: $base-inverted-text-color !default;
 $filemanager-dirs-tree-item-focus-bg: null !default;

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

@@ -7,7 +7,7 @@
 @use "../../base/fileManager/mixins" as *;
 
 // adduse
-@use "../splitter";
+@use "../splitterBar";
 
 
 .dx-filemanager {

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

@@ -119,3 +119,12 @@
     @include dx-icon-margin(math.div($fluent-base-icon-size, 3));
   }
 }
+
+.dx-form-group-custom-caption {
+  font-size: $fluent-form-group-caption-font-size;
+
+  .dx-icon {
+    @include dx-icon-sizing($fluent-base-icon-size);
+    @include dx-icon-margin($fluent-form-group-custom-caption-icon-margin);
+  }
+}