/* Design tokens for the admin. * * Loaded before every other admin stylesheet (see _header.php). The rule: * page CSS never writes a literal radius / colour / font size — it references * one of these. Then a change here (a tighter radius, a dark theme) reaches * every page at once, and page prefixes (.st-, .dom-, .md-) stay purely * about *scope*, not about values. * * Variables cannot leak the way selectors can: a token is only a value, so * `.st-card { border-radius: var(--radius-lg) }` can never restyle something * on another page. Prefix your selectors; share your tokens. */ :root { /* Radii. xs = tags/chips, sm = inputs & small buttons, md = rows & panels, lg = cards / sections / modals, xl = hero-sized surfaces, pill = pills. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; } :root { /* Greys, named by role so a dark theme is a re-assignment, not a rewrite. Text: strong = headings/values, text = body, muted = labels/help, faint = placeholders/meta, disabled = inert. */ --text-strong: #222; --text: #333; --text-muted: #5f6368; --text-faint: #888; --text-disabled: #bbb; --text-inverse: #fff; /* Surfaces: 1 = cards/inputs, 2 = page & subtle fills, 3 = hover/rows/chips, 4 = pressed/tracks. inverse = tooltips & dark badges. */ --surface: #fff; --surface-2: #f6f8fa; --surface-3: #eceef1; --surface-4: #d9dde2; --surface-inverse: #333; --surface-inverse-soft: #888; /* Borders: soft = dividers inside a card, border = card/input edges, strong = emphasised outlines. */ --border-soft: #eee; --border: #ddd; --border-strong: #ccc; } :root { /* Accent + status colours. Each has: the colour itself (fills, links), -strong (text on a tinted background), -soft (the tinted background), -border (an edge on that tint). -rgb backs rgba() overlays. */ --accent: #084b77; --accent-hover: #075e93; --accent-soft: #e7f1f8; --accent-border: #bde0f5; --accent-rgb: 8, 75, 119; --danger: #d9534f; --danger-hover: #c9302c; --danger-strong: #c62828; --danger-soft: #fdecea; --danger-border: #f7bdb9; --danger-pastel: #f77272; /* chips & tags; the old --red / --md-red */ --success: #28a745; --success-strong: #0d6b3a; --success-soft: #e6f9f0; --success-border: #a3e6c8; --success-pastel: #77d27a; /* the old --pastel-green / --md-green */ --warning: #e67e22; --warning-strong: #e65100; --warning-soft: #fff3e0; --warning-border: #ffcc80; } :root { /* Type scale. Body copy is --fs-base; the small steps are for labels, meta and dense tables; the large ones for headings. em values are left alone on purpose — they compound with their parent, so snapping them to rem would change their size. */ --fs-3xs: .62rem; --fs-2xs: .7rem; --fs-xs: .78rem; --fs-sm: .85rem; --fs-md: .92rem; --fs-base: 1rem; --fs-lg: 1.1rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.75rem; --fs-4xl: 2rem; --fs-5xl: 2.5rem; } /* ── Dark theme ───────────────────────────────────────────────────────── Keyed on (or "black", below), which _header.php resolves from website_settings.admin_theme before the first paint. Only tokens change; no page CSS knows about dark mode, which is the whole point of tokens. The accent lifts a little so it still clears WCAG AA on the dark ground. */ :root[data-theme="dark"], :root[data-theme="black"] { color-scheme: dark; --text-strong: #f1f3f5; --text: #dde1e6; --text-muted: #a3aab4; --text-faint: #7d8590; --text-disabled: #565e68; --text-inverse: #fff; --surface: #1b1f24; --surface-2: #22272e; --surface-3: #2d333b; --surface-4: #3d444d; --surface-inverse: #444c56; --surface-inverse-soft: #5a636e; --border-soft: #2d333b; --border: #3a424c; --border-strong: #4a545f; --accent: #4aa3df; --accent-hover: #62b3ea; --accent-soft: #14304a; --accent-border: #1f4a6e; --accent-rgb: 74, 163, 223; --danger-strong: #ff8a80; --danger-soft: #3a1f1f; --danger-border: #6b2b2b; --success-strong: #7ee2a0; --success-soft: #17301f; --success-border: #2c5a3a; --warning-strong: #ffb74d; --warning-soft: #3a2a12; --warning-border: #6b4a1a; } /* ── True black ───────────────────────────────────────────────────────── The dark palette above on a #000 ground (OLED-friendly, admin_theme 'black'). Only the surface ladder and borders change: text and accents already clear AA against black, and every page keeps reading the same tokens. */ :root[data-theme="black"] { --surface: #000; --surface-2: #0d0f12; --surface-3: #1a1d21; --surface-4: #2a2e34; --surface-inverse: #3a4048; --surface-inverse-soft: #4c535c; --border-soft: #1a1d21; --border: #2a2e34; --border-strong: #3a4048; }