@celestia-island/hikari 0.55.10 → 0.55.12

package/package.json

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

package/src/DemoApp.tsx

@@ -537,13 +537,14 @@ export default defineComponent({
           <h2>HEmptyState</h2>
           <div class="col">
             <HEmptyState
+              boxed
               title="No items"
               description="Nothing to show here yet."
               v-slots={{ action: () => <HButton size="sm">Create item</HButton> }}
             />
             <HEmptyState
               title="Nothing found"
-              description="Search returned no matches — try a different query."
+              description="Bare by default — the host (card/modal/panel) provides the surface; pass boxed when the empty state stands on the page alone."
               icon={PackageOpen}
             />
             <HEmptyState

package/src/components/HkAdminTablePage.tsx

@@ -53,7 +53,7 @@ export const HkAdminTablePage = defineComponent({
           ) : props.loading && !props.rows.length ? (
             <HSpinner center />
           ) : !props.rows.length ? (
-            <HEmptyState title={emptyTitle} description={props.emptyDescription} />
+            <HEmptyState boxed title={emptyTitle} description={props.emptyDescription} />
           ) : (
             <HCard padded={false}>
               <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>

package/src/components/HkEmptyState.scss

@@ -5,11 +5,17 @@
   justify-content: center;
   padding: var(--space-48, 3rem) var(--space-16, 1rem);
   text-align: center;
+  box-sizing: border-box;
+}
+
+/* The component's own surface. Opt-in (`boxed`): the host — card, modal,
+   panel — usually already provides a surface, and an always-on box turned
+   every in-card empty state into a nested placeholder layer. */
+.hk-empty-state--boxed {
   background: var(--hk-empty-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(var(--blur-sm, 8px));
   border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   border-radius: var(--radius-md, 0.5rem);
-  box-sizing: border-box;
 }
 
 .hk-empty-icon {

package/src/components/HkEmptyState.surface.contract.test.ts

@@ -0,0 +1,63 @@
+/**
+ * Source contract: the empty state's surface is OPT-IN (`boxed`). The
+ * base `.hk-empty-state` class must stay a bare layout block — the four
+ * surface declarations (background, blur, border, radius) live only in
+ * `.hk-empty-state--boxed`. Pinned because every in-card empty state in
+ * the family reads as a second nested placeholder layer the moment the
+ * surface creeps back into the base class (hikari #567); a class-name
+ * test alone cannot catch that, the compiled contract lives here.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const SURFACE_PROPERTIES = [
+  "background:",
+  "backdrop-filter:",
+  "border:",
+  "border-radius:",
+] as const;
+
+/** Extract one top-level rule block's body (`{ ... }`) by selector. */
+function ruleBody(css: string, selector: string): string {
+  const start = css.indexOf(`${selector} {`);
+  expect(start, `rule ${selector} present`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(open + 1, close);
+}
+
+describe("HkEmptyState surface contract", () => {
+  const css = readFileSync(join(here, "HkEmptyState.scss"), "utf-8");
+
+  it("keeps the base class free of surface declarations", () => {
+    const base = ruleBody(css, ".hk-empty-state");
+    for (const property of SURFACE_PROPERTIES) {
+      expect(base).not.toContain(property);
+    }
+  });
+
+  it("declares the full surface on the opt-in --boxed rule only", () => {
+    const boxed = ruleBody(css, ".hk-empty-state--boxed");
+    for (const property of SURFACE_PROPERTIES) {
+      expect(boxed).toContain(property);
+    }
+    // The surface is the ONLY rule allowed to paint: with the --boxed rule
+    // (and comments, whose prose may name the properties) removed, no
+    // declaration of a surface property may remain anywhere in the sheet.
+    // (The sr-only reset's `border: 0` and box-sizing's `border-box` are
+    // not surfaces — the assertions match the painted forms.)
+    const commentFree = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    const withoutBoxed = commentFree.replace(
+      /\.hk-empty-state--boxed\s*\{[^}]*\}/g,
+      "",
+    );
+    expect(withoutBoxed).not.toContain("background:");
+    expect(withoutBoxed).not.toContain("backdrop-filter:");
+    expect(withoutBoxed).not.toContain("border: 1px");
+    expect(withoutBoxed).not.toContain("border-radius:");
+  });
+});

package/src/components/HkEmptyState.test.tsx

@@ -135,4 +135,16 @@ describe("HkEmptyState", () => {
     expect(cls).toContain("hk-empty-state--fill");
     expect(cls).not.toContain("hk-empty-state--page");
   });
+
+  it("does not draw its own surface by default (the host provides it)", () => {
+    const c = mount(h(HkEmptyState, { title: "x" }));
+    const cls = (c.querySelector(".hk-empty-state") as HTMLElement).className;
+    expect(cls).not.toContain("hk-empty-state--boxed");
+  });
+
+  it("opt-in boxed restores the surface modifier", () => {
+    const c = mount(h(HkEmptyState, { title: "x", boxed: true }));
+    const cls = (c.querySelector(".hk-empty-state") as HTMLElement).className;
+    expect(cls).toContain("hk-empty-state--boxed");
+  });
 });

package/src/components/HkEmptyState.tsx

@@ -19,6 +19,12 @@ export default defineComponent({
       type: String as PropType<"page" | "fill">,
       default: "page",
     },
+    /** Draw the component's own surface (background, border, blur). Off by
+     *  default: most hosts (cards, modals, panels) already provide a
+     *  surface, and a boxed empty state inside them reads as a second
+     *  nested placeholder layer. Set this only when the empty state stands
+     *  directly on the page with no outer frame of its own. */
+    boxed: { type: Boolean, default: false },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
@@ -28,6 +34,7 @@ export default defineComponent({
           "hk-empty-state",
           props.fit === "fill" ? "hk-empty-state--fill" : "hk-empty-state--page",
           props.loading && "hk-empty-state--loading",
+          props.boxed && "hk-empty-state--boxed",
         ]}
         role={props.loading ? "status" : undefined}
         aria-busy={props.loading ? "true" : undefined}

package/src/components/HkTimeline.scss

@@ -417,4 +417,3 @@
     transition: none;
   }
 }
-}

package/src/components/_menu-item.scss

@@ -213,6 +213,6 @@
   height: 1px;
   margin: var(--hk-menu-item-pad-y, 6px) auto;
   width: calc(100% - 2 * var(--hk-menu-item-pad-x, 12px));
-  background: rgb(var(--color-border, 120 120 120) / 18%);
+  background: rgb(var(--color-border, 100 100 100) / 18%);
   border: none;
 }

package/src/styles/admin-tokens.scss

@@ -15,34 +15,34 @@
    * loads before this sheet. Only plana-specific tokens remain below. */
 
   /* ── Shared color aliases ─ */
-  --c-primary: rgb(var(--color-primary, 255 107 157));
-  --c-primary-light: rgb(var(--color-primary, 255 107 157) / 15%);
-  --c-primary-subtle: rgb(var(--color-primary, 255 107 157) / 8%);
-  --c-primary-overlay: rgb(var(--color-primary, 255 107 157) / 15%);
+  --c-primary: rgb(var(--color-primary, 122 162 247));
+  --c-primary-light: rgb(var(--color-primary, 122 162 247) / 15%);
+  --c-primary-subtle: rgb(var(--color-primary, 122 162 247) / 8%);
+  --c-primary-overlay: rgb(var(--color-primary, 122 162 247) / 15%);
 
   /* ── Hikari color bridge ─ */
-  --hi-color-primary: rgb(var(--color-primary, 255 107 157));
-  --hi-color-primary-rgb: var(--color-primary, 255 107 157);
-  --hi-color-surface: rgb(var(--color-surface, 255 255 255));
+  --hi-color-primary: rgb(var(--color-primary, 122 162 247));
+  --hi-color-primary-rgb: var(--color-primary, 122 162 247);
+  --hi-color-surface: rgb(var(--color-surface, 240 244 248));
   --hi-color-border: rgb(var(--color-border, 100 100 100) / 15%);
-  --hi-color-text-primary: rgb(var(--color-text, 0 0 0));
+  --hi-color-text-primary: rgb(var(--color-text, 30 30 30));
   --hi-color-text-on-primary: rgb(var(--color-on-primary, 255 255 255)); /* deprecated in-tree: prefer the on-solid slots */
   --color-on-solid: 255 255 255;
   --color-on-solid-text: 255 255 255;
   --color-on-solid-icon: 255 255 255;
   --hi-color-text-on-solid: rgb(var(--color-on-solid-text, 255 255 255));
   --hi-color-icon-on-solid: rgb(var(--color-on-solid-icon, 255 255 255));
-  --hi-color-text-secondary: color-mix(in srgb, rgb(var(--color-text, 0 0 0)) 60%, transparent);
-  --hi-color-muted: rgb(var(--color-muted, 100 100 100));
-  --hi-color-background: rgb(var(--color-background, 246 246 246));
-  --hi-color-bg-canvas: rgb(var(--color-background, 246 246 246));
-  --hi-color-bg-elevated: rgb(var(--color-surface, 255 255 255));
-  --hi-color-bg-subtle: rgb(var(--color-surface, 255 255 255) / 0.5);
-  --hi-secondary-bg: rgb(var(--color-surface, 255 255 255) / 0.5);
-  --hi-color-danger: rgb(var(--color-error, 200 50 50));
-  --hi-color-success: rgb(var(--color-success, 0 150 0));
-  --hi-color-warning: rgb(var(--color-warning, 200 150 0));
-  --hi-color-info: rgb(var(--color-info, 255 107 157));
+  --hi-color-text-secondary: color-mix(in srgb, rgb(var(--color-text, 30 30 30)) 60%, transparent);
+  --hi-color-muted: rgb(var(--color-muted, 108 108 108));
+  --hi-color-background: rgb(var(--color-background, 214 236 240));
+  --hi-color-bg-canvas: rgb(var(--color-background, 214 236 240));
+  --hi-color-bg-elevated: rgb(var(--color-surface, 240 244 248));
+  --hi-color-bg-subtle: rgb(var(--color-surface, 240 244 248) / 0.5);
+  --hi-secondary-bg: rgb(var(--color-surface, 240 244 248) / 0.5);
+  --hi-color-danger: rgb(var(--color-error, 247 118 142));
+  --hi-color-success: rgb(var(--color-success, 14 184 64));
+  --hi-color-warning: rgb(var(--color-warning, 238 214 119));
+  --hi-color-info: rgb(var(--color-info, 106 190 214));
   --hi-color-black-10: rgb(0 0 0 / 0.1);
   --hi-color-white-5: rgb(255 255 255 / 0.05);
   --hi-color-white-10: rgb(255 255 255 / 0.1);
@@ -58,8 +58,8 @@
    * by load order. (--hk-surface's only in-tree consumer — the retired
    * HTabs tail overlay — is gone; the token stays published for
    * external plana-ui readers.) */
-  --hk-surface: var(--color-surface, 255 255 255);
-  --hk-primary: var(--color-primary, 60 120 240);
+  --hk-surface: var(--color-surface, 240 244 248);
+  --hk-primary: var(--color-primary, 122 162 247);
 }
 
 /* Global reset (opt-in: import this explicitly) */
@@ -545,7 +545,7 @@
   height: 1px;
   margin: var(--hk-menu-item-pad-y, 6px) auto;
   width: calc(100% - 2 * var(--hk-menu-item-pad-x, 12px));
-  background: rgb(var(--color-border, 120 120 120) / 18%);
+  background: rgb(var(--color-border, 100 100 100) / 18%);
   border: none;
 }
 
@@ -754,7 +754,7 @@
      depend on the host having loaded the reset sheet (without it a 1px
      border pushes the box 2px past its max-width and off-centre). */
   box-sizing: border-box;
-  background: color-mix(in srgb, rgb(var(--color-surface, 255 255 255)) 70%, transparent);
+  background: color-mix(in srgb, rgb(var(--color-surface, 240 244 248)) 70%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text, 30 30 30)) 12%, transparent);
   border-radius: var(--hi-radius-sm, 4px);
   box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
@@ -879,8 +879,8 @@
   gap: var(--space-8, 0.5rem);
   font-size: var(--text-xs, 0.75rem);
   color: var(--hi-color-danger, #f85149);
-  background: color-mix(in srgb, var(--hi-color-danger, #ef4444) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-danger, #ef4444) 20%, transparent);
+  background: color-mix(in srgb, var(--hi-color-danger, rgb(247 118 142)) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-danger, rgb(247 118 142)) 20%, transparent);
   border-radius: 6px;
   padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
 }
@@ -967,8 +967,8 @@
 
 .s-auth-invite-banner.expired {
   color: var(--hi-color-danger, #f85149);
-  background: color-mix(in srgb, var(--hi-color-danger, #ef4444) 10%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-danger, #ef4444) 20%, transparent);
+  background: color-mix(in srgb, var(--hi-color-danger, rgb(247 118 142)) 10%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-danger, rgb(247 118 142)) 20%, transparent);
 }
 
 @media (max-width: 480px) {
@@ -992,7 +992,7 @@
 }
 
 .a-text-danger {
-  color: var(--hi-color-danger, #ef4444);
+  color: var(--hi-color-danger, rgb(247 118 142));
 }
 
 .a-icon-inline {
@@ -1000,11 +1000,11 @@
 }
 
 .a-icon-success {
-  color: var(--color-success, #22c55e);
+  color: var(--color-success, rgb(14 184 64));
 }
 
 .a-icon-warning {
-  color: var(--color-warning, #f59e0b);
+  color: var(--color-warning, rgb(238 214 119));
 }
 
 .a-bg-secondary {
@@ -1022,7 +1022,7 @@
 
 .a-error-banner {
   background: var(--hi-color-danger, rgba(239, 68, 68, 0.1));
-  border: 1px solid color-mix(in srgb, var(--hi-color-danger, #ef4444) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-danger, rgb(247 118 142)) 20%, transparent);
 }
 
 .a-tabular-nums {

package/src/styles/channelFallbacks.test.ts

@@ -0,0 +1,190 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+/**
+ * Channel-fallback drift guard (2026-09-16).
+ *
+ * The sheets carry two layers of colour: the STATIC SEED
+ * (`styles/theme/channels.scss`, a byte-identical copy of `src/tokens.scss`
+ * — see vendoredSync.test.ts) which "renders correctly even without
+ * initTheme()", and the alias fallbacks in `styles/admin-tokens.scss`,
+ * `styles/reset.scss`, `components/_menu-item.scss` plus the package-local
+ * ladders in `packages/theme/styles`, which apply when a host never themes
+ * — or, in the legacy ladders, as plain values.
+ *
+ * Failure class: a fallback is a SECOND COPY of a palette decision, and
+ * nothing kept it in step with the seed. Six of them still named
+ * synthwave84's pink (`rgb(255 107 157)`) long after the seed had moved to
+ * its own blue, so a consumer resolving the alias sheet without the seed got
+ * the retired default — a downstream panel's standalone error page shipped
+ * exactly that pink, the legacy focus ring glowed pink, and the button
+ * ladders still carried the pink/salmon trio. A fallback must resolve to
+ * what the seeded composition already declares, and no shipped sheet may
+ * carry the retired family at all.
+ *
+ * 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.
+ */
+
+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"];
+
+function read(path: string): string {
+  return readFileSync(path, "utf8");
+}
+
+/** `--color-SLOT: R G B;` declarations of the static seed. */
+function seedTriplets(source: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const match of source.matchAll(/--color-([a-z-]+):\s*(\d+ \d+ \d+);/g)) {
+    out[match[1]] = match[2];
+  }
+  return out;
+}
+
+/** Normalize a colour literal to `R G B`: bare/space/comma triplets,
+ *  `rgb()`/`rgba()` wrappers, an alpha term, or hex — every spelling the
+ *  sheets actually use. */
+function triplet(value: string): string | null {
+  const v = value
+    .trim()
+    .replace(/^(?:rgba?)\(/i, "")
+    .replace(/\)$/, "")
+    .replace(/\/[^/]*$/, "")
+    .trim();
+  const parts = v.split(/[\s,]+/).filter(Boolean);
+  if (parts.length >= 3 && parts.slice(0, 3).every((p) => /^\d+$/.test(p))) {
+    return parts.slice(0, 3).join(" ");
+  }
+  const hex = /^#([0-9a-f]{6})$/i.exec(v);
+  if (hex) {
+    const n = Number.parseInt(hex[1], 16);
+    return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;
+  }
+  return null;
+}
+
+/** Typed fallbacks, whitespace-tolerant: `var( --color-x, v )` must not slip
+ *  past the scan (a single occurrence of that spelling was proven to hide a
+ *  drifted value while every counter stayed green). */
+function fallbacks(source: string): { slot: string; value: string; line: number }[] {
+  const out: { slot: string; value: string; line: number }[] = [];
+  const re = /var\(\s*--color-([a-z-]+)\s*,\s*((?:[^()]|\([^()]*\))+?)\s*\)/g;
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(source)) !== null) {
+    out.push({
+      slot: match[1],
+      value: match[2],
+      line: source.slice(0, match.index).split("\n").length,
+    });
+  }
+  return out;
+}
+
+/** The retired pink/salmon family in EVERY spelling: flatten whitespace and
+ *  commas so `rgba(238, 162, 164, 0.8)` is caught next to `238 162 164` (the
+ *  space-only needles let the comma form through, proven by mutation). */
+function retiredHits(source: string): string[] {
+  const flat = source.toLowerCase().replace(/[\s,]+/g, "");
+  return [
+    // synthwave84's pink pair
+    "#ff6b9d",
+    "#d63384",
+    "255107157",
+    "21451132",
+    // the Gen-1 peony brand and its tints/salmon form
+    "#eea2a4",
+    "#f4c4c5",
+    "#d88b8e",
+    "238162164",
+    "244196197",
+    "216139142",
+    // NOT listed: the Gen-1 vermilion danger family (#FF4C00 / #FF7A33 /
+    // #CC3D00 / rgba(255, 76, 0, …) — 26 sites across the component sheets
+    // and base.scss's danger slot). That is a deliberate Gen-1 palette, not
+    // a leftover of the pink brand line, so moving it is a design decision
+    // of its own; recorded in the PR instead of smuggled into this guard.
+  ].filter((needle) => flat.includes(needle));
+}
+
+describe("channel fallbacks mirror the static seed", () => {
+  const seedSource = read(resolve(packageDir, "src", "tokens.scss"));
+  const seed = seedTriplets(seedSource);
+
+  /** Sheets that carry typed `var(--color-SLOT, …)` fallbacks. */
+  const FALLBACK_SHEETS: [string, string][] = [
+    ["src/tokens.scss", seedSource],
+    ["src/styles/theme/channels.scss", read(resolve(stylesDir, "theme", "channels.scss"))],
+    ["src/styles/admin-tokens.scss", read(resolve(stylesDir, "admin-tokens.scss"))],
+    ["src/styles/reset.scss", read(resolve(stylesDir, "reset.scss"))],
+    ["src/components/_menu-item.scss", read(resolve(packageDir, "src", "components", "_menu-item.scss"))],
+  ];
+
+  /** Every shipped sheet, for the retired-family sweep. */
+  const ALL_SHEETS: [string, string][] = [
+    ...FALLBACK_SHEETS,
+    ["src/styles/theme/scale.scss", read(resolve(stylesDir, "theme", "scale.scss"))],
+    ["src/styles/theme/scrollbar.scss", read(resolve(stylesDir, "theme", "scrollbar.scss"))],
+    ...[
+      "_tokens.scss",
+      "base.scss",
+      "foundation.scss",
+      "themes.scss",
+      "variables.scss",
+      "_layout.scss",
+      "_glass.scss",
+      "mixins.scss",
+      "_scrollbar.scss",
+    ].map((name) => [`packages/theme/styles/${name}`, read(resolve(legacyDir, name))] as [string, string]),
+  ];
+
+  it("finds both the seed and the fallbacks (positive control)", () => {
+    // An empty or mis-pathed read would make every check below pass
+    // vacuously, so each scan must prove it saw real content.
+    expect(Object.keys(seed).length).toBeGreaterThanOrEqual(15);
+    const typed = FALLBACK_SHEETS.flatMap(([, source]) => fallbacks(source));
+    expect(typed.length).toBeGreaterThanOrEqual(20);
+    for (const [label, source] of ALL_SHEETS) {
+      expect(source.length, `${label} read empty`).toBeGreaterThan(200);
+    }
+  });
+
+  it("declares every typed fallback with the seed value for its slot", () => {
+    const checked: string[] = [];
+    for (const [label, source] of FALLBACK_SHEETS) {
+      for (const row of fallbacks(source)) {
+        const slot = `--color-${row.slot}`;
+        if (UNSEEDED.includes(slot)) continue;
+        expect(seed[row.slot], `${label}:${row.line} ${slot} has no seed slot`).toBeDefined();
+        checked.push(`${label}:${row.line}`);
+        expect(
+          triplet(row.value),
+          `${label}:${row.line} var(${slot}, ${row.value})`,
+        ).toBe(seed[row.slot]);
+      }
+    }
+    // The scan must actually reach the sheets (guards against a regex that
+    // silently matches nothing after an edit).
+    expect(checked.length).toBeGreaterThanOrEqual(25);
+  });
+
+  it("keeps the retired synthwave pink family out of every shipped sheet", () => {
+    for (const [label, source] of ALL_SHEETS) {
+      expect(retiredHits(source), `${label} reintroduced a retired colour`).toEqual([]);
+    }
+    // Positive control: the detector must fire on the known-bad spellings.
+    expect(retiredHits("--x: rgba(238, 162, 164, 0.8);")).toContain("238162164");
+    expect(retiredHits("--x: #F4C4C5;")).toContain("#f4c4c5");
+    expect(retiredHits("--x: rgb(255 107 157 / 12%);")).toContain("255107157");
+  });
+});

package/src/styles/reset.scss

@@ -20,7 +20,7 @@
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
-  border-color: rgb(var(--color-border, 120 120 120) / 40%);
+  border-color: rgb(var(--color-border, 100 100 100) / 40%);
 }
 
 html {

package/src/styles/sheetCompile.test.ts

@@ -0,0 +1,74 @@
+import { readdirSync, statSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import * as sass from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Every shipped sheet must compile (2026-09-17).
+ *
+ * Regression: hikari #564 ("Highlight the timeline step on hover instead of
+ * scaling it") left a stray `}` at the end of `HkTimeline.scss`. The sheet
+ * was uncompilable from the moment it merged and nothing noticed, because
+ *   · the entry sheet (`styles/index.scss`) does not `@use` component sheets,
+ *   · component tests import the TSX, never the SCSS,
+ *   · and the one contract that DOES compile sheets
+ *     (`components/textClip.contract.test.ts`) only compiles the ones it
+ *     reviews — HkTimeline is not among them.
+ * So the first thing to compile it would have been a downstream app.
+ *
+ * This guard compiles every `.scss` under `src/` with the same sass a
+ * consumer uses (144 sheets, ~1s), which is cheap enough to run always.
+ * A failure names the file and sass's own message.
+ */
+
+const srcDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+
+function sheetsIn(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir)) {
+    if (entry === "node_modules") continue;
+    const path = join(dir, entry);
+    if (statSync(path).isDirectory()) out.push(...sheetsIn(path));
+    else if (entry.endsWith(".scss")) out.push(path);
+  }
+  return out;
+}
+
+function compile(file: string): string | null {
+  try {
+    sass.compile(file, {
+      loadPaths: [srcDir, join(srcDir, "styles"), join(srcDir, "styles", "theme")],
+      // `@import` and the JS-API bridge are deprecated, not errors: the
+      // legacy Gen-1 sheets still use them and that is not this guard's job.
+      silenceDeprecations: ["import", "global-builtin", "legacy-js-api"],
+    });
+    return null;
+  } catch (error) {
+    return String((error as Error).message).split("\n")[0];
+  }
+}
+
+describe("every shipped stylesheet compiles", () => {
+  const sheets = sheetsIn(srcDir);
+
+  it("walks the whole source tree (positive control)", () => {
+    // A mis-rooted walk would make the sweep below pass vacuously.
+    expect(sheets.length, "sheets found under src/").toBeGreaterThan(100);
+  });
+
+  it("reports failures (instrument self-test)", () => {
+    expect(compile(resolve(srcDir, "styles", "index.scss")), "the entry sheet compiles").toBeNull();
+    // The instrument must be able to see the defect class it guards: sass
+    // rejects an unbalanced block, and this is exactly the error #564 shipped.
+    expect(() => sass.compileString(".hk-probe { color: red;\n}\n}")).toThrow(/unmatched/i);
+  });
+
+  it("compiles every sheet, naming the ones that fail", () => {
+    const failures = sheets
+      .map((file) => ({ file: relative(srcDir, file), error: compile(file) }))
+      .filter((row): row is { file: string; error: string } => row.error !== null);
+    expect(failures, failures.map((f) => `${f.file}: ${f.error}`).join("\n")).toEqual([]);
+  });
+});

package/src/styles/theme/channels.scss

@@ -69,8 +69,8 @@
   --hi-bg-surface-dark: rgb(var(--color-muted, 108 108 108) / 12%);
   --hi-color-primary-dark: color-mix(in srgb, rgb(var(--color-primary, 122 162 247)) 82%, #000);
   --hi-color-secondary-dark: color-mix(in srgb, rgb(var(--color-secondary, 81 154 115)) 82%, #000);
-  --hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 200 50 50)) 82%, #000);
-  --hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 0 150 0)) 82%, #000);
+  --hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 247 118 142)) 82%, #000);
+  --hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 14 184 64)) 82%, #000);
   --hi-color-text-on-secondary: rgb(var(--color-on-solid, 255 255 255));
   --hi-color-text-on-danger: rgb(var(--color-on-solid, 255 255 255));
   --hi-color-text-on-success: rgb(var(--color-on-solid, 255 255 255));

package/src/tokens.scss

@@ -62,8 +62,8 @@
   --hi-bg-surface-dark: rgb(var(--color-muted, 108 108 108) / 12%);
   --hi-color-primary-dark: color-mix(in srgb, rgb(var(--color-primary, 122 162 247)) 82%, #000);
   --hi-color-secondary-dark: color-mix(in srgb, rgb(var(--color-secondary, 81 154 115)) 82%, #000);
-  --hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 200 50 50)) 82%, #000);
-  --hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 0 150 0)) 82%, #000);
+  --hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 247 118 142)) 82%, #000);
+  --hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 14 184 64)) 82%, #000);
   --hi-color-text-on-secondary: rgb(var(--color-on-solid, 255 255 255));
   --hi-color-text-on-danger: rgb(var(--color-on-solid, 255 255 255));
   --hi-color-text-on-success: rgb(var(--color-on-solid, 255 255 255));