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

v0.3 Phase 4l: semantic palette revision — Tiger Flame / Banana Cream / Sea Green / Steel Azure

Browse Source 
Wren palette pass on 2026/05/15. Splits the role tokens away from
the prior bright/neon set toward a more grounded warm-and-cool
quartet, with explicit FILL + TEXT (signal + ink) pairs in light
mode so AA-on-cream stays cheap to consume.

Dark mode signals
  --color-info-signal     #6EA8FF  →  #064789  Steel Azure
  --color-danger-signal   #FF5A52  →  #F26430  Tiger Flame
  --color-success-signal  #00FF56  →  #519872  Sea Green
  --color-caution-signal  #FFCD00  →  #FCEC52  Banana Cream

Light mode (FILL = signal, TEXT = ink)
  --color-info-signal     #000AFF  →  #217AD5  +ink #1F73C9
  --color-danger-signal   #FF0700  →  #D55121  +ink #C54B1F
  --color-success-signal  #00D94A  →  #21D575  +ink #148348
  --color-caution-signal  #FFCD00  →  #D5A021  +ink #7E7414

Unchanged on purpose
  --color-bg              Coffee Bean #1F0812 was tried live and
                          rejected — R/G/B channels (31/8/18) read
                          as aubergine, not brown. Bg + grain held
                          at #12100E / 0.06 pending a true warm-brown
                          candidate.
  --color-*-border        Hue family unchanged from Phase 4j.
  --color-*-bg            Hand-tuned surface tints unchanged.
  HC variants             Out of scope for this pass.

Known issue
  Steel Azure #064789 on the dark bg sits around 2.06:1 — fails AA
  as text/icon. The role-token model has --color-info-ink (currently
  #9CC6FF, light blue) for that use case, but consumers reaching for
  --color-info-signal directly will read muddy. Retune of the info
  ink/signal split is owed separately. Documented inline.

npm run check: 0 errors.
This commit is contained in:
Jake
2026-05-15 21:18:43 +01:00
parent baab7b3c12
commit 6881aa800a
1 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/design-system/v0.3-quietware-tokens.css
View File

@@ -186,6 +186,16 @@
Quietware — dark mode default. Warm brown-charcoal atmosphere.
============================================================ */
:root[data-design="quietware"] {
/* Phase 4l — Wren palette revision, 2026/05/15. Role signals
swapped to Tiger Flame / Banana Cream / Sea Green / Steel Azure
(dark) and the FILL/TEXT pair set (light). Coffee Bean bg
candidate #1F0812 was tested live and rejected — its R/G/B
channels (31/8/18) sit on a purple-leaning hue, reading as
aubergine in the running window, not the labelled warm brown.
Bg + grain held at the prior values pending a true coffee-brown
candidate. Steel Azure contrast on dark fails AA (see notice on
--color-info-signal below) regardless of bg choice — retune of
the info ink/signal split is owed separately. */
--color-bg: #12100E;
--color-bg-elevated: #1A1713;
--color-bg-card: #211D18;
@@ -207,25 +217,28 @@
--color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent);
--color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent);
/* Four-tier role tokens. Signal stays bright (the role's identity);
ink lightens for text legibility on dark; border is a middle value;
bg is a hand-tuned dark tint, not a color-mix derivation. */
--color-info-signal: #6EA8FF;
/* Four-tier role tokens. Signal carries the role's identity
(Tiger Flame / Banana Cream / Sea Green / Steel Azure under
Phase 4l); ink lightens for text legibility on dark; border is
a middle value; bg is a hand-tuned dark tint, not a color-mix.
Borders + bg tints retained from Phase 4j — they go with the
hue family rather than the specific shade. */
--color-info-signal: #064789;
--color-info-ink: #9CC6FF;
--color-info-border: #4D8DFF;
--color-info-bg: #101A2A;
--color-danger-signal: #FF5A52;
--color-danger-signal: #F26430;
--color-danger-ink: #FF9B96;
--color-danger-border: #FF5A52;
--color-danger-bg: #2A1412;
--color-success-signal: #00FF56;
--color-success-signal: #519872;
--color-success-ink: #7DFFA8;
--color-success-border: #00D94A;
--color-success-bg: #0D2415;
--color-caution-signal: #FFCD00;
--color-caution-signal: #FCEC52;
--color-caution-ink: #FFE066;
--color-caution-border: #FFCD00;
--color-caution-bg: #29210A;
@@ -419,25 +432,28 @@
--color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent);
--color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent);
/* Four-tier role tokens, light mode. Bg values hand-picked as
clean pale tints, not muddy color-mix products. */
--color-info-signal: #000AFF;
--color-info-ink: #0033A0;
/* Four-tier role tokens, light mode. Phase 4l — Wren palette
revision 2026/05/15. Signal = FILL (vivid), ink = TEXT-safe
darker sibling that passes 4.5:1 on cream. Saturation/lightness
targeted on the locked Banana Cream anchor #D5A021 (S 73%, L 48%).
Borders + bg tints unchanged — they go with the hue family. */
--color-info-signal: #217AD5;
--color-info-ink: #1F73C9;
--color-info-border: #3A6BFF;
--color-info-bg: #EEF3FF;
--color-danger-signal: #FF0700;
--color-danger-ink: #B3261E;
--color-danger-signal: #D55121;
--color-danger-ink: #C54B1F;
--color-danger-border: #E13A32;
--color-danger-bg: #FFF0EF;
--color-success-signal: #00D94A;
--color-success-ink: #006B2D;
--color-success-signal: #21D575;
--color-success-ink: #148348;
--color-success-border: #159947;
--color-success-bg: #EAF8EE;
--color-caution-signal: #FFCD00;
--color-caution-ink: #7A5D00;
--color-caution-signal: #D5A021;
--color-caution-ink: #7E7414;
--color-caution-border: #D9A900;
--color-caution-bg: #FFF7D6;