@apliteni/apliteni-ui 0.7.2 → 0.8.0

package/src/styles/badge.css

@@ -19,28 +19,26 @@
   background: var(--surface-2);
   white-space: nowrap;
 }
-.ui-badge--live { color: var(--green); background: var(--glow-green); }
+/* Status chips take the --chip-* pairs, so the light app's solid fills live in
+   tokens.css rather than in a theme override down here: on white the glow-tints
+   wash out and the ink has to deepen to clear AA, and that is a token decision. */
+.ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-badge--soon { color: var(--purple-mid); background: var(--glow-purple); }
 .ui-badge--info { color: var(--cyan); background: var(--glow-cyan); }
-.ui-badge--warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
-.ui-badge--danger { color: var(--pink); background: var(--glow-pink); }
+.ui-badge--warn { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
+.ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
 .ui-badge--archive { color: var(--muted); background: var(--surface); }
 
 /* Semantic status variants — for record/row status in data tables
    (paid / verified / pending / failed …). Same chip, mapped to meaning. */
-.ui-badge--success { color: var(--green); background: var(--glow-green); }
-.ui-badge--pending { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
+.ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); }
+.ui-badge--pending { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
 .ui-badge--neutral { color: var(--muted); background: var(--surface-2); }
 
-/* On the white light app the glow-tints wash out — give status chips a solid
-   tinted fill so they read at a glance. */
-:root[data-theme="light"] .ui-badge--success,
-:root[data-theme="light"] .ui-badge--live    { color: #1f7a38; background: #dff3e4; }
-:root[data-theme="light"] .ui-badge--pending,
-:root[data-theme="light"] .ui-badge--warn    { color: #8a5e00; background: #fbedd2; }
-:root[data-theme="light"] .ui-badge--danger  { color: #b7295f; background: #fbe0ea; }
+/* The two neutral chips are the exception: their light fill is already in the
+   surface scale (--surface-3), and their ink is plain --muted. */
 :root[data-theme="light"] .ui-badge--neutral,
-:root[data-theme="light"] .ui-badge--archive { color: #5c6270; background: #eceff4; }
+:root[data-theme="light"] .ui-badge--archive { color: var(--muted); background: var(--surface-3); }
 
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {

package/src/styles/callout.css

@@ -49,10 +49,10 @@
 
 /* status → the paint tokens every style below consumes (--toast-on = the ink
    that reads on the accent when it becomes a fill) */
-.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: #0c0c0c; }
-.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: #ffffff; }
-.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: #0c0c0c; }
-.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: #0c0c0c; }
+.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); }
+.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); }
+.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); }
+.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); }
 .ui-toast--neutral { --toast-accent: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); }
 
 /* left status marker (soft + outline; solid is already a full fill) */
@@ -126,7 +126,7 @@
   width: 48px; height: 48px;
   border-radius: 50%;
   background: var(--green);
-  color: #0c0c0c;
+  color: var(--signal-contrast);
   display: grid;
   place-items: center;
   margin: 0 auto 14px;

package/src/styles/card.css

@@ -16,7 +16,7 @@
    soft shadow to read as a panel. Dark keeps the borderless deck look. */
 :root[data-theme="light"] .ui-card {
   border: 1px solid var(--border);
-  box-shadow: 0 1px 2px rgba(20, 25, 45, .04), 0 4px 14px rgba(20, 25, 45, .05);
+  box-shadow: var(--shadow-card);
 }
 
 /* A table wider than its card scrolls INSIDE the card instead of bleeding past

package/src/styles/drawer.css

@@ -7,13 +7,13 @@
  *
  * Local tokens (surface/shadow/scrim) so the panel + scrim re-theme cleanly:
  *   --drawer-surface  panel background      --drawer-shadow  panel elevation
- *   --drawer-scrim    backdrop colour (overridden for light below)
+ *   --drawer-scrim    backdrop colour (--scrim already re-themes per theme)
  * ========================================================================== */
 
 .ui-drawer {
   --drawer-surface: var(--surface-2);
   --drawer-shadow: var(--shadow-lg);
-  --drawer-scrim: rgba(0, 0, 0, 0.58);
+  --drawer-scrim: var(--scrim);
   --drawer-w: 420px;   /* left|right panels: width  */
   --drawer-h: 45vh;    /* top|bottom panels: height */
 
@@ -22,8 +22,6 @@
   z-index: var(--z-overlay);
   pointer-events: none; /* container never blocks; scrim/panel opt back in */
 }
-:root[data-theme="light"] .ui-drawer { --drawer-scrim: rgba(20, 22, 40, 0.38); }
-
 /* Scrim — fades in; visibility trails the fade so the panel can animate out. */
 .ui-drawer__scrim {
   position: absolute;

package/src/styles/dropdown.css

@@ -108,7 +108,7 @@
 /* Disabled + danger rows */
 .ui-dropdown__item.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
 .ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
-.ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--accent); }
+.ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--pink); }
 
 /* Grouped sections */
 .ui-dropdown__section + .ui-dropdown__section { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }

package/src/styles/empty.css

@@ -44,7 +44,7 @@
   stroke: none;
 }
 .ui-illo__spark {
-  fill: var(--illo-spark, #12a150);
+  fill: var(--illo-spark, var(--green));
   stroke: none;
 }
 

package/src/styles/feedback.css

@@ -24,17 +24,23 @@
   background: var(--ui-fb-pill-grad); color: var(--accent-contrast);
   font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
-  box-shadow: 0 10px 26px var(--ui-fb-pill-glow), 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
+  box-shadow: 0 10px 26px var(--ui-fb-pill-glow),
+              0 2px 6px color-mix(in srgb, var(--shadow-ink) 28%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--sheen) 28%, transparent);
   transition: transform .2s var(--easing-spring, cubic-bezier(.34,1.56,.64,1)), opacity .16s ease, box-shadow .2s ease;
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
-.ui-fbpill:hover { box-shadow: 0 14px 34px var(--ui-fb-pill-glow), 0 3px 9px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.34); }
+.ui-fbpill:hover {
+  box-shadow: 0 14px 34px var(--ui-fb-pill-glow),
+              0 3px 9px color-mix(in srgb, var(--shadow-ink) 30%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--sheen) 34%, transparent);
+}
 .ui-fbpill.show:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.04); }
 .ui-fbpill:active { transform: translate(-50%, -100%) translateY(-8px) scale(.98); }
-.ui-fbpill svg { width: 16px; height: 16px; color: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
+.ui-fbpill svg { width: 16px; height: 16px; color: currentColor; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--shadow-ink) 25%, transparent)); }
 .ui-fbpill::before {
   content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
-  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
+  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--sheen) 55%, transparent), transparent); transform: skewX(-18deg);
 }
 .ui-fbpill.show::before { animation: uiFbSheen 1.15s ease .12s 1; }
 .ui-fbpill:hover::before { animation: uiFbSheen .7s ease 1; }
@@ -42,7 +48,7 @@
 
 /* Scrim behind the open composer */
 .ui-fbscrim {
-  position: fixed; inset: 0; z-index: 70; background: rgba(6,8,12,.44);
+  position: fixed; inset: 0; z-index: 70; background: var(--scrim);
   opacity: 0; pointer-events: none; transition: opacity .2s ease;
 }
 .ui-fbscrim.show { opacity: 1; pointer-events: auto; }
@@ -90,7 +96,7 @@
 .ui-fbck { width: 88px; height: 88px; overflow: visible; display: block; transform-origin: center; animation: uiFbCkSpring 1s cubic-bezier(.22,1,.3,1) both; }
 .ui-fbck-t { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
 .ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
-.ui-fbck-s { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
+.ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
 .ui-fbc__done h4 { color: var(--strong); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
 .ui-fbc__done p { color: var(--dim); font-size: 13.5px; line-height: 1.55; max-width: 38ch; margin: 0 auto; }
 .ui-fbc__done p b { color: var(--text); font-weight: var(--weight-semibold); }

package/src/styles/input.css

@@ -10,6 +10,9 @@
   font-weight: var(--weight-medium);
   margin-bottom: 8px;
 }
+/* Required marker. Decoration only — the control carries `required`, which is
+   what assistive technology reads, so this asterisk is aria-hidden. */
+.ui-field__req { color: var(--pink); margin-left: 4px; }
 .ui-field__hint { color: var(--muted); font-size: var(--text-sm); margin-top: 7px; line-height: 1.5; }
 .ui-field__error { color: var(--pink); font-size: var(--text-sm); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
 
@@ -142,7 +145,7 @@
   left: 3px;
   width: calc(var(--sw-h) - 6px);
   height: calc(var(--sw-h) - 6px);
-  background: #fff;
+  background: var(--control-knob);
   border-radius: 50%;
   box-shadow: var(--shadow-sm);
   transition: transform var(--dur-med) var(--ease);

package/src/styles/layout.css

@@ -28,7 +28,7 @@
 .ui-side a.on svg { opacity: 1; stroke: var(--accent); }
 .ui-side .ssep { height: 1px; background: var(--border); margin: 8px 12px; }
 .ui-side a.out { color: var(--muted); }
-.ui-side a.out:hover { color: var(--accent); }
+.ui-side a.out:hover { color: var(--pink); }
 
 /* -- Account shell grid -------------------------------------------------- */
 .ui-shell {

package/src/styles/motion.css

@@ -75,7 +75,7 @@
 }
 .m-lift:hover {
   transform: translateY(-3px);
-  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
+  box-shadow: var(--shadow-md);
 }
 .m-press {
   transition: transform var(--duration-instant, 80ms) var(--easing-sharp, cubic-bezier(0.4, 0, 0.6, 1));

package/src/styles/segmented.css

@@ -24,7 +24,10 @@
   transition: color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
 }
 .ui-seg button:hover { color: var(--text); }
+/* aria-pressed is what segmented() emits now; aria-selected is kept so markup
+   copied from an older release keeps painting its active pill. */
 .ui-seg button.is-active,
+.ui-seg button[aria-pressed="true"],
 .ui-seg button[aria-selected="true"] {
   color: var(--strong);
   background: var(--seg-active-bg);

package/src/styles/tabs.css

@@ -26,3 +26,6 @@
 
 .ui-tabs__panels { padding-top: 20px; }
 .ui-tabs__panel[hidden] { display: none; }
+/* The panel is focusable (tabindex="0", see tabs.js) so a keyboard user can
+   reach text-only content. Show the ring when they land on it. */
+.ui-tabs__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

package/src/styles/topbar.css

@@ -161,8 +161,8 @@
   width: 32px; height: 32px;
   border-radius: 50%;
   border: 1px solid var(--border);
-  background: linear-gradient(145deg, #2b6b4b, #1d4a5e);
-  color: #fff;
+  background: linear-gradient(145deg, var(--accent-strong), var(--purple));
+  color: var(--accent-contrast);
   font-weight: 600;
   font-size: 12.5px;
   display: grid;
@@ -199,4 +199,4 @@
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }
 .amenu a.aout { color: var(--muted); }
-.amenu a.aout:hover { color: var(--accent); }
+.amenu a.aout:hover { color: var(--pink); }

package/src/tokens/accents.css

@@ -30,7 +30,9 @@
   --purple: #c2400f;
   --purple-light: #d64a12;
   --purple-mid: #b8420f;
-  --accent: #d64a12;
+  /* Deepened for WCAG AA on the light ground (#fff): #d64a12 was 4.33:1 as text
+     and as the ink-on-fill; #a8370c clears AA at 6.53:1. See issue #96. */
+  --accent: #a8370c;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
   --glow-purple: rgba(214, 74, 18, 0.10);
@@ -82,7 +84,9 @@
   --purple: #0a865a;
   --purple-light: #0b9c68;
   --purple-mid: #0a9060;
-  --accent: #0b9c68;
+  /* Deepened for WCAG AA on the light ground (#fff): #0b9c68 was 3.52:1 as text
+     and as the ink-on-fill; #087a52 clears AA at 5.36:1. See issue #96. */
+  --accent: #087a52;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
   --glow-purple: rgba(11, 156, 104, 0.10);

package/src/tokens/brand.generated.css

@@ -1,7 +1,7 @@
 /* ============================================================================
  * apliteni-ui — BRAND PRIMITIVES (generated, do not edit)
  *
- * Synced from apliteni/design-system@954109e
+ * Synced from apliteni/design-system@523de68
  * via: npm run tokens:sync
  *
  * The Apliteni umbrella-brand primitives: colour ramps + motion vocabulary

package/src/tokens/tokens.css

@@ -118,6 +118,10 @@
   --surface-2: #1b1927;
   --surface-3: #2a2739;
   --seg-active-bg: #34314a; /* raised pill — clearly above the inset track in dark */
+  /* The raised handle on a control track (switch knob). Stays white in both
+     themes and under every accent: it has to read on the plain track AND on
+     the accent fill the track takes when the control is on. */
+  --control-knob: #ffffff;
   --border: #332f45;
   --border-strong: #453f5c;
 
@@ -131,18 +135,46 @@
   --accent-contrast: #ffffff;
   --ink: #e9e7f0;
 
+  /* Ink that reads on a SIGNAL colour once that colour becomes a fill — the
+     glyph in a success circle, the text in a solid toast. The signal hues sit
+     high enough in dark and mid-tone in light that near-black wins on all of
+     them; the pink danger fill deliberately takes light ink instead. */
+  --signal-contrast: #0c0c0c;
+  --danger-contrast: #ffffff;
+
   --glow-green: rgba(152, 255, 143, 0.16);
   --glow-purple: rgba(155, 93, 255, 0.18);
   --glow-cyan: rgba(32, 220, 245, 0.14);
   --glow-pink: rgba(227, 91, 143, 0.16);
 
+  /* Status-chip paint — the ink + fill of a badge / pill. Dark tints with the
+     signal's own glow; light needs a solid, deepened pair (the glows wash out
+     on white), which is why these are a token pair and not just --green etc. */
+  --chip-success-ink: var(--green);
+  --chip-success-fill: var(--glow-green);
+  --chip-warn-ink: var(--amber);
+  --chip-warn-fill: color-mix(in srgb, var(--amber) 15%, transparent);
+  --chip-danger-ink: var(--pink);
+  --chip-danger-fill: var(--glow-pink);
+
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
   /* Tight elevation for the active segmented pill — stays contained in its track. */
   --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
+  /* 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 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(). */
+  --shadow-ink: #000000;
+  --sheen: #ffffff;
+
+  /* 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);
   --grad-to: var(--cyan);
@@ -170,6 +202,7 @@
   --surface-2: #f5f6f9;
   --surface-3: #eceef3;
   --seg-active-bg: #ffffff; /* white pill raised above the grey track in light */
+  --control-knob: #ffffff;
   --border: #e4e7ee;
   --border-strong: #cdd2dc;
 
@@ -183,18 +216,39 @@
   --accent-contrast: #ffffff;
   --ink: #1e232b;
 
+  --signal-contrast: #0c0c0c;
+  --danger-contrast: #ffffff;
+
   --glow-green: rgba(30, 150, 50, 0.1);
   --glow-purple: rgba(106, 45, 204, 0.09);
   --glow-cyan: rgba(12, 143, 168, 0.1);
   --glow-pink: rgba(214, 60, 114, 0.1);
 
+  /* Solid chip pairs for the white app. Each ink is deepened past its signal
+     hue so 10px uppercase text clears WCAG AA on its own pale fill —
+     e.g. --pink (#d63c72) on #fbe0ea is 3.6:1, #b7295f is 4.9:1. */
+  --chip-success-ink: #1f7a38;
+  --chip-success-fill: #dff3e4;
+  --chip-warn-ink: #8a5e00;
+  --chip-warn-fill: #fbedd2;
+  --chip-danger-ink: #b7295f;
+  --chip-danger-fill: #fbe0ea;
+
   --shadow-sm: 0 1px 3px rgba(30, 30, 50, 0.08);
   --shadow-md: 0 8px 24px rgba(30, 30, 50, 0.1);
   --shadow-lg: 0 18px 50px rgba(30, 30, 50, 0.16);
   /* Tight elevation for the active segmented pill — stays contained in its track. */
   --shadow-seg: 0 1px 2px rgba(30, 30, 50, 0.12), 0 2px 4px rgba(30, 30, 50, 0.1);
+  /* A white card on a white page needs its own, flatter-than-sm elevation:
+     a hairline contact shadow plus a wide soft one (see card.css). */
+  --shadow-card: 0 1px 2px rgba(20, 25, 45, 0.04), 0 4px 14px rgba(20, 25, 45, 0.05);
   --ring: 0 0 0 3px rgba(106, 45, 204, 0.25);
 
+  --shadow-ink: #1e1e32;
+  --sheen: #ffffff;
+
+  --scrim: rgba(20, 22, 40, 0.38);
+
   --grad-from: var(--purple-light);
   --grad-to: var(--cyan);
 }