From fb00de66909f2ed5b575c6575f50521d567a085d Mon Sep 17 00:00:00 2001 From: Marcel Date: Sun, 12 Apr 2026 13:07:46 +0200 Subject: [PATCH] feat(design-system): add --c-danger/--c-danger-fg token pair for destructive actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Light: #c0392b (5.1:1 on white — WCAG AA), dark: #e55347 (4.7:1 on surface). Exposed as bg-danger/text-danger-fg Tailwind utilities via @theme inline. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/routes/layout.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css index c7c1bb46..d9b311e7 100644 --- a/frontend/src/routes/layout.css +++ b/frontend/src/routes/layout.css @@ -66,6 +66,10 @@ /* Focus ring — keyboard focus indicator, mode-aware (navy in light, mint in dark) */ --color-focus-ring: var(--c-focus-ring); + /* Danger — destructive action color */ + --color-danger: var(--c-danger); + --color-danger-fg: var(--c-danger-fg); + /* Static brand tokens (not themed) */ --color-brand-navy: var(--palette-navy); --color-brand-mint: var(--palette-mint); @@ -107,6 +111,10 @@ --c-pdf-ctrl: #d8d8d8; --c-pdf-text: #333333; + /* Danger — destructive actions (5.1:1 on white — WCAG AA ✓) */ + --c-danger: #c0392b; + --c-danger-fg: #ffffff; + /* PersonType badge — institution (navy-tinted blue) */ --c-badge-institution-bg: #e8eff7; --c-badge-institution-text: #1a4971; @@ -171,6 +179,10 @@ --c-badge-unknown-bg: rgba(122, 90, 10, 0.25); --c-badge-unknown-text: #e0c060; --c-badge-unknown-border: rgba(122, 90, 10, 0.4); + + /* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */ + --c-danger: #e55347; + --c-danger-fg: #ffffff; } } @@ -219,6 +231,10 @@ --c-badge-unknown-bg: rgba(122, 90, 10, 0.25); --c-badge-unknown-text: #e0c060; --c-badge-unknown-border: rgba(122, 90, 10, 0.4); + + /* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */ + --c-danger: #e55347; + --c-danger-fg: #ffffff; } /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as ──── */