Merge pull request #13926 from ethereum/refactor-menu-colors

refactor: menu color tokens
ethereum · Sep 23, 2024 · 0246a35 · 0246a35
2 parents 4148782 + d589a91
commit 0246a35
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 88 deletions.
diff --git a/src/components/Nav/Menu/MenuContent.tsx b/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}

diff --git a/src/components/Nav/Mobile/LvlAccordion.tsx b/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 = ({

diff --git a/src/components/Nav/Mobile/MenuBody.tsx b/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"
                 )}
               >

diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
@@ -10,11 +10,18 @@
     --body-light: var(--gray-200);
     --body-inverse: var(--white);
 
+    --body-menu: var(--gray-400);
+    --body-menu-low: var(--gray-400);
+    --body-menu-medium: var(--gray-500);
+    --body-menu-high: var(--gray-700);
+
     --disabled: var(--gray-400);
 
     --background: var(--white);
     --background-highlight: var(--gray-50);
-    --background-medium: var(--gray-200); /* TODO: VERIFY */
+    --background-low: var(--gray-100);
+    --background-medium: var(--gray-200);
+    --background-high: var(--gray-300);
 
     /* TODO: Add border color tokens to match DS */
 
@@ -101,24 +108,6 @@
     --shadow-window-box-3: 0px 32px 24px -6px hsla(var(--purple-800), var(--shadow-window-box-3-opacity));
     --shadow-window-box-4: 0px 40px 40px -12px hsla(var(--purple-700), var(--shadow-window-box-4-opacity));
     --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);
   }
 
   /* Dark mode token declarations */
@@ -128,11 +117,18 @@
     --body-light: var(--gray-600);
     --body-inverse: var(--black);
 
+    --body-menu: var(--gray-400);
+    --body-menu-low: var(--gray-300);
+    --body-menu-medium: var(--gray-300);
+    --body-menu-high: var(--gray-300);
+
     --disabled: var(--gray-500);
 
     --background: var(--black);
     --background-highlight: var(--gray-900);
-    --background-medium: var(--gray-950); /* TODO: VERIFY */
+    --background-low: var(--gray-700);
+    --background-medium: var(--gray-600);
+    --background-high: var(--gray-800);
 
     /* TODO: Add border color tokens to match DS */
 
@@ -186,23 +182,5 @@
     --shadow-window-box-3-opacity: 0.16;
     --shadow-window-box-4-opacity: 0.06;
     --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);
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -136,13 +136,22 @@ const config = {
           medium: "hsla(var(--body-medium))",
           light: "hsla(var(--body-light))",
           inverse: "hsla(var(--body-inverse))",
+          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))",
+          low: "hsla(var(--background-low))",
+          medium: "hsla(var(--background-medium))",
+          high: "hsla(var(--background-high))",
         },
 
         // TODO: Add border color tokens to match DS
@@ -188,33 +197,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)",