devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/generic/color.scss

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

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

@@ -13,7 +13,7 @@
 @use "../menuBase" as *; // need as private
 
 
-$generic-menu-popup-border: 1px solid $menu-popup-border-color;
+$generic-menu-popup-border: 1px solid;
 
 .dx-context-menu {
   color: $menu-color;
@@ -21,6 +21,7 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
   .dx-submenu {
     background-color: $menu-popup-bg;
     border: $generic-menu-popup-border;
+    border-color: $menu-popup-border-color;
     box-shadow: 0 2px 2px $menu-container-shadow-color;
   }
 

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

@@ -44,6 +44,7 @@
     color: $datagrid-columnchooser-item-color;
     font-weight: $datagrid-columnchooser-font-weight;
     border: $datagrid-border;
+    border-color: $datagrid-border-color;
     padding: $generic-datagrid-cell-padding;
   }
 
@@ -107,6 +108,7 @@
 .dx-row.dx-datagrid-group-footer {
   &.dx-column-lines {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 }
 

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

@@ -8,7 +8,7 @@ $timeview-bg: null !default;
 
 
 @if $color == "carmine" {
-  $timeview-bg: darken($base-bg, 2.7%) !default;
+  $timeview-bg: color.adjust($base-bg, $lightness: -2.7%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -16,11 +16,11 @@ $timeview-bg: null !default;
 }
 
 @if $color == "dark" {
-  $timeview-bg: lighten($base-bg, 2.5%) !default;
+  $timeview-bg: color.adjust($base-bg, $lightness: 2.5%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
-  $timeview-bg: darken($base-bg, 2%) !default;
+  $timeview-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
@@ -28,13 +28,13 @@ $timeview-bg: null !default;
 }
 
 @if $color == "greenmist" {
-  $timeview-bg: darken($base-bg, 1%) !default;
+  $timeview-bg: color.adjust($base-bg, $lightness: -1%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $timeview-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.2) !default;
+  $timeview-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default;
 }
 
 @if $color == "softblue" {
-  $timeview-bg: color.change(darken($base-bg, 4%), $alpha: 0.7) !default;
+  $timeview-bg: color.change(color.adjust($base-bg, $lightness: -4%, $space: hsl), $alpha: 0.7) !default;
 }

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

@@ -119,14 +119,16 @@ $generic-dateview-roller-padding: math.div($generic-dateview-roller-height - $ge
 
   &::before {
     top: -$generic-dateview-roller-padding;
-    border-bottom: 1px solid $dateview-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $dateview-border-color;
 
     @include gradient-linear($dateview-shadow-up);
   }
 
   &::after {
     top: $generic-dateview-roller-item-height;
-    border-top: 1px solid $dateview-border-color;
+    border-top: 1px solid;
+    border-top-color: $dateview-border-color;
 
     @include gradient-linear($dateview-shadow-down);
   }

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

@@ -19,10 +19,10 @@ $diagram-toolbox-shape-text-opacity: null !default;
 
 
 @if $color == "carmine" {
-  $diagram-normal-format-active-bg: darken($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: darken($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: darken($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $diagram-image-icon-base-color: $base-icon-color !default;
   $diagram-image-icon-accent-color: $loadindicator-bg !default;
   $diagram-toolbox-shape-text-opacity: 0.25 !default;
@@ -39,60 +39,60 @@ $diagram-toolbox-shape-text-opacity: null !default;
 }
 
 @if $color == "dark" {
-  $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: darken($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: darken($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $diagram-image-icon-base-color: color.change($base-bg, $alpha: 0.5) !default;
   $diagram-image-icon-accent-color: color.change($base-bg, $alpha: 0.5) !default;
   $diagram-toolbox-shape-text-opacity: 0.5 !default;
 }
 
 @if $color == "darkmoon" {
-  $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: lighten($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: lighten($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: lighten($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $diagram-image-icon-base-color: $base-bg !default;
   $diagram-image-icon-accent-color: $loadindicator-bg !default;
   $diagram-toolbox-shape-text-opacity: 0.5 !default;
 }
 
 @if $color == "darkviolet" {
-  $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: lighten($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: lighten($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: lighten($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $diagram-image-icon-base-color: color.change($base-bg, $alpha: 0.5) !default;
   $diagram-image-icon-accent-color: $loadindicator-bg !default;
   $diagram-toolbox-shape-text-opacity: 0.5 !default;
 }
 
 @if $color == "greenmist" {
-  $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: lighten($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: lighten($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: lighten($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $diagram-image-icon-base-color: $base-icon-color !default;
   $diagram-image-icon-accent-color: $loadindicator-bg !default;
   $diagram-toolbox-shape-text-opacity: 0.25 !default;
 }
 
 @if $color == "light" {
-  $diagram-normal-format-active-bg: darken($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: darken($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: darken($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $diagram-image-icon-base-color: $loadindicator-bg !default;
   $diagram-image-icon-accent-color: $loadindicator-bg !default;
   $diagram-toolbox-shape-text-opacity: 0.25 !default;
 }
 
 @if $color == "softblue" {
-  $diagram-normal-format-active-bg: darken($base-element-bg, 10%) !default;
-  $diagram-default-format-active-bg: darken($base-accent, 10%) !default;
-  $diagram-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $diagram-success-format-active-bg: darken($base-success, 10%) !default;
+  $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
+  $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $diagram-image-icon-base-color: $base-icon-color !default;
   $diagram-image-icon-accent-color: $loadindicator-bg !default;
   $diagram-toolbox-shape-text-opacity: 0.25 !default;

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

@@ -27,7 +27,7 @@ $diagram-toolbox-title-size: 12px;
 
   // stylelint-disable selector-class-pattern
   .dxdi-control .dxdi-canvas {
-    background-color: darken($overlay-content-bg, 15%);
+    background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl);
 
     .selection-mark,
     .item-selection-rect,
@@ -131,7 +131,8 @@ $diagram-toolbox-title-size: 12px;
   // stylelint-enable selector-class-pattern
 
   .dx-diagram-toolbar-wrapper {
-    border-bottom: 1px solid $diagram-toolbar-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $diagram-toolbar-border-color;;
   }
 
   &.dx-diagram-fullscreen {
@@ -145,7 +146,8 @@ $diagram-toolbox-title-size: 12px;
 }
 
 .dx-diagram-floating-toolbar-container {
-  border: 1px solid $overlay-border-color;
+  border: 1px solid;
+  border-color: $overlay-border-color;
   background: $overlay-content-bg;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
   border-radius: $popup-border-radius;
@@ -213,7 +215,8 @@ $diagram-toolbox-title-size: 12px;
   }
 
   .dx-diagram-toolbox-input-container {
-    border-bottom: 1px solid $accordion-item-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $accordion-item-border-color;
   }
 
   .dx-diagram-toolbox-input {
@@ -258,7 +261,8 @@ $diagram-toolbox-title-size: 12px;
       padding-top: $diagram-toolbox-mobile-padding;
 
       .dx-diagram-toolbox-input-container {
-        border-top: 1px solid $accordion-item-border-color;
+        border-top: 1px solid;
+        border-top-color: $accordion-item-border-color;
       }
     }
   }

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

@@ -24,9 +24,9 @@ $dropdowneditor-icon-active-color: null !default;
 $dropdowneditor-icon-border-radius: $base-border-radius - 1px !default;
 
 @if $color == "carmine" {
-  $dropdowneditor-button-hover-bg: darken($base-bg, 4%) !default; // #fff => #f5f6f7
+  $dropdowneditor-button-hover-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; // #fff => #f5f6f7
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 
@@ -38,44 +38,44 @@ $dropdowneditor-icon-border-radius: $base-border-radius - 1px !default;
 }
 
 @if $color == "dark" {
-  $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default;
+  $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 
 @if $color == "darkmoon" {
-  $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default;
+  $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 
 @if $color == "darkviolet" {
-  $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default;
+  $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 
 @if $color == "greenmist" {
-  $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default;
+  $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 
 @if $color == "light" {
-  $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default;
+  $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 
 @if $color == "softblue" {
-  $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default;
+  $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
   $dropdowneditor-button-hover-border-color: transparent !default;
-  $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default;
+  $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $dropdowneditor-icon-active-color: $base-icon-color !default;
 }
 

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

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -117,7 +118,7 @@ $generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $gener
       background-color: $dropdowneditor-button-hover-bg;
       border-color: $dropdowneditor-button-hover-border-color;
 
-      @at-root #{selector-append(".dx-editor-filled", &)} {
+      @at-root #{selector.append(".dx-editor-filled", &)} {
         background-color: $dropdowneditor-filled-button-hover-bg;
       }
     }
@@ -132,7 +133,7 @@ $generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $gener
     color: $dropdowneditor-icon-active-color;
     opacity: 1;
 
-    @at-root #{selector-append(".dx-editor-filled", &)},
+    @at-root #{selector.append(".dx-editor-filled", &)},
     .dx-editor-filled & {
       background-color: $dropdowneditor-filled-button-active-bg;
     }
@@ -160,15 +161,15 @@ $generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $gener
 
   &.dx-editor-filled {
     .dx-dropdowneditor-icon {
-      @at-root #{selector-append(".dx-state-hover", &)} {
+      @at-root #{selector.append(".dx-state-hover", &)} {
         background-color: $dropdowneditor-filled-button-invalid-hover-bg;
       }
 
-      @at-root #{selector-append(".dx-dropdowneditor-active", &)} {
+      @at-root #{selector.append(".dx-dropdowneditor-active", &)} {
         background-color: $dropdowneditor-filled-button-invalid-active-bg;
       }
 
-      @at-root #{selector-append(".dx-state-active", &)} {
+      @at-root #{selector.append(".dx-state-active", &)} {
         background-color: $dropdowneditor-filled-button-invalid-active-bg;
       }
     }

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

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -102,7 +103,7 @@ $generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding
     margin: $vertical-margin $horizontal-margin;
     padding: 0;
 
-    @at-root #{selector-append(".dx-rtl", &)},
+    @at-root #{selector.append(".dx-rtl", &)},
     .dx-rtl & {
       .dx-field-value {
         &:not(.dx-widget) {

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

@@ -24,8 +24,8 @@ $filemanager-progressbox-shadow-color: null !default;
 
 
 @if $color == "carmine" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-accent !default;
@@ -34,7 +34,7 @@ $filemanager-progressbox-shadow-color: null !default;
 }
 
 @if $color == "contrast" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-bg: $base-text-color !default;
   $filemanager-dirs-tree-item-focus-color: $base-bg !default;
   $filemanager-file-item-hover-bg: $base-hover-color !default;
@@ -44,8 +44,8 @@ $filemanager-progressbox-shadow-color: null !default;
 }
 
 @if $color == "dark" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-focus-bg !default;
@@ -54,18 +54,18 @@ $filemanager-progressbox-shadow-color: null !default;
 }
 
 @if $color == "darkmoon" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-accent !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default;
+  $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default;
 }
 
 @if $color == "darkviolet" {
-  $filemanager-file-toolbar-bg: lighten($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-focus-bg !default;
@@ -74,8 +74,8 @@ $filemanager-progressbox-shadow-color: null !default;
 }
 
 @if $color == "greenmist" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-accent !default;
@@ -84,8 +84,8 @@ $filemanager-progressbox-shadow-color: null !default;
 }
 
 @if $color == "light" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-focus-bg !default;
@@ -94,8 +94,8 @@ $filemanager-progressbox-shadow-color: null !default;
 }
 
 @if $color == "softblue" {
-  $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default;
-  $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default;
+  $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
+  $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
   $filemanager-file-item-focused-bg: $base-focus-bg !default;

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

@@ -99,7 +99,8 @@
   }
 
   .dx-filemanager-fileuploader-dropzone-placeholder {
-    border: 2px solid $base-accent;
+    border: 2px solid;
+    border-color: $base-accent;
   }
 
   .dx-filemanager-container {
@@ -148,7 +149,8 @@
     }
 
     &.dx-state-focused {
-      border: $filemanager-file-item-focused-border 1px solid;
+      border: 1px solid;
+      border-color: $filemanager-file-item-focused-border;
     }
 
     &.dx-item-selected.dx-state-focused {

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

@@ -13,7 +13,7 @@ $fileuploader-falename-status-color: null !default;
 $fileuploader-border-color: $base-border-color !default;
 
 @if $color == "carmine" {
-  $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -21,27 +21,27 @@ $fileuploader-border-color: $base-border-color !default;
 }
 
 @if $color == "dark" {
-  $fileuploader-falename-status-color: darken($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
-  $fileuploader-falename-status-color: darken($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
-  $fileuploader-falename-status-color: darken($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
-  $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
-  $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default;
+  $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default;
 }
 $never-used: collector((
 "$fileuploader-filename-color": $fileuploader-filename-color,

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

@@ -62,7 +62,8 @@ $generic-fileuploader-file-wrapper-border-size: 3px;
 
   .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
     padding: $generic-fileuploader-vertical-padding * 2 $generic-fileuploader-vertical-padding + 2px;
-    border: $generic-fileuploader-file-wrapper-border-size dashed $fileuploader-border-color;
+    border: $generic-fileuploader-file-wrapper-border-size dashed;
+    border-color: $fileuploader-border-color;
   }
 }