added tokens for vertical tabs

positive-js · Mar 21, 2022 · ddbbf6f · ddbbf6f
1 parent 2773eb1
commit ddbbf6f
Show file tree

Hide file tree

Showing 16 changed files with 435 additions and 218 deletions.
diff --git a/packages/docs/src/styles/default-theme/_variables.scss b/packages/docs/src/styles/default-theme/_variables.scss
@@ -734,27 +734,27 @@ $table-size-row-padding-vertical: 8px;
 $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
 $table-font-body: body;
-$tabs-light-color-scheme-border: #d7dee4;
-$tabs-light-color-scheme-state-normal-icon: #7f8c98;
-$tabs-light-color-scheme-state-normal-text: #333f4a;
-$tabs-light-color-scheme-state-hover-icon: #333f4a;
-$tabs-light-color-scheme-state-hover-text: #333f4a;
+$tabs-light-color-scheme-border: #8c99a5;
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
 $tabs-light-color-scheme-state-active-marker-color: #0374eb;
 $tabs-light-color-scheme-state-empty-icon: #8c99a5;
 $tabs-light-color-scheme-state-empty-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-icon: #8c99a5;
 $tabs-light-color-scheme-state-disabled-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
-$tabs-dark-color-scheme-border: #333f4a;
-$tabs-dark-color-scheme-state-normal-icon: #7f8c98;
-$tabs-dark-color-scheme-state-normal-text: #333f4a;
-$tabs-dark-color-scheme-state-hover-icon: #333f4a;
-$tabs-dark-color-scheme-state-hover-text: #333f4a;
+$tabs-dark-color-scheme-border: #8c99a5;
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
 $tabs-dark-color-scheme-state-active-marker-color: #0059b8;
-$tabs-dark-color-scheme-state-empty-icon: #8c99a5;
-$tabs-dark-color-scheme-state-empty-text: #8c99a5;
-$tabs-dark-color-scheme-state-disabled-icon: #8c99a5;
-$tabs-dark-color-scheme-state-disabled-text: #8c99a5;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
 $tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
@@ -763,6 +763,14 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: #014b9d;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#014b9d, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: #e7f1ff;
 $tags-light-color-scheme-primary-text: #0374eb;

diff --git a/packages/docs/src/styles/default-theme/tokens.ts b/packages/docs/src/styles/default-theme/tokens.ts
@@ -856,27 +856,27 @@ export const TableSizeRowPaddingVertical = "8px";
 export const TableSizeRowPaddingHorizontal = "16px";
 export const TableFontHeader = "caption";
 export const TableFontBody = "body";
-export const TabsLightColorSchemeBorder = "#d7dee4";
-export const TabsLightColorSchemeStateNormalIcon = "#7f8c98";
-export const TabsLightColorSchemeStateNormalText = "#333f4a";
-export const TabsLightColorSchemeStateHoverIcon = "#333f4a";
-export const TabsLightColorSchemeStateHoverText = "#333f4a";
+export const TabsLightColorSchemeBorder = "#8c99a5";
+export const TabsLightColorSchemeStateNormalIcon = "#8c99a5";
+export const TabsLightColorSchemeStateNormalText = "#19252f";
+export const TabsLightColorSchemeStateHoverIcon = "#19252f";
+export const TabsLightColorSchemeStateHoverText = "#19252f";
 export const TabsLightColorSchemeStateActiveMarkerColor = "#0374eb";
 export const TabsLightColorSchemeStateEmptyIcon = "#8c99a5";
 export const TabsLightColorSchemeStateEmptyText = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledIcon = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledText = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledMarkerOpacity = "0.3";
-export const TabsDarkColorSchemeBorder = "#333f4a";
-export const TabsDarkColorSchemeStateNormalIcon = "#7f8c98";
-export const TabsDarkColorSchemeStateNormalText = "#333f4a";
-export const TabsDarkColorSchemeStateHoverIcon = "#333f4a";
-export const TabsDarkColorSchemeStateHoverText = "#333f4a";
+export const TabsDarkColorSchemeBorder = "#8c99a5";
+export const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
+export const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
+export const TabsDarkColorSchemeStateHoverIcon = "#f2f5f9";
+export const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
 export const TabsDarkColorSchemeStateActiveMarkerColor = "#0059b8";
-export const TabsDarkColorSchemeStateEmptyIcon = "#8c99a5";
-export const TabsDarkColorSchemeStateEmptyText = "#8c99a5";
-export const TabsDarkColorSchemeStateDisabledIcon = "#8c99a5";
-export const TabsDarkColorSchemeStateDisabledText = "#8c99a5";
+export const TabsDarkColorSchemeStateEmptyIcon = "#6d7a86";
+export const TabsDarkColorSchemeStateEmptyText = "#6d7a86";
+export const TabsDarkColorSchemeStateDisabledIcon = "#6d7a86";
+export const TabsDarkColorSchemeStateDisabledText = "#6d7a86";
 export const TabsDarkColorSchemeStateDisabledMarkerOpacity = "0.3";
 export const TabsSizeHeight = "40px";
 export const TabsSizeHighlightHeight = "4px";
@@ -885,6 +885,14 @@ export const TabsSizeBorderWidth = "1px";
 export const TabsSizeBorderRadius = "3px";
 export const TabsSizeLabelIconMargin = "8px";
 export const TabsFontDefault = "body";
+export const VerticalTabsLightColorSchemeStateNormalBackground = "transparent";
+export const VerticalTabsLightColorSchemeStateSelectedBackground = "#e7f1ff";
+export const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%)";
+export const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
+export const VerticalTabsDarkColorSchemeStateSelectedBackground = "#014b9d";
+export const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#014b9d, $lightness:-1%)";
 export const TagsLightColorSchemePrimaryBackground = "#e7f1ff";
 export const TagsLightColorSchemePrimaryBorder = "#e7f1ff";
 export const TagsLightColorSchemePrimaryText = "#0374eb";

diff --git a/packages/docs/src/styles/green-theme/_variables.scss b/packages/docs/src/styles/green-theme/_variables.scss
@@ -734,27 +734,27 @@ $table-size-row-padding-vertical: 8px;
 $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
 $table-font-body: body;
-$tabs-light-color-scheme-border: #d7dee4;
-$tabs-light-color-scheme-state-normal-icon: #7f8c98;
-$tabs-light-color-scheme-state-normal-text: #333f4a;
-$tabs-light-color-scheme-state-hover-icon: #333f4a;
-$tabs-light-color-scheme-state-hover-text: #333f4a;
+$tabs-light-color-scheme-border: #8c99a5;
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
 $tabs-light-color-scheme-state-active-marker-color: #028b49;
 $tabs-light-color-scheme-state-empty-icon: #8c99a5;
 $tabs-light-color-scheme-state-empty-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-icon: #8c99a5;
 $tabs-light-color-scheme-state-disabled-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
-$tabs-dark-color-scheme-border: #333f4a;
-$tabs-dark-color-scheme-state-normal-icon: #7f8c98;
-$tabs-dark-color-scheme-state-normal-text: #333f4a;
-$tabs-dark-color-scheme-state-hover-icon: #333f4a;
-$tabs-dark-color-scheme-state-hover-text: #333f4a;
+$tabs-dark-color-scheme-border: #8c99a5;
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
 $tabs-dark-color-scheme-state-active-marker-color: #319d5c;
-$tabs-dark-color-scheme-state-empty-icon: #8c99a5;
-$tabs-dark-color-scheme-state-empty-text: #8c99a5;
-$tabs-dark-color-scheme-state-disabled-icon: #8c99a5;
-$tabs-dark-color-scheme-state-disabled-text: #8c99a5;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
 $tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
@@ -763,6 +763,14 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #d2f7db;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#d2f7db, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: #015a2d;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#015a2d, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #d2f7db;
 $tags-light-color-scheme-primary-border: #d2f7db;
 $tags-light-color-scheme-primary-text: #028b49;

diff --git a/packages/docs/src/styles/green-theme/tokens.ts b/packages/docs/src/styles/green-theme/tokens.ts
@@ -856,27 +856,27 @@ export const TableSizeRowPaddingVertical = "8px";
 export const TableSizeRowPaddingHorizontal = "16px";
 export const TableFontHeader = "caption";
 export const TableFontBody = "body";
-export const TabsLightColorSchemeBorder = "#d7dee4";
-export const TabsLightColorSchemeStateNormalIcon = "#7f8c98";
-export const TabsLightColorSchemeStateNormalText = "#333f4a";
-export const TabsLightColorSchemeStateHoverIcon = "#333f4a";
-export const TabsLightColorSchemeStateHoverText = "#333f4a";
+export const TabsLightColorSchemeBorder = "#8c99a5";
+export const TabsLightColorSchemeStateNormalIcon = "#8c99a5";
+export const TabsLightColorSchemeStateNormalText = "#19252f";
+export const TabsLightColorSchemeStateHoverIcon = "#19252f";
+export const TabsLightColorSchemeStateHoverText = "#19252f";
 export const TabsLightColorSchemeStateActiveMarkerColor = "#028b49";
 export const TabsLightColorSchemeStateEmptyIcon = "#8c99a5";
 export const TabsLightColorSchemeStateEmptyText = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledIcon = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledText = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledMarkerOpacity = "0.3";
-export const TabsDarkColorSchemeBorder = "#333f4a";
-export const TabsDarkColorSchemeStateNormalIcon = "#7f8c98";
-export const TabsDarkColorSchemeStateNormalText = "#333f4a";
-export const TabsDarkColorSchemeStateHoverIcon = "#333f4a";
-export const TabsDarkColorSchemeStateHoverText = "#333f4a";
+export const TabsDarkColorSchemeBorder = "#8c99a5";
+export const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
+export const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
+export const TabsDarkColorSchemeStateHoverIcon = "#f2f5f9";
+export const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
 export const TabsDarkColorSchemeStateActiveMarkerColor = "#319d5c";
-export const TabsDarkColorSchemeStateEmptyIcon = "#8c99a5";
-export const TabsDarkColorSchemeStateEmptyText = "#8c99a5";
-export const TabsDarkColorSchemeStateDisabledIcon = "#8c99a5";
-export const TabsDarkColorSchemeStateDisabledText = "#8c99a5";
+export const TabsDarkColorSchemeStateEmptyIcon = "#6d7a86";
+export const TabsDarkColorSchemeStateEmptyText = "#6d7a86";
+export const TabsDarkColorSchemeStateDisabledIcon = "#6d7a86";
+export const TabsDarkColorSchemeStateDisabledText = "#6d7a86";
 export const TabsDarkColorSchemeStateDisabledMarkerOpacity = "0.3";
 export const TabsSizeHeight = "40px";
 export const TabsSizeHighlightHeight = "4px";
@@ -885,6 +885,14 @@ export const TabsSizeBorderWidth = "1px";
 export const TabsSizeBorderRadius = "3px";
 export const TabsSizeLabelIconMargin = "8px";
 export const TabsFontDefault = "body";
+export const VerticalTabsLightColorSchemeStateNormalBackground = "transparent";
+export const VerticalTabsLightColorSchemeStateSelectedBackground = "#d2f7db";
+export const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#d2f7db, $saturation:-22%, $lightness:-5%)";
+export const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
+export const VerticalTabsDarkColorSchemeStateSelectedBackground = "#015a2d";
+export const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#015a2d, $lightness:-1%)";
 export const TagsLightColorSchemePrimaryBackground = "#d2f7db";
 export const TagsLightColorSchemePrimaryBorder = "#d2f7db";
 export const TagsLightColorSchemePrimaryText = "#028b49";

diff --git a/packages/docs/src/styles/red-theme/_variables.scss b/packages/docs/src/styles/red-theme/_variables.scss
@@ -734,27 +734,27 @@ $table-size-row-padding-vertical: 8px;
 $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
 $table-font-body: body;
-$tabs-light-color-scheme-border: #d7dee4;
-$tabs-light-color-scheme-state-normal-icon: #7f8c98;
-$tabs-light-color-scheme-state-normal-text: #333f4a;
-$tabs-light-color-scheme-state-hover-icon: #333f4a;
-$tabs-light-color-scheme-state-hover-text: #333f4a;
+$tabs-light-color-scheme-border: #8c99a5;
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
 $tabs-light-color-scheme-state-active-marker-color: #db3c55;
 $tabs-light-color-scheme-state-empty-icon: #8c99a5;
 $tabs-light-color-scheme-state-empty-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-icon: #8c99a5;
 $tabs-light-color-scheme-state-disabled-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
-$tabs-dark-color-scheme-border: #333f4a;
-$tabs-dark-color-scheme-state-normal-icon: #7f8c98;
-$tabs-dark-color-scheme-state-normal-text: #333f4a;
-$tabs-dark-color-scheme-state-hover-icon: #333f4a;
-$tabs-dark-color-scheme-state-hover-text: #333f4a;
+$tabs-dark-color-scheme-border: #8c99a5;
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
 $tabs-dark-color-scheme-state-active-marker-color: #ea5868;
-$tabs-dark-color-scheme-state-empty-icon: #8c99a5;
-$tabs-dark-color-scheme-state-empty-text: #8c99a5;
-$tabs-dark-color-scheme-state-disabled-icon: #8c99a5;
-$tabs-dark-color-scheme-state-disabled-text: #8c99a5;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
 $tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
@@ -763,6 +763,14 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #ffeaea;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#ffeaea, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: #9e0130;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#9e0130, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #ffeaea;
 $tags-light-color-scheme-primary-border: #ffeaea;
 $tags-light-color-scheme-primary-text: #db3c55;

diff --git a/packages/docs/src/styles/red-theme/tokens.ts b/packages/docs/src/styles/red-theme/tokens.ts
@@ -856,27 +856,27 @@ export const TableSizeRowPaddingVertical = "8px";
 export const TableSizeRowPaddingHorizontal = "16px";
 export const TableFontHeader = "caption";
 export const TableFontBody = "body";
-export const TabsLightColorSchemeBorder = "#d7dee4";
-export const TabsLightColorSchemeStateNormalIcon = "#7f8c98";
-export const TabsLightColorSchemeStateNormalText = "#333f4a";
-export const TabsLightColorSchemeStateHoverIcon = "#333f4a";
-export const TabsLightColorSchemeStateHoverText = "#333f4a";
+export const TabsLightColorSchemeBorder = "#8c99a5";
+export const TabsLightColorSchemeStateNormalIcon = "#8c99a5";
+export const TabsLightColorSchemeStateNormalText = "#19252f";
+export const TabsLightColorSchemeStateHoverIcon = "#19252f";
+export const TabsLightColorSchemeStateHoverText = "#19252f";
 export const TabsLightColorSchemeStateActiveMarkerColor = "#db3c55";
 export const TabsLightColorSchemeStateEmptyIcon = "#8c99a5";
 export const TabsLightColorSchemeStateEmptyText = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledIcon = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledText = "#8c99a5";
 export const TabsLightColorSchemeStateDisabledMarkerOpacity = "0.3";
-export const TabsDarkColorSchemeBorder = "#333f4a";
-export const TabsDarkColorSchemeStateNormalIcon = "#7f8c98";
-export const TabsDarkColorSchemeStateNormalText = "#333f4a";
-export const TabsDarkColorSchemeStateHoverIcon = "#333f4a";
-export const TabsDarkColorSchemeStateHoverText = "#333f4a";
+export const TabsDarkColorSchemeBorder = "#8c99a5";
+export const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
+export const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
+export const TabsDarkColorSchemeStateHoverIcon = "#f2f5f9";
+export const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
 export const TabsDarkColorSchemeStateActiveMarkerColor = "#ea5868";
-export const TabsDarkColorSchemeStateEmptyIcon = "#8c99a5";
-export const TabsDarkColorSchemeStateEmptyText = "#8c99a5";
-export const TabsDarkColorSchemeStateDisabledIcon = "#8c99a5";
-export const TabsDarkColorSchemeStateDisabledText = "#8c99a5";
+export const TabsDarkColorSchemeStateEmptyIcon = "#6d7a86";
+export const TabsDarkColorSchemeStateEmptyText = "#6d7a86";
+export const TabsDarkColorSchemeStateDisabledIcon = "#6d7a86";
+export const TabsDarkColorSchemeStateDisabledText = "#6d7a86";
 export const TabsDarkColorSchemeStateDisabledMarkerOpacity = "0.3";
 export const TabsSizeHeight = "40px";
 export const TabsSizeHighlightHeight = "4px";
@@ -885,6 +885,14 @@ export const TabsSizeBorderWidth = "1px";
 export const TabsSizeBorderRadius = "3px";
 export const TabsSizeLabelIconMargin = "8px";
 export const TabsFontDefault = "body";
+export const VerticalTabsLightColorSchemeStateNormalBackground = "transparent";
+export const VerticalTabsLightColorSchemeStateSelectedBackground = "#ffeaea";
+export const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#ffeaea, $saturation:-22%, $lightness:-5%)";
+export const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
+export const VerticalTabsDarkColorSchemeStateSelectedBackground = "#9e0130";
+export const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#9e0130, $lightness:-1%)";
 export const TagsLightColorSchemePrimaryBackground = "#ffeaea";
 export const TagsLightColorSchemePrimaryBorder = "#ffeaea";
 export const TagsLightColorSchemePrimaryText = "#db3c55";