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:
@@ -36,13 +36,13 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
--app-font-size: var(--text-2xl);
|
||||
--app-font-size: var(--text-page-title);
|
||||
--app-line-height: var(--leading-tight);
|
||||
--app-typography-spacing-top: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--app-font-size: var(--text-xl);
|
||||
--app-font-size: var(--text-title);
|
||||
--app-line-height: var(--leading-tight);
|
||||
--app-typography-spacing-top: 2.625rem;
|
||||
}
|
||||
@@ -178,7 +178,7 @@
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.4px;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
border-top: 1px solid var(--app-border);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user