feat(ui): fix theme architecture, semantic color tokens, Geist fonts - #316
Merged
Conversation
Theme architecture fix (root cause): - The old app.css put literal dark values in @theme inline, so Tailwind utilities hardcoded dark colors and ignored the :root:not(.dark) override entirely; users with a light system preference got a dark shell with near-black inherited text (invisible headings, titles, button labels). Restructure to canonical pattern: semantic vars on :root/.dark, @theme inline maps utilities to var() so mode-watcher class toggling works in both modes. Tokens: - Add --success/--warning/--info semantic tokens (both modes) - Light-mode primary is near-black (monochrome zinc system), dropping the one-off purple accent - Replace ~30 raw palette classes (text-green-600 dark:text-green-400 etc.) in utils.ts helpers and pages with semantic token classes Typography: - Self-host Geist Variable + Geist Mono Variable via Fontsource - Map --font-sans/--font-mono so font-mono utilities pick up Geist Mono
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
app.cssput literal dark values in@theme inline, so every Tailwind color utility hardcoded dark-mode values and the:root:not(.dark)override only affectedbodyinheritance. Users with a light system preference got a dark shell with near-black inherited text: headings, issue titles, and button labels were literally invisible (verified:--color-foregroundresolved tooklch(0.145)while containers rendered inlined dark backgrounds). Restructured to the canonical pattern — semantic vars on:root/.dark,@theme inlinemapping utilities tovar()so mode-watcher toggling works in both modes--success/--warning/--infosemantic tokens for both modes; replaced ~30 raw palette classes (text-green-600 dark:text-green-400etc.) inutils.tshelpers and pages with token classes that adapt to mode automaticallyfont-monoutilities now render Geist MonoWhy
Light-scheme users saw a broken app (invisible text). The raw-palette helper classes had no dark variants on a dark-first theme, causing constant contrast bugs. Fonts were unstyled system-ui with no token.
Testing
npm run check(0 errors),npm test(10/10),npm run buildpass