devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/fluent/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-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.3) !default;
 }
 

package/data/scss/widgets/fluent/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/fluent/fileUploader/_index.scss

@@ -63,7 +63,8 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
 
   .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
     padding: $fluent-fileuploader-vertical-padding * 2 $fluent-fileuploader-vertical-padding + 2px;
-    border: $fluent-fileuploader-file-wrapper-border-size dashed $fileuploader-border-color;
+    border: $fluent-fileuploader-file-wrapper-border-size dashed;
+    border-color: $fileuploader-border-color;
   }
 }
 

package/data/scss/widgets/fluent/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,19 @@ $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.24) !default;
+$filterbuilder-item-value-hover-color: color.change($base-icon-color, $alpha: 0.32) !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/fluent/form/_index.scss

@@ -17,7 +17,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: $fluent-form-group-content-bottom-padding;
     padding-top: $fluent-form-group-caption-top-padding;
     margin-top: $fluent-form-group-caption-bottom-margin;

package/data/scss/widgets/fluent/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($fluent-gallery-indicator-size, 2) 6px;
   width: $fluent-gallery-indicator-size;
@@ -99,7 +100,8 @@
   width: $fluent-gallery-indicator-selected-size;
   height: $fluent-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($fluent-gallery-indicator-selected-size, 2) 6px;
 }
 

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

@@ -8,16 +8,23 @@
 $gantt-collapsable-row-bg: null !default;
 $gantt-icon-color: $datagrid-columnchooser-item-color !default;
 $gantt-parent-task-background-color: null !default;
+$gantt-task-color: $base-inverted-text-color !default;
+$gantt-task-background-color: null !default;
+$gantt-task-progress-background-color: null !default;
 
 @if $color == "blue" {
-  $gantt-parent-task-background-color: #8bc34a !default;
+  $gantt-parent-task-background-color: $base-success !default;
 }
 
 @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;
+  $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%) !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !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;
+  $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%) !default;
+  $gantt-task-progress-background-color: rgba(255, 255, 255, 0.2) !default;
 }
 

package/data/scss/widgets/fluent/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/fluent/gridBase/_colors.scss

@@ -30,7 +30,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-columnchooser-item-color: null !default;
+$datagrid-columnchooser-item-color: $datagrid-base-color !default;
 $datagrid-block-separator-bg: null !default;
 $datagrid-columnchooser-font-weight: 600 !default;
 $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default;
@@ -38,7 +38,6 @@ $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: $button-default-outlined-hover-bg !default;
 $datagrid-row-selected-border-color: $datagrid-border-color !default;
 $datagrid-row-selected-color: $datagrid-base-color !default;
@@ -54,14 +53,14 @@ $datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default;
 $datagrid-nodata-color: $base-label-color !default;
 $datagrid-group-row-color: null !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: $base-spin-icon-color !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;
@@ -69,7 +68,7 @@ $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: null !default;
@@ -83,48 +82,44 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
   @if $color == "blue"{
-    $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default;
-    $datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
+    $datagrid-row-focused-bg: color.adjust($base-accent, $hue: 3deg, $saturation: -0.98%, $space: hsl, $lightness: 50.00%) !default;
+    $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
   }
 
   @if $color == "saas" {
-    $datagrid-row-focused-bg: lighten(adjust-hue($base-accent, -1), 26.47) !default;
+    $datagrid-row-focused-bg: color.adjust($base-accent, $hue: -1deg, $space: hsl, $lightness: 26.47%) !default;
     $datagrid-filter-row-background-color: $base-typography-bg !default;
   }
-  $datagrid-columnchooser-item-color: $datagrid-base-color !default;
+
   $datagrid-group-row-color: $datagrid-columnchooser-item-color !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-row-alternation-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-draggable-column-text-color: lighten($base-text-color, 60) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
   $datagrid-row-focused-bg: #0c3b5e !default;
-  $datagrid-filter-row-background-color: lighten($datagrid-base-background-color, 2%) !default;
-  $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default;
+  $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default;
   $datagrid-group-row-color: $datagrid-columnchooser-item-color !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-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-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-draggable-column-text-color: darken($base-text-color, 63.9) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default;
 }
 
-$datagrid-border: 1px solid $datagrid-border-color !default;
+$header-filter-color-empty: $header-filter-color !default;
+$datagrid-border: 1px solid !default;
 
 :root {
   --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg};

package/data/scss/widgets/fluent/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 *;
@@ -28,6 +29,7 @@
 @use 'variables' as *;
 @forward 'variables';
 @use 'layout/cell' as *;
+@use "layout/aiChat" as *;
 
 $fluent-grid-base-border-hidden: 1px solid transparent;
 $fluent-grid-base-row-border: 1px solid transparent;
@@ -233,8 +235,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       }
 
       // 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 {
@@ -514,7 +518,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
       .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: $fluent-m-font-size;
@@ -599,6 +604,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       right: 0;
       pointer-events: none;
       border-bottom: $datagrid-border;
+      border-bottom-color: $datagrid-border-color;
     }
 
     .dx-#{$widget-name}-table {
@@ -690,6 +696,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
   .dx-#{$widget-name}-header-panel {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
     padding: $fluent-grid-base-header-panel-padding;
 
     .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
@@ -754,7 +761,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
   }
 
   .dx-#{$widget-name}-rowsview {
-    border-top: 1px solid $fluent-grid-base-border-color;
+    border-top: 1px solid;
+    border-top-color: $fluent-grid-base-border-color;
 
     .dx-#{$widget-name}-headers + &,
     &.dx-#{$widget-name}-after-headers {
@@ -866,7 +874,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
           right: $fluent-invalid-badge-size;
           background-color: transparent;
 
-          @at-root #{selector-append(".dx-rtl", &)},
+          @at-root #{selector.append(".dx-rtl", &)},
           .dx-rtl & {
             left: $fluent-invalid-badge-size;
           }
@@ -900,6 +908,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
   .dx-#{$widget-name}-bottom-load-panel {
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
     background-color: $datagrid-base-background-color;
   }
 
@@ -909,7 +918,9 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
   .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;

package/data/scss/widgets/fluent/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/fluent/gridBase/layout/aiChat/_sizes.scss

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

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

@@ -58,7 +58,8 @@
   &.dx-state-focused,
   &.dx-state-active {
     &::before {
-      border-bottom: 2px solid $texteditor-indicator-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-indicator-border-color;
       transform: scale(1);
       transition-property: transform;
       transition-duration: 0.2s;
@@ -116,7 +117,8 @@
   &.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/fluent/informer/_colors.scss

@@ -9,11 +9,11 @@ $informer-info-color: $base-text-color !default;
 $informer-info-background-color: null !default;
 
 @if $mode == "light" {
-  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67);
-  $informer-info-background-color: lighten($base-text-color, 74.90);
+  $informer-error-background-color: color.adjust($base-danger, $hue: -358deg, $saturation: 0.58%, $space: hsl, $lightness: 46.67%);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl);
 }
 
 @if $mode == "dark" {
-  $informer-error-background-color: darken(desaturate($base-danger, 5.06), 53.53);
-  $informer-info-background-color: darken($base-text-color, 76.08);
+  $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl);
 }

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

@@ -37,11 +37,11 @@ $list-icon-color: $base-icon-color !default;
 $base-select-all-separator-color: $base-separator-color !default;
 
 @if $mode == "light" {
-  $list-normal-color: lighten($base-text-color, 11.76) !default;
+  $list-normal-color: color.adjust($base-text-color, $lightness: 11.76%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $list-normal-color: darken($base-text-color, 16.08) !default;
+  $list-normal-color: color.adjust($base-text-color, $lightness: -16.08%, $space: hsl) !default;
 }
 $list-group-color: $base-text-color !default;
 $list-expanded-group-color: $list-group-color !default;

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

@@ -18,8 +18,8 @@
 
 $fluent-list-item-border-width: 1px;
 $fluent-list-border-width: 1px;
-$fluent-list-border: $fluent-list-border-width solid $list-border-color;
-$fluent-list-item-border: $fluent-list-item-border-width solid $list-border-color;
+$fluent-list-border: $fluent-list-border-width solid;
+$fluent-list-item-border: $fluent-list-item-border-width solid;
 
 .dx-state-disabled {
   &.dx-list {
@@ -246,6 +246,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
       &:not(:last-child) {
         padding-bottom: $fluent-list-vertical-padding;
         border-bottom: $fluent-list-item-border;
+        border-bottom-color: $list-border-color;
       }
     }
 
@@ -365,7 +366,8 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
         &.dx-state-hover {
           color: $list-item-ghost-color;
           background: $list-item-ghost-bg;
-          border: 1px solid $list-item-ghost-border-color;
+          border: 1px solid;
+          border-color: $list-item-ghost-border-color;
         }
       }
     }
@@ -400,6 +402,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
 
   .dx-list-border-visible {
     border: $fluent-list-border;
+    border-color: $list-border-color;
   }
 
   .dx-list-item-before-bag {
@@ -506,7 +509,8 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
 
   .dx-list-context-menucontent {
     background-color: $list-holdmenu-bg;
-    border: 1px solid $list-holdmenu-border-color;
+    border: 1px solid;
+    border-color: $list-holdmenu-border-color;
     border-radius: $base-border-radius;
     box-shadow: $list-holdmenu-shadow-color 0 2px 7.2px 0;