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

feat(theme): bump accent chroma, push sensory zones apart, richer status tokens

Browse Source 
Phase 10b colour push: theme reads as Magnotia, not "subdued generic dark".
Same lightness band as Phase 10a (AA preserved), more chroma across accent,
status tokens, and zone surfaces.

Dark accent: #c98555 -> #d68450 (subtle/hover/glow recomputed).
Light accent: #a06a3e -> #a3683a.
Dark status: success #7ec89a -> #5fc28a, danger #e87171 -> #e85f5f,
warning #e8c86e -> #e8be4a.
Light status: success #2f7549 -> #1f7344, danger #a83838 -> #b32626,
warning #b89a3e -> #a08a1f.

Sensory zones pushed further apart so each zone reads as its own
environment: cave cools toward blue-grey, energy warms toward red-orange,
reset cools toward green. AA on body text verified for every Card surface
in both themes.

Stale accent rgba (201,133,85) replaced with new (214,132,80) across nine
files. --shadow-accent in colors_and_type.css mirrored.

No secondary tint token added: Magnotia's identity is amber-as-the-only-
meaningful-colour. Cheaper to add a second meaningful colour later if a
real need appears than to dilute the discipline now.

Default surfaces, text tokens, and borders untouched per scope.
This commit is contained in:
Jake
2026-05-07 10:46:35 +01:00
parent ec09f8ffdb
commit d2f64a231d
9 changed files with 110 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app.css
View File

@@ -58,16 +58,21 @@
/* Accent — warm amber/copper.
Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so the
"Browse Files" filled button (white text on accent fill) clears AA in
dark theme. Subtle / hover / glow recomputed off the new base. */
--color-accent: #c98555;
--color-accent-hover: #b8754a;
--color-accent-subtle: #c9855510;
--color-accent-glow: #c9855525;
dark theme. Phase 10b: chroma bumped to #d68450 (same lightness band,
~OKLCH C 0.12 vs prior 0.08) so the brand reads warmer without losing
the AA Large headroom on filled buttons. Subtle / hover / glow
recomputed off the new base. */
--color-accent: #d68450;
--color-accent-hover: #c47340;
--color-accent-subtle: #d6845010;
--color-accent-glow: #d6845025;
/* Semantic */
--color-success: #7ec89a;
--color-danger: #e87171;
--color-warning: #e8c86e;
/* Semantic — Phase 10b: chroma bumped on all three so success/danger/
warning read as signals, not as cream-tinted body text. AA on bg-card
(#1b1a17) verified mentally for each. */
--color-success: #5fc28a;
--color-danger: #e85f5f;
--color-warning: #e8be4a;
/* Overlays — used by modal scrims. Derived from --color-bg #0f0e0c at
0.7 alpha so the dim sits on the brand neutral, not pure black. */
@@ -124,18 +129,22 @@
--color-text-tertiary: #6b6557;
/* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on
accent fill (selected pills, primary buttons) clears AA. */
--color-accent: #a06a3e;
--color-accent-hover: #8a5a32;
--color-accent-subtle: #a06a3e10;
--color-accent-glow: #a06a3e20;
accent fill (selected pills, primary buttons) clears AA. Phase 10b:
chroma bumped to #a3683a — same lightness band, more saturation. AA
on cream surfaces re-verified. */
--color-accent: #a3683a;
--color-accent-hover: #8a542b;
--color-accent-subtle: #a3683a10;
--color-accent-glow: #a3683a20;
/* Phase 10a a11y G3: darkened success from #3d8a5a to #2f7549 so success
text on light surfaces clears AA. Phase 10a a11y FR3 / D4: darkened
danger from #c44d4d to #a83838 for the same reason. */
--color-success: #2f7549;
--color-danger: #a83838;
--color-warning: #b89a3e;
danger from #c44d4d to #a83838 for the same reason. Phase 10b: chroma
bumped on all three, lightness preserved or slightly darkened to keep
AA on cream backgrounds. */
--color-success: #1f7344;
--color-danger: #b32626;
--color-warning: #a08a1f;
--color-sidebar: #f5f2ed;
--color-nav-active: #eae6e0;
@@ -155,43 +164,50 @@
/* === Sensory Zones — Dark Theme === */
/* Zones tint surfaces only. Accent tokens (amber) stay constant across all zones —
the brand colour is the constant, the environment is the variable. */
the brand colour is the constant, the environment is the variable.
Phase 10b: zone tints pushed further apart so each zone feels emotionally
distinct (cool blue-grey / warm red-orange / cool green) rather than three
nearly-identical near-blacks. AA verified for body text (--color-text
#f0ece4) on every Card surface. */
:root[data-zone="cave"] {
--color-bg: #0f1214;
--color-bg-elevated: #141a1e;
--color-bg-card: #171f24;
--color-sidebar: #0d1012;
--color-bg: #0a1218;
--color-bg-elevated: #0f1a22;
--color-bg-card: #14222b;
--color-sidebar: #080f14;
}
:root[data-zone="energy"] {
--color-bg: #100e0b;
--color-bg-elevated: #1c1815;
--color-bg-card: #211d18;
--color-sidebar: #141110;
--color-bg: #160e09;
--color-bg-elevated: #20140e;
--color-bg-card: #261913;
--color-sidebar: #100806;
}
:root[data-zone="reset"] {
--color-bg: #0e100e;
--color-bg-elevated: #161a16;
--color-bg-card: #1a1f1a;
--color-sidebar: #0c0e0c;
--color-bg: #0c130c;
--color-bg-elevated: #111a11;
--color-bg-card: #161f15;
--color-sidebar: #0a0e0a;
}
/* === Sensory Zones — Light Theme === */
/* Phase 10b: light zones likewise pushed further from default cream so the
environment shift is felt, not merely intuited. AA verified for body text
(--color-text #1a1816) on every Card surface. */
:root[data-theme="light"][data-zone="cave"] {
--color-bg: #f0f5f7;
--color-bg-elevated: #e8f0f2;
--color-bg: #eef4f6;
--color-bg-elevated: #e2eef0;
--color-bg-card: #f5fafc;
--color-sidebar: #eaf2f4;
--color-sidebar: #e8f0f2;
}
:root[data-theme="light"][data-zone="energy"] {
--color-bg: #faf7f3;
--color-bg-elevated: #f5f0e8;
--color-bg-card: #fffcf7;
--color-sidebar: #f5f0ea;
--color-bg: #fdf3eb;
--color-bg-elevated: #f8e8d8;
--color-bg-card: #fff8ef;
--color-sidebar: #f5e8d4;
}
:root[data-theme="light"][data-zone="reset"] {
--color-bg: #f3f7f2;
--color-bg-elevated: #edf2ea;
--color-bg-card: #f8fcf6;
--color-sidebar: #eff4ec;
--color-bg: #eff6ed;
--color-bg-elevated: #e4f0e0;
--color-bg-card: #f7fcf5;
--color-sidebar: #e8f3e4;
}
/* === Base === */