@apliteni/apliteni-ui 0.122.0 → 0.124.0

package/guidelines/colour-and-theming.md

@@ -32,13 +32,13 @@
 
 **Rule:** Use `--accent-strong` for an accent ground and `--accent` for accent ink.
 
-**Why:** `--accent` is text on the canvas; its darker sibling, `--accent-strong`, lets white clear AA.
+**Why:** `--accent` is text on the canvas; darker `--accent-strong` lets white clear AA.
 
 **Do:** Use `--accent-strong` behind white text.
 
 **Don't:** Use `--accent` as that ground.
 
-**Except:** In Phoenix, Ocean and Emerald, both are one token; the difference matters only in Nebula.
+**Except:** In Phoenix, Ocean and Emerald, both are one token; it matters only in Nebula. The selected segmented pill keeps `--accent` in dark, by Artur's choice on #614.
 
 <!-- rule: accent-strong -->
 

package/package.json

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

package/src/styles/pagination.css

@@ -69,15 +69,22 @@
    selector for the markup this component emits, and the spelling that keeps a
    rule about an ENABLED control out of the disabled-rule sweep in
    stories/guidelines/accessibility-floor.test.js, which reads selector text. */
-/* The one selected mark #578 round r34 LEFT as an edge, and why. A pager stands on
-   the page in one showcase and on a card in another; --surface steps off the page at
-   1.110:1 and off a card at 1.000:1, so a fill that marks the current page on one
-   ground marks nothing on the other. The hairline is what survives both. Open for
-   Artur on #578. */
+/* #615: an accent fill stands off page and card alike, as the Segmented pill does. */
 .ui-pager__page.is-current:not([disabled]) {
-  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
-  border-color: var(--border);
-  color: var(--strong);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-weight: var(--weight-semibold);
+}
+/* White ink falls below the text floor on the lighter dark-theme accents. */
+:where(:root[data-theme="dark"]) .ui-pager__page.is-current:not([disabled]) {
+  color: var(--signal-contrast);
+}
+
+/* #615: a disabled current page keeps the mark a disabled selected Segmented pill keeps: the quiet
+   fill and the semibold weight, in the disabled ink. A busy pager still does not look live. */
+.ui-pager__page.is-current[disabled] {
+  background: var(--surface-3); /* code-bg: inherit — the selected control's own fill. */
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   font-weight: var(--weight-semibold);
 }
 

package/src/styles/segmented.css

@@ -37,19 +37,26 @@
 .ui-seg button:hover { color: var(--strong); }
 /* aria-pressed is what segmented() emits now; aria-selected is kept so markup
    copied from an older release keeps painting its active pill. */
-/* The chosen pill is its fill and its ink. The accent outline it also drew was an
-   outline used for selection, which is the property and the shape the focus band
-   takes — on a chosen pill the two sat one pixel apart. Artur separated them on #578
-   round r34, and the fill left behind has to be the mark: the track is --surface, and
-   --surface on --surface is 1.000:1, so the pill read as its ink alone. --surface-3 is
-   the kit's quiet non-text fill and steps off the track in both themes — 1.140:1 light,
-   1.160:1 dark — which stories/selected-fill.test.js measures.
+/* Selection uses the accent fill. The outline marks keyboard focus only.
    why: docs/foundations.md#the-focus-ring */
 .ui-seg button.is-active,
 .ui-seg button[aria-pressed="true"],
 .ui-seg button[aria-selected="true"] {
-  color: var(--strong);
-  background: var(--surface-3); /* code-bg: inherit — a control's own selected fill; nothing nested reads a ground from it. */
+  color: var(--accent-contrast);
+  background: var(--accent);
+}
+/* White ink falls below the text floor on the lighter dark-theme accents. */
+:where(:root[data-theme="dark"]) .ui-seg button.is-active,
+:where(:root[data-theme="dark"]) .ui-seg button[aria-pressed="true"],
+:where(:root[data-theme="dark"]) .ui-seg button[aria-selected="true"] {
+  color: var(--signal-contrast);
+}
+
+/* A disabled selection stays readable without the active accent fill. */
+.ui-seg button.is-active:where(:disabled),
+.ui-seg button[aria-pressed="true"]:where(:disabled),
+.ui-seg button[aria-selected="true"]:where(:disabled) {
+  background: var(--surface-3); /* code-bg: inherit — the selected control's own fill. */
 }
 
 /* Standard pills tighten on phones so six short month names fit one row. */