@celestia-island/hikari 0.55.189 → 0.55.191

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.189",
+  "version": "0.55.191",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAffixPicker.scss

@@ -196,8 +196,8 @@
 
   &:hover,
   &:focus-visible {
-    color: rgb(var(--color-danger, 240 70 80));
-    background: rgb(var(--color-danger, 240 70 80) / 12%);
+    color: rgb(var(--color-error, 247 118 142));
+    background: rgb(var(--color-error, 247 118 142) / 12%);
   }
 }
 

package/src/components/HkAuthSubmitButton.scss

@@ -8,5 +8,5 @@
 .s-auth-submit-error {
   margin: 0;
   font-size: var(--text-sm, 0.8125rem);
-  color: rgb(var(--color-error, 240 70 80));
+  color: rgb(var(--color-error, 247 118 142));
 }

package/src/components/HkAvatar.scss

@@ -7,8 +7,8 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: var(--hi-color-gray-200, #E5E7EB);
-  color: var(--hi-color-gray-600, #4B5563);
+  background-color: rgb(var(--color-muted, 108 108 108) / 15%);
+  color: rgb(var(--color-text-secondary, 102 102 102));
   transition: all 0.2s ease;
 
   img {

package/src/components/HkBlockingToast.scss

@@ -80,17 +80,21 @@
 // dark-on-amber warning text for contrast).
 .hk-blocking-toast-info {
   background: var(--hi-color-info, #6abed6);
-  color: #fff;
+  /* On-solid content: ride the canonical slot (HkToast family), keep the
+   * #fff fallback so themeless hosts render as before. */
+  color: var(--hi-color-text-on-solid, #fff);
 }
 
 .hk-blocking-toast-warning {
   background: var(--hi-color-warning, #eed677);
+  /* Deliberate DARK-on-amber: the warning band is light by design, and
+   * the on-solid slot is white — a white glyph here would be unreadable. */
   color: #1c1c1e;
 }
 
 .hk-blocking-toast-danger {
   background: var(--hi-color-danger, #f85149);
-  color: #fff;
+  color: var(--hi-color-text-on-danger, #fff);
 }
 
 // ── Actions on a tinted surface ─────────────────────────────────────

package/src/components/HkConfirmDialog.scss

@@ -17,7 +17,7 @@
 .hk-confirm-dialog-message {
   margin: 0;
   color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
-  font-size: var(--hi-text-sm, 0.875rem);
+  font-size: var(--text-sm, 0.8125rem);
   line-height: 1.6;
   overflow-wrap: anywhere;
 }

package/src/components/HkCornerBadge.scss

@@ -73,7 +73,7 @@
   background: var(--hk-badge-bg);
   color: var(--hk-badge-text);
   border: 1px solid var(--hk-badge-border);
-  font-size: var(--text-4xs, 0.625rem);
+  font-size: var(--text-2xs, 0.625rem);
   font-weight: 700;
   line-height: 1;
   font-variant-numeric: tabular-nums;

package/src/components/HkDockBar.scss

@@ -117,8 +117,14 @@
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   /* Reverse soft light — dark mode: white halo; light mode: soft black
-   * shadow. Strength scales with --glow-scale (Style → Shadow). */
-  box-shadow: var(--glow-dock);
+   * shadow. Strength scales with --glow-scale (Style → Shadow). The
+   * default derives the halo from the theme's own ink channel, which IS
+   * mode-reversed — before 2026-10-19 the bare var(--glow-dock) had no
+   * publisher and no fallback, so the dock halo silently never rendered. */
+  box-shadow: var(
+    --glow-dock,
+    0 8px 32px rgb(var(--color-text, 30 30 30) / calc(8% * var(--glow-scale, 1)))
+  );
 }
 
 /* Vertical side docks (west / east edges) stack along the viewport's

package/src/components/HkDrawer.motion.test.ts

@@ -0,0 +1,111 @@
+import { readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import * as sass from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Side-drawer motion contract (2026-10-19 phone recording).
+ *
+ * The left/right drawer used to share the scrim's opacity fade: at
+ * halfway through the close the panel was still on screen but its right
+ * half was transparent, so the page behind showed through and the right
+ * rounded corners dissolved — it read as a width shrink. Side drawers
+ * must slide as an opaque surface (transform only); the scrim keeps its
+ * own fade, and top/bottom sheets keep the fade.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkDrawer.scss"), "utf-8");
+
+// The side-drawer overrides sit after the generic blocks and before the
+// reduced-motion block (which also lists the active classes with
+// `transition: none`, so the full-file last occurrence would find that).
+const sideStart = src.indexOf("/* Side drawers slide as an OPAQUE surface.");
+const reduceStart = src.indexOf("@media (prefers-reduced-motion: reduce)");
+const side = src.slice(sideStart, reduceStart);
+
+/** Body of the LAST rule for a selector — the side overrides are declared
+ *  after the generic four-direction blocks. */
+function lastRule(selector: string, from = src): string {
+  const at = from.lastIndexOf(selector);
+  expect(at, `${selector} exists`).toBeGreaterThanOrEqual(0);
+  const open = from.indexOf("{", at);
+  const close = from.indexOf("}", open);
+  return from.slice(open + 1, close);
+}
+
+describe("HkDrawer side motion (opaque slide)", () => {
+  it("does not fade the left/right panel out", () => {
+    for (const sel of [
+      ".hk-drawer-left-enter-active",
+      ".hk-drawer-left-leave-active",
+      ".hk-drawer-right-enter-active",
+      ".hk-drawer-right-leave-active",
+    ]) {
+      const rule = lastRule(sel, side);
+      expect(rule, sel).toContain("transform");
+      expect(rule, sel).not.toContain("opacity");
+    }
+    for (const sel of [
+      ".hk-drawer-left-enter-from",
+      ".hk-drawer-left-leave-to",
+      ".hk-drawer-right-enter-from",
+      ".hk-drawer-right-leave-to",
+    ]) {
+      expect(lastRule(sel, side), sel).toContain("opacity: 1");
+    }
+  });
+
+  it("keeps the opaque side overrides after the generic fade rules (compiled order)", () => {
+    // The source slices above are anchored on a comment marker; this
+    // compiled assertion pins the cascade itself: the side override must
+    // come AFTER the generic four-direction block in the emitted CSS.
+    const fullCss = sass.compile(resolve(here, "HkDrawer.scss")).css;
+    // The reduced-motion block repeats the active selectors with
+    // `transition: none`; exclude it so the last occurrence is the side
+    // override under test.
+    const reduceAt = fullCss.lastIndexOf(
+      "@media (prefers-reduced-motion: reduce)",
+    );
+    const css = fullCss.slice(0, reduceAt > 0 ? reduceAt : fullCss.length);
+    const genericAt = css.indexOf(".hk-drawer-left-enter-active");
+    const overrideAt = css.lastIndexOf(".hk-drawer-left-enter-active");
+    expect(overrideAt).toBeGreaterThan(genericAt);
+    const overrideBody = css.slice(overrideAt, css.indexOf("}", overrideAt));
+    expect(overrideBody).toContain("transform");
+    expect(overrideBody).not.toContain("opacity");
+
+    const genericFromAt = css.indexOf(".hk-drawer-left-enter-from");
+    const sideFromAt = css.lastIndexOf(".hk-drawer-left-enter-from");
+    expect(sideFromAt).toBeGreaterThan(genericFromAt);
+    const sideFromBody = css.slice(sideFromAt, css.indexOf("}", sideFromAt));
+    expect(sideFromBody).toContain("opacity: 1");
+  });
+
+  it("keeps the sheet active opacity transition", () => {
+    // R3 mutation: deleting the generic active opacity transition kept the
+    // suite green. Guard that top/bottom sheets still animate opacity.
+    const generic = src.slice(0, sideStart);
+    expect(lastRule(".hk-drawer-top-enter-active", generic)).toContain("opacity");
+    expect(lastRule(".hk-drawer-bottom-leave-active", generic)).toContain(
+      "opacity",
+    );
+  });
+
+  it("keeps the off-screen side transforms", () => {
+    // The side override only resets opacity to 1; the generic from/to
+    // blocks must keep the translateX(±100%) that carries the panel in
+    // and out of the screen.
+    const left = src.slice(src.indexOf(".hk-drawer-left-enter-from"));
+    expect(left.slice(0, left.indexOf("}") + 1)).toContain("translateX(-100%)");
+    const right = src.slice(src.indexOf(".hk-drawer-right-enter-from"));
+    expect(right.slice(0, right.indexOf("}") + 1)).toContain("translateX(100%)");
+  });
+
+  it("keeps the fade for top/bottom sheets", () => {
+    expect(lastRule(".hk-drawer-top-enter-from")).toContain("opacity: 0");
+    expect(lastRule(".hk-drawer-bottom-enter-from")).toContain("opacity: 0");
+  });
+});

package/src/components/HkDrawer.scss

@@ -123,6 +123,30 @@
   transform: translateY(100%);
 }
 
+/* Side drawers slide as an OPAQUE surface. The panel used to share the
+ * scrim's fade (opacity: 0 in the enter/leave states); on a phone the
+ * drawer was still partly on screen when its right half went transparent
+ * — the page behind showed through and the right rounded corners
+ * dissolved, which reads as a width shrink (screen recording
+ * 2026-10-19). The scrim keeps its own fade; the panel only translates.
+ * Top/bottom sheets keep the fade above. */
+.hk-drawer-left-enter-active,
+.hk-drawer-right-enter-active {
+  transition: transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-drawer-left-leave-active,
+.hk-drawer-right-leave-active {
+  transition: transform var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
+}
+
+.hk-drawer-left-enter-from,
+.hk-drawer-left-leave-to,
+.hk-drawer-right-enter-from,
+.hk-drawer-right-leave-to {
+  opacity: 1;
+}
+
 .hk-drawer-header {
   display: flex;
   align-items: center;

package/src/components/HkIconButtonGroup.scss

@@ -104,7 +104,7 @@
         (var(--hk-icon-group-item-size) + var(--hk-icon-group-slider-gap))
     )
   );
-  transition: transform var(--duration, 0.18s) ease;
+  transition: transform var(--duration-short, 0.15s) ease;
   pointer-events: none;
 }
 

package/src/components/HkImageViewer.motion.test.tsx

@@ -0,0 +1,192 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkImageViewer from "./HkImageViewer";
+
+/**
+ * Initial-position motion contract (2026-10-20 lightbox fly-in report).
+ *
+ * The <img> mounts parked at translate(0, 0) scale(1) — natural size,
+ * anchored at the container's top-left — and only the load handler knows
+ * the centered fit layout. With `transition: transform` armed from the
+ * first paint, that reposition animated and the freshly-visible image
+ * flew in from the top-left corner to the center every time a lightbox
+ * opened. The glide must stay unarmed (no .is-animatable class) until
+ * the repositioned transform has COMMITTED — two frames, because rAF
+ * callbacks run before their frame's style recalc — and re-arm the same
+ * way after every src change.
+ */
+
+const mounts: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+  vi.unstubAllGlobals();
+});
+
+// Hand-pumped rAF queue: flushFrame() models one rendered frame, and a
+// callback scheduled during a flush (the nested second hop of the arming
+// chain) waits for the NEXT frame, exactly like the browser.
+const frames: FrameRequestCallback[] = [];
+
+function stubRaf(): void {
+  vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback): number => {
+    frames.push(cb);
+    return frames.length;
+  });
+  vi.stubGlobal("cancelAnimationFrame", () => {});
+}
+
+function flushFrame(): void {
+  for (const cb of frames.splice(0)) cb(performance.now());
+}
+
+interface Setup {
+  img: () => HTMLImageElement;
+  setSrc: (src: string) => void;
+  /** happy-dom never decodes images: hand the viewer a natural size and
+   *  fire the load event the layout waits on, flushed to the DOM. */
+  markLoaded: (w: number, h: number) => Promise<void>;
+}
+
+async function mountViewer(): Promise<Setup> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const src = ref("/a.png");
+  const Wrapper = defineComponent({
+    setup() {
+      return () => h(HkImageViewer, { src: src.value, alt: "pic" });
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+
+  const img = () => {
+    const el = container.querySelector<HTMLImageElement>(".hk-image-viewer-img");
+    if (!el) throw new Error("viewer img not rendered");
+    return el;
+  };
+
+  async function markLoaded(w: number, h: number) {
+    Object.defineProperty(img(), "naturalWidth", { configurable: true, value: w });
+    Object.defineProperty(img(), "naturalHeight", { configurable: true, value: h });
+    img().dispatchEvent(new Event("load"));
+    await nextTick();
+  }
+
+  return { img, setSrc: (v: string) => { src.value = v; }, markLoaded };
+}
+
+const armed = (img: HTMLImageElement) => img.classList.contains("is-animatable");
+
+describe("HkImageViewer initial-position motion", () => {
+  it("jumps straight to the centered layout on load, unarmed", async () => {
+    stubRaf();
+    const s = await mountViewer();
+
+    // Pre-load: invisible, parked at the top-left origin, glide disarmed.
+    expect(s.img().style.transform).toBe("translate(0px, 0px) scale(1)");
+    expect(armed(s.img())).toBe(false);
+
+    // Load: the transform jumps to the centered fit layout in the same
+    // tick (happy-dom containers measure 0x0, so an 800x600 image centers
+    // at translate(-400px, -300px)) and the image becomes visible — the
+    // arming class must NOT ride along, or this very move would glide.
+    await s.markLoaded(800, 600);
+    expect(s.img().style.transform).toBe("translate(-400px, -300px) scale(1)");
+    expect(s.img().classList.contains("is-loading")).toBe(false);
+    expect(armed(s.img())).toBe(false);
+
+    // Frame 1 commits the new transform; the class must still be absent
+    // here — a single-hop arming would land both in one style recalc and
+    // the move would animate after all.
+    flushFrame();
+    expect(armed(s.img())).toBe(false);
+
+    // Frame 2 arms the glide for wheel / pinch / minimap moves.
+    flushFrame();
+    await nextTick();
+    expect(armed(s.img())).toBe(true);
+  });
+
+  it("disarms on src change and re-arms only after the new reposition", async () => {
+    stubRaf();
+    const s = await mountViewer();
+    await s.markLoaded(800, 600);
+    flushFrame();
+    flushFrame();
+    await nextTick();
+    expect(armed(s.img())).toBe(true);
+
+    s.setSrc("/b.png");
+    await nextTick();
+    // Disarmed immediately, and any in-flight arming retracted: the
+    // swap's own reposition must land unarmed too.
+    expect(armed(s.img())).toBe(false);
+
+    await s.markLoaded(400, 300);
+    expect(s.img().style.transform).toBe("translate(-200px, -150px) scale(1)");
+    expect(armed(s.img())).toBe(false);
+    flushFrame();
+    expect(armed(s.img())).toBe(false);
+    flushFrame();
+    await nextTick();
+    expect(armed(s.img())).toBe(true);
+  });
+});
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkImageViewer.scss"), "utf-8");
+
+/** Full brace-matched body of the first rule following a marker. */
+function ruleBody(marker: string, from = scss): string {
+  const at = from.indexOf(marker);
+  expect(at, `${marker} exists`).toBeGreaterThanOrEqual(0);
+  const open = from.indexOf("{", at);
+  let depth = 0;
+  let close = open;
+  for (; close < from.length; close++) {
+    if (from[close] === "{") depth++;
+    else if (from[close] === "}") {
+      depth--;
+      if (depth === 0) break;
+    }
+  }
+  return from.slice(open + 1, close);
+}
+
+/** A rule's OWN declarations — nested blocks (the &-selectors) stripped,
+ *  so a transition hidden one level down cannot satisfy an assertion
+ *  aimed at the rule's direct declarations. */
+function ownDecls(marker: string, from = scss): string {
+  return ruleBody(marker, from).replace(/\{[^{}]*\}/g, "");
+}
+
+describe("HkImageViewer motion CSS contract", () => {
+  it("keeps the transform transition behind the is-animatable gate", () => {
+    // An unconditional transition on the base rule is exactly the fly-in
+    // regression: deleting the gate (or hoisting the transition back to
+    // the base rule) must fail here.
+    expect(ownDecls(".hk-image-viewer-img")).not.toContain("transition");
+    expect(ruleBody("&.is-animatable")).toContain("transition: transform 0.12s ease-out");
+  });
+
+  it("keeps reduced-motion outranking the armed transition", () => {
+    const reduceAt = scss.indexOf("@media (prefers-reduced-motion: reduce)");
+    expect(reduceAt).toBeGreaterThanOrEqual(0);
+    const block = scss.slice(reduceAt);
+    // Same (0,2,0) specificity as the armed rule, declared later in the
+    // file — a bare .hk-image-viewer-img override would lose the cascade
+    // tie to the gated rule above.
+    expect(ruleBody(".hk-image-viewer-img.is-animatable", block)).toContain("transition: none");
+  });
+});

package/src/components/HkImageViewer.scss

@@ -10,6 +10,11 @@
   user-select: none;
 }
 
+// The transform glide sits behind the .is-animatable gate the component
+// arms two frames after each load-driven reposition: an unconditional
+// transition also animated the very FIRST positioning, so the freshly
+// visible image flew in from its top-left natural-size origin to the
+// center every time a lightbox opened (2026-10-20 fly-in report).
 .hk-image-viewer-img {
   position: absolute;
   top: 0;
@@ -17,7 +22,10 @@
   max-width: none;
   max-height: none;
   will-change: transform;
-  transition: transform 0.12s ease-out;
+
+  &.is-animatable {
+    transition: transform 0.12s ease-out;
+  }
 
   &.is-loading {
     opacity: 0;
@@ -33,9 +41,11 @@
 }
 
 // Reduced motion: pan/zoom keeps working, the transform just stops
-// gliding (house pattern — HkExpansionPanel / HkAffixPicker).
+// gliding (house pattern — HkExpansionPanel / HkAffixPicker). The armed
+// gate selector is repeated at (0,2,0) so this still outranks the
+// .is-animatable rule above.
 @media (prefers-reduced-motion: reduce) {
-  .hk-image-viewer-img {
+  .hk-image-viewer-img.is-animatable {
     transition: none;
   }
 }

package/src/components/HkImageViewer.tsx

@@ -15,6 +15,10 @@ import "./HkImageViewer.scss";
  * double-click zoom (cursor-anchored), drag pans, and a two-finger touch
  * pinch zooms (midpoint-anchored, clamped to fit..MAX_ZOOM). The minimap
  * reuses the generic HMinimap (rendered with the image as its background).
+ *
+ * The transform glide (CSS `transition` under `.is-animatable`) stays
+ * DISARMED until each load-driven positioning has committed — see
+ * `armMotion`.
  */
 export default defineComponent({
   name: "HkImageViewer",
@@ -33,6 +37,10 @@ export default defineComponent({
     const imgW = ref(0);
     const imgH = ref(0);
     const loaded = ref(false);
+    /** Whether the `.is-animatable` transform glide is armed. False until
+     *  each load-driven reposition has committed (see armMotion), so the
+     *  initial fit/center placement never animates. */
+    const animatable = ref(false);
 
     const dragging = ref(false);
     const lastPt = ref({ x: 0, y: 0 });
@@ -125,6 +133,30 @@ export default defineComponent({
       center();
     }
 
+    /** Pending armMotion chain (outer frame, then inner); 0 when idle.
+     *  Tracked so a src change or unmount can retract the arming. */
+    let armFrame = 0;
+
+    /** Arm the transform glide two committed frames after a load-driven
+     *  reposition. The <img> mounts parked at translate(0, 0) scale(1) —
+     *  natural size, anchored top-left — and only the load handler knows
+     *  the centered fit layout; with the transition armed from the first
+     *  paint, that reposition animated and the freshly-visible image flew
+     *  in from the top-left corner (the lightbox fly-in report). ONE
+     *  frame is not enough: rAF callbacks run before that frame's style
+     *  recalc, so a single hop would commit the new transform and the
+     *  .is-animatable class in the same recalc and the move would still
+     *  transition. Frame 1 commits the transform unarmed; frame 2 arms
+     *  the glide for wheel / pinch / minimap moves. */
+    function armMotion() {
+      cancelAnimationFrame(armFrame);
+      armFrame = requestAnimationFrame(() => {
+        armFrame = requestAnimationFrame(() => {
+          animatable.value = true;
+        });
+      });
+    }
+
     function onImgLoad() {
       const img = imgRef.value;
       if (!img) return;
@@ -132,6 +164,7 @@ export default defineComponent({
       imgH.value = img.naturalHeight;
       loaded.value = true;
       resetView();
+      armMotion();
     }
 
     function onWheel(e: WheelEvent) {
@@ -297,6 +330,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       const c = containerRef.value;
+      cancelAnimationFrame(armFrame);
       if (!c) return;
       ro?.disconnect();
       ro = null;
@@ -319,6 +353,10 @@ export default defineComponent({
         fit.value = 1;
         panX.value = 0;
         panY.value = 0;
+        // Retract any in-flight arming: the swap's own reposition must
+        // land unarmed too, and the next load re-arms on its own.
+        cancelAnimationFrame(armFrame);
+        animatable.value = false;
       },
     );
 
@@ -337,7 +375,13 @@ export default defineComponent({
           ref={imgRef}
           src={props.src}
           alt={props.alt}
-          class={["hk-image-viewer-img", !loaded.value && "is-loading"].filter(Boolean).join(" ")}
+          class={[
+            "hk-image-viewer-img",
+            !loaded.value && "is-loading",
+            animatable.value && "is-animatable",
+          ]
+            .filter(Boolean)
+            .join(" ")}
           style={imgStyle.value}
           draggable={false}
           onLoad={onImgLoad}

package/src/components/HkMenu.scss

@@ -132,7 +132,7 @@
   padding: 0 var(--space-4, 4px);
   border-radius: var(--radius-full, 9999px);
   background: rgb(var(--color-error, 247 118 142));
-  color: #fff;
+  color: var(--hi-color-text-on-danger, #fff);
   font-size: var(--text-2xs, 10px);
   font-weight: 700;
   line-height: 1;

package/src/components/HkMessageBox.scss

@@ -20,7 +20,7 @@
 
   [data-tone="warning"] &,
   [data-tone="danger"] & {
-    color: rgb(var(--color-danger, 240 70 80));
+    color: rgb(var(--color-error, 247 118 142));
   }
 }
 

package/src/components/HkToast.scss

@@ -115,8 +115,10 @@
 }
 
 .hk-toast-loading-spinner {
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: #fff;
+  /* The spinner rides the toast's SOLID band, so its glyph is on-solid
+   * content: ride the on-solid slot (white by default, theme-following) */
+  border: 2px solid rgb(var(--color-on-solid-text, 255 255 255) / 30%);
+  border-top-color: rgb(var(--color-on-solid-text, 255 255 255));
   border-radius: 50%;
   animation: hk-toast-spin 0.7s linear infinite;
   box-sizing: border-box;

package/src/components/_menu-item.scss

@@ -168,14 +168,14 @@
   }
 
   &[data-danger] {
-    color: rgb(var(--color-danger, 240 70 80) / 90%);
+    color: rgb(var(--color-error, 247 118 142) / 90%);
 
     /* Same checked-row guard as the base hover above: a checked danger
      * row keeps its checked face instead of flashing the hover wash. */
     &:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked]) {
-      background: rgb(var(--color-danger, 240 70 80) / 10%);
-      border-color: rgb(var(--color-danger, 240 70 80) / 25%);
-      color: rgb(var(--color-danger, 240 70 80));
+      background: rgb(var(--color-error, 247 118 142) / 10%);
+      border-color: rgb(var(--color-error, 247 118 142) / 25%);
+      color: rgb(var(--color-error, 247 118 142));
     }
   }
 }

package/src/styles/admin-tokens.scss

@@ -1179,7 +1179,7 @@
 
 /* ── Arona app utility classes ── */
 .a-text-primary {
-  color: var(--color-text-primary);
+  color: var(--color-text);
 }
 
 .a-text-secondary {
@@ -1207,11 +1207,11 @@
 }
 
 .a-bg-secondary {
-  background: var(--color-bg-secondary, #18181b);
+  background: rgb(var(--color-background, 214 236 240));
 }
 
 .a-bg-tertiary {
-  background: var(--color-bg-tertiary, #27272a);
+  background: rgb(var(--color-surface, 240 244 248));
 }
 
 .a-latency-text {

package/src/styles/channelFallbacks.test.ts

@@ -33,18 +33,20 @@ import { describe, expect, it } from "vitest";
  * is still the regression this guard exists to catch.
  *
  * Slots with no seed are listed in UNSEEDED rather than skipped silently:
- * `--color-bg-secondary` / `--color-bg-tertiary` are retired spellings
- * (their `#18181b` / `#27272a` fallbacks always win) and `--color-danger` is
- * defined nowhere, so there is no seed value to compare against — recorded
- * debt, not a passing check.
+ * The retired spellings that used to live in UNSEEDED —
+ * `--color-bg-secondary` / `--color-bg-tertiary` / `--color-danger` — were
+ * paid on 2026-10-19 (their last usages re-pointed to the seeded channels;
+ * see ghostChannels.contract.test.ts, which now forbids them outright).
  */
 
 const stylesDir = resolve(dirname(fileURLToPath(import.meta.url)));
 const packageDir = resolve(stylesDir, "..", "..");
 const legacyDir = resolve(packageDir, "..", "theme", "styles");
 
-/** Slots this guard cannot hold to the seed, with the reason above. */
-const UNSEEDED = ["--color-bg-secondary", "--color-bg-tertiary", "--color-danger"];
+/** Slots this guard cannot hold to the seed. The 2026-10-19 re-pointing
+ *  paid the debt this list used to record; it stays as an empty-seeded
+ *  invariant — a NEW unseeded slot must be justified here, not smuggled in. */
+const UNSEEDED: string[] = [];
 
 function read(path: string): string {
   return readFileSync(path, "utf8");

package/src/styles/ghostChannels.contract.test.ts

@@ -0,0 +1,138 @@
+/**
+ * Retired color spellings — source contract (2026-10-19 color audit).
+ *
+ * The audit swept every var() reference across the shipped sheets and the
+ * components crate against the two real emitters (vue's tokensToCSSVars
+ * channels + the Rust css.rs alias emissions) and found a family of ghost
+ * spellings: names that LOOK like theme tokens, were never emitted by
+ * anything, and therefore always resolved to their (often one-mode-biased)
+ * literal fallbacks — or, with no fallback, silently killed the face
+ * (hover washes → transparent, glows → none). Each entry below was
+ * re-pointed to its canonical channel in the same change that added this
+ * guard; this file exists so none of them can quietly come back.
+ *
+ * Scope: shipped sheets and crate style strings only (tests, demos and
+ * comments are stripped). Not a general resolver — a name lands here only
+ * when it is permanently retired, never to be emitted; names that ARE
+ * emitted are guarded by their own contracts (see
+ * theme::css::interaction_alias_tests in the crate).
+ */
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const vueDir = resolve(here, "..", "..");
+const repoDir = resolve(vueDir, "..", "..");
+const crateSrc = join(repoDir, "packages", "components", "src");
+const themeStyles = join(repoDir, "packages", "theme", "styles");
+
+/** Permanently retired spellings — a var() reference to any of these is a
+ *  regression. (Names that are merely host-tunable knobs live elsewhere;
+ *  this list is only for spellings the emitters must never grow.) */
+const RETIRED = [
+  // wrong channel: the danger channel is --color-error (seed 247 118 142);
+  // --color-danger was emitted by nothing and its 240 70 80 fallback was a
+  // second, drifting palette decision (the 2026-09-16 bug class again).
+  "--color-danger",
+  // retired spellings: the audit's admin-surface backgrounds ride
+  // --color-background / --color-surface now.
+  "--color-bg-secondary",
+  "--color-bg-tertiary",
+  // the vue-channel namespace has no --color-text-primary slot (the primary
+  // ink channel is --color-text); the admin .a-text-primary utility rode
+  // this phantom spelling with no fallback and inherited its parent ink.
+  "--color-text-primary",
+  // the alias family spells the primary ink slot --hi-color-text-primary;
+  // plain --hi-color-text never existed, and its #333 fallback was unreadable
+  // on dark surfaces (the exact bug class of the 2026-10-18 breadcrumb fix).
+  "--hi-color-text",
+  // the crate emits --hi-border-light; the --hi-color-border-light spelling
+  // was a ghost whose #f3f4f6 fallback was light-biased.
+  "--hi-color-border-light",
+  // spelling typo that was never emitted anywhere; the canonical scale token
+  // is --text-sm.
+  "--hi-text-sm",
+  // invented family prefix nothing emits; the values were already inline
+  // (unwrapped to the same literals).
+  "--hikari-duration-fast",
+  "--hikari-duration-normal",
+  "--hikari-ease-smooth",
+];
+
+function stripComments(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/(^|[^:])\/\/[^\n]*/g, "$1");
+}
+
+/** Boundary-aware retired-spelling probe: `var(--name` NOT followed by
+ *  another name character, so --hi-color-text does not collide with the
+ *  legitimate --hi-color-text-primary/-secondary emissions. */
+function referencesRetired(source: string, name: string): boolean {
+  const re = new RegExp(`var\\(\\s*${name}(?![a-zA-Z-])`);
+  return re.test(source);
+}
+
+function* sheetsUnder(dir: string): Generator<string> {
+  for (const entry of readdirSync(dir)) {
+    const p = join(dir, entry);
+    if (statSync(p).isDirectory()) {
+      if (entry === "node_modules" || entry === "target" || entry.includes(".test.")) continue;
+      yield* sheetsUnder(p);
+    } else if (entry.endsWith(".scss") || entry.endsWith(".css")) {
+      yield p;
+    } else if (entry.endsWith(".rs") && !entry.endsWith(".test.rs")) {
+      yield p;
+    }
+  }
+}
+
+describe("retired color spellings", () => {
+  it("never appears in a shipped vue sheet", () => {
+    for (const file of sheetsUnder(join(vueDir, "src", "styles"))) {
+      const text = stripComments(readFileSync(file, "utf8"));
+      for (const name of RETIRED) {
+        expect(
+          referencesRetired(text, name),
+          `${file.replace(vueDir, "packages/vue")} references retired spelling ${name}`,
+        ).toBe(false);
+      }
+    }
+  });
+
+  it("never appears in a shipped component scss", () => {
+    for (const file of sheetsUnder(join(vueDir, "src", "components"))) {
+      const text = stripComments(readFileSync(file, "utf8"));
+      for (const name of RETIRED) {
+        expect(
+          referencesRetired(text, name),
+          `${file.replace(vueDir, "packages/vue")} references retired spelling ${name}`,
+        ).toBe(false);
+      }
+    }
+  });
+
+  it("never appears in the components crate styles or rs style strings", () => {
+    for (const root of [crateSrc, themeStyles]) {
+      for (const file of sheetsUnder(root)) {
+        const text = stripComments(readFileSync(file, "utf8"));
+        for (const name of RETIRED) {
+          expect(
+            referencesRetired(text, name),
+            `${file.replace(repoDir, "packages")} references retired spelling ${name}`,
+          ).toBe(false);
+        }
+      }
+    }
+  });
+
+  it("keeps its own denylist honest (positive control)", () => {
+    // The sweep above must be able to see a violation: feed it a synthetic
+    // line carrying a retired spelling and assert the detector matches.
+    const probe = "color: var(--color-danger, 240 70 80);";
+    expect(referencesRetired(probe, "--color-danger")).toBe(true);
+    // and the boundary holds: a legit longer name must NOT trip the probe
+    expect(referencesRetired("color: var(--color-dangerous);", "--color-danger")).toBe(false);
+  });
+});