feat(theme): R10 S1 — semantic status colors (danger/warn/success)

Add theme-scoped --danger/--warn/--success (+ -fg) tokens wired into the v4
@theme inline, replacing ~110 raw red/amber/emerald/green palette refs across
34 files. Fixes light-theme contrast failures (fixed Tailwind shades fell to
~1.7-3:1 on white). Status colors are scheme-independent — recognised by hue,
shifting only by theme to hold contrast (bright on dark bg, darkened on light).
Solid fills use the paired -fg text; @source inline guarantees the full -fg set
exists. IMDb rating gold kept as a deliberate decorative non-status exception.
This commit is contained in:
2026-08-09 01:03:53 +02:00
parent 9ca0c61ea9
commit d794524adf
35 changed files with 123 additions and 85 deletions
+36
View File
@@ -1,5 +1,11 @@
@import "tailwindcss";
/* Guarantee the full status fill-text set exists even before first use, so any
bg-{status} fill always has a readable text-{status}-fg partner available
(Tailwind v4 only emits a utility when it sees it used; success-fg has no fill
consumer today). Keeps the semantic token set complete + future-proof. */
@source inline("text-danger-fg text-warn-fg text-success-fg");
/* `inline` is load-bearing: the color vars (--bg/--accent/… below) are redefined at
runtime per html[data-scheme]/[data-theme], so utilities must inline the value and
resolve it at the USE site, not reference a once-computed --color-* token. This also
@@ -14,6 +20,12 @@
--color-muted: var(--muted);
--color-accent: var(--accent);
--color-accent-fg: var(--accent-fg);
--color-danger: var(--danger);
--color-danger-fg: var(--danger-fg);
--color-warn: var(--warn);
--color-warn-fg: var(--warn-fg);
--color-success: var(--success);
--color-success-fg: var(--success-fg);
--font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
@@ -657,6 +669,30 @@ html[data-scheme="matrix"][data-theme="light"] {
--accent-fg: #ffffff;
}
/* ===== Semantic status colors (danger / warn / success) =====
Scheme-INDEPENDENT, theme-scoped: a status color is recognised by its conventional
hue (red=danger), so it stays constant across schemes and only shifts by theme to
hold contrast — bright on the near-black dark bg, darkened for ≥4.5:1 on the white
light bg. The scheme blocks above deliberately do NOT set these (lower specificity
here is fine — no scheme overrides them). Per-scheme override only if a real clash
surfaces. `-fg` is readable text ON a solid status fill. */
html[data-theme="dark"] {
--danger: #f87171;
--danger-fg: #2a0a0a;
--warn: #fbbf24;
--warn-fg: #1f1400;
--success: #34d399;
--success-fg: #052016;
}
html[data-theme="light"] {
--danger: #dc2626;
--danger-fg: #ffffff;
--warn: #b45309;
--warn-fg: #ffffff;
--success: #047857;
--success-fg: #ffffff;
}
/* Toast auto-dismiss countdown bar (shrinks left-to-right to zero) */
@keyframes toastbar {
from {