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

feat: introduce mathematical type scale with single-source-of-truth typography tokens

Browse Source 
Define a major-third (1.25) type scale as CSS custom properties in the tokens
layer (--text-2xs through --text-5xl), along with line-height (--leading-*),
font-weight (--font-*), and letter-spacing (--tracking-*) tokens. Migrate all
28 core CSS files from ad-hoc values to token references with clamp()-based
responsive scaling for headings. Add TypographyTokenContractTest to enforce
token-only usage via grep-based assertions.

Task run: UI-TYPOGRAPHY-SCALE-001

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-03-22 15:47:55 +01:00
parent cf8c59d3f8
commit e145b7d089
30 changed files with 390 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
web/css/layout/app-shell.css
View File

@@ -32,42 +32,42 @@
h4,
h5,
h6 {
--app-font-weight: 700;
--app-font-weight: var(--font-bold);
}
h1 {
--app-font-size: 1.5rem;
--app-line-height: 1.125;
--app-font-size: var(--text-2xl);
--app-line-height: var(--leading-tight);
--app-typography-spacing-top: 3rem;
}
h2 {
--app-font-size: 1.4rem;
--app-line-height: 1.15;
--app-font-size: var(--text-xl);
--app-line-height: var(--leading-tight);
--app-typography-spacing-top: 2.625rem;
}
h3 {
--app-font-size: 1.3rem;
--app-line-height: 1.175;
--app-font-size: var(--text-lg);
--app-line-height: var(--leading-tight);
--app-typography-spacing-top: 2.25rem;
}
h4 {
--app-font-size: 1.2rem;
--app-line-height: 1.2;
--app-font-size: var(--text-base);
--app-line-height: var(--leading-tight);
--app-typography-spacing-top: 1.874rem;
}
h5 {
--app-font-size: 1.1rem;
--app-line-height: 1.225;
--app-font-size: var(--text-base);
--app-line-height: var(--leading-tight);
--app-typography-spacing-top: 1.6875rem;
}
h6 {
--app-font-size: 1rem;
--app-line-height: 1.25;
--app-font-size: var(--text-sm);
--app-line-height: var(--leading-tight);
--app-typography-spacing-top: 1.5rem;
}
@@ -75,7 +75,7 @@
tfoot th,
thead td,
thead th {
--app-font-weight: 600;
--app-font-weight: var(--font-semibold);
--app-border-width: 2px;
}
@@ -177,7 +177,7 @@
th {
text-transform: uppercase;
font-size: 11px;
font-size: var(--text-xs);
letter-spacing: 0.4px;
border-top: 1px solid var(--app-border);
}
@@ -562,8 +562,8 @@
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
font-size: 0.75em; /* em-relative sizing — intentional, scales with parent */
line-height: 0; /* intentional px — sub/sup vertical alignment */
vertical-align: baseline;
}
@@ -654,7 +654,7 @@
hgroup > :not(:first-child):last-child {
--app-color: var(--app-muted-color);
--app-font-weight: unset;
font-size: 1rem;
font-size: var(--text-base);
}
:where(ol, ul) li {
@@ -848,7 +848,7 @@
box-shadow: var(--app-box-shadow);
color: var(--app-color);
font-weight: var(--app-font-weight);
font-size: 1rem;
font-size: var(--text-base);
line-height: var(--app-line-height);
text-align: center;
text-decoration: none;
@@ -872,7 +872,7 @@
).small {
--app-button-padding-vertical: var(--app-button-padding-vertical-small);
--app-button-padding-horizontal: var(--app-button-padding-horizontal-small);
font-size: 13px;
font-size: var(--text-sm);
}
[role="button"]:is(:hover, :active, :focus),
@@ -1170,7 +1170,7 @@
kbd,
pre,
samp {
font-size: 0.875em;
font-size: 0.875em; /* em-relative sizing — intentional, scales with parent */
font-family: var(--app-font-family);
}
@@ -1240,7 +1240,7 @@
--app-box-shadow: none;
--app-button-padding-vertical: var(--app-button-padding-vertical-small);
--app-button-padding-horizontal: var(--app-button-padding-horizontal-small);
font-size: 0.75rem;
font-size: var(--text-xs);
}
.code-toolbar > .toolbar .copy-to-clipboard-button:is(:hover, :focus) {
@@ -1291,7 +1291,7 @@
select,
textarea {
margin: 0;
font-size: 1rem;
font-size: var(--text-base);
line-height: var(--app-line-height);
font-family: inherit;
letter-spacing: inherit;
@@ -1780,7 +1780,7 @@
border: var(--app-border-width) solid var(--app-border-color);
border-radius: 1.25em;
background-color: var(--app-background-color);
line-height: 1.25em;
line-height: 1.25em; /* em-relative sizing — intentional, switch control layout */
}
[type="checkbox"][role="switch"]:not([aria-invalid]) {
@@ -2159,7 +2159,7 @@
}
details summary {
line-height: 1rem;
line-height: var(--leading-none);
list-style-type: none;
cursor: pointer;
transition: color var(--app-transition);
@@ -2937,7 +2937,7 @@
--app-nav-link-spacing-horizontal: 0.25rem;
align-items: center;
justify-content: start;
font-size: 0.875em;
font-size: 0.875em; /* em-relative sizing — intentional, scales with parent */
}
nav[aria-label="breadcrumb"] ol,