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
gravity-ui · May 22, 2024 · cf75f1f · cf75f1f
1 parent a5e9df0
commit cf75f1f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 26 deletions.
diff --git 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
@@ -1,19 +1,37 @@
 @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} {
     $class: &;
     --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
@@ -107,7 +107,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                 }}
                 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
@@ -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
@@ -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);
+}