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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user