@celestia-island/hikari 0.55.9 → 0.55.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.9",
+  "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/HkCheckbox.scss

@@ -5,6 +5,11 @@
 .hk-checkbox {
   display: inline-flex;
   align-items: center;
+  /* When the control sits INLINE among text (not in a host flex row), the
+   * default `vertical-align: baseline` parks the inline-flex's bottom edge
+   * on the text baseline and rides the box ~4px above the text's visual
+   * center. `middle` is the house parity value (HkSwitch/HkRadio). */
+  vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
@@ -28,9 +33,34 @@
   background: var(--hi-color-surface, rgba(240,244,248,0.95));
   transition:
     border-color var(--duration-normal, 0.3s) ease,
-    background var(--duration-normal, 0.3s) ease;
+    background var(--duration-normal, 0.3s) ease,
+    scale var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   flex-shrink: 0;
   position: relative;
+
+  /* Box scales with the size modifier — it previously ignored `size`
+   * entirely (an lg row carried an md box, floating 2px high next to
+   * 16px text). sm/md/lg now match HkRadio's box scale. */
+  .hk-checkbox-sm & {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .hk-checkbox-lg & {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+}
+
+/* Press feedback (house parity: HkSwitch thumb squish). */
+.hk-checkbox:not([data-disabled]):active .hk-checkbox-box {
+  scale: 0.9;
+}
+
+/* Hover parity with HkRadio: an unchecked box picks up the primary edge
+   under the pointer. Checked/indeterminate keep their solid fill. */
+.hk-checkbox:not([data-disabled]):hover .hk-checkbox-box:not([data-checked]):not([data-indeterminate]) {
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-checkbox[data-type="radio"] .hk-checkbox-box {
@@ -74,6 +104,16 @@
   color: rgb(var(--color-on-solid-icon, 255 255 255));
   width: 14px;
   height: 14px;
+
+  .hk-checkbox-sm & {
+    width: 11px;
+    height: 11px;
+  }
+
+  .hk-checkbox-lg & {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .hk-checkbox-dot {
@@ -82,6 +122,16 @@
   border-radius: 50%;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: var(--hi-z-above, 1);
+
+  .hk-checkbox-sm & {
+    width: 5px;
+    height: 5px;
+  }
+
+  .hk-checkbox-lg & {
+    width: 8px;
+    height: 8px;
+  }
 }
 
 .hk-checkbox-indeterminate {
@@ -90,6 +140,14 @@
   border-radius: 1px;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: var(--hi-z-above, 1);
+
+  .hk-checkbox-sm & {
+    width: 6px;
+  }
+
+  .hk-checkbox-lg & {
+    width: 10px;
+  }
 }
 
 /* ---------- label ---------- */
@@ -97,3 +155,11 @@
 .hk-checkbox[data-animating] .hk-checkbox-box {
   will-change: border-color, background;
 }
+
+/* Reduced motion: the press squish snaps instead of tweening (house
+   pattern: HkSwitch.scss / HkSlider.scss). */
+@media (prefers-reduced-motion: reduce) {
+  .hk-checkbox-box {
+    transition: none;
+  }
+}

package/src/components/HkRadio.scss

@@ -23,6 +23,10 @@
 .hk-radio {
   display: inline-flex;
   align-items: center;
+  /* House parity (HkCheckbox/HkSwitch): keeps the box on the text's
+   * visual midline when a radio row is lifted out of the group into an
+   * inline text context. No-op inside the flex group. */
+  vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
@@ -44,7 +48,8 @@
   background: var(--hi-color-surface);
   transition:
     border-color var(--duration-normal, 0.3s) ease,
-    background var(--duration-normal, 0.3s) ease;
+    background var(--duration-normal, 0.3s) ease,
+    scale var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   flex-shrink: 0;
   position: relative;
 
@@ -73,6 +78,11 @@
   border-color: var(--hi-color-primary);
 }
 
+/* Press feedback (house parity: HkCheckbox box / HkSwitch thumb). */
+.hk-radio:not([data-disabled]):active .hk-radio-box {
+  scale: 0.9;
+}
+
 /* --- Hidden input --- */
 
 .hk-radio-input {
@@ -111,3 +121,11 @@
     height: 5px;
   }
 }
+
+/* Reduced motion: the press squish snaps instead of tweening (house
+   pattern: HkSwitch.scss / HkSlider.scss). */
+@media (prefers-reduced-motion: reduce) {
+  .hk-radio-box {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,283 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for the three selection controls
+ * (HkCheckbox / HkRadio / HkSwitch).
+ *
+ * Vitest stubs CSS, so the behavioral suites can never catch a geometry or
+ * alignment fact drifting. This guard compiles the three sheets and pins
+ * the facts the 2026-09 alignment/size fix introduced:
+ *
+ *   1. inline-in-text alignment: every control root declares
+ *      `vertical-align: middle` (baseline parked the inline-flex's bottom
+ *      edge on the text baseline, riding the box ~4–7px above the text's
+ *      visual center — measured in headless Chrome).
+ *   2. checkbox box scale: the box follows the sm/md/lg size modifiers
+ *      (it previously ignored `size` entirely and rendered an md box in
+ *      lg rows), matching HkRadio's box scale.
+ *   3. switch geometry: the track/thumb grew (md 44×24 track, 20px thumb)
+ *      and the checked travel stays exactly `track − 2×inset − thumb` per
+ *      size, so the thumb can never detach from either pill edge.
+ *   4. interaction faces: hover/press feedback exists on all three
+ *      (checkbox hover was missing entirely; radio hover had no press
+ *      twin) and the off track is a filled neutral, not a bare surface.
+ *
+ * The rules below are parsed out of the COMPILED css (not the .scss
+ * source) so a rule that fails to compile can never count as present.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+interface Rule {
+  selector: string;
+  body: string;
+}
+
+/** Flat-rule splitter for the expanded output of these leaf sheets. */
+function rules(css: string): Rule[] {
+  // Expanded output keeps loud comments, and sheets containing non-ASCII
+  // text get a braille-less `@charset "UTF-8";` statement — both would glue
+  // onto the next selector and shift every rule pair, so strip them first.
+  const bare = css
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/@charset[^;]*;/g, "")
+    .trim();
+  const out: Rule[] = [];
+  for (const match of bare.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const selector = match[1]!.trim();
+    // Keep control rules; the rtl mirrors lead with an attribute selector.
+    if (!selector.startsWith(".hk-") && !selector.startsWith("[dir=")) continue;
+    out.push({ selector, body: match[2]! });
+  }
+  return out;
+}
+
+function find(all: Rule[], selector: string): Rule {
+  const hit = all.find((r) => r.selector === selector);
+  expect(hit, `compiled rule for \`${selector}\``).toBeDefined();
+  return hit!;
+}
+
+/**
+ * The R2 adversarial round smuggled a `.hk-switch-md &` override past the
+ * per-size assertions (the render picked it up, the tests kept reading the
+ * base rule — a 0,2,0 selector beats the 0,1,0 base at runtime). Any
+ * geometry face pinned here must therefore pin its WHOLE selector set:
+ * a reader can only trust the values below when no unlisted, more
+ * specific rule also touches the class.
+ */
+function expectSelectorSet(all: Rule[], classSuffix: string, expected: string[]) {
+  const present = all
+    .map((r) => r.selector)
+    .filter((s) => {
+      const last = s.split(/\s+>/).pop()!.trim().split(" ").pop()!;
+      return last === classSuffix && !s.startsWith("[dir=");
+    })
+    .sort();
+  expect(present, `selector set touching \`${classSuffix}\``).toEqual(expected.sort());
+}
+
+/** `2.25rem` / `14px` / `-1rem` → signed px number (1rem = 16px; bare numbers = rem). */
+function toPx(decl: string): number {
+  const m = decl.match(/(-?[\d.]+)(rem|px)?$/);
+  expect(m, `length in "${decl}"`).not.toBeNull();
+  const value = parseFloat(m![1]!);
+  return m![2] === "px" ? value : value * 16;
+}
+
+function valueOf(body: string, prop: string): string {
+  const m = body.match(new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`));
+  expect(m, `declaration \`${prop}\``).not.toBeNull();
+  return m![1]!.trim();
+}
+
+const checkbox = rules(compile(resolve(componentDir, "HkCheckbox.scss"), { style: "expanded" }).css);
+const radio = rules(compile(resolve(componentDir, "HkRadio.scss"), { style: "expanded" }).css);
+const sw = rules(compile(resolve(componentDir, "HkSwitch.scss"), { style: "expanded" }).css);
+
+describe("selection controls inline alignment", () => {
+  it.each([
+    ["HkCheckbox", checkbox, ".hk-checkbox"],
+    ["HkRadio", radio, ".hk-radio"],
+    ["HkSwitch", sw, ".hk-switch"],
+  ])("%s root declares vertical-align: middle", (_name, all, selector) => {
+    expect(valueOf(find(all, selector).body, "vertical-align")).toBe("middle");
+  });
+});
+
+describe("HkCheckbox box scale follows the size modifier", () => {
+  const cases: Array<[string, string, number]> = [
+    ["base (md)", ".hk-checkbox-box", 18],
+    ["sm", ".hk-checkbox-sm .hk-checkbox-box", 14],
+    ["lg", ".hk-checkbox-lg .hk-checkbox-box", 22],
+  ];
+  it.each(cases)("%s box is %ipx", (_name, selector, px) => {
+    const body = find(checkbox, selector).body;
+    expect(toPx(valueOf(body, "width"))).toBe(px);
+    expect(toPx(valueOf(body, "height"))).toBe(px);
+  });
+
+  it.each([
+    ["sm", ".hk-checkbox-sm .hk-checkbox-icon", 11],
+    ["md base", ".hk-checkbox-icon", 14],
+    ["lg", ".hk-checkbox-lg .hk-checkbox-icon", 16],
+  ])("%s check icon is %ipx", (_name, selector, px) => {
+    const body = find(checkbox, selector).body;
+    expect(toPx(valueOf(body, "width"))).toBe(px);
+  });
+
+  it("hover paints the primary edge on an unchecked box (HkRadio parity)", () => {
+    const body = find(
+      checkbox,
+      ".hk-checkbox:not([data-disabled]):hover .hk-checkbox-box:not([data-checked]):not([data-indeterminate])",
+    ).body;
+    expect(valueOf(body, "border-color")).toContain("--hi-color-primary");
+  });
+
+  it("press squish on the box via the independent scale property", () => {
+    const body = find(checkbox, ".hk-checkbox:not([data-disabled]):active .hk-checkbox-box").body;
+    expect(valueOf(body, "scale")).toBe("0.9");
+    // The squish only composes cleanly if the box transitions `scale`.
+    expect(valueOf(find(checkbox, ".hk-checkbox-box").body, "transition")).toContain("scale");
+  });
+});
+
+describe("HkRadio interaction parity", () => {
+  it("press squish on the box via the independent scale property", () => {
+    const body = find(radio, ".hk-radio:not([data-disabled]):active .hk-radio-box").body;
+    expect(valueOf(body, "scale")).toBe("0.9");
+    expect(valueOf(find(radio, ".hk-radio-box").body, "transition")).toContain("scale");
+  });
+});
+
+describe("HkSwitch geometry", () => {
+  const geometry: Array<[string, number, number, number]> = [
+    // [size, track width, track height, thumb width]
+    ["sm", 36, 20, 16],
+    ["md", 44, 24, 20],
+    ["lg", 52, 28, 24],
+  ];
+
+  it.each(geometry)("%s track is %ipx wide", (size, w, h) => {
+    const body = find(sw, `.hk-switch-${size} .hk-switch-track`).body;
+    expect(toPx(valueOf(body, "width"))).toBe(w);
+    expect(toPx(valueOf(body, "height"))).toBe(h);
+  });
+
+  it.each(geometry)("%s thumb is %ipx", (size, _w, _h, thumb) => {
+    const body = find(sw, `.hk-switch-${size} .hk-switch-thumb`).body;
+    expect(toPx(valueOf(body, "width"))).toBe(thumb);
+    expect(toPx(valueOf(body, "height"))).toBe(thumb);
+  });
+
+  it.each(geometry)(
+    "%s checked travel keeps the thumb inside both pill edges",
+    (size, trackW, _trackH, thumb) => {
+      const body = find(sw, `.hk-switch-${size}[data-checked] .hk-switch-thumb`).body;
+      const inset = toPx(valueOf(find(sw, ".hk-switch-thumb").body, "inset-inline-start"));
+      const border = toPx(valueOf(find(sw, ".hk-switch-track").body, "border").split(" ")[0]!);
+      const travel = toPx(valueOf(body, "transform").replace("translateX(", "").replace(")", ""));
+      // travel = track − 2×(border + inset) − thumb: inset-inline-start
+      // resolves against the padding box, so the 1px border counts on BOTH
+      // sides — the checked gap then equals the resting gap (3px) exactly.
+      expect(travel).toBe(trackW - 2 * (border + inset) - thumb);
+    },
+  );
+
+  it.each(geometry)(
+    "%s off/on content anchors clear of the covering thumb",
+    (size, trackW, _trackH, thumb) => {
+      // md carries the base declaration; sm/lg get size overrides.
+      const scoped = (base: string) =>
+        find(sw, `.hk-switch-${size} ${base}`.replace(".hk-switch-md ", "")).body;
+      const offBody = scoped(".hk-switch-content-off");
+      const onBody = scoped(".hk-switch-content-on");
+      // off face: starts after the resting thumb (2px inset + thumb + 2px gap).
+      expect(toPx(valueOf(offBody, "inset-inline-start"))).toBe(2 + thumb + 2);
+      // on face: ends before the checked thumb — the checked thumb starts
+      // `2 + travel` from the padding-box start, i.e. (track−2−travel) from
+      // the end, plus the 2px gap.
+      const travel = toPx(
+        valueOf(find(sw, `.hk-switch-${size}[data-checked] .hk-switch-thumb`).body, "transform")
+          .replace("translateX(", "").replace(")", ""),
+      );
+      expect(toPx(valueOf(onBody, "inset-inline-end"))).toBe(trackW - 2 - travel);
+    },
+  );
+
+  it("pins the whole selector set of each caption face (R2 M7 blind spot)", () => {
+    // A more specific override (e.g. `.hk-switch-md .hk-switch-content-off`)
+    // wins at runtime but is invisible to the per-size assertions above,
+    // which read the base rule — the ONLY sanctioned scoped faces are the
+    // sm/lg ones; anything else must fail here first.
+    for (const face of [".hk-switch-content-off", ".hk-switch-content-on"]) {
+      expectSelectorSet(sw, face, [
+        face,
+        `.hk-switch-sm ${face}`,
+        `.hk-switch-lg ${face}`,
+      ]);
+    }
+  });
+
+  it("resting off track is a filled neutral, not a bare surface", () => {
+    const body = find(sw, ".hk-switch-track").body;
+    expect(valueOf(body, "background")).toContain("color-mix");
+    expect(valueOf(body, "border")).toContain("color-mix");
+  });
+
+  it("hover recolors the off track and brightens the checked track", () => {
+    expect(
+      valueOf(
+        find(sw, ".hk-switch:not([data-disabled]):not([data-checked]):hover .hk-switch-track").body,
+        "background",
+      ),
+    ).toContain("color-mix");
+    expect(
+      valueOf(find(sw, ".hk-switch:not([data-disabled])[data-checked]:hover .hk-switch-track").body, "filter"),
+    ).toContain("brightness");
+  });
+
+  it("press squish on the thumb via the independent scale property", () => {
+    const body = find(sw, ".hk-switch:not([data-disabled]):active .hk-switch-thumb").body;
+    expect(valueOf(body, "scale")).toBe("0.88");
+    expect(valueOf(find(sw, ".hk-switch-thumb").body, "transition")).toContain("scale");
+  });
+
+  it("rtl mirrors the checked slide for every size", () => {
+    for (const size of ["sm", "md", "lg"]) {
+      const ltr = toPx(
+        valueOf(find(sw, `.hk-switch-${size}[data-checked] .hk-switch-thumb`).body, "transform").replace(
+          "translateX(",
+          "",
+        ).replace(")", ""),
+      );
+      const rtl = find(sw, `[dir=rtl] .hk-switch-${size}[data-checked] .hk-switch-thumb`).body;
+      expect(toPx(valueOf(rtl, "transform").replace("translateX(", "").replace(")", ""))).toBe(-ltr);
+    }
+  });
+
+  it.each([
+    ["HkCheckbox", "HkCheckbox", ".hk-checkbox-box"],
+    ["HkRadio", "HkRadio", ".hk-radio-box"],
+    ["HkSwitch", "HkSwitch", ".hk-switch-thumb"],
+  ])("%s press feedback is disabled under prefers-reduced-motion", (_name, sheet, selector) => {
+    // Parse ONLY the reduced-motion block (the flat splitter would read the
+    // base rule and make this pass vacuously).
+    const css = compile(resolve(componentDir, `${sheet}.scss`), { style: "expanded" }).css;
+    const marker = css.match(/@media[^{]*prefers-reduced-motion[^{]*{/);
+    expect(marker, `reduced-motion block in ${sheet}.scss`).not.toBeNull();
+    const blockRules = rules(css.slice(marker!.index! + marker![0]!.length));
+    // The switch block groups `.hk-switch-thumb, .hk-switch-content` in one
+    // rule — compare per selector in the list, whitespace-normalized.
+    const hit = blockRules.find((r) =>
+      r.selector.replace(/\s+/g, " ").split(", ").includes(selector),
+    );
+    expect(hit, `${selector} inside the reduced-motion block`).toBeDefined();
+    expect(valueOf(hit!.body, "transition")).toBe("none");
+  });
+});

package/src/components/HkSwitch.scss

@@ -1,6 +1,11 @@
 .hk-switch {
   display: inline-flex;
   align-items: center;
+  /* When the switch sits INLINE among text (not in a host flex row), the
+   * default `vertical-align: baseline` parks the inline-flex's bottom edge
+   * on the text baseline and rides the track ~5px above the text's visual
+   * center. `middle` is the house parity value (HkCheckbox/HkRadio). */
+  vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
@@ -24,8 +29,8 @@
    the label; house pattern: HkButton double ring). */
 .hk-switch-input:focus-visible ~ .hk-switch-track {
   box-shadow:
-    0 0 0 2px rgb(var(--color-surface)),
-    0 0 0 4px rgb(var(--color-primary));
+    0 0 0 2px var(--hi-color-surface, rgba(240, 244, 248, 0.95)),
+    0 0 0 4px var(--hi-color-primary, #7aa2f7);
 }
 
 /* --- Track --- */
@@ -35,27 +40,32 @@
   display: flex;
   align-items: center;
   border-radius: 9999px;
-  border: 1px solid var(--hi-color-border);
-  background: var(--hi-color-surface);
+  /* Resting state is a softly FILLED neutral track (iOS-style) rather
+   * than a bare surface sliver: the off state must read as a control
+   * even on a same-colored card. The border rides one step ahead of the
+   * fill so the pill keeps its edge on tinted host surfaces too. */
+  border: 1px solid color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 26%, transparent);
+  background: color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 14%, transparent);
   transition:
-    background-color 0.2s ease,
-    border-color 0.2s ease;
+    background-color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    border-color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    filter var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   flex-shrink: 0;
   overflow: hidden;
 
   .hk-switch-sm & {
-    width: 2rem;
-    height: 1.125rem;
+    width: 2.25rem;
+    height: 1.25rem;
   }
 
   .hk-switch-md & {
-    width: 2.5rem;
-    height: 1.375rem;
+    width: 2.75rem;
+    height: 1.5rem;
   }
 
   .hk-switch-lg & {
-    width: 3rem;
-    height: 1.625rem;
+    width: 3.25rem;
+    height: 1.75rem;
   }
 
   .hk-switch-primary[data-checked] & {
@@ -79,6 +89,19 @@
   }
 }
 
+/* Hover / press feedback (house parity: HkRadio box hover). The checked
+   track brightens a touch instead of recoloring, so the four state colors
+   keep their exact resting identity. Note the state markers live on the
+   ROOT label, not the track, so the :not() rides there too. */
+.hk-switch:not([data-disabled]):not([data-checked]):hover .hk-switch-track {
+  background: color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 22%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 34%, transparent);
+}
+
+.hk-switch:not([data-disabled])[data-checked]:hover .hk-switch-track {
+  filter: brightness(1.07) saturate(1.05);
+}
+
 /* --- Thumb --- */
 
 .hk-switch-thumb {
@@ -91,31 +114,46 @@
      the luminance-computed on-primary that went near-black on bright
      primaries (synthwave pink) while HkButton labels stayed white. */
   background: rgb(var(--color-on-solid-icon, 255 255 255));
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.2),
+    0 2px 8px rgba(0, 0, 0, 0.12);
+  transition:
+    transform var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    scale var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   z-index: 1;
 
   .hk-switch-sm & {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 1rem;
+    height: 1rem;
   }
 
   .hk-switch-md & {
-    width: 0.9375rem;
-    height: 0.9375rem;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
   .hk-switch-lg & {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Press squish composes with the slide via the independent `scale`
+     property (transform owns the translation only). */
+  .hk-switch:not([data-disabled]):active & {
+    scale: 0.88;
   }
 
+  /* Travel = track − 2×(1px border + 2px inset) − thumb width, so the
+     checked thumb clears the border by the same 3px as the resting one
+     (inset-inline-start resolves against the padding box — the 1px border
+     must count twice or the two gaps render asymmetric):
+     sm 36−6−16=14 · md 44−6−20=18 · lg 52−6−24=22. */
   .hk-switch-sm[data-checked] & {
-    transform: translateX(0.813rem);
+    transform: translateX(0.875rem);
   }
 
   .hk-switch-md[data-checked] & {
-    transform: translateX(1.12rem);
+    transform: translateX(1.125rem);
   }
 
   .hk-switch-lg[data-checked] & {
@@ -125,11 +163,11 @@
   /* RTL: the checked slide mirrors — the thumb travels back toward the
      inline-start (physically leftward) edge. */
   [dir="rtl"] .hk-switch-sm[data-checked] & {
-    transform: translateX(-0.813rem);
+    transform: translateX(-0.875rem);
   }
 
   [dir="rtl"] .hk-switch-md[data-checked] & {
-    transform: translateX(-1.12rem);
+    transform: translateX(-1.125rem);
   }
 
   [dir="rtl"] .hk-switch-lg[data-checked] & {
@@ -141,7 +179,7 @@
 
 .hk-switch-content {
   position: absolute;
-  font-size: 0.5625rem;
+  font-size: 0.625rem;
   font-weight: 700;
   line-height: 1;
   white-space: nowrap;
@@ -149,21 +187,46 @@
   transition: opacity 0.2s ease;
 
   .hk-switch-sm & {
-    font-size: 0.4375rem;
+    font-size: 0.5rem;
   }
 
   .hk-switch-lg & {
-    font-size: 0.625rem;
-  }
-
+    font-size: 0.6875rem;
+  }
+
+  /* Both faces anchor AWAY from the thumb that would cover them (content
+   * sits at z-index 0, the thumb at 1): the off face starts clear of the
+   * resting thumb (2px inset + thumb + 2px gap = 20/24/28), the on face
+   * ends clear of the checked one (thumb + 4 = 20/24/28: with travel =
+   * track − 2×(border+inset) − thumb, the checked thumb starts
+   * thumb + 4 from the padding-box end). A label longer
+   * than its free zone clips at the far seam instead of sliding under the
+   * thumb — the R1 verification measured 3–5px of coverage with the old
+   * far-edge anchors once the track grew. */
   &-off {
-    inset-inline-end: 4px;
+    inset-inline-start: 24px;
     color: var(--hi-color-text-secondary);
+
+    .hk-switch-sm & {
+      inset-inline-start: 20px;
+    }
+
+    .hk-switch-lg & {
+      inset-inline-start: 28px;
+    }
   }
 
   &-on {
-    inset-inline-start: 4px;
+    inset-inline-end: 24px;
     color: rgb(var(--color-on-solid-text, 255 255 255));
+
+    .hk-switch-sm & {
+      inset-inline-end: 20px;
+    }
+
+    .hk-switch-lg & {
+      inset-inline-end: 28px;
+    }
   }
 }
 

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