devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -1,4 +1,5 @@
 @use "../colors" as *;
+@use "../color" as extcolor;
 @use "sass:color";
 
 // adduse
@@ -9,11 +10,11 @@ $informer-info-color: $base-text-color !default;
 $informer-info-background-color: null !default;
 
 @if $mode == "light" {
-  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, 1), 24.92), 38.24);
-  $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -240), 100.00), 48.63);
+  $informer-error-background-color: color.adjust($base-danger, $hue: 1deg, $saturation: -24.92%, $space: hsl, $lightness: 38.24%);
+  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -240deg, $saturation: -100.00%, $lightness: 48.63%);
 }
 
 @if $mode == "dark" {
-  $informer-error-background-color: darken(desaturate(adjust-hue($base-danger, 1), 41.80), 53.92);
-  $informer-info-background-color: darken(saturate(adjust-hue($base-text-color, 240), 6.04), 70.78);
+  $informer-error-background-color: color.adjust($base-danger, $hue: 1deg, $saturation: -41.80%, $space: hsl, $lightness: -53.92%);
+  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: 240deg, $saturation: 6.04%, $lightness: -70.78%);
 }

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

@@ -34,7 +34,7 @@ $list-menu-button-default-bg: $button-default-bg !default;
 $list-menu-button-delete-bg: $base-danger !default;
 $list-button-delete-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default;
 $list-item-ghost-bg: $base-bg !default;
-$list-item-ghost-color: lighten($base-text-color, 38.5%) !default;
+$list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
 $list-item-ghost-border-color: $base-accent !default;
 $list-item-ghost-shadow-color: $base-shadow-color !default;
 $list-icon-color: $base-icon-color !default;
@@ -44,14 +44,14 @@ $list-item-chevron-icon-color: $base-spin-icon-color !default;
   $list-item-selected-bg: color.change(#000, $alpha: 0.12) !default;
   $list-item-selected-hover-bg: color.change(#000, $alpha: 0.14) !default;
   $list-item-focused-selected-bg: color.change(#000, $alpha: 0.18) !default;
-  $list-item-active-bg: darken($base-bg, 20%) !default;
+  $list-item-active-bg: color.adjust($base-bg, $lightness: -20%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
   $list-item-selected-bg: color.change(#6e6e80, $alpha: 0.5) !default;
   $list-item-selected-hover-bg: color.change(#6e6e80, $alpha: 0.35) !default;
   $list-item-focused-selected-bg: color.change(#6e6e80, $alpha: 0.4) !default;
-  $list-item-active-bg: lighten($base-bg, 20%) !default;
+  $list-item-active-bg: color.adjust($base-bg, $lightness: 20%, $space: hsl) !default;
 }
 
 $never-used: collector((

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

@@ -17,8 +17,8 @@
 
 $material-list-item-border-width: 1px;
 $material-list-border-width: 1px;
-$material-list-border: $material-list-border-width solid $list-border-color;
-$material-list-item-border: $material-list-item-border-width solid $list-border-color;
+$material-list-border: $material-list-border-width solid;
+$material-list-item-border: $material-list-item-border-width solid;
 $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding - 2px;
 
 .dx-list-item-chevron {
@@ -178,6 +178,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
       &:not(:last-child) {
         padding-bottom: $material-list-vertical-padding;
         border-bottom: $material-list-item-border;
+        border-bottom-color: $list-border-color;
       }
     }
 
@@ -292,8 +293,10 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
         &.dx-state-hover {
           color: $list-item-ghost-color;
           background: $list-item-ghost-bg;
-          border-top: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5);
-          border-bottom: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5);
+          border-top: 1px solid;
+          border-top-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
+          border-bottom: 1px solid;
+          border-bottom-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
           box-shadow: 0 0 1px color.change($list-item-ghost-shadow-color, $alpha: 0.1), 0 1px 3px color.change($list-item-ghost-shadow-color, $alpha: 0.2);
         }
       }
@@ -317,7 +320,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
 
   .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
     padding: math.div($material-list-item-vertical-padding, 2) + 1px $item-horizontal-padding math.div($material-list-item-vertical-padding, 2);
-    color: color.change($list-normal-color, $alpha: 0.54);
+    color: color.change($list-normal-color, $alpha: 0.6);
     font-size: 12px;
   }
 
@@ -342,6 +345,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
 
   .dx-list-border-visible {
     border: $material-list-border;
+    border-color: $list-border-color;
   }
 
   .dx-list-item-before-bag {
@@ -450,7 +454,8 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
     @include dx-icon(trash);
 
     color: $base-inverted-text-color;
-    border: 1px solid $list-button-delete-shadow-color;
+    border: 1px solid;
+    border-color: $list-button-delete-shadow-color;
     border-right-color: transparent;
     background-color: $list-menu-button-delete-bg;
     font-size: $material-base-icon-size;
@@ -494,7 +499,8 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
 
   .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: 0;
     box-shadow: 0 3px 10px $list-holdmenu-shadow-color;
   }

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

@@ -12,14 +12,14 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 
 @if $mode == "light" {
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, 4), 6.73), 25.88) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 4), 6.87), 34.71) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 4deg, $saturation: -6.73%, $lightness: 25.88%, $space: hsl,) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 4deg, $saturation: -6.87%, $lightness: 34.71%, $space: hsl,) !default;
 }
 
 @else if $mode == "dark" {
-  $load-indicator-animation-sparkle-bg-color1: lighten($base-accent, 19.22) !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, 2), 58.44), 1.18) !default;
-  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 3), 64.56), 7.45) !default;
+  $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $lightness: 19.22%, $space: hsl) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 2deg, $saturation: -58.44%, $lightness: 1.18%, $space: hsl) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: -64.56%, $lightness: -7.45%, $space: hsl) !default;
 }
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,

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

@@ -10,7 +10,8 @@
 
 
 .dx-loadpanel-content {
-  border: 1px solid $loadpanel-border-color;
+  border: 1px solid;
+  border-color: $loadpanel-border-color;
   background: $loadpanel-content-bg;
   padding: 13px;
   border-radius: 50%;

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

@@ -9,7 +9,7 @@ $menu-item-selected-bg: getCustomVar(("$menu-item-selected-bg")) !default;
 
 $menu-popup-bg: $base-bg !default;
 $menu-item-hover-bg: $base-hover-bg !default;
-$menu-color: lighten($base-text-color, 46%) !default;
+$menu-color: $base-text-color !default;
 $menu-item-expanded-color: $menu-color !default;
 $menu-item-selected-bg: null !default;
 $menu-popup-border-color: $base-border-color !default;
@@ -20,13 +20,13 @@ $menu-item-focused-selected-bg: null !default;
 $menu-container-shadow-color: null !default;
 
 @if $mode == "light" {
-  $menu-item-selected-bg: lighten($base-text-color, 88%) !default;
+  $menu-item-selected-bg: color.adjust($base-text-color, $lightness: 88%, $space: hsl) !default;
   $menu-item-focused-selected-bg: color.change(#000, $alpha: 0.14) !default;
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
 }
 
 @if $mode == "dark" {
-  $menu-item-selected-bg: lighten($base-bg, 8%) !default;
+  $menu-item-selected-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $menu-item-focused-selected-bg: color.change(#fff, $alpha: 0.14) !default;
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
 }

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

@@ -83,7 +83,8 @@ $material-menu-font-size: $material-base-font-size;
   background-color: $menu-popup-bg;
 
   .dx-treeview {
-    border: 1px solid $menu-popup-border-color;
+    border: 1px solid;
+    border-color: $menu-popup-border-color;
     border-radius: $base-border-radius;
 
     &,
@@ -109,6 +110,7 @@ $material-menu-font-size: $material-base-font-size;
   }
 
   .dx-treeview-node-container:first-child > .dx-treeview-node {
-    border-bottom: 1px solid $menu-popup-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $menu-popup-border-color
   }
 }

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

@@ -4,3 +4,4 @@
 
 // adduse
 
+$menu-item-disabled-color: $base-disabled-color !default;

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

@@ -22,7 +22,7 @@ $material-menu-arrow-image-size: 7px;
   }
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    color: $menu-item-disabled-color;
   }
 
   &.dx-state-hover {

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

@@ -11,13 +11,13 @@ $pivotgrid-field-area-text-color: getCustomVar(("$pivotgrid-field-area-text-colo
 
 $pivotgrid-area-background: $base-bg !default;
 $pivotgrid-border-color: $base-border-color !default;
-$pivotgrid-area-color: color.change($base-text-color, $alpha: 0.54) !default;
+$pivotgrid-area-color: $base-text-color !default;
 $pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default;
 $pivotgrid-field-area-box-background-color: null !default;
 $pivotgrid-data-area-color: $base-text-color !default;
-$pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 13.3%), $alpha: 0.2) !default;
+$pivotgrid-totalcolor: color.change(color.adjust($pivotgrid-area-background, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default;
 $pivotgrid-grandtotalcolor: $base-hover-bg !default;
-$pivotgrid-field-area-text-color: color.change(darken($pivotgrid-area-color, 26.2%), $alpha: 0.3) !default;
+$pivotgrid-field-area-text-color: $base-label-color !default;
 $pivotgrid-accent-color: $base-accent !default;
 $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
 $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
@@ -26,11 +26,11 @@ $pivotgrid-position-indicator-color: gray !default;
 $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
 
 @if $mode == "light" {
-  $pivotgrid-field-area-box-background-color: darken($base-bg, 12%) !default;
+  $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $pivotgrid-field-area-box-background-color: lighten($base-bg, 12%) !default;
+  $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default;
 }
 $never-used: collector((
 "$pivotgrid-area-color": $pivotgrid-area-color,

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

@@ -35,7 +35,8 @@ $material-popup-toolbar-label-font-size: $material-m-font-size;
 .dx-popup-title {
   position: relative;
   min-height: 28px;
-  border-bottom: 1px solid $popup-title-border-color;
+  border-bottom: 1px solid;
+  border-bottom-color: $popup-title-border-color;
   background: $popup-title-bg;
   color: $popup-title-color;
 

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

@@ -14,9 +14,9 @@ $scheduler-current-time-cell-color: getCustomVar(("$scheduler-current-time-cell-
 
 // adduse
 $scheduler-base-border-color: $base-border-color !default;
-$scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default;
+$scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default;
 $scheduler-cell-hover-bg: $base-hover-bg !default;
-$scheduler-group-separator-border-color: darken($base-border-color, 13%) !default;
+$scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -13%, $space: hsl) !default;
 $scheduler-accent-border-color: $base-border-color !default;
 $scheduler-appointment-text-color: $base-inverted-text-color !default;
 $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
@@ -25,22 +25,23 @@ $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3
 $scheduler-appointment-active-color: $scheduler-appointment-start-color;
 $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default;
 $scheduler-first-month-border-color: $base-border-color !default;
-$scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
-$scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.54) !default;
+$scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
+$scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.6) !default;
 $scheduler-workspace-background-color: $base-bg !default;
 $scheduler-workspace-accent-color: $base-accent !default;
 $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
 $scheduler-form-icon-color: $base-icon-color !default;
-$scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
-$scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;
+$scheduler-workspace-month-text-color: $base-text-color !default;
+$scheduler-workspace-other-month-text-color: color.change($base-text-color, $alpha: 0.6) !default;
+$scheduler-dropdown-appointment-date-color: $base-text-color !default;
 $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
 $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
 $scheduler-group-header-color: color.change($base-text-color, $alpha: 0.87) !default;
 $scheduler-header-bg: $base-bg !default;
 $scheduler-alldaypanel-bg: $base-element-bg !default;
-$scheduler-other-month-cell-opacity: 0.5 !default;
+$scheduler-other-month-cell-opacity: 1 !default;
 $scheduler-fill-focused-appointment: false !default;
 $scheduler-is-shadow-color-for-focused-state: true !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;

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

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../list/colors" as *;
 @use "../radioGroup/sizes" as *;
 @use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
@@ -12,6 +13,7 @@
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $list-item-hover-bg,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-start-color: $scheduler-appointment-start-color,
   $scheduler-base-border-color: $scheduler-base-border-color,
@@ -62,7 +64,7 @@ $material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-wor
 
 $material-scheduler-month-date-text-size: 14px;
 
-$scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color;
+$scheduler-first-of-month-border: 1px solid;
 
 $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
@@ -115,6 +117,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   height: $material-scheduler-all-day-table-cell-height;
   font-size: $material-scheduler-all-day-title-font-size;
   border-bottom: baseScheduler.$scheduler-base-border;
+  border-bottom-color: $scheduler-base-border-color;
 
   .dx-scheduler-small & {
     font-size: $material-scheduler-all-day-title-font-size * 0.8;
@@ -312,6 +315,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
   &.dx-scheduler-header-panel-week-cell {
     border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: $scheduler-base-border-color;
     flex-flow: column;
     justify-content: flex-end;
   }
@@ -368,11 +372,16 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
     .dx-scheduler-time-panel,
     .dx-scheduler-header-panel-empty-cell {
       border-right: baseScheduler.$scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
     }
   }
 }
 
 .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: $scheduler-workspace-other-month-text-color;
+  }
+
   .dx-scheduler-appointment-content {
     padding-top: 3px;
     font-size: $material-scheduler-appointment-month-text-size;
@@ -380,7 +389,9 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
   .dx-scheduler-date-table-first-of-month {
     border-left: $scheduler-first-of-month-border;
+    border-left-color: $scheduler-first-month-border-color;
     border-top: $scheduler-first-of-month-border;
+    border-top-color: $scheduler-first-month-border-color;
   }
 
   .dx-scheduler-header-panel {
@@ -519,7 +530,8 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
       font-size: $material-scheduler-group-header-font-size;
       color: $scheduler-group-header-color;
       text-align: left;
-      border-bottom: 1px solid $scheduler-base-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $scheduler-base-border-color;
 
       .dx-scheduler-group-header-content {
         padding-left: $material-scheduler-header-panel-margin;
@@ -560,6 +572,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
   .dx-scheduler-all-day-table-cell {
     border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: $scheduler-base-border-color;
   }
 }
 
@@ -574,6 +587,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   &.dx-scheduler-work-space-grouped {
     .dx-scheduler-all-day-title {
       border-top: baseScheduler.$scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
 
     &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) {
@@ -727,15 +741,18 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
 .dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th,
 .dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell {
-  border-right: 1px solid $scheduler-group-separator-border-color;
+  border-right: 1px solid;
+  border-right-color: $scheduler-group-separator-border-color;
 
   &:last-child {
     border-right: none;
   }
 
   .dx-rtl & {
-    border-left: 1px solid $scheduler-group-separator-border-color;
+    border-left: 1px solid;
+    border-left-color: $scheduler-group-separator-border-color;
     border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
 
     &:last-child {
       border-left: none;
@@ -751,21 +768,19 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   .dx-rtl .dx-scheduler-timeline & {
     border-left: $material-scheduler-appointment-transparent-left-border;
     border-right: $material-scheduler-appointment-transparent-right-border;
+    box-shadow: none;
+    border-radius: 2px;
 
     &.dx-state-focused {
       color: $scheduler-appointment-focus-color;
     }
 
-    box-shadow: none;
-
     &.dx-state-active,
     &.dx-resizable-resizing,
     &.dx-state-hover,
     &.dx-state-hover.dx-resizable {
       box-shadow: none;
     }
-
-    border-radius: 2px;
   }
 }
 
@@ -785,6 +800,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   &.dx-scheduler-work-space-month {
     .dx-scheduler-date-table-scrollable {
       border-top: baseScheduler.$scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
   }
 }
@@ -889,6 +905,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
       .dx-scheduler-time-panel,
       .dx-scheduler-header-panel-empty-cell {
         border-left: baseScheduler.$scheduler-base-border;
+        border-left-color: $scheduler-base-border-color;
         border-right: none;
       }
     }
@@ -908,7 +925,8 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
       .dx-list-item {
         margin-bottom: 0;
         margin-top: 0;
-        border-bottom: 1px solid $base-border-color;
+        border-bottom: 1px solid;
+        border-bottom-color: $base-border-color;
 
         &:last-of-type {
           border-bottom-left-radius: $tooltip-border-radius;

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

@@ -11,11 +11,11 @@ $scrollable-scroll-bg: null !default;
 $scrollable-scrollbar-bg: transparent !default;
 
 @if $mode == "light" {
-  $scrollable-scroll-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.7) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default;
 }
 
 @if $mode == "dark" {
-  $scrollable-scroll-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.7) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default;
 }
 
 $never-used: collector((

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

@@ -13,15 +13,7 @@ $material-slider-bg: $base-accent !default;
 $material-slider-active: color.change($base-accent, $alpha: 0.24) !default;
 $material-slider-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
 $material-slider-bar-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
-$material-slider-tooltip-color: null !default;
-
-@if $mode == "light" {
-  $material-slider-tooltip-color: $base-inverted-text-color !default;
-}
-
-@if $mode == "dark" {
-  $material-slider-tooltip-color: $base-text-color !default;
-}
+$material-slider-tooltip-color: $base-inverted-text-color !default;
 $never-used: collector((
 "$material-slider-bar-bg": $material-slider-bar-bg,
 "$material-slider-bg": $material-slider-bg,

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

@@ -73,7 +73,6 @@ $material-slider-handle-inner-disabled-size: 2px;
 
     .dx-overlay-content {
       border: 1px solid transparent;
-      opacity: 0.6;
 
       .dx-popup-content {
         line-height: normal;
@@ -147,7 +146,8 @@ $material-slider-handle-inner-disabled-size: 2px;
     margin-top: -5px;
     margin-right: -5px;
     border-radius: 50%;
-    border: 2px solid $base-bg;
+    border: 2px solid;
+    border-color: $base-bg;
 
     &::after {
       margin-top: math.div(-$material-slider-handle-inner-disabled-size, 2) - $material-slider-handle-inner-border-width - 2px;

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

@@ -17,13 +17,13 @@ $speed-dial-action-shading-color: $overlay-shader-bg !default;
 
 @if $mode == "light" {
   $speed-dial-action-bg: $base-bg !default;
-  $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: darken($speed-dial-action-bg, 36%) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -36%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
   $speed-dial-action-bg: color.change($base-bg, $alpha: 1) !default;
-  $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 36%) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 8%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 36%, $space: hsl) !default;
 }
 

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

@@ -48,23 +48,23 @@ $stepper-connector-bg: $base-border-color !default;
 $stepper-connector-value-bg: $base-label-color !default;
 
 @if $mode == 'light' {
-  $stepper-step-base-bg: darken($base-bg, 38%) !default;
-  $stepper-step-base-hover-bg: darken($base-bg, 42%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: -38%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -42%, $space: hsl) !default;
 
-  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 8.5%) !default;
-  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 8.5%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -8.5%, $space: hsl) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -8.5%, $space: hsl) !default;
 
-  $stepper-step-disabled-bg: darken($base-bg, 12%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default;
 }
 
 @if $mode == 'dark' {
-  $stepper-step-base-bg: lighten(desaturate($base-bg, 5.59), 29.22%) !default;
-  $stepper-step-base-hover-bg: lighten(desaturate($base-bg, 5.84), 32.16) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $saturation: -5.59%, $lightness: 29.22%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $saturation: -5.84%, $lightness: 32.16%, $space: hsl) !default;
 
-  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 8.5%) !default;
-  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 8.5%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 8.5%, $space: hsl) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 8.5%, $space: hsl) !default;
 
-  $stepper-step-disabled-bg: lighten(desaturate($base-bg, 3.02), 9.22) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $saturation: -3.02%, $lightness: 9.22%, $space: hsl) !default;
 }
 $stepper-step-base-border-color: $stepper-step-base-bg !default;
 $stepper-step-base-hover-border-color: $stepper-step-base-hover-bg !default;

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

@@ -18,15 +18,15 @@ $switch-invalid-handle-bg: $base-invalid-color !default;
 $switch-invalid-container-bg: color.change($base-invalid-color, $alpha: 0.5) !default;
 
 @if $mode == "light" {
-  $switch-bg: darken($base-element-bg, 38%) !default;
-  $switch-handle-off-bg: darken($base-element-bg, 2%) !default;
-  $switch-handle-disabled-bg: darken($base-element-bg, 26%) !default;
+  $switch-bg: color.adjust($base-element-bg, $lightness: -38%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($base-element-bg, $lightness: -2%, $space: hsl) !default;
+  $switch-handle-disabled-bg: color.adjust($base-element-bg, $lightness: -26%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $switch-bg: lighten($base-element-bg, 38%) !default;
-  $switch-handle-off-bg: lighten($base-element-bg, 18.5%) !default;
-  $switch-handle-disabled-bg: lighten($base-element-bg, 26%) !default;
+  $switch-bg: color.adjust($base-element-bg, $lightness: 38%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($base-element-bg, $lightness: 18.5%, $space: hsl) !default;
+  $switch-handle-disabled-bg: color.adjust($base-element-bg, $lightness: 26%, $space: hsl) !default;
 }
 
 $never-used: collector((

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

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -29,9 +30,10 @@
 .dx-tabpanel-tabs-position-top {
   > .dx-tabpanel-tabs {
     .dx-tabs {
-      border-bottom: 1px solid $base-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $base-border-color;
 
-      @at-root #{selector-append(".dx-empty-collection", &)} {
+      @at-root #{selector.append(".dx-empty-collection", &)} {
         border-bottom: none;
       }
     }
@@ -41,9 +43,10 @@
 .dx-tabpanel-tabs-position-bottom {
   > .dx-tabpanel-tabs {
     .dx-tabs {
-      border-top: 1px solid $base-border-color;
+      border-top: 1px solid;
+      border-top-color: $base-border-color;
 
-      @at-root #{selector-append(".dx-empty-collection", &)} {
+      @at-root #{selector.append(".dx-empty-collection", &)} {
         border-top: none;
       }
     }
@@ -53,9 +56,10 @@
 .dx-tabpanel-tabs-position-left {
   > .dx-tabpanel-tabs {
     .dx-tabs {
-      border-right: 1px solid $base-border-color;
+      border-right: 1px solid;
+      border-right-color: $base-border-color;
 
-      @at-root #{selector-append(".dx-empty-collection", &)} {
+      @at-root #{selector.append(".dx-empty-collection", &)} {
         border-right: none;
       }
     }
@@ -65,9 +69,10 @@
 .dx-tabpanel-tabs-position-right {
   > .dx-tabpanel-tabs {
     .dx-tabs {
-      border-left: 1px solid $base-border-color;
+      border-left: 1px solid;
+      border-left-color: $base-border-color;
 
-      @at-root #{selector-append(".dx-empty-collection", &)} {
+      @at-root #{selector.append(".dx-empty-collection", &)} {
         border-left: none;
       }
     }