@apliteni/apliteni-ui 0.115.0 → 0.116.0

package/guidelines/colour-and-theming.md

@@ -68,3 +68,5 @@
 **Don't:** Put text on grey fields, chips, headers or footers.
 
 **Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).
+
+**Except:** A status chip carries a soft fill. Where its tone reports no verdict it takes a light tint of muted ink that leaves the panel in one direction per theme, so the neutral tones read as the same family as the coloured ones.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.115.0",
+  "version": "0.116.0",
   "workspaces": [
     "react"
   ],

package/src/logic/callout.js

@@ -1 +1,9 @@
-export const calloutIcons = { info: 'info', success: 'check', warn: 'alert', danger: 'alert', neutral: 'info' };
+// Default glyph per callout tone. A callout REPORTS a state, so its status
+// glyphs are the circled ones — the same family toast() uses (TOAST_ICON in
+// src/components/index.js) and the same split iconMeanings writes down. The
+// bare `check` and `alert` this used to ship read as actions, which is why
+// every showcase overrode them per instance. #453
+//
+// Neutral keeps `info` rather than the toast's `bolt`: a neutral callout is a
+// standing note on the page, not something that just happened.
+export const calloutIcons = { info: 'info', success: 'circleCheck', warn: 'circleAlert', danger: 'circleX', neutral: 'info' };

package/src/styles/badge.css

@@ -15,24 +15,29 @@
   padding: 3px 9px;
   border-radius: var(--radius-pill);
   color: var(--text);
-  background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
+  background: var(--chip-neutral-fill);
   white-space: nowrap;
 }
 /* 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); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.ui-badge--soon { color: var(--accent); background: var(--surface); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
-.ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+   wash out and the ink has to deepen to clear AA, and that is a token decision.
+   The tones with no status take --chip-neutral-fill for the same reason: before #453
+   they painted the opaque --surface, the one soft badge fill that sat DARKER than the
+   panel in dark. why: docs/foundations.md#elevation
+   Soon takes body ink here, not --accent: accent ink measured 4.04:1 on a dark floating
+   panel under three of the four accents, body ink 9.74:1. See docs/foundations.md. */
+.ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
+.ui-badge--soon { color: var(--text); background: var(--chip-neutral-fill); }
+.ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); }
 .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); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
+.ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--chip-neutral-fill); }
 
 /* Semantic status variants — for record/row status in data tables
    (paid / verified / pending / failed …). Same chip, mapped to meaning. */
-.ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.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(--text); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.ui-badge--neutral { color: var(--text); background: var(--chip-neutral-fill); }
 
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {
@@ -42,7 +47,7 @@
   /* rank: chip */
   font-size: var(--text-xs);
   color: var(--text);
-  background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
+  background: var(--chip-neutral-fill);
   border-radius: var(--radius-pill);
   padding: 4px 11px;
   font-weight: var(--weight-semibold);
@@ -50,8 +55,8 @@
 /* The live pill is the same status paint as the live badge, so it takes the
    same pair. On its own it was --green on --glow-green, which is 3.97:1 over
    white — under AA, while the badge beside it cleared at 4.64:1. See issue #131. */
-.ui-pill--live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.ui-pill--soon { color: var(--accent); background: var(--surface); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
+.ui-pill--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
+.ui-pill--soon { color: var(--text); background: var(--chip-neutral-fill); }
 
 /* Status dot */
 .ui-dot {

package/src/styles/dropdown.css

@@ -295,12 +295,12 @@
   margin-left: auto;
   flex: none;
   color: var(--text);
-  background: color-mix(in srgb, var(--muted) 12%, transparent); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
-}
-.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-:root[data-theme="light"] .ui-dropdown__badge:not(.is-live) {
-  background: color-mix(in srgb, var(--muted) 15%, transparent); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
+  /* The kit's one neutral chip fill, which #453 moved into a token so the badge, the
+     pill, this chip and the version badge are one family. The per-theme alphas that
+     used to be written here twice live with the token. */
+  background: var(--chip-neutral-fill); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
 }
+.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only surface has no nested chip. */ }
 
 /* Disabled + danger rows */
 .ui-dropdown__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }

package/src/styles/topbar.css

@@ -226,8 +226,11 @@
   flex: none;
   margin-top: 1px;
 }
-.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only surface has no nested chip. */ }
+/* The archived version badge is the archive badge tone in a floating menu, so it takes
+   the same neutral chip fill rather than the card surface — which, inside a panel that
+   is itself lighter than a card, was darker than the ground it sat on. #453 */
+.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--chip-neutral-fill); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
 /* The phone step — the same one the rail folds at: docs/foundations.md#breakpoints.
    The switcher keeps its glyph and drops its label.
    The menu hangs the other way here. Anchored by its left edge it opened

package/src/tokens/tokens.css

@@ -233,10 +233,18 @@
   --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);
+  /* Not --pink: that reads 4.23:1 on this fill over a floating panel, under the 4.5:1 badge
+     floor. Same hue lifted toward white — 8.64 page / 7.02 card / 6.30 panel. The signal
+     and the solid-toast pair keep --pink. why: docs/foundations.md#colour-and-contrast, #453 */
+  --chip-danger-ink: #f5aec6;
   --chip-danger-fill: var(--glow-pink);
   --chip-info-ink: var(--cyan);
   --chip-info-fill: var(--glow-cyan);
+  /* The fill of a chip with no status to carry. The themes match on SEPARATION, not on
+     alpha — 12% here is 1.22:1 off the card, 15% in light is 1.23:1 — because --muted is
+     a light violet-grey in dark and a mid slate in light.
+     why: docs/foundations.md#colour-and-contrast, #453 */
+  --chip-neutral-fill: color-mix(in srgb, var(--muted) 12%, transparent);
 
   /* Solid signal surfaces — a status that has stopped being ink and become the FILL (a
      solid toast). Fill and ink are ONE pair, never two independent picks: the fill is the
@@ -412,7 +420,10 @@
      chip text clears WCAG AA on its own pale fill, and on the soft toast's wash, which
      #131 gave the same ink. Three came down again at #295 with the page; danger did not
      need to. */
-  --chip-success-ink: #1c7034;
+  /* Success is held at the 7:1 body aim rather than the 4.5:1 floor: 7.17:1 on its own
+     fill, 8.33:1 on the card. Was #1c7034 at 5.29:1. The fill did not move.
+     why: docs/foundations.md#colour-and-contrast, #453 */
+  --chip-success-ink: #145a26;
   --chip-success-fill: #dff3e4;
   --chip-warn-ink: #825900;
   --chip-warn-fill: #fbedd2;
@@ -423,6 +434,8 @@
      already occupy. See issue #131. */
   --chip-info-ink: #096a7c;
   --chip-info-fill: #ddeff3;
+  /* See the dark block for why the two alphas differ. */
+  --chip-neutral-fill: color-mix(in srgb, var(--muted) 13%, transparent);
 
   /* Light runs the same rule the other way. The signals are mid-tone here, so NO ink
      rescues them and the fill is what has to move: it takes the deepened form the chip
@@ -579,3 +592,18 @@
 .ui-callout--warn,
 .ui-callout--danger,
 .ui-success { --code-bg: var(--wash-code-bg); }
+
+/* React badges and pills accept inline code on opaque or translucent status fills. */
+.ui-badge,
+.ui-badge--live,
+.ui-badge--soon,
+.ui-badge--info,
+.ui-badge--warn,
+.ui-badge--danger,
+.ui-badge--archive,
+.ui-badge--success,
+.ui-badge--pending,
+.ui-badge--neutral,
+.ui-pill,
+.ui-pill--live,
+.ui-pill--soon { --code-bg: var(--wash-code-bg); }