npm - devextreme-themebuilder - Versions diffs - 25.2.7 → 26.1.2-beta - Mend

devextreme-themebuilder 25.2.7 → 26.1.2-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (266) hide show

package/data/scss/widgets/generic/speedDialAction/_colors.scss CHANGED Viewed

@@ -17,8 +17,8 @@ $speed-dial-action-shading-color: null !default;
 @if $color == "carmine" {
   $speed-dial-action-bg: $base-bg !default;
-  $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }
@@ -32,49 +32,49 @@ $speed-dial-action-shading-color: null !default;
 }
 @if $color == "dark" {
-  $speed-dial-action-bg: lighten($base-bg, 3%) !default;
-  $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 9%) !default;
-  $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 26%) !default;
+  $speed-dial-action-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 9%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 26%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }
 @if $color == "darkmoon" {
-  $speed-dial-action-bg: lighten($base-bg, 3%) !default;
-  $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 9%) !default;
-  $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 26%) !default;
+  $speed-dial-action-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 9%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 26%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }
 @if $color == "darkviolet" {
-  $speed-dial-action-bg: lighten($base-bg, 3%) !default;
-  $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 9%) !default;
-  $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 26%) !default;
+  $speed-dial-action-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 9%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 26%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }
 @if $color == "greenmist" {
   $speed-dial-action-bg: $base-bg !default;
-  $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }
 @if $color == "light" {
   $speed-dial-action-bg: $base-bg !default;
-  $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }
 @if $color == "softblue" {
   $speed-dial-action-bg: $base-bg !default;
-  $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default;
+  $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default;
+  $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default;
   $speed-dial-action-color: $base-text-color !default;
   $speed-dial-action-shading-color: $overlay-shader-bg !default;
 }

package/data/scss/widgets/generic/splitterBar/_colors.scss CHANGED Viewed

@@ -14,7 +14,7 @@ $splitter-bg: null !default;
 }
 @if $color == "contrast" {
-  $splitter-bg: darken($base-bg, 13.5%) !default;
+  $splitter-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
 }
 @if $color == "dark" {

package/data/scss/widgets/generic/stepper/_colors.scss CHANGED Viewed

@@ -48,99 +48,99 @@ $stepper-connector-bg: $base-border-color !default;
 $stepper-connector-value-bg: $base-text-color !default;
 @if $color == "carmine" {
-  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
-  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default;
 }
 @if $color == "contrast" {
-  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
-  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-default !default;
   $stepper-step-accent-hover-bg: $base-inverted-bg !default;
   $stepper-step-danger-hover-bg: $base-inverted-bg !default;
-  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default;
 }
 @if $color == 'dark' {
-  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
-  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default;
 }
 @if $color == "darkmoon" {
-  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
-  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default;
 }
 @if $color == "darkviolet" {
-  $stepper-step-base-bg: lighten($base-bg, 13.73%) !default;
-  $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default;
 }
 @if $color == "greenmist" {
-  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
-  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default;
 }
 @if $color == 'light' {
-  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
-  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default;
 }
 @if $color == "softblue" {
-  $stepper-step-base-bg: darken($base-bg, 13.33%) !default;
-  $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default;
   $stepper-step-accent-bg: $base-accent !default;
-  $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default;
+  $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default;
+  $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default;
-  $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default;
 }
 $stepper-step-base-border-color: $stepper-step-base-bg !default;
 $stepper-step-base-hover-border-color: $stepper-step-base-hover-bg !default;

package/data/scss/widgets/generic/switch/_colors.scss CHANGED Viewed

@@ -29,16 +29,16 @@ $switch-border-radius: null !default;
 @if $color == "carmine" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(darken($switch-bg, 62.5%), $alpha: 0.2) !default;
+  $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: lighten($base-text-color, 40%) !default;
-  $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: lighten($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
@@ -54,7 +54,7 @@ $switch-border-radius: null !default;
   $switch-active-border-color: $base-border-color !default;
   $switch-off-color: $base-text-color !default;
   $switch-handle-off-bg: $base-inverted-bg !default;
-  $switch-readonly-border-color: darken($switch-border-color, 50%) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -50%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius - 2px !default;
 }
@@ -62,15 +62,15 @@ $switch-border-radius: null !default;
 @if $color == "dark" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: lighten($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: 17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(lighten($switch-bg, 62.5%), $alpha: 0.2) !default;
+  $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: darken($base-text-color, 40%) !default;
-  $switch-handle-off-bg: darken($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: darken($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
@@ -78,15 +78,15 @@ $switch-border-radius: null !default;
 @if $color == "darkmoon" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: lighten($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: 17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(lighten($switch-bg, 62.5%), $alpha: 0.2) !default;
+  $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: darken($base-text-color, 40%) !default;
-  $switch-handle-off-bg: darken($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: darken($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
@@ -94,15 +94,15 @@ $switch-border-radius: null !default;
 @if $color == "darkviolet" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: lighten($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: 17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(lighten($switch-bg, 62.5%), $alpha: 0.2) !default;
+  $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: darken($base-text-color, 40%) !default;
-  $switch-handle-off-bg: darken($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: darken($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
@@ -110,15 +110,15 @@ $switch-border-radius: null !default;
 @if $color == "greenmist" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
+  $switch-container-active-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: lighten($base-text-color, 40%) !default;
-  $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: lighten($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
@@ -126,15 +126,15 @@ $switch-border-radius: null !default;
 @if $color == "light" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(darken($switch-bg, 62.5%), $alpha: 0.2) !default;
+  $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: lighten($base-text-color, 40%) !default;
-  $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: lighten($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
@@ -142,15 +142,15 @@ $switch-border-radius: null !default;
 @if $color == "softblue" {
   $switch-bg: $base-element-bg !default;
   $switch-handle-bg: $base-accent !default;
-  $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default;
+  $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default;
   $switch-hover-border-color: $base-accent !default;
   $switch-focused-border-color: $base-focus-bg !default;
-  $switch-container-active-bg: color.change(darken($switch-bg, 62.5%), $alpha: 0.2) !default;
+  $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $switch-hover-bg: transparent !default;
   $switch-active-border-color: $base-accent !default;
-  $switch-off-color: lighten($base-text-color, 40%) !default;
-  $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default;
-  $switch-readonly-border-color: lighten($switch-border-color, 9%) !default;
+  $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
+  $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
+  $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
   $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }

package/data/scss/widgets/generic/switch/_index.scss CHANGED Viewed

@@ -67,7 +67,8 @@ $generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weig
   margin: 0 (-$generic-switch-container-adjustment) 0 0;
   padding: 0 $generic-switch-handle-offset;
   height: $generic-switch-height;
-  border: $generic-switch-border-weight solid $switch-border-color;
+  border: $generic-switch-border-weight solid;
+  border-color: $switch-border-color;
   background: $switch-bg;
   border-radius: $switch-border-radius;
 }

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss CHANGED Viewed

@@ -20,10 +20,12 @@
         null,
         null,
         null,
+        null,
       );
       margin-block-start: -$generic-tabs-border-width;
       border-block-start: $generic-tabpanel-tab-border-selected-bottom;
+      border-block-start-color: $tabs-tab-selected-bg;
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss CHANGED Viewed

@@ -20,10 +20,12 @@
         $generic-tabpanel-tab-border-transparent,
         null,
         null,
+        null,
       );
       margin-inline-end: -$generic-tabs-border-width;
       border-inline-end: $generic-tabpanel-tab-border-selected-bottom;
+      border-inline-end-color: $tabs-tab-selected-bg;
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss CHANGED Viewed

@@ -20,10 +20,12 @@
         null,
         null,
         $generic-tabpanel-tab-border-transparent,
+        null,
       );
       margin-inline-start: -$generic-tabs-border-width;
       border-inline-start: $generic-tabpanel-tab-border-selected-bottom;
+      border-inline-start-color: $tabs-tab-selected-bg;
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss CHANGED Viewed

@@ -20,10 +20,12 @@
         null,
         $generic-tabpanel-tab-border-transparent,
         null,
+        null,
       );
       margin-bottom: -$generic-tabs-border-width;
       border-block-end: $generic-tabpanel-tab-border-selected-bottom;
+      border-block-end-color: $tabs-tab-selected-bg;
     }
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss CHANGED Viewed

@@ -33,5 +33,6 @@
   .dx-multiview-wrapper {
     border: $generic-tabs-border;
+    border-color: $tabs-border-color;
   }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss CHANGED Viewed

@@ -16,13 +16,16 @@
   > .dx-tabpanel-tabs {
     .dx-tabs-wrapper {
       border-block-start: $generic-tabs-border;
+      border-block-start-color: $tabs-border-color;
       border-block-end: $generic-tabs-border;
+      border-block-end-color: $tabs-border-color;
       @include dx-tabs-border-mixin(
         none,
         $generic-tabs-border,
         none,
         $generic-tabs-border,
+        $tabs-border-color,
       );
     }
@@ -32,6 +35,7 @@
         $generic-tabs-border-width solid,
         none,
         $generic-tabs-border-width solid,
+        null,
       );
       &::after {

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss CHANGED Viewed

@@ -16,7 +16,9 @@
   > .dx-tabpanel-tabs {
     .dx-tabs-wrapper {
       border-inline-start: $generic-tabs-border;
+      border-inline-start-color: $tabs-border-color;
       border-inline-end: $generic-tabs-border;
+      border-inline-end-color: $tabs-border-color;
     }
     .dx-tabs-scrollable {
@@ -25,6 +27,7 @@
         none,
         $generic-tabs-border-width solid,
         none,
+        null,
       );
       &::after {

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss CHANGED Viewed

@@ -16,7 +16,9 @@
   > .dx-tabpanel-tabs {
     .dx-tabs-wrapper {
       border-inline-start: $generic-tabs-border;
+      border-inline-start-color: $tabs-border-color;
       border-inline-end: $generic-tabs-border;
+      border-inline-end-color: $tabs-border-color;
     }
     .dx-tabs-scrollable {
@@ -25,6 +27,7 @@
         none,
         $generic-tabs-border-width solid,
         none,
+        null,
       );
       &::after {

package/data/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss CHANGED Viewed

@@ -16,13 +16,16 @@
   > .dx-tabpanel-tabs {
     .dx-tabs-wrapper {
       border-block-start: $generic-tabs-border;
+      border-block-start-color: $tabs-border-color;
       border-block-end: $generic-tabs-border;
+      border-block-end-color: $tabs-border-color;
       @include dx-tabs-border-mixin(
         none,
         $generic-tabs-border,
         none,
         $generic-tabs-border,
+        $tabs-border-color,
       );
     }
@@ -32,6 +35,7 @@
         $generic-tabs-border-width solid,
         none,
         $generic-tabs-border-width solid,
+        null,
       );
       &::after {

package/data/scss/widgets/generic/tabPanel/variables/_borders.scss CHANGED Viewed

@@ -18,7 +18,7 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "carmine" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
@@ -28,17 +28,17 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "contrast" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
 }
 @if $color == "dark" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
@@ -48,7 +48,7 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "darkmoon" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
@@ -58,7 +58,7 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "darkviolet" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
@@ -68,7 +68,7 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "greenmist" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
@@ -78,7 +78,7 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "light" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
@@ -88,7 +88,7 @@ $generic-tabpanel-tab-border-focused-right: null !default;
 @if $color == "softblue" {
   $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
+  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
   $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
   $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;

package/data/scss/widgets/generic/tabs/layout/navigation-button/_vertical.scss CHANGED Viewed

@@ -17,12 +17,14 @@
     border-color: $tabs-border-color;
     &.dx-tabs-nav-button-left {
-      border-right: $generic-tabs-border-width solid $tabs-border-color;
+      border-right: $generic-tabs-border-width solid;
+      border-right-color: $tabs-border-color;
       border-bottom: none;
     }
     &.dx-tabs-nav-button-right {
-      border-left: $generic-tabs-border-width solid $tabs-border-color;
+      border-left: $generic-tabs-border-width solid;
+      border-left-color: $tabs-border-color;
       border-top: none;
     }
   }