devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -41,12 +41,13 @@ $button-normal-text-bg: getCustomVar(("$button-normal-text-bg")) !default;
 
 $button-border-radius: $base-border-radius !default;
 $button-disabled-background: null !default;
+$button-disabled-text-color: null !default;
 $button-disabled-icon-opacity: 0.6 !default;
 $button-shadow-color: null !default;
 $button-normal-color: $base-text-color !default;
 $button-normal-border-color: color.change($button-normal-color, $alpha: 0.24);
 $button-normal-selected-color: $base-text-color !default;
-$button-normal-bg: $base-element-bg !default;
+$button-normal-bg: null !default;
 $button-normal-hover-bg: null !default;
 $button-normal-focused-bg: null !default;
 $button-normal-active-bg: null !default;
@@ -63,17 +64,17 @@ $button-default-selected-bg: null !default;
 $button-default-icon-color: $button-default-color !default;
 $button-default-outlined-bg: transparent !default;
 $button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
-$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
+$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default;
+$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.18) !default;
+$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default;
 $button-default-outlined-color: $button-default-bg !default;
 $button-default-outlined-border-color: $button-default-bg !default;
 $button-default-outlined-selected-color: $button-default-bg !default;
 $button-default-text-bg: transparent !default;
 $button-default-text-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
-$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
+$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default;
+$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.18) !default;
+$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default;
 $button-default-text-color: $button-default-bg !default;
 $button-default-text-selected-color: $button-default-bg !default;
 $button-danger-color: $base-inverted-text-color !default;
@@ -86,16 +87,16 @@ $button-danger-selected-bg: null !default;
 $button-danger-icon-color: $button-danger-color !default;
 $button-danger-outlined-bg: transparent !default;
 $button-danger-outlined-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
-$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
+$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default;
+$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default;
+$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default;
 $button-danger-outlined-selected-color: $button-danger-bg !default;
 
 $button-danger-text-bg: transparent !default;
 $button-danger-text-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
-$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
+$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default;
+$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default;
+$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default;
 $button-danger-text-selected-color: $button-danger-bg !default;
 $button-success-color: $base-inverted-text-color !default;
 $button-success-selected-color: $base-inverted-text-color !default;
@@ -107,63 +108,66 @@ $button-success-selected-bg: null !default;
 $button-success-icon-color: $button-success-color !default;
 $button-success-outlined-bg: transparent !default;
 $button-success-outlined-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
-$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default;
+$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default;
+$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.18) !default;
+$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default;
 $button-success-outlined-selected-color: $button-success-bg !default;
 
 $button-success-text-bg: transparent !default;
 $button-success-text-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
-$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default;
+$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default;
+$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.18) !default;
+$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default;
 $button-success-text-selected-color: $button-success-bg !default;
 
 @if $mode == "light" {
-  $button-disabled-background: rgba(0, 0, 0, 0.1) !default;
+  $button-normal-bg: $base-element-bg !default;
+  $button-disabled-background: rgba(0, 0, 0, 0.12) !default;
+  $button-disabled-text-color: rgba(0, 0, 0, 0.38) !default;
   $button-shadow-color: rgba(0, 0, 0, 0.24) !default;
-  $button-normal-hover-bg: darken($button-normal-bg, 8%) !default;
-  $button-normal-focused-bg: darken($button-normal-bg, 8%) !default;
-  $button-normal-active-bg: darken($button-normal-bg, 30%) !default;
-  $button-normal-selected-bg: darken($button-normal-bg, 18%) !default;
-  $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
-  $button-default-hover-bg: darken($button-default-bg, 8.5%) !default;
-  $button-default-focused-bg: darken($button-default-bg, 8.5%) !default;
-  $button-default-active-bg: darken($button-default-bg, 19.5%) !default;
-  $button-default-selected-bg: darken($button-default-bg, 19.5%) !default;
-  $button-danger-hover-bg: darken($button-danger-bg, 8.5%) !default;
-  $button-danger-focused-bg: darken($button-danger-bg, 8.5%) !default;
-  $button-danger-active-bg: darken($button-danger-bg, 19.5%) !default;
-  $button-danger-selected-bg: darken($button-danger-bg, 19.5%) !default;
-  $button-success-hover-bg: darken($button-success-bg, 8.5%) !default;
-  $button-success-focused-bg: darken($button-success-bg, 8.5%) !default;
-  $button-success-active-bg: darken($button-success-bg, 19.5%) !default;
-  $button-success-selected-bg: darken($button-success-bg, 19.5%) !default;
+  $button-normal-hover-bg: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default;
+  $button-normal-focused-bg: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default;
+  $button-normal-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
+  $button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: -18%, $space: hsl) !default;
+  $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default;
+  $button-default-hover-bg: color.adjust($button-default-bg, $lightness: 4.12%, $space: hsl) !default;
+  $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 12.6%, $space: hsl) !default;
+  $button-default-active-bg: color.adjust($button-default-bg, $lightness: 19.61%, $space: hsl) !default;
+  $button-default-selected-bg: color.adjust($button-default-bg, $lightness: 9.02%, $space: hsl) !default;
+  $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 3.92%, $space: hsl) !default;
+  $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 11.37%, $space: hsl) !default;
+  $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 15.88%, $space: hsl) !default;
+  $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 8.62%, $space: hsl) !default;
+  $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 4.90%, $space: hsl) !default;
+  $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 14.51%, $space: hsl) !default;
+  $button-success-active-bg: color.adjust($button-success-bg, $lightness: 22.75%, $space: hsl) !default;
+  $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 10.9%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $button-disabled-background: rgba(255, 255, 255, 0.1) !default;
+  $button-normal-bg: color.adjust($base-element-bg, $lightness: 6%, $space: hsl) !default;
+  $button-disabled-background: rgba(255, 255, 255, 0.12) !default;
+  $button-disabled-text-color: rgba(255, 255, 255, 0.38) !default;
   $button-shadow-color: rgba(0, 0, 0, 0.4) !default;
-  $button-normal-hover-bg: lighten($button-normal-bg, 8%) !default;
-  $button-normal-focused-bg: lighten($button-normal-bg, 8%) !default;
-  $button-normal-active-bg: lighten($button-normal-bg, 30%) !default;
-  $button-normal-selected-bg: lighten($button-normal-bg, 18%) !default;
-  $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default;
-  $button-default-hover-bg: lighten($button-default-bg, 8.5%) !default;
-  $button-default-focused-bg: lighten($button-default-bg, 8.5%) !default;
-  $button-default-active-bg: lighten($button-default-focused-bg, 19.5%) !default;
-  $button-default-selected-bg: lighten($button-default-focused-bg, 19.5%) !default;
-  $button-danger-hover-bg: lighten($button-danger-bg, 8.5%) !default;
-  $button-danger-focused-bg: lighten($button-danger-bg, 8.5%) !default;
-  $button-danger-active-bg: lighten($button-danger-bg, 19.5%) !default;
-  $button-danger-selected-bg: lighten($button-danger-bg, 19.5%) !default;
-  $button-success-hover-bg: lighten($button-success-bg, 8.5%) !default;
-  $button-success-focused-bg: lighten($button-success-bg, 8.5%) !default;
-  $button-success-active-bg: lighten($button-success-bg, 19.5%) !default;
-  $button-success-selected-bg: lighten($button-success-bg, 19.5%) !default;
+  $button-normal-hover-bg: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default;
+  $button-normal-focused-bg: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default;
+  $button-normal-active-bg: color.adjust($button-normal-bg, $lightness: 30%, $space: hsl) !default;
+  $button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: 18%, $space: hsl) !default;
+  $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default;
+  $button-default-hover-bg: color.adjust($button-default-bg, $lightness: -9.22%, $space: hsl) !default;
+  $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -22.75%, $space: hsl) !default;
+  $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -26.28%, $space: hsl) !default;
+  $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -15.69%, $space: hsl) !default;
+  $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -9.81%, $space: hsl) !default;
+  $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -19.02%, $space: hsl) !default;
+  $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -21.77%, $space: hsl) !default;
+  $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -14.51%, $space: hsl) !default;
+  $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -10.19%, $space: hsl) !default;
+  $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -17.64%, $space: hsl) !default;
+  $button-success-active-bg: color.adjust($button-success-bg, $lightness: -29.60%, $space: hsl) !default;
+  $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -25.88%, $space: hsl) !default;
 }
 
-$button-disabled-text-color: $button-disabled-background !default;
 $button-hover-shadow-color: $button-shadow-color !default;
 $button-focused-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default;
 $button-active-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default;

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

@@ -13,8 +13,8 @@ $calendar-cell-selected-bg: getCustomVar(("$calendar-cell-selected-bg")) !defaul
 $calendar-color: $base-text-color !default;
 $calendar-navigator-text-color: $button-default-bg !default;
 $calendar-header-color: $calendar-color !default;
-$calendar-cell-other-color: color.change($calendar-color, $alpha: 0.38) !default;
-$calendar-cell-other-hover-color: color.change($calendar-color, $alpha: 0.38) !default;
+$calendar-cell-other-color: $base-label-color !default;
+$calendar-cell-other-hover-color: $base-label-color !default;
 $calendar-bg: $base-bg !default;
 $calendar-hover-bg: color.change($base-accent, $alpha: 0.24) !default;
 $calendar-cell-hover-border-color: color.change($base-accent, $alpha: 0.6) !default;
@@ -27,7 +27,7 @@ $calendar-cell-contoured-border-color: color.change($base-accent, $alpha: 0.5) !
 $calendar-invalid-focused-border-color: $base-invalid-color !default;
 $calendar-invalid-faded-border-color: $base-invalid-faded-border-color !default;
 $calendar-week-number-cell-color: color.change($calendar-color, $alpha: 0.56) !default;
-$calendar-week-number-cell-bg: color.change(darken($base-bg, 12%), $alpha: 0.4) !default;
+$calendar-week-number-cell-bg: color.change(color.adjust($base-bg, $lightness: -12%, $space: hsl), $alpha: 0.4) !default;
 $never-used: collector((
 "$calendar-navigator-text-color": $calendar-navigator-text-color,
 "$calendar-header-color": $calendar-header-color,

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

@@ -55,6 +55,7 @@ $cardview-material-card__content__field-value--highlighted-bg-color: getCustomVa
 $cardview-material-card__content__field-value--highlighted-text-color: getCustomVar(("$cardview-material-card__content__field-value--highlighted-text-color")) !default;
 $cardview-material-card__content__field-value--highlighted-box-shadow-color: getCustomVar(("$cardview-material-card__content__field-value--highlighted-box-shadow-color")) !default;
 
+@use 'sass:color';
 @use '../colors' as *;
 @use '../../base/cardView/variables' as *;
 @use '../../base/cardView/header_panel/variables' as *;
@@ -67,7 +68,6 @@ $cardview-material-card__content__field-value--highlighted-box-shadow-color: get
 @use '../../base/cardView/content_view/no_data/variables' as *;
 @use '../../base/cardView/column_chooser/variables' as *;
 @use '../../base/cardView/filter_panel/variables' as *;
-@use "sass:color";
 
 // adduse
 
@@ -169,7 +169,7 @@ $cardview-material-nodata-view__icon-bg-color: null !default;
 // #endregion
 
 // #region HIGHLIGHTS IN SEARCH
-$cardview-material-card__content__field-value--highlighted-bg-color: null !default;
+$cardview-material-card__content__field-value--highlighted-bg-color: #FFE082 !default;
 $cardview-material-card__content__field-value--highlighted-text-color: null !default;
 $cardview-material-card__content__field-value--highlighted-box-shadow-color: null !default;
 
@@ -194,7 +194,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-card-divider-color: $cardview-material-card-border-color !default;
   $cardview-material-card-text-color: $cardview-material-common-text-color !default;
   $cardview-material-card__cover-bg-color: #FFF !default;
-  $cardview-material-card__cover--noimage-bg-color: darken($base-bg, 7.84) !default;
+  $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default;
 
   $cardview-material-card--focused-outline-color: $base-accent !default;
@@ -209,7 +209,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default;
 
   // Header panel item - default state
-  $cardview-material-header-panel__item-bg-color: darken($base-bg, 7.84) !default;
+  $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default;
   $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default;
   $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default;
@@ -219,7 +219,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-header-panel__item--focused-outline-color: $base-accent !default;
 
   // Header panel item - hovered
-  $cardview-material-header-panel__item--hovered-bg-color: darken($cardview-material-header-panel__item-bg-color, 4.31) !default;
+  $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $lightness: -4.31%, $space: hsl) !default;
   $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default;
   $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default;
   $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default;
@@ -239,11 +239,11 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default;
   $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default;
   $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default;
-  $cardview-material-header-panel__item--dragged__prohibition-icon-color: darken(saturate(adjust-hue($base-danger, -4), 22.8), 9.61) !default;
+  $cardview-material-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $hue: -4deg, $saturation: 22.8%, $space: hsl, $lightness: -9.61%) !default;
   $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
   // Header panel Drop-zone
-  $cardview-material-header-panel__dropzone-bg-color: mix($base-accent, $base-bg, 8%) !default;
+  $cardview-material-header-panel__dropzone-bg-color: color.mix($base-accent, $base-bg, 8%) !default;
   $cardview-material-header-panel__dropzone-border-color: $base-accent !default;
   $cardview-material-header-panel__dropzone-text-color: $base-accent !default;
   $cardview-material-header-panel__dropzone__icon-color: $base-accent !default;
@@ -258,15 +258,14 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default;
   $cardview-material-nodata-view-text-color: $base-label-color !default;
   $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default;
-  $cardview-material-nodata-view__icon-bg-color: darken($base-bg, 7.84) !default;
+  $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
 
   // Search highlight
-  $cardview-material-card__content__field-value--highlighted-bg-color: $base-warning !default;
-  $cardview-material-card__content__field-value--highlighted-text-color: $cardview-material-common-text-color !default;
+  $cardview-material-card__content__field-value--highlighted-text-color: rgba(0, 0, 0, 1) !default;
   $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
   // Column chooser
-  $cardview-material-columnchooser--empty__message-color: lighten($cardview-material-common-text-color, 26%) !default;
+  $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 
 @if $mode == 'dark' {
@@ -282,14 +281,14 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-card-divider-color: $cardview-material-card-border-color !default;
   $cardview-material-card-text-color: $cardview-material-common-text-color !default;
   $cardview-material-card__cover-bg-color: #FFF !default;
-  $cardview-material-card__cover--noimage-bg-color: lighten(desaturate($base-bg, 0.3), 8.04) !default;
+  $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
   $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default;
 
   $cardview-material-card--focused-outline-color: $base-accent !default;
 
   // Card - selected
-  $cardview-material-card--selected-bg-color: color.change(lighten($base-accent, 19.22), $alpha: 0.08) !default;
-  $cardview-material-card--selected-border-color: color.change(lighten($base-accent, 19.22), $alpha: 0.32) !default;
+  $cardview-material-card--selected-bg-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.08) !default;
+  $cardview-material-card--selected-border-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.32) !default;
   $cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default;
   $cardview-material-card--selected-text-color: $cardview-material-card-text-color !default;
   $cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default;
@@ -297,7 +296,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default;
 
   // Header panel item - default
-  $cardview-material-header-panel__item-bg-color: lighten(desaturate($base-bg, 0.3), 8.04) !default;
+  $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
   $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default;
   $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default;
   $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default;
@@ -307,7 +306,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-header-panel__item--focused-outline-color: $base-accent !default;
 
   // Header panel item - hovered
-  $cardview-material-header-panel__item--hovered-bg-color: lighten(desaturate($cardview-material-header-panel__item-bg-color, 3.47), 2.16) !default;
+  $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $saturation: -3.47%, $space: hsl, $lightness: 2.16%) !default;
   $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default;
   $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default;
   $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default;
@@ -327,11 +326,11 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default;
   $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default;
   $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default;
-  $cardview-material-header-panel__item--dragged__prohibition-icon-color: darken(desaturate($base-danger, 0.27), 7.45) !default;
+  $cardview-material-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default;
   $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
   // Header panel Drop-zone
-  $cardview-material-header-panel__dropzone-bg-color: mix(lighten($base-accent, 19.22), $base-bg, 8%) !default;
+  $cardview-material-header-panel__dropzone-bg-color: color.mix(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $base-bg, 8%) !default;
   $cardview-material-header-panel__dropzone-border-color: $base-accent !default;
   $cardview-material-header-panel__dropzone-text-color: $base-accent !default;
   $cardview-material-header-panel__dropzone__icon-color: $base-accent !default;
@@ -346,15 +345,14 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default;
   $cardview-material-nodata-view-text-color: $base-label-color !default;
   $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default;
-  $cardview-material-nodata-view__icon-bg-color: lighten(desaturate($base-bg, 0.3), 8.04) !default;
+  $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
 
   // Search highlight
-  $cardview-material-card__content__field-value--highlighted-bg-color: $base-warning !default;
-  $cardview-material-card__content__field-value--highlighted-text-color: $cardview-material-common-text-color !default;
+  $cardview-material-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default;
   $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
   // Column chooser
-  $cardview-material-columnchooser--empty__message-color: lighten($cardview-material-common-text-color, 26%) !default;
+  $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 
 $cardview-bg-color: $cardview-material-common-bg-color !default;

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

@@ -55,14 +55,18 @@ $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
 $chat-file-secondary-color: $base-icon-color !default;
 
+$chat-suggestions-box-shadow: null !default;
+
 @if $mode == "light" {
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
   $chat-file-container-box-shadow: 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.14), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.2) !default;
+  $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
 }
 
 @else if $mode == "dark" {
-  $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
+  $chat-bubble-background-color-primary: rgba(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), 0.08) !default;
   $chat-file-container-box-shadow: 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.4) !default;
+  $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
 }
 
 $chat-messagelist-contextmenu-delete-button-color: $base-danger !default;

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

@@ -137,6 +137,14 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+@include chat-suggestions(
+  $chat-suggestions-padding,
+  $chat-suggestions-button-border-radius,
+  $chat-suggestions-border-width,
+  $chat-suggestions-button-max-width,
+  $chat-suggestions-gap,
+  $chat-suggestions-box-shadow,
+);
 
 .dx-chat-file {
   @include dx-base-typography();

package/data/scss/widgets/material/chat/_sizes.scss

@@ -2,6 +2,7 @@
 @use "../sizes" as *;
 @use "../common/sizes" as *;
 @use "../typography/sizes" as *;
+@use "../button/colors" as *;
 
 // adduse
 
@@ -29,11 +30,18 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-information-font-size: 12px !default;
 $chat-information-icon-size: 12px !default;
 $chat-information-edited-gap: 2px !default;
+
 $chat-alerts-padding-block: null !default;
 $chat-alerts-padding-inline: 8px !default;
 $chat-alerts-row-gap: null !default;
 $chat-alert-padding-block: null !default;
 
+$chat-suggestions-padding: null !default;
+$chat-suggestions-border-width: $material-base-border-width !default;
+$chat-suggestions-button-border-radius: $button-border-radius !default;
+$chat-suggestions-button-max-width: 200px !default;
+$chat-suggestions-gap: 12px !default;
+
 $chat-message-editing-preview-caption-font-size: $material-xs-font-size !default;
 $chat-message-editing-preview-content-row-gap: null !default;
 $chat-message-editing-preview-content-padding-inline: null !default;
@@ -93,6 +101,8 @@ $chat-bubble-gap: 8px !default;
   $chat-alerts-row-gap: 4px !default;
   $chat-alert-padding-block: 6px !default;
 
+  $chat-suggestions-padding: 20px !default;
+
   $chat-message-editing-preview-content-padding-inline: 12px !default;
   $chat-message-editing-preview-content-row-gap: 4px !default;
 
@@ -132,6 +142,8 @@ $chat-bubble-gap: 8px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 5px !default;
 
+  $chat-suggestions-padding: 16px !default;
+
   $chat-message-editing-preview-content-padding-inline: 8px !default;
   $chat-message-editing-preview-content-row-gap: 2px !default;
 

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

@@ -8,5 +8,5 @@ $checkbox-border-color: color.change($base-text-color, $alpha: 0.54) !default;
 $checkbox-checked-color: $base-element-bg !default;
 $checkbox-indeterminate-bg: $base-accent !default;
 $checkbox-bg: $base-accent !default;
-$checkbox-hover-border-color: darken($base-accent, 12%) !default;
+$checkbox-hover-border-color: color.adjust($base-accent, $lightness: -12%, $space: hsl) !default;
 $checkbox-invalid-focused-border-color: $base-invalid-color !default;

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

@@ -19,7 +19,15 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 
   &.dx-state-readonly,
   &.dx-state-disabled {
-    border-color: color.change($checkbox-border-color, $alpha: 0.26);
+    opacity: 1;
+
+    .dx-checkbox-icon {
+      border-color: $base-disabled-color;
+    }
+
+    .dx-checkbox-text {
+      color: $base-disabled-color;
+    }
   }
 
   &.dx-state-focused,
@@ -43,7 +51,7 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     &.dx-state-readonly,
     &.dx-state-disabled {
       .dx-checkbox-icon {
-        background-color: color.change($checkbox-border-color, $alpha: 0.26);
+        background-color: $base-disabled-color;
       }
     }
   }

package/data/scss/widgets/material/color.scss

@@ -4,19 +4,19 @@
 @function difference($minuend, $subtrahend) {
   @return color.adjust(
         $minuend,
-        $red: - (color.red($subtrahend)),
-        $green: - (color.green($subtrahend)),
-        $blue: - (color.blue($subtrahend)));
+        $red: - (color.channel($subtrahend, "red", $space: rgb)),
+        $green: - (color.channel($subtrahend, "green", $space: rgb)),
+        $blue: - (color.channel($subtrahend, "blue", $space: rgb)));
 }
 
 @function screen($color1, $color2) {
-  $r1: math.div(color.red($color1), 255);
-  $g1: math.div(color.green($color1), 255);
-  $b1: math.div(color.blue($color1), 255);
+  $r1: math.div(color.channel($color1, "red", $space: rgb), 255);
+  $g1: math.div(color.channel($color1, "green", $space: rgb), 255);
+  $b1: math.div(color.channel($color1, "blue", $space: rgb), 255);
 
-  $r2: math.div(color.red($color2), 255);
-  $g2: math.div(color.green($color2), 255);
-  $b2: math.div(color.blue($color2), 255);
+  $r2: math.div(color.channel($color2, "red", $space: rgb), 255);
+  $g2: math.div(color.channel($color2, "green", $space: rgb), 255);
+  $b2: math.div(color.channel($color2, "blue", $space: rgb), 255);
 
   @return color.change(
         $color1,
@@ -24,3 +24,13 @@
         $green: ($g1 + $g2 - $g1 * $g2) * 255,
         $blue: ($b1 + $b2 - $b1 * $b2) * 255);
 }
+
+@function adjust-if-not-achromatic($color, $hue, $saturation, $lightness) {
+  $out: color.adjust($color, $saturation: $saturation, $lightness: $lightness, $space: hsl);
+
+  @if not color.is-powerless($out, "hue", $space: hsl) {
+    $out: color.adjust($out, $hue: $hue, $space: hsl);
+  }
+
+  @return $out;
+}

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

@@ -18,7 +18,6 @@
 .dx-context-menu {
   .dx-menu-item {
     font-size: $material-context-menu-font-size;
-    color: $base-text-color;
 
     .dx-menu-item-content {
       display: flex;

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

@@ -107,6 +107,7 @@
 .dx-row.dx-datagrid-group-footer {
   &.dx-column-lines {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 
 }

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

@@ -3,4 +3,4 @@
 @use "../colors" as *;
 
 // adduse
-$timeview-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.2) !default;
+$timeview-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default;

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

@@ -34,10 +34,6 @@
       width: auto;
     }
   }
-
-  > .dx-overlay-content:first-child {
-    overflow: visible;
-  }
 }
 
 .dx-datebox-datetime-time-side {

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

@@ -8,10 +8,10 @@
 
 $diagram-border-color: $base-border-color !default;
 $diagram-toolbar-border-color: $base-border-color !default;
-$diagram-normal-format-active-bg: darken($button-normal-bg, 10%) !default;
-$diagram-default-format-active-bg: darken($button-default-bg, 10%) !default;
-$diagram-danger-format-active-bg: darken($button-danger-bg, 10%) !default;
-$diagram-success-format-active-bg: darken($button-success-bg, 10%) !default;
+$diagram-normal-format-active-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
+$diagram-default-format-active-bg: color.adjust($button-default-bg, $lightness: -10%, $space: hsl) !default;
+$diagram-danger-format-active-bg: color.adjust($button-danger-bg, $lightness: -10%, $space: hsl) !default;
+$diagram-success-format-active-bg: color.adjust($button-success-bg, $lightness: -10%, $space: hsl) !default;
 $diagram-image-icon-base-color: null !default;
 $diagram-image-icon-accent-color: null !default;
 $diagram-toolbox-shape-text-opacity: null !default;

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

@@ -28,7 +28,7 @@ $diagram-toolbox-title-size: 18px;
 
   // stylelint-disable selector-class-pattern
   .dxdi-control .dxdi-canvas {
-    background-color: darken($overlay-content-bg, 15%);
+    background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl);
 
     .selection-mark,
     .item-selection-rect,
@@ -134,7 +134,8 @@ $diagram-toolbox-title-size: 18px;
   // stylelint-enable selector-class-pattern
 
   .dx-diagram-toolbar-wrapper {
-    border-bottom: 1px solid $diagram-toolbar-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $diagram-toolbar-border-color;
   }
 
 
@@ -233,7 +234,8 @@ $diagram-toolbox-title-size: 18px;
   }
 
   .dx-diagram-toolbox-input-container {
-    border-bottom: 1px solid $accordion-item-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $accordion-item-border-color;
   }
 
   .dx-diagram-toolbox-input {
@@ -286,7 +288,8 @@ $diagram-toolbox-title-size: 18px;
       padding-top: $diagram-toolbox-mobile-padding;
 
       .dx-diagram-toolbox-input-container {
-        border-top: 1px solid $accordion-item-border-color;
+        border-top: 1px solid;
+        border-top-color: $accordion-item-border-color;
       }
     }
   }
@@ -299,7 +302,8 @@ $diagram-toolbox-title-size: 18px;
     .dx-accordion-item {
       border-left: none;
       border-right: none;
-      border-bottom: 1px solid $accordion-item-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $accordion-item-border-color;
       border-top: none;
       box-shadow: none;
     }

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

@@ -18,6 +18,12 @@
   $material-dropdownbutton-action-horizontal-padding,
 );
 
+.dx-dropdownbutton {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
 .dx-dropdownbutton-popup-wrapper {
   @include dx-dropdownlist-list-appearance();
 }