devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -14,25 +14,25 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 
 @if $mode == "light" {
   @if $color == "blue" {
-    $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($load-indicator-segment-bg-color, 2.9), 2.2), 44.3) !default;
+    $load-indicator-inner-segment-border-color: color.adjust($load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $space: hsl, $lightness: 44.3%) !default;
     $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-    $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 2), 2.73), 27.25) !default;
-    $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, 3), 5.61), 38.43) !default;
+    $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 2deg, $saturation: 2.73%, $space: hsl, $lightness: 27.25%) !default;
+    $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: 5.61%, $space: hsl, $lightness: 38.43%) !default;
   }
 
   @if $color == "saas" {
-    $load-indicator-inner-segment-border-color: mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default;
-    $load-indicator-animation-sparkle-bg-color1: darken(desaturate(adjust-hue($base-accent, -15), 14.71), 26.47) !default;
-    $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, -12), 11.98), 0.78) !default;
-    $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -12), 9.09), 11.96) !default;
+    $load-indicator-inner-segment-border-color: color.mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default;
+    $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $hue: -15deg, $saturation: -14.71%, $space: hsl, $lightness: -26.47%) !default;
+    $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: -12deg, $saturation: -11.98%, $space: hsl, $lightness: 0.78%) !default;
+    $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: -12deg, $saturation: -9.09%, $space: hsl, $lightness: 11.96%) !default;
   }
 }
 
 @if $mode == "dark" {
   $load-indicator-inner-segment-border-color: $base-accent-selected !default;
-  $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 1.67), 5.29) !default;
-  $load-indicator-animation-sparkle-bg-color2: darken(desaturate(adjust-hue($base-accent, -2), 4.40), 21.96) !default;
-  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, -2), 8.58), 26.67) !default;
+  $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: -2deg, $saturation: -4.40%, $space: hsl, $lightness: -21.96%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: -2deg, $saturation: -8.58%, $space: hsl, $lightness: -26.67%) !default;
 }
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,

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

@@ -20,11 +20,11 @@ $menu-item-link-color: $base-link-color !default;
 $menu-item-focused-selected-bg: null !default;
 
 @if $mode == "light" {
-  $menu-item-focused-selected-bg: darken($base-bg, 9.8) !default;
+  $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: -9.8%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $menu-item-focused-selected-bg: lighten($base-bg, 18.04) !default;
+  $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default;
 }
 $never-used: collector((
 "$menu-color": $menu-color,

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

@@ -80,7 +80,8 @@
   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;
 
     &,
@@ -102,6 +103,7 @@
   }
 
   .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/fluent/pivotGrid/_colors.scss

@@ -18,7 +18,7 @@ $pivotgrid-field-area-box-font-weight: 400 !default;
 $pivotgrid-data-area-color: $base-text-color !default;
 $pivotgrid-totalcolor: $base-bg !default;
 $pivotgrid-grandtotalcolor: null !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;
@@ -29,7 +29,7 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
 @if $mode == "light" {
   @if $color == "blue"{
     $pivotgrid-grandtotalcolor: $base-hover-bg !default;
-    $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default;
+    $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default;
   }
 
   @if $color == "saas" {
@@ -39,7 +39,7 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
 }
 
 @if $mode == "dark" {
-  $pivotgrid-field-area-box-background-color: darken($base-bg, 12.16) !default;
+  $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default;
 }
 $never-used: collector((
 "$pivotgrid-area-color": $pivotgrid-area-color,

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

@@ -46,7 +46,8 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
   &.dx-drag {
     .dx-area-field.dx-area-box {
       background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9);
-      border: 1px solid $base-border-color-disabled;
+      border: 1px solid;
+      border-color: $base-border-color-disabled;
       box-shadow: $fluent-pivotgrid-drag-header-shadow;
     }
   }
@@ -55,7 +56,8 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
     color: $pivotgrid-field-area-box-text-color;
     background-color: $pivotgrid-field-area-box-background-color;
     border-radius: $area-field-border-radius;
-    border: 1px solid $base-border-color-disabled;
+    border: 1px solid;
+    border-color: $base-border-color-disabled;
     font-size: $fluent-pivotgrid-headers-font-size;
     font-weight: $pivotgrid-field-area-box-font-weight;
     line-height: 20px;

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

@@ -36,7 +36,8 @@ $fluent-popup-toolbar-label-font-size: $fluent-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/fluent/progressBar/_colors.scss

@@ -21,11 +21,11 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p
 $progressbar-label-color: $base-text-color !default;
 
 @if $mode == "light" {
-  $progressbar-bg: darken($base-typography-bg, 7.84) !default;
+  $progressbar-bg: color.adjust($base-typography-bg, $lightness: -7.84%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $progressbar-bg: lighten($base-typography-bg, 7.84) !default;
+  $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default;
 }
 $never-used: collector((
 "$progressbar-bg": $progressbar-bg,

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

@@ -17,7 +17,7 @@ $scheduler-current-time-cell-color: getCustomVar(("$scheduler-current-time-cell-
 $scheduler-base-border-color: $base-border-color !default;
 $scheduler-cell-active-bg: null !default;
 $scheduler-cell-hover-bg: null !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: null !default;
 $scheduler-appointment-focus-color: null !default;
@@ -26,21 +26,22 @@ $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3
 $scheduler-appointment-active-color: $button-default-outlined-active-bg;
 $scheduler-workspace-focused-cell-color: null !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: $base-label-color !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-workspace-month-text-color: $base-text-color !default;
+$scheduler-workspace-other-month-text-color: $base-label-color !default;
 $scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;
 $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
 $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !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: false !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
@@ -57,42 +58,38 @@ $agenda-appointment-text-color: $base-text-color !default;
 $header-panel-cell-date: null !default;
 
 @if $mode == "light" {
-  $scheduler-workspace-month-text-color: #707070;
   $scheduler-appointment-text-color: #000 !default;
-  $scheduler-panel-text-color: #707070;
   $header-panel-cell-date: #424242;
 
   @if $color == "blue"{
-    $scheduler-appointment-base-color: lighten($base-accent, 48%) !default;
+    $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 48%, $space: hsl) !default;
     $scheduler-cell-hover-bg: $base-hover-bg !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-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default;
   }
 
   @if $color == "saas" {
-    $scheduler-appointment-base-color: lighten($base-accent, 30%) !default;
-    $scheduler-cell-hover-bg: lighten($base-hover-bg, 4.10) !default;
-    $scheduler-cell-active-bg: darken(saturate(adjust-hue($base-bg, 222), 100.00), 2.00) !default;
-    $scheduler-workspace-focused-cell-color: lighten($base-accent, 32.53) !default;
+    $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 30%, $space: hsl) !default;
+    $scheduler-cell-hover-bg: color.adjust($base-hover-bg, $lightness: 4.10%, $space: hsl) !default;
+    $scheduler-cell-active-bg: extcolor.adjust-if-not-achromatic($color: $base-bg, $hue: 222deg, $saturation: 100%, $lightness: -2%) !default;
+    $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 32.53%, $space: hsl) !default;
   }
 }
 
 @if $mode == "dark" {
-  $scheduler-workspace-month-text-color: #999;
-  $scheduler-appointment-base-color: darken($base-accent, 48%) !default;
+  $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default;
   $scheduler-appointment-text-color: #fff !default;
-  $scheduler-panel-text-color: #999;
   $header-panel-cell-date: #adadad;
   $scheduler-cell-hover-bg: $base-hover-bg !default;
 
   @if $color == "blue"{
-    $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-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default;
   }
 
   @if $color == "saas" {
-    $scheduler-cell-active-bg: lighten($base-bg, 4.31) !default;
-    $scheduler-workspace-focused-cell-color: darken(desaturate(adjust-hue($base-accent, -7), 65.00), 41.18) !default;
+    $scheduler-cell-active-bg: color.adjust($base-bg, $lightness: 4.31%, $space: hsl) !default;
+    $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $hue: -7deg, $saturation: -65.00%, $space: hsl, $lightness: -41.18%) !default;
   }
 }
 

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

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../list/colors" as *;
 @use "../form/sizes" as *;
 @use "../radioGroup/sizes" as *;
 @use "../toolbar/sizes" as *;
@@ -13,6 +14,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-appointment-active-color: $scheduler-appointment-active-color,
@@ -60,7 +62,7 @@ $fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-ta
 
 $fluent-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;
 
 $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
@@ -127,6 +129,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   height: $fluent-scheduler-all-day-table-cell-height;
   font-size: $fluent-scheduler-all-day-title-font-size;
   border-bottom: baseScheduler.$scheduler-base-border;
+  border-bottom-color: $scheduler-base-border-color;
   text-align: right;
   padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
 
@@ -331,6 +334,7 @@ $fluent-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;
   }
@@ -403,6 +407,7 @@ $fluent-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;
     }
   }
 }
@@ -418,6 +423,10 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: $scheduler-workspace-other-month-text-color;
+  }
+
   .dx-scheduler-header-panel-cell-date:last-child {
     color: $header-panel-cell-date;
     border-radius: initial;
@@ -435,7 +444,9 @@ $fluent-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 {
@@ -576,7 +587,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     .dx-scheduler-group-header {
       font-size: $fluent-scheduler-group-header-font-size;
       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: $fluent-scheduler-header-panel-margin;
@@ -617,6 +629,7 @@ $fluent-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;
   }
 }
 
@@ -634,6 +647,7 @@ $fluent-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) {
@@ -754,15 +768,18 @@ $fluent-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;
@@ -778,21 +795,19 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   .dx-rtl .dx-scheduler-timeline & {
     border-left: $fluent-scheduler-appointment-transparent-left-border;
     border-right: $fluent-scheduler-appointment-transparent-right-border;
+    box-shadow: none;
+    border-radius: 4px;
 
     &.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: 4px;
   }
 }
 
@@ -808,6 +823,7 @@ $fluent-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;
     }
   }
 }
@@ -825,6 +841,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) {
+  container-type: size;
+
   .dx-scheduler-appointment-strip {
     display: block;
     position: absolute;
@@ -832,6 +850,12 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     height: 100%;
     background-color: $base-accent;
   }
+
+  @container (max-width: 8px) {
+    .dx-scheduler-appointment-strip {
+      display: none;
+    }
+  }
 }
 
 .dx-rtl.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) {
@@ -944,6 +968,7 @@ $fluent-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;
       }
     }
@@ -963,7 +988,8 @@ $fluent-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/fluent/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/fluent/tabPanel/_index.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -26,9 +27,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;
       }
     }
@@ -38,9 +40,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;
       }
     }
@@ -50,9 +53,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;
       }
     }
@@ -62,9 +66,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;
       }
     }

package/data/scss/widgets/fluent/tabs/layout/tab/_base.scss

@@ -14,8 +14,8 @@
 // adduse
 @use "../../../scrollable";
 @use "../../../badge";
-@import "styling-mode/primary";
-@import "styling-mode/secondary";
+@use "styling-mode/primary" as *;
+@use "styling-mode/secondary" as *;
 
 
 .dx-tab {

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

@@ -21,11 +21,11 @@ $tagbox-tag-foreground-disabled: $base-foreground-disabled !default;
 $tagbox-tag-disabled: $base-background-disabled !default;
 
 @if $mode == "light" {
-  $tagbox-tag-bg: darken($base-hover-bg, 1.96) !default;
+  $tagbox-tag-bg: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $tagbox-tag-bg: darken($base-element-bg, 12.16) !default;
+  $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default;
 }
 $never-used: collector((
 "$tagbox-tag-color": $tagbox-tag-color,

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

@@ -174,7 +174,8 @@
 
 .dx-tagbox-popup-wrapper {
   .dx-list-select-all {
-    border-bottom: 1px solid $tagbox-select-all-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $tagbox-select-all-border-color;
     padding-bottom: $fluent-tagbox-select-all-padding-bottom;
     margin-bottom: $fluent-tagbox-select-all-margin-bottom;
 

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

@@ -49,9 +49,9 @@ $texteditor-label-transition:
 @if $mode == "light" {
   @if $color == "blue" {
     $texteditor-color: $base-text-color !default;
-    $texteditor-placeholder-color: lighten($base-text-color, 29.80) !default;
+    $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default;
     $texteditor-outlined-bg: $base-element-bg !default;
-    $texteditor-filled-bg: darken($base-element-bg, 3.9) !default;
+    $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default;
   }
 
   @if $color == "saas" {
@@ -61,17 +61,17 @@ $texteditor-label-transition:
     $texteditor-filled-bg: rgba(243, 245, 248, 1) !default;
   }
 
-  $texteditor-border-color-hover: darken($texteditor-border-color, 9.8) !default;
-  $texteditor-border-color-focused: darken($texteditor-border-color, 17.65) !default;
-  $texteditor-border-bottom-color-hover: darken($texteditor-border-bottom-color, 3.92) !default;
-  $texteditor-border-bottom-color-focused: darken($texteditor-border-bottom-color-hover, 3.92) !default;
+  $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default;
+  $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default;
+  $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default;
+  $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default;
 }
 
 
 @if $mode == "dark" {
   @if $color == "blue" {
     $texteditor-outlined-bg: $base-element-bg !default;
-    $texteditor-filled-bg: darken($base-element-bg, 8.2) !default;
+    $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default;
   }
 
   @if $color == "saas" {
@@ -80,11 +80,11 @@ $texteditor-label-transition:
   }
 
   $texteditor-color: $base-text-color !default;
-  $texteditor-placeholder-color: darken($base-text-color, 40.00) !default;
-  $texteditor-border-color-hover: lighten($texteditor-border-color, 7.84) !default;
-  $texteditor-border-color-focused: lighten($texteditor-border-color, 3.92) !default;
-  $texteditor-border-bottom-color-hover: lighten($texteditor-border-bottom-color, 6.27) !default;
-  $texteditor-border-bottom-color-focused: lighten($texteditor-border-bottom-color-hover, 3.92) !default;
+  $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default;
+  $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default;
+  $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default;
+  $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default;
+  $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default;
 }
 $texteditor-filled-bg-hover: $texteditor-filled-bg !default;
 $texteditor-filled-bg-focused: $texteditor-filled-bg !default;

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

@@ -450,7 +450,8 @@ $fluent-editor-border-width: 1px;
   &.dx-state-focused,
   &.dx-state-active {
     &::before {
-      border-bottom: 2px solid $texteditor-invalid-focused-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $texteditor-invalid-focused-border-color;
     }
   }
 

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

@@ -10,7 +10,7 @@ $tileview-bg: $base-element-bg !default;
 $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
 $tileview-hover-bg: $base-element-bg !default;
 $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-$tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default;
+$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
 $tileview-active-color: $tileview-color !default;
 $never-used: collector((
 "$tileview-color": $tileview-color,

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

@@ -11,7 +11,8 @@
 .dx-tile {
   color: $tileview-color;
   background-color: $tileview-bg;
-  border: 1px solid $tileview-border-color;
+  border: 1px solid;
+  border-color: $tileview-border-color;
   text-align: left;
 
   &.dx-state-focused,

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

@@ -45,7 +45,8 @@
 }
 
 .dx-toolbar-menu-section {
-  border-bottom: 1px solid $toolbar-separator-color;
+  border-bottom: 1px solid;
+  border-bottom-color: $toolbar-separator-color;
 
   .dx-list-item-content,
   .dx-toolbar-item-auto-hide {