devextreme-themebuilder 25.2.7 → 26.1.2-beta

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

@@ -13,50 +13,50 @@ $form-field-mark-color: null !default;
 
 @if $color == "carmine" {
   $form-group-border-color: #edc1b9 !default;
-  $form-field-required-color: darken($base-danger, 10%) !default;
-  $form-field-mark-color: lighten($base-text-color, 55%) !default;
+  $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $form-field-mark-color: color.adjust($base-text-color, $lightness: 55%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
   $form-group-border-color: $base-border-color !default;
-  $form-field-required-color: saturate(darken($base-text-color, 40.8%), 80%) !default;
+  $form-field-required-color: color.adjust($base-text-color, $saturation: -40.8%, $lightness: 80%, $space: hsl) !default;
   $form-field-mark-color: $base-accent !default;
 }
 
 @if $color == "dark" {
   $form-group-border-color: $base-border-color !default;
-  $form-field-required-color: saturate(darken($form-field-item-color, 39.2%), 80%) !default;
-  $form-field-mark-color: darken($form-field-item-color, 48.5%) !default;
+  $form-field-required-color: color.adjust($form-field-item-color, $saturation: -39.2%, $lightness: 80%, $space: hsl) !default;
+  $form-field-mark-color: color.adjust($form-field-item-color, $lightness: -48.5%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
   $form-group-border-color: $base-icon-color !default;
   $form-field-required-color: $base-danger !default;
-  $form-field-mark-color: darken($base-text-color, 44%) !default;
+  $form-field-mark-color: color.adjust($base-text-color, $lightness: -44%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
   $form-group-border-color: $base-selected-border !default;
-  $form-field-required-color: darken($base-danger, 10%) !default;
-  $form-field-mark-color: darken($form-field-item-color, 48.5%) !default;
+  $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $form-field-mark-color: color.adjust($form-field-item-color, $lightness: -48.5%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
-  $form-group-border-color: lighten($base-text-color, 38.5%) !default;
-  $form-field-required-color: darken($base-danger, 10%) !default;
-  $form-field-mark-color: lighten($base-text-color, 40%) !default;
+  $form-group-border-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
+  $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $form-field-mark-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "light" {
   $form-group-border-color: $base-border-color !default;
-  $form-field-required-color: darken($base-danger, 10%) !default;
-  $form-field-mark-color: lighten($base-text-color, 48.5%) !default;
+  $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $form-field-mark-color: color.adjust($base-text-color, $lightness: 48.5%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
-  $form-group-border-color: darken($base-border-color, 7%) !default; // #e8eaeb => #d3d9de
-  $form-field-required-color: darken($base-danger, 10%) !default;
-  $form-field-mark-color: lighten($base-text-color, 55%) !default;
+  $form-group-border-color: color.adjust($base-border-color, $lightness: -7%, $space: hsl) !default; // #e8eaeb => #d3d9de
+  $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
+  $form-field-mark-color: color.adjust($base-text-color, $lightness: 55%, $space: hsl) !default;
 }
 
 $never-used: collector((

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

@@ -33,7 +33,8 @@
 
 .dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
   & > .dx-form-group-content {
-    border-top: 1px solid $form-group-border-color;
+    border-top: 1px solid;
+    border-top-color: $form-group-border-color;
     padding-bottom: $generic-form-group-content-padding-bottom;
   }
 }

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

@@ -24,7 +24,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "carmine" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: darken($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;
@@ -46,7 +46,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "dark" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: lighten($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: 15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;
@@ -57,7 +57,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "darkmoon" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: lighten($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: 15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;
@@ -68,7 +68,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "darkviolet" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: lighten($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: 15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;
@@ -79,7 +79,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "greenmist" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: darken($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;
@@ -90,7 +90,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "light" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: darken($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;
@@ -101,7 +101,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default;
 
 @if $color == "softblue" {
   $gallery-indicator-item-selected-bg: $base-accent !default;
-  $gallery-indicator-focused-bg: darken($base-accent, 15%) !default;
+  $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default;
   $gallery-indicator-item-border-color: $base-accent !default;
   $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
   $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default;

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

@@ -84,7 +84,8 @@
 .dx-gallery-indicator-item {
   border-radius: 50%;
   box-sizing: border-box;
-  border: 1px solid $gallery-indicator-item-border-color;
+  border: 1px solid;
+  border-color: $gallery-indicator-item-border-color;
   pointer-events: auto;
   margin: 5px - math.div($generic-gallery-indicator-size, 2) 6px;
   width: $generic-gallery-indicator-size;
@@ -97,7 +98,8 @@
   width: $generic-gallery-indicator-selected-size;
   height: $generic-gallery-indicator-selected-size;
   background: $gallery-indicator-item-selected-bg;
-  border: 2px solid $gallery-indicator-selected-border-color;
+  border: 2px solid;
+  border-color: $gallery-indicator-selected-border-color;
   margin: 5px - math.div($generic-gallery-indicator-selected-size, 2) 6px;
 }
 

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

@@ -14,15 +14,15 @@ $gantt-icon-color: null !default;
 
 @if $color == "carmine" {
 
-  $gantt-collapsable-row-bg: darken($base-bg, 5%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default;
   $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.25) !default;
   $gantt-parent-task-bg: $base-success !default;
-  $gantt-icon-color: lighten($base-text-color, 20%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: 20%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
 
-  $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default;
   $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.3) !default;
   $gantt-parent-task-bg: $base-success !default;
   $gantt-icon-color: $base-text-color !default;
@@ -30,49 +30,49 @@ $gantt-icon-color: null !default;
 
 @if $color == "dark" {
 
-  $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default;
   $gantt-selection-bg: $datagrid-selection-bg !default;
   $gantt-parent-task-bg: $base-success !default;
-  $gantt-icon-color: darken($base-text-color, 20%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: -20%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
 
-  $gantt-collapsable-row-bg: lighten($base-bg, 4%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 4%, $space: hsl) !default;
   $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.3) !default;
   $gantt-parent-task-bg: $base-danger !default;
-  $gantt-icon-color: darken($base-text-color, 20%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: -20%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
 
-  $gantt-collapsable-row-bg: lighten($base-bg, 4%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 4%, $space: hsl) !default;
   $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.3) !default;
   $gantt-parent-task-bg: $base-success !default;
-  $gantt-icon-color: darken($base-text-color, 20%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: -20%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
 
-  $gantt-collapsable-row-bg: darken($base-bg, 4%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
   $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.25) !default;
   $gantt-parent-task-bg: $base-success !default;
-  $gantt-icon-color: lighten($base-text-color, 15%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: 15%, $space: hsl) !default;
 }
 
 @if $color == "light" {
 
-  $gantt-collapsable-row-bg: darken($base-bg, 4%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
   $gantt-selection-bg: $datagrid-selection-bg !default;
   $gantt-parent-task-bg: $base-success !default;
-  $gantt-icon-color: lighten($base-text-color, 20%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: 20%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
 
-  $gantt-collapsable-row-bg: darken($base-bg, 4%) !default;
+  $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
   $gantt-selection-bg: $datagrid-selection-bg !default;
   $gantt-parent-task-bg: $base-success !default;
-  $gantt-icon-color: lighten($base-text-color, 20%) !default;
+  $gantt-icon-color: color.adjust($base-text-color, $lightness: 20%, $space: hsl) !default;
 }
 

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

@@ -15,11 +15,13 @@
 $gantt-successor-background-color: white;
 
 .dx-gantt {
-  border: 1px solid $base-border-color;
+  border: 1px solid;
+  border-color: $base-border-color;
 
   .dx-gantt-toolbar-wrapper {
     padding: 5px;
-    border-bottom: 1px solid $base-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $base-border-color;
 
     .dx-gantt-toolbar-separator {
       border-left-color: $base-border-color;
@@ -103,15 +105,18 @@ $gantt-successor-background-color: white;
 
   .dx-gantt-tsac,
   .dx-gantt-tsa {
-    border-bottom: 1px solid $base-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $base-border-color;
   }
 
   .dx-gantt-hb {
-    border-top: 1px solid $base-border-color;
+    border-top: 1px solid;
+    border-top-color: $base-border-color;
   }
 
   .dx-gantt-vb {
-    border-left: 1px solid $base-border-color;
+    border-left: 1px solid;
+    border-left-color: $base-border-color;
   }
 
   .dx-gantt-taskWrapper {
@@ -233,17 +238,19 @@ $gantt-successor-background-color: white;
 
     .dx-gantt-task-edit-frame {
       height: 100%;
-      border: 1px solid darken($base-accent, 10%);
+      border: 1px solid;
+      border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl);
       border-radius: $base-border-radius;
 
       .dx-gantt-task-edit-progress {
-        border-color: transparent transparent darken($base-accent, 10%) transparent;
+        border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent;
 
         &::before {
           width: 12px;
           height: 6px;
           bottom: -14px;
-          border: 1px solid darken($base-accent, 10%);
+          border: 1px solid;
+          border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl);
         }
       }
 
@@ -266,7 +273,8 @@ $gantt-successor-background-color: white;
   .dx-gantt-task-edit-dependency-l,
   .dx-gantt-task-edit-successor-dependency-l {
     background: $gantt-successor-background-color;
-    border: 1px solid darken($base-accent, 10%);
+    border: 1px solid;
+    border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl);
     width: $gantt-dependency-successor-size;
     height: $gantt-dependency-successor-size;
     margin: auto;
@@ -290,8 +298,10 @@ $gantt-successor-background-color: white;
 
   .dx-gantt-sel {
     background-color: $gantt-selection-bg;
-    border-top: 1px solid $datagrid-selection-bg;
-    border-bottom: 1px solid $datagrid-selection-bg;
+    border-top: 1px solid;
+    border-top-color: $datagrid-selection-bg;
+    border-bottom: 1px solid;
+    border-bottom-color: $datagrid-selection-bg;
   }
 
   .dx-gantt-tac-hb .dx-gantt-sel {
@@ -307,16 +317,20 @@ $gantt-successor-background-color: white;
   }
 
   .dx-gantt-arrow {
-    border: 5px solid $base-text-color;
+    border: 5px solid;
+    border-color: $base-text-color;
   }
 
   .dx-gantt-tm {
-    border-left: 1px dashed $base-accent;
+    border-left: 1px dashed;
+    border-left-color: $base-accent;
   }
 
   .dx-gantt-ti {
-    border-left: 1px dashed $base-accent;
-    border-right: 1px dashed $base-accent;
+    border-left: 1px dashed;
+    border-left-color: $base-accent;
+    border-right: 1px dashed;
+    border-right-color: $base-accent;
     background-color: color.change($base-accent, $alpha: 0.15);
   }