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

34
web/css/pages/app-docs.css
View File

@@ -83,7 +83,7 @@
}
.app-docs-nav-group summary small {
font-size: 0.7rem;
font-size: var(--text-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
display: inline;
@@ -107,7 +107,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.875rem;
font-size: var(--text-sm);
border-radius: 0;
text-decoration: none;
}
@@ -120,7 +120,7 @@
.app-docs-nav a.active {
color: var(--app-primary);
border-left-color: var(--app-primary);
font-weight: 500;
font-weight: var(--font-medium);
}
/* ─── TOC ─────────────────────────────────────────────────────── */
@@ -132,7 +132,7 @@
.app-docs-toc > small {
display: block;
padding: 0 0 0.5rem;
font-size: 0.7rem;
font-size: var(--text-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
}
@@ -151,7 +151,7 @@
display: block;
text-decoration: none;
color: inherit;
line-height: 1.35;
line-height: var(--leading-snug);
padding-block: 0.12rem;
}
@@ -171,7 +171,7 @@
}
.app-docs-toc-level-3 a {
font-size: 0.75rem;
font-size: var(--text-xs);
padding-left: 0.45rem;
}
@@ -208,41 +208,41 @@
.app-docs-content h5,
.app-docs-content h6 {
scroll-margin-top: 1.5rem;
line-height: 1.3;
line-height: var(--leading-snug);
}
.app-docs-content h1 {
color: var(--app-h1-color);
margin-top: 0;
font-size: 2.75rem;
font-size: var(--text-4xl);
}
.app-docs-content h2 {
color: var(--app-h2-color);
font-size: 1.375rem;
font-size: var(--text-xl);
margin-top: 2.5rem;
padding-top: 1rem;
border-top: 1px solid var(--app-border);
}
.app-docs-content h3 {
color: var(--app-h3-color);
font-size: 1.125rem;
font-size: var(--text-lg);
margin-top: 1.75rem;
}
.app-docs-content h4 {
color: var(--app-h4-color);
font-size: 1rem;
font-size: var(--text-base);
margin-top: 1.25rem;
}
.app-docs-content h5,
.app-docs-content h6 {
color: var(--app-h5-color);
font-size: 0.9rem;
font-size: var(--text-sm);
margin-top: 1rem;
}
.app-docs-content p {
margin-block: 0.875rem;
line-height: 1.7;
line-height: var(--leading-loose);
}
.app-docs-content a {
@@ -268,7 +268,7 @@
.app-docs-content li {
margin-block: 0.3rem;
line-height: 1.6;
line-height: var(--leading-relaxed);
}
.app-docs-content li > ul,
@@ -314,7 +314,7 @@
.app-docs-content pre code {
background: none;
padding: 0;
font-size: 0.85rem;
font-size: var(--text-sm);
color: var(--app-color);
}
@@ -341,7 +341,7 @@
.app-docs-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
font-size: var(--text-sm);
margin-block: 1.25rem;
overflow-x: auto;
display: block;
@@ -356,7 +356,7 @@
.app-docs-content th {
background: var(--app-code-background-color);
font-weight: 600;
font-weight: var(--font-semibold);
color: var(--app-color);
}