fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Felix Schneider
2026-03-22 16:25:51 +01:00
parent be1314f8b8
commit 026002a501
7 changed files with 184 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/css/base/variables.base.css
View File

@@ -75,36 +75,7 @@
--app-empty-text: var(--app-color);
--app-empty-hint: var(--app-muted-color);
/* ── Typography scale (enterprise-density, 14px base, approximate 1.25× ratio) ── */
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px — enterprise admin baseline */
--text-lg: 1rem; /* 16px */
--text-xl: 1.125rem; /* 18px */
--text-2xl: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18–22px */
--text-3xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); /* 22–28px */
--text-4xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); /* 26–34px */
--text-5xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem); /* 32–44px */
/* ── Line-height tokens ─────────────────────────────────────── */
--leading-none: 1;
--leading-tight: 1.2;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 1.75;
/* ── Font-weight tokens ─────────────────────────────────────── */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* ── Letter-spacing tokens ──────────────────────────────────── */
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
/* Typography tokens defined in typography.tokens.css */
}
/* Icons */