devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -37,7 +37,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-block-separator-bg: null !default;
 $datagrid-columnchooser-font-weight: normal !default;
@@ -89,7 +89,7 @@ $datagrid-draggable-column-text-color: null !default;
 
 @if $color == "carmine" {
   $datagrid-columnchooser-item-color: $base-label-color !default;
-  $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.7) !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;
@@ -97,29 +97,29 @@ $datagrid-draggable-column-text-color: null !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
   $datagrid-selection-bg: $base-accent !default;
-  $datagrid-row-selected-border-color: lighten($base-accent, 9%) !default;
-  $datagrid-row-selected-color: lighten($datagrid-base-color, 100%) !default;
+  $datagrid-row-selected-border-color: color.adjust($base-accent, $lightness: 9%, $space: hsl) !default;
+  $datagrid-row-selected-color: color.adjust($datagrid-base-color, $lightness: 100%, $space: hsl) !default;
   $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
-  $datagrid-hover-bg: darken($base-bg, 2%) !default;
+  $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default;
+  $datagrid-hover-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $base-label-color !default;
   $datagrid-group-row-color: $base-label-color !default;
-  $datagrid-group-row-bg: darken($base-bg, 2%) !default;
-  $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default;
-  $datagrid-spin-icon-color: lighten($base-icon-color, 3%) !default;
+  $datagrid-group-row-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
+  $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
+  $datagrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 3%, $space: hsl) !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, darken($base-accent, 15%), 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -15%, $space: hsl), 20%) !default;
   $datagrid-editor-bg: $datagrid-base-background-color !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-element-bg !default;
-  $datagrid-row-alternation-bg: darken($base-bg, 2%) !default;
+  $datagrid-row-alternation-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-summary-color: $base-label-color !default;
-  $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
+  $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default;
   $datagrid-summary-bg: $datagrid-base-background-color !default;
   $datagrid-column-separator-bg: $base-accent !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDUyODc5REEzRDYzMTFFOEE5NUY5NzJBRDdGNUE5RjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDUyODc5RDkzRDYzMTFFOEE5NUY5NzJBRDdGNUE5RjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgiPayEAAADrSURBVHja7N3BDYBACABBsQn7L48q0BoMD5SZxAZuc74gF1V1MMfpCARBEEEQRBAEEQRBdovnuxxDq3RD/LIQRBAEQRBBEEQQBBEEQQQBAAAAAAAAABhi8gZVbgxi6kQQBBEEQQRBEEEQRBAEQRBBAAAAAAAAAAAabX2Daux2lqkTQRBEEAQRBEEEQRBBEARBBAEAAAAAAAAAaLR1g2osUyeCIIggCCIIggiCIIIgCIIIAgAAAAAAAADQ6KsbVPnXIKZOBEEQQRBEEAQRBEEEQRAEEYRXoqqcghuCIIIgiCAIIgiCCMIUtwADALYCCr92l++TAAAAAElFTkSuQmCC") !default;
@@ -163,7 +163,7 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-summary-color: $base-text-color !default;
   $datagrid-columnchooser-message-color: $base-text-color !default;
   $datagrid-summary-bg: $base-bg !default;
-  $datagrid-column-separator-bg: darken($datagrid-base-background-color, 13.5%) !default;
+  $datagrid-column-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -13.5%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0QxRDBGNUYzRDYzMTFFOEFCMjQ4NTNCQjcwRDZCM0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0QxRDBGNUUzRDYzMTFFOEFCMjQ4NTNCQjcwRDZCM0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu42dCEAAAE4SURBVHja7N2xDYQwEEVBjOiI/kvYmtaEBBsQIGTsedI1wOgTsbqWmZvGafcIgAgIEAEBIiBABGTtjut3egyvFhbilSUgQAREQIAICBABASIgQPR5zXdZFiIgQAQEiIAAERAgAiIgQAQEiIAAERAgAqKykS+owkIERECACAgQAQEiIEAERECA6GEuqCxEQIAICBABASIgQAREQIAICBABASIgQAREdav+B1VYiIAAERAgAgJEQAQEiIAAEZCpckFlIQICRECACAgQAQEiIAICRECACAgQAQEiIKpb9YLKQgQEiIAAERAgAiIgQAQEiIDMlQsqCxEQIAICRECACAgQAREQIAICRECACAgQAVHdXy+owkIEBIiACAgQAQEiIEAEBIiA6JYLKgsRECACAkRAgAgIEI1UF2AA7H8XeqANvwMAAAAASUVORK5CYII=") !default;
   $datagrid-cell-removed-border-color: $base-accent !default;
   $datagrid-row-removed-bg: $base-accent !default;
@@ -172,8 +172,8 @@ $datagrid-draggable-column-text-color: null !default;
 }
 
 @if $color == "dark" {
-  $datagrid-columnchooser-item-color: darken($datagrid-base-color, 26%) !default;
-  $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: -26%, $space: hsl) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !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;
@@ -184,38 +184,38 @@ $datagrid-draggable-column-text-color: null !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-hover-bg: lighten($datagrid-base-background-color, 4%) !default;
+  $datagrid-row-focused-bg: color.mix($base-accent, $base-bg, 20%) !default;
+  $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $datagrid-base-color !default;
-  $datagrid-group-row-color: lighten($datagrid-base-color, 6.7%) !default;
-  $datagrid-group-row-bg: lighten($datagrid-base-background-color, 3%) !default;
-  $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default;
-  $datagrid-spin-icon-color: darken($base-icon-color, 38.5%) !default;
+  $datagrid-group-row-color: color.adjust($datagrid-base-color, $lightness: 6.7%, $space: hsl) !default;
+  $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: 3%, $space: hsl) !default;
+  $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default;
+  $datagrid-spin-icon-color: color.adjust($base-icon-color, $lightness: -38.5%, $space: hsl) !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
   $datagrid-editor-bg: $datagrid-base-background-color !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-element-bg !default;
-  $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default;
+  $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default;
-  $datagrid-columnchooser-message-color: darken($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-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkZBMzM1MzUzRDYzMTFFOEIwNEVFMkJENjkwODU5NTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkZBMzM1MzQzRDYzMTFFOEIwNEVFMkJENjkwODU5NTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pi/HBW0AAAE4SURBVHja7N2xDYQwEEVBjOiB/svbKtaEBBsQIGTsedI1wOgTsbqWmZvGafcIgAgIEAEBIiBABGTtjut3egyvFhbilSUgQAREQIAICBABASIgQPR5zXdZFiIgQAQEiIAAERAgAiIgQAQEiIAAERAgAqKykS+owkIERECACAgQAQEiIEAERECA6GEuqCxEQIAICBABASIgQAREQIAICBABASIgQAREdav+B1VYiIAAERAgAgJEQAQEiIAAEZCpckFlIQICRECACAgQAQEiIAICRECACAgQAQEiIKpb9YLKQgQEiIAAERAgAiIgQAQEiIDMlQsqCxEQIAICRECACAgQAREQIAICRECACAgQAVHdXy+owkIEBIiACAgQAQEiIEAEBIiA6JYLKgsRECACAkRAgAgIEI1UF2AAmMEXXlD4taoAAAAASUVORK5CYII=") !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
-  $datagrid-row-removed-bg: darken($datagrid-border-color, 6.67) !default;
+  $datagrid-row-removed-bg: color.adjust($datagrid-border-color, $lightness: -6.67%, $space: hsl) !default;
   $datagrid-cell-removed-text-color: color.change($base-text-color, $alpha: 0.7) !default;
-  $datagrid-draggable-column-text-color: darken($base-text-color, 40%) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
   $datagrid-columnchooser-item-color: $screen-text-color !default;
-  $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !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;
@@ -226,38 +226,38 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-selected-border-color: $base-grid-selected-border-color !default;
   $datagrid-row-selected-color: $base-bg !default;
   $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
-  $datagrid-hover-bg: darken($base-bg, 2%) !default;
+  $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default;
+  $datagrid-hover-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $base-icon-color !default;
   $datagrid-group-row-color: $base-text-color !default;
-  $datagrid-group-row-bg: lighten($base-bg, 3%) !default;
-  $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default;
+  $datagrid-group-row-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
+  $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default;
   $datagrid-spin-icon-color: $base-icon-color !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, darken($base-accent, 20%), 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -20%, $space: hsl), 20%) !default;
   $datagrid-editor-bg: $datagrid-base-background-color !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-element-bg !default;
-  $datagrid-row-alternation-bg: darken($base-bg, 2%) !default;
+  $datagrid-row-alternation-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default;
-  $datagrid-columnchooser-message-color: darken($datagrid-base-color, 40%) !default;
+  $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: -40%, $space: hsl) !default;
   $datagrid-summary-bg: $datagrid-base-background-color !default;
   $datagrid-column-separator-bg: $base-accent !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTA1Rjg5QzEzRDYzMTFFODk2RDNEMzdGNEM4MUVCNTEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTA1Rjg5QzAzRDYzMTFFODk2RDNEMzdGNEM4MUVCNTEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5ua/oAAAE4SURBVHja7N2xDYQwEEVBjCiD/ivbPtaEBBsQIGTsedI1wOgTsbqWmZvGafcIgAgIEAEBIiBABGTtjut3egyvFhbilSUgQAREQIAICBABASIgQPR5zXdZFiIgQAQEiIAAERAgAiIgQAQEiIAAERAgAqKykS+owkIERECACAgQAQEiIEAERECA6GEuqCxEQIAICBABASIgQAREQIAICBABASIgQAREdav+B1VYiIAAERAgAgJEQAQEiIAAEZCpckFlIQICRECACAgQAQEiIAICRECACAgQAQEiIKpb9YLKQgQEiIAAERAgAiIgQAQEiIDMlQsqCxEQIAICRECACAgQAREQIAICRECACAgQAVHdXy+owkIEBIiACAgQAQEiIEAEBIiA6JYLKgsRECACAkRAgAgIEI1UF2AAcN0XYzrIAiwAAAAASUVORK5CYII=") !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
   $datagrid-row-removed-bg: $datagrid-border-color !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
-  $datagrid-draggable-column-text-color: darken($base-label-color, 17%) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-label-color, $lightness: -17%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
-  $datagrid-columnchooser-item-color: darken($datagrid-base-color, 38.5%) !default;
-  $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: -38.5%, $space: hsl) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent-highlight-color, $alpha: 0.8) !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;
@@ -268,38 +268,38 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-selected-border-color: $base-selected-border !default;
   $datagrid-row-selected-color: $datagrid-base-color !default;
   $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 15%) !default;
+  $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 15%) !default;
   $datagrid-hover-bg: $base-row-alternation-background !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
-  $datagrid-nodata-color: darken($datagrid-base-color, 40%) !default;
+  $datagrid-nodata-color: color.adjust($datagrid-base-color, $lightness: -40%, $space: hsl) !default;
   $datagrid-group-row-color: $base-header-color !default;
-  $datagrid-group-row-bg: lighten($datagrid-base-background-color, 3%) !default;
-  $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default;
+  $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: 3%, $space: hsl) !default;
+  $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default;
   $datagrid-spin-icon-color: $base-header-color !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
   $datagrid-editor-bg: $datagrid-base-background-color !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-element-bg !default;
   $datagrid-row-alternation-bg: $base-row-alternation-background !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default;
-  $datagrid-columnchooser-message-color: darken($datagrid-base-color, 40%) !default;
+  $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: -40%, $space: hsl) !default;
   $datagrid-summary-bg: $datagrid-base-background-color !default;
   $datagrid-column-separator-bg: $base-accent !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjBBQjIxNjEzRDYzMTFFOEEzRjI5QUY2RTVEODc2RjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjBBQjIxNjAzRDYzMTFFOEEzRjI5QUY2RTVEODc2RjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtiXIwAAAAE4SURBVHja7N2xDYQwEEVBjOiB/svbKtaEBBsQIGTsedI1wOgTsbqWmZvGafcIgAgIEAEBIiBABGTtjut3egyvFhbilSUgQAREQIAICBABASIgQPR5zXdZFiIgQAQEiIAAERAgAiIgQAQEiIAAERAgAqKykS+owkIERECACAgQAQEiIEAERECA6GEuqCxEQIAICBABASIgQAREQIAICBABASIgQAREdav+B1VYiIAAERAgAgJEQAQEiIAAEZCpckFlIQICRECACAgQAQEiIAICRECACAgQAQEiIKpb9YLKQgQEiIAAERAgAiIgQAQEiIDMlQsqCxEQIAICRECACAgQAREQIAICRECACAgQAVHdXy+owkIEBIiACAgQAQEiIEAEBIiA6JYLKgsRECACAkRAgAgIEI1UF2AAmMEXXlD4taoAAAAASUVORK5CYII=") !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
   $datagrid-row-removed-bg: $datagrid-border-color !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
-  $datagrid-draggable-column-text-color: darken($base-text-color, 40%) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
-  $datagrid-columnchooser-item-color: lighten($datagrid-base-color, 38.5%) !default;
-  $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: 38.5%, $space: hsl) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !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;
@@ -307,41 +307,41 @@ $datagrid-draggable-column-text-color: null !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
   $datagrid-selection-bg: $base-link-color !default;
-  $datagrid-row-selected-border-color: lighten($base-accent, 14%) !default;
-  $datagrid-row-selected-color: lighten($base-text-color, 100%) !default;
+  $datagrid-row-selected-border-color: color.adjust($base-accent, $lightness: 14%, $space: hsl) !default;
+  $datagrid-row-selected-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default;
   $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
-  $datagrid-hover-bg: darken($base-bg, 3%) !default;
+  $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default;
+  $datagrid-hover-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
-  $datagrid-nodata-color: lighten($datagrid-base-color, 40%) !default;
-  $datagrid-group-row-color: lighten($datagrid-base-color, 38.5%) !default;
+  $datagrid-nodata-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default;
+  $datagrid-group-row-color: color.adjust($datagrid-base-color, $lightness: 38.5%, $space: hsl) !default;
   $datagrid-group-row-bg: $base-bg !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-spin-icon-color: $base-icon-color !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, darken($base-focus-bg, 15%), 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, color.adjust($base-focus-bg, $lightness: -15%, $space: hsl), 20%) !default;
   $datagrid-editor-bg: $base-bg !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-bg !default;
-  $datagrid-row-alternation-bg: darken($base-bg, 3%) !default;
+  $datagrid-row-alternation-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-summary-color: $base-label-color !default;
-  $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
+  $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default;
   $datagrid-summary-bg: $datagrid-base-background-color !default;
   $datagrid-column-separator-bg: $base-accent !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc1MjJDQUMzRDYzMTFFODhCMEJDMTY1QUY0RUJDNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc1MjJDQUIzRDYzMTFFODhCMEJDMTY1QUY0RUJDNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvW6FhcAAAFESURBVHja7Nu7DYQwFEVBg+iDmFLI6D9zJQ+REThA4iNjzynBo0uwqzdERFI9jZ4AiIAAERAgAgJEQPpuWtZt9gyPli3EJ0tAgAiIgAARECACAkRAgOjzpnTz10lZCBABASIgAgJEQIAICBABASIgAgJEQIAISKMd/6nXekGVLURABASIgAARECACAkRABASILuaCykIEBIiAABEQIAICREAEBIiAABEQIAICREBUruYLqjfLFiIgQAQEiIAAERABASIgQASkqVxQWYiAABEQIAICRECACIiAABEQIAICRECACIjK9XpBZSECAkRAgAgIEAERECACAkRA2soFlYUICBABASIgQAQEiIAICBABASIgQAQEiICo3F8vqLKFCAgQAREQIAICRECACAgQAdGpISK8goUICBABASIgQAQEiGppF2AAqqIPxEOTqaQAAAAASUVORK5CYII=") !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
   $datagrid-row-removed-bg: $datagrid-border-color !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
-  $datagrid-draggable-column-text-color: lighten($base-label-color, 16%) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-label-color, $lightness: 16%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $datagrid-columnchooser-item-color: lighten($datagrid-base-color, 26%) !default;
-  $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !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;
@@ -352,38 +352,38 @@ $datagrid-draggable-column-text-color: null !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-hover-bg: darken($datagrid-base-background-color, 4%) !default;
+  $datagrid-row-focused-bg: color.mix($base-accent, $base-bg, 20%) !default;
+  $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $datagrid-base-color !default;
-  $datagrid-group-row-color: darken($datagrid-base-color, 6.7%) !default;
-  $datagrid-group-row-bg: darken($datagrid-base-background-color, 3%) !default;
-  $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default;
-  $datagrid-spin-icon-color: lighten($base-icon-color, 38.5%) !default;
+  $datagrid-group-row-color: color.adjust($datagrid-base-color, $lightness: -6.7%, $space: hsl) !default;
+  $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: -3%, $space: hsl) !default;
+  $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
+  $datagrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 38.5%, $space: hsl) !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
   $datagrid-editor-bg: $datagrid-base-background-color !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-element-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-columnchooser-item-bg: $datagrid-columnchooser-bg !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-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY1RUVFQzAzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY1RUVFQkYzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvLbJKYAAADrSURBVHja7N3BDYBACABBsQn7L48q0BoMD5SZxAZuc74gF1V1MMfpCARBEEEQRBAEEQRBdovnuxxDq3RD/LIQRBAEQRBBEEQQBBEEQQQBAAAAAAAAABhi8gZVbgxi6kQQBBEEQQRBEEEQRBAEQRBBAAAAAAAAAAAabX2Daux2lqkTQRBEEAQRBEEEQRBBEARBBAEAAAAAAAAAaLR1g2osUyeCIIggCCIIggiCIIIgCIIIAgAAAAAAAADQ6KsbVPnXIKZOBEEQQRBEEAQRBEEEQRAEEYRXoqqcghuCIIIgiCAIIgiCCMIUtwADALYCCr92l++TAAAAAElFTkSuQmCC") !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
-  $datagrid-row-removed-bg: lighten($datagrid-border-color, 6.67) !default;
+  $datagrid-row-removed-bg: color.adjust($datagrid-border-color, $lightness: 6.67%, $space: hsl) !default;
   $datagrid-cell-removed-text-color: color.change($base-text-color, $alpha: 0.7) !default;
-  $datagrid-draggable-column-text-color: lighten($base-text-color, 40%) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
   $datagrid-columnchooser-item-color: $base-icon-color !default;
-  $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default;
+  $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default;
   $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !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;
@@ -394,33 +394,33 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-selected-border-color: $base-grid-selectedrow-border-color !default;
   $datagrid-row-selected-color: $datagrid-base-color !default;
   $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
-  $datagrid-hover-bg: darken($datagrid-base-background-color, 2%) !default;
+  $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default;
+  $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $base-icon-color !default;
   $datagrid-group-row-color: $base-icon-color !default;
-  $datagrid-group-row-bg: darken($datagrid-base-background-color, 2%) !default;
-  $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default;
+  $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
+  $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
   $datagrid-spin-icon-color: $base-icon-color !default;
   $datagrid-search-bg: $base-accent !default;
   $datagrid-row-error-color: $base-inverted-text-color !default;
-  $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
-  $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+  $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
   $datagrid-editor-bg: $datagrid-base-background-color !default;
   $datagrid-drop-highlight-bg: $base-accent !default;
   $datagrid-columnchooser-bg: $base-element-bg !default;
-  $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 2%) !default;
+  $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-summary-color: $base-icon-color !default;
-  $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
+  $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default;
   $datagrid-summary-bg: $datagrid-base-background-color !default;
   $datagrid-column-separator-bg: $base-accent !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTlGRkQ2QzMzRDYzMTFFODg0NDZGNjZGMUE0MTU0RDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTlGRkQ2QzIzRDYzMTFFODg0NDZGNjZGMUE0MTU0RDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpydNkAAAADrSURBVHja7N3BDYBACABBsQn7L48q0BoMD5SZxAZuc74gF1V1MMfpCARBEEEQRBAEEQRBdovnuxxDq3RD/LIQRBAEQRBBEEQQBBEEQQQBAAAAAAAAABhi8gZVbgxi6kQQBBEEQQRBEEEQRBAEQRBBAAAAAAAAAAAabX2Daux2lqkTQRBEEAQRBEEEQRBBEARBBAEAAAAAAAAAaLR1g2osUyeCIIggCCIIggiCIIIgCIIIAgAAAAAAAADQ6KsbVPnXIKZOBEEQQRBEEAQRBEEEQRAEEYRXoqqcghuCIIIgiCAIIgiCCMIUtwADALYCCr92l++TAAAAAElFTkSuQmCC") !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
   $datagrid-row-removed-bg: $datagrid-border-color !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
-  $datagrid-draggable-column-text-color: lighten($base-text-color, 40%) !default;
+  $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
 
 :root {

package/data/scss/widgets/generic/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 *;
@@ -20,6 +21,7 @@
 @use "variables" as *;
 @forward "variables";
 @use 'layout/cell' as *;
+@use "layout/aiChat" as *;
 @use "../scrollable";
 @use "../overlay";
 @use "../pagination";
@@ -32,7 +34,7 @@ $generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-se
 $generic-grid-base-checkbox-icon-size: 16px;
 $generic-grid-base-checkbox-indeterminate-icon-size: 6px;
 $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
-$generic-grid-base-cell-input-height: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
+$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
 
 @mixin dx-set-checkbox-border-color-as-background() {
   @if $generic-color-postfix == ".contrast" {
@@ -151,8 +153,10 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       }
 
       // 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 {
@@ -242,7 +246,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       .dx-placeholder::before {
         padding-left: $generic-texteditor-icon-container-size;
 
-        @at-root #{selector-append(".dx-rtl", &)},
+        @at-root #{selector.append(".dx-rtl", &)},
         .dx-rtl & {
           padding-right: $generic-texteditor-icon-container-size;
         }
@@ -356,6 +360,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
           color: $datagrid-columnchooser-item-color;
           font-weight: $datagrid-columnchooser-font-weight;
           border: $datagrid-border;
+          border-color: $datagrid-border-color;
           padding: $generic-grid-base-cell-padding;
           box-shadow: 0 1px 3px -1px $datagrid-columnchooser-shadow-color;
         }
@@ -369,6 +374,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
     font-weight: $datagrid-columnchooser-font-weight;
     padding: $generic-grid-base-cell-padding;
     border: $generic-grid-base-drag-header-border;
+    border-color: $datagrid-drag-header-border-color;
     background-color: $datagrid-header-drag-bg;
   }
 
@@ -381,7 +387,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
   }
 
   .dx-#{$widget-name}-focus-overlay {
-    border: 2px solid $datagrid-focused-border-color;
+    border: 2px solid;
+    border-color: $datagrid-focused-border-color;
   }
 
   .dx-#{$widget-name}-table {
@@ -425,6 +432,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       right: 0;
       pointer-events: none;
       border-bottom: $datagrid-border;
+      border-bottom-color: $datagrid-border-color;
     }
 
     .dx-#{$widget-name}-table {
@@ -447,7 +455,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
         color: $datagrid-menu-icon-color;
 
         &::after {
-          border: 2px solid $datagrid-focused-border-color;
+          border: 2px solid;
+          border-color: $datagrid-focused-border-color;
         }
 
         &.dx-menu-item-expanded {
@@ -492,6 +501,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
   .dx-#{$widget-name}-filter-range-overlay {
     .dx-overlay-content {
       border: $datagrid-border;
+      border-color: $datagrid-border-color;
       overflow: inherit;
       box-shadow: 2px 2px 3px $datagrid-overlay-content-shadow-color;
 
@@ -512,7 +522,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
         }
 
         &.dx-state-focused::after {
-          border: 2px solid $datagrid-focused-border-color;
+          border: 2px solid;
+          border-color: $datagrid-focused-border-color;
         }
       }
     }
@@ -551,6 +562,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
 
   .dx-#{$widget-name}-header-panel {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
 
     .dx-toolbar {
       margin-bottom: $generic-grid-base-header-panel-margin-bottom;
@@ -599,6 +611,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
     .dx-#{$widget-name}-headers + &,
     &.dx-#{$widget-name}-after-headers {
       border-top: $datagrid-border;
+      border-top-color: $datagrid-border-color;
     }
 
     .dx-row {
@@ -636,7 +649,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       }
 
       .dx-#{$widget-name}-invalid {
-        border: 1px solid $datagrid-row-invalid-faded-border-color;
+        border: 1px solid;
+        border-color: $datagrid-row-invalid-faded-border-color;
 
         &.dx-adaptive-item-text {
           padding-top: $generic-grid-base-adaptive-text-padding - 1px;
@@ -648,7 +662,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
 
     .dx-item-modified {
       border-radius: $base-border-radius;
-      border: 2px solid $datagrid-cell-modified-border-color;
+      border: 2px solid;
+      border-color: $datagrid-cell-modified-border-color;
 
       &.dx-adaptive-item-text {
         padding-top: $generic-grid-base-adaptive-text-padding - 2px;
@@ -744,6 +759,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
 
   .dx-#{$widget-name}-bottom-load-panel {
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
     background-color: $datagrid-base-background-color;
   }
 
@@ -753,6 +769,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
 
   .dx-#{$widget-name}-total-footer {
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
   }
 
   .dx-#{$widget-name}-revert-tooltip {
@@ -767,9 +784,9 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
 
       @include dx-button-styling-variant(
         $button-danger-bg, $button-danger-border-color, $button-danger-color,
-        darken($button-danger-bg, 10%),
-        darken($button-danger-bg, 15%),
-        darken($button-danger-bg, 20%),
+        color.adjust($button-danger-bg, $lightness: -10%, $space: hsl),
+        color.adjust($button-danger-bg, $lightness: -15%, $space: hsl),
+        color.adjust($button-danger-bg, $lightness: -20%, $space: hsl),
         $button-danger-color,
         $button-danger-color
       );

package/data/scss/widgets/generic/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-bg-hover,
+);
+@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-outlined-bg-active);
+@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/generic/gridBase/layout/aiChat/_sizes.scss

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