feat(ui): redesign light and dark theme for cohesion and accessibility (#210)#211
Conversation
#210) Replace the stock grayscale shadcn neutral palette with an ocean-blue brand identity and a real surface hierarchy, resolving the audit's ten cross-cutting theme defects. - index.css: ocean-blue OKLCH palette, brand --primary, theme-stable --chart-1..5, semantic --success/--warning/--info tokens and a soft --shadow-card elevation; the light canvas is a cool blue-gray so the white cards visibly lift off it - tables render as elevated white panels with muted headers in light mode and stay byte-identical in dark via the --table-header token plus dark: guards - status colors, chart legends and JSON blocks moved onto semantic tokens; no raw Tailwind color utilities remain in app code - every foreground/surface pair verified to clear WCAG AA in both themes
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @w7-mgfcode, you have reached your weekly rate limit of 500000 diff characters.
Please try again later or upgrade to continue using Sourcery
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Summary
Resolves #210. Replaces the stock grayscale shadcn
neutralpalette with an ocean-blue brand identity and a proper surface hierarchy, fixing the 10 cross-cutting theme defects found in a full light/dark audit.What changed (light + dark)
index.cssrewritten in OKLCH: brand--primary(ocean blue), theme-stable--chart-1..5(no more orange-in-light / blue-in-dark swap), new semantic--success/--warning/--info/--destructive-foregroundtokens, soft--shadow-cardelevation. Dead HSL--chart-*block removed.text-3xl,tabular-nums).ChartLegend+ChartLegendContent) and the JSON viewer moved onto semantic tokens. No raw Tailwind color utilities remain in app code.Dark theme
The dark theme was treated as frozen for the final table pass — table changes are theme-gated (
--table-header→transparent,dark:bg-transparent dark:shadow-none). A pixel diff of the explorer table routes against a pre-change baseline showed 0 differing pixels.Validation
pnpm tsc --noEmit— cleanpnpm lint— 0 errors (1 pre-existing unrelated warning)pnpm test --run— 54/54 passFollow-ups
rounded-md(Cards userounded-xl); unifying deferred to keep dark unchanged.🤖 Generated with Claude Code