devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/material/tabs/layout/tab/_base.scss

@@ -12,8 +12,8 @@
 // adduse
 @use "../../../scrollable";
 @use "../../../badge";
-@import "styling-mode/primary";
-@import "styling-mode/secondary";
+@use "styling-mode/primary" as *;
+@use "styling-mode/secondary" as *;
 
 
 .dx-tab {

package/data/scss/widgets/material/tabs/variables/_colors.scss

@@ -6,10 +6,10 @@ $tabs-disabled-tab-border-color: getCustomVar(("$tabs-disabled-tab-border-color"
 $tabs-tab-background: getCustomVar(("$tabs-tab-background")) !default;
 $tabs-tab-icon-color: getCustomVar(("$tabs-tab-icon-color")) !default;
 $tabs-tab-icon-selected-color: getCustomVar(("$tabs-tab-icon-selected-color")) !default;
-$tabs-tab-icon-disabled-color: getCustomVar(("$tabs-tab-icon-disabled-color")) !default;
 $tabs-hovered-tab-bg-color: getCustomVar(("$tabs-hovered-tab-bg-color")) !default;
 $tabs-focused-tab-bg-color: getCustomVar(("$tabs-focused-tab-bg-color")) !default;
 $tabs-active-tab-bg-color: getCustomVar(("$tabs-active-tab-bg-color")) !default;
+$tabs-tab-icon-disabled-color: getCustomVar(("$tabs-tab-icon-disabled-color")) !default;
 
 @use "sass:color";
 @use "../../colors" as *;
@@ -18,27 +18,31 @@ $tabs-active-tab-bg-color: getCustomVar(("$tabs-active-tab-bg-color")) !default;
 // adduse
 
 $material-tabs-nav-button-background: color.change($button-default-hover-bg, $alpha: 0.08) !default;
-$tabs-tab-color: color.change($base-text-color, $alpha: 0.54) !default;
+$tabs-tab-color: color.change($base-text-color, $alpha: 0.6) !default;
 $tabs-tab-selected-color: $base-accent !default;
-$tabs-tab-disabled-color: color.change($tabs-tab-color, $alpha: 0.32) !default;
+$tabs-tab-disabled-color: null !default;
 $tabs-selected-tab-border-color: $base-accent !default;
 $tabs-disabled-tab-border-color: null !default;
 $tabs-tab-background: $base-bg !default;
 $tabs-tab-icon-color: $tabs-tab-color !default;
 $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
-$tabs-tab-icon-disabled-color: color.change($tabs-tab-icon-color, $alpha: 0.32) !default;
+
+
 $tabs-tab-button-disabled-opacity: 0 !default;
 $tabs-hovered-tab-bg-color: color.change($base-accent, $alpha: 0.08) !default;
 $tabs-focused-tab-bg-color: color.change($base-accent, $alpha: 0.12) !default;
 $tabs-active-tab-bg-color: color.change($base-accent, $alpha: 0.16) !default;
 
 @if $mode == "light" {
+  $tabs-tab-disabled-color: rgba(0, 0, 0, 0.38) !default;
   $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.13) !default;
 }
 
 @if $mode == "dark" {
+  $tabs-tab-disabled-color: rgba(255, 255, 255, 0.38) !default;
   $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.4) !default;
 }
+$tabs-tab-icon-disabled-color: $tabs-tab-disabled-color !default;
 $never-used: collector((
 "$tabs-tab-color": $tabs-tab-color,
 "$tabs-tab-selected-color": $tabs-tab-selected-color,
@@ -48,8 +52,8 @@ $never-used: collector((
 "$tabs-tab-background": $tabs-tab-background,
 "$tabs-tab-icon-color": $tabs-tab-icon-color,
 "$tabs-tab-icon-selected-color": $tabs-tab-icon-selected-color,
-"$tabs-tab-icon-disabled-color": $tabs-tab-icon-disabled-color,
 "$tabs-hovered-tab-bg-color": $tabs-hovered-tab-bg-color,
 "$tabs-focused-tab-bg-color": $tabs-focused-tab-bg-color,
 "$tabs-active-tab-bg-color": $tabs-active-tab-bg-color,
+"$tabs-tab-icon-disabled-color": $tabs-tab-icon-disabled-color,
 ));

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

@@ -1,7 +1,6 @@
 $tagbox-tag-color: getCustomVar(("$tagbox-tag-color")) !default;
 $tagbox-tag-bg: getCustomVar(("$tagbox-tag-bg")) !default;
 $tagbox-tag-active-color: getCustomVar(("$tagbox-tag-active-color")) !default;
-$tagbox-tag-button-remove-bg: getCustomVar(("$tagbox-tag-button-remove-bg")) !default;
 
 @use "sass:color";
 @use "../sizes" as *;
@@ -9,34 +8,27 @@ $tagbox-tag-button-remove-bg: getCustomVar(("$tagbox-tag-button-remove-bg")) !de
 @use "../color" as extcolor;
 
 // adduse
-$tagbox-tag-color: color.change($base-text-color, $alpha: 0.6) !default;
+$tagbox-tag-color: $base-text-color !default;
 $tagbox-tag-bg: null !default;
 $tagbox-tag-hover-bg: null !default;
 $tagbox-tag-active-color: $base-text-color !default;
-$tagbox-tag-button-remove-bg: rgba(0, 0, 0, 0.36) !default;
-$tagbox-tag-button-remove-color: null !default;
+$tagbox-tag-button-remove-color: $base-icon-color !default;
 $tagbox-tag-focused-bg: null !default;
 $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $mode == "light" {
-  $tagbox-tag-bg: darken($base-bg, 12%) !default;
-  $tagbox-tag-hover-bg: darken($base-bg, 15%) !default;
-  $tagbox-tag-button-remove-color: $tagbox-tag-bg !default;
-  $tagbox-tag-focused-bg: darken($base-bg, 32%) !default;
+  $tagbox-tag-bg: rgba(0, 0, 0, 0.08) !default;
+  $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: -15%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $tagbox-tag-bg: lighten($base-bg, 12%) !default;
-  $tagbox-tag-hover-bg: lighten($base-bg, 15%) !default;
-  $tagbox-tag-button-remove-color: lighten($base-bg, 22%) !default;
-  $tagbox-tag-focused-bg: lighten($base-bg, 32%) !default;
+  $tagbox-tag-bg: rgba(255, 255, 255, 0.08) !default;
+  $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: 15%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !default;
 }
-
-$tagbox-tag-disabled-bg: $tagbox-tag-focused-bg !default;
-
 $never-used: collector((
 "$tagbox-tag-color": $tagbox-tag-color,
 "$tagbox-tag-bg": $tagbox-tag-bg,
 "$tagbox-tag-active-color": $tagbox-tag-active-color,
-"$tagbox-tag-button-remove-bg": $tagbox-tag-button-remove-bg,
 ));

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

@@ -56,16 +56,6 @@
       }
     }
   }
-
-  &.dx-state-disabled {
-    .dx-tag-content {
-      background-color: $tagbox-tag-disabled-bg;
-
-      .dx-tag-remove-button::before {
-        color: $tagbox-tag-disabled-bg;
-      }
-    }
-  }
 }
 
 .dx-tagbox-single-line {
@@ -108,7 +98,6 @@
     width: $material-tagbox-remove-button-icon-size;
     height: $material-tagbox-remove-button-icon-size;
     color: $tagbox-tag-button-remove-color;
-    background-color: $tagbox-tag-button-remove-bg;
     border-radius: 50%;
     transform: none;
   }
@@ -153,7 +142,8 @@
 
 .dx-tagbox-popup-wrapper {
   .dx-list-select-all {
-    border-bottom: 1px solid $tagbox-select-all-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $tagbox-select-all-border-color;
     padding-bottom: $material-tagbox-select-all-padding-bottom;
     margin-bottom: $material-tagbox-select-all-margin-bottom;
 

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

@@ -21,11 +21,11 @@ $texteditor-border-color: color.change($texteditor-color, $alpha: 0.42) !default
 $texteditor-hover-border-color: $texteditor-color !default;
 $texteditor-focused-border-color: $base-accent !default;
 $texteditor-hover-bg: color.change($base-text-color, $alpha: 0.07) !default;
-$texteditor-button-clear-icon-color: null !default;
+$texteditor-button-clear-icon-color: $base-icon-color !default;
 $texteditor-button-clear-icon-color-bg: null !default;
 $texteditor-invalid-focused-border-color: $base-invalid-color !default;
 $texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !default;
-$texteditor-disabled-color: $base-disabled-color !default;
+$texteditor-disabled-color: null !default;
 $texteditor-input-border-radius: $base-border-radius !default;
 $texteditor-label-transition:
   font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
@@ -33,13 +33,13 @@ $texteditor-label-transition:
   top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
 
 @if $mode == "light" {
-  $texteditor-button-clear-icon-color: lighten($texteditor-color, 46%) !default;
-  $texteditor-button-clear-icon-color-bg: lighten($texteditor-color, 76%) !default;
+  $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default;
+  $texteditor-button-clear-icon-color-bg: rgba(0, 0, 0, 0.12) !default;
 }
 
 @if $mode == "dark" {
-  $texteditor-button-clear-icon-color: darken($texteditor-color, 76%) !default;
-  $texteditor-button-clear-icon-color-bg: darken($texteditor-color, 34%) !default;
+  $texteditor-disabled-color: rgba(255, 255, 255, 0.6) !default;
+  $texteditor-button-clear-icon-color-bg: rgba(255, 255, 255, 0.12) !default;
 }
 
 :root {

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

@@ -153,7 +153,8 @@ $material-editor-custom-button-margin: 5px;
     background-color: $texteditor-focused-bg;
 
     &::before {
-      border-bottom: 2px solid $texteditor-focused-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-focused-border-color;
       transform: scale(1);
       transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1);
     }
@@ -175,7 +176,8 @@ $material-editor-custom-button-margin: 5px;
     background-color: $texteditor-bg;
 
     &::after {
-      border-bottom: 1px solid $texteditor-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $texteditor-border-color;
     }
 
     &.dx-state-hover {
@@ -201,12 +203,14 @@ $material-editor-custom-button-margin: 5px;
     background-color: transparent;
 
     &::after {
-      border-bottom: 1px solid $texteditor-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $texteditor-border-color;
     }
 
     &.dx-state-hover {
       &::after {
-        border-bottom: 2px solid $texteditor-hover-border-color;
+        border-bottom: 2px solid;
+        border-bottom-color: $texteditor-hover-border-color;
       }
     }
 
@@ -311,7 +315,8 @@ $material-editor-custom-button-margin: 5px;
   &.dx-state-focused,
   &.dx-state-active {
     &::before {
-      border-bottom: 2px solid $texteditor-invalid-focused-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-invalid-focused-border-color;
     }
   }
 

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

@@ -10,7 +10,7 @@ $tileview-bg: $base-element-bg !default;
 $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
 $tileview-hover-bg: $base-element-bg !default;
 $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-$tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default;
+$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
 $tileview-active-color: $tileview-color !default;
 $never-used: collector((
 "$tileview-color": $tileview-color,

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

@@ -11,7 +11,8 @@
 .dx-tile {
   color: $tileview-color;
   background-color: $tileview-bg;
-  border: 1px solid $tileview-border-color;
+  border: 1px solid;
+  border-color: $tileview-border-color;
   text-align: left;
 
   &.dx-state-focused,

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

@@ -3,12 +3,4 @@
 @use "../colors" as *;
 
 // adduse
-$clock-digits-color: null !default;
-
-@if $mode == "light" {
-  $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default;
-}
-
-@if $mode == "dark" {
-  $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default;
-}
+$clock-digits-color: $base-icon-color !default;

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

@@ -45,7 +45,8 @@
 }
 
 .dx-toolbar-menu-section {
-  border-bottom: 1px solid $base-border-color;
+  border-bottom: 1px solid;
+  border-bottom-color: $base-border-color;
 
   .dx-list-item-content,
   .dx-toolbar-item-auto-hide {

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

@@ -8,18 +8,16 @@ $tooltip-bg: getCustomVar(("$tooltip-bg")) !default;
 @use "../color" as extcolor;
 
 // adduse
-$tooltip-color: null !default;
+$tooltip-color: $base-inverted-text-color !default;
 $tooltip-bg: null !default;
 $tooltip-border-radius: $base-border-radius !default;
 
 @if $mode == "light" {
-  $tooltip-color: $base-inverted-text-color !default;
-  $tooltip-bg: #616161 !default;
+  $tooltip-bg: color.adjust($base-bg, $lightness: -60%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $tooltip-color: $base-text-color !default;
-  $tooltip-bg: rgba(0, 0, 0, 1) !default;
+  $tooltip-bg: color.adjust($base-bg, $lightness: 60%, $space: hsl) !default;
 }
 
 $never-used: collector((

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

@@ -15,8 +15,8 @@ $treeview-border-color: $base-border-color !default;
 $treeview-item-selected-color: $treeview-color !default;
 $treeview-item-selected-bg: null !default;
 $treeview-spin-icon-color: $base-spin-icon-color !default;
-
 $checkbox-border-color-focused: $base-focus-bg !default;
+$treeview-item-content-disabled: color.change($base-text-color, $alpha: 0.38) !default;
 
 @if $mode == "light" {
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.12) !default;

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

@@ -32,6 +32,10 @@
   }
 }
 
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}
+
 @include treeview-item(
   $material-treeview-item-element-gap,
   $material-treeview-item-padding,

package/modules/bootstrap-extractor.js

@@ -66,7 +66,9 @@ class BootstrapExtractor {
     static sassRender(input) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                sass.compileStringAsync(input)
+                sass.compileStringAsync(input, {
+                    silenceDeprecations: ['color-functions', 'global-builtin', 'import'],
+                })
                     .then((data) => resolve(data.css.toString()))
                     .catch((error) => reject(error.message));
             });

package/modules/parse-value.js

@@ -26,14 +26,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseString = exports.parse = exports.color = void 0;
 const sass = __importStar(require("sass-embedded"));
 const color = (value) => {
-    const getHex = (colorValue) => colorValue.toString(16).padStart(2, '0');
+    const getHex = (colorValue) => {
+        const n = Math.max(0, Math.min(255, Math.round(colorValue)));
+        return n.toString(16).padStart(2, '0');
+    };
     const alpha = Math.round(255 * value.alpha);
     if (alpha === 0) {
         return 'transparent';
     }
-    const hexRed = getHex(value.red);
-    const hexGreen = getHex(value.green);
-    const hexBlue = getHex(value.blue);
+    const hexRed = getHex(value.channel('red'));
+    const hexGreen = getHex(value.channel('green'));
+    const hexBlue = getHex(value.channel('blue'));
     const hexAlpha = alpha === 255 ? '' : getHex(alpha);
     return `#${hexRed}${hexGreen}${hexBlue}${hexAlpha}`;
 };
@@ -76,7 +79,6 @@ const parseString = (str) => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
     }
     catch (e) {
-        // debugger;
         return new sass.SassString(str);
     }
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-themebuilder",
-  "version": "25.2.7",
+  "version": "26.1.2-beta",
   "description": "DevExtreme ThemeBuilder",
   "keywords": [
     "devextreme",
@@ -23,7 +23,7 @@
     "autoprefixer": "^10.4.21",
     "clean-css": "^5.3.0",
     "postcss": "^8.2.6",
-    "sass-embedded": "1.66.0"
+    "sass-embedded": "1.93.3"
   },
   "devDependencies": {
     "@types/clean-css": "4.2.11",
@@ -33,16 +33,16 @@
     "@types/node": "20.11.17",
     "@typescript-eslint/eslint-plugin": "8.52.0",
     "@typescript-eslint/parser": "8.52.0",
-    "eslint": "9.18.0",
+    "eslint": "9.39.4",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-devextreme": "1.1.9",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-no-only-tests": "3.3.0",
-    "express": "4.21.2",
+    "express": "4.22.1",
     "filing-cabinet": "4.1.6",
     "fs-extra": "11.2.0",
-    "immutable": "4.3.5",
+    "immutable": "5.1.5",
     "precinct": "11.0.5",
     "sinon": "18.0.1",
     "ts-jest": "29.1.2",