v0.3 Phase 4l: semantic palette revision — Tiger Flame / Banana Cream / Sea Green / Steel Azure
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:
@@ -186,6 +186,16 @@
|
|||||||
Quietware — dark mode default. Warm brown-charcoal atmosphere.
|
Quietware — dark mode default. Warm brown-charcoal atmosphere.
|
||||||
============================================================ */
|
============================================================ */
|
||||||
:root[data-design="quietware"] {
|
: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: #12100E;
|
||||||
--color-bg-elevated: #1A1713;
|
--color-bg-elevated: #1A1713;
|
||||||
--color-bg-card: #211D18;
|
--color-bg-card: #211D18;
|
||||||
@@ -207,25 +217,28 @@
|
|||||||
--color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent);
|
--color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent);
|
||||||
--color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent);
|
--color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent);
|
||||||
|
|
||||||
/* Four-tier role tokens. Signal stays bright (the role's identity);
|
/* Four-tier role tokens. Signal carries the role's identity
|
||||||
ink lightens for text legibility on dark; border is a middle value;
|
(Tiger Flame / Banana Cream / Sea Green / Steel Azure under
|
||||||
bg is a hand-tuned dark tint, not a color-mix derivation. */
|
Phase 4l); ink lightens for text legibility on dark; border is
|
||||||
--color-info-signal: #6EA8FF;
|
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-ink: #9CC6FF;
|
||||||
--color-info-border: #4D8DFF;
|
--color-info-border: #4D8DFF;
|
||||||
--color-info-bg: #101A2A;
|
--color-info-bg: #101A2A;
|
||||||
|
|
||||||
--color-danger-signal: #FF5A52;
|
--color-danger-signal: #F26430;
|
||||||
--color-danger-ink: #FF9B96;
|
--color-danger-ink: #FF9B96;
|
||||||
--color-danger-border: #FF5A52;
|
--color-danger-border: #FF5A52;
|
||||||
--color-danger-bg: #2A1412;
|
--color-danger-bg: #2A1412;
|
||||||
|
|
||||||
--color-success-signal: #00FF56;
|
--color-success-signal: #519872;
|
||||||
--color-success-ink: #7DFFA8;
|
--color-success-ink: #7DFFA8;
|
||||||
--color-success-border: #00D94A;
|
--color-success-border: #00D94A;
|
||||||
--color-success-bg: #0D2415;
|
--color-success-bg: #0D2415;
|
||||||
|
|
||||||
--color-caution-signal: #FFCD00;
|
--color-caution-signal: #FCEC52;
|
||||||
--color-caution-ink: #FFE066;
|
--color-caution-ink: #FFE066;
|
||||||
--color-caution-border: #FFCD00;
|
--color-caution-border: #FFCD00;
|
||||||
--color-caution-bg: #29210A;
|
--color-caution-bg: #29210A;
|
||||||
@@ -419,25 +432,28 @@
|
|||||||
--color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent);
|
--color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent);
|
||||||
--color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent);
|
--color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent);
|
||||||
|
|
||||||
/* Four-tier role tokens, light mode. Bg values hand-picked as
|
/* Four-tier role tokens, light mode. Phase 4l — Wren palette
|
||||||
clean pale tints, not muddy color-mix products. */
|
revision 2026/05/15. Signal = FILL (vivid), ink = TEXT-safe
|
||||||
--color-info-signal: #000AFF;
|
darker sibling that passes 4.5:1 on cream. Saturation/lightness
|
||||||
--color-info-ink: #0033A0;
|
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-border: #3A6BFF;
|
||||||
--color-info-bg: #EEF3FF;
|
--color-info-bg: #EEF3FF;
|
||||||
|
|
||||||
--color-danger-signal: #FF0700;
|
--color-danger-signal: #D55121;
|
||||||
--color-danger-ink: #B3261E;
|
--color-danger-ink: #C54B1F;
|
||||||
--color-danger-border: #E13A32;
|
--color-danger-border: #E13A32;
|
||||||
--color-danger-bg: #FFF0EF;
|
--color-danger-bg: #FFF0EF;
|
||||||
|
|
||||||
--color-success-signal: #00D94A;
|
--color-success-signal: #21D575;
|
||||||
--color-success-ink: #006B2D;
|
--color-success-ink: #148348;
|
||||||
--color-success-border: #159947;
|
--color-success-border: #159947;
|
||||||
--color-success-bg: #EAF8EE;
|
--color-success-bg: #EAF8EE;
|
||||||
|
|
||||||
--color-caution-signal: #FFCD00;
|
--color-caution-signal: #D5A021;
|
||||||
--color-caution-ink: #7A5D00;
|
--color-caution-ink: #7E7414;
|
||||||
--color-caution-border: #D9A900;
|
--color-caution-border: #D9A900;
|
||||||
--color-caution-bg: #FFF7D6;
|
--color-caution-bg: #FFF7D6;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user