fix(tokens): rename base color to dark (kill text-base footgun)#5
Merged
Conversation
The palette defined a color named `base`, which is also Tailwind's default font-size key. So `.text-base` emitted BOTH a font-size AND `color: #0E0E10` — the footgun that rendered the Education headings invisible (#3, partially fixed at the call site in #4). Renaming the color token to `dark` makes the collision structurally impossible: `text-base` is now purely a font size. - Migrate every color call site: `bg-base`/`ring-offset-base`/`border-base` and the deliberate dark-on-lime `text-base` → `*-dark`. - The two legitimate sizing uses of `text-base` (contact input, Toast close) are left untouched — now unambiguous. - New `tests/unit/tailwind-tokens.test.ts` locks the invariant: no color token may share a name with a font-size key (would have caught this). - New `e2e/accent-contrast.spec.ts` guards that the accent CTA + selected segmented label still render dark text on lime. Removing the footgun also surfaced two latent size bugs it had been masking, now fixed: the "In progress" pill rendered 16px (its `text-[10px]` was being overridden), and the selected segmented label rendered 16px vs 14px for the others (size jump on select). The nav CTA keeps a 12px label. Closes #3
|
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.
Root cause (#3)
The palette defined a color token named
base, andbaseis also Tailwind's defaultfont-sizekey. So.text-baseemitted two rules — a font-size andcolor: #0E0E10. That's the footgun that rendered the Education headings invisible (#4 fixed the symptom at one call site; this fixes the cause).Fix
Rename the color token
base→dark. Nowtext-baseis purely a font-size utility and the collision is structurally impossible.bg-base/ring-offset-base/border-baseand the deliberate dark-on-limetext-base→*-dark.text-base(contact input, Toast close button) untouched — now unambiguous.Tests
tests/unit/tailwind-tokens.test.ts— locks the invariant that no color token may share a name with a font-size key. This is the durable guard; it fails on the oldbasecollision and would have caught the original bug.e2e/accent-contrast.spec.ts— asserts the accent CTA + selected segmented-control label still render genuinely dark text on lime (regression guard iftext-darkis ever dropped).e2e/about-readability.spec.tsstill passes. Full suite: lint ✓, tsc ✓, 240 unit ✓, e2e ✓.Two latent bugs the footgun was masking (now fixed, verified in-browser)
Removing the silent color also removed
text-base's silent size override at a few sites. Two were genuine bugs:text-[10px]was being overridden) → now 10px, matching its neighbouring tags.The nav "Let's talk" CTA settles to a 12px label (matching the nav's mono-label scale) — reviewed and chosen over restoring the old 16px.
Closes #3