@apliteni/apliteni-ui 0.9.1 → 0.11.4

package/src/tokens/accents.css

@@ -21,7 +21,10 @@
   --accent: #ff6a3d;
   --accent-strong: var(--accent);
   --accent-contrast: #241006;
-  --glow-purple: rgba(255, 106, 61, 0.18);
+  /* Thinned from 0.18 for WCAG AA: the ember accent cleared every flat surface
+     but not its own wash over a card, which lifts the ground toward the ink. The
+     hue is untouched. See issue #157. */
+  --glow-purple: rgba(255, 106, 61, 0.15);
   --ring: 0 0 0 3px rgba(255, 106, 61, 0.38);
   --grad-from: #ff7a45;
   --grad-to: #ffcf6a;
@@ -49,7 +52,9 @@
   --accent: #3b9dff;
   --accent-strong: var(--accent);
   --accent-contrast: #04121f;
-  --glow-purple: rgba(59, 157, 255, 0.18);
+  /* Thinned from 0.18 for WCAG AA, the same wash-over-a-card pair as dark
+     Phoenix and from the same alpha. The hue is untouched. See issue #157. */
+  --glow-purple: rgba(59, 157, 255, 0.15);
   --ring: 0 0 0 3px rgba(59, 157, 255, 0.38);
   --grad-from: #3b9dff;
   --grad-to: #20dcf5;
@@ -58,9 +63,25 @@
   --purple: #1156b8;
   --purple-light: #1568d6;
   --purple-mid: #1560c8;
-  --accent: #1568d6;
+  /* Deepened for WCAG AA on the raised grey panel and its wash: #1568d6 read
+     4.54:1 on --surface-3 and 3.98:1 on --glow-purple over it; #005bc8 clears
+     both at 5.43:1 and 4.76:1. Both washed figures are at the 0.10 alpha below,
+     which is what this cell ships — an earlier version of this comment quoted
+     them at the 0.05 the wash briefly carried, which flattered both inks.
+     Light Ocean is the one light accent #96 never deepened, because it happened
+     to clear plain white. Same kind of move, smaller: hue and chroma unchanged
+     in OKLCH (H 258, C 0.185) and four points of lightness down, where #96's
+     two took about ten points and gave up 15.9% of the chroma on Phoenix and
+     17.6% on Emerald. See issues #96 and #157. */
+  --accent: #005bc8;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
+  /* Back to 0.10, the alpha this cell carried before #157. #157 thinned it to
+     0.05 while --accent was still #1568d6, because no alpha could carry that
+     blue over the grey panel. Deepening the ink is what closed the pair, so the
+     wash does not have to be the thing that gives. The rgb stays --purple-light
+     rather than the accent — in light a glow tints --purple-light, which
+     stories/signal-contrast.test.js holds. See issue #157. */
   --glow-purple: rgba(21, 104, 214, 0.10);
   --ring: 0 0 0 3px rgba(21, 104, 214, 0.28);
   --grad-from: #1568d6;
@@ -89,7 +110,9 @@
   --accent: #087a52;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
-  --glow-purple: rgba(11, 156, 104, 0.10);
+  /* Thinned from 0.10 for WCAG AA, the same grey-panel pair as light Ocean and
+     from the same alpha. See issue #157. */
+  --glow-purple: rgba(11, 156, 104, 0.08);
   --ring: 0 0 0 3px rgba(11, 156, 104, 0.28);
   --grad-from: #0b9c68;
   --grad-to: #12b0a0;

package/src/tokens/tokens.css

@@ -105,8 +105,15 @@
   color-scheme: dark;
 
   --purple: #6a2dcc;
-  --purple-light: #9b5dff;
-  --purple-mid: #b479ff;
+  /* The ramp moves up one step so --accent is --purple-light again, which is
+     the shape light Nebula and light Ocean already ship and which dark Nebula
+     held until #157 lifted the accent onto the old --purple-mid. Left alone,
+     the two tokens would resolve to one colour and the ramp would carry a
+     duplicate step. #bd8cff is the value docs/adr/0006 reasons about and
+     rejects as the accent; it becomes the ramp's top step instead. Light
+     Nebula's ramp does not move. See issue #157. */
+  --purple-light: #b479ff;
+  --purple-mid: #bd8cff;
   --cyan: #20dcf5;
   --green: #98ff8f;
   /* Lighter than it looks like it should be, and deliberately so: --pink is read
@@ -135,8 +142,15 @@
   --dim: #c6c2d6;
   --muted: #948fa8;
 
-  --accent: #9b5dff;
-  --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA (~6.5:1) */
+  /* Lifted from #9b5dff, which cleared the flat surfaces and failed on its own
+     wash over a card. This value was already in the ramp as --purple-mid, so no
+     new colour entered it; the ramp then moved up a step above so --accent is
+     --purple-light, which is how every other Nebula and Ocean cell is written.
+     --glow-purple and --ring follow it down the file. Held by
+     stories/accent-contrast.test.js. See issue #157.
+     why: docs/adr/0006-the-accent-is-measured-against-its-own-wash.md */
+  --accent: #b479ff;
+  --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA at 5.70:1 */
   --accent-contrast: #ffffff;
   --ink: #e9e7f0;
 
@@ -157,7 +171,11 @@
   --danger-contrast: var(--signal-contrast);
 
   --glow-green: rgba(152, 255, 143, 0.16);
-  --glow-purple: rgba(155, 93, 255, 0.18);
+  /* Dropped from 0.18: the wash, not the surface beneath it, is what put --accent
+     under AA — it lifts the ground toward the ink faster than the ink lifts off
+     it. Re-tinted from the new --accent, which signal-contrast.test.js requires.
+     See issue #157. */
+  --glow-purple: rgba(180, 121, 255, 0.12);
   --glow-cyan: rgba(32, 220, 245, 0.14);
   --glow-pink: rgba(233, 124, 165, 0.16);
 
@@ -196,7 +214,12 @@
   /* Resting elevation for a card. Dark cards are borderless — the surface does
      the grouping on its own — so they cast nothing. */
   --shadow-card: none;
-  --ring: 0 0 0 3px rgba(155, 93, 255, 0.35);
+  /* The accent's own rgb at a fixed alpha, so it moves whenever --accent moves —
+     otherwise a token points at a colour the accent no longer is. At this alpha
+     the band sits under the 3:1 WCAG 1.4.11 asks of a focus indicator, before
+     this change and after it; nothing here closes that. See issue #157 and the
+     ADR's closing section. */
+  --ring: 0 0 0 3px rgba(180, 121, 255, 0.35);
 
   /* The ink a cast shadow is made of, and the specular white that reads as
      gloss on a raised surface. Effects mix these instead of writing rgba(). */
@@ -206,8 +229,12 @@
   /* Backdrop that dims the page behind an overlay (drawer, modal, composer). */
   --scrim: rgba(0, 0, 0, 0.58);
 
-  /* Accent gradient stops (hero headline, marketing) — overridden per sub-theme. */
-  --grad-from: var(--purple-light);
+  /* Accent gradient stops (hero headline, marketing) — overridden per sub-theme.
+     --grad-from is pinned to the literal rather than tracking --purple-light,
+     which #157 moved up a step: following it would lighten the hero gradient's
+     first stop, a visible change nobody asked for. Every --grad-from in
+     src/tokens/accents.css is already written as a literal for the same reason. */
+  --grad-from: #9b5dff;
   --grad-to: var(--cyan);
 }