devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/base/scheduler/views/_index.scss

@@ -49,6 +49,7 @@ $scheduler-month-date-text-padding: 6px;
 
 @use "./day" with (
   $scheduler-base-border: $scheduler-base-border,
+  $scheduler-base-border-color: $scheduler-base-border-color,
 );
 @use "./month" with (
   $scheduler-base-border: $scheduler-base-border,
@@ -64,6 +65,7 @@ $scheduler-month-date-text-padding: 6px;
   $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
   $scheduler-accent-border: $scheduler-accent-border,
   $scheduler-base-border: $scheduler-base-border,
+  $scheduler-base-border-color: $scheduler-base-border-color,
   $scheduler-accent-border-color: $scheduler-accent-border-color,
 );
 @use "./agenda" with (
@@ -139,6 +141,7 @@ $scheduler-month-date-text-padding: 6px;
   &.dx-scheduler-work-space-odd-cells {
     .dx-scheduler-date-table-row:nth-child(odd) .dx-scheduler-date-table-cell {
       border-top: $scheduler-accent-border;
+      border-top-color: $scheduler-accent-border-color;
     }
 
     .dx-scheduler-date-table-row:first-child .dx-scheduler-date-table-cell {
@@ -155,6 +158,7 @@ $scheduler-month-date-text-padding: 6px;
 
 .dx-scheduler-work-space {
   border: $scheduler-base-border;
+  border-color: $scheduler-base-border-color;
   background-color: $scheduler-workspace-background-color;
   position: relative;
   display: flex;
@@ -169,6 +173,7 @@ $scheduler-month-date-text-padding: 6px;
   &.dx-scheduler-timeline-month:not(.dx-scheduler-agenda) {
     .dx-scheduler-all-day-title {
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
 
     .dx-scheduler-date-table-cell {
@@ -179,16 +184,19 @@ $scheduler-month-date-text-padding: 6px;
   &.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) {
     .dx-scheduler-all-day-panel td {
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
   }
 
   &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
     .dx-scheduler-header-panel {
-      border-bottom: 2px solid $scheduler-base-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $scheduler-base-border-color;
     }
 
     .dx-scheduler-header-panel-empty-cell {
-      border-bottom: 2px solid $scheduler-base-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $scheduler-base-border-color;
     }
 
     &.dx-scheduler-work-space-vertical-grouped.dx-scheduler-work-space-both-scrollbar {
@@ -205,6 +213,7 @@ $scheduler-month-date-text-padding: 6px;
   &.dx-scheduler-work-space-month:not(.dx-scheduler-work-space-vertical-grouped) {
     .dx-scheduler-header-panel {
       border-bottom: $scheduler-base-border;
+      border-bottom-color: $scheduler-base-border-color;
     }
   }
 }
@@ -221,8 +230,10 @@ $scheduler-month-date-text-padding: 6px;
   align-items: flex-end;
   flex-shrink: 0;
   width: 0;
-  border-bottom: 1px solid $scheduler-base-border-color;
-  border-right: 1px solid $scheduler-base-border-color;
+  border-bottom: 1px solid;
+  border-bottom-color: $scheduler-base-border-color;
+  border-right: 1px solid;
+  border-right-color: $scheduler-base-border-color;
 }
 
 .dx-scheduler-header-tables-container {
@@ -260,6 +271,7 @@ $scheduler-month-date-text-padding: 6px;
 
 .dx-scheduler-date-table-cell {
   border-top: $scheduler-base-border;
+  border-top-color: $scheduler-base-border-color;
   height: $scheduler-workspace-date-table-cell-height;
 }
 
@@ -300,6 +312,7 @@ $scheduler-month-date-text-padding: 6px;
 
     &:last-child .dx-scheduler-group-header {
       border-right: $scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
     }
 
     .dx-scheduler-group-header {
@@ -316,6 +329,7 @@ $scheduler-month-date-text-padding: 6px;
       text-overflow: ellipsis;
       border: none;
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
   }
 }
@@ -335,7 +349,9 @@ $scheduler-month-date-text-padding: 6px;
 .dx-scheduler-date-table-cell,
 .dx-scheduler-all-day-table-cell {
   border-top: $scheduler-base-border;
+  border-top-color: $scheduler-base-border-color;
   border-left: $scheduler-base-border;
+  border-left-color: $scheduler-base-border-color;
 
   &:first-child {
     border-left: none;
@@ -345,6 +361,7 @@ $scheduler-month-date-text-padding: 6px;
 .dx-scheduler-date-table-cell,
 .dx-scheduler-header-panel-cell {
   border-right: $scheduler-base-border;
+  border-right-color: $scheduler-base-border-color;
 }
 
 .dx-scheduler-work-space-week,
@@ -352,6 +369,7 @@ $scheduler-month-date-text-padding: 6px;
 .dx-scheduler-work-space-day.dx-scheduler-work-space-count {
   .dx-scheduler-all-day-title {
     border-top: $scheduler-base-border;
+    border-top-color: $scheduler-base-border-color;
   }
 }
 
@@ -404,9 +422,11 @@ $scheduler-month-date-text-padding: 6px;
     .dx-scheduler-all-day-table-cell {
       &:nth-child(7n) {
         border-right: $scheduler-accent-border;
+        border-right-color: $scheduler-accent-border-color;
 
         .dx-rtl & {
           border-left: $scheduler-accent-border;
+          border-left-color: $scheduler-accent-border-color;
         }
       }
     }
@@ -418,10 +438,13 @@ $scheduler-month-date-text-padding: 6px;
     .dx-scheduler-all-day-table-cell {
       &:nth-child(5n) {
         border-right: $scheduler-accent-border;
+        border-right-color: $scheduler-accent-border-color;
 
         .dx-rtl & {
           border-right: $scheduler-base-border;
+          border-right-color: $scheduler-base-border-color;
           border-left: $scheduler-accent-border;
+          border-left-color: $scheduler-accent-border-color;
         }
       }
     }
@@ -472,6 +495,7 @@ $scheduler-month-date-text-padding: 6px;
   text-align: center;
   font-weight: normal;
   border-left: $scheduler-base-border;
+  border-left-color: $scheduler-base-border-color;
 
   &:first-child {
     border-left: 1px solid transparent;
@@ -485,7 +509,8 @@ $scheduler-month-date-text-padding: 6px;
   position: relative;
 
   .dx-scheduler-all-day-table-cell {
-    border-bottom: 2px solid $scheduler-base-border-color;
+    border-bottom: 2px solid;
+    border-bottom-color: $scheduler-base-border-color;
   }
 }
 
@@ -498,7 +523,8 @@ $scheduler-month-date-text-padding: 6px;
   height: $scheduler-all-day-table-cell-height;
   position: relative;
   text-align: center;
-  border-bottom: 2px solid $scheduler-base-border-color;
+  border-bottom: 2px solid;
+  border-bottom-color: $scheduler-base-border-color;
 
   @include user-select(none);
 
@@ -540,6 +566,7 @@ $scheduler-month-date-text-padding: 6px;
   border-collapse: collapse;
   font-size: $scheduler-workspace-info-font-size;
   border-right: $scheduler-base-border;
+  border-right-color: $scheduler-base-border-color;
 
   .dx-scheduler-small & {
     width: $scheduler-left-column-width * $scheduler-small-size-factor;
@@ -700,6 +727,7 @@ $scheduler-month-date-text-padding: 6px;
     height: 100%;
     min-height: 100px;
     border-top: $scheduler-base-border;
+    border-top-color: $scheduler-base-border-color;
     border-spacing: 0;
 
     @include flex-container(column, nowrap);
@@ -727,6 +755,7 @@ $scheduler-month-date-text-padding: 6px;
   .dx-scheduler-time-panel-cell {
     &.dx-scheduler-first-group-cell {
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
 
       > div {
         margin-top: 0;
@@ -741,7 +770,8 @@ $scheduler-month-date-text-padding: 6px;
 
   .dx-scheduler-date-table-cell {
     &.dx-scheduler-last-group-cell {
-      border-bottom: 2px solid $scheduler-base-border-color;
+      border-bottom: 2px solid;
+      border-bottom-color: $scheduler-base-border-color;
     }
   }
 
@@ -749,13 +779,15 @@ $scheduler-month-date-text-padding: 6px;
     .dx-scheduler-sidebar-scrollable,
     .dx-scheduler-date-table-scrollable {
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
   }
 }
 
 .dx-rtl {
   .dx-scheduler-header-panel-empty-cell {
-    border-left: 1px solid $scheduler-base-border-color;
+    border-left: 1px solid;
+    border-left-color: $scheduler-base-border-color;
     border-right: none;
   }
 
@@ -769,6 +801,7 @@ $scheduler-month-date-text-padding: 6px;
     .dx-scheduler-group-row:last-child .dx-scheduler-group-header {
       border-right: none;
       border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
     }
   }
 
@@ -800,12 +833,14 @@ $scheduler-month-date-text-padding: 6px;
   .dx-scheduler-work-space-week .dx-scheduler-all-day-table-cell,
   .dx-scheduler-work-space-work-week .dx-scheduler-all-day-table-cell {
     border-right: $scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
     border-left: none;
   }
 
   &.dx-scheduler-work-space-both-scrollbar {
     .dx-scheduler-time-panel {
       border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
       border-right: none;
     }
 
@@ -815,6 +850,7 @@ $scheduler-month-date-text-padding: 6px;
       &:first-child {
         border-right: none;
         border-left: $scheduler-base-border;
+        border-left-color: $scheduler-base-border-color;
       }
     }
   }
@@ -844,11 +880,13 @@ $scheduler-month-date-text-padding: 6px;
     &:first-child {
       border-right: none;
       border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
     }
   }
 
   .dx-scheduler-time-panel {
     border-left: $scheduler-base-border;
+    border-left-color: $scheduler-base-border-color;
     border-right: none;
   }
 }

package/data/scss/widgets/base/scheduler/views/day/_index.scss

@@ -1,4 +1,5 @@
 $scheduler-base-border: null !default;
+$scheduler-base-border-color: null !default;
 
 .dx-scheduler-work-space-day {
   &:not(.dx-scheduler-work-space-count) {
@@ -64,6 +65,7 @@ $scheduler-base-border: null !default;
       .dx-scheduler-time-panel,
       .dx-scheduler-header-panel-empty-cell {
         border-right: $scheduler-base-border;
+        border-right-color: $scheduler-base-border-color;
       }
     }
   }
@@ -71,6 +73,7 @@ $scheduler-base-border: null !default;
   &.dx-scheduler-work-space-vertical-grouped {
     .dx-scheduler-all-day-table-cell {
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
   }
 
@@ -79,7 +82,9 @@ $scheduler-base-border: null !default;
     .dx-scheduler-all-day-table-cell,
     .dx-scheduler-header-panel-cell {
       border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
       border-right: $scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
 
       &:first-child {
         border-left: none;
@@ -104,6 +109,7 @@ $scheduler-base-border: null !default;
           .dx-scheduler-time-panel,
           .dx-scheduler-header-panel-empty-cell {
             border-left: $scheduler-base-border;
+            border-left-color: $scheduler-base-border-color;
             border-right: none;
           }
         }
@@ -116,6 +122,7 @@ $scheduler-base-border: null !default;
       .dx-scheduler-header-panel-cell {
         &:first-child {
           border-left: $scheduler-base-border;
+          border-left-color: $scheduler-base-border-color;
           border-right: none;
         }
       }

package/data/scss/widgets/base/scheduler/views/timelines/_index.scss

@@ -3,6 +3,7 @@
 $scheduler-workspace-date-table-cell-height: null !default;
 $scheduler-accent-border: null !default;
 $scheduler-base-border: null !default;
+$scheduler-base-border-color: null !default;
 $scheduler-accent-border-color: null !default;
 
 $scheduler-timeline-min-height: 100px;
@@ -175,10 +176,12 @@ $scheduler-timeline-min-height: 100px;
 
     .dx-scheduler-header-panel {
       border-bottom: $scheduler-accent-border;
+      border-bottom-color: $scheduler-accent-border-color;
     }
 
     .dx-scheduler-header-panel-empty-cell {
-      border-bottom: 1px solid $scheduler-accent-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $scheduler-accent-border-color;
     }
   }
 
@@ -194,15 +197,18 @@ $scheduler-timeline-min-height: 100px;
     .dx-scheduler-group-row .dx-scheduler-group-header {
       border: none;
       border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
     }
 
     &.dx-scheduler-work-space-group-by-date {
       .dx-scheduler-group-row .dx-scheduler-group-header {
         border-right: $scheduler-base-border;
+        border-right-color: $scheduler-base-border-color;
       }
 
       .dx-scheduler-group-row .dx-scheduler-last-group-cell {
         border-right: $scheduler-accent-border;
+        border-right-color: $scheduler-accent-border-color;
       }
     }
 
@@ -219,6 +225,7 @@ $scheduler-timeline-min-height: 100px;
     .dx-scheduler-date-table-cell {
       &:first-child {
         border-left: $scheduler-base-border;
+        border-left-color: $scheduler-base-border-color;
         border-right: none;
       }
     }

package/data/scss/widgets/base/scrollable/_index.scss

@@ -1,3 +1,4 @@
+@use "sass:selector";
 @use "./mixins" as *;
 
 // adduse
@@ -200,13 +201,13 @@
   .dx-scrollable-container {
     direction: ltr;
 
-    @at-root #{selector-append(".dx-scrollable-native", &)} {
+    @at-root #{selector.append(".dx-scrollable-native", &)} {
       direction: rtl;
     }
   }
 
   .dx-scrollable-content {
-    @at-root #{selector-append(".dx-scrollable-native", &)} {
+    @at-root #{selector.append(".dx-scrollable-native", &)} {
       float: right;
     }
   }

package/data/scss/widgets/base/speechToText/_index.scss

@@ -1,4 +1,4 @@
-.dx-speech-to-text-listening {
+.dx-speech-to-text-listening .dx-icon {
   animation: dx-speech-to-text-listening-animation 1.5s ease-in-out 0.5s infinite;
 }
 

package/data/scss/widgets/base/stepper/_mixins.scss

@@ -1,3 +1,3 @@
-@import 'layout/stepper/mixins';
-@import 'layout/connector/mixins';
-@import 'layout/step/mixins';
+@forward 'layout/stepper/mixins';
+@forward 'layout/connector/mixins';
+@forward 'layout/step/mixins';

package/data/scss/widgets/base/treeList/_index.scss

@@ -39,24 +39,31 @@ $treelist-row-error-color: $datagrid-row-error-color;
   > .dx-treelist-rowsview,
   > .dx-treelist-total-footer {
     border-left: $treelist-border;
+    border-left-color: $treelist-border-color;
     border-right: $treelist-border;
+    border-right-color: $treelist-border-color;
   }
 
   > .dx-treelist-rowsview,
   > .dx-treelist-total-footer {
     border-bottom: $treelist-border;
+    border-bottom-color: $treelist-border-color;
   }
 
   > .dx-treelist-headers,
   > .dx-treelist-filter-panel {
     border-top: $treelist-border;
+    border-top-color: $treelist-border-color;
   }
 
   > .dx-treelist-filter-panel {
     border-top-width: 0;
     border-left: $treelist-border;
+    border-left-color: $treelist-border-color;
     border-right: $treelist-border;
+    border-right-color: $treelist-border-color;
     border-bottom: $treelist-border;
+    border-bottom-color: $treelist-border-color;
   }
 }
 
@@ -154,7 +161,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
   .dx-treelist-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 2px;
     }
 
@@ -198,6 +206,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
 .dx-treelist-filter-panel {
   color: $treelist-base-color;
   border-top: $treelist-border;
+  border-top-color: $treelist-border-color;
 
   .dx-icon-filter,
   .dx-treelist-filter-panel-text,
@@ -209,7 +218,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
     .dx-icon-filter:focus,
     .dx-treelist-filter-panel-text:focus,
     .dx-treelist-filter-panel-clear-filter:focus {
-      outline: 2px solid $treelist-focused-border-color;
+      outline: 2px solid;
+      outline-color: $treelist-focused-border-color;
     }
   }
 }
@@ -283,5 +293,6 @@ $treelist-row-error-color: $datagrid-row-error-color;
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid $treelist-focused-border-color;
+  outline: 2px solid;
+  outline-color: $treelist-focused-border-color;
 }

package/data/scss/widgets/base/treeView/_index.scss

@@ -82,11 +82,12 @@
   }
 
   .dx-treeview-with-search > .dx-scrollable {
-    height: calc(100% - #{round($search-editor-height + $searchbox-margin-bottom)});
+    height: calc(100% - #{math.round($search-editor-height + $searchbox-margin-bottom)});
   }
 
   .dx-treeview-select-all-item {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $border-color;
     padding: $select-all-item-padding;
 
     .dx-checkbox-container {
@@ -105,7 +106,8 @@
   }
 
   .dx-treeview-border-visible {
-    border: 1px solid $border-color;
+    border: 1px solid;
+    border-color: $border-color;
 
     .dx-treeview-select-all-item {
       padding-inline-start: $select-all-item-border-visible-padding;

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

@@ -84,17 +84,17 @@ $scrollview-pulldown-path: null !default;
   $base-bg: rgba(255, 255, 255, 1) !default;
 
   @if $color == "blue" {
-    $base-hover-bg: darken($base-bg, 3.9) !default;
+    $base-hover-bg: color.adjust($base-bg, $lightness: -3.9%, $space: hsl) !default;
     $base-typography-bg: rgba(250, 250, 250, 1) !default;
 
     $base-accent: rgba(15, 108, 189, 1) !default;
     $base-success: rgba(16, 124, 16, 1) !default;
     $base-danger: rgba(209, 52, 56, 1) !default;
     $base-text-color: rgba(36, 36, 36, 1) !default;
-    $base-label-color: lighten($base-text-color, 29.80) !default;
-    $base-icon-color: lighten($base-text-color, 23.92) !default;
+    $base-label-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default;
+    $base-icon-color: color.adjust($base-text-color, $lightness: 23.92%, $space: hsl) !default;
     $base-border-color: rgba(224, 224, 224, 1) !default;
-    $base-border-color-accessible: darken($base-border-color, 49.8) !default;
+    $base-border-color-accessible: color.adjust($base-border-color, $lightness: -49.8%, $space: hsl) !default;
     $base-shadow-color: #000 !default;
   }
 
@@ -102,44 +102,44 @@ $scrollview-pulldown-path: null !default;
     $base-accent: #5486ff !default;
     $base-typography-bg: #FAFBFF !default;
 
-    $base-hover-bg: mix(#FFF, $base-accent, 85%) !default;
+    $base-hover-bg: color.mix(#FFF, $base-accent, 85%) !default;
 
     $base-success: #19914B !default;
     $base-danger: #DC2828 !default;
     $base-text-color: #21293b !default;
-    $base-label-color: lighten($base-text-color, 19) !default;
-    $base-icon-color: lighten($base-text-color, 10) !default;
+    $base-label-color: color.adjust($base-text-color, $lightness: 19%, $space: hsl) !default;
+    $base-icon-color: color.adjust($base-text-color, $lightness: 10%, $space: hsl) !default;
     $base-border-color: #e5e8f0 !default;
-    $base-border-color-accessible: darken($base-border-color, 20) !default;
+    $base-border-color-accessible: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
     $base-shadow-color: #3D4A6C !default;
   }
 
-  $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default;
-  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default;
-  $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default;
+  $base-accent-hover: color.adjust($base-accent, $saturation: -4.18%, $space: hsl, $lightness: -4.71%) !default;
+  $base-accent-active: color.adjust($base-accent, $hue: -1deg, $saturation: -4.65%, $space: hsl, $lightness: -9.61%) !default;
+  $base-accent-selected: color.adjust($base-accent-active, $saturation: -2.02%, $space: hsl, $lightness: -4.71%) !default;
 
-  $base-foreground-disabled: lighten($base-text-color, 60) !default;
+  $base-foreground-disabled: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default;
 
-  $base-selected-bg: darken($base-hover-bg, 3.92) !default;
-  $base-active-bg: darken($base-hover-bg, 8.24) !default;
-  $base-background-disabled: darken($base-hover-bg, 1.96) !default;
+  $base-selected-bg: color.adjust($base-hover-bg, $lightness: -3.92%, $space: hsl) !default;
+  $base-active-bg: color.adjust($base-hover-bg, $lightness: -8.24%, $space: hsl) !default;
+  $base-background-disabled: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default;
 
-  $base-border-color-hover: darken($base-border-color, 9.8) !default;
-  $base-border-color-focused: darken($base-border-color, 17.65) !default;
+  $base-border-color-hover: color.adjust($base-border-color, $lightness: -9.8%, $space: hsl) !default;
+  $base-border-color-focused: color.adjust($base-border-color, $lightness: -17.65%, $space: hsl) !default;
 
-  $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default;
-  $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default;
+  $base-border-color-accessible-hover: color.adjust($base-border-color-accessible, $lightness: -3.92%, $space: hsl) !default;
+  $base-border-color-accessible-focused: color.adjust($base-border-color-accessible-hover, $lightness: -3.92%, $space: hsl) !default;
   $base-border-color-disabled: $base-border-color !default;
 
   $base-separator-color: $base-border-color !default;
 
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
 
   $base-inverted-text-color: #fff !default;
 
-  $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default;
-  $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default;
-  $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default;
+  $base-danger-hover: color.adjust($base-danger, $saturation: -3.05%, $space: hsl, $lightness: -5.10%) !default;
+  $base-danger-active: color.adjust($base-danger, $saturation: -3.56%, $space: hsl, $lightness: -35.69%) !default;
+  $base-danger-selected: color.adjust($base-danger, $saturation: -2.78%, $space: hsl, $lightness: -22.55%) !default;
 
   $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
 }
@@ -167,36 +167,36 @@ $scrollview-pulldown-path: null !default;
     $base-typography-bg: #141E28 !default;
   }
 
-  $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default;
-  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default;
-  $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default;
+  $base-accent-hover: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default;
+  $base-accent-active: color.adjust($base-accent, $hue: -1deg, $saturation: -16.30%, $space: hsl, $lightness: -10.59%) !default;
+  $base-accent-selected: color.adjust($base-accent, $hue: -3deg, $saturation: -9.05%, $space: hsl, $lightness: -31.57%) !default;
 
   $base-text-color: rgba(255, 255, 255, 1) !default;
-  $base-label-color: darken($base-text-color, 40.00) !default;
-  $base-icon-color: darken($base-text-color, 32.16) !default;
-  $base-foreground-disabled: darken($base-text-color, 63.9) !default;
+  $base-label-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default;
+  $base-icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default;
+  $base-foreground-disabled: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default;
 
   $base-bg: rgba(41, 41, 41, 1) !default;
-  $base-hover-bg: lighten($base-bg, 7.8) !default;
-  $base-selected-bg: lighten($base-bg, 5.9) !default;
-  $base-active-bg: darken($base-bg, 3.9) !default;
-  $base-background-disabled: darken($base-bg, 8.2) !default;
-
-  $base-border-color-hover: lighten($base-border-color, 7.84) !default;
-  $base-border-color-focused: lighten($base-border-color, 3.92) !default;
-  $base-border-color-accessible: lighten($base-border-color, 29.8) !default;
-  $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default;
-  $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default;
-  $base-border-color-disabled: darken($base-border-color, 12.16) !default;
-  $base-separator-color: darken($base-border-color, 5.88) !default;
-
-  $base-inverted-bg: lighten($base-bg, 100%) !default;
+  $base-hover-bg: color.adjust($base-bg, $lightness: 7.8%, $space: hsl) !default;
+  $base-selected-bg: color.adjust($base-bg, $lightness: 5.9%, $space: hsl) !default;
+  $base-active-bg: color.adjust($base-bg, $lightness: -3.9%, $space: hsl) !default;
+  $base-background-disabled: color.adjust($base-bg, $lightness: -8.2%, $space: hsl) !default;
+
+  $base-border-color-hover: color.adjust($base-border-color, $lightness: 7.84%, $space: hsl) !default;
+  $base-border-color-focused: color.adjust($base-border-color, $lightness: 3.92%, $space: hsl) !default;
+  $base-border-color-accessible: color.adjust($base-border-color, $lightness: 29.8%, $space: hsl) !default;
+  $base-border-color-accessible-hover: color.adjust($base-border-color-accessible, $lightness: 6.27%, $space: hsl) !default;
+  $base-border-color-accessible-focused: color.adjust($base-border-color-accessible-hover, $lightness: 3.92%, $space: hsl) !default;
+  $base-border-color-disabled: color.adjust($base-border-color, $lightness: -12.16%, $space: hsl) !default;
+  $base-separator-color: color.adjust($base-border-color, $lightness: -5.88%, $space: hsl) !default;
+
+  $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $base-shadow-color: #000 !default;
   $base-inverted-text-color: #000 !default;
 
-  $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default;
-  $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default;
-  $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9);
+  $base-danger-hover: color.adjust($base-danger, $saturation: 0.44%, $space: hsl, $lightness: 7.45%) !default;
+  $base-danger-active: color.adjust($base-danger, $hue: 1.8deg, $saturation: -0.9%, $space: hsl, $lightness: 28.8%) !default;
+  $base-danger-selected: color.adjust($base-danger, $hue: 0.7deg, $saturation: 1.3%, $space: hsl, $lightness: 14.9%);
 
   $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
 }

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

@@ -18,7 +18,7 @@ $badge-background-color-disabled: $base-background-disabled !default;
 }
 
 @if $mode == "dark" {
-  $badge-bg: darken(desaturate(adjust-hue($base-accent, 358.4), 8.6), 26.7) !default;
+  $badge-bg: color.adjust($base-accent, $hue: 358.4deg, $saturation: -8.6%, $space: hsl, $lightness: -26.7%) !default;
   $badge-color: $base-text-color !default;
 }
 $never-used: collector((