feat: extract typography tokens into dedicated file with semantic aliases and a11y fallbacks

Create typography.tokens.css as single source of truth for the type system:
- Extract all primitive tokens from variables.base.css (--text-*, --leading-*, --font-*, --tracking-*)
- Add semantic aliases (--text-body, --text-label, --text-caption, --text-title, --text-page-title)
- Add --text-md (15px) escape hatch and --tracking-wider (0.05em) token
- Add prefers-reduced-motion fallbacks locking fluid headings to fixed midpoints
- Document scale ratio (1.25x major third, 14px base) with reference table
- Migrate h1/h2 in app-shell.css to semantic aliases
- Migrate 4 raw letter-spacing values to --tracking-* tokens
- Extend TypographyTokenContractTest with 3 new tests (letter-spacing, aliases, reduced-motion)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-22 16:25:51 +01:00
parent be1314f8b8
commit 026002a501
7 changed files with 184 additions and 44 deletions

View File

@@ -84,7 +84,7 @@
.app-docs-nav-group summary small {
font-size: var(--text-xs);
letter-spacing: 0.05em;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
display: inline;
}
@@ -133,7 +133,7 @@
display: block;
padding: 0 0 0.5rem;
font-size: var(--text-xs);
letter-spacing: 0.05em;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}