feat: added theme tokens

MIGRATION_GUIDE_v5.md

@@ -0,0 +1,92 @@
+# Navigation v5.0 Migration Guide
+
+## CSS Variables Changes
+
+### New Zone-Based CSS Variables
+
+Navigation v5.0 introduces zone-based CSS variables for more granular control over styling. The navigation is divided into zones: **Top** (header/subheader area), **Main** (navigation groups), and **Bottom** (footer area).
+
+### Top Zone (Subheader) Variables
+
+New CSS variables for styling items in the Top zone (subheader area):
+
+| Variable                                             | Purpose                      | Fallback                                         |
+| ---------------------------------------------------- | ---------------------------- | ------------------------------------------------ |
+| `--gn-aside-top-decoration-background-color`         | Decoration/backdrop          | `--gn-aside-item-current-background-color`       |
+| `--gn-aside-top-divider-color`                       | Divider below top zone       | `--gn-aside-divider-horizontal-color`            |
+| `--gn-aside-top-item-icon-color`                     | Icon color                   | `--gn-aside-item-icon-color`                     |
+| `--gn-aside-top-item-current-icon-color`             | Active item icon color       | `--gn-aside-item-current-icon-color`             |
+| `--gn-aside-top-item-text-color`                     | Text color                   | `--gn-aside-item-text-color`                     |
+| `--gn-aside-top-item-current-text-color`             | Active item text color       | `--gn-aside-item-current-text-color`             |
+| `--gn-aside-top-item-background-color`               | Background color             | `transparent`                                    |
+| `--gn-aside-top-item-background-color-hover`         | Hover background             | `--gn-aside-item-background-color-hover`         |
+| `--gn-aside-top-item-current-background-color`       | Active item background       | `--gn-aside-item-current-background-color`       |
+| `--gn-aside-top-item-current-background-color-hover` | Active item hover background | `--gn-aside-item-current-background-color-hover` |
+
+### Main Zone (Group Items) Variables
+
+New CSS variables for styling items inside navigation groups:
+
+| Variable                                                    | Purpose                      | Fallback                                         |
+| ----------------------------------------------------------- | ---------------------------- | ------------------------------------------------ |
+| `--gn-aside-main-background-color`                          | Main area background         | `transparent`                                    |
+| `--gn-aside-main-group-item-background-color`               | Group item background        | Semantic value                                   |
+| `--gn-aside-main-group-item-background-color-hover`         | Hover background             | `--gn-aside-item-background-color-hover`         |
+| `--gn-aside-main-group-item-current-background-color`       | Active item background       | `--gn-aside-item-current-background-color`       |
+| `--gn-aside-main-group-item-current-background-color-hover` | Active item hover background | `--gn-aside-item-current-background-color-hover` |
+| `--gn-aside-main-group-border-color-hover`                  | Group border on hover        | `--gn-aside-line-vertical-color-hover`           |
+| `--gn-aside-main-group-border-color-current`                | Group border when active     | `--gn-aside-current-line-vertical-color`         |
+
+### Bottom Zone (Footer) Variables
+
+New CSS variables for styling the Bottom zone (footer area):
+
+| Variable                                                | Purpose                      | Fallback                                         |
+| ------------------------------------------------------- | ---------------------------- | ------------------------------------------------ |
+| `--gn-aside-bottom-background-color`                    | Footer container background  | `--gn-aside-surface-background-color`            |
+| `--gn-aside-bottom-divider-color`                       | Divider above footer         | `--gn-aside-divider-horizontal-color`            |
+| `--gn-aside-bottom-item-icon-color`                     | Icon color                   | `--gn-aside-item-icon-color`                     |
+| `--gn-aside-bottom-item-current-icon-color`             | Active item icon color       | `--gn-aside-item-current-icon-color`             |
+| `--gn-aside-bottom-item-text-color`                     | Text color                   | `--gn-aside-item-text-color`                     |
+| `--gn-aside-bottom-item-current-text-color`             | Active item text color       | `--gn-aside-item-current-text-color`             |
+| `--gn-aside-bottom-item-background-color-hover`         | Hover background             | `--gn-aside-item-background-color-hover`         |
+| `--gn-aside-bottom-item-current-background-color`       | Active item background       | `--gn-aside-item-current-background-color`       |
+| `--gn-aside-bottom-item-current-background-color-hover` | Active item hover background | `--gn-aside-item-current-background-color-hover` |
+
+### Usage Example
+
+```css
+.my-app {
+  /* Top zone customization */
+  --gn-aside-top-item-icon-color: #333;
+  --gn-aside-top-item-current-background-color: rgba(0, 100, 255, 0.15);
+
+  /* Main zone (groups) customization */
+  --gn-aside-main-group-item-current-background-color: rgba(0, 100, 255, 0.2);
+  --gn-aside-main-group-item-background-color-hover: rgba(0, 0, 0, 0.05);
+
+  /* Bottom zone (footer) customization */
+  --gn-aside-bottom-item-icon-color: #666;
+  --gn-aside-bottom-item-current-background-color: rgba(0, 100, 255, 0.1);
+}
+```
+
+## Migration from v4.x
+
+### Deprecated Variables
+
+The following variables have been replaced with zone-specific alternatives:
+
+| Old Variable                                | New Variable                                | Zone   |
+| ------------------------------------------- | ------------------------------------------- | ------ |
+| `--gn-aside-header-general-item-icon-color` | `--gn-aside-top-item-icon-color`            | Top    |
+| `--gn-aside-header-item-current-icon-color` | `--gn-aside-top-item-current-icon-color`    | Top    |
+| `--gn-aside-header-general-item-icon-color` | `--gn-aside-bottom-item-icon-color`         | Bottom |
+| `--gn-aside-header-item-current-icon-color` | `--gn-aside-bottom-item-current-icon-color` | Bottom |
+
+### Migration Steps
+
+1. **Subheader icons**: Replace `--gn-aside-header-general-item-icon-color` with `--gn-aside-top-item-icon-color`
+2. **Footer icons**: Replace `--gn-aside-header-general-item-icon-color` with `--gn-aside-bottom-item-icon-color`
+3. **Subheader current icons**: Replace `--gn-aside-header-item-current-icon-color` with `--gn-aside-top-item-current-icon-color`
+4. **Footer current icons**: Replace `--gn-aside-header-item-current-icon-color` with `--gn-aside-bottom-item-current-icon-color`

src/components/AsideHeader/AsideHeader.module.scss

@@ -151,6 +151,7 @@ $block: '.#{variables.$ns}aside-header';
         width: calc(100%);
         padding-top: 8px;
         padding-bottom: 22px;
+        background-color: var(--gn-aside-top-decoration-background-color);
 
         #{$class}__header-divider {
             position: absolute;
@@ -174,8 +175,11 @@ $block: '.#{variables.$ns}aside-header';
             height: calc(100% - var(--gn-aside-header-header-divider-height));
             content: '';
             background-color: var(
-                --gn-aside-header-decoration-collapsed-background-color,
-                var(--_--decoration-collapsed-background-color)
+                --gn-aside-top-divider-color,
+                var(
+                    --gn-aside-header-decoration-collapsed-background-color,
+                    var(--_--decoration-collapsed-background-color)
+                )
             );
         }
 
@@ -248,6 +252,7 @@ $block: '.#{variables.$ns}aside-header';
         margin: var(--g-spacing-2) 10px;
         display: flex;
         flex-direction: column;
+        background-color: var(--gn-aside-bottom-background-color);
     }
 
     &__panels {

src/components/AsideHeader/__stories__/AsideHeader.stories.tsx

@@ -371,3 +371,57 @@ GroupedMenuCollapsible.args = {
     multipleTooltip: false,
     initialCompact: false,
 };
+
+const CustomThemesWithNewColorsTemplate: StoryFn = (args) => {
+    return (
+        <>
+            <style>
+                {`.g-root {
+                    /* Top zone (subheader) */
+                    --gn-aside-top-item-icon-color: #ff0000;
+                    --gn-aside-top-item-text-color: #ff6600;
+                    --gn-aside-top-item-background-color: rgba(255, 255, 0, 0.3);
+                    --gn-aside-top-item-background-color-hover: rgba(255, 255, 0, 0.7);
+                    --gn-aside-top-item-current-icon-color: #00ff00;
+                    --gn-aside-top-item-current-text-color: #00cc00;
+                    --gn-aside-top-item-current-background-color: rgba(0, 255, 0, 0.2);
+                    --gn-aside-top-item-current-background-color-hover: rgba(0, 255, 0, 0.4);
+
+                    /* Main zone (groups) */
+                    --gn-aside-main-background-color: transparent;
+                    --gn-aside-main-group-item-background-color: rgba(255, 255, 255, 0.6);
+                    --gn-aside-main-group-item-background-color-hover: rgba(0, 255, 255, 0.7);
+                    --gn-aside-main-group-item-current-background-color: rgba(0, 0, 255, 0.2);
+                    --gn-aside-main-group-item-current-background-color-hover: rgba(0, 0, 255, 0.4);
+
+                    /* Bottom zone (footer) */
+                    --gn-aside-bottom-background-color: rgba(128, 0, 128, 0.1);
+                    --gn-aside-bottom-divider-color: #ff00ff;
+                    --gn-aside-bottom-item-icon-color: #ff00ff;
+                    --gn-aside-bottom-item-text-color: #cc00cc;
+                    --gn-aside-bottom-item-background-color-hover: rgba(255, 0, 255, 0.3);
+                    --gn-aside-bottom-item-current-icon-color: #00ffff;
+                    --gn-aside-bottom-item-current-text-color: #00cccc;
+                    --gn-aside-bottom-item-current-background-color: rgba(0, 255, 255, 0.2);
+                    --gn-aside-bottom-item-current-background-color-hover: rgba(0, 255, 255, 0.4);
+            }`}
+            </style>
+
+            <AsideHeaderShowcase
+                {...args}
+                externalMenuItems={menuItemsWithGroups}
+                externalMenuGroups={menuGroupsWithIcons}
+            >
+                <div>
+                    <Text>Custom content</Text>
+                </div>
+            </AsideHeaderShowcase>
+        </>
+    );
+};
+
+export const CustomThemesWithNewColors = CustomThemesWithNewColorsTemplate.bind({});
+CustomThemesWithNewColors.args = {
+    multipleTooltip: false,
+    initialCompact: false,
+};

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -43,16 +43,21 @@ export interface AsideHeaderShowcaseProps {
     customBackgroundClassName?: string;
     headerDecoration?: boolean;
     hideCollapseButton?: boolean;
+    externalMenuItems?: AsideHeaderProps['menuItems'];
+    externalMenuGroups?: AsideHeaderProps['menuGroups'];
 }
 
-export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
+export const AsideHeaderShowcase: React.FC<React.PropsWithChildren<AsideHeaderShowcaseProps>> = ({
     multipleTooltip = false,
     initialCompact = false,
     topAlert,
     customBackground,
     customBackgroundClassName,
     headerDecoration,
     hideCollapseButton,
+    externalMenuItems,
+    externalMenuGroups,
+    children,
 }) => {
     const ref = React.useRef<HTMLDivElement>(null);
     const [popupVisible, setPopupVisible] = React.useState(false);
@@ -63,6 +68,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
         BOOLEAN_OPTIONS.Yes,
     );
     const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
+    const [currentMenuGroups, setCurrentMenuGroups] = React.useState(externalMenuGroups);
 
     const openModalSubscriber = (callback: OpenModalSubscriber) => {
         // @ts-ignore
@@ -76,8 +82,9 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
         });
     };
 
-    const [menuItems, setMenuItems] =
-        React.useState<AsideHeaderProps['menuItems']>(menuItemsShowcase);
+    const [menuItems, setMenuItems] = React.useState<AsideHeaderProps['menuItems']>(
+        externalMenuItems || menuItemsShowcase,
+    );
 
     return (
         <div className={b()}>
@@ -103,6 +110,8 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                 }
                 onMenuItemsChanged={setMenuItems}
                 menuItems={menuItems}
+                menuGroups={currentMenuGroups}
+                onMenuGroupsChanged={setCurrentMenuGroups}
                 defaultMenuItems={menuItemsShowcase}
                 customBackground={customBackground}
                 customBackgroundClassName={customBackgroundClassName}
@@ -233,25 +242,27 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                 )}
                 renderContent={() => {
                     return (
-                        <div className={b('content')}>
-                            <pre>{placeholderText}</pre>
-                            <SegmentedRadioGroup
-                                value={addonHeaderDecoration}
-                                onChange={(event) => {
-                                    setHeaderDecoration(event.target.value);
-                                }}
-                            >
-                                <SegmentedRadioGroup.Option value={BOOLEAN_OPTIONS.No}>
-                                    No
-                                </SegmentedRadioGroup.Option>
-                                <SegmentedRadioGroup.Option value={BOOLEAN_OPTIONS.Yes}>
-                                    Yes
-                                </SegmentedRadioGroup.Option>
-                            </SegmentedRadioGroup>
-                            <br />
-                            <br />
-                            <Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>
-                        </div>
+                        children || (
+                            <div className={b('content')}>
+                                <pre>{placeholderText}</pre>
+                                <SegmentedRadioGroup
+                                    value={addonHeaderDecoration}
+                                    onChange={(event) => {
+                                        setHeaderDecoration(event.target.value);
+                                    }}
+                                >
+                                    <SegmentedRadioGroup.Option value={BOOLEAN_OPTIONS.No}>
+                                        No
+                                    </SegmentedRadioGroup.Option>
+                                    <SegmentedRadioGroup.Option value={BOOLEAN_OPTIONS.Yes}>
+                                        Yes
+                                    </SegmentedRadioGroup.Option>
+                                </SegmentedRadioGroup>
+                                <br />
+                                <br />
+                                <Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>
+                            </div>
+                        )
                     );
                 }}
                 panelItems={[

src/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss

@@ -5,12 +5,15 @@ $block: '.#{variables.$ns}composite-bar';
 #{$block} {
     $class: &;
 
+    --gn-aside-header-item-expanded-radius: 6px;
+
     flex: 1 1 auto;
     width: 100%;
     min-height: 40px;
     display: flex;
     flex-direction: column;
-    --gn-aside-header-item-expanded-radius: 6px;
+
+    background-color: var(--gn-aside-main-background-color);
 
     & &__root-menu-item[class] {
         background-color: transparent;
@@ -67,9 +70,18 @@ $block: '.#{variables.$ns}composite-bar';
             width: 100%;
             height: 100%;
             z-index: -1;
-            border-left: 2px solid var(--g-color-line-generic);
+            border-left: 2px solid
+                var(--gn-aside-main-group-border-color, var(--g-color-line-generic));
             border-radius: 0;
             transition: border-radius 0.15s ease-out;
+            background-color: var(--gn-aside-main-group-item-background-color, transparent);
+        }
+
+        &:hover:before {
+            border-color: var(
+                --gn-aside-main-group-border-color-hover,
+                var(--g-color-line-generic)
+            );
         }
     }
 

src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx

@@ -294,7 +294,9 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
                         }
 
                         return (
-                            <div className={b('menu-group', {expanded: !isCollapsed})}>
+                            <div
+                                className={b('menu-group', {expanded: !isCollapsed, wrapper: true})}
+                            >
                                 {hasHeader && !isUngrouped && (
                                     <Item
                                         {...item}