devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -16,6 +16,31 @@ $treeview-item-selected-color: $treeview-color !default;
 $treeview-item-selected-bg: $base-selected-bg !default;
 $treeview-spin-icon-color: $base-spin-icon-color !default;
 $checkbox-border-color-focused: $base-accent-active !default;
+$treeview-checkbox-disabled-control-color-focused: null !default;
+$treeview-checkbox-disabled-background-focused: null !default;
+$treeview-item-content-disabled: null !default;
+$treeview-checkbox-border-color-focused: null !default;
+$treeview-checkbox-background-color-focused: null !default;
+$treeview-checkbox-accent-color-focused: null !default;
+
+@if $mode == "light" {
+  $treeview-item-content-disabled: color.adjust($base-bg, $lightness: -25.88%, $space: hsl) !default;
+  $treeview-checkbox-disabled-control-color-focused: color.adjust($base-bg, $lightness: -29.8%, $space: hsl) !default;
+  $treeview-checkbox-disabled-background-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
+  $treeview-checkbox-border-color-focused: color.adjust($base-bg, $lightness: -85.88%, $space: hsl) !default;
+  $treeview-checkbox-background-color-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
+  $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl) !default;
+}
+
+@if $mode == "dark" {
+  $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl) !default;
+  $treeview-checkbox-disabled-control-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl) !default;
+  $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default;
+  $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl) !default;
+  $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default;
+  $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default;
+}
+
 $never-used: collector((
 "$treeview-focused-bg": $treeview-focused-bg,
 ));

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

@@ -6,35 +6,103 @@
 @use "../sizes" as *;
 @use "../../base/treeView" as *;
 @use "../../base/icon_fonts" as *;
-@use "../checkBox/colors" as *;
 
 .dx-treeview-custom-expand-icon,
 .dx-treeview-custom-collapse-icon {
   @include dx-icon-sizing($fluent-base-icon-size);
 }
 
+.dx-treeview-select-all-item {
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $treeview-checkbox-border-color-focused;
+      background-color: $treeview-checkbox-background-color-focused;
+    }
+  }
+
+  &.dx-state-focused.dx-checkbox-checked {
+    .dx-checkbox-icon {
+      background-color: $treeview-checkbox-accent-color-focused;
+      border-color: $treeview-checkbox-accent-color-focused;
+    }
+  }
+
+  &.dx-state-focused.dx-checkbox-indeterminate {
+    .dx-checkbox-icon {
+      border-color: $treeview-checkbox-accent-color-focused;
+
+      &::before {
+        background-color: $treeview-checkbox-accent-color-focused;
+      }
+    }
+  }
+}
+
 .dx-treeview-item-with-checkbox {
+  .dx-treeview-item {
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        border-color: $treeview-item-content-disabled;
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $treeview-item-content-disabled;
+        }
+      }
+    }
+  }
+
   &.dx-state-focused > .dx-treeview-item {
     .dx-checkbox {
       .dx-checkbox-icon {
-        border-color: $checkbox-accent-color-focused;
+        border-color: $treeview-checkbox-border-color-focused;
+        background-color: $treeview-checkbox-background-color-focused;
       }
 
       &.dx-checkbox-checked {
         .dx-checkbox-icon {
-          background-color: $checkbox-accent-color-focused;
+          background-color: $treeview-checkbox-accent-color-focused;
+          border-color: $treeview-checkbox-accent-color-focused;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon {
+          border-color: $treeview-checkbox-accent-color-focused;
+
+          &::before {
+            background-color: $treeview-checkbox-accent-color-focused;
+          }
+        }
+      }
+    }
+
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        background-color: $treeview-checkbox-disabled-background-focused;
+        border-color: $treeview-checkbox-disabled-control-color-focused;
+      }
+
+      &.dx-checkbox-checked {
+        .dx-checkbox-icon {
+          color: $treeview-checkbox-disabled-control-color-focused;
         }
       }
 
       &.dx-checkbox-indeterminate {
         .dx-checkbox-icon::before {
-          background-color: $checkbox-accent-color-focused;
+          background-color: $treeview-checkbox-disabled-control-color-focused;
         }
       }
     }
   }
 }
 
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}
+
 @include default-expander-icon(
   'chevrondown',
   'chevronright',

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

@@ -77,7 +77,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-border-color: #dee1e3 !default;
   $base-border-radius: 2px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: $base-inverted-bg !default;
   $base-success: #5cb85c !default;
@@ -86,7 +86,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-hover-color: $base-text-color !default;
   $base-hover-bg: color.change($base-accent, $alpha: 0.12) !default;
   $base-select-color: $base-text-color !default;
-  $base-select-bg: lighten($base-accent, 21%) !default;
+  $base-select-bg: color.adjust($base-accent, $lightness: 21%, $space: hsl) !default;
   $base-inverted-text-color: #fff !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
@@ -138,7 +138,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-icon-color: $base-text-color !default;
   $base-border-radius: 4px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: lighten($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: #000 !default;
   $base-success: #5cb85c !default;
@@ -170,7 +170,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-border-color: #596980 !default;
   $base-border-radius: 2px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-success: #59d8a4 !default;
   $base-warning: #f0ad4e !default;
@@ -183,10 +183,10 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: #2a2a2a !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-shadow-color: $base-inverted-bg !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
-  $base-dropdown-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.175) !default;
+  $base-dropdown-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
   $screen-text-color: extcolor.screen($base-bg, #686868) !default;
@@ -206,7 +206,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-border-color: #343840 !default;
   $base-border-radius: 1px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: lighten($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: #000 !default;
   $base-success: #5cb85c !default;
@@ -239,10 +239,10 @@ $base-grid-selectedrow-border-color: null !default;
   $base-accent: #3cbab2 !default;
   $base-text-color: #28484f !default;
   $base-bg: #f5f5f5 !default;
-  $base-border-color: darken($base-bg, 9%) !default;
+  $base-border-color: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default;
   $base-border-radius: 2px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: $base-inverted-bg !default;
   $base-success: #72d63c !default;
@@ -274,7 +274,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-border-color: #ddd !default;
   $base-border-radius: 4px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-success: #5cb85c !default;
   $base-warning: #f0ad4e !default;
@@ -306,7 +306,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-border-color: #e8eaeb !default;
   $base-border-radius: 2px !default;
   $base-border-radius-exsmall: $base-border-radius - 2px !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-success: #5cb85c !default;
   $base-warning: #f0ad4e !default;
@@ -319,7 +319,7 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: #fff !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-shadow-color: $base-inverted-bg !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-webwidget-hover-background: #edf0f2 !default;

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

@@ -46,7 +46,7 @@ $generic-base-inline-horizontal-padding: null !default;
 $generic-base-inline-widget-vertical-padding:
   $generic-base-inline-widget-height -
   $generic-base-inline-block-height !default;
-$generic-base-inline-widget-top-padding: floor(math.div($generic-base-inline-widget-vertical-padding, 2)) !default;
+$generic-base-inline-widget-top-padding: math.floor(math.div($generic-base-inline-widget-vertical-padding, 2)) !default;
 $generic-base-inline-widget-bottom-padding:
   $generic-base-inline-widget-vertical-padding -
   $generic-base-inline-widget-top-padding !default;
@@ -69,7 +69,7 @@ $generic-base-inline-borderedwidget-bottom-padding:
   $generic-base-inline-widget-bottom-padding -
   $generic-base-border-width !default;
 
-$generic-treeview-search-editor-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
+$generic-treeview-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
 
 :root {
   --dx-component-height: #{$generic-base-inline-widget-height};

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

@@ -42,7 +42,7 @@ $accordion-item-hover-bg: null !default;
   $accordion-title-color: $accordion-color !default;
   $accordion-item-focused-border-color: $base-focus-bg !default;
   $accordion-title-active-color: $accordion-color !default;
-  $accordion-title-active-bg: color.change(lighten($accordion-background-color, 62.5%), $alpha: 0.2) !default;
+  $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $accordion-item-hover-bg: $base-hover-bg !default;
 }
 
@@ -50,7 +50,7 @@ $accordion-item-hover-bg: null !default;
   $accordion-title-color: $accordion-color !default;
   $accordion-item-focused-border-color: $base-accent !default;
   $accordion-title-active-color: $base-accent !default;
-  $accordion-title-active-bg: color.change(lighten($accordion-background-color, 62.5%), $alpha: 0.2) !default;
+  $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $accordion-item-hover-bg: $base-hover-bg !default;
 }
 
@@ -58,7 +58,7 @@ $accordion-item-hover-bg: null !default;
   $accordion-title-color: $base-header-color !default;
   $accordion-item-focused-border-color: $base-accent !default;
   $accordion-title-active-color: $base-accent-highlight-color !default;
-  $accordion-title-active-bg: color.change(lighten($accordion-background-color, 62.5%), $alpha: 0.2) !default;
+  $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $accordion-item-hover-bg: $base-hover-bg !default;
 }
 
@@ -66,7 +66,7 @@ $accordion-item-hover-bg: null !default;
   $accordion-title-color: $base-accent !default;
   $accordion-item-focused-border-color: $base-focus-bg !default;
   $accordion-title-active-color: $accordion-color !default;
-  $accordion-title-active-bg: color.change(darken($accordion-background-color, 9%), $alpha: 0.4) !default;
+  $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: -9%, $space: hsl), $alpha: 0.4) !default;
   $accordion-item-hover-bg: $base-hover-bg !default;
 }
 
@@ -74,7 +74,7 @@ $accordion-item-hover-bg: null !default;
   $accordion-title-color: $accordion-color !default;
   $accordion-item-focused-border-color: $base-focus-bg !default;
   $accordion-title-active-color: $accordion-color !default;
-  $accordion-title-active-bg: color.change(darken($accordion-background-color, 62.5%), $alpha: 0.2) !default;
+  $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $accordion-item-hover-bg: $base-hover-bg !default;
 }
 
@@ -82,7 +82,7 @@ $accordion-item-hover-bg: null !default;
   $accordion-title-color: $accordion-color !default;
   $accordion-item-focused-border-color: $base-accent !default;
   $accordion-title-active-color: $accordion-color !default;
-  $accordion-title-active-bg: color.change(darken($accordion-background-color, 62.5%), $alpha: 0.2) !default;
+  $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $accordion-item-hover-bg: $base-hover-bg !default;
 }
 

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

@@ -20,7 +20,8 @@
   border-top-color: $accordion-item-border-color;
 
   &:last-child {
-    border-bottom: 1px solid $accordion-item-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $accordion-item-border-color;
   }
 
   &.dx-state-active:not(.dx-accordion-item-opened) {

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

@@ -24,7 +24,7 @@ $badge-bg: null !default;
 }
 
 @if $color == "darkmoon" {
-  $badge-bg: lighten($base-accent, 25%) !default;
+  $badge-bg: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {