Skip to content

Commit 5ab48d6

Browse files
Ajit Pratap Singhclaude
authored and
Ajit Pratap Singh
committed
fix(website): light mode — dialect select, ghost buttons, playground AST
Fixes from visual screenshot audit: 1. Dialect select in hero: bg-zinc-800/80 was rendering as black box. Added direct class override bg-zinc-800\/80 → #F3F4F6. 2. Ghost button + star button: bg-white/[0.06] and bg-white/5 attribute selectors weren't matching Tailwind v4 class encoding. Added direct class selectors (bg-white\/\[0\.06\], bg-white\/5, etc.). 3. Playground AST tree text too faint: darkened text-slate-400 override from #4B5563 → #475569 and text-slate-300 from #4B5563 → #334155 for better contrast on light backgrounds. 4. Added direct class selectors for all border-white/[x] and bg-white/[x] variants since Tailwind v4 attribute selectors with escaped slashes don't reliably match. 5. Added bg-slate-900/50, bg-slate-900/30, bg-slate-700/50 direct overrides for playground panel backgrounds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 31b0ea4 commit 5ab48d6

1 file changed

Lines changed: 50 additions & 20 deletions

File tree

‎website/src/app/globals.css‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -156,11 +156,11 @@ html.light .text-zinc-600 { color: #4B5563 !important; }
156156
html.light .text-indigo-300 { color: #4338CA !important; }
157157
html.light .text-emerald-400 { color: #059669 !important; }
158158
/* Slate palette (used in playground components) */
159-
html.light .text-slate-200 { color: #374151 !important; }
160-
html.light .text-slate-300 { color: #4B5563 !important; }
161-
html.light .text-slate-400 { color: #4B5563 !important; }
162-
html.light .text-slate-500 { color: #6B7280 !important; }
163-
html.light .text-slate-600 { color: #4B5563 !important; }
159+
html.light .text-slate-200 { color: #1E293B !important; }
160+
html.light .text-slate-300 { color: #334155 !important; }
161+
html.light .text-slate-400 { color: #475569 !important; }
162+
html.light .text-slate-500 { color: #475569 !important; }
163+
html.light .text-slate-600 { color: #334155 !important; }
164164

165165
/* --- Heading gradient: dark gradient on light bg --- */
166166
html.light .from-white { --tw-gradient-from: #0F172A !important; }
@@ -180,6 +180,12 @@ html.light .glass-hover:hover {
180180
}
181181

182182
/* --- Borders (white/opacity → black/opacity) --- */
183+
html.light .border-white\/\[0\.06\] { border-color: rgba(0, 0, 0, 0.08) !important; }
184+
html.light .border-white\/\[0\.08\] { border-color: rgba(0, 0, 0, 0.08) !important; }
185+
html.light .border-white\/\[0\.1\] { border-color: rgba(0, 0, 0, 0.12) !important; }
186+
html.light .border-white\/\[0\.12\] { border-color: rgba(0, 0, 0, 0.12) !important; }
187+
html.light .border-white\/5 { border-color: rgba(0, 0, 0, 0.06) !important; }
188+
html.light .border-white\/10 { border-color: rgba(0, 0, 0, 0.10) !important; }
183189
html.light [class*="border-white\\/"] { border-color: rgba(0, 0, 0, 0.10) !important; }
184190
html.light [class*="divide-white\\/"] { border-color: rgba(0, 0, 0, 0.08) !important; }
185191

@@ -197,19 +203,30 @@ html.light .bg-surface { background-color: #FFFFFF !important; }
197203
html.light .bg-slate-800 { background-color: #E5E7EB !important; }
198204
html.light .bg-slate-900 { background-color: #F3F4F6 !important; }
199205
html.light .bg-slate-950 { background-color: #F9FAFB !important; }
206+
html.light .bg-slate-800\/80 { background-color: #E5E7EB !important; }
207+
html.light .bg-slate-900\/50 { background-color: rgba(0, 0, 0, 0.03) !important; }
208+
html.light .bg-slate-900\/30 { background-color: rgba(0, 0, 0, 0.02) !important; }
209+
html.light .bg-slate-700\/50 { background-color: rgba(0, 0, 0, 0.05) !important; }
210+
html.light .bg-slate-500\/20 { background-color: rgba(0, 0, 0, 0.06) !important; }
211+
html.light .bg-slate-500\/30 { background-color: rgba(0, 0, 0, 0.06) !important; }
212+
/* Fallback attribute selectors */
200213
html.light [class*="bg-slate-800\\/"] { background-color: rgba(0, 0, 0, 0.04) !important; }
201214
html.light [class*="bg-slate-900\\/"] { background-color: rgba(0, 0, 0, 0.03) !important; }
202215
html.light [class*="bg-slate-700\\/"] { background-color: rgba(0, 0, 0, 0.05) !important; }
203216
html.light [class*="bg-slate-500\\/"] { background-color: rgba(0, 0, 0, 0.06) !important; }
204217

205218
/* Slate borders */
206-
html.light .border-slate-700 { border-color: rgba(0, 0, 0, 0.10) !important; }
219+
html.light .border-slate-700 { border-color: rgba(0, 0, 0, 0.12) !important; }
207220
html.light .border-slate-800 { border-color: rgba(0, 0, 0, 0.08) !important; }
221+
html.light .border-slate-500\/30 { border-color: rgba(0, 0, 0, 0.12) !important; }
222+
html.light .border-slate-500\/20 { border-color: rgba(0, 0, 0, 0.10) !important; }
208223
html.light [class*="border-slate-500\\/"] { border-color: rgba(0, 0, 0, 0.12) !important; }
209224
html.light [class*="border-slate-700\\/"] { border-color: rgba(0, 0, 0, 0.08) !important; }
210225

211226
/* Zinc backgrounds */
227+
html.light .bg-zinc-700 { background-color: #D1D5DB !important; }
212228
html.light .bg-zinc-800 { background-color: #E5E7EB !important; }
229+
html.light .bg-zinc-800\/80 { background-color: #E5E7EB !important; }
213230
html.light .bg-zinc-900 { background-color: #F3F4F6 !important; }
214231
html.light .bg-zinc-950 { background-color: #F9FAFB !important; }
215232

@@ -250,25 +267,38 @@ html.light .bg-white.text-zinc-950:hover {
250267
background-color: #2D2D44 !important;
251268
}
252269

253-
/* Ghost button */
254-
html.light [class*="bg-white\\/\\[0\\.06\\]"][class*="border"][class*="text-zinc-300"] {
255-
background-color: rgba(0, 0, 0, 0.04);
256-
border-color: rgba(0, 0, 0, 0.12);
257-
color: #374151;
270+
/* Ghost button + hover states for transparent white backgrounds */
271+
html.light .bg-white\/\[0\.06\] {
272+
background-color: rgba(0, 0, 0, 0.05) !important;
273+
border-color: rgba(0, 0, 0, 0.15) !important;
258274
}
259-
html.light [class*="bg-white\\/\\[0\\.06\\]"][class*="border"][class*="text-zinc-300"]:hover {
260-
background-color: rgba(0, 0, 0, 0.08);
261-
color: #1A1A2E;
275+
html.light .bg-white\/\[0\.1\] {
276+
background-color: rgba(0, 0, 0, 0.08) !important;
277+
}
278+
html.light .bg-white\/\[0\.04\] {
279+
background-color: rgba(0, 0, 0, 0.04) !important;
280+
}
281+
html.light .bg-white\/\[0\.03\] {
282+
background-color: rgba(0, 0, 0, 0.03) !important;
262283
}
263284

264285
/* GitHub star button */
265-
html.light a[class*="bg-white\\/5"][class*="border-white\\/10"] {
266-
background-color: rgba(0, 0, 0, 0.03);
267-
border-color: rgba(0, 0, 0, 0.10);
268-
color: #374151;
286+
html.light .bg-white\/5 {
287+
background-color: rgba(0, 0, 0, 0.04) !important;
288+
}
289+
html.light .bg-white\/10 {
290+
background-color: rgba(0, 0, 0, 0.06) !important;
269291
}
270-
html.light a[class*="bg-white\\/5"][class*="border-white\\/10"]:hover {
271-
background-color: rgba(0, 0, 0, 0.06);
292+
293+
/* MiniPlayground dialect select */
294+
html.light .bg-zinc-800\/80 {
295+
background-color: #F3F4F6 !important;
296+
color: #374151 !important;
297+
border-color: rgba(0, 0, 0, 0.12) !important;
298+
}
299+
html.light select option {
300+
background-color: #FFFFFF;
301+
color: #1A1A2E;
272302
}
273303

274304
/* --- Version badge --- */

0 commit comments

Comments
 (0)