@celestia-island/hikari 0.55.235 → 0.55.236

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.235",
+  "version": "0.55.236",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAboutModal.scss

@@ -216,16 +216,53 @@
   color: rgb(var(--color-muted));
 }
 
+// Tone-pill ink, WCAG AA (2026-10-30 record-level leftover; PR #920 R2 S3-⑤).
+//
+// The pill text sits at `--text-2xs` (10px) — WCAG small text — so it owes
+// 4.5:1, and the raw channel colour does not clear that on every palette:
+// hosts swap the preset table wholesale (chest clears every stock key at
+// boot and registers only its brand line), so no palette's value may be
+// hardcoded here. The ink is therefore DERIVED from the live channel in
+// OKLCH, whose perceptual uniformness lets the derivation touch lightness
+// only — hue and chroma pass through, so each tone keeps its identity:
+//
+//   light: L capped at 0.5  — darkens only colours too light for the white
+//                            modal surface (stock amber would sit at 1.9:1);
+//   dark:  L floored at 0.72 — lifts only colours too dark for the navy one
+//                            (chest red would sit at 3.3:1).
+//
+// On the two shipped palettes the light cap grips EVERY coloured tone (all
+// six entries sit above L 0.5 — chest light red 0.541 clamps to 0.501); the
+// band's only pass-through is the stock dark positive green (L 0.768,
+// already above the floor). Hue and chroma always survive. Both bounds were
+// solved against the pill's real backdrop —
+// the 10% channel tint composited over the 3%-primary card on
+// `--color-surface` — for the WORST entry of the stock AND chest palettes:
+// every tone lands ≥4.6:1. `light-dark()` resolves through the same
+// color-scheme the theme engine already drives (`[data-mode] body` in
+// theme.scss sets it alongside the channel swap), and an engine without
+// relative-colour support drops the declaration, falling back to the
+// neutral muted ink above — still AA everywhere: ≥4.87:1 even under the
+// coloured pills' own tinted backdrop (4.87–7.20 across both palettes and
+// modes; 5.98–8.06 on the plain neutral pill) — rather than shipping an
+// unreadable tone colour. The border and background keep the raw channel:
+// only the glyphs owe contrast, the tint is decorative.
 .s-about-modal-row-meta[data-tone="positive"] {
   border-color: rgb(var(--color-success) / 32%);
   background: rgb(var(--color-success) / 10%);
-  color: rgb(var(--color-success));
+  color: light-dark(
+    oklch(from rgb(var(--color-success)) min(l, 0.5) c h),
+    oklch(from rgb(var(--color-success)) max(l, 0.72) c h)
+  );
 }
 
 .s-about-modal-row-meta[data-tone="caution"] {
   border-color: rgb(var(--color-warning) / 32%);
   background: rgb(var(--color-warning) / 10%);
-  color: rgb(var(--color-warning));
+  color: light-dark(
+    oklch(from rgb(var(--color-warning)) min(l, 0.5) c h),
+    oklch(from rgb(var(--color-warning)) max(l, 0.72) c h)
+  );
 }
 
 // Red state: the component is not wired up / unreachable. The row then
@@ -233,7 +270,10 @@
 .s-about-modal-row-meta[data-tone="danger"] {
   border-color: rgb(var(--color-error) / 32%);
   background: rgb(var(--color-error) / 10%);
-  color: rgb(var(--color-error));
+  color: light-dark(
+    oklch(from rgb(var(--color-error)) min(l, 0.5) c h),
+    oklch(from rgb(var(--color-error)) max(l, 0.72) c h)
+  );
 }
 
 /* ── Links: licenses, external links, credits names and filings ───────── */

package/src/components/HkAboutModal.styles.test.ts

@@ -239,22 +239,44 @@ describe("HkAboutModal stylesheet contract", () => {
   describe("row meta tones", () => {
     const TONE = (tone: string) => `.s-about-modal-row-meta[data-tone=${tone}]`;
 
-    it("paints the danger tone in the theme's error colour", () => {
-      const danger = ruleBody(css, TONE("danger"));
-      expect(danger, "the danger-tone rule must survive compilation").not.toBe("");
-      expect({
-        borderColor: declaration(danger, "border-color"),
-        background: declaration(danger, "background"),
-        color: declaration(danger, "color"),
-      }).toEqual({
-        // Same geometry as the positive / caution tones, only the channel
-        // differs — `--color-error` is the theme's existing danger token.
-        // (Dart Sass compiles the seed-relative form without spaces around
-        // the slash.)
-        borderColor: "rgb(var(--color-error)/32%)",
-        background: "rgb(var(--color-error)/10%)",
-        color: "rgb(var(--color-error))",
-      });
+    // Channel behind each coloured tone, and the WCAG-AA ink derived from it.
+    // The pill text is `--text-2xs` (10px) — small text, 4.5:1 — and the raw
+    // channel misses that on both shipped palettes (stock light warning sits
+    // at ~1.9:1, chest dark red at ~3.3:1). The ink is therefore an OKLCH
+    // derivation from the live channel: hue and chroma pass through, only
+    // lightness moves — capped at 0.5 in light mode, floored at 0.72 in dark
+    // (bounds solved so the worst stock AND chest entry clears 4.5:1 against
+    // the pill's real backdrop: the 10% channel tint over the 3%-primary
+    // card on `--color-surface`). Reverting any arm to the raw channel — or
+    // dropping one `light-dark()` side — must turn this red.
+    const AA_INK = (channel: string) =>
+      `light-dark(` +
+      `oklch(from rgb(var(--color-${channel})) min(l, 0.5) c h), ` +
+      `oklch(from rgb(var(--color-${channel})) max(l, 0.72) c h))`;
+    const TONES: Record<string, string> = {
+      positive: "success",
+      caution: "warning",
+      danger: "error",
+    };
+
+    it("paints every tone in the theme channel with its AA-derived ink", () => {
+      for (const [tone, channel] of Object.entries(TONES)) {
+        const rule = ruleBody(css, TONE(tone));
+        expect(rule, `the ${tone}-tone rule must survive compilation`).not.toBe("");
+        expect({
+          borderColor: declaration(rule, "border-color"),
+          background: declaration(rule, "background"),
+          color: declaration(rule, "color"),
+        }).toEqual({
+          // Same geometry across the tones, only the channel differs; the
+          // border and tint keep the RAW channel (decorative identity),
+          // while the glyphs get the derived ink. (Dart Sass compiles the
+          // seed-relative form without spaces around the slash.)
+          borderColor: `rgb(var(--color-${channel})/32%)`,
+          background: `rgb(var(--color-${channel})/10%)`,
+          color: AA_INK(channel),
+        });
+      }
     });
   });
 });