refactor: menu color tokens

uses a "default, low, medium, high" structure for menu backgrounds and text colors, representing different layers to stacking menu sections. Blends this with existing DS to introduce "low" "medium" and "high" background colors.

Author: wackerow

src/components/Nav/Menu/MenuContent.tsx

@@ -13,35 +13,35 @@ export const navMenuVariants = tv({
   slots: {
     base: "text-body",
     item: "has-[button[data-state=open]]:rounded-s-md has-[button[data-state=open]]:rounded-e-none has-[button[data-state=open]]:-me-2 has-[button[data-state=open]]:pe-2",
-    link: "group w-full relative py-4 hover:text-menu-active [&:hover_p]:text-menu-active focus-visible:text-menu-active [&:focus-visible_p]:text-menu-active hover:outline-0 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
+    link: "group w-full relative py-4 hover:text-primary [&:hover_p]:text-primary focus-visible:text-primary [&:focus-visible_p]:text-primary hover:outline-0 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
     linkSubtext: "text-sm",
     submenu: "grid h-full w-full grid-cols-1",
   },
   variants: {
     level: {
       1: {
-        submenu: "grid-cols-3 bg-menu-1-background",
-        item: "has-[button[data-state=open]]:bg-menu-1-active-background",
-        link: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-background",
-        linkSubtext: "group-[data-active=true]:text-menu-1-subtext",
+        submenu: "grid-cols-3 bg-background",
+        item: "has-[button[data-state=open]]:bg-background-low",
+        link: "data-[active=true]:bg-background-low hover:bg-background-low focus-visible:bg-background-low",
+        linkSubtext: "group-[data-active=true]:text-body-menu",
       },
       2: {
-        submenu: "grid-cols-2 bg-menu-2-background",
-        item: "has-[button[data-state=open]]:bg-menu-2-active-background",
-        link: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-background",
-        linkSubtext: "group-[data-active=true]:text-menu-2-subtext",
+        submenu: "grid-cols-2 bg-background-low",
+        item: "has-[button[data-state=open]]:bg-background-medium",
+        link: "hover:bg-background-medium focus-visible:bg-background-medium data-[active=true]:bg-background-medium",
+        linkSubtext: "group-[data-active=true]:text-body-menu-low",
       },
       3: {
-        submenu: "grid-cols-1 bg-menu-3-background",
-        item: "has-[button[data-state=open]]:bg-menu-3-active-background",
-        link: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-background",
-        linkSubtext: "group-[data-active=true]:text-menu-3-subtext",
+        submenu: "grid-cols-1 bg-background-medium",
+        item: "has-[button[data-state=open]]:bg-background-low`",
+        link: "data-[active=true]:bg-background-low hover:bg-background-low",
+        linkSubtext: "group-[data-active=true]:text-body-menu-medium",
       },
       4: {
-        submenu: "grid-cols-1 bg-menu-4-background",
-        item: "has-[button[data-state=open]]:bg-menu-4-active-background",
-        link: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-background",
-        linkSubtext: "group-[data-active=true]:text-menu-4-subtext",
+        submenu: "grid-cols-1 bg-background-high",
+        item: "has-[button[data-state=open]]:bg-background-medium",
+        link: "data-[active=true]:bg-background-medium hover:bg-background-medium",
+        linkSubtext: "group-[data-active=true]:text-body-menu-high",
       },
     },
   },
@@ -62,7 +62,7 @@ const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => {
     <Content asChild>
       <motion.div
         className={cn(
-          "absolute inset-x-0 top-19 border border-body-light bg-menu-1-background shadow-md",
+          "absolute inset-x-0 top-19 border border-body-light bg-background shadow-md",
           base()
         )}
         variants={containerVariants}

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -33,10 +33,10 @@ const subtextColorPerLevel = {
 }
 
 const backgroundColorPerLevel = {
-  1: "bg-menu-1-background",
-  2: "bg-menu-2-background",
-  3: "bg-menu-3-background",
-  4: "bg-menu-4-background",
+  1: "bg-background",
+  2: "bg-background-low",
+  3: "bg-background-medium",
+  4: "bg-background-high",
 }
 
 const LvlAccordion = ({

src/components/Nav/Mobile/MenuBody.tsx

@@ -64,7 +64,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
 
               <AccordionContent
                 className={cn(
-                  "mt-0 bg-menu-2-background p-0",
+                  "mt-0 bg-background-low p-0",
                   isExpanded && "border-t border-disabled"
                 )}
               >

src/styles/semantic-tokens.css

@@ -14,7 +14,10 @@
 
     --background: var(--white);
     --background-highlight: var(--gray-50);
-    --background-medium: var(--gray-200); /* TODO: VERIFY */
+    /* TODO: Add "low" "medium" and "high" to design system */
+    --background-low: var(--gray-100);
+    --background-medium: var(--gray-200);
+    --background-high: var(--gray-300);
 
     /* TODO: Add border color tokens to match DS */
 
@@ -103,22 +106,10 @@
     --shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity));
 
     /* Menu colors */
-    --menu: var(--body);
-    --menu-hover: var(--gray-200);
-    --menu-active: var(--primary);
-    --menu-active-background: var(--primary-high-contrast);
-    --menu-1-subtext: var(--gray-400);
-    --menu-1-background: var(--white);
-    --menu-1-active-background: var(--gray-150);
-    --menu-2-subtext: var(--gray-400);
-    --menu-2-background: var(--gray-150);
-    --menu-2-active-background: var(--gray-200);
-    --menu-3-subtext: var(--gray-500);
-    --menu-3-background: var(--gray-200);
-    --menu-3-active-background: var(--gray-100);
-    --menu-4-subtext: var(--gray-700);
-    --menu-4-background: var(--gray-300);
-    --menu-4-active-background: var(--gray-200);
+    --body-menu: var(--gray-400);
+    --body-menu-low: var(--gray-400);
+    --body-menu-medium: var(--gray-500);
+    --body-menu-high: var(--gray-700);
   }
 
   /* Dark mode token declarations */
@@ -132,7 +123,11 @@
 
     --background: var(--black);
     --background-highlight: var(--gray-900);
-    --background-medium: var(--gray-950); /* TODO: VERIFY */
+
+    /* TODO: Add "low" "medium" and "high" to design system */
+    --background-low: var(--gray-700);
+    --background-medium: var(--gray-600);
+    --background-high: var(--gray-800);
 
     /* TODO: Add border color tokens to match DS */
 
@@ -188,21 +183,9 @@
     --shadow-window-box-5-opacity: 0.06;
 
     /* Menu colors */
-    --menu: var(--body);
-    --menu-hover: var(--gray-200);
-    --menu-active: var(--primary);
-    --menu-active-background: var(--primary-high-contrast);
-    --menu-1-subtext: var(--gray-400);
-    --menu-1-background: var(--black);
-    --menu-1-active-background: var(--gray-700);
-    --menu-2-subtext: var(--gray-300);
-    --menu-2-background: var(--gray-700);
-    --menu-2-active-background: var(--gray-600);
-    --menu-3-subtext: var(--gray-300);
-    --menu-3-background: var(--gray-600);
-    --menu-3-active-background: var(--gray-700);
-    --menu-4-subtext: var(--gray-300);
-    --menu-4-background: var(--gray-700);
-    --menu-4-active-background: var(--gray-800);
+    --body-menu: var(--gray-400);
+    --body-menu-low: var(--gray-300);
+    --body-menu-medium: var(--gray-300);
+    --body-menu-high: var(--gray-300);
   }
 }

tailwind.config.ts

@@ -136,13 +136,25 @@ const config = {
           medium: "hsla(var(--body-medium))",
           light: "hsla(var(--body-light))",
           inverse: "hsla(var(--body-inverse))",
+
+          // TODO: Add "body-menu" to design system
+          menu: {
+            DEFAULT: "hsla(var(--body-menu))",
+            low: "hsla(var(--body-menu-low))",
+            medium: "hsla(var(--body-menu-medium))",
+            high: "hsla(var(--body-menu-high))",
+          },
         },
 
         disabled: "hsla(var(--disabled))",
 
         background: {
           DEFAULT: "hsla(var(--background))",
           highlight: "hsla(var(--background-highlight))",
+          // TODO : Add "low" "medium" and "high" to design system
+          low: "hsla(var(--background-low))",
+          medium: "hsla(var(--background-medium))",
+          high: "hsla(var(--background-high))",
         },
 
         // TODO: Add border color tokens to match DS
@@ -192,33 +204,6 @@ const config = {
           light: "hsla(var(--warning-light))",
         },
 
-        menu: {
-          DEFAULT: "hsla(var(--menu))",
-          hover: "hsla(var(--menu-hover))",
-          active: "hsla(var(--menu-active))",
-          "active-background": "hsla(var(--menu-active-background))",
-          1: {
-            subtext: "hsla(var(--menu-1-subtext))",
-            background: "hsla(var(--menu-1-background))",
-            "active-background": "hsla(var(--menu-1-active-background))",
-          },
-          2: {
-            subtext: "hsla(var(--menu-2-subtext))",
-            background: "hsla(var(--menu-2-background))",
-            "active-background": "hsla(var(--menu-2-active-background))",
-          },
-          3: {
-            subtext: "hsla(var(--menu-3-subtext))",
-            background: "hsla(var(--menu-3-background))",
-            "active-background": "hsla(var(--menu-3-active-background))",
-          },
-          4: {
-            subtext: "hsla(var(--menu-4-subtext))",
-            background: "hsla(var(--menu-4-background))",
-            "active-background": "hsla(var(--menu-4-active-background))",
-          },
-        },
-
         /** @deprecated */
         "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
         "tooltip-shadow": "var(--tooltip-shadow)",