devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -64,26 +64,26 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "carmine" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !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, 20%) !default;
-  $scheduler-accent-border-color: darken($base-border-color, 10%) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+  $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: -10%, $space: hsl) !default;
   $scheduler-appointment-text-color: $base-inverted-text-color !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-appointment-base-color: $base-accent !default;
   $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-  $scheduler-first-month-border-color: darken($base-border-color, 20%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
-  $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-header-color !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !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: $scheduler-panel-text-color !default;
-  $scheduler-header-bg: darken($base-bg, 4%) !default;
+  $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
   $scheduler-tab-selected-bg: $base-bg !default;
   $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
@@ -114,7 +114,7 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-appointment-focus-color: extcolor.difference(#fff, $base-text-color) !default;
   $scheduler-appointment-start-color: $base-inverted-bg !default;
-  $scheduler-workspace-focused-cell-color: lighten($base-accent, 5%) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 5%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-text-color !default;
   $scheduler-dropdown-appointment-date-color: $base-text-color !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
@@ -141,22 +141,22 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "dark" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !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: lighten($base-border-color, 20%) !default;
-  $scheduler-accent-border-color: lighten($base-border-color, 9.8%) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
+  $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: 9.8%, $space: hsl) !default;
   $scheduler-appointment-text-color: $base-inverted-text-color !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-appointment-base-color: $base-accent !default;
   $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-  $scheduler-first-month-border-color: lighten($base-border-color, 20%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
-  $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-text-color !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !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: $scheduler-panel-text-color !default;
@@ -180,24 +180,24 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "darkmoon" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default;
-  $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default;
-  $scheduler-cell-hover-bg: lighten($base-bg, 4%) !default;
-  $scheduler-group-separator-border-color: lighten($base-border-color, 20%) !default;
-  $scheduler-accent-border-color: lighten($base-border-color, 9.8%) !default;
+  $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default;
+  $scheduler-cell-hover-bg: color.adjust($base-bg, $lightness: 4%, $space: hsl) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
+  $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: 9.8%, $space: hsl) !default;
   $scheduler-appointment-text-color: #fff !default;
   $scheduler-appointment-base-color: #2cc9b4 !default;
-  $scheduler-appointment-start-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default;
-  $scheduler-first-month-border-color: lighten($base-border-color, 20%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
+  $scheduler-appointment-start-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
   $scheduler-appointment-base-color: #2cc9b4 !default;
   $scheduler-appointment-text-color: #fff !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.2) !default;
   $scheduler-panel-text-color: $base-text-color !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: #fff !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !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: $scheduler-panel-text-color !default;
@@ -221,22 +221,22 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "darkviolet" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !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: lighten($base-border-color, 20%) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
   $scheduler-accent-border-color: #414152 !default;
   $scheduler-appointment-text-color: $base-icon-color !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-appointment-base-color: $base-select-bg !default;
   $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-  $scheduler-first-month-border-color: lighten($base-border-color, 20%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
-  $scheduler-workspace-focused-cell-color: darken($base-select-bg, 12%) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-select-bg, $lightness: -12%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-header-color !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: $base-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !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: $scheduler-panel-text-color !default;
@@ -260,22 +260,22 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "greenmist" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default;
-  $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default;
-  $scheduler-cell-hover-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
-  $scheduler-group-separator-border-color: darken($base-border-color, 20%) !default;
+  $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default;
+  $scheduler-cell-hover-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $scheduler-accent-border-color: #b5c9c8 !default;
   $scheduler-appointment-text-color: $base-inverted-text-color !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-appointment-base-color: $base-accent !default;
   $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $scheduler-first-month-border-color: darken($base-border-color, 20%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
-  $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default;
-  $scheduler-panel-text-color: lighten($base-text-color, 38.5%) !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default;
+  $scheduler-panel-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-  $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-workspace-month-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
   $scheduler-time-panel-background-color: $scheduler-workspace-background-color !default;
   $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -300,23 +300,23 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "light" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !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, 20%) !default;
-  $scheduler-accent-border-color: darken($base-border-color, 10%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
-  $scheduler-header-bg: darken($base-bg, 4%) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+  $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: -10%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
+  $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
   $scheduler-appointment-text-color: $base-inverted-text-color !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-appointment-base-color: $base-accent !default;
   $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-  $scheduler-first-month-border-color: darken($base-border-color, 20%) !default;
-  $scheduler-workspace-focused-cell-color: lighten($base-accent, 45%) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 45%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-text-color !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !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: $scheduler-panel-text-color !default;
@@ -339,22 +339,22 @@ $agenda-appointment-text-color: null !default;
 
 @if $color == "softblue" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !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-webwidget-hover-background !default;
-  $scheduler-group-separator-border-color: darken($base-border-color, 20%) !default;
-  $scheduler-accent-border-color: darken($base-border-color, 10%) !default;
-  $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default;
+  $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+  $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: -10%, $space: hsl) !default;
+  $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
   $scheduler-appointment-text-color: $base-inverted-text-color !default;
   $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
   $scheduler-appointment-base-color: $base-accent !default;
   $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-  $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default;
-  $scheduler-first-month-border-color: darken($base-border-color, 20%) !default;
+  $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default;
+  $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-text-color !default;
-  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
+  $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
-  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
+  $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !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: $scheduler-panel-text-color !default;

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

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../list/colors" as *;
 @use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
@@ -11,6 +12,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,
@@ -64,7 +66,7 @@ $generic-scheduler-current-time-cell-border-size: 2px;
 
 $generic-scheduler-month-date-text-size: $generic-h5-font-size;
 
-$scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color;
+$scheduler-first-of-month-border: 1px solid;
 
 $generic-scheduler-agenda-time-cell-padding: 10px;
 $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-cell-padding 0 0 10px;
@@ -142,7 +144,9 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 
   .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-date-table-scrollable .dx-scrollable-content {
@@ -164,6 +168,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   .dx-scheduler-group-row {
     &:not(:first-child) {
       border-bottom: baseScheduler.$scheduler-base-border;
+      border-bottom-color: $scheduler-base-border-color;
 
       .dx-scheduler-group-header {
         color: $scheduler-panel-text-color;
@@ -190,6 +195,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   &.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-agenda {
@@ -315,15 +321,18 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 
 .dx-scheduler-work-space-grouped .dx-scheduler-group-row th,
 .dx-scheduler-work-space.dx-scheduler-work-space-grouped .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;
@@ -336,28 +345,35 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   .dx-scheduler-group-row th,
   .dx-scheduler-last-group-cell {
     border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
     border-left: baseScheduler.$scheduler-base-border;
+    border-left-color: $scheduler-base-border-color;
   }
 }
 
 .dx-scheduler-work-space-grouped.dx-scheduler-work-space-group-by-date {
   .dx-scheduler-group-row th {
     border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
     border-left: baseScheduler.$scheduler-base-border;
+    border-left-color: $scheduler-base-border-color;
   }
 
   .dx-scheduler-header-panel-cell,
   .dx-scheduler-group-header.dx-scheduler-last-group-cell,
   .dx-scheduler-date-table-cell.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;

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

@@ -14,10 +14,10 @@ $scrollable-scrollbar-bg: null !default;
 $scrollable-scrollbar-active-bg: null !default;
 
 @if $color == "carmine" {
-  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
-  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default;
+  $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
-  $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default;
+  $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.2) !default;
 }
 
 @if $color == "contrast" {
@@ -28,45 +28,45 @@ $scrollable-scrollbar-active-bg: null !default;
 }
 
 @if $color == "dark" {
-  $scrollable-scroll-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.7) !default;
-  $scrollable-scroll-active-bg: lighten($scrollable-bg, 25%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default;
+  $scrollable-scroll-active-bg: color.adjust($scrollable-bg, $lightness: 25%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
-  $scrollable-scrollbar-active-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.2) !default;
+  $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.2) !default;
 }
 
 @if $color == "darkmoon" {
-  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
-  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default;
+  $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
-  $scrollable-scrollbar-active-bg: color.change(lighten($base-bg, 25%), $alpha: 0.2) !default;
+  $scrollable-scrollbar-active-bg: color.change(color.adjust($base-bg, $lightness: 25%, $space: hsl), $alpha: 0.2) !default;
 }
 
 @if $color == "darkviolet" {
-  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
-  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default;
+  $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
   $scrollable-scrollbar-active-bg: color.change(#4d4d68, $alpha: 0.5) !default;
 }
 
 @if $color == "greenmist" {
-  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
-  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default;
+  $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
-  $scrollable-scrollbar-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.7) !default;
+  $scrollable-scrollbar-active-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.7) !default;
 }
 
 @if $color == "light" {
-  $scrollable-scroll-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.7) !default;
-  $scrollable-scroll-active-bg: darken($scrollable-bg, 25%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default;
+  $scrollable-scroll-active-bg: color.adjust($scrollable-bg, $lightness: -25%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
-  $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default;
+  $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.2) !default;
 }
 
 @if $color == "softblue" {
-  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
-  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
+  $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default;
+  $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $scrollable-scrollbar-bg: transparent !default;
-  $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default;
+  $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.2) !default;
 }
 
 $never-used: collector((

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

@@ -21,10 +21,10 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
 @if $color == "carmine" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -33,61 +33,61 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-active-bg: $base-inverted-bg !default;
   $slider-handle-hover-bg: $slider-range-bg !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
 @if $color == "dark" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: lighten($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: lighten($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: lighten($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: lighten($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: lighten($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: lighten($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "light" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
   $slider-handle-bg: $base-accent !default;
   $slider-handle-border-color: $base-bg !default;
-  $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default;
-  $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default;
+  $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
+  $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
   $slider-handle-focused-bg: $slider-handle-hover-bg !default;
-  $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default;
+  $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
 $never-used: collector((

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

@@ -19,21 +19,24 @@ $generic-slider-radius: 2px;
 
   .dx-state-active {
     &.dx-slider-handle {
-      border: 1px solid $slider-handle-border-color;
+      border: 1px solid;
+      border-color: $slider-handle-border-color;
       background: $slider-handle-active-bg;
     }
   }
 
   .dx-state-focused {
     &.dx-slider-handle:not(.dx-state-active) {
-      border: 1px solid $slider-handle-border-color;
+      border: 1px solid;
+      border-color: $slider-handle-border-color;
       background: $slider-handle-focused-bg;
     }
   }
 
   .dx-state-hover {
     &.dx-slider-handle:not(.dx-state-active) {
-      border: 1px solid $slider-handle-border-color;
+      border: 1px solid;
+      border-color: $slider-handle-border-color;
       background: $slider-handle-hover-bg;
     }
   }
@@ -56,7 +59,8 @@ $generic-slider-radius: 2px;
   box-sizing: content-box;
 
   &.dx-slider-range-visible {
-    border: 1px solid $slider-range-border-color;
+    border: 1px solid;
+    border-color: $slider-range-border-color;
     background: $slider-range-bg;
     border-radius: $generic-slider-radius;
   }
@@ -80,7 +84,8 @@ $generic-slider-radius: 2px;
   margin-inline-end: math.div(-$generic-slider-width, 2);
   width: $generic-slider-width;
   height: $generic-slider-height;
-  border: 1px solid $slider-handle-border-color;
+  border: 1px solid;
+  border-color: $slider-handle-border-color;
   background-color: $slider-handle-bg;
   border-radius: $slider-handle-border-radius;
   box-sizing: content-box;