feat(AsideHeader): use inner css vars (#182)

* feat(AsideHeader): use inner css vars * feat(AsideHeader)!: support themization * fix: panel width, update Readme * fix(Highlighted): fix CSS vars
gravity-ui · Feb 12, 2024 · 3328b09 · 3328b09
1 parent f39870f
commit 3328b09
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,22 @@
+### ⚠ BREAKING CHANGES
+
+* Rename css vars ([#99](https://github.com/gravity-ui/navigation/issues/99))
+  * `--gn-aside-header-background-color` -> `--gn-color-accent-collapsed`, `--gn-color-accent-expanded`
+  * `--gn-aside-header-divider-line-color` -> `--gn-color-line-vertical`, `--gn-color-line-horizontal`
+  * `--gn-aside-header-collapse-button-divider-line-color` -> `--gn-color-line-horizontal`
+  * `--gn-aside-header-subheader-item-icon-color`, `--gn-aside-header-footer-item-icon-color`-> `--gn-color-item-icon-general`
+  * `--gn-aside-header-menu-item-icon-color` -> `--gn-color-item-icon`
+
+
+
+
+* Add new css vars
+  * `--gn-color-background`
+  * `--gn-color-item-background-hover`
+  * `--gn-color-item-background-selected`
+  * `--gn-color-item-text`
+
+
 # Changelog
 
 ## [1.9.0](https://github.com/gravity-ui/navigation/compare/v1.8.4...v1.9.0) (2024-02-02)
@@ -262,7 +281,7 @@
   * `--aside-header-collapse-button-divider-line-color` -> `--gn-aside-header-collapse-button-divider-line-color`
   * `--aside-header-divider-line-color` -> `--gn-aside-header-divider-line-color`
   * `--aside-header-header-divider-line-color` -> `--gn-aside-header-subheader-divider-line-color`
-  
+
 Read more about [themization](https://github.com/gravity-ui/navigation#css-variables)
 
 ### Features

diff --git a/README.md b/README.md
@@ -77,12 +77,15 @@ Used for themization Navigation's components
 
 ### AsideHeader vars
 
-| Name                                                   | Description                                                      | Default                                                                           |
-| :----------------------------------------------------- | :--------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
-| `--gn-aside-header-background-color`                   | Сolor of decorations and selected items                          | `--g-color-base-warning-light`                                                    |
-| `--gn-aside-header-subheader-divider-line-color`       | Divider line color for withDecoration and expanded `AsideHeader` | Light theme: `--g-color-line-generic`, Dark theme: `--g-color-line-generic-solid` |
-| `--gn-aside-header-collapse-button-divider-line-color` |                                                                  | `--gn-aside-header-subheader-divider-line-color`                                  |
-| `--gn-aside-header-footer-item-icon-color`             |                                                                  | `--g-color-text-primary`                                                          |
-| `--gn-aside-header-subheader-item-icon-color`          |                                                                  | `--g-color-text-primary`                                                          |
-| `--gn-aside-header-item-icon-background-size`          | Background size used when `AsideHeader` is compact               | `38px`                                                                            |
-| `--gn-aside-header-divider-line-color`                 | Vertical color divider between `AsideHeader` and content         | Light theme: `--g-color-line-generic`, Dark theme: `--g-color-line-generic-solid` |
+| Name                                  | Description                                                   |            Default             |
+| :------------------------------------ | :------------------------------------------------------------ | :----------------------------: |
+| `--gn-color-accent-collapsed`         | Decoration color for collapsed navigation                     | `--g-color-base-warning-light` |
+| `--gn-color-accent-expanded`          | Decoration color for expanded navigation                      | `--g-color-base-warning-light` |
+| `--gn-color-background`               | Navigation background color                                   |  `--g-color-base-background`   |
+| `--gn-color-line-horizontal`          | All horizontal divider line color                             |    `--g-color-line-generic`    |
+| `--gn-color-line-vertical`            | Vertical divider line color between `AsideHeader` and content |    `--g-color-line-generic`    |
+| `--gn-color-item-background-hover`    |                                                               | `--g-color-base-simple-hover`  |
+| `--gn-color-item-background-selected` |                                                               |   `--g-color-base-selection`   |
+| `--gn-color-item-icon-general`        | Icon color for Subheader and Footer items                     |    `--g-color-text-primary`    |
+| `--gn-color-item-icon`                | Icon color for CompositeBar items                             |     `--g-color-text-misc`      |
+| `--gn-color-item-text`                |                                                               |    `--g-color-text-primary`    |
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -2,52 +2,36 @@
 
 $block: '.#{variables.$ns}aside-header';
 
-.g-root {
-    --gn-aside-header-background-color: var(--g-color-base-warning-light);
-    --gn-aside-header-collapse-button-divider-line-color: var(
-        --gn-aside-header-subheader-divider-line-color
-    );
-    --gn-aside-header-menu-item-icon-color: var(--g-color-text-misc);
-    --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);
-    --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);
-    --gn-aside-header-item-icon-background-size: 38px;
-
-    --gn-aside-top-panel-height: 0px;
-}
-
-.g-root_theme_light,
-.g-root_theme_light-hc {
-    --gn-aside-header-divider-line-color: var(--g-color-line-generic);
-    --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);
-}
-
-.g-root_theme_dark,
-.g-root_theme_dark-hc {
-    --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);
-    --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);
-}
-
 #{$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);
+    --_--vertical-divider-line-color: var(--g-color-line-generic);
+    --_--horizontal-divider-line-color: var(--g-color-line-generic);
+
+    --_--top-panel-height: 0px;
+
     height: 100%;
     width: 100%;
     position: relative;
     background-color: var(--g-color-base-background);
 
     &__aside {
         position: sticky;
-        top: var(--gn-aside-top-panel-height);
+        top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
         left: 0;
         height: 100vh;
         width: inherit;
         display: flex;
         flex-direction: column;
-        background-color: var(--g-color-base-background);
+        background-color: var(--gn-color-background, var(--_--background-color));
         z-index: 100;
-        max-height: calc(100vh - var(--gn-aside-top-panel-height));
-        margin-top: var(--gn-aside-top-panel-height);
+        max-height: calc(100vh - var(--gn-aside-top-panel-height, var(--_--top-panel-height)));
+        margin-top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
 
         box-sizing: border-box;
 
@@ -59,7 +43,7 @@ $block: '.#{variables.$ns}aside-header';
             width: 1px;
             height: 100%;
             content: '';
-            background-color: var(--gn-aside-header-divider-line-color);
+            background-color: var(--gn-color-line-vertical, var(--_--vertical-divider-line-color));
         }
 
         &-popup-anchor {
@@ -91,7 +75,8 @@ $block: '.#{variables.$ns}aside-header';
         &-content_with-decoration {
             background: linear-gradient(
                 180deg,
-                var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33),
+                var(--gn-color-accent-expanded, var(--_--decoration-expanded-background-color))
+                    calc(var(--gradient-height) * 0.33),
                 transparent calc(var(--gradient-height) * 0.88)
             );
         }
@@ -130,7 +115,10 @@ $block: '.#{variables.$ns}aside-header';
             left: 0;
             z-index: -2;
             display: none;
-            color: var(--gn-aside-header-background-color);
+            color: var(
+                --gn-color-accent-collapsed,
+                var(--_--decoration-collapsed-background-color)
+            );
         }
 
         &_with-decoration::before {
@@ -142,7 +130,10 @@ $block: '.#{variables.$ns}aside-header';
             width: 100%;
             height: calc(100% - var(--gn-aside-header-header-divider-height));
             content: '';
-            background-color: var(--gn-aside-header-background-color);
+            background-color: var(
+                --gn-color-accent-collapsed,
+                var(--_--decoration-collapsed-background-color)
+            );
         }
 
         &::after {
@@ -153,7 +144,10 @@ $block: '.#{variables.$ns}aside-header';
             width: 100%;
             height: 1px;
             content: '';
-            background-color: var(--gn-aside-header-subheader-divider-line-color);
+            background-color: var(
+                --gn-color-line-horizontal,
+                var(--_--horizontal-divider-line-color)
+            );
         }
     }
 
@@ -191,9 +185,9 @@ $block: '.#{variables.$ns}aside-header';
         left: 0;
         right: 0;
         bottom: 0;
-        top: var(--gn-aside-top-panel-height);
+        top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
         overflow: auto;
-        max-height: calc(100vh - var(--gn-aside-top-panel-height));
+        max-height: calc(100vh - var(--gn-aside-top-panel-height, var(--_--top-panel-height)));
     }
 
     &__panel {
@@ -210,7 +204,7 @@ $block: '.#{variables.$ns}aside-header';
 
     &__pane-top-divider {
         height: 1px;
-        background-color: var(--gn-aside-header-divider-line-color);
+        background-color: var(--gn-color-line-horizontal, var(--_--horizontal-divider-line-color));
         margin-top: -1px;
     }
 
@@ -237,7 +231,7 @@ $block: '.#{variables.$ns}aside-header';
     &__content {
         width: calc(100% - var(--gn-aside-header-size));
         z-index: 95;
-        margin-top: var(--gn-aside-top-panel-height);
+        margin-top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
     }
 
     &__collapse-button {
@@ -256,7 +250,8 @@ $block: '.#{variables.$ns}aside-header';
         flex: none;
         width: 100%;
         height: 20px;
-        border-top: 1px solid var(--gn-aside-header-collapse-button-divider-line-color);
+        border-top: 1px solid
+            var(--gn-color-line-horizontal, var(--_--horizontal-divider-line-color));
         margin-top: auto;
 
         &:not(&_compact) {

diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx
@@ -36,14 +36,34 @@ const CustomThemeTemplate: StoryFn = (args) => (
     <React.Fragment>
         <style>
             {`.g-root {
-                --gn-aside-header-menu-item-icon-color: var(--g-color-text-primary);
+                --gn-color-accent-collapsed: #c8c8ff;
+                --gn-color-accent-expanded: #8585fc;
+                --gn-color-line-vertical: #b5b5b5;
+                --gn-color-line-horizontal: #8e8e8e;
+                --gn-color-background: #fadfb2;
+                --gn-color-item-background-hover: #2626f75c;
+                --gn-color-item-background-selected: #f8ca7d;
+                --gn-color-item-icon-general: #4a4a4a;
+                --gn-color-item-icon: var(--g-color-text-primary);
             }`}
         </style>
         <AsideHeaderShowcase {...args} />
     </React.Fragment>
 );
 export const CustomTheme = CustomThemeTemplate.bind({});
-CustomTheme.args = {
+
+const CustomBackgroundTemplate: StoryFn = (args) => (
+    <React.Fragment>
+        <style>
+            {`.g-root {
+                --gn-color-item-icon: var(--g-color-text-primary);
+            }`}
+        </style>
+        <AsideHeaderShowcase {...args} />
+    </React.Fragment>
+);
+export const CustomBackground = CustomBackgroundTemplate.bind({});
+CustomBackground.args = {
     headerDecoration: false,
     customBackground: <img src="custom-theme-background.png" width="100%" />,
     customBackgroundClassName: 'aside-header-showcase__custom-background',

diff --git a/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss b/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss
@@ -5,17 +5,28 @@ $block: '.#{variables.$ns}composite-bar-highlighted-item';
 #{$block} {
     $class: &;
 
+    --_--background-color: var(--g-color-base-background);
+    --_--item-icon-background-size: 38px;
+    --_--item-background-color-hover: var(--g-color-base-selection-hover);
+    --_--item-selected-background-color-active: var(--g-color-base-selection);
+
     position: absolute;
     z-index: 10000;
     display: flex;
     justify-content: center;
 
     &__icon {
-        width: var(--gn-aside-header-item-icon-background-size);
-        height: var(--gn-aside-header-item-icon-background-size);
+        width: var(
+            --gn-aside-header-item-icon-background-size,
+            var(--_--item-icon-background-size)
+        );
+        height: var(
+            --gn-aside-header-item-icon-background-size,
+            var(--_--item-icon-background-size)
+        );
         border-radius: 7px;
         cursor: pointer;
-        background-color: var(--g-color-base-background);
+        background-color: var(--gn-color-background, var(--_--background-color));
         display: flex;
         justify-content: center;
         align-items: center;
@@ -31,11 +42,17 @@ $block: '.#{variables.$ns}composite-bar-highlighted-item';
             height: 100%;
             z-index: -1;
 
-            background-color: var(--g-color-base-selection);
+            background-color: var(
+                --gn-color-item-background-selected,
+                var(--_--item-selected-background-color-active)
+            );
         }
 
         &:hover::before {
-            background-color: var(--g-color-base-selection-hover);
+            background-color: var(
+                --gn-color-item-background-hover,
+                var(--_--item-background-color-hover)
+            );
         }
     }
 }