Foundations: light-surface fix, locked palette, spacing + type tokens - #234
Draft
jackhenderson12 wants to merge 2 commits into
Draft
Foundations: light-surface fix, locked palette, spacing + type tokens#234jackhenderson12 wants to merge 2 commits into
jackhenderson12 wants to merge 2 commits into
Conversation
Additive, low-risk foundation for the refinement work — no surface repaint here (the bg-golden-fizz → white change lands in its own PR). - global.css: set color-scheme:light and a white <body> background so pages that don't paint their own surface no longer fall through to the browser's dark canvas (which rendered black body text invisible in OS dark mode — Updates, articles, Search, Wiki). Set on low-specificity selectors so utilities (bg-black, bg-golden-fizz, a page's bodyBg) still override — intentionally dark/yellow bands are unaffected. - tailwind.config.js: lock the brand palette to black/white/golden-fizz; remove single-use off-brand light-gold/light-black; quarantine gray/red (kept only for the CWNYC vote-bar data-viz) under a "restricted, non- brand" comment so they're not used on brand surfaces. - popup.njk / about: swap the two light-gold / light-black usages to brand golden-fizz / black. - link.css: de-gray .see-more-link (brand black at reduced opacity). - tailwind.config.js: add documented section/block/element spacing-rhythm tokens for consistent gaps between structural blocks. - README: document the palette, contrast rule, surface default, type roles (one Messer weight → hierarchy by size), and the spacing scale. npm run build passes. Dark-mode fix verified in-browser (Updates renders white; 404's bodyBg yellow still wins). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the rationale to the README palette note so a future pass doesn't "tidy up" the restricted colors and break the Community Week NYC vote bars: there the colors carry meaning (data encoding), not decoration, so they're exempt from the brand-surface three-token rule. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
PR #2 of the refinement sequence (follows the design direction audit). Additive, low-risk foundation only — no surface repaint here. Swapping the
bg-golden-fizzfull-page screens to white is a big, page-by-page visual diff and gets its own PR so reviewers can see it in isolation.Draft, for review.
What's in it
1. Light-surface / dark-mode fix (the high-value one)
global.cssnow setscolor-scheme: lightand a white<body>background. Previously<body>had no background or text color, so any page that doesn't paint its own surface (Updates, every article, Search, Wiki, Community lists) fell through to the browser's dark canvas for OS-dark-mode visitors → black text on a near-black background.Set on low-specificity selectors (
:root,body), so any Tailwind utility on a page wrapper or section (bg-black,bg-golden-fizz, a page'sbodyBg) still wins — intentionally-dark or yellow bands are unaffected. Verified in-browser under emulated dark mode:bodyBg: bg-golden-fizz):<body>still computes brand yellowrgb(237,255,56)— the default is overridable, as intended.2. Locked brand palette (config level only)
tailwind.config.jscolors reorganized into a locked brand group (black,white,golden-fizz) and a clearly-commented restricted, non-brand group:light-gold/light-black; their two usages swapped to brandgolden-fizz/black(popup CTA, about press overlay — near-invisible changes)..see-more-linkde-grayed → brand black at reduced opacity.grayandredare quarantined, not deleted. They're used for functional vote-bar data-viz on the Community Week NYC microsite; deleting them would break that page, which doesn't belong in a foundations PR. Commented as restricted and flagged for removal when CWNYC is redesigned. → Confirm you're happy with quarantine-vs-delete here.3. Spacing-rhythm tokens (additive scaffolding)
Documented
section/block/elementspacing tokens for consistent gaps between structural blocks (used by later component/template PRs, replacing ad-hocmb-16/mb-8).4. README documentation
Palette + contrast rule, surface/color-scheme note, the type roles table (one Messer weight → hierarchy by size; flags the Suisse Book-vs-Regular body drift), and the spacing scale.
Constraints
Stays in 11ty + Nunjucks + Tailwind. No content/routes/redirects/i18n/Fathom/newsletter changes.
npm run buildpasses.Next (separate PRs)
Reusable components (section header, content card, button pair, motifs) → global chrome → surface repaint (white + black-section moments) → homepage restructure → content templates.
🤖 Generated with Claude Code