Foundation surfaces: paper canvas, flat header chrome, semantic buttons/forms#13105
Closed
lokesh wants to merge 5 commits into
Closed
Foundation surfaces: paper canvas, flat header chrome, semantic buttons/forms#13105lokesh wants to merge 5 commits into
lokesh wants to merge 5 commits into
Conversation
…ted aliases - Rewrite static/css/tokens/colors.css into three tiers: primitive ramps (warm neutrals, blue, red/green/amber), semantic tokens (--color-*, the dark-mode seam), and deprecated aliases that re-point every legacy token name so all ~2,100 existing var() consumers shift to the new palette with zero edits. - Brand blues are bit-identical (--blue-500/600 == --primary-blue/--link-blue). - Add tests/unit/js/token-contrast.test.js asserting the WCAG AA contrast matrix over the semantic tokens (runs in npm test). - Add bundlesize budgets for tokens.css (6KB) and ol-components.css (8KB). - Update docs/ai/design.md token documentation (fix nonexistent tokens/typography.css reference). - Remove --beige-bright (zero consumers).
- Ship latin-subset variable woff2 fonts (Literata wght 400-700 / opsz 12-36, ~55KB; Inter wght 400-700, ~50KB), built with fonttools varLib.instancer + pyftsubset (pipeline documented in static/fonts/README.md). - New tokens/font-faces.css: @font-face with font-display: swap, latin unicode-range, and metric-adjusted local fallbacks (Georgia/Arial with size-adjust/ascent/descent overrides) - measured CLS 0.01 on a throttled cold load. - Preload both fonts in site/head.html (crossorigin, required for font preloads; verified single fetch per font). - font-families.css: primitives now lead with Inter/Literata; all semantic tokens reference the primitives instead of verbatim copies (fixes --font-family-code Menlo divergence). Headings stay sans for now - the serif flip lands with the type-scale PR. - Fix undefined var(--body-family) in legacy.css (-> --font-family-body). Non-latin scripts fall back to system stacks via unicode-range; italics are synthesized.
- font-families.css: size tokens px -> rem (same computed defaults, now
honoring browser font-size prefs); delete unused
--font-size-display-large/-medium; add --font-size-body-small (13px)
and --font-weight-{normal,medium,semibold,bold} tokens; flip
--font-family-heading to the serif (Literata) for h1-h3.
- base/common.css: one ink color for text and headings (--color-text);
h1-h3 serif at weight 500 with text-wrap: balance, h4-h6 sans at 600;
links -> --color-link/-hover/-visited; hr -> --color-border-subtle.
- base/headings.css: prune dead rules (h1.publisher, h2.authorEdition,
h2.publisher, h3.Question, h4.publisher/observer-count, .titleSmall,
forced-serif h5 - all grep-verified unused in templates/JS/Vue);
re-point --brown/--grey/--black at semantic text tokens.
- stylelint: font-size added to declaration-strict-value for migrated
files only (ratchet grows per phase).
- Fix Python-2 'except OSError, ValueError:' SyntaxError in design.py
that kept /developers/design from importing.
- /developers/design: new Design Tokens + Typography reference
(design/tokens.html) - color ramps, semantic table, and type specimen
resolved live from the loaded tokens.css, so the spec can't drift.
…ns/forms - Body canvas -> var(--color-background) (warm paper neutral-50). - header-bar: mobile sticky gradient flattened to --color-surface-header; hardcoded hairline hsl()/hsla() literals -> --color-border-subtle; dropdown menus and app drawer -> white --color-surface with subtle borders; nav/browse text -> --color-text; badges -> --color-primary; desktop search pill -> --color-surface. - footer: text -> --color-text-secondary, links -> --color-link, rules/borders -> --color-border-subtle. - Buttons (cta/btn/link/ol-button): primary states -> --color-primary/ -hover/-active/-on-primary; hardcoded hsl(202,96%,17%) hovers -> --color-primary-active; disabled -> --color-disabled-*; sponsor tint -> --color-primary-subtle; deleted the cta-btn/linkButton 'transition: background-color 0.2s' per the instant-hover rule. - Forms/search: searchbox + olform surfaces/borders/tips -> semantic tokens. - theme-color + PWA manifest colors #e2dcc5 -> #f5f2eb (neutral-100, matching the new header chrome).
This was referenced Jul 2, 2026
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.
Foundation surfaces: paper canvas, flat header chrome, semantic buttons & forms
Fourth PR of the visual modernization series — the first big visible ship. Stacked on #13102 → #13103 → #13104; review the last commit.
What changes
--beigeto--color-background(warm paper,neutral-50) — the claude.ai-style paper tone.--color-surface-header; the two hardcoded hairlinehsl()/hsla()literals become--color-border-subtle; dropdown menus and the app drawer move from beige to white--color-surfacewith subtle borders; nav/browse text uses--color-text; notification badges use--color-primary; the desktop search pill becomes a white surface.--color-text-secondary, links--color-link, rules--color-border-subtle.buttonCta,buttonBtn,buttonLink,ol-button): primary states →--color-primary/-hover/-active+--color-on-primary; the hardcodedhsl(202, 96%, 17%)hover literals →--color-primary-active; disabled →--color-disabled-*; sponsor tint →--color-primary-subtle; and thetransition: background-color 0.2son cta-btn/linkButton is deleted per the codified instant-hover rule.searchbox+olformsurfaces, borders, and tips → semantic tokens.theme-colorand PWA manifest colors#e2dcc5→#f5f2eb(exactlyneutral-100, the new header chrome).CSS-only except the two metadata values — zero template/markup changes.
Verified
npm run lintclean;npx jest495/495; all CSS bundlesize budgets pass.Before / after
🤖 Generated with Claude Code