update menu colors to use hsla

ethereum · Sep 9, 2024 · 154bc3c · 154bc3c
1 parent 2f80308
commit 154bc3c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 52 deletions.
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -69,24 +69,6 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
-
-    /* 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: 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 {
@@ -137,24 +119,6 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
-
-    /* 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: 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/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
@@ -76,6 +76,24 @@
     --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 */
@@ -127,5 +145,23 @@
     --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
@@ -176,29 +176,29 @@ const config = {
           neutral: "hsla(var(--success-neutral))",
         },
         menu: {
-          DEFAULT: "var(--menu)",
-          hover: "var(--menu-hover)",
-          active: "var(--menu-active)",
-          "active-background": "var(--menu-active-background)",
+          DEFAULT: "hsla(var(--menu))",
+          hover: "hsla(var(--menu-hover))",
+          active: "hsla(var(--menu-active))",
+          "active-background": "hsla(var(--menu-active-background))",
           1: {
-            subtext: "var(--menu-1-subtext)",
-            background: "var(--menu-1-background)",
-            "active-background": "var(--menu-1-active-background)",
+            subtext: "hsla(var(--menu-1-subtext))",
+            background: "hsla(var(--menu-1-background))",
+            "active-background": "hsla(var(--menu-1-active-background))",
           },
           2: {
-            subtext: "var(--menu-2-subtext)",
-            background: "var(--menu-2-background)",
-            "active-background": "var(--menu-2-active-background)",
+            subtext: "hsla(var(--menu-2-subtext))",
+            background: "hsla(var(--menu-2-background))",
+            "active-background": "hsla(var(--menu-2-active-background))",
           },
           3: {
-            subtext: "var(--menu-3-subtext)",
-            background: "var(--menu-3-background)",
-            "active-background": "var(--menu-3-active-background)",
+            subtext: "hsla(var(--menu-3-subtext))",
+            background: "hsla(var(--menu-3-background))",
+            "active-background": "hsla(var(--menu-3-active-background))",
           },
           4: {
-            subtext: "var(--menu-4-subtext)",
-            background: "var(--menu-4-background)",
-            "active-background": "var(--menu-4-active-background)",
+            subtext: "hsla(var(--menu-4-subtext))",
+            background: "hsla(var(--menu-4-background))",
+            "active-background": "hsla(var(--menu-4-active-background))",
           },
         },
       },