Skip to content

feat(theme): unified typography config + defineTheme API cleanup - #804

Merged
cixzhang merged 2 commits into
mainfrom
navi/feat/theme-api-cleanup
Mar 21, 2026
Merged

feat(theme): unified typography config + defineTheme API cleanup#804
cixzhang merged 2 commits into
mainfrom
navi/feat/theme-api-cleanup

Conversation

@cixzhang

@cixzhang cixzhang commented Mar 21, 2026

Copy link
Copy Markdown
Contributor

Implements #802 — restructures defineTheme to unify font, scale, and weight config under a single typography object, and renames motionScale/radiusScale to motion/radius.

API Changes

Before After
typeScale: { base, ratio } typography: { scale: { base, ratio } }
typeScale.weights.heading typography.heading: { weight, weights }
fonts: [{ family, url }] typography.body: { family, fallbacks, url }
tokens: { '--font-body': '...' } typography.body: { family, fallbacks }
motionScale: { fast, medium, ratio } motion: { fast, medium, ratio }
radiusScale: { base, multiplier } radius: { base, multiplier }

Typography roles

  • body, heading, code — each declares family, fallbacks, url, weight
  • heading inherits family/fallbacks/url from body if omitted
  • FontWeight type: 'normal' | 'medium' | 'semibold' | 'bold' (raw CSS values as escape hatch)
  • defineTheme derives --font-body/heading/code tokens and fonts[] for runtime loading

Theme updates

Default — minimal change:

typography: { scale: { base: 14, ratio: 1.2 } },
motion: { fast: 175, medium: 410, ratio: 0.75 },

Neutral — fonts move from token overrides into typography roles:

typography: {
  scale: { base: 14, ratio: 1.2 },
  body: { family: 'Geist', fallbacks: '"Geist Fallback", -apple-system, ...' },
  heading: { weights: { 3: 'bold', 4: 'bold' } },
  code: { family: 'Geist Mono', fallbacks: '"SF Mono", Monaco, ...' },
},

Brutalisttypography.body sets Courier for everything (heading inherits), eliminates both the --font-heading token override and the text.base.fontFamily component override:

typography: {
  body: { family: 'Courier New', fallbacks: '"Courier", monospace' },
},

Test coverage

  • 55 defineTheme tests (was 45) — new tests for font derivation, weight mapping, heading inheritance
  • 15 generateThemeRules tests — updated to new API
  • All 1827 tests pass

Closes #802.


@cixzhang
cixzhang requested a review from josephfarina as a code owner March 21, 2026 16:37
@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Mar 21, 2026
Restructures defineTheme to unify font, scale, and weight config:

- typeScale → typography.scale
- fonts (URLs) → typography.body/heading/code (with url field)
- font token overrides → typography roles (family + fallbacks)
- typeScale.weights → typography.heading.weight/weights
- motionScale → motion
- radiusScale → radius

Typography roles:
- body, heading, code each declare family, fallbacks, url, weight
- heading inherits family/fallbacks/url from body if omitted
- FontWeight type: 'normal' | 'medium' | 'semibold' | 'bold' (+ escape hatch)
- defineTheme derives --font-body/heading/code tokens and fonts[] for loading

Theme updates:
- default: typeScale → typography.scale, motionScale → motion
- neutral: font tokens moved into typography roles, weights into heading role
- brutalist: typography.body sets Courier for both body+heading,
  removes redundant --font-heading token and text.base.fontFamily override

CLI updates:
- build-theme passes new keys to defineTheme
- Font warnings derived from resolvedTheme.fonts (typography roles)
- Doc files updated

No backwards compatibility shim — clean break.

Co-authored-by: Navi <navi@navibot.dev>
@cixzhang
cixzhang force-pushed the navi/feat/theme-api-cleanup branch from 52466d9 to cb4fe77 Compare March 21, 2026 17:14
The variable was const-scoped inside the if block but referenced
outside it for font declaration warnings.

Co-authored-by: Navi <navi@navibot.dev>
@github-actions

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@xds/core 11.0KB 17.5KB 2.7KB

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

@cixzhang
cixzhang merged commit fcd0b37 into main Mar 21, 2026
13 checks passed
rubyycheung added a commit that referenced this pull request Mar 22, 2026
Migrate to the unified defineTheme API from #803/#804:

- typeScale → typography.scale + typography roles (body/code)
  Fonts now declared via typography config instead of raw --font-* tokens
- motionScale → motion
- variants: string[] → Record<string, styles>
  Custom button variant styles moved from components into variants
  (declaration + styles together)
- CLI: fix generateVariantDeclarations to handle new object-style variants
  alongside legacy array format
@rubyycheung rubyycheung mentioned this pull request Mar 22, 2026
@cixzhang
cixzhang deleted the navi/feat/theme-api-cleanup branch April 9, 2026 14:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: unified typography config + defineTheme API cleanup

1 participant