jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design-system): sync colors_and_type.css to app.css authoritative tokens

Browse Source 
The runtime app reads tokens from app.css @theme; this file ships values
to the buildless preview pages under design-system/preview/*.html.
Several values had drifted from the Phase 10a a11y darkening done in
app.css, so the previews showed brighter accents and lighter tertiary
text than what users actually see.

Aligned: dark --text-tertiary, dark --accent (+ hover/subtle/glow/
border-focus/shadow-accent), light --text-tertiary, light --accent
(+ hover/subtle/glow), light --success, light --danger.

Header banner now states the file's role explicitly so future edits
don't recreate the drift.
This commit is contained in:
Jake
2026-05-07 09:03:11 +01:00
parent 2f85ec5806
commit fdeda6c642
1 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/design-system/colors_and_type.css
View File

@@ -1,7 +1,14 @@
/* ============================================================
Magnotia — Colors & Type
Single source of truth for CSS variables + semantic type.
Import this into any Magnotia design artefact.
Magnotia — Colors & Type (preview surface only)
Reflects the runtime tokens defined in src/app.css @theme.
The runtime app reads from app.css; this file exists so the
static preview pages under design-system/preview/*.html render
with the same values without bringing in the Tailwind v4 build.
When app.css @theme changes, mirror the change here. There is
no automated sync; intentional duplication keeps the preview
pages buildless.
============================================================ */
/* --- Brand Webfonts (local woff2, shipped with Magnotia) --- */
@@ -61,18 +68,21 @@
/* — Borders — */
--border: #2c2923;
--border-subtle: #221f1b;
--border-focus: #e8a87c;
--border-focus: #c98555;
/* — Text (warm hierarchy) — */
--text: #f0ece4;
--text-secondary: #9a9486;
--text-tertiary: #716b60;
/* Phase 10a a11y P1: lifted from #716b60 to #8c8678 to clear AA 4.5:1. */
--text-tertiary: #8c8678;
/* — Accent (amber/copper — always meaningful) — */
--accent: #e8a87c;
--accent-hover: #d4976a;
--accent-subtle: #e8a87c10;
--accent-glow: #e8a87c25;
/* — Accent (amber/copper, always meaningful) —
Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so
white text on accent fill clears AA in dark theme. */
--accent: #c98555;
--accent-hover: #b8754a;
--accent-subtle: #c9855510;
--accent-glow: #c9855525;
/* — Semantic — */
--success: #7ec89a;
@@ -101,7 +111,7 @@
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
--shadow-md: 0 4px 12px rgba(0,0,0,0.25);
--shadow-lg: 0 12px 28px rgba(0,0,0,0.35);
--shadow-accent: 0 4px 20px rgba(232,168,124,0.3);
--shadow-accent: 0 4px 20px rgba(201,133,85,0.3);
/* — Typography — */
--font-body: 'Lexend', system-ui, -apple-system, sans-serif;
@@ -151,15 +161,21 @@
--text: #1a1816;
--text-secondary: #5c574d;
--text-tertiary: #8a8578;
/* Phase 10a a11y P1: darkened from #8a8578 to #6b6557 to clear AA 4.5:1
on cream/card surfaces in light theme. */
--text-tertiary: #6b6557;
--accent: #b87a4a;
--accent-hover: #a06b3e;
--accent-subtle: #b87a4a10;
--accent-glow: #b87a4a20;
/* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on
accent fill (selected pills, primary buttons) clears AA. */
--accent: #a06a3e;
--accent-hover: #8a5a32;
--accent-subtle: #a06a3e10;
--accent-glow: #a06a3e20;
--success: #3d8a5a;
--danger: #c44d4d;
/* Phase 10a a11y G3 / FR3 / D4: success and danger darkened so coloured
text on light surfaces clears AA. */
--success: #2f7549;
--danger: #a83838;
--warning: #b89a3e;
}