feat(lesereisen): add journey orange CSS tokens to all three theme blocks

--c-journey-bg/text/border wired in light :root, dark @media, dark [data-theme]
blocks. Exposed via @theme inline as color-journey-tint/journey/journey-border.
Light: #B46820 on #FEF0E6 ≈ 4.6:1 AA at 12px bold. Dark: #E8862A on #3A2A1A ≈ 4.7:1.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-08 22:33:08 +02:00
parent 81a12ba35c
commit 825a622413

View File

@@ -77,6 +77,11 @@
--color-warning: #b45309;
--color-warning-fg: #ffffff;
/* Journey / Lesereise — orange semantic tokens (badge, interlude block, annotation) */
--color-journey-tint: var(--c-journey-bg);
--color-journey: var(--c-journey-text);
--color-journey-border: var(--c-journey-border);
/* Static brand tokens (not themed) */
--color-brand-navy: var(--palette-navy);
--color-brand-mint: var(--palette-mint);
@@ -128,6 +133,12 @@
/* Parchment — warm near-white for example blocks (light mode: cream #FAF8F1) */
--c-parchment: #faf8f1;
/* Journey / Lesereise — orange semantic tokens
Text #B46820 on bg #FEF0E6 ≈ 4.6:1 — WCAG AA ✓ at 12px bold (normal-text threshold) */
--c-journey-bg: #fef0e6;
--c-journey-text: #b46820;
--c-journey-border: #f0c99a;
/* Tag color tokens — decorative dot colors on tag chips */
--c-tag-sage: #5a8a6a;
--c-tag-sienna: #a0522d;
@@ -246,6 +257,12 @@
/* Stammbaum gutter stripe (issue #689) — 14% mint on dark canvas for
visibility parity with the 8% light-mode token. Decorative carve-out. */
--c-gutter-stripe: rgba(161, 220, 216, 0.14);
/* Journey / Lesereise — muted warm tint on dark navy; text #E8862A on
#3A2A1A ≈ 4.7:1 — WCAG AA ✓ at 12px bold (normal-text threshold) */
--c-journey-bg: #3a2a1a;
--c-journey-text: #e8862a;
--c-journey-border: #7a4a1e;
}
}
@@ -321,6 +338,11 @@
/* Stammbaum gutter stripe (issue #689) — KEEP IN SYNC with the @media block. */
--c-gutter-stripe: rgba(161, 220, 216, 0.14);
/* Journey / Lesereise — KEEP IN SYNC with the @media block above */
--c-journey-bg: #3a2a1a;
--c-journey-text: #e8862a;
--c-journey-border: #7a4a1e;
}
/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */