/* * OutOfDark — brand palette tokens (single source of truth). * * Loaded by: * - Admin: UNFOLD["STYLES"] in settings/base.py (admin chrome, * every admin page gets these vars in :root). * - Frontend: app/catalog/templates/catalog/_base.html * . * * See docs/decisions/0009-brand-palette.md for the design rationale, * naming conventions, and "do not hardcode hex" rule. * * Three layers: * 1. PRIMITIVES — raw color scales (stone neutral, accent * golden-olive). No semantic meaning yet — just named ramps. * 2. SEMANTIC — meaning-based aliases (success / warning / error * / info). Components use these, not primitives. * 3. STATUS — coin workflow status colors (at-home / for-sale * / lost / ...). Each status maps to a semantic token. * * Adding a new color: * - Pick from existing primitives if possible (stone, accent). * - Add a semantic token if the use case is reusable * (e.g. "informational chip"). Don't reach for raw hex inline. * - If a totally new ramp is needed (e.g. for a new module), * add it as a primitive here AND document why in the ADR. * * Colors expressed as raw `R G B` triplets (Tailwind v3 convention) so * components can apply opacity via `rgb(var(--brand-...) / 0.5)`. */ :root { /* -------- Layer 1: PRIMITIVES — raw scales -------- */ /* Stone — neutral foundation. Matches Tailwind's stone palette and * is the same scale as UNFOLD["COLORS"]["primary"] in settings/ * base.py. Used for surfaces, borders, body text, muted text. */ --brand-stone-50: 250 250 249; --brand-stone-100: 245 245 244; --brand-stone-200: 231 229 228; --brand-stone-300: 214 211 209; --brand-stone-400: 168 162 158; --brand-stone-500: 120 113 108; --brand-stone-600: 87 83 78; --brand-stone-700: 68 64 60; --brand-stone-800: 41 37 36; --brand-stone-900: 28 25 23; --brand-stone-950: 12 10 9; /* Accent — golden-olive. The "OutOfDark" brand color. Currently * loaded into Tailwind on the frontend (_base.html tailwind.config * `accent.*`); admin chrome uses it sparingly (logo + CTAs). When * editing this scale, also update _base.html to keep both in sync. * That manual mirror is the cost of keeping CDN Tailwind which * doesn't read CSS vars in `colors` config. */ --brand-accent-50: 251 247 237; --brand-accent-100: 245 236 209; --brand-accent-200: 234 215 163; --brand-accent-300: 221 189 113; --brand-accent-400: 207 161 70; --brand-accent-500: 185 135 43; --brand-accent-600: 154 108 35; --brand-accent-700: 122 84 33; --brand-accent-800: 96 66 33; --brand-accent-900: 79 54 31; /* Semantic ramps — used for success/warning/error/info chips, * badges, icons. Pinned to Tailwind palette equivalents so admin * and frontend that DO use Tailwind utility classes (`bg-emerald-50`, * `text-red-700`, etc.) match what these CSS vars resolve to. */ --brand-emerald-500: 16 185 129; --brand-emerald-50: 236 253 245; --brand-emerald-700: 4 120 87; --brand-amber-500: 245 158 11; --brand-amber-50: 255 251 235; --brand-amber-700: 180 83 9; --brand-red-600: 220 38 38; --brand-red-50: 254 242 242; --brand-red-700: 185 28 28; --brand-cyan-600: 8 145 178; --brand-cyan-50: 236 254 255; --brand-cyan-700: 14 116 144; --brand-violet-600: 124 58 237; --brand-violet-50: 245 243 255; --brand-violet-700: 109 40 217; --brand-gray-500: 107 114 128; --brand-gray-50: 243 244 246; --brand-gray-700: 55 65 81; /* -------- Chart palette — for doughnut / pie / stacked bar * in the dashboard. 4 distinct categories; brand accent leads, * then complementary muted tones. -------- */ --brand-chart-1: 207 161 70; /* brand-accent-400 (golden) */ --brand-chart-2: 159 209 198; /* mint */ --brand-chart-3: 244 169 156; /* coral */ --brand-chart-4: 200 182 224; /* lavender */ /* -------- Layer 2: SEMANTIC — what components reach for -------- */ --brand-success: var(--brand-emerald-500); --brand-success-bg: var(--brand-emerald-50); --brand-success-fg: var(--brand-emerald-700); --brand-warning: var(--brand-amber-500); --brand-warning-bg: var(--brand-amber-50); --brand-warning-fg: var(--brand-amber-700); --brand-error: var(--brand-red-600); --brand-error-bg: var(--brand-red-50); --brand-error-fg: var(--brand-red-700); --brand-info: var(--brand-cyan-600); --brand-info-bg: var(--brand-cyan-50); --brand-info-fg: var(--brand-cyan-700); /* Surfaces / structure */ --brand-surface-card: 255 255 255; /* white */ --brand-surface-page: var(--brand-stone-50); --brand-border: var(--brand-stone-200); --brand-border-soft: var(--brand-stone-100); --brand-text: var(--brand-stone-900); --brand-text-muted: var(--brand-stone-500); --brand-text-muted-soft: var(--brand-stone-400); /* Media placeholder (e.g. coins without a photo) — quiet surface * gradient + line-art icon. Flips with dark mode below. */ --brand-placeholder-bg: var(--brand-stone-50); --brand-placeholder-bg-end: var(--brand-stone-100); --brand-placeholder-icon: var(--brand-stone-400); /* -------- Layer 2.5: ACTION — semantic CTA tokens -------- * Buttons reach for these — matches the Heritage Golden direction * picked 2026-04-25 (frontend's golden accent extended into admin * CTAs). Decent — golden as primary action signal, not as bg. * Destructive = red, neutral = stone. */ --brand-action-accept: var(--brand-accent-700); /* primary CTA bg (Save/Add/Submit/Confirm) */ --brand-action-accept-hover: var(--brand-accent-800); --brand-action-accept-fg: 255 255 255; /* white on golden */ --brand-action-accept-dim: var(--brand-accent-600); /* dark mode bg variant */ --brand-action-accept-dim-hover: var(--brand-accent-500); --brand-action-accept-dim-fg: var(--brand-stone-900); /* dark text on lighter golden */ --brand-action-destroy: var(--brand-red-600); /* destructive CTA (Delete/Revoke/Decline) */ --brand-action-destroy-hover: var(--brand-red-700); --brand-action-destroy-fg: 255 255 255; /* -------- Layer 3: STATUS — coin workflow colors -------- */ /* * Mirrors catalog.admin_mixins.DisplayColumnsMixin.STATUS_COLORS. * Components (admin status badge, frontend chip) should reference * THESE vars instead of hardcoded hex. The Python const is kept * because Django's format_html builds inline `style=""` from Python * (no CSS var lookup at template render time), but the hex literals * there must match the values resolved by these vars. The ADR has * the sync rule. */ --status-at-home-fg: var(--brand-success); /* 16 185 129 */ --status-at-home-bg: var(--brand-success-bg); /* 236 253 245 */ --status-at-grading-fg: var(--brand-info); /* 8 145 178 */ --status-at-grading-bg: var(--brand-info-bg); /* 236 254 255 */ --status-in-transit-fg: var(--brand-warning); /* 245 158 11 */ --status-in-transit-bg: var(--brand-warning-bg); /* 255 251 235 */ --status-for-sale-fg: var(--brand-violet-600); /* 124 58 237 */ --status-for-sale-bg: var(--brand-violet-50); /* 245 243 255 */ --status-sold-fg: var(--brand-gray-500); /* 107 114 128 */ --status-sold-bg: var(--brand-gray-50); /* 243 244 246 */ --status-lost-fg: var(--brand-error); /* 220 38 38 */ --status-lost-bg: var(--brand-error-bg); /* 254 242 242 */ /* -------- Typography — font stack token (single source) -------- * Admin (admin_base.css), chat (coin_chat.css) and any new surface * reach for this instead of re-typing the Inter stack, so changing * the brand font is a one-line edit here. Font SIZES are NOT tokenized * — they stay on the Tailwind scale (text-xs…text-2xl, 12/14/16/18/20/ * 24 px) by convention (Tailwind already ships it; no new tokens). See * ticket #869dqyc3j + RULES §3.8 + the design styleguide. */ --ood-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; } /* ================================================================== * DARK MODE — semantic token overrides * ================================================================== * Only the admin runs dark mode (django-unfold toggles `html.dark`). * The public frontend has no dark toggle, so this block never applies * there — the cream/stone light look stays untouched. * * Single source of truth: any component reaching for these SEMANTIC * tokens (surface / text / border) flips automatically in dark mode * with no per-component override. This is the foundation that lets * admin_dark_polish.css shrink — components style themselves through * the tokens instead of being patched one ``!important`` rule at a time. * * Only neutral surface/text/border flip here. Brand accent (golden) * stays identical in both modes by design — it's the signature color. * Status/semantic color ramps (success/warning/error/info) keep their * own dark handling in the component CSS (status badges, alerts). */ html.dark { /* Surfaces — page sits darkest, cards lift one step above it. */ --brand-surface-card: var(--brand-stone-800); /* 41 37 36 — card bg */ --brand-surface-page: var(--brand-stone-950); /* 12 10 9 — page bg */ /* Borders — soft mirrors the regular one in dark (low contrast keeps * card edges quiet against the near-black page). */ --brand-border: var(--brand-stone-700); /* 68 64 60 */ --brand-border-soft: var(--brand-stone-700); /* 68 64 60 */ /* Text — invert the light ramp: light ink on dark surfaces. Muted * steps one lighter than light mode so secondary text stays legible * against stone-800 cards (stone-500 muted would muddy into the bg). */ --brand-text: var(--brand-stone-100); /* 245 245 244 */ --brand-text-muted: var(--brand-stone-400); /* 168 162 158 */ --brand-text-muted-soft: var(--brand-stone-300); /* 214 211 209 */ /* Media placeholder — dark surface one step above the card bg, * icon mirrors the light-mode contrast (mid-gray on quiet bg). */ --brand-placeholder-bg: var(--brand-stone-800); /* 41 37 36 */ --brand-placeholder-bg-end: var(--brand-stone-900); /* 28 25 23 */ --brand-placeholder-icon: var(--brand-stone-500); /* 120 113 108 */ }