devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss

@@ -38,215 +38,215 @@ $generic-tabs-vertical-border-active-right: null !default;
 @if $color == "carmine" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "contrast" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "dark" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "darkmoon" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "darkviolet" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "greenmist" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "light" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }
 
 @if $color == "softblue" {
   $generic-tabs-vertical-border-hover-top: none !default;
   $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default;
+  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
 }

package/data/scss/widgets/generic/tabs/variables/borders/_index.scss

@@ -1,2 +1,2 @@
-@import "borders-horizontal";
-@import "borders-vertical";
+@forward "borders-horizontal";
+@forward "borders-vertical";

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

@@ -20,10 +20,10 @@ $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $color == "carmine" {
   $tagbox-tag-color: $base-text-color !default;
-  $tagbox-tag-bg: darken($base-bg, 9%) !default; // #fff => #e6e9eb
+  $tagbox-tag-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default; // #fff => #e6e9eb
   $tagbox-tag-button-remove-bg: #9ea4a8 !default;
-  $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
@@ -32,7 +32,7 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-bg: extcolor.difference(#fff, $base-bg) !default;
   $tagbox-tag-color: $base-inverted-text-color !default;
   $tagbox-tag-button-remove-bg: $base-inverted-text-color !default;
-  $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: $base-focus-color !default;
   $tagbox-tag-focused-color: $base-text-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
@@ -40,20 +40,20 @@ $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $color == "dark" {
   $tagbox-tag-color: $base-text-color !default;
-  $tagbox-tag-bg: lighten($base-bg, 13.5%) !default;
-  $tagbox-tag-button-remove-bg: lighten($tagbox-tag-bg, 20%) !default;
-  $tagbox-tag-button-remove-active-bg: darken($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7.3%) !default;
+  $tagbox-tag-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
+  $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: 20%, $space: hsl) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "darkmoon" {
   $tagbox-tag-color: $base-text-color !default;
-  $tagbox-tag-bg: lighten($base-bg, 13.5%) !default;
-  $tagbox-tag-button-remove-bg: lighten($tagbox-tag-bg, 20%) !default;
-  $tagbox-tag-button-remove-active-bg: darken($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7.3%) !default;
+  $tagbox-tag-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
+  $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: 20%, $space: hsl) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
@@ -62,38 +62,38 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-color: $base-text-color !default;
   $tagbox-tag-bg: $base-select-bg !default;
   $tagbox-tag-button-remove-bg: $base-row-alternation-background !default;
-  $tagbox-tag-button-remove-active-bg: darken($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7.3%) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "greenmist" {
-  $tagbox-tag-color: lighten($base-text-color, 100%) !default;
+  $tagbox-tag-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default;
   $tagbox-tag-bg: $base-accent !default;
   $tagbox-tag-button-remove-bg: extcolor.difference($base-accent, #383838) !default; // #3cbab2  => #14827b
-  $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "light" {
   $tagbox-tag-color: $base-text-color !default;
-  $tagbox-tag-bg: darken($base-bg, 13.5%) !default;
-  $tagbox-tag-button-remove-bg: darken($tagbox-tag-bg, 20%) !default;
-  $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default;
+  $tagbox-tag-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
+  $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: -20%, $space: hsl) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "softblue" {
   $tagbox-tag-color: $base-text-color !default;
-  $tagbox-tag-bg: darken($base-bg, 13.5%) !default;
-  $tagbox-tag-button-remove-bg: darken($tagbox-tag-bg, 20%) !default;
-  $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default;
-  $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default;
+  $tagbox-tag-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
+  $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: -20%, $space: hsl) !default;
+  $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
+  $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
   $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }

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

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -15,7 +16,7 @@
     padding-left: 0;
     margin-left: $generic-tagbox-input-margin-left;
 
-    @at-root #{selector-append(".dx-rtl", &)},
+    @at-root #{selector.append(".dx-rtl", &)},
     .dx-rtl & {
       padding-right: 0;
       padding-left: 0;
@@ -161,7 +162,8 @@
 
 .dx-tagbox-popup-wrapper {
   .dx-list-select-all {
-    border-bottom: 1px solid $tagbox-select-all-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $tagbox-select-all-border-color;
     padding-bottom: $generic-tagbox-select-all-padding-bottom;
     margin-bottom: $generic-tagbox-select-all-margin-bottom;
   }

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

@@ -9,7 +9,7 @@ $textbox-search-icon-color: null !default;
 
 
 @if $color == "carmine" {
-  $textbox-search-icon-color: lighten($base-icon-color, 3%) !default;
+  $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: 3%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -17,7 +17,7 @@ $textbox-search-icon-color: null !default;
 }
 
 @if $color == "dark" {
-  $textbox-search-icon-color: darken($base-icon-color, 40%) !default;
+  $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
@@ -25,7 +25,7 @@ $textbox-search-icon-color: null !default;
 }
 
 @if $color == "darkviolet" {
-  $textbox-search-icon-color: darken($base-icon-color, 40%) !default;
+  $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: -40%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
@@ -33,7 +33,7 @@ $textbox-search-icon-color: null !default;
 }
 
 @if $color == "light" {
-  $textbox-search-icon-color: lighten($base-icon-color, 40%) !default;
+  $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {