Skip to content

Commit 154bc3c

Browse files
pettinarippettinarip
committed
update menu colors to use hsla
1 parent 2f80308 commit 154bc3c

File tree

3 files changed

+52
-52
lines changed

3 files changed

+52
-52
lines changed

‎src/styles/global.css

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -69,24 +69,6 @@
6969
rgba(145, 234, 228, 0.2) 100%
7070
);
7171
--search-background: var(--background);
72-
73-
/* Menu colors */
74-
--menu: var(--body);
75-
--menu-hover: var(--gray-200);
76-
--menu-active: var(--primary);
77-
--menu-active-background: var(--primary-high-contrast);
78-
--menu-1-subtext: var(--gray-400);
79-
--menu-1-background: white;
80-
--menu-1-active-background: var(--gray-150);
81-
--menu-2-subtext: var(--gray-400);
82-
--menu-2-background: var(--gray-150);
83-
--menu-2-active-background: var(--gray-200);
84-
--menu-3-subtext: var(--gray-500);
85-
--menu-3-background: var(--gray-200);
86-
--menu-3-active-background: var(--gray-100);
87-
--menu-4-subtext: var(--gray-700);
88-
--menu-4-background: var(--gray-300);
89-
--menu-4-active-background: var(--gray-200);
9072
}
9173

9274
.dark {
@@ -137,24 +119,6 @@
137119
rgba(134, 253, 232, 0.08) 100%
138120
);
139121
--search-background: #4c4c4c;
140-
141-
/* Menu colors */
142-
--menu: var(--body);
143-
--menu-hover: var(--gray-200);
144-
--menu-active: var(--primary);
145-
--menu-active-background: var(--primary-high-contrast);
146-
--menu-1-subtext: var(--gray-400);
147-
--menu-1-background: black;
148-
--menu-1-active-background: var(--gray-700);
149-
--menu-2-subtext: var(--gray-300);
150-
--menu-2-background: var(--gray-700);
151-
--menu-2-active-background: var(--gray-600);
152-
--menu-3-subtext: var(--gray-300);
153-
--menu-3-background: var(--gray-600);
154-
--menu-3-active-background: var(--gray-700);
155-
--menu-4-subtext: var(--gray-300);
156-
--menu-4-background: var(--gray-700);
157-
--menu-4-active-background: var(--gray-800);
158122
}
159123
}
160124

‎src/styles/semantic-tokens.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,24 @@
7676
--shadow-window-box-3: 0px 32px 24px -6px hsla(var(--purple-800), var(--shadow-window-box-3-opacity));
7777
--shadow-window-box-4: 0px 40px 40px -12px hsla(var(--purple-700), var(--shadow-window-box-4-opacity));
7878
--shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity));
79+
80+
/* Menu colors */
81+
--menu: var(--body);
82+
--menu-hover: var(--gray-200);
83+
--menu-active: var(--primary);
84+
--menu-active-background: var(--primary-high-contrast);
85+
--menu-1-subtext: var(--gray-400);
86+
--menu-1-background: var(--white);
87+
--menu-1-active-background: var(--gray-150);
88+
--menu-2-subtext: var(--gray-400);
89+
--menu-2-background: var(--gray-150);
90+
--menu-2-active-background: var(--gray-200);
91+
--menu-3-subtext: var(--gray-500);
92+
--menu-3-background: var(--gray-200);
93+
--menu-3-active-background: var(--gray-100);
94+
--menu-4-subtext: var(--gray-700);
95+
--menu-4-background: var(--gray-300);
96+
--menu-4-active-background: var(--gray-200);
7997
}
8098

8199
/* Dark mode token declarations */
@@ -127,5 +145,23 @@
127145
--shadow-window-box-3-opacity: 0.16;
128146
--shadow-window-box-4-opacity: 0.06;
129147
--shadow-window-box-5-opacity: 0.06;
148+
149+
/* Menu colors */
150+
--menu: var(--body);
151+
--menu-hover: var(--gray-200);
152+
--menu-active: var(--primary);
153+
--menu-active-background: var(--primary-high-contrast);
154+
--menu-1-subtext: var(--gray-400);
155+
--menu-1-background: var(--black);
156+
--menu-1-active-background: var(--gray-700);
157+
--menu-2-subtext: var(--gray-300);
158+
--menu-2-background: var(--gray-700);
159+
--menu-2-active-background: var(--gray-600);
160+
--menu-3-subtext: var(--gray-300);
161+
--menu-3-background: var(--gray-600);
162+
--menu-3-active-background: var(--gray-700);
163+
--menu-4-subtext: var(--gray-300);
164+
--menu-4-background: var(--gray-700);
165+
--menu-4-active-background: var(--gray-800);
130166
}
131167
}

‎tailwind.config.ts

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -176,29 +176,29 @@ const config = {
176176
neutral: "hsla(var(--success-neutral))",
177177
},
178178
menu: {
179-
DEFAULT: "var(--menu)",
180-
hover: "var(--menu-hover)",
181-
active: "var(--menu-active)",
182-
"active-background": "var(--menu-active-background)",
179+
DEFAULT: "hsla(var(--menu))",
180+
hover: "hsla(var(--menu-hover))",
181+
active: "hsla(var(--menu-active))",
182+
"active-background": "hsla(var(--menu-active-background))",
183183
1: {
184-
subtext: "var(--menu-1-subtext)",
185-
background: "var(--menu-1-background)",
186-
"active-background": "var(--menu-1-active-background)",
184+
subtext: "hsla(var(--menu-1-subtext))",
185+
background: "hsla(var(--menu-1-background))",
186+
"active-background": "hsla(var(--menu-1-active-background))",
187187
},
188188
2: {
189-
subtext: "var(--menu-2-subtext)",
190-
background: "var(--menu-2-background)",
191-
"active-background": "var(--menu-2-active-background)",
189+
subtext: "hsla(var(--menu-2-subtext))",
190+
background: "hsla(var(--menu-2-background))",
191+
"active-background": "hsla(var(--menu-2-active-background))",
192192
},
193193
3: {
194-
subtext: "var(--menu-3-subtext)",
195-
background: "var(--menu-3-background)",
196-
"active-background": "var(--menu-3-active-background)",
194+
subtext: "hsla(var(--menu-3-subtext))",
195+
background: "hsla(var(--menu-3-background))",
196+
"active-background": "hsla(var(--menu-3-active-background))",
197197
},
198198
4: {
199-
subtext: "var(--menu-4-subtext)",
200-
background: "var(--menu-4-background)",
201-
"active-background": "var(--menu-4-active-background)",
199+
subtext: "hsla(var(--menu-4-subtext))",
200+
background: "hsla(var(--menu-4-background))",
201+
"active-background": "hsla(var(--menu-4-active-background))",
202202
},
203203
},
204204
},

0 commit comments

Comments
 (0)