marcel/familienarchiv
1
0
Fork 0
Code Issues 127 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

style: add mint-soft, line-soft, link-quiet, ink-4 tokens (#483)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 16:48:33 +02:00
parent a072701632
commit 495210052f
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/routes/layout.css
View File

@@ -80,6 +80,12 @@
/* Static brand tokens (not themed) */
--color-brand-navy: var(--palette-navy);
--color-brand-mint: var(--palette-mint);
/* Reader dashboard tokens */
--color-mint-soft: var(--c-mint-soft); /* Mint-Pill background */
--color-line-soft: var(--c-line-soft); /* Stat-column dividers, row borders */
--color-link-quiet: var(--c-link-quiet); /* "Alle …" secondary links */
--color-ink-4: var(--c-ink-4); /* Card-head labels (light = ink-3, dark = #7080a8) */
}
/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
@@ -160,6 +166,12 @@
with axe (tracked in #480) before tweaking the palette. */
--timeline-bar-idle: rgba(161, 220, 216, 0.35);
--timeline-bar-outside: var(--c-line);
/* Reader dashboard tokens — light mode */
--c-mint-soft: #d4f0ee; /* Mint-Pill BG — decorative fill (1.1:1 on white, WCAG carve-out) */
--c-line-soft: #f0ede6; /* Stat-column dividers, card row separator */
--c-link-quiet: #4a6e8a; /* Quiet link — 4.65:1 on #f0efe9 canvas WCAG AA ✓ */
--c-ink-4: #6b7280; /* Card-head labels (= ink-3 in light) */
}
/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@@ -236,6 +248,12 @@
clears WCAG 1.4.11 non-text contrast for large UI elements. */
--timeline-bar-idle: #3a6e8c;
--timeline-bar-outside: #1a2735;
/* Reader dashboard tokens — dark mode */
--c-mint-soft: rgba(161, 218, 216, 0.14);
--c-line-soft: rgba(255, 255, 255, 0.06);
--c-link-quiet: var(--palette-mint);
--c-ink-4: #7080a8; /* 5.0:1 on #011526 WCAG AA ✓ */
}
}
@@ -308,6 +326,12 @@
clears WCAG 1.4.11 non-text contrast for large UI elements. */
--timeline-bar-idle: #3a6e8c;
--timeline-bar-outside: #1a2735;
/* Reader dashboard tokens — dark mode */
--c-mint-soft: rgba(161, 218, 216, 0.14);
--c-line-soft: rgba(255, 255, 255, 0.06);
--c-link-quiet: var(--palette-mint);
--c-ink-4: #7080a8; /* 5.0:1 on #011526 WCAG AA ✓ */
}
/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */