Book page: tokenized title/author, editions table, read panel, nav tabs#13109
Closed
lokesh wants to merge 8 commits into
Closed
Book page: tokenized title/author, editions table, read panel, nav tabs#13109lokesh wants to merge 8 commits into
lokesh wants to merge 8 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).
- .home-h2 section headings: title-medium link-blue -> headline-small serif ink (--color-text); heading links inherit ink, underline on hover only; the welcome heading gets a display-small hero size (home-h2--hero). - Carousel shelf -> --color-surface-sunken with --color-border-subtle hairlines; tutorial cards -> --color-surface; book titles, blank covers, lazy-load states -> semantic text/border tokens. - category-item + page-banner: muted counts, tokenized sizes. - Migrate all font-size literals in home.css/carousel.css/ category-item.css/page-banner.css to the type scale (13px cluster -> --font-size-body-small etc.) and add the four files to the stylelint font-size ratchet. page-home.css: 6.8KB gzip (8KB budget).
- searchResultItem: card -> --color-surface with a full --color-border-subtle border (the old --grey-fafafa/--light-beige pair blends into the new warm canvas); title -> serif ink at title-medium; stats/type/librarian-extras -> secondary/muted text with label tokens. - Fix raw literals that aliases can't shift: rgba(0,124,255,.2) chapter highlight -> --color-primary-subtle (+ --blue-100 hover), trending badge hsla olive tint -> --green-50; drop two hover transitions per the instant-hover rule. - sort-dropper/tool-button: white dropdown surface, semantic text/border tokens. - page-user.css: body/#background -> --color-background (this bundle re-declared the old --beige canvas over the foundation); flash message -> --color-warning-bg; darker siteSearch -> --color-surface-sunken. - Ratchet: add search-result-item.css + sort-dropper.css. page-user.css: 29.5KB gzip (30KB budget). Spot-checked non-search routes on the same bundle: /account/login, /search/authors, lists.
- work-title-and-author: title ink serif (headline-large desktop / title-large mobile, replacing 1.375em); subtitle italic serif --color-text-secondary at title-large; byline -> body-medium; work-line/pub-date -> secondary text. - editions.css: the two legacy hsl() mix() literals -> --color-surface- sunken rows + --neutral-200 highlight (aliases can't shift raw literals); header/cell text -> semantic tokens. - read-panel: white --color-surface cards with subtle borders; preview link + mask icon -> --color-primary; sponsorship-card hsla literals -> --blue-200 / --color-primary-subtle; 12.5px/0.78em -> scale tokens. - nav-bar: tabs -> secondary text with --color-link selected/hover underline; work-menu hover literal hsl(212,39%,45%) -> --blue-500; wrapper -> --color-surface. - work.css/compact-title: overview, omniline, tab-section, list headings -> semantic tokens; sticky compact title -> --color-surface. - Ratchet: + work-title-and-author, editions, nav-bar, read-panel. page-book.css: 16.18KB gzip (17KB budget, was 16.21KB - no --js split needed).
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.
Book page: tokenized title/author, editions table, read panel, nav tabs
Seventh PR of the visual modernization series. Stacked on #13107 (and #13102–#13106); review the last commit.
What changes
work-title-and-author.css): title is ink serif —headline-largedesktop,title-largemobile (replacing the1.375emliteral); subtitle italic serif in--color-text-secondary; bylinebody-medium; work-line and first-published dates in secondary text.hsl()"mix(@beige, @white)" literals (rows + highlight) that aliases can't shift become--color-surface-sunkenrows with a--neutral-200highlight; cell text moves to semantic tokens.--color-surfacecards with--color-border-subtle; preview text-link + book mask icon →--color-primary; the sponsorship card'shsla()literals →--blue-200border and--color-primary-subtlefill; the12.5px/0.78emcluster → scale tokens.--color-text-secondarywith--color-linkselected/hover underline; the work-menu hover literalhsl(212, 39%, 45%)→--blue-500; wrapper and sticky compact title →--color-surface.Verified
npm run lintclean;npx jest495/495.--js.csssplit needed).Before / after
🤖 Generated with Claude Code