devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -15,7 +15,7 @@ $generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px;
 $generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px;
 $generic-menu-arrow-image-size: 7px;
 
-$generic-menu-popup-border: 1px solid $menu-popup-border-color;
+$generic-menu-popup-border: 1px solid;
 
 
 .dx-menu-item {

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

@@ -18,10 +18,10 @@ $numberbox-spin-icon-color: $base-icon-color !default;
 
 
 @if $color == "carmine" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -32,45 +32,45 @@ $numberbox-spin-icon-color: $base-icon-color !default;
 }
 
 @if $color == "dark" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
-  $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default;
+  $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $numberbox-spin-active-color: $base-text-color !default;
   $numberbox-spin-hover-border-color: transparent !default;
-  $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default;
+  $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
 }
 $never-used: collector((
 "$numberbox-spin-active-bg": $numberbox-spin-active-bg,

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

@@ -30,7 +30,7 @@ $overlay-content-border-radius: $base-border-radius + 2px !default;
 }
 
 @if $color == "darkmoon" {
-  $overlay-content-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default;
+  $overlay-content-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default;
   $overlay-shader-bg: color.change($base-bg, $alpha: 0.8) !default;
 }
 

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

@@ -13,10 +13,10 @@ $pagination-page-border-radius: $base-border-radius - 1px !default;
 $pagination-outline-color: null !default;
 
 @if $color == "carmine" {
-  $pagination-page-selected-color: lighten($base-text-color, 100%) !default;
+  $pagination-page-selected-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default;
   $pagination-page-selected-bg: $base-accent !default;
   $pagination-page-selected-border-color: transparent !default;
-  $pagination-outline-color: mix($base-bg, darken($base-accent, 15%), 20%) !default;
+  $pagination-outline-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -15%, $space: hsl), 20%) !default;
 }
 
 @if $color == "contrast" {
@@ -28,44 +28,44 @@ $pagination-outline-color: null !default;
 
 @if $color == "dark" {
   $pagination-page-selected-color: $base-text-color !default;
-  $pagination-page-selected-bg: lighten($base-bg, 17%) !default;
+  $pagination-page-selected-bg: color.adjust($base-bg, $lightness: 17%, $space: hsl) !default;
   $pagination-page-selected-border-color: transparent !default;
-  $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
 }
 
 @if $color == "darkmoon" {
   $pagination-page-selected-color: $base-bg !default;
   $pagination-page-selected-bg: $base-accent !default;
   $pagination-page-selected-border-color: transparent !default;
-  $pagination-outline-color: mix($base-bg, darken($base-accent, 20%), 20%) !default;
+  $pagination-outline-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -20%, $space: hsl), 20%) !default;
 }
 
 @if $color == "darkviolet" {
-  $pagination-page-selected-bg: lighten($base-bg, 17%) !default;
+  $pagination-page-selected-bg: color.adjust($base-bg, $lightness: 17%, $space: hsl) !default;
   $pagination-page-selected-border-color: transparent !default;
   $pagination-page-selected-color: $base-text-color !default;
-  $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
 }
 
 @if $color == "greenmist" {
   $pagination-page-selected-bg: $base-link-color !default;
   $pagination-page-selected-border-color: transparent !default;
-  $pagination-page-selected-color: lighten($base-text-color, 100%) !default;
-  $pagination-outline-color: mix($base-bg, darken($base-focus-bg, 15%), 20%) !default;
+  $pagination-page-selected-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default;
+  $pagination-outline-color: color.mix($base-bg, color.adjust($base-focus-bg, $lightness: -15%, $space: hsl), 20%) !default;
 }
 
 @if $color == "light" {
   $pagination-page-selected-color: $base-text-color !default;
-  $pagination-page-selected-bg: darken($base-bg, 17%) !default;
+  $pagination-page-selected-bg: color.adjust($base-bg, $lightness: -17%, $space: hsl) !default;
   $pagination-page-selected-border-color: transparent !default;
-  $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
 }
 
 @if $color == "softblue" {
   $pagination-page-selected-color: $base-text-color !default;
   $pagination-page-selected-bg: $base-border-color !default;
   $pagination-page-selected-border-color: transparent !default;
-  $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default;
+  $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default;
 }
 $never-used: collector((
 "$pagination-page-selected-color": $pagination-page-selected-color,

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

@@ -13,7 +13,8 @@
 .dx-pagination {
   padding-top: $generic-pagination-paddings;
   padding-bottom: $generic-pagination-paddings;
-  border-top: 1px solid $base-border-color;
+  border-top: 1px solid;
+  border-top-color: $base-border-color;
 
   .dx-page,
   .dx-page-size,
@@ -25,7 +26,8 @@
     .dx-page:focus,
     .dx-page-size:focus,
     .dx-navigate-button:focus {
-      outline: 2px solid $pagination-outline-color;
+      outline: 2px solid;
+      outline-color: $pagination-outline-color;
       outline-offset: -2px;
     }
   }

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

@@ -26,15 +26,15 @@ $pivotgrid-spin-icon-color: null !default;
 
 @if $color == "carmine" {
   $pivotgrid-area-color: $base-header-color !default;
-  $pivotgrid-totalcolor: darken($pivotgrid-area-background, 2.7%) !default;
-  $pivotgrid-grandtotalcolor: darken($pivotgrid-area-background, 4%) !default;
-  $pivotgrid-field-area-text-color: darken($pivotgrid-area-color, 26.2%) !default;
+  $pivotgrid-totalcolor: color.adjust($pivotgrid-area-background, $lightness: -2.7%, $space: hsl) !default;
+  $pivotgrid-grandtotalcolor: color.adjust($pivotgrid-area-background, $lightness: -4%, $space: hsl) !default;
+  $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl) !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
   $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $pivotgrid-position-indicator-color: gray !default;
-  $pivotgrid-spin-icon-color: lighten($base-icon-color, 3%) !default;
+  $pivotgrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 3%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -51,23 +51,23 @@ $pivotgrid-spin-icon-color: null !default;
 }
 
 @if $color == "dark" {
-  $pivotgrid-area-color: darken($base-text-color, 30%) !default;
-  $pivotgrid-totalcolor: lighten($pivotgrid-area-background, 2.5%) !default;
+  $pivotgrid-area-color: color.adjust($base-text-color, $lightness: -30%, $space: hsl) !default;
+  $pivotgrid-totalcolor: color.adjust($pivotgrid-area-background, $lightness: 2.5%, $space: hsl) !default;
   $pivotgrid-grandtotalcolor: $base-hover-bg !default;
-  $pivotgrid-field-area-text-color: lighten($pivotgrid-area-color, 26.2%) !default;
+  $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: 26.2%, $space: hsl) !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
   $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $pivotgrid-position-indicator-color: gray !default;
-  $pivotgrid-spin-icon-color: darken($base-icon-color, 38%) !default;
+  $pivotgrid-spin-icon-color: color.adjust($base-icon-color, $lightness: -38%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
   $pivotgrid-area-color: $screen-text-color !default;
-  $pivotgrid-totalcolor: darken($base-bg, 2%) !default; // #465672 => #40506b
+  $pivotgrid-totalcolor: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; // #465672 => #40506b
   $pivotgrid-grandtotalcolor: $base-hover-bg !default;
-  $pivotgrid-field-area-text-color: lighten($pivotgrid-area-color, 26.2%) !default;
+  $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: 26.2%, $space: hsl) !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
   $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
@@ -77,10 +77,10 @@ $pivotgrid-spin-icon-color: null !default;
 }
 
 @if $color == "darkviolet" {
-  $pivotgrid-area-color: darken($base-text-color, 30%) !default;
+  $pivotgrid-area-color: color.adjust($base-text-color, $lightness: -30%, $space: hsl) !default;
   $pivotgrid-totalcolor: #1f1f2b !default;
   $pivotgrid-grandtotalcolor: color.change($base-accent-highlight-color, $alpha: 0.15) !default;
-  $pivotgrid-field-area-text-color: lighten($pivotgrid-area-color, 26.2%) !default;
+  $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: 26.2%, $space: hsl) !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
   $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
@@ -90,9 +90,9 @@ $pivotgrid-spin-icon-color: null !default;
 }
 
 @if $color == "greenmist" {
-  $pivotgrid-area-color: lighten($base-text-color, 38.5%) !default;
-  $pivotgrid-totalcolor: darken($base-bg, 1%) !default; // #f5f5f5 => #f0f2f2
-  $pivotgrid-grandtotalcolor: lighten($base-label-color, 40.6%) !default; // #728e94 => #e8eded
+  $pivotgrid-area-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
+  $pivotgrid-totalcolor: color.adjust($base-bg, $lightness: -1%, $space: hsl) !default; // #f5f5f5 => #f0f2f2
+  $pivotgrid-grandtotalcolor: color.adjust($base-label-color, $lightness: 40.6%, $space: hsl) !default; // #728e94 => #e8eded
   $pivotgrid-field-area-text-color: $base-text-color !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
@@ -103,23 +103,23 @@ $pivotgrid-spin-icon-color: null !default;
 }
 
 @if $color == "light" {
-  $pivotgrid-area-color: lighten($base-text-color, 38.5%) !default;
-  $pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 13.3%), $alpha: 0.2) !default;
-  $pivotgrid-grandtotalcolor: darken($base-bg, 4%) !default;
-  $pivotgrid-field-area-text-color: darken($pivotgrid-area-color, 26.2%) !default;
+  $pivotgrid-area-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
+  $pivotgrid-totalcolor: color.change(color.adjust($pivotgrid-area-background, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default;
+  $pivotgrid-grandtotalcolor: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
+  $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl) !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
   $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $pivotgrid-position-indicator-color: gray !default;
-  $pivotgrid-spin-icon-color: lighten($base-icon-color, 38.5%) !default;
+  $pivotgrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 38.5%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
   $pivotgrid-area-color: $base-icon-color !default;
-  $pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 4%), $alpha: 0.7) !default; // #fff => #f5f5f5
-  $pivotgrid-grandtotalcolor: darken($base-bg, 4%) !default; // #fff => #f5f5f5
-  $pivotgrid-field-area-text-color: darken($pivotgrid-area-color, 26.2%) !default;
+  $pivotgrid-totalcolor: color.change(color.adjust($pivotgrid-area-background, $lightness: -4%, $space: hsl), $alpha: 0.7) !default; // #fff => #f5f5f5
+  $pivotgrid-grandtotalcolor: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; // #fff => #f5f5f5
+  $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl) !default;
   $pivotgrid-accent-color: $base-accent !default;
   $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
   $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;

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

@@ -27,5 +27,6 @@
 }
 
 .dx-popover-arrow::after {
-  border: 1px solid $texteditor-border-color;
+  border: 1px solid;
+  border-color: $texteditor-border-color;
 }

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

@@ -33,7 +33,7 @@ $popup-border-radius: $overlay-content-border-radius !default;
 }
 
 @if $color == "greenmist" {
-  $popup-title-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
+  $popup-title-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default;
 }
 
 @if $color == "light" {

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

@@ -21,7 +21,8 @@ $generic-popup-toolbar-label-font-size: $generic-m-font-size;
 
 .dx-popup-wrapper {
   & > .dx-overlay-content {
-    border: 1px solid $overlay-border-color;
+    border: 1px solid;
+    border-color: $overlay-border-color;
     background: $overlay-content-bg;
     box-shadow: 0 6px 12px $overlay-content-shadow-color;
     border-radius: $popup-border-radius;
@@ -33,7 +34,8 @@ $generic-popup-toolbar-label-font-size: $generic-m-font-size;
 
   .dx-state-focused {
     &.dx-overlay-content {
-      border: 1px solid $base-accent;
+      border: 1px solid;
+      border-color: $base-accent;
     }
   }
 }
@@ -41,7 +43,8 @@ $generic-popup-toolbar-label-font-size: $generic-m-font-size;
 .dx-popup-title {
   position: relative;
   min-height: 28px;
-  border-bottom: 1px solid $popup-title-border-color;
+  border-bottom: 1px solid;
+  border-bottom-color: $popup-title-border-color;
   background: $popup-title-bg;
   color: $popup-title-color;
 

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

@@ -15,7 +15,7 @@ $progressbar-range-disabled-bg: color.change($base-accent, $alpha: 0.6) !default
 $progressbar-range-indeterminate-color: $base-accent !default;
 
 @if $color == "carmine" {
-  $progressbar-bg: darken($base-bg, 13.5%) !default;
+  $progressbar-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $progressbar-border-color: $base-border-color !default;
 }
 
@@ -25,7 +25,7 @@ $progressbar-range-indeterminate-color: $base-accent !default;
 }
 
 @if $color == "dark" {
-  $progressbar-bg: lighten($base-bg, 13.5%) !default;
+  $progressbar-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
   $progressbar-border-color: $base-border-color !default;
 }
 
@@ -35,22 +35,22 @@ $progressbar-range-indeterminate-color: $base-accent !default;
 }
 
 @if $color == "darkviolet" {
-  $progressbar-bg: lighten($base-bg, 13.5%) !default;
+  $progressbar-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
   $progressbar-border-color: $base-border-color !default;
 }
 
 @if $color == "greenmist" {
-  $progressbar-bg: darken($base-bg, 9%) !default;
+  $progressbar-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default;
   $progressbar-border-color: $base-border-color !default;
 }
 
 @if $color == "light" {
-  $progressbar-bg: darken($base-bg, 13.5%) !default;
+  $progressbar-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $progressbar-border-color: $base-border-color !default;
 }
 
 @if $color == "softblue" {
-  $progressbar-bg: darken($base-bg, 13.5%) !default;
+  $progressbar-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $progressbar-border-color: $base-border-color !default;
 }
 

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

@@ -13,11 +13,12 @@ $generic-bar-height: 6px;
 $generic-background-width: 90%;
 $generic-progressbar-border-radius: 2px;
 $generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
-$generic-progress-bar-border: 1px solid $progressbar-border-color;
+$generic-progress-bar-border: 1px solid;
 
 .dx-progressbar-container {
   height: $generic-bar-height;
   border: $generic-progress-bar-border;
+  border-color: $progressbar-border-color;
   background-color: $progressbar-bg;
   border-radius: $generic-progressbar-border-radius;
 }
@@ -32,7 +33,8 @@ $generic-progress-bar-border: 1px solid $progressbar-border-color;
 
 .dx-progressbar-range {
   position: relative;
-  border: 1px solid $progressbar-range-border-color;
+  border: 1px solid;
+  border-color: $progressbar-range-border-color;
   background-color: $progressbar-range-bg;
   margin-top: -1px;
   box-sizing: content-box;
@@ -45,6 +47,7 @@ $generic-progress-bar-border: 1px solid $progressbar-border-color;
   background-color: $progressbar-bg;
   background-size: $generic-background-width 5px;
   border: $generic-progress-bar-border;
+  border-color: $progressbar-border-color;
   border-radius: $generic-progressbar-border-radius;
   animation: dx-loader 2s linear infinite;
 

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

@@ -20,10 +20,10 @@ $radiogroup-readonly-border-color: null !default;
 @if $color == "carmine" {
   $radiogroup-checked-bg: $base-accent !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default;
+  $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -32,61 +32,61 @@ $radiogroup-readonly-border-color: null !default;
   $radiobutton-active-bg: $base-inverted-bg !default;
   $radiogroup-hover-border-color: $base-border-color !default;
   $radiobutton-focused-border-color: $base-focus-color !default;
-  $radiogroup-readonly-border-color: darken($radiogroup-border-color, 50%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -50%, $space: hsl) !default;
 }
 
 @if $color == "dark" {
   $radiogroup-checked-bg: $base-accent !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default;
+  $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: darken($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -9%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
   $radiogroup-checked-bg: $base-accent !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default;
+  $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: darken($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -9%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
   $radiogroup-checked-bg: $base-accent-highlight-color !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default;
+  $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: darken($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -9%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
   $radiogroup-checked-bg: $base-accent !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
+  $radiobutton-active-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default;
 }
 
 @if $color == "light" {
   $radiogroup-checked-bg: $base-accent !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default;
+  $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
   $radiogroup-checked-bg: $base-accent !default;
   $radiogroup-bg: $base-element-bg !default;
-  $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default;
+  $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $radiobutton-focused-border-color: $base-focus-bg !default;
-  $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default;
+  $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default;
 }
 
 $never-used: collector((