devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -27,11 +27,11 @@ $htmleditor-cells-separator-bg: color.change($base-accent, $alpha: 0.5) !default
 
 
 @if $color == "carmine" {
-  $htmleditor-normal-format-active-bg: darken($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: darken($base-success, 10%) !default;
-  $htmleditor-mention-bg: darken($base-bg, 9%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
@@ -45,56 +45,56 @@ $htmleditor-cells-separator-bg: color.change($base-accent, $alpha: 0.5) !default
 }
 
 @if $color == "dark" {
-  $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: darken($base-success, 10%) !default;
-  $htmleditor-mention-bg: lighten($base-bg, 13.5%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "darkmoon" {
-  $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: lighten($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: lighten($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: lighten($base-success, 10%) !default;
-  $htmleditor-mention-bg: lighten($base-bg, 13.5%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "darkviolet" {
-  $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: lighten($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: lighten($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: lighten($base-success, 10%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $htmleditor-mention-bg: $base-select-bg !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "greenmist" {
-  $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: lighten($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: lighten($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: lighten($base-success, 10%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $htmleditor-mention-bg: $base-accent !default;
-  $htmleditor-mention-color: lighten($base-text-color, 100%) !default;
+  $htmleditor-mention-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $htmleditor-normal-format-active-bg: darken($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: darken($base-success, 10%) !default;
-  $htmleditor-mention-bg: darken($base-bg, 13.5%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "softblue" {
-  $htmleditor-normal-format-active-bg: darken($base-element-bg, 10%) !default;
-  $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default;
-  $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default;
-  $htmleditor-success-format-active-bg: darken($base-success, 10%) !default;
-  $htmleditor-mention-bg: darken($base-bg, 13.5%) !default;
+  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
+  $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 

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

@@ -23,7 +23,8 @@
     position: relative;
 
     &:first-child {
-      border-bottom: 1px solid $htmleditor-toolbar-border-color;
+      border-bottom: 1px solid;
+      border-bottom-color: $htmleditor-toolbar-border-color;
     }
   }
 
@@ -251,7 +252,8 @@
 
   .dx-fileuploader-input-wrapper {
     padding: $generic-html-editor-add-image-dialog-fileuploader-padding;
-    border: $generic-fileuploader-file-wrapper-border-size dashed $base-border-color;
+    border: $generic-fileuploader-file-wrapper-border-size dashed;
+    border-color: $base-border-color;
 
     .dx-fileuploader-input-label {
       border-width: 0;

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

@@ -9,57 +9,57 @@ $informer-info-color: null !default;
 $informer-info-background-color: null !default;
 
 @if $color == "carmine" {
-  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 26.91), 5.49);
-  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -347), 26.69), 33.14);
+  $informer-error-color: color.adjust($base-danger, $hue: -351deg, $saturation: -26.91%, $space: hsl, $lightness: -5.49%);
+  $informer-error-background-color: color.adjust($base-danger, $hue: -347deg, $saturation: -26.69%, $space: hsl, $lightness: 33.14%);
   $informer-info-color: $base-text-color;
-  $informer-info-background-color: lighten($base-text-color, 72.16);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl);
 }
 
 @if $color == "contrast" {
-  $informer-error-color: darken(desaturate(adjust-hue($base-danger, 2), 16.93), 6.08);
+  $informer-error-color: color.adjust($base-danger, $hue: 2deg, $saturation: -16.93%, $space: hsl, $lightness: -6.08%);
   $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: darken($base-text-color, 12.94);
-  $informer-info-background-color: darken($base-text-color, 68.63);;
+  $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl);;
 }
 
 @if $color == "dark" {
   $informer-error-color: $base-danger;
   $informer-error-background-color: rgba(212, 63, 58, 0.1);
   $informer-info-color: $base-text-color;
-  $informer-info-background-color: darken($base-text-color, 55.69)
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -55.69%, $space: hsl)
 }
 
 @if $color == "darkmoon" {
-  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -342), 28.85), 6.67);
+  $informer-error-color: color.adjust($base-danger, $hue: -342deg, $saturation: -28.85%, $space: hsl, $lightness: -6.67%);
   $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: darken($base-text-color, 12.94);
-  $informer-info-background-color: darken($base-text-color, 68.63);
+  $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl);
 }
 
 @if $color == "darkviolet" {
   $informer-error-color: $base-danger;
   $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 9.41);
-  $informer-info-background-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 65.10);
+  $informer-info-color: color.adjust($base-text-color, $hue: -210deg, $saturation: -11.11%, $space: hsl, $lightness: -9.41%);
+  $informer-info-background-color: color.adjust($base-text-color, $hue: -210deg, $saturation: -11.11%, $space: hsl, $lightness: -65.10%);
 }
 
 @if $color == "greenmist" {
-  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 27.05), 4.90);
-  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -348), 26.83), 33.73);
-  $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -191), 32.77), 3.33);
-  $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -191), 32.77), 68.82)
+  $informer-error-color: color.adjust($base-danger, $hue: -351deg, $saturation: -27.05%, $space: hsl, $lightness: -4.90%);
+  $informer-error-background-color: color.adjust($base-danger, $hue: -348deg, $saturation: -26.83%, $space: hsl, $lightness: 33.73%);
+  $informer-info-color: color.adjust($base-text-color, $hue: -191deg, $saturation: -32.77%, $space: hsl, $lightness: -3.33%);
+  $informer-info-background-color: color.adjust($base-text-color, $hue: -191deg, $saturation: -32.77%, $space: hsl, $lightness: 68.82%)
 }
 
 @if $color == "light" {
   $informer-error-color: $base-danger;
-  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-error-background-color: color.adjust($base-danger, $hue: 4deg, $saturation: 0.22%, $space: hsl, $lightness: 38.63%);
   $informer-info-color: $base-text-color;
-  $informer-info-background-color: lighten($base-text-color, 72.16);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl);
 }
 
 @if $color == "softblue" {
   $informer-error-color: $base-danger;
-  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-error-background-color: color.adjust($base-danger, $hue: 4deg, $saturation: 0.22%, $space: hsl, $lightness: 38.63%);
   $informer-info-color: $base-text-color;
-  $informer-info-background-color: lighten($base-text-color, 72.16);
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl);
 }

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

@@ -49,7 +49,7 @@ $list-item-chevron-icon-color: $base-icon-color !default;
 
 @if $color == "carmine" {
   $list-group-color: $base-header-color !default;
-  $list-group-header-bg: darken($base-bg, 2%) !default;
+  $list-group-header-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default; // #f05b41 => #ffb5a8
   $list-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default;
@@ -62,9 +62,9 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: $base-accent !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: lighten($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }
@@ -86,14 +86,14 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-holdmenu-shadow-color: $base-shadow-color !default;
   $list-item-ghost-color: $base-text-color !default;
   $list-item-ghost-border-color: $base-border-color !default;
-  $list-group-header-border-bottom: 1px solid $list-border-color !default;
+  $list-group-header-border-bottom: 1px solid !default;
   $list-group-header-default-padding-top: 10px !default;
   $list-group-header-compact-padding-top: 5px !default;
 }
 
 @if $color == "dark" {
   $list-group-color: $list-normal-color !default;
-  $list-group-header-bg: color.change(lighten($base-bg, 6.5%), $alpha: 0.05) !default;
+  $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: 6.5%, $space: hsl), $alpha: 0.05) !default;
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: $base-select-bg !default;
   $list-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default;
@@ -106,16 +106,16 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: $base-accent !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: darken($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }
 
 @if $color == "darkmoon" {
   $list-group-color: $list-normal-color !default;
-  $list-group-header-bg: color.change(darken($base-bg, 37%), $alpha: 0) !default;
+  $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: -37%, $space: hsl), $alpha: 0) !default;
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: $base-select-bg !default;
   $list-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default;
@@ -128,16 +128,16 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: $base-accent !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: darken($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }
 
 @if $color == "darkviolet" {
   $list-group-color: $base-header-color !default;
-  $list-group-header-bg: color.change(lighten($base-bg, 6.5%), $alpha: 0.05) !default;
+  $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: 6.5%, $space: hsl), $alpha: 0.05) !default;
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default;
   $list-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default;
@@ -150,16 +150,16 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: #b88fff !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: darken($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }
 
 @if $color == "greenmist" {
   $list-group-color: $base-accent !default;
-  $list-group-header-bg: color.change(darken($base-bg, 6.5%), $alpha: 0.05) !default;
+  $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: -6.5%, $space: hsl), $alpha: 0.05) !default;
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: $base-select-bg !default;
   $list-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default;
@@ -172,16 +172,16 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: $base-accent !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: lighten($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }
 
 @if $color == "light" {
   $list-group-color: $list-normal-color !default;
-  $list-group-header-bg: color.change(darken($base-bg, 6.5%), $alpha: 0.05) !default;
+  $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: -6.5%, $space: hsl), $alpha: 0.05) !default;
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: $base-select-bg !default;
   $list-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default;
@@ -194,16 +194,16 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: $base-accent !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: lighten($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }
 
 @if $color == "softblue" {
   $list-group-color: $base-icon-color !default;
-  $list-group-header-bg: darken($base-bg, 2%) !default; // #fff => #fafbfc
+  $list-group-header-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; // #fff => #fafbfc
   $list-item-hover-bg: $base-hover-bg !default;
   $list-item-selected-bg: $base-select-bg !default;
   $list-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default;
@@ -216,9 +216,9 @@ $list-item-chevron-icon-color: $base-icon-color !default;
   $list-item-active-bg: $base-accent !default;
   $list-holdmenu-border-color: $list-border-color !default;
   $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $list-item-ghost-color: lighten($base-text-color, 38.5%) !default;
+  $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
   $list-item-ghost-border-color: $base-accent !default;
-  $list-group-header-border-bottom: 2px solid $list-border-color !default;
+  $list-group-header-border-bottom: 2px solid !default;
   $list-group-header-default-padding-top: 20px !default;
   $list-group-header-compact-padding-top: 10px !default;
 }

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

@@ -15,9 +15,9 @@
 // adduse
 @use "../badge";
 
-$generic-list-border: $generic-list-border-width solid $list-border-color;
-$generic-list-item-border: $generic-list-item-border-width solid $list-border-color;
-$generic-list-search-editor-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
+$generic-list-border: $generic-list-border-width solid;
+$generic-list-item-border: $generic-list-item-border-width solid;
+$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
 
 .dx-list-item-chevron {
   @include dx-icon(chevronnext);
@@ -136,7 +136,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     border: none;
 
     &.dx-list-with-search .dx-scrollable-wrapper {
-      height: calc(100% - #{round($generic-list-search-editor-height + $generic-list-searchbox-margin-bottom)});
+      height: calc(100% - #{math.round($generic-list-search-editor-height + $generic-list-searchbox-margin-bottom)});
     }
 
     &.dx-list-select-decorator-enabled {
@@ -152,7 +152,8 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
         &.dx-state-focused {
           .dx-radiobutton-icon,
           .dx-checkbox-icon {
-            border: 1px solid $checkbox-border-color-focused;
+            border: 1px solid;
+            border-color: $checkbox-border-color-focused;
           }
         }
       }
@@ -173,7 +174,9 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     font-weight: bold;
     padding: $generic-list-group-header-vertical-padding $item-horizontal-padding $generic-list-item-vertical-padding $item-horizontal-padding;
     border-top: $generic-list-item-border;
+    border-top-color: $list-border-color;
     border-bottom: $list-group-header-border-bottom;
+    border-bottom-color: $list-border-color;
     background: $list-group-header-bg;
     color: $list-group-color;
     display: flex;
@@ -229,8 +232,10 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
         &.dx-state-hover {
           color: $list-item-ghost-color;
           background: $list-item-ghost-bg;
-          border-top: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5);
-          border-bottom: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5);
+          border-top: 1px solid;
+          border-top-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
+          border-bottom: 1px solid;
+          border-bottom-color: color.change($list-item-ghost-border-color, $alpha: 0.5);
           box-shadow: 0 0 1px color.change($list-item-ghost-shadow-color, $alpha: 0.1), 0 1px 3px color.change($list-item-ghost-shadow-color, $alpha: 0.2);
         }
       }
@@ -240,6 +245,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
   .dx-list-item,
   .dx-list .dx-empty-message {
     border-top: $generic-list-item-border;
+    border-top-color: $list-border-color;
     color: $list-normal-color;
 
     .dx-list-item-separator-hidden & {
@@ -265,9 +271,11 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
 
   .dx-list-border-visible {
     border: $generic-list-border;
+    border-color: $list-border-color;
 
     .dx-list-select-all {
       border-bottom: $generic-list-border;
+      border-bottom-color: $list-border-color;
     }
   }
 
@@ -317,6 +325,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
   .dx-list-select-all {
     padding: $generic-list-item-vertical-padding - 1px 0 $generic-list-item-vertical-padding - 2px;
     border-bottom: $generic-list-item-border;
+    border-bottom-color: $list-border-color;
   }
 
   .dx-list-select-all-checkbox {
@@ -375,7 +384,8 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
 
   .dx-list-context-menucontent {
     background-color: $list-holdmenu-bg;
-    border: 1px solid $list-holdmenu-border-color;
+    border: 1px solid;
+    border-color: $list-holdmenu-border-color;
     border-radius: 0;
     box-shadow: 0 3px 10px $list-holdmenu-shadow-color;
   }

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

@@ -15,64 +15,64 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default;
 }
 
 @if $color == "contrast" {
   $loadindicator-bg: $base-inverted-bg !default;
   $loadindicator-segment-shadow-color: $base-shadow-color !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
-  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default;
 }
 
 @if $color == "dark" {
-  $loadindicator-bg: darken($base-text-color, 17.5%) !default;
+  $loadindicator-bg: color.adjust($base-text-color, $lightness: -17.5%, $space: hsl) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
-  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default;
 }
 
 @if $color == "darkmoon" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
-  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default;
 }
 
 @if $color == "darkviolet" {
   $loadindicator-bg: $base-accent-highlight-color !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
-  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default;
 }
 
 @if $color == "greenmist" {
-  $loadindicator-bg: lighten($base-text-color, 17.5%) !default;
+  $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default;
 }
 
 @if $color == "light" {
-  $loadindicator-bg: lighten($base-text-color, 17.5%) !default;
+  $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default;
 }
 
 @if $color == "softblue" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default;
 }
 
 $never-used: collector((

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

@@ -10,7 +10,8 @@
 
 
 .dx-loadpanel-content {
-  border: 1px solid $loadpanel-border-color;
+  border: 1px solid;
+  border-color: $loadpanel-border-color;
   background: $loadpanel-content-bg;
   border-radius: $loadpanel-content-border-radius;
   box-shadow: 0 6px 12px $loadpanel-content-shadow-color;

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

@@ -31,7 +31,7 @@ $menu-container-shadow-color: null !default;
   $menu-item-focused-bg: $base-focus-bg !default;
   $menu-item-hovered-color: $menu-color !default;
   $menu-item-expanded-color: $menu-color !default;
-  $menu-item-selected-bg: lighten($base-accent, 21%) !default; // #f05b41 => #ffb5a8
+  $menu-item-selected-bg: color.adjust($base-accent, $lightness: 21%, $space: hsl) !default; // #f05b41 => #ffb5a8
   $menu-item-selected-color: $base-text-color !default;
   $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.15) !default;
@@ -54,7 +54,7 @@ $menu-container-shadow-color: null !default;
   $menu-item-hover-bg: $base-hover-bg !default;
   $menu-item-hovered-color: $menu-color !default;
   $menu-item-expanded-color: $menu-color !default;
-  $menu-item-selected-bg: lighten($base-bg, 10%) !default;
+  $menu-item-selected-bg: color.adjust($base-bg, $lightness: 10%, $space: hsl) !default;
   $menu-item-selected-color: $base-text-color !default;
   $menu-item-focused-bg: $base-focus-bg !default;
   $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
@@ -66,7 +66,7 @@ $menu-container-shadow-color: null !default;
   $menu-item-hover-bg: $base-hover-bg !default;
   $menu-item-hovered-color: $base-hover-color !default;
   $menu-item-expanded-color: $menu-color !default;
-  $menu-item-selected-bg: lighten($base-bg, 10%) !default;
+  $menu-item-selected-bg: color.adjust($base-bg, $lightness: 10%, $space: hsl) !default;
   $menu-item-selected-color: $base-text-color !default;
   $menu-item-focused-bg: $base-focus-bg !default;
   $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
@@ -86,11 +86,11 @@ $menu-container-shadow-color: null !default;
 }
 
 @if $color == "greenmist" {
-  $menu-popup-bg: lighten($base-bg, 100%) !default;
+  $menu-popup-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $menu-item-hover-bg: $base-hover-bg !default;
   $menu-item-hovered-color: $menu-color !default;
   $menu-item-expanded-color: $menu-color !default;
-  $menu-item-selected-bg: darken($base-bg, 10%) !default;
+  $menu-item-selected-bg: color.adjust($base-bg, $lightness: -10%, $space: hsl) !default;
   $menu-item-selected-color: $base-text-color !default;
   $menu-item-focused-bg: $base-focus-bg !default;
   $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
@@ -103,7 +103,7 @@ $menu-container-shadow-color: null !default;
   $menu-item-focused-bg: $base-focus-bg !default;
   $menu-item-hovered-color: $menu-color !default;
   $menu-item-expanded-color: $menu-color !default;
-  $menu-item-selected-bg: darken($base-bg, 10%) !default;
+  $menu-item-selected-bg: color.adjust($base-bg, $lightness: -10%, $space: hsl) !default;
   $menu-item-selected-color: $base-text-color !default;
   $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.15) !default;
@@ -114,7 +114,7 @@ $menu-container-shadow-color: null !default;
   $menu-item-hover-bg: $base-hover-bg !default;
   $menu-item-hovered-color: $menu-color !default;
   $menu-item-expanded-color: $menu-color !default;
-  $menu-item-selected-bg: darken($base-bg, 10%) !default;
+  $menu-item-selected-bg: color.adjust($base-bg, $lightness: -10%, $space: hsl) !default;
   $menu-item-selected-color: $base-text-color !default;
   $menu-item-focused-bg: $base-focus-bg !default;
   $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;

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

@@ -14,6 +14,7 @@
 .dx-context-menu-container-border {
   background-color: transparent;
   border: $generic-menu-popup-border;
+  border-color: $menu-popup-border-color;
   box-shadow: 0 1px 1px $menu-container-shadow-color;
 }
 
@@ -85,7 +86,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;
 
     &,
@@ -111,6 +113,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
   }
 }