@apliteni/apliteni-ui 0.76.0 → 0.76.1

package/guidelines/accessibility-floor.md

@@ -56,13 +56,13 @@
 
 <!-- rule: disabled-legibility -->
 
-**Rule:** Give a disabled control its own ink and surface pair, and take the accent off it.
+**Rule:** Give a disabled control its own ink, surface and edge, and take the accent off it.
 
 **Do:** Unavailable reads as unavailable with the pointer nowhere near it.
 
 **Don't:** Unavailable keeps the live paint, so only the cursor reports the state.
 
-**Except:** A disabled label must stay legible, so the pair changes rather than fades. Only the label-free switch track may fade.
+**Except:** A disabled label must stay legible, so the pair changes rather than fades. Only the label-free switch track may fade, and a control that draws no box when it is on — a ghost button — draws none when it is off, so its ink carries the state alone. Where the browser fades a control for you, as Chromium does a disabled select, reset that fade: it takes the edge and the words down together, and the words are what a reader still has to read.
 
 ## Touch field text
 

package/package.json

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

package/src/styles/input.css

@@ -55,6 +55,9 @@
    UA's grey-out, so a disabled one had looked exactly like a live one.
    `background-color`, not `background` — the shorthand also resets the three
    longhands the chevron is drawn with (#511). Held by stories/select-chevron.test.js.
+   `opacity` is the other half of that grey-out, and no colour here outranks it, so
+   the fade is reset below — it took the edge and the words down together. #564,
+   argued at docs/specification.md#colour-and-contrast.
    why: docs/specification.md#icons-and-glyphs */
 .ui-input:disabled,
 .ui-select:disabled,
@@ -62,6 +65,7 @@
   background-color: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
   border-color: var(--disabled-border);
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
+  opacity: 1; /* fade-reset: the UA's select:disabled grey-out. #564 */
   cursor: not-allowed;
 }
 

package/src/tokens/tokens.css

@@ -194,7 +194,11 @@
      why: docs/specification.md#colour-and-contrast */
   --disabled-ink: var(--muted);
   --disabled-surface: var(--surface);
-  --disabled-border: var(--border);
+  /* One rung below the hairline, so an off box is not the live box with quieter words
+     in it: dark answered both with --border. 1.16:1 on the card against the live
+     1.27:1, and as far down as the headroom goes. #564
+     why: docs/specification.md#colour-and-contrast */
+  --disabled-border: var(--surface-3);
   /* The ink of a disabled control that paints no box of its own — a ghost button. With
      no surface beside it, it is read on whatever is behind it, so it is set to clear the
      floor on the dullest ground there is (--surface-3). #273
@@ -371,6 +375,8 @@
   /* Disabled text stays on the card surface; its ink marks the unavailable state. */
   --disabled-ink: var(--muted);
   --disabled-surface: var(--surface);
+  /* The hairline, where dark takes the rung under it: light's field edge is already
+     --border-strong, so the two states read 1.52:1 and 1.24:1. #564 */
   --disabled-border: var(--border);
   --disabled-ink-bare: #585e6c;