From cf75f1fc8ede4a0891d233376f10d9c01364c78d Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Wed, 22 May 2024 17:51:55 +0300 Subject: [PATCH] feat(AsideHeader): change default decoration, item background colors (#238) * feat(AsideHeader): change default decoration, item background colors * feat(AsideHeader): change background color * feat(AsideHeader): change item icon color --- README.md | 36 +++++++++---------- src/components/AsideHeader/AsideHeader.scss | 24 +++++++++++-- .../__stories__/AsideHeaderShowcase.tsx | 2 +- src/components/CompositeBar/Item/Item.scss | 6 ++-- styles/themes.scss | 27 ++++++++++++++ 5 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 styles/themes.scss diff --git a/README.md b/README.md index 463747c..ea5b7fa 100644 --- a/README.md +++ b/README.md @@ -75,27 +75,25 @@ export const Aside: FC = () => { import {AsideHeader} from '@gravity-ui/navigation'; ``` -## CSS variables +## CSS API AsideHeader Used for themization Navigation's components -### AsideHeader vars - -| Name | Description | Default | -| :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: | -| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | `--g-color-base-warning-light` | -| `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | `--g-color-base-warning-light` | -| `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` | -| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` | -| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` | -| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px | +| Name | Description | +| :-------------------------------------------------------- | :------------------------------------------------------------ | +| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | +| `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | +| `--gn-aside-header-background-color` | Navigation background color | +| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | +| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | +| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | | Item | -| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` | -| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` | -| `--gn-aside-header-item-text-color` | | `--g-color-text-primary` | -| `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` | +| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | +| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | +| `--gn-aside-header-item-text-color` | | +| `--gn-aside-header-item-background-color-hover` | | | Current Item | -| `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` | -| `--gn-aside-header-item-current-icon-color` | | | -| `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` | -| `--gn-aside-header-item-current-background-color-hover` | | | +| `--gn-aside-header-item-current-background-color` | | +| `--gn-aside-header-item-current-icon-color` | | +| `--gn-aside-header-item-current-text-color` | | +| `--gn-aside-header-item-current-background-color-hover` | | diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index 5538586..caf444a 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -1,9 +1,27 @@ @use '../variables'; +@import '../../../styles/themes'; + $block: '.#{variables.$ns}aside-header'; .g-root { --gn-aside-top-panel-height: 0px; + + &_theme_light { + @include gn-theme-light(); + } + + &_theme_light-hc { + @include gn-theme-light-hc(); + } + + &_theme_dark { + @include gn-theme-dark(); + } + + &_theme_dark-hc { + @include gn-theme-dark-hc(); + } } #{$block} { @@ -11,9 +29,9 @@ $block: '.#{variables.$ns}aside-header'; --gn-aside-header-min-width: 56px; --_--item-icon-background-size: 38px; - --_--background-color: var(--g-color-base-background); - --_--decoration-collapsed-background-color: var(--g-color-base-warning-light); - --_--decoration-expanded-background-color: var(--g-color-base-warning-light); + --_--background-color: var(--gn-ah-background-color); + --_--decoration-collapsed-background-color: var(--gn-ah-decoration-background-color); + --_--decoration-expanded-background-color: var(--gn-ah-decoration-background-color); --_--vertical-divider-line-color: var(--g-color-line-generic); --_--horizontal-divider-line-color: var(--g-color-line-generic); diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index 27a125b..e2499cc 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -107,7 +107,7 @@ export const AsideHeaderShowcase: React.FC = ({ }} headerDecoration={ headerDecoration === undefined - ? addonHeaderDecoration === BOOLEAN_OPTIONS.Yes + ? addonHeaderDecoration === BOOLEAN_OPTIONS.No : headerDecoration } onMenuItemsChanged={setMenuItems} diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss index 241e79b..b9e47f8 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -7,15 +7,15 @@ $block: '.#{variables.$ns}composite-bar-item'; --gn-composite-bar-item-action-size: 36px; --_--horizontal-divider-line-color: var(--g-color-line-generic); - --_--item-background-color-hover: var(--g-color-base-simple-hover); + --_--item-background-color-hover: var(--gn-ah-hovered-item-background-color); --_--item-general-icon-color: var(--g-color-text-primary); - --_--item-icon-color: var(--g-color-text-misc); + --_--item-icon-color: var(--g-color-text-complementary); --_--item-text-color: var(--g-color-text-primary); // selected item --_--item-selected-text-color: var(--g-color-text-primary); - --_--item-selected-background-color-active: var(--g-color-base-selection); + --_--item-selected-background-color-active: var(--gn-ah-selected-item-background-color); display: flex; width: 100%; diff --git a/styles/themes.scss b/styles/themes.scss new file mode 100644 index 0000000..ae788d8 --- /dev/null +++ b/styles/themes.scss @@ -0,0 +1,27 @@ +@mixin gn-theme-light { + --gn-ah-background-color: var(--g-color-base-neutral-light); + --gn-ah-decoration-background-color: var(--g-color-private-yellow-200); + --gn-ah-selected-item-background-color: var(--g-color-private-orange-200); + --gn-ah-hovered-item-background-color: var(--g-color-private-black-50); +} + +@mixin gn-theme-light-hc { + --gn-ah-background-color: var(--g-color-base-neutral-light); + --gn-ah-decoration-background-color: var(--g-color-private-yellow-300); + --gn-ah-selected-item-background-color: var(--g-color-private-orange-300); + --gn-ah-hovered-item-background-color: var(--g-color-private-black-150); +} + +@mixin gn-theme-dark { + --gn-ah-background-color: rgb(17, 14, 17); // TODO add private color in uikit + --gn-ah-decoration-background-color: var(--g-color-private-yellow-150); + --gn-ah-selected-item-background-color: var(--g-color-private-orange-200); + --gn-ah-hovered-item-background-color: var(--g-color-private-white-150); +} + +@mixin gn-theme-dark-hc { + --gn-ah-background-color: rgb(5, 5, 5); // TODO add private color in uikit + --gn-ah-decoration-background-color: var(--g-color-private-yellow-250); + --gn-ah-selected-item-background-color: var(--g-color-private-orange-250); + --gn-ah-hovered-item-background-color: var(--g-color-private-white-250); +}