@celestia-island/hikari 0.55.10 → 0.55.11

package/package.json

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

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));