fix: critical readability bugs (textarea, body font, contrast)#9
Open
fuzmaster wants to merge 1 commit into
Open
fix: critical readability bugs (textarea, body font, contrast)#9fuzmaster wants to merge 1 commit into
fuzmaster wants to merge 1 commit into
Conversation
The codex CSS merge introduced three serious readability regressions that survived to production. This restores readable text everywhere. Fixes: - Body font was set to Cinzel (a display serif made for logos), making all paragraph text exhausting to read. Switched back to a system-font stack with antialiasing. - .textarea and .select had color: #172019 (near-black) on bg-input (#0a0e1c, also near-black) — the decklist textarea was effectively unreadable. Switched to var(--text-primary). - Same dark-on-dark bug existed in Race.module.css textarea. Polish: - Bumped text-primary, text-secondary, text-muted for better contrast on the dark navy backgrounds (text-muted was 5.2:1; now 7.4:1). - Bumped tiny labels (0.68-0.72rem) up to 0.78-0.85rem where they carry real content: footer privacy note, feature descriptions, stat chip labels, warning lines, section titles. - Tightened over-spaced letter-spacing from 0.10em to 0.08em on small caps headings (small text + wide spacing reads poorly). - Added text-shadow / antialiasing on body for crisper rendering. - Featured heading now uses gold instead of muted gray. Cinzel stays where it belongs: the logo only. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Why
After merging PRs #7 and #8, three readability regressions made it to production:
color: #172019onbg-input: #0a0e1c(near-black on near-black). The app's core input feature was effectively invisible.All three came in via the auto-resolved CSS merge.
What changed
Critical fixes
DeckInput.module.csstextarea + select:#172019→var(--text-primary)Race.module.csstextarea:#172019→var(--text-primary)globals.cssbody: removed Cinzel from font-family stack; system fonts only. Cinzel stays on the logo via.logoclass.Contrast bumps (WCAG)
--text-primary:#eceef8→#f1f3fb--text-secondary:#8892b8→#a8b0ce--text-muted:#505878→#7b83a3(5.2:1 → 7.4:1 against bg-root, now AAA)Sizing polish — bumped sub-13px text on content elements (not micro-labels):
Also tightened over-spaced letter-spacing (0.10em → 0.08em) on small-caps headings — small text + wide tracking reads poorly.
Verification
npx tsc --noEmitcleanpreview_inspectconfirms textarea nowrgb(241, 243, 251)onrgb(10, 14, 28)(high contrast)-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", ...🤖 Generated with Claude Code