@celestia-island/hikari 0.43.13 → 0.43.15

package/package.json

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

package/src/components/HkAlert.scss

@@ -3,10 +3,10 @@
   align-items: flex-start;
   gap: var(--space-12, 12px);
   padding: var(--space-12, 12px) var(--space-16, 16px);
-  border-radius: var(--hi-radius-md, 8px);
+  border-radius: var(--radius-md, 8px);
   border: 1px solid transparent;
   border-inline-start-width: 4px;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 .hk-alert-banner {
@@ -45,27 +45,27 @@
 }
 
 .hk-alert-warning {
-  background: color-mix(in srgb, var(--hi-color-warning, #d29922) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-warning, #d29922) 15%, transparent);
-  border-inline-start-color: var(--hi-color-warning, #d29922);
+  background: color-mix(in srgb, var(--hi-color-warning, #eed677) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-warning, #eed677) 15%, transparent);
+  border-inline-start-color: var(--hi-color-warning, #eed677);
 
-  .hk-alert-icon { color: var(--hi-color-warning, #d29922); }
+  .hk-alert-icon { color: var(--hi-color-warning, #eed677); }
 }
 
 .hk-alert-info {
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
-  border-inline-start-color: var(--hi-color-primary, #58a6ff);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 15%, transparent);
+  border-inline-start-color: var(--hi-color-primary, #7aa2f7);
 
-  .hk-alert-icon { color: var(--hi-color-primary, #58a6ff); }
+  .hk-alert-icon { color: var(--hi-color-primary, #7aa2f7); }
 }
 
 .hk-alert-success {
-  background: color-mix(in srgb, var(--hi-color-success, #3fb950) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-success, #3fb950) 15%, transparent);
-  border-inline-start-color: var(--hi-color-success, #3fb950);
+  background: color-mix(in srgb, var(--hi-color-success, #0eb840) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-success, #0eb840) 15%, transparent);
+  border-inline-start-color: var(--hi-color-success, #0eb840);
 
-  .hk-alert-icon { color: var(--hi-color-success, #3fb950); }
+  .hk-alert-icon { color: var(--hi-color-success, #0eb840); }
 }
 
 /* ── Icon ──────────────────────────────────────── */
@@ -93,7 +93,7 @@
 .hk-alert-text {
   margin: 0;
   line-height: 1.5;
-  color: color-mix(in srgb, var(--hi-color-text-secondary, #666) 85%, transparent);
+  color: color-mix(in srgb, var(--hi-color-text-secondary, #666666) 85%, transparent);
 }
 
 /* ── Close button ──────────────────────────────── */
@@ -107,19 +107,19 @@
   height: 22px;
   border: 0;
   background: transparent;
-  border-radius: var(--hi-radius-sm, 4px);
-  color: var(--hi-color-muted, #666);
+  border-radius: var(--radius-sm, 4px);
+  color: var(--hi-color-muted, #6c6c6c);
   cursor: pointer;
   padding: 0;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
-    background: var(--hi-color-surface, #fff);
-    color: var(--hi-color-text-primary, #333);
+    background: var(--hi-color-surface, #f0f4f8);
+    color: var(--hi-color-text-primary, #1e1e1e);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 2px;
   }
 }

package/src/components/HkAltSignIn.scss

@@ -18,7 +18,7 @@
   background: transparent;
   cursor: pointer;
   font-size: var(--text-xs, 0.75rem);
-  color: var(--hi-color-muted, #666);
+  color: var(--hi-color-muted, #6c6c6c);
   transition:
     color var(--duration-normal, 0.3s) ease,
     opacity var(--duration-normal, 0.3s) ease;
@@ -26,12 +26,12 @@
 
 .hk-alt-signin__trigger:hover:not(:disabled),
 .hk-alt-signin__trigger[aria-expanded="true"] {
-  color: var(--hi-color-text-secondary, #999);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 /* Keyboard position feedback on the full-width disclosure row. */
 .hk-alt-signin__trigger:focus-visible:not(:disabled) {
-  outline: 2px solid var(--hi-color-primary, #58a6ff);
+  outline: 2px solid var(--hi-color-primary, #7aa2f7);
   outline-offset: 2px;
 }
 

package/src/components/HkAuthMethodList.scss

@@ -9,7 +9,7 @@
   align-items: center;
   gap: var(--space-10, 0.625rem);
   margin: 0 0 var(--space-4, 0.25rem);
-  color: var(--hi-color-muted, #999);
+  color: var(--hi-color-muted, #6c6c6c);
   font-size: var(--text-xs, 0.75rem);
   text-align: center;
 }
@@ -19,7 +19,7 @@
   content: "";
   flex: 1;
   height: 1px;
-  background: var(--hi-color-border, #ddd);
+  background: var(--hi-color-border, #646464);
 }
 
 /* The component's own wrapper is `display: contents` (measurement anchor +

package/src/components/HkAuthMethodList.test.tsx

@@ -89,6 +89,30 @@ describe("HkAuthMethodList", () => {
     expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("63px");
   });
 
+  it("publishes a width in the column's own units inside a scaled root", async () => {
+    // The labels are measured where they are DRAWN while the custom property
+    // is a CSS length the column is laid out with: in a scaled or zoomed root
+    // the published column would come out that many times too wide.
+    const c = mount(h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })));
+    await nextTick();
+    const wrapper = c.querySelector<HTMLElement>(".s-auth-methods-list")!;
+    const spans = [...wrapper.querySelectorAll<HTMLElement>(".s-auth-methods-label")];
+    Object.defineProperty(spans[0]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 58 }) });
+    Object.defineProperty(spans[1]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 61.4 }) });
+    // The list is drawn twice the size it is laid out at.
+    Object.defineProperty(wrapper, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({ left: 0, top: 0, right: 400, bottom: 200, width: 400, height: 200, x: 0, y: 0 }) as DOMRect,
+    });
+    Object.defineProperty(wrapper, "offsetWidth", { configurable: true, get: () => 200 });
+    Object.defineProperty(wrapper, "offsetHeight", { configurable: true, get: () => 100 });
+    const instance = (wrapper as unknown as { __vueParentComponent?: { exposed?: Record<string, unknown> } })
+      .__vueParentComponent?.exposed;
+    (instance!.measure as () => void)();
+    // 61.4 drawn are 30.7 of the column's own: ceil 31, plus the 1px headroom.
+    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("32px");
+  });
+
   it("leaves the column fallback intact when no text metrics are available", async () => {
     const c = mount(h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })));
     await nextTick();

package/src/components/HkAuthMethodList.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import HkButton from "./HkButton";
+import { drawnScale } from "../composables/layoutGeometry";
 import "./HkAuthMethodList.scss";
 
 /**
@@ -81,10 +82,16 @@ export default defineComponent({
       const root = listRef.value;
       if (!root) return;
       let widest = 0;
+      // The labels are measured where they are DRAWN, and the width is
+      // published as a CSS length the column is laid out with: in a scaled or
+      // zoomed root the two differ by the scale of the space, so the column
+      // would come out that many times too wide (see `layoutGeometry`).
+      const space = drawnScale(root);
+      const factor = root.offsetWidth > 0 ? space.x : root.offsetHeight > 0 ? space.y : 1;
       for (const label of root.querySelectorAll<HTMLElement>(".s-auth-methods-label")) {
         const previous = label.style.width;
         label.style.width = "max-content";
-        widest = Math.max(widest, label.getBoundingClientRect().width);
+        widest = Math.max(widest, label.getBoundingClientRect().width / (factor > 0 ? factor : 1));
         label.style.width = previous;
       }
       // Guard: only publish when real text metrics were observed, so a

package/src/components/HkAvatar.scss

@@ -50,5 +50,5 @@
 
 [data-theme="dark"] .hk-avatar {
   background-color: var(--hi-surface);
-  color: var(--hi-color-text-secondary, rgba(255, 255, 255, 0.6));
+  color: var(--hi-color-text-secondary, rgba(102,102,102,0.6));
 }

package/src/components/HkBlockingToast.scss

@@ -32,7 +32,7 @@
   align-items: flex-start;
   gap: var(--space-8, 8px);
   padding: var(--space-12, 12px) var(--space-16, 16px);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   font-size: var(--text-base, 0.875rem);
   line-height: 1.4;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@@ -77,12 +77,12 @@
 // Variant backgrounds follow the HkToast conventions (including the
 // dark-on-amber warning text for contrast).
 .hk-blocking-toast-info {
-  background: var(--hi-color-info, #58a6ff);
+  background: var(--hi-color-info, #6abed6);
   color: #fff;
 }
 
 .hk-blocking-toast-warning {
-  background: var(--hi-color-warning, #d29922);
+  background: var(--hi-color-warning, #eed677);
   color: #1c1c1e;
 }
 
@@ -95,13 +95,13 @@
 // cards go absolute so the remaining ones glide up (hk-toast pattern).
 .hk-blocking-toast-enter-active {
   transition-property: background-color, border-color, color, box-shadow, opacity, transform;
-  transition-duration: var(--hi-duration-normal, 0.3s);
+  transition-duration: var(--duration-normal, 0.3s);
   transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 .hk-blocking-toast-leave-active {
   transition-property: background-color, border-color, color, box-shadow, opacity, transform;
-  transition-duration: var(--hi-duration-normal, 0.3s);
+  transition-duration: var(--duration-normal, 0.3s);
   transition-timing-function: cubic-bezier(0.36, 0, 0.66, 1);
   /* Only the positioning switch lives here; the leaving slot's box is
      frozen by the before-leave hook (pinLeaveGeometry), same contract
@@ -126,7 +126,7 @@
 }
 
 .hk-blocking-toast-move {
-  transition: transform var(--hi-duration-normal, 0.3s) ease;
+  transition: transform var(--duration-normal, 0.3s) ease;
 }
 
 // Reduced motion: drop the slide/FLIP choreography, cards snap in and

package/src/components/HkBoard.scale.test.ts

@@ -0,0 +1,136 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import HkBoard from "./HkBoard";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+const restores: Array<() => void> = [];
+
+afterEach(() => {
+  for (const restore of restores.splice(0)) restore();
+  for (const m of mounts.splice(0)) {
+    m.app.unmount();
+    m.container.remove();
+  }
+});
+
+/** The board's camera lives in the board's OWN pixels: the world transform is
+ *  written in them. */
+function worldTransform(container: HTMLElement): { x: number; y: number; k: number } {
+  const world = container.querySelector<HTMLElement>(".hk-board-world")!;
+  const m = /translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)\s*scale\(([\d.]+)\)/.exec(
+    world.style.transform,
+  );
+  if (!m) throw new Error(`unexpected world transform: ${world.style.transform}`);
+  return { x: parseFloat(m[1]), y: parseFloat(m[2]), k: parseFloat(m[3]) };
+}
+
+function pointer(type: string, id: number, x: number, y: number): PointerEvent {
+  return new PointerEvent(type, { bubbles: true, pointerId: id, pointerType: "touch", clientX: x, clientY: y });
+}
+
+async function mountBoard() {
+  // The board reads its viewport size at mount (clientWidth/Height, i.e. the
+  // layout box): pin it on the prototype for the duration so the camera's
+  // clamp has a real viewport to work with, the way a laid-out page would.
+  const proto = HTMLElement.prototype as unknown as {
+    clientWidth: number;
+    clientHeight: number;
+  };
+  const beforeW = Object.getOwnPropertyDescriptor(proto, "clientWidth");
+  const beforeH = Object.getOwnPropertyDescriptor(proto, "clientHeight");
+  Object.defineProperty(proto, "clientWidth", {
+    configurable: true,
+    get(this: HTMLElement) {
+      return this.classList?.contains("hk-board") ? 800 : 0;
+    },
+  });
+  Object.defineProperty(proto, "clientHeight", {
+    configurable: true,
+    get(this: HTMLElement) {
+      return this.classList?.contains("hk-board") ? 600 : 0;
+    },
+  });
+  restores.push(() => {
+    if (beforeW) Object.defineProperty(proto, "clientWidth", beforeW);
+    else delete (proto as { clientWidth?: number }).clientWidth;
+    if (beforeH) Object.defineProperty(proto, "clientHeight", beforeH);
+    else delete (proto as { clientHeight?: number }).clientHeight;
+  });
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(
+    defineComponent({
+      setup: () => () =>
+        h(HkBoard, {
+          // Content far larger than the viewport, so the camera's clamp lets
+          // it pan instead of re-centring a board that already fits.
+          nodes: [
+            { id: "a", x: 0, y: 0, w: 200, h: 120, label: "A" },
+            { id: "b", x: 3000, y: 3000, w: 200, h: 120, label: "B" },
+          ],
+          fitOnMount: false,
+          // No tween: the assertions read the camera right after the event.
+          animated: false,
+          grid: false,
+          minimap: false,
+        }),
+    }),
+  );
+  app.mount(container);
+  mounts.push({ app, container });
+  await nextTick();
+  const viewport = container.querySelector<HTMLElement>(".hk-board")!;
+  // The board is drawn twice the size it is laid out at, and its own box
+  // reports the layout size — the shape a scaled or zoomed root produces.
+  Object.defineProperty(viewport, "getBoundingClientRect", {
+    configurable: true,
+    value: () => ({ left: 0, top: 0, right: 1600, bottom: 1200, width: 1600, height: 1200, x: 0, y: 0 }) as DOMRect,
+  });
+  Object.defineProperty(viewport, "offsetWidth", { configurable: true, get: () => 800 });
+  Object.defineProperty(viewport, "offsetHeight", { configurable: true, get: () => 600 });
+  Object.defineProperty(viewport, "clientWidth", { configurable: true, get: () => 800 });
+  Object.defineProperty(viewport, "clientHeight", { configurable: true, get: () => 600 });
+  // happy-dom has no pointer capture: the board captures every finger, and a
+  // throw there would end the gesture before it starts.
+  Object.defineProperty(viewport, "setPointerCapture", { configurable: true, value: () => {} });
+  Object.defineProperty(viewport, "releasePointerCapture", { configurable: true, value: () => {} });
+  Object.defineProperty(viewport, "hasPointerCapture", { configurable: true, value: () => true });
+  return { container, viewport };
+}
+
+describe("HkBoard scaled-space gestures", () => {
+  it("pans by the finger's own distance inside a scaled root", async () => {
+    const { container, viewport } = await mountBoard();
+    const before = worldTransform(container);
+
+    viewport.dispatchEvent(pointer("pointerdown", 1, 1600, 1600));
+    viewport.dispatchEvent(pointer("pointermove", 1, 1520, 1540));
+    await nextTick();
+
+    const after = worldTransform(container);
+    expect(after.x, "-80 drawn px are -40 of the board's own").toBeCloseTo(before.x - 40, 4);
+    expect(after.y, "-60 drawn px are -30 of the board's own").toBeCloseTo(before.y - 30, 4);
+    viewport.dispatchEvent(pointer("pointerup", 1, 1520, 1540));
+  });
+
+  it("keeps a zoom anchored under the pointer inside a scaled root", async () => {
+    const { container, viewport } = await mountBoard();
+    const wheel = new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -1 });
+    Object.defineProperty(wheel, "clientX", { value: 800 });
+    Object.defineProperty(wheel, "clientY", { value: 600 });
+    // The pointer sits at the board's own (400, 300) — half the layout box.
+    const anchor = { x: 400, y: 300 };
+    const before = worldTransform(container);
+    const world = {
+      x: (anchor.x - before.x) / before.k,
+      y: (anchor.y - before.y) / before.k,
+    };
+    viewport.dispatchEvent(wheel);
+    await nextTick();
+    const after = worldTransform(container);
+    expect(after.k).toBeGreaterThan(before.k);
+    expect(after.x + world.x * after.k, "the world point stays under the pointer").toBeCloseTo(anchor.x, 3);
+    expect(after.y + world.y * after.k).toBeCloseTo(anchor.y, 3);
+  });
+});

package/src/components/HkBoard.tsx

@@ -59,6 +59,7 @@ import {
   type BoardEdgeStyle,
 } from "../utils/boardEdges";
 import "./HkBoard.scss";
+import { drawnScale } from "../composables/layoutGeometry";
 
 /**
  * A node on the board. `hidden` nodes are junction-only (invisible).
@@ -211,9 +212,23 @@ export default defineComponent({
     // — SCADA scenes, mind maps — still get `nodeClick` on a short tap.
     let pressed: { id: string; pointerId: number; x: number; y: number } | null = null;
 
+    /** How many of the board's own pixels one DRAWN pixel is worth: the
+     *  camera and every anchor live in the board's local CSS pixels while the
+     *  pointer arrives in drawn ones, and a scaled or zoomed root separates
+     *  the two (see `layoutGeometry`). */
+    const pxScale = (): number => {
+      const el = viewportRef.value;
+      if (!el) return 1;
+      const scale = drawnScale(el);
+      const factor = el.offsetWidth > 0 ? scale.x : el.offsetHeight > 0 ? scale.y : 1;
+      return factor > 0 ? factor : 1;
+    };
+
     const localPoint = (e: PointerEvent | WheelEvent): BoardPoint => {
-      const rect = viewportRef.value?.getBoundingClientRect();
-      return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+      const el = viewportRef.value;
+      const rect = el?.getBoundingClientRect();
+      const k = pxScale();
+      return { x: (e.clientX - (rect?.left ?? 0)) / k, y: (e.clientY - (rect?.top ?? 0)) / k };
     };
 
     function onWheel(e: WheelEvent): void {
@@ -237,14 +252,10 @@ export default defineComponent({
     function rearmPinch(): void {
       const [a, b] = [...pointers.values()];
       if (!a || !b) return;
-      const rect = viewportRef.value?.getBoundingClientRect();
       pinchBase = {
         cam: { ...camera.value },
         dist: Math.hypot(a.x - b.x, a.y - b.y) || 1,
-        mid: {
-          x: (a.x + b.x) / 2 - (rect?.left ?? 0),
-          y: (a.y + b.y) / 2 - (rect?.top ?? 0),
-        },
+        mid: localPoint({ clientX: (a.x + b.x) / 2, clientY: (a.y + b.y) / 2 } as PointerEvent),
       };
     }
 
@@ -273,17 +284,18 @@ export default defineComponent({
       if (pinchBase && pointers.size >= 2) {
         const [a, b] = [...pointers.values()];
         const dist = Math.hypot(a.x - b.x, a.y - b.y) || 1;
-        const rect = viewportRef.value?.getBoundingClientRect();
-        const mid = {
-          x: (a.x + b.x) / 2 - (rect?.left ?? 0),
-          y: (a.y + b.y) / 2 - (rect?.top ?? 0),
-        };
+        const mid = localPoint({
+          clientX: (a.x + b.x) / 2,
+          clientY: (a.y + b.y) / 2,
+        } as PointerEvent);
         pinchBase.mid = mid;
         cam.pinchZoom(pinchBase.cam, dist / pinchBase.dist, mid);
         return;
       }
       if (dragState) {
-        const k = camera.value.k || 1;
+        // The node lives in WORLD units: the drawn delta comes down through
+        // the ancestor scale and then through the camera's own zoom.
+        const k = (camera.value.k || 1) * pxScale();
         const dx = (e.clientX - dragState.sx) / k;
         const dy = (e.clientY - dragState.sy) / k;
         if (Math.abs(e.clientX - dragState.sx) + Math.abs(e.clientY - dragState.sy) > 3) dragState.moved = true;
@@ -293,7 +305,8 @@ export default defineComponent({
         return;
       }
       if (panState) {
-        cam.panBy(e.clientX - panState.px, e.clientY - panState.py);
+        const k = pxScale();
+        cam.panBy((e.clientX - panState.px) / k, (e.clientY - panState.py) / k);
         panState = { px: e.clientX, py: e.clientY };
       }
     }

package/src/components/HkCheckbox.scss

@@ -23,12 +23,12 @@
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
-  border-radius: var(--hi-radius-sm, 4px);
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  background: var(--hi-color-surface, rgba(240,244,248,0.95));
   transition:
-    border-color var(--hi-duration-normal, 0.3s) ease,
-    background var(--hi-duration-normal, 0.3s) ease;
+    border-color var(--duration-normal, 0.3s) ease,
+    background var(--duration-normal, 0.3s) ease;
   flex-shrink: 0;
   position: relative;
 }
@@ -38,13 +38,13 @@
 }
 
 .hk-checkbox-box[data-checked] {
-  background: var(--hi-color-primary, #ff6b9d);
-  border-color: var(--hi-color-primary, #ff6b9d);
+  background: var(--hi-color-primary, #7aa2f7);
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-checkbox-box[data-indeterminate] {
-  background: var(--hi-color-primary, #ff6b9d);
-  border-color: var(--hi-color-primary, #ff6b9d);
+  background: var(--hi-color-primary, #7aa2f7);
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 /* ---------- input ---------- */
@@ -62,8 +62,8 @@
    :focus-visible keeps mouse toggles ring-free. */
 .hk-checkbox-box:has(.hk-checkbox-input:focus-visible) {
   box-shadow:
-    0 0 0 2px var(--hi-color-surface, rgba(255, 255, 255, 0.95)),
-    0 0 0 4px var(--hi-color-primary, #ff6b9d);
+    0 0 0 2px var(--hi-color-surface, rgba(240,244,248,0.95)),
+    0 0 0 4px var(--hi-color-primary, #7aa2f7);
 }
 
 /* ---------- markers ---------- */

package/src/components/HkDatePicker.scss

@@ -23,15 +23,15 @@
   padding: var(--space-8, 8px) var(--space-12, 12px);
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: rgb(var(--color-text));
   font-family: inherit;
   font-size: var(--text-sm, 0.875rem);
   line-height: 1.5;
   transition:
-    background-color var(--hi-duration-fast, 0.15s) ease,
-    border-color var(--hi-duration-fast, 0.15s) ease,
-    box-shadow var(--hi-duration-fast, 0.15s) ease;
+    background-color var(--duration-fast, 0.15s) ease,
+    border-color var(--duration-fast, 0.15s) ease,
+    box-shadow var(--duration-fast, 0.15s) ease;
 }
 
 .hk-dp-trigger {
@@ -102,11 +102,11 @@
   padding: 0;
   border: 0;
   background: transparent;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-muted);
   cursor: pointer;
   opacity: 0;
-  transition: opacity var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   .hk-dp-trigger:hover &,
   .hk-dp-trigger:focus &,
@@ -183,13 +183,13 @@
   border: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-muted);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled) {
     background: var(--hi-color-surface);
@@ -232,8 +232,8 @@
   color: inherit;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     background: var(--hi-color-surface);
@@ -279,7 +279,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   /* Fixed height keeps the six-row day grid — and therefore the shared
    * stage height — independent of the panel width, so drilling between
    * views never changes the popup's size (enlarged on touch). */
@@ -291,7 +291,7 @@
   cursor: pointer;
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled):not(.is-selected) {
     background: var(--hi-color-surface);