Skip to content

Commit

Permalink
feat(tabs): added new states without overlay (#UIM-830) (#832)
Browse files Browse the repository at this point in the history
* feat(tabs): added new states without overlay (#UIM-830)

* added tokens for vertical tabs

* changed border-color for pt-2022
  • Loading branch information
lskramarov committed Mar 24, 2022
1 parent 2156faa commit 59729fe
Show file tree
Hide file tree
Showing 19 changed files with 615 additions and 174 deletions.
32 changes: 28 additions & 4 deletions packages/docs/src/styles/default-theme/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -748,18 +748,42 @@ $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-active: #0374eb;
$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
$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-active: #0059b8;
$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
$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: #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;
$tabs-size-padding-horizontal: 16px;
$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;
Expand Down
32 changes: 28 additions & 4 deletions packages/docs/src/styles/default-theme/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -870,18 +870,42 @@ export const TableSizeRowPaddingHorizontal = "16px";
export const TableFontHeader = "caption";
export const TableFontBody = "body";
export const TabsLightColorSchemeBorder = "#d7dee4";
export const TabsLightColorSchemeStateActive = "#0374eb";
export const TabsLightColorSchemeStateDisabledOverlay = "rgba(white, 0.3)";
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 TabsDarkColorSchemeStateActive = "#0059b8";
export const TabsDarkColorSchemeStateDisabledOverlay = "rgba(black, 0.2)";
export const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
export const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
export const TabsDarkColorSchemeStateHoverIcon = "#f2f5f9";
export const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
export const TabsDarkColorSchemeStateActiveMarkerColor = "#0059b8";
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";
export const TabsSizePaddingHorizontal = "16px";
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";
Expand Down
32 changes: 28 additions & 4 deletions packages/docs/src/styles/green-theme/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -748,18 +748,42 @@ $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-active: #028b49;
$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
$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-active: #319d5c;
$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
$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: #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;
$tabs-size-padding-horizontal: 16px;
$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;
Expand Down
32 changes: 28 additions & 4 deletions packages/docs/src/styles/green-theme/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -870,18 +870,42 @@ export const TableSizeRowPaddingHorizontal = "16px";
export const TableFontHeader = "caption";
export const TableFontBody = "body";
export const TabsLightColorSchemeBorder = "#d7dee4";
export const TabsLightColorSchemeStateActive = "#028b49";
export const TabsLightColorSchemeStateDisabledOverlay = "rgba(white, 0.3)";
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 TabsDarkColorSchemeStateActive = "#319d5c";
export const TabsDarkColorSchemeStateDisabledOverlay = "rgba(black, 0.2)";
export const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
export const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
export const TabsDarkColorSchemeStateHoverIcon = "#f2f5f9";
export const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
export const TabsDarkColorSchemeStateActiveMarkerColor = "#319d5c";
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";
export const TabsSizePaddingHorizontal = "16px";
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";
Expand Down
32 changes: 28 additions & 4 deletions packages/docs/src/styles/red-theme/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -748,18 +748,42 @@ $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-active: #db3c55;
$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
$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-active: #ea5868;
$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
$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: #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;
$tabs-size-padding-horizontal: 16px;
$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;
Expand Down
32 changes: 28 additions & 4 deletions packages/docs/src/styles/red-theme/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -870,18 +870,42 @@ export const TableSizeRowPaddingHorizontal = "16px";
export const TableFontHeader = "caption";
export const TableFontBody = "body";
export const TabsLightColorSchemeBorder = "#d7dee4";
export const TabsLightColorSchemeStateActive = "#db3c55";
export const TabsLightColorSchemeStateDisabledOverlay = "rgba(white, 0.3)";
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 TabsDarkColorSchemeStateActive = "#ea5868";
export const TabsDarkColorSchemeStateDisabledOverlay = "rgba(black, 0.2)";
export const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
export const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
export const TabsDarkColorSchemeStateHoverIcon = "#f2f5f9";
export const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
export const TabsDarkColorSchemeStateActiveMarkerColor = "#ea5868";
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";
export const TabsSizePaddingHorizontal = "16px";
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";
Expand Down
32 changes: 28 additions & 4 deletions packages/docs/src/styles/yellow-theme/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -748,18 +748,42 @@ $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-active: #a26e0c;
$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
$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: #a26e0c;
$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-active: #c78816;
$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
$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: #c78816;
$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;
$tabs-size-padding-horizontal: 16px;
$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: #ffecce;
$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#ffecce, $saturation:-22%, $lightness:-5%);
$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
$vertical-tabs-dark-color-scheme-state-selected-background: #6b4804;
$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#6b4804, $lightness:-1%);
$tags-light-color-scheme-primary-background: #ffecce;
$tags-light-color-scheme-primary-border: #ffecce;
$tags-light-color-scheme-primary-text: #a26e0c;
Expand Down
Loading

0 comments on commit 59729fe

Please sign in to comment.