devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/generic/tabs/layout/tab/_base.scss

@@ -31,6 +31,7 @@
       $generic-tabs-border-hover-right,
       $generic-tabs-border-hover-bottom,
       $generic-tabs-border-hover-left,
+      $tabs-tab-hover-border-color-horizontal,
     );
   }
 
@@ -43,6 +44,7 @@
       $generic-tabs-border-selected-right,
       $generic-tabs-border-selected-bottom,
       $generic-tabs-border-selected-left,
+      $tabs-border-color,
     );
 
     .dx-tab-text {
@@ -63,6 +65,7 @@
       $generic-tabs-border-active-right,
       $generic-tabs-border-active-bottom,
       $generic-tabs-border-active-left,
+      $tabs-tab-active-border-color,
     );
 
     .dx-tab-text {
@@ -116,6 +119,7 @@
         $generic-tabs-border-focused-right,
         $generic-tabs-border-focused-bottom,
         $generic-tabs-border-focused-left,
+        $tabs-focused-border-color,
       );
     }
 
@@ -125,6 +129,7 @@
         $generic-tabs-border-focused-disabled-right,
         $generic-tabs-border-focused-disabled-bottom,
         $generic-tabs-border-focused-disabled-left,
+        $tabs-focused-disabled-border-color,
       );
     }
 

package/data/scss/widgets/generic/tabs/layout/tab/_vertical.scss

@@ -26,6 +26,7 @@
         $generic-tabs-vertical-border-hover-right,
         $generic-tabs-vertical-border-hover-bottom,
         $generic-tabs-vertical-border-hover-left,
+        $tabs-tab-hover-border-color-horizontal,
       );
     }
 
@@ -35,6 +36,7 @@
         $generic-tabs-vertical-border-selected-right,
         $generic-tabs-vertical-border-selected-bottom,
         $generic-tabs-vertical-border-selected-left,
+        $tabs-border-color,
       );
     }
 
@@ -44,6 +46,7 @@
         $generic-tabs-vertical-border-active-right,
         $generic-tabs-vertical-border-active-bottom,
         $generic-tabs-vertical-border-active-left,
+        $tabs-tab-active-border-color,
       );
     }
 
@@ -53,6 +56,7 @@
         $generic-tabs-vertical-border-focused-disabled-right,
         $generic-tabs-vertical-border-focused-disabled-bottom,
         $generic-tabs-vertical-border-focused-disabled-left,
+        $tabs-focused-disabled-border-color,
       );
     }
   }
@@ -65,12 +69,14 @@
           $generic-tabs-vertical-border-focused-right,
           $generic-tabs-vertical-border-focused-bottom,
           $generic-tabs-vertical-border-focused-left,
+          $tabs-focused-border-color,
         );
       }
 
       &.dx-focused-disabled-next-tab {
         &::after {
           border-inline-end: $generic-tabs-border;
+          border-inline-end-color: $tabs-border-color;
           border-block-end: none;
         }
       }
@@ -78,6 +84,7 @@
       &.dx-focused-disabled-prev-tab {
         &::after {
           border-inline-start: $generic-tabs-border;
+          border-inline-start-color: $tabs-border-color;
           border-block-start: none;
         }
       }

package/data/scss/widgets/generic/tabs/layout/tabs/_base.scss

@@ -26,6 +26,7 @@
       $generic-tabs-border,
       $generic-tabs-border,
       $generic-tabs-border,
+      $tabs-border-color,
     );
 
     .dx-scrollable-content {
@@ -51,13 +52,16 @@
     $generic-tabs-border,
     $generic-tabs-border,
     $generic-tabs-border,
+    $tabs-border-color,
   );
 }
 
 .dx-tabs-nav-buttons {
   .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;
 
     &::after {
       border: none;

package/data/scss/widgets/generic/tabs/layout/tabs/_vertical.scss

@@ -15,7 +15,9 @@
 .dx-tabs-vertical {
   .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;
     border-block-start: none;
     border-block-end: none;
 

package/data/scss/widgets/generic/tabs/mixins/_index.scss

@@ -34,11 +34,16 @@
   $border-inline-end,
   $border-block-end,
   $border-inline-start,
+  $border-color,
 ) {
   &::after {
     border-block-start: $border-block-start;
+    border-block-start-color: $border-color;
     border-inline-end: $border-inline-end;
+    border-inline-end-color: $border-color;
     border-block-end: $border-block-end;
+    border-block-end-color: $border-color;
     border-inline-start: $border-inline-start;
+    border-inline-start-color: $border-color;
   }
 }

package/data/scss/widgets/generic/tabs/variables/_colors.scss

@@ -31,17 +31,17 @@ $tabs-tab-hover-border-color-vertical: null !default;
 
 @if $color == "carmine" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: darken($base-bg, 2%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $tabs-tab-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-hover-bg !default;
-  $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
-  $tabs-tab-active-border-color: color.change(darken($base-border-color, 2.55)) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $tabs-tab-active-border-color: color.change(color.adjust($base-border-color, $lightness: -2.55%, $space: hsl)) !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: color.change(lighten($base-accent, 33.92)) !default;
+  $tabs-tab-hover-border-color-vertical: color.change(color.adjust($base-accent, $lightness: 33.92%, $space: hsl)) !default;
 }
 
 @if $color == "contrast" {
@@ -52,7 +52,7 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-icon-color: $base-icon-color !default;
   $tabs-tab-icon-selected-color: $base-inverted-text-color !default;
   $tabs-focused-border-color: $base-focus-color !default;
-  $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $tabs-tab-active-bg: $base-inverted-bg !default;
   $tabs-tab-active-border-color: $base-border-color !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
@@ -61,29 +61,29 @@ $tabs-tab-hover-border-color-vertical: null !default;
 
 @if $color == "dark" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: lighten($base-bg, 3%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $tabs-tab-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: lighten($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
-  $tabs-tab-active-bg: color.change(lighten($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
-  $tabs-tab-active-border-color: color.change(lighten($tabs-tab-bg, 12.55)) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
+  $tabs-tab-active-border-color: color.change(color.adjust($tabs-tab-bg, $lightness: 12.55%, $space: hsl)) !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
   $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "darkmoon" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: darken($base-bg, 3%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $tabs-tab-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: lighten($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
-  $tabs-tab-active-bg: color.change(lighten($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: transparent !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
   $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
@@ -91,60 +91,60 @@ $tabs-tab-hover-border-color-vertical: null !default;
 
 @if $color == "darkviolet" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: lighten($base-bg, 3%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $tabs-tab-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: lighten($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-hover-bg !default;
-  $tabs-tab-active-bg: color.change(lighten($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
-  $tabs-tab-active-border-color: color.change(lighten($base-bg, 15.49)) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
+  $tabs-tab-active-border-color: color.change(color.adjust($base-bg, $lightness: 15.49%, $space: hsl)) !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: color.change(lighten($tabs-tab-bg, 16.86)) !default;
+  $tabs-tab-hover-border-color-vertical: color.change(color.adjust($tabs-tab-bg, $lightness: 16.86%, $space: hsl)) !default;
 }
 
 @if $color == "greenmist" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: darken($base-bg, 3%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $tabs-tab-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
-  $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
-  $tabs-tab-active-border-color: darken($tabs-tab-bg, 12.16) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
   $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "light" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: darken($base-bg, 3%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $tabs-tab-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
-  $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
-  $tabs-tab-active-border-color: darken($tabs-tab-bg, 12.16) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
   $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "softblue" {
   $tabs-tab-selected-color: $base-text-color !default;
-  $tabs-tab-bg: darken($base-bg, 3%) !default;
+  $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $tabs-tab-selected-bg: $base-bg !default;
   $tabs-tab-icon-color: $base-icon-color !default;
   $tabs-tab-icon-selected-color: $tabs-tab-icon-color !default;
   $tabs-focused-border-color: $base-focus-bg !default;
-  $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default;
+  $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
-  $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default;
-  $tabs-tab-active-border-color: darken($tabs-tab-bg, 12.16) !default;
+  $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default;
   $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
   $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }