From f50a643459832cb1719317bd43cc0ef0b164483f Mon Sep 17 00:00:00 2001
From: Steven <steven@straatemans.nl>
Date: Thu, 7 Nov 2024 16:40:04 +0100
Subject: [PATCH] fix(devwallet): style sidemenu (#2643)

---
 .changeset/quick-beans-join.md                |   2 +
 .../dev-wallet/src/App/Layout/SideBar.tsx     |  86 ++++++-----
 .../dev-wallet/src/pages/home/home-page.tsx   |   6 +-
 .../components/Breadcrumbs/Breadcrumbs.tsx    |   8 +-
 .../SideBarLayout/SideBarLayout.stories.tsx   |  12 +-
 .../SideBarLayout/components/SideBarItem.tsx  | 100 ++++--------
 .../SideBarLayout/components/SideBarTree.tsx  |  76 +++-------
 .../components/SideBarTreeItem.tsx            |   1 +
 .../src/patterns/SideBarLayout/sidebar.css.ts |  88 +++++++++--
 .../src/patterns/SideBarLayout/utils.tsx      |  20 +++
 .../kode-ui/src/styles/tokens/contract.css.ts | 142 ++++++++++--------
 .../kode-ui/src/styles/tokens/dark.css.ts     |  40 ++---
 .../kode-ui/src/styles/tokens/light.css.ts    |  40 ++---
 13 files changed, 335 insertions(+), 286 deletions(-)
 create mode 100644 .changeset/quick-beans-join.md
 create mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/utils.tsx

diff --git a/.changeset/quick-beans-join.md b/.changeset/quick-beans-join.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/quick-beans-join.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
index c70ad3c6b6..190fb819ba 100644
--- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -1,12 +1,16 @@
 import {
+  MonoApps,
+  MonoBackupTable,
   MonoContacts,
   MonoContrast,
-  MonoDashboardCustomize,
+  MonoDarkMode,
+  MonoKey,
+  MonoLightMode,
   MonoLogout,
   MonoNetworkCheck,
+  MonoSignature,
+  MonoSwapHoriz,
   MonoTableRows,
-  MonoWallet,
-  MonoWindow,
 } from '@kadena/kode-icons/system';
 
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
@@ -21,8 +25,6 @@ import {
 import {
   SideBarItem,
   SideBarItemsInline,
-  SideBarTree,
-  SideBarTreeItem,
   SideBar as SideBarUI,
   useLayout,
 } from '@kadena/kode-ui/patterns';
@@ -50,45 +52,46 @@ export const SideBar: FC = () => {
           <NetworkSelector
             showLabel={isExpanded}
             variant="outlined"
-            isCompact={!isExpanded}
+            isCompact
           />
         </SideBarItem>
       }
       navigation={
         <>
           <SideBarItem
-            visual={<MonoWindow />}
+            visual={<MonoApps />}
             label="Dashboard"
             component={Link}
             href="/"
           />
 
-          <SideBarTree visual={<MonoWallet />} label="My Wallets">
-            <SideBarTreeItem
-              label="Keys"
-              component={Link}
-              href="/key-management/keys"
-            />
-          </SideBarTree>
-          <SideBarTree visual={<MonoTableRows />} label="Transactions">
-            <SideBarTreeItem
-              label="History"
-              component={Link}
-              href="/transactions"
-            />
-          </SideBarTree>
-          <SideBarTree visual={<MonoDashboardCustomize />} label="Utilities">
-            <SideBarTreeItem
-              label="Sig Builder"
-              component={Link}
-              href="/sig-builder"
-            />
-            <SideBarTreeItem
-              label="Backup"
-              component={Link}
-              href="/backup-recovery-phrase/write-down"
-            />
-          </SideBarTree>
+          <SideBarItem
+            visual={<MonoSwapHoriz />}
+            label="Transfer"
+            component={Link}
+            href="/transfer"
+          />
+
+          <SideBarItem
+            visual={<MonoSignature />}
+            label="Sig Builder"
+            component={Link}
+            href="/sig-builder"
+          />
+
+          <SideBarItem
+            visual={<MonoTableRows />}
+            label="Transactions"
+            component={Link}
+            href="/transactions"
+          />
+
+          <SideBarItem
+            label="Key Management"
+            component={Link}
+            href="/key-management/keys"
+            visual={<MonoKey />}
+          />
 
           <SideBarItem
             visual={<MonoContacts />}
@@ -96,6 +99,13 @@ export const SideBar: FC = () => {
             component={Link}
             href="/contacts"
           />
+
+          <SideBarItem
+            visual={<MonoBackupTable />}
+            label="Backup"
+            component={Link}
+            href="/backup-recovery-phrase/write-down"
+          />
         </>
       }
       context={
@@ -105,8 +115,8 @@ export const SideBar: FC = () => {
               <ContextMenu
                 trigger={
                   <Button
-                    isCompact={!isExpanded}
-                    variant="outlined"
+                    isCompact
+                    variant={isExpanded ? 'outlined' : 'transparent'}
                     endVisual={<MonoContacts />}
                   >
                     {isExpanded ? 'Profile' : undefined}
@@ -130,9 +140,11 @@ export const SideBar: FC = () => {
               label="Change theme"
             >
               <Button
-                variant={isExpanded ? 'transparent' : 'outlined'}
+                variant="transparent"
                 onPress={() => toggleTheme()}
-                startVisual={<MonoContrast />}
+                startVisual={
+                  theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />
+                }
                 isCompact={!isExpanded}
               />
             </SideBarItem>
diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
index 1d60013ef1..641708cb05 100644
--- a/packages/apps/dev-wallet/src/pages/home/home-page.tsx
+++ b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
@@ -42,10 +42,10 @@ export function HomePage() {
       <SideBarBreadcrumbs icon={<MonoDashboard />}>
         <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Box gap={'lg'}>
+      <Box gap={'lg'} width="100%">
         <Text>Welcome back</Text>
-        <Heading as="h1">{profile?.name} </Heading>
-        <Stack gap={'lg'} flexDirection={'column'}>
+        <Heading as="h4">{profile?.name} </Heading>
+        <Stack gap={'lg'} flexDirection={'column'} width="100%">
           <AssetsCard />
           <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
             <Heading variant="h4">Wallet Activities</Heading>
diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
index a345064932..04de594d50 100644
--- a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -2,7 +2,7 @@ import type { FC, FunctionComponentElement } from 'react';
 import React from 'react';
 import type { AriaBreadcrumbsProps } from 'react-aria';
 import { useBreadcrumbs } from 'react-aria';
-import { Box } from '..';
+import { Box, Text } from '..';
 import { containerClass, navClass } from './Breadcrumbs.css';
 import type { IBreadcrumbItemProps } from './BreadcrumbsItem';
 
@@ -22,7 +22,11 @@ export const Breadcrumbs: FC<IBreadcrumbsProps> = ({
 
   return (
     <nav className={navClass} {...navProps}>
-      {icon && <Box marginInline="sm">{icon}</Box>}
+      {icon && (
+        <Box marginInline="sm">
+          <Text>{icon}</Text>
+        </Box>
+      )}
       <ol className={containerClass}>
         {React.Children.map(breadcrumbProps.children, (child, i) =>
           React.cloneElement(child as any, { isCurrent: i === childCount - 1 }),
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
index 6c6970521f..f1d5295062 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -103,15 +103,13 @@ const InnerLayout = () => {
                 <KLogo height={40} />
               </a>
             }
-            appContext={
-              <SideBarItem
-                visual={<MonoWifiTethering />}
-                label="Mainnet"
-                href="javascript:void()"
-              />
-            }
             navigation={
               <>
+                <SideBarItem
+                  visual={<MonoWifiTethering />}
+                  label="Mainnet"
+                  href="javascript:void()"
+                />
                 <SideBarTree visual={<MonoWallet />} label="My Wallet">
                   <SideBarTreeItem label="Accounts" href="https://kadena.io" />
                   <SideBarTreeItem
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
index 9e24821d52..7c437c2f63 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
@@ -1,10 +1,9 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
-import { listItemClass } from '../sidebar.css';
-import { Link } from './../../../components';
+import { listItemClass, sidebartreeItemClass } from '../sidebar.css';
+import { Anchor } from '../utils';
 import type { PressEvent } from './../../../components/Button';
-import { Button } from './../../../components/Button';
 import { Media } from './../../../components/Media';
 import { breakpoints } from './../../../styles';
 import { useLayout } from './LayoutProvider';
@@ -16,6 +15,7 @@ export interface ISideBarItemProps extends PropsWithChildren {
   isAppContext?: boolean;
   href?: string;
   component?: any;
+  tree?: ReactElement | boolean;
 }
 export const SideBarItem: FC<ISideBarItemProps> = ({
   visual,
@@ -24,6 +24,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
   children,
   href,
   component,
+  tree,
 }) => {
   const { isExpanded, handleSetExpanded, isActiveUrl } = useLayout();
   const isMediumDevice = useMedia(breakpoints.md, true);
@@ -42,86 +43,39 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
     handlePress(e as unknown as PressEvent);
   };
 
-  const renderChildren = () => {
+  const render = (isExpanded: boolean) => {
+    const LinkWrapper = component ? component : Anchor;
     return (
-      <>
-        <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
-          {children}
-        </Media>
-        <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
-          {children}
-        </Media>
-      </>
-    );
-  };
-
-  const renderMobile = () => {
-    const Component = href ? Link : Button;
-    return (
-      <Component
+      <LinkWrapper
         onPress={handleLinkClick}
-        href={href}
-        variant={isActiveUrl(href) ? 'primary' : 'outlined'}
         aria-label={label}
         data-isactive={isActiveUrl(href)}
-        component={component}
-        startVisual={visual}
-      >
-        {label}
-      </Component>
-    );
-  };
-
-  const renderDeskTopNotExpanded = () => {
-    const Component = href ? Link : Button;
-    return (
-      <Component
-        onPress={handleLinkClick}
-        variant={isActiveUrl(href) ? 'primary' : 'outlined'}
-        aria-label={label}
-        data-isactive={isActiveUrl(href)}
-        component={component}
-        startVisual={visual}
-        href={href}
-      />
-    );
-  };
-
-  const renderDeskTopExpanded = () => {
-    const Component = href ? Link : Button;
-    return (
-      <Component
-        onPress={handleLinkClick}
-        aria-label={label}
-        data-isactive={isActiveUrl(href)}
-        startVisual={visual}
-        component={component}
-        variant={isActiveUrl(href) ? 'primary' : 'outlined'}
+        className={sidebartreeItemClass({
+          isActive: isActiveUrl(href),
+          isExpanded,
+        })}
         href={href}
+        to={href}
+        title={label}
       >
-        {label}
-      </Component>
+        {visual && <span>{visual}</span>}
+        {isExpanded && label}
+      </LinkWrapper>
     );
   };
 
+  if (children) return children;
+
   return (
     <li className={listItemClass}>
-      <>
-        {children ? (
-          renderChildren()
-        ) : (
-          <>
-            <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
-              {renderMobile()}
-            </Media>
-            <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
-              {!isExpanded
-                ? renderDeskTopNotExpanded()
-                : renderDeskTopExpanded()}
-            </Media>
-          </>
-        )}
-      </>
+      <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
+        {render(true)}
+      </Media>
+      <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
+        {render(isExpanded)}
+      </Media>
+
+      {tree}
     </li>
   );
 };
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
index ddafa91306..4ee5940cba 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
@@ -1,15 +1,12 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { listItemClass } from '../sidebar.css';
-import type { PressEvent } from './../../../components/Button';
-import { Link } from './../../../components/Link';
-import { Media } from './../../../components/Media';
+import { Stack } from './../../../components';
 import { breakpoints } from './../../../styles';
 import { useLayout } from './LayoutProvider';
 import type { ISideBarItemProps } from './SideBarItem';
+import { SideBarItem } from './SideBarItem';
 import { sidebartreeListClass } from './sidebartree.css';
-import { SideBarTreeWrapper } from './SideBarTreeWrapper';
 
 const LOCALSTORAGEKEY = 'sidemenu';
 
@@ -28,8 +25,6 @@ export const SideBarTree: FC<ISideBarTreeProps> = ({
   visual,
   label,
   children,
-  href,
-  component,
 }) => {
   const { isExpanded, handleSetExpanded } = useLayout();
 
@@ -48,10 +43,14 @@ export const SideBarTree: FC<ISideBarTreeProps> = ({
       setIsMounted(true);
       return;
     }
-    if (!isExpanded) setTreeIsExpanded(false);
+    if (!isExpanded) {
+      setTreeIsExpanded(false);
+    } else {
+      setTreeIsExpanded(getLocalStorageToggle(label));
+    }
   }, [isExpanded]);
 
-  const toggleTree = (e: PressEvent) => {
+  const toggleTree = () => {
     if (!isExpanded) handleSetExpanded(true);
 
     const innerExpanded = !treeisExpaned;
@@ -59,54 +58,17 @@ export const SideBarTree: FC<ISideBarTreeProps> = ({
     setTreeIsExpanded(innerExpanded);
   };
 
-  const Component = href ? Link : SideBarTreeWrapper;
-
   return (
-    <li className={listItemClass}>
-      <>
-        <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
-          <Component
-            href={href}
-            component={component}
-            variant="transparent"
-            aria-label={label}
-            onPress={toggleTree}
-            isCompact
-            startVisual={visual}
-          >
-            {label}
-          </Component>
-        </Media>
-        <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
-          {!isExpanded ? (
-            <Component
-              href={href}
-              component={component}
-              variant="transparent"
-              aria-label={label}
-              onPress={toggleTree}
-              isCompact
-              startVisual={visual}
-            />
-          ) : (
-            <Component
-              href={href}
-              component={component}
-              aria-label={label}
-              onPress={toggleTree}
-              startVisual={visual}
-              isCompact
-              variant="transparent"
-            >
-              {label}
-            </Component>
-          )}
-        </Media>
-
-        {children && isExpanded && treeisExpaned && (
-          <ul className={sidebartreeListClass}>{children}</ul>
-        )}
-      </>
-    </li>
+    <Stack onClick={toggleTree}>
+      <SideBarItem
+        visual={visual}
+        label={label}
+        tree={
+          !!(children && isExpanded && treeisExpaned) && (
+            <ul className={sidebartreeListClass}>{children}</ul>
+          )
+        }
+      ></SideBarItem>
+    </Stack>
   );
 };
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx
index 44dd1c81c7..d542c84631 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx
@@ -42,6 +42,7 @@ export const SideBarTreeItem: FC<ISideBarTreeItemProps> = ({
   const { handleSetExpanded, isActiveUrl } = useLayout();
   const isMediumDevice = useMedia(breakpoints.md, true);
   const handlePress: MouseEventHandler<HTMLLIElement> = (e) => {
+    console.log(22222, isMediumDevice);
     if (!isMediumDevice) {
       handleSetExpanded(false);
     }
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
index 4fff8459bf..0ebdf189e3 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -117,6 +117,7 @@ export const menuMenuIconClass = style({
 
 export const menuNavWrapperClass = style([
   atoms({
+    marginBlockStart: 'xxxl',
     flex: 1,
   }),
   {
@@ -149,6 +150,7 @@ export const listClass = recipe({
     direction: {
       horizontal: {
         flexDirection: 'row',
+        alignItems: 'center',
       },
       vertical: {
         flexDirection: 'column',
@@ -170,13 +172,71 @@ export const listClass = recipe({
 
 export const listItemClass = style([
   atoms({
-    display: 'flex',
-    flexDirection: 'column',
     width: '100%',
   }),
   {},
 ]);
 
+export const sidebartreeItemClass = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    gap: token('spacing.md'),
+    borderRadius: token('spacing.sm'),
+    textDecoration: 'none',
+    fontSize: token('typography.fontSize.sm'),
+    fontWeight: token('typography.weight.primaryFont.semiBold'),
+    paddingBlock: token('spacing.sm'),
+    cursor: 'pointer',
+
+    selectors: {
+      '&:hover': {
+        backgroundColor: token('color.background.base.@active'),
+        color: token('color.text.base.@hover'),
+      },
+    },
+  },
+  variants: {
+    isExpanded: {
+      true: {
+        paddingInline: token('spacing.md'),
+      },
+      false: {
+        justifyContent: 'center',
+        paddingInline: 0,
+      },
+    },
+    isActive: {
+      true: {
+        backgroundColor: token('color.background.base.@active'),
+        color: token('color.link.base.default'),
+      },
+      false: {
+        color: token('color.text.gray.bolder'),
+        selector: {
+          '&:hover': {
+            color: token('color.text.base.@hover'),
+          },
+        },
+      },
+    },
+  },
+});
+
+globalStyle(`${sidebartreeItemClass()}[data-isactive="true"] svg`, {
+  color: token('color.link.base.default'),
+  width: '12px',
+});
+globalStyle(`${sidebartreeItemClass()}[data-isactive="false"] svg`, {
+  color: token('color.text.gray.bolder'),
+  width: '12px',
+});
+globalStyle(`${sidebartreeItemClass()}[data-isactive="false"]:hover svg`, {
+  color: token('color.text.base.@hover'),
+});
+
 export const listItemInlineClass = style([
   atoms({
     display: 'flex',
@@ -195,12 +255,6 @@ export const listNotExpandedClass = style([
   }),
 ]);
 
-globalStyle(`${listItemClass} button`, {
-  justifyContent: 'flex-start',
-  flex: 1,
-});
-globalStyle(`${listItemClass} a`, { justifyContent: 'flex-start', flex: 1 });
-
 export const headerWrapperClass = recipe({
   base: [
     {
@@ -217,10 +271,24 @@ export const headerWrapperClass = recipe({
   variants: {
     sideBarExpanded: {
       true: {
-        paddingInlineStart: sideBarWidth,
+        ...responsiveStyle({
+          xs: {
+            paddingInlineStart: token('spacing.md'),
+          },
+          md: {
+            paddingInlineStart: sideBarWidth,
+          },
+        }),
       },
       false: {
-        paddingInlineStart: sideBarMinWidth,
+        ...responsiveStyle({
+          xs: {
+            paddingInlineStart: token('spacing.md'),
+          },
+          md: {
+            paddingInlineStart: sideBarMinWidth,
+          },
+        }),
       },
     },
   },
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/utils.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/utils.tsx
new file mode 100644
index 0000000000..070fdd8e8b
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/utils.tsx
@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import type { IButtonProps, ILinkProps } from 'src/components';
+
+export const Anchor = forwardRef<HTMLAnchorElement, ILinkProps>(
+  ({ children, ...props }, ref) => (
+    <a {...props} ref={ref}>
+      {children}
+    </a>
+  ),
+);
+Anchor.displayName = 'Anchor';
+
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  ({ children, ...props }, ref) => (
+    <button {...props} ref={ref}>
+      {children}
+    </button>
+  ),
+);
+Button.displayName = 'Button';
diff --git a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
index 9f8edf719d..a72a656db2 100644
--- a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
@@ -688,6 +688,67 @@ export const tokens = createThemeContract({
          */
         toast: '',
       },
+      effect: {
+        shadow: {
+          /**
+           * This is the shadow 1 description
+           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           */
+          level1: '',
+          /**
+           * This is the shadow 2 description
+           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           */
+          level2: '',
+          /**
+           * This is the shadow 3 description updated
+           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           */
+          level3: '',
+        },
+      },
+      icon: {
+        size: {
+          /**
+           * @light {@link tokens.kda.foundation.size.n3}
+           * @dark {@link tokens.kda.foundation.size.n3}
+           */
+          xxs: '',
+          /**
+           * @light {@link tokens.kda.foundation.size.n4}
+           * @dark {@link tokens.kda.foundation.size.n4}
+           */
+          xs: '',
+          /**
+           * @light {@link tokens.kda.foundation.size.n5}
+           * @dark {@link tokens.kda.foundation.size.n5}
+           */
+          sm: '',
+          /**
+           * @light {@link tokens.kda.foundation.size.n6}
+           * @dark {@link tokens.kda.foundation.size.n6}
+           */
+          base: '',
+          /**
+           * @light {@link tokens.kda.foundation.size.n8}
+           * @dark {@link tokens.kda.foundation.size.n8}
+           */
+          lg: '',
+          /**
+           * @light {@link tokens.kda.foundation.size.n10}
+           * @dark {@link tokens.kda.foundation.size.n10}
+           */
+          xl: '',
+          /**
+           * @light {@link tokens.kda.foundation.size.n16}
+           * @dark {@link tokens.kda.foundation.size.n16}
+           */
+          xxl: '',
+        },
+      },
       color: {
         accent: {
           /**
@@ -3408,12 +3469,32 @@ export const tokens = createThemeContract({
              * @dark {@link tokens.kda.foundation.color.neutral.n100@alpha40}
              */
             default: '',
+            /**
+             * @light {@link tokens.kda.foundation.color.neutral.n60}
+             * @dark {@link tokens.kda.foundation.color.neutral.n60}
+             */
+            lighter: '',
+            /**
+             * @light {@link tokens.kda.foundation.color.neutral.n80}
+             * @dark {@link tokens.kda.foundation.color.neutral.n80}
+             */
+            bolder: '',
             inverse: {
               /**
                * @light {@link tokens.kda.foundation.color.neutral.n0@alpha40}
                * @dark {@link tokens.kda.foundation.color.neutral.n0@alpha40}
                */
               default: '',
+              /**
+               * @light {@link tokens.kda.foundation.color.neutral.n40}
+               * @dark {@link tokens.kda.foundation.color.neutral.n40}
+               */
+              lighter: '',
+              /**
+               * @light {@link tokens.kda.foundation.color.neutral.n20}
+               * @dark {@link tokens.kda.foundation.color.neutral.n20}
+               */
+              bolder: '',
             },
           },
           brand: {
@@ -4940,67 +5021,6 @@ export const tokens = createThemeContract({
           maxWidth: '',
         },
       },
-      effect: {
-        shadow: {
-          /**
-           * This is the shadow 1 description
-           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           */
-          level1: '',
-          /**
-           * This is the shadow 2 description
-           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           */
-          level2: '',
-          /**
-           * This is the shadow 3 description updated
-           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           */
-          level3: '',
-        },
-      },
-      icon: {
-        size: {
-          /**
-           * @light {@link tokens.kda.foundation.size.n3}
-           * @dark {@link tokens.kda.foundation.size.n3}
-           */
-          xxs: '',
-          /**
-           * @light {@link tokens.kda.foundation.size.n4}
-           * @dark {@link tokens.kda.foundation.size.n4}
-           */
-          xs: '',
-          /**
-           * @light {@link tokens.kda.foundation.size.n5}
-           * @dark {@link tokens.kda.foundation.size.n5}
-           */
-          sm: '',
-          /**
-           * @light {@link tokens.kda.foundation.size.n6}
-           * @dark {@link tokens.kda.foundation.size.n6}
-           */
-          base: '',
-          /**
-           * @light {@link tokens.kda.foundation.size.n8}
-           * @dark {@link tokens.kda.foundation.size.n8}
-           */
-          lg: '',
-          /**
-           * @light {@link tokens.kda.foundation.size.n10}
-           * @dark {@link tokens.kda.foundation.size.n10}
-           */
-          xl: '',
-          /**
-           * @light {@link tokens.kda.foundation.size.n16}
-           * @dark {@link tokens.kda.foundation.size.n16}
-           */
-          xxl: '',
-        },
-      },
       typography: {
         family: {
           /**
diff --git a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
index f3b03e8bf5..8eaccd6f73 100644
--- a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
@@ -188,6 +188,24 @@ export const darkThemeValues = {
         sticky: '100',
         toast: '10000',
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
+      icon: {
+        size: {
+          xxs: tokens.kda.foundation.size.n3,
+          xs: tokens.kda.foundation.size.n4,
+          sm: tokens.kda.foundation.size.n5,
+          base: tokens.kda.foundation.size.n6,
+          lg: tokens.kda.foundation.size.n8,
+          xl: tokens.kda.foundation.size.n10,
+          xxl: tokens.kda.foundation.size.n16,
+        },
+      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -904,8 +922,12 @@ export const darkThemeValues = {
           },
           gray: {
             default: tokens.kda.foundation.color.neutral['n100@alpha40'],
+            lighter: tokens.kda.foundation.color.neutral.n60,
+            bolder: tokens.kda.foundation.color.neutral.n80,
             inverse: {
               default: tokens.kda.foundation.color.neutral['n0@alpha40'],
+              lighter: tokens.kda.foundation.color.neutral.n40,
+              bolder: tokens.kda.foundation.color.neutral.n20,
             },
           },
           brand: {
@@ -1292,24 +1314,6 @@ export const darkThemeValues = {
           maxWidth: '42.5rem',
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
-      icon: {
-        size: {
-          xxs: tokens.kda.foundation.size.n3,
-          xs: tokens.kda.foundation.size.n4,
-          sm: tokens.kda.foundation.size.n5,
-          base: tokens.kda.foundation.size.n6,
-          lg: tokens.kda.foundation.size.n8,
-          xl: tokens.kda.foundation.size.n10,
-          xxl: tokens.kda.foundation.size.n16,
-        },
-      },
       typography: {
         family: {
           primaryFont: 'Inter',
diff --git a/packages/libs/kode-ui/src/styles/tokens/light.css.ts b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
index 1ae38636fd..7963493822 100644
--- a/packages/libs/kode-ui/src/styles/tokens/light.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
@@ -188,6 +188,24 @@ export const lightThemeValues = {
         sticky: '100',
         toast: '10000',
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
+      icon: {
+        size: {
+          xxs: tokens.kda.foundation.size.n3,
+          xs: tokens.kda.foundation.size.n4,
+          sm: tokens.kda.foundation.size.n5,
+          base: tokens.kda.foundation.size.n6,
+          lg: tokens.kda.foundation.size.n8,
+          xl: tokens.kda.foundation.size.n10,
+          xxl: tokens.kda.foundation.size.n16,
+        },
+      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -904,8 +922,12 @@ export const lightThemeValues = {
           },
           gray: {
             default: tokens.kda.foundation.color.neutral['n100@alpha40'],
+            lighter: tokens.kda.foundation.color.neutral.n60,
+            bolder: tokens.kda.foundation.color.neutral.n80,
             inverse: {
               default: tokens.kda.foundation.color.neutral['n0@alpha40'],
+              lighter: tokens.kda.foundation.color.neutral.n40,
+              bolder: tokens.kda.foundation.color.neutral.n20,
             },
           },
           brand: {
@@ -1292,24 +1314,6 @@ export const lightThemeValues = {
           maxWidth: '42.5rem',
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
-      icon: {
-        size: {
-          xxs: tokens.kda.foundation.size.n3,
-          xs: tokens.kda.foundation.size.n4,
-          sm: tokens.kda.foundation.size.n5,
-          base: tokens.kda.foundation.size.n6,
-          lg: tokens.kda.foundation.size.n8,
-          xl: tokens.kda.foundation.size.n10,
-          xxl: tokens.kda.foundation.size.n16,
-        },
-      },
       typography: {
         family: {
           primaryFont: 'Inter',