devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -105,7 +106,7 @@
     margin: $vertical-margin $horizontal-margin;
     padding: 0;
 
-    @at-root #{selector-append(".dx-rtl", &)},
+    @at-root #{selector.append(".dx-rtl", &)},
     .dx-rtl & {
       .dx-field-value {
         &:not(.dx-widget) {

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

@@ -5,7 +5,7 @@
 // adduse
 
 $filemanager-border-color: $base-border-color !default;
-$filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
+$filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
 $filemanager-editor-active-bg: color.change($base-text-color, $alpha: 0.1) !default;
 $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
 $filemanager-breadcrumbs-item-focus-bg: $base-border-color !default;
@@ -23,12 +23,12 @@ $filemanager-progressbox-shadow-color: null !default;
 
 
 @if $mode == "light" {
-  $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
 
 @if $mode == "dark" {
-  $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default;
-  $filemanager-progressbox-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
+  $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default;
 }
 

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

@@ -96,7 +96,8 @@
   }
 
   .dx-filemanager-fileuploader-dropzone-placeholder {
-    border: 2px solid $base-accent;
+    border: 2px solid;
+    border-color: $base-accent;
   }
 
   .dx-filemanager-container {
@@ -145,7 +146,8 @@
     }
 
     &.dx-state-focused {
-      border: $filemanager-file-item-focused-border 1px solid;
+      border: 1px solid;
+      border-color: $filemanager-file-item-focused-border;
     }
 
     &.dx-item-selected.dx-state-focused {

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

@@ -9,7 +9,7 @@ $fileuploader-border-color: getCustomVar(("$fileuploader-border-color")) !defaul
 // adduse
 $fileuploader-filename-color: $base-text-color !default;
 $fileuploader-file-icon-color: $base-icon-color !default;
-$fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default;
+$fileuploader-falename-status-color: $base-label-color !default;
 $fileuploader-border-color: $base-border-color !default;
 $never-used: collector((
 "$fileuploader-filename-color": $fileuploader-filename-color,

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

@@ -62,7 +62,8 @@ $material-fileuploader-file-wrapper-border-size: 3px;
 
   .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
     padding: $material-fileuploader-vertical-padding * 2 $material-fileuploader-vertical-padding + 2px;
-    border: $material-fileuploader-file-wrapper-border-size dashed $fileuploader-border-color;
+    border: $material-fileuploader-file-wrapper-border-size dashed;
+    border-color: $fileuploader-border-color;
   }
 }
 

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

@@ -15,7 +15,7 @@ $filterbuilder-item-value-color: getCustomVar(("$filterbuilder-item-value-color"
 
 $filterbuilder-bg: $base-bg !default;
 $filterbuilder-text-color: $base-text-color !default;
-$filterbuilder-text-focus-color: #fff !default;
+$filterbuilder-text-focus-color: null !default;
 $filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.7) !default;
 $filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default;
 $filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default;
@@ -31,10 +31,18 @@ $filterbuilder-item-field-focus-color: color.adjust($filterbuilder-item-field-co
 $filterbuilder-item-operator-color: color.change($base-success, $alpha: 0.3) !default;
 $filterbuilder-item-operator-hover-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.2) !default;
 $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.7) !default;
-$filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
-$filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
-$filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
+$filterbuilder-item-value-color: color.change($base-icon-color, $alpha: 0.12) !default;
+$filterbuilder-item-value-hover-color: color.change($base-icon-color, $alpha: 0.24) !default;
+$filterbuilder-item-value-focus-color: $base-icon-color !default;
 $filterbuilder-menu-icon-color: $base-text-color !default;
+
+@if $mode == "light" {
+  $filterbuilder-text-focus-color: #fff !default;
+}
+
+@if $mode == "dark" {
+  $filterbuilder-text-focus-color: #000 !default;
+}
 $never-used: collector((
 "$filterbuilder-text-color": $filterbuilder-text-color,
 "$filterbuilder-text-focus-color": $filterbuilder-text-focus-color,

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

@@ -18,7 +18,8 @@
 
 .dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
   & > .dx-form-group-content {
-    border-top: 1px solid $form-group-border-color;
+    border-top: 1px solid;
+    border-top-color: $form-group-border-color;
     padding-bottom: $material-form-group-content-padding-bottom;
     padding-top: $material-form-group-caption-bottom-padding;
     margin-top: $material-form-group-caption-bottom-margin;

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

@@ -86,7 +86,8 @@
 .dx-gallery-indicator-item {
   border-radius: 50%;
   box-sizing: border-box;
-  border: 1px solid $gallery-indicator-item-border-color;
+  border: 1px solid;
+  border-color: $gallery-indicator-item-border-color;
   pointer-events: auto;
   margin: 5px - math.div($material-gallery-indicator-size, 2) 6px;
   width: $material-gallery-indicator-size;
@@ -99,7 +100,8 @@
   width: $material-gallery-indicator-selected-size;
   height: $material-gallery-indicator-selected-size;
   background: $gallery-indicator-item-selected-bg;
-  border: 2px solid $gallery-indicator-selected-border-color;
+  border: 2px solid;
+  border-color: $gallery-indicator-selected-border-color;
   margin: 5px - math.div($material-gallery-indicator-selected-size, 2) 6px;
 }
 

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

@@ -8,20 +8,44 @@
 $gantt-collapsable-row-bg: null !default;
 $gantt-icon-color: $datagrid-columnchooser-item-color !default;
 $gantt-parent-task-background-color: null !default;
+$gantt-task-progress-background-color: null !default;
+$gantt-task-color: null !default;
+$gantt-task-background-color: null !default;
 
 @if $color == "lime" {
   $gantt-parent-task-background-color: #f44336 !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+  $gantt-task-color: #fff;
+  $gantt-task-background-color: #999;
 }
 
-@if $color == "blue" or $color == "orange" or $color == "purple" or $color == "teal" {
+@if $color == "blue" {
+  $gantt-parent-task-background-color: $base-success !default;
+  $gantt-task-color: $base-inverted-text-color !default;
+
+  @if $mode == "light" {
+    $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+    $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%, $space: hsl) !default;
+  }
+
+  @if $mode == "dark" {
+    $gantt-task-progress-background-color: rgba(255, 255, 255, 0.32) !default;
+    $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%, $space: hsl) !default;
+  }
+}
+
+@if $color == "orange" or $color == "purple" or $color == "teal" {
   $gantt-parent-task-background-color: #8bc34a !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+  $gantt-task-color: #fff;
+  $gantt-task-background-color: #999;
 }
 
 @if $mode == "light" {
-  $gantt-collapsable-row-bg: darken($base-bg, 5%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default;
 }
 

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

@@ -15,11 +15,13 @@
 $gantt-successor-background-color: white;
 
 .dx-gantt {
-  border: 1px solid $base-border-color;
+  border: 1px solid;
+  border-color: $base-border-color;
 
   .dx-gantt-toolbar-wrapper {
     padding: 5px;
-    border-bottom: 1px solid $base-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $base-border-color;
 
     .dx-gantt-toolbar-separator {
       border-left-color: $base-border-color;
@@ -59,15 +61,18 @@ $gantt-successor-background-color: white;
 
   .dx-gantt-tsac,
   .dx-gantt-tsa {
-    border-bottom: 1px solid $base-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $base-border-color;
   }
 
   .dx-gantt-hb {
-    border-top: 1px solid $base-border-color;
+    border-top: 1px solid;
+    border-top-color: $base-border-color;
   }
 
   .dx-gantt-vb {
-    border-left: 1px solid $base-border-color;
+    border-left: 1px solid;
+    border-left-color: $base-border-color;
   }
 
   .dx-gantt-taskWrapper {
@@ -85,7 +90,7 @@ $gantt-successor-background-color: white;
 
       .dx-gantt-tPrg {
         border-radius: $base-border-radius;
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: $gantt-task-progress-background-color;
       }
 
       &.dx-gantt-smallTask {
@@ -107,7 +112,7 @@ $gantt-successor-background-color: white;
         border-bottom-left-radius: 0;
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
-          background-color: rgba(255, 255, 255, 0.2);
+          background-color: $gantt-task-progress-background-color;
         }
 
         &:not(.dx-gantt-smallTask)::before,
@@ -129,8 +134,8 @@ $gantt-successor-background-color: white;
         }
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
-          border-left-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-left-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &::after,
@@ -141,8 +146,8 @@ $gantt-successor-background-color: white;
         }
 
         &.dx-gantt-cmpl::after {
-          border-right-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-right-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &.dx-gantt-cmpl .dx-gantt-tPrg::after {
@@ -157,7 +162,7 @@ $gantt-successor-background-color: white;
     }
 
     .dx-gantt-titleIn {
-      color: #fff;
+      color: $gantt-task-color;
       padding: 0 $gantt-task-title-padding-left;
     }
   }
@@ -165,8 +170,8 @@ $gantt-successor-background-color: white;
   .dx-gantt-taskRes {
     height: $gantt-task-height;
     line-height: $gantt-task-height;
-    color: #fff;
-    background-color: #999;
+    color: $gantt-task-color;
+    background-color: $gantt-task-background-color;
     border-radius: $base-border-radius;
     margin-left: 21px;
     padding-left: 4px;
@@ -189,17 +194,19 @@ $gantt-successor-background-color: white;
 
     .dx-gantt-task-edit-frame {
       height: 100%;
-      border: 1px solid darken($base-accent, 10%);
+      border: 1px solid;
+      border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl);
       border-radius: $base-border-radius;
 
       .dx-gantt-task-edit-progress {
-        border-color: transparent transparent darken($base-accent, 10%) transparent;
+        border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent;
 
         &::before {
           width: 12px;
           height: 6px;
           bottom: -14px;
-          border: 1px solid darken($base-accent, 10%);
+          border: 1px solid;
+          border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl);
         }
       }
 
@@ -222,7 +229,8 @@ $gantt-successor-background-color: white;
   .dx-gantt-task-edit-dependency-l,
   .dx-gantt-task-edit-successor-dependency-l {
     background: $gantt-successor-background-color;
-    border: 1px solid darken($base-accent, 10%);
+    border: 1px solid;
+    border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl);
     width: $gantt-dependency-successor-size;
     height: $gantt-dependency-successor-size;
     margin: auto;
@@ -257,16 +265,20 @@ $gantt-successor-background-color: white;
   }
 
   .dx-gantt-arrow {
-    border: 5px solid $base-text-color;
+    border: 5px solid;
+    border-color: $base-text-color;
   }
 
   .dx-gantt-tm {
-    border-left: 1px dashed $base-accent;
+    border-left: 1px dashed;
+    border-left-color: $base-accent;
   }
 
   .dx-gantt-ti {
-    border-left: 1px dashed $base-accent;
-    border-right: 1px dashed $base-accent;
+    border-left: 1px dashed;
+    border-left-color: $base-accent;
+    border-right: 1px dashed;
+    border-right-color: $base-accent;
     background-color: color.change($base-accent, $alpha: 0.15);
   }
 

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

@@ -31,7 +31,7 @@ $datagrid-summary-color: getCustomVar(("$datagrid-summary-color")) !default;
 $datagrid-base-color: $base-text-color !default;
 $datagrid-base-background-color: $base-bg !default;
 $datagrid-border-color: $base-border-color !default;
-$datagrid-border: 1px solid $datagrid-border-color !default;
+$datagrid-border: 1px solid !default;
 $datagrid-columnchooser-item-color: null !default;
 $datagrid-columnchooser-hover-icon-color: color.change($datagrid-base-color, $alpha: 0.38) !default;
 $datagrid-block-separator-bg: null !default;
@@ -41,31 +41,30 @@ $datagrid-drag-header-shadow-color: null !default;
 $datagrid-drag-header-second-shadow-color: null !default;
 $datagrid-header-drag-bg: $datagrid-base-background-color !default;
 $header-filter-color: null !default;
-$header-filter-color-empty: null !default;
-$datagrid-selection-bg: mix($base-accent, $base-bg, 10%) !default;
+$datagrid-selection-bg: color.mix($base-accent, $base-bg, 10%) !default;
 $datagrid-row-selected-border-color: $datagrid-border-color !default;
 $datagrid-row-selected-color: $datagrid-base-color !default;
 $datagrid-row-focused-color: $base-text-color !default;
-$datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
+$datagrid-row-focused-bg: color.mix($base-accent, $base-bg, 20%) !default;
 $datagrid-hover-bg: null !default;
 $datagrid-row-hovered-color: $base-hover-color !default;
 $datagrid-menu-icon-color: inherit !default;
-$datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.32) !default;
+$datagrid-cell-modified-border-color: null !default;
 $datagrid-cell-removed-border-color: $datagrid-border-color !default;
 $datagrid-row-removed-bg: $datagrid-border-color !default;
 $datagrid-cell-removed-text-color: null !default;
-$datagrid-row-invalid-faded-border-color: color.change($base-invalid-faded-border-color, $alpha: 0.32) !default;
+$datagrid-row-invalid-faded-border-color: null !default;
 $datagrid-nodata-color: color.change($datagrid-base-color, $alpha: 0.54) !default;
 $datagrid-group-row-color: color.change($datagrid-base-color, $alpha: 0.54) !default;
 $datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default;
-$datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default;
+$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
 $datagrid-search-color: $base-inverted-text-color !default;
-$datagrid-chevron-icon-color: lighten($base-spin-icon-color, 38.5%) !default;
+$datagrid-chevron-icon-color: color.adjust($base-spin-icon-color, $lightness: 38.5%, $space: hsl) !default;
 $datagrid-search-bg: $base-accent !default;
-$datagrid-row-error-color: null !default;
-$datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+$datagrid-row-error-color: $base-inverted-text-color !default;
+$datagrid-row-error-bg: $base-invalid-color !default;
 $datagrid-link-color: $base-link-color !default;
-$datagrid-focused-border-color: mix($base-bg, $base-accent, 20%) !default;
+$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default;
 $datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default;
 $datagrid-drop-highlight-bg: $base-accent !default;
 $datagrid-drop-highlight-color: $base-inverted-text-color !default;
@@ -73,10 +72,10 @@ $datagrid-columnchooser-bg: $base-element-bg !default;
 $datagrid-columnchooser-item-bg: null !default;
 $datagrid-row-alternation-bg: null !default;
 $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default;
-$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default;
+$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default;
 $datagrid-summary-bg: $datagrid-base-background-color !default;
 $datagrid-column-separator-bg: $base-accent !default;
-$datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
+$datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
 $datagrid-active-header-filter-icon-color: $base-accent !default;
 $datagrid-text-stub-background-image-path: null !default;
 $datagrid-filter-panel-color: $base-accent !default;
@@ -86,35 +85,37 @@ $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
+  $datagrid-cell-modified-border-color: color.adjust($base-success, $lightness: 51%, $space: hsl) !default;
   $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default;
-  $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
-  $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default;
-  $datagrid-row-error-color: $base-inverted-text-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
-  $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 4%) !default;
-  $datagrid-hover-bg: darken($datagrid-base-background-color, 4%) !default;
+  $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
+  $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADzCAYAAABwgbOvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRjExRDRGQTNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRjExRDRGQjNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGMTFENEY4M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGMTFENEY5M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+57ApqAAAAUNJREFUeNrs3LENwzAMRUEzi2T/sTSJgowQRAI+pbvehf0KFiZYc84nUVU9AAAAAAAAAHf5/id9+wxLjX8efvl+WQQRBEEEQRBBEEQQBBEEQQAAAAAAAAAAflRuLmaxdSIIggiCIIIgiCAIIgiCIAgAyyUfMBs3BjHUBUEQQRBEEAQRBEEEQRAE6cKyNQAAAAAAAADQQuySw9aXDl6gsAYkCIIIgiCCIIggCCIIgiAIcILkA2Y7xR5HM0MEQRBBEEQQBBEEQQRBEAQBAAAAAAAAAHq78l5WMlsngiCIIAgiCIIIgiCCIAiCALDcrQfMDHUEEQRBBEEQQRAEQQRBEEEAAAAAAAAAALZoecCsqo4NYutEEAQRBEEEQRBBEEQQBEEQAJbresBsGOoIIgiCIIggCCIIggiCIIIAAAAAAAAc5iPAAIcKFwANDofzAAAAAElFTkSuQmCC") !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
+  $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: 44%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
+  $datagrid-cell-modified-border-color: color.adjust($base-success, $lightness: -41%, $space: hsl) !default;
   $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.72) !default;
-  $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 12%) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
-  $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default;
-  $datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
-  $datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default;
-  $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default;
-  $datagrid-hover-bg: lighten($datagrid-base-background-color, 4%) !default;
+  $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
+  $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
+  $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADzCAYAAABwgbOvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRjExRDRGQTNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRjExRDRGQjNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGMTFENEY4M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGMTFENEY5M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+57ApqAAAAUNJREFUeNrs3LENwzAMRUEzi2T/sTSJgowQRAI+pbvehf0KFiZYc84nUVU9AAAAAAAAAHf5/id9+wxLjX8efvl+WQQRBEEEQRBBEEQQBBEEQQAAAAAAAAAAflRuLmaxdSIIggiCIIIgiCAIIgiCIAgAyyUfMBs3BjHUBUEQQRBEEAQRBEEEQRAE6cKyNQAAAAAAAADQQuySw9aXDl6gsAYkCIIIgiCCIIggCCIIgiAIcILkA2Y7xR5HM0MEQRBBEEQQBBEEQQRBEAQBAAAAAAAAAHq78l5WMlsngiCIIAgiCIIIgiCCIAiCALDcrQfMDHUEEQRBBEEQQRAEQQRBEEEAAAAAAAAAALZoecCsqo4NYutEEAQRBEEEQRBBEEQQBEEQAJbresBsGOoIIgiCIIggCCIIggiCIIIAAAAAAAAc5iPAAIcKFwANDofzAAAAAElFTkSuQmCC") !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
+  $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: -31%, $space: hsl) !default;
 }
 
+$header-filter-color-empty: $header-filter-color !default;
+
 :root {
   --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg};
 }

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

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -25,6 +26,7 @@
 @use "variables" as *;
 @forward "variables";
 @use 'layout/cell' as *;
+@use "layout/aiChat" as *;
 @use "../scrollable";
 @use "../overlay";
 @use "../pagination";
@@ -220,8 +222,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       }
 
       // T838734
-      border-top: 1px solid $datagrid-row-alternation-bg;
-      border-bottom: 1px solid $datagrid-row-alternation-bg;
+      border-top: 1px solid;
+      border-top-color: $datagrid-row-alternation-bg;
+      border-bottom: 1px solid;
+      border-bottom-color: $datagrid-row-alternation-bg;
     }
 
     .dx-link {
@@ -492,7 +496,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
 
       .dx-popup-title {
         background-color: transparent;
-        border-bottom: 1px solid $popup-title-border-color;
+        border-bottom: 1px solid;
+        border-bottom-color: $popup-title-border-color;
 
         .dx-toolbar-label {
           font-size: $material-m-font-size;
@@ -567,6 +572,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       right: 0;
       pointer-events: none;
       border-bottom: $datagrid-border;
+      border-bottom-color: $datagrid-border-color;
     }
 
     .dx-#{$widget-name}-table {
@@ -664,6 +670,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
 
   .dx-#{$widget-name}-header-panel {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
     padding: $material-grid-base-header-panel-padding;
 
     .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
@@ -728,7 +735,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
   }
 
   .dx-#{$widget-name}-rowsview {
-    border-top: 1px solid $material-grid-base-border-color;
+    border-top: 1px solid;
+    border-top-color: $material-grid-base-border-color;
 
     .dx-#{$widget-name}-headers + &,
     &.dx-#{$widget-name}-after-headers {
@@ -844,7 +852,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           right: $material-invalid-badge-size;
           background-color: transparent;
 
-          @at-root #{selector-append(".dx-rtl", &)},
+          @at-root #{selector.append(".dx-rtl", &)},
           .dx-rtl & {
             left: $material-invalid-badge-size;
           }
@@ -878,6 +886,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
 
   .dx-#{$widget-name}-bottom-load-panel {
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
     background-color: $datagrid-base-background-color;
   }
 
@@ -887,7 +896,9 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
 
   .dx-#{$widget-name}-total-footer {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
 
     > .dx-#{$widget-name}-content {
       padding: 0;
@@ -951,7 +962,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
   .dx-header-filter-menu {
     .dx-popup-content {
       padding: 12px 8px 0 8px;
-      border-bottom: 1px solid $material-grid-base-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $material-grid-base-border-color;
     }
   }
 

package/data/scss/widgets/material/gridBase/layout/aiChat/_index.scss

@@ -0,0 +1,19 @@
+@use '../../../../base/gridBase/layout/aiChat/mixins' as *;
+@use "../../../colors" as *;
+@use "../../../button/colors" as *;
+@use './sizes' as *;
+@use "../../../../base/widget" as *;
+@include ai-chat-messagelist-empty(
+  $button-default-bg,
+  $button-default-outlined-hover-bg,
+);
+@include ai-chat-message-pending($base-accent);
+@include ai-chat-message-success($base-success);
+@include ai-chat-message-error($base-danger);
+@include ai-chat-messagebubble-border($base-border-color);
+@include ai-chat-message-regenerate-button($button-normal-active-bg);
+@include ai-chat-message-icon($ai-chat-message-icon-size);
+
+.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button {
+  @include disabled-widget();
+}

package/data/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss

@@ -0,0 +1,3 @@
+@use '../../../sizes' as *;
+
+$ai-chat-message-icon-size: $material-base-icon-size - 4px;

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

@@ -18,9 +18,9 @@ $htmleditor-table-border-color: $base-border-color !default;
 
 
 @if $mode == "light" {
-  $htmleditor-mention-bg: darken($base-bg, 12%) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $htmleditor-mention-bg: lighten($base-bg, 12%) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default;
 }

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

@@ -27,7 +27,8 @@
     position: relative;
 
     &:first-child {
-      border-bottom: 1px solid $texteditor-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $texteditor-border-color;
     }
   }
 
@@ -50,7 +51,8 @@
   }
 
   &.dx-invalid {
-    border: 1px solid $htmleditor-invalid-faded-border-color;
+    border: 1px solid;
+    border-color: $htmleditor-invalid-faded-border-color;
 
     &.dx-state-focused {
       border-color: $htmleditor-invalid-border-color;
@@ -107,7 +109,8 @@
       background-color: $texteditor-hover-bg;
 
       &:not(.dx-invalid) {
-        border-bottom: 1px solid $texteditor-hover-border-color;
+        border-bottom: 1px solid;
+        border-bottom-color: $texteditor-hover-border-color;
       }
     }
 
@@ -127,7 +130,8 @@
     }
 
     &.dx-state-hover:not(.dx-state-focused) {
-      border-bottom: 2px solid $texteditor-hover-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-hover-border-color;
     }
 
     &.dx-state-disabled,
@@ -169,7 +173,8 @@
     &.dx-state-focused,
     &.dx-state-active {
       &::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);
       }
@@ -303,7 +308,8 @@
 
   .dx-fileuploader-input-wrapper {
     padding: $material-html-editor-add-image-dialog-fileuploader-padding;
-    border: 3px dashed $base-border-color;
+    border: 3px dashed;
+    border-color: $base-border-color;
 
     .dx-fileuploader-input-label {
       border-width: 0;