@hilum/ui 3.8.5 → 3.10.0

package/src/lib/scroll-fade.tsx

@@ -239,3 +239,42 @@ export function ScrollEdgeCue({
     </div>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Horizontal overflow helpers (tab strips, chip rows)
+// ---------------------------------------------------------------------------
+
+const EDGE_FADE_PX = 24;
+
+/**
+ * CSS mask that fades whichever horizontal edges still hide content. Works on
+ * any background (unlike a surface-coloured gradient), so it suits tab tracks.
+ */
+export function horizontalEdgeMask(left: boolean, right: boolean): string | undefined {
+  if (!left && !right) return undefined;
+  const start = left ? `transparent 0, #000 ${EDGE_FADE_PX}px` : "#000 0";
+  const end = right ? `#000 calc(100% - ${EDGE_FADE_PX}px), transparent 100%` : "#000 100%";
+  return `linear-gradient(to right, ${start}, ${end})`;
+}
+
+/** Style for a horizontally scrolling strip: edge fades while content is hidden. */
+export function useHorizontalOverflowMask(
+  ref: RefObject<HTMLElement | null>,
+  enabled = true,
+): CSSProperties | undefined {
+  const edges = useScrollEdges(ref, { axis: "horizontal", enabled });
+  const mask = enabled ? horizontalEdgeMask(edges.left, edges.right) : undefined;
+  return mask ? { maskImage: mask, WebkitMaskImage: mask } : undefined;
+}
+
+/** Scroll `index`'s `[data-proximity-index]` child into view inside a horizontal strip. */
+export function scrollStripItemIntoView(container: HTMLElement | null, index: number) {
+  if (!container || index < 0 || container.scrollWidth <= container.clientWidth) return;
+  const el = container.querySelector<HTMLElement>(`[data-proximity-index="${index}"]`);
+  if (!el) return;
+  const left = el.offsetLeft;
+  const right = left + el.offsetWidth;
+  if (left < container.scrollLeft) container.scrollLeft = Math.max(0, left - EDGE_FADE_PX);
+  else if (right > container.scrollLeft + container.clientWidth)
+    container.scrollLeft = right - container.clientWidth + EDGE_FADE_PX;
+}

package/src/tokens/tokens.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from "vitest";
+import { tokens } from "./tokens";
+import { SURFACE_BG, SURFACE_SHADOW } from "../lib/surface-classes";
+
+describe("surface ladder tokens", () => {
+  it.each(["light", "mid", "dark"] as const)("%s defines every level surface-classes emits", (theme) => {
+    const levels = Object.keys(SURFACE_BG).length;
+    expect(Object.keys(SURFACE_SHADOW)).toHaveLength(levels);
+    expect(tokens.surfaces[theme].bg).toHaveLength(levels);
+    expect(tokens.surfaces[theme].shadow).toHaveLength(levels);
+  });
+
+  it("level 1 matches the theme background", () => {
+    for (const theme of ["light", "mid", "dark"] as const) {
+      expect(tokens.surfaces[theme].bg[0]).toBe(tokens.semantic[theme].background);
+    }
+  });
+
+  it("shadow weight grows monotonically with level", () => {
+    const layers = tokens.surfaces.light.shadow.map((s) => s.split("px ").length);
+    for (let i = 1; i < layers.length; i++) expect(layers[i]).toBeGreaterThan(layers[i - 1]);
+  });
+});
+
+describe("semantic tokens", () => {
+  const themes = ["light", "mid", "dark"] as const;
+
+  it("every theme defines the same semantic keys", () => {
+    const keys = Object.keys(tokens.semantic.light).sort();
+    for (const theme of themes) expect(Object.keys(tokens.semantic[theme]).sort()).toEqual(keys);
+  });
+
+  it("defines the interaction, edge and canvas tokens components rely on", () => {
+    for (const theme of themes) {
+      for (const key of ["hover", "active", "borderStrong", "canvas", "checkerA", "checkerB"]) {
+        expect(tokens.semantic[theme]).toHaveProperty(key);
+      }
+    }
+  });
+
+  // WCAG relative-luminance contrast between two #rrggbb colours.
+  const luminance = (hex: string) => {
+    const [r, g, b] = [1, 3, 5].map((i) => {
+      const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const contrast = (a: string, b: string) => {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+  };
+
+  it("borders stay visible against their theme background", () => {
+    expect(contrast(tokens.semantic.light.border, tokens.semantic.light.background)).toBeGreaterThan(1.2);
+    expect(contrast(tokens.semantic.dark.border, tokens.semantic.dark.background)).toBeGreaterThanOrEqual(2);
+    expect(contrast(tokens.semantic.mid.border, tokens.semantic.mid.card)).toBeGreaterThan(1.5);
+    for (const theme of themes) {
+      expect(tokens.semantic[theme].input).toBe(tokens.semantic[theme].border);
+    }
+  });
+});
+
+describe("density tokens", () => {
+  it("compact tier matches the editor-chrome spec", () => {
+    expect(tokens.density.compact).toMatchObject({
+      controlHeight: "24px",
+      rowHeight: "28px",
+      text: "12px",
+      label: "11px",
+      menuItemHeight: "28px",
+      menuText: "13px",
+      paddingX: "8px",
+    });
+    expect(Object.keys(tokens.density.compact).sort()).toEqual(Object.keys(tokens.density.default).sort());
+  });
+});

package/src/tokens/tokens.ts

@@ -15,6 +15,24 @@
 //
 // ground — neutral spine for text, borders, and structure (values: Tailwind neutral)
 
+// Surface elevation ladder helper. Level 1 is a hairline ring only; every
+// step above adds one more (progressively softer, larger) drop layer, so
+// shadow weight grows monotonically with the surface level. `ring` is the
+// hairline edge colour, `drop` the drop-shadow colour at a given alpha.
+const surfaceShadowRamp = (ring: string, drop: (alpha: number) => string) => {
+  const layers = [
+    `0 0 0 1px ${ring}`,
+    `0 1px 1px -0.5px ${drop(0.06)}, 0 3px 3px -1.5px ${drop(0.06)}`,
+    `0 6px 6px -3px ${drop(0.06)}`,
+    `0 12px 12px -6px ${drop(0.04)}`,
+    `0 24px 24px -12px ${drop(0.04)}`,
+    `0 24px 24px 2px ${drop(0.08)}`,
+    `0 32px 40px 4px ${drop(0.1)}`,
+    `0 48px 56px 8px ${drop(0.12)}`,
+  ];
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((level) => layers.slice(0, level).join(", "));
+};
+
 export const tokens = {
   /* ============================================================== *
    *  PALETTE — concrete colors                                      *
@@ -84,12 +102,19 @@ export const tokens = {
       cardForeground: "#171717",
       surface: "#fafafa", // ground-50
       surfaceForeground: "#262626", // ground-800
-      border: "#f5f5f5", // ground-100
-      input: "#f5f5f5",
+      // ground-200 on white ≈ 1.26:1 — the same hairline weight Figma/Linear use
+      // for panel and field edges (#f5f5f5 was ~1.09:1 and read as invisible).
+      border: "#e5e5e5", // ground-200
+      borderStrong: "#d4d4d4", // ground-300 — hover / emphasised edges
+      input: "#e5e5e5", // input edge (border-input) — matches border
       muted: "#fafafa",
       mutedForeground: "#737373", // ground-500
       accent: "#fdf0ff", // purple-50
       accentForeground: "#740092", // purple-700
+      // Neutral interaction washes behind `bg-hover` / `bg-active` (tabs,
+      // accordions, radio/checkbox groups, ghost + outline buttons).
+      hover: "rgba(23, 23, 23, 0.05)",
+      active: "rgba(23, 23, 23, 0.08)",
       primary: "#c100f1", // purple-500 = brand.primary
       primaryForeground: "#ffffff",
       secondary: "#fafafa", // ground-50
@@ -101,6 +126,12 @@ export const tokens = {
       warning: "#fff5bf", // butter-200 = brand.secondary
       warningForeground: "#171717", // ground-900
       ring: "#c100f1", // purple-500 = brand.primary
+      // Transparency checkerboard (colour picker alpha track, swatches).
+      checkerA: "#ffffff",
+      checkerB: "#e5e5e5",
+      // Editor workspace behind floating chrome (Figma-style grey canvas),
+      // one step below panels so they read as raised in every theme.
+      canvas: "#f5f5f5", // ground-100
     },
     // Mid — a neutral medium-gray theme (from the Pappery designer "mid" palette,
     // mapped onto the ground scale). Sits between light and dark.
@@ -112,11 +143,14 @@ export const tokens = {
       surface: "#525252", // ground-600 (designer canvas/pane)
       surfaceForeground: "#fafafa",
       border: "#a3a3a3", // ground-400 (designer border — lighter so it reads on the gray)
-      input: "#404040", // ground-700 (designer input-bg)
+      borderStrong: "#bdbdbd", // hover / emphasised edges
+      input: "#a3a3a3", // input edge (border-input) — matches border
       muted: "#525252", // ground-600
       mutedForeground: "#e5e5e5", // ground-200 (designer text-secondary)
       accent: "#404040", // ground-700 (designer item-hover-bg)
       accentForeground: "#fafafa",
+      hover: "rgba(255, 255, 255, 0.08)",
+      active: "rgba(255, 255, 255, 0.13)",
       primary: "#c100f1", // brand stays consistent across themes
       primaryForeground: "#ffffff",
       secondary: "#525252", // ground-600
@@ -128,6 +162,9 @@ export const tokens = {
       warning: "#fff5bf", // butter-200
       warningForeground: "#171717",
       ring: "#c100f1",
+      checkerA: "#8a8a8a",
+      checkerB: "#6b6b6b",
+      canvas: "#636363",
     },
     dark: {
       background: "#171717", // ground-900 — designer canvas (deepest)
@@ -136,12 +173,17 @@ export const tokens = {
       cardForeground: "#fafafa",
       surface: "#1a1a1a", // designer item-hover depth
       surfaceForeground: "#f5f5f5",
-      border: "#404040", // ground-700 — designer border (reads on the dark)
-      input: "#262626", // ground-800
+      // ≈2:1 against the page background and ~1.7:1 against card panels;
+      // #404040 (1.73:1 vs bg) blended into panels at small sizes.
+      border: "#4a4a4a",
+      borderStrong: "#5c5c5c", // hover / emphasised edges
+      input: "#4a4a4a", // input edge (border-input) — matches border
       muted: "#262626", // ground-800
       mutedForeground: "#a3a3a3", // ground-400
       accent: "#404040", // ground-700 — neutral elevated/hover (designer item-hover)
       accentForeground: "#fafafa",
+      hover: "rgba(250, 250, 250, 0.06)",
+      active: "rgba(250, 250, 250, 0.1)",
       primary: "#c100f1", // purple-500 — brand stays consistent (D8)
       primaryForeground: "#ffffff",
       secondary: "#262626", // ground-800
@@ -153,6 +195,38 @@ export const tokens = {
       warning: "#221600", // butter-950 surface
       warningForeground: "#fffad0", // butter-100
       ring: "#c100f1", // purple-500 = brand.primary
+      checkerA: "#4a4a4a",
+      checkerB: "#333333",
+      canvas: "#1c1c1c",
+    },
+  },
+
+  /* ============================================================== *
+   *  SURFACES — elevation ladder (levels 1–8)                        *
+   * ============================================================== *
+   * Consumed via surfaceClasses() / <Elevated> / SurfaceProvider:
+   * `bg-surface-N`, `shadow-surface-N`, and the raw `var(--surface-N)`
+   * (scroll-fade gradients). Level 1 is the page substrate; each nested
+   * layer (popover +2, dialog +4, …) walks up the ladder. Index 0 = level 1.
+   *
+   * Light: surfaces stay white (matching card/popover) and elevation is
+   *        carried by the shadow ramp, the house style.
+   * Mid/Dark: surfaces step lighter/darker per level so nested layers stay
+   *        distinguishable where drop shadows barely read. */
+  surfaces: {
+    light: {
+      bg: ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"],
+      shadow: surfaceShadowRamp("rgba(0, 0, 0, 0.06)", (a) => `rgba(0, 0, 0, ${a})`),
+    },
+    mid: {
+      // background (#737373) → card (#525252) → ground-700 (#404040)
+      bg: ["#737373", "#6b6b6b", "#636363", "#5b5b5b", "#525252", "#4d4d4d", "#474747", "#404040"],
+      shadow: surfaceShadowRamp("rgba(0, 0, 0, 0.14)", (a) => `rgba(0, 0, 0, ${Math.min(a * 2.5, 0.3)})`),
+    },
+    dark: {
+      // background (#171717) → card (#262626) → accent (#404040)
+      bg: ["#171717", "#1f1f1f", "#262626", "#2b2b2b", "#303030", "#353535", "#3a3a3a", "#404040"],
+      shadow: surfaceShadowRamp("rgba(255, 255, 255, 0.08)", (a) => `rgba(0, 0, 0, ${Math.min(a * 4, 0.4)})`),
     },
   },
 
@@ -232,6 +306,9 @@ export const tokens = {
       lineHeight: "1.625",
       textWrap: "pretty",
     },
+    /** 11px — dense metadata (table sub-lines, chips, editor hints). Use instead of text-[11px]. */
+    "caption-sm": { family: "sans", size: "0.6875rem", weight: 400, lineHeight: "1.5" },
+    /** 10px — the floor. Use instead of text-[10px]; keep to non-essential metadata. */
     "caption-xs": { family: "sans", size: "0.625rem", weight: 400, lineHeight: "1.625" },
 
     /* --- "Eyebrow" family — uppercase tracked label used above headlines, --- *
@@ -295,6 +372,38 @@ export const tokens = {
     full: "9999px",
   },
 
+  /* ============================================================== *
+   *  DENSITY — control sizing tiers                                  *
+   * ============================================================== *
+   * Emitted as `--density-*` custom properties: `:root` carries the
+   * default tier, `[data-density="compact"]` the editor-chrome tier.
+   * Components switch via the `compact:` Tailwind variant (same
+   * attribute); consumers can read the vars for bespoke controls. */
+  density: {
+    default: {
+      controlHeight: "32px",
+      inputHeight: "40px",
+      rowHeight: "36px",
+      text: "14px",
+      label: "12px",
+      menuItemHeight: "40px",
+      menuText: "14px",
+      paddingX: "12px",
+      radius: "8px",
+    },
+    compact: {
+      controlHeight: "24px",
+      inputHeight: "24px",
+      rowHeight: "28px",
+      text: "12px",
+      label: "11px",
+      menuItemHeight: "28px",
+      menuText: "13px",
+      paddingX: "8px",
+      radius: "5px",
+    },
+  },
+
   /* ============================================================== *
    *  Z-INDEX — semantic layering scale                              *
    * ============================================================== */

package/dist/chunk-RI6QJR2L.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/tokens.ts"],"names":[],"mappings":"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","file":"chunk-RI6QJR2L.js","sourcesContent":["// @hilum/ui/tokens — JS-first design tokens (D6).\n//\n// This module is the single source of truth for the Hilum visual identity.\n// A build step (scripts/build-tokens.mjs) reads the compiled output of this\n// file and emits dist/tokens.css for consumers to `@import`.\n//\n// Brand model: D8 — base palette is fixed here. Per-product overrides are\n//               applied at runtime via createTheme() in @hilum/ui/create-theme.\n// Color modes:  D7 — light + dark, both auto (`prefers-color-scheme`) and\n//                    explicit via `[data-theme]`.\n//\n// Core brand colors:\n//   brand.primary   #C100F1 — vivid purple — purple-500 on the scale below\n//   brand.secondary #FFF5BF — pale lemon   — butter-200 on the scale below\n//\n// ground — neutral spine for text, borders, and structure (values: Tailwind neutral)\n\nexport const tokens = {\n  /* ============================================================== *\n   *  PALETTE — concrete colors                                      *\n   * ============================================================== */\n\n  ground: {\n    50: \"#fafafa\",\n    100: \"#f5f5f5\",\n    200: \"#e5e5e5\",\n    300: \"#d4d4d4\",\n    400: \"#a3a3a3\",\n    500: \"#737373\",\n    600: \"#525252\",\n    700: \"#404040\",\n    800: \"#262626\",\n    900: \"#171717\",\n    950: \"#0a0a0a\",\n  },\n\n  // Pale lemon — anchor: butter-200 = #FFF5BF\n  butter: {\n    50: \"#ffffe8\",\n    100: \"#fffad0\",\n    200: \"#fff5bf\",\n    300: \"#fde870\",\n    400: \"#f6d42a\",\n    500: \"#dab010\",\n    600: \"#a88008\",\n    700: \"#7c5c04\",\n    800: \"#543e02\",\n    900: \"#382801\",\n    950: \"#221600\",\n  },\n\n  // Vivid purple — anchor: purple-500 = #C100F1 (brand.primary)\n  purple: {\n    50: \"#fdf0ff\",\n    100: \"#f5d6ff\",\n    200: \"#e8a8ff\",\n    300: \"#d870f9\",\n    400: \"#c840f6\",\n    500: \"#c100f1\",\n    600: \"#9c00c0\",\n    700: \"#740092\",\n    800: \"#4e0062\",\n    900: \"#330040\",\n    950: \"#200028\",\n  },\n\n  // Legacy functional colors — used by components not yet migrated to the new palette.\n  brand: {\n    primary: \"#C100F1\", // purple-500\n    secondary: \"#FFF5BF\", // butter-200\n  },\n\n  destructive: \"#dc2626\", // red-600\n\n  /* ============================================================== *\n   *  SEMANTIC — what components reference                           *\n   * ============================================================== */\n\n  semantic: {\n    light: {\n      background: \"#ffffff\",\n      foreground: \"#171717\", // ground-900\n      card: \"#ffffff\",\n      cardForeground: \"#171717\",\n      surface: \"#fafafa\", // ground-50\n      surfaceForeground: \"#262626\", // ground-800\n      border: \"#f5f5f5\", // ground-100\n      input: \"#f5f5f5\",\n      muted: \"#fafafa\",\n      mutedForeground: \"#737373\", // ground-500\n      accent: \"#fdf0ff\", // purple-50\n      accentForeground: \"#740092\", // purple-700\n      primary: \"#c100f1\", // purple-500 = brand.primary\n      primaryForeground: \"#ffffff\",\n      secondary: \"#fafafa\", // ground-50\n      secondaryForeground: \"#404040\", // ground-700\n      destructive: \"#dc2626\",\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#171717\",\n      warning: \"#fff5bf\", // butter-200 = brand.secondary\n      warningForeground: \"#171717\", // ground-900\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n    // Mid — a neutral medium-gray theme (from the Pappery designer \"mid\" palette,\n    // mapped onto the ground scale). Sits between light and dark.\n    mid: {\n      background: \"#737373\", // ground-500 — main surface (designer panel)\n      foreground: \"#fafafa\", // ground-50\n      card: \"#525252\", // ground-600 — elevated items (designer item-bg)\n      cardForeground: \"#fafafa\",\n      surface: \"#525252\", // ground-600 (designer canvas/pane)\n      surfaceForeground: \"#fafafa\",\n      border: \"#a3a3a3\", // ground-400 (designer border — lighter so it reads on the gray)\n      input: \"#404040\", // ground-700 (designer input-bg)\n      muted: \"#525252\", // ground-600\n      mutedForeground: \"#e5e5e5\", // ground-200 (designer text-secondary)\n      accent: \"#404040\", // ground-700 (designer item-hover-bg)\n      accentForeground: \"#fafafa\",\n      primary: \"#c100f1\", // brand stays consistent across themes\n      primaryForeground: \"#ffffff\",\n      secondary: \"#525252\", // ground-600\n      secondaryForeground: \"#fafafa\",\n      destructive: \"#ef4444\", // red-500\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#171717\",\n      warning: \"#fff5bf\", // butter-200\n      warningForeground: \"#171717\",\n      ring: \"#c100f1\",\n    },\n    dark: {\n      background: \"#171717\", // ground-900 — designer canvas (deepest)\n      foreground: \"#fafafa\", // ground-50\n      card: \"#262626\", // ground-800 — designer panel-bg (elevated over bg)\n      cardForeground: \"#fafafa\",\n      surface: \"#1a1a1a\", // designer item-hover depth\n      surfaceForeground: \"#f5f5f5\",\n      border: \"#404040\", // ground-700 — designer border (reads on the dark)\n      input: \"#262626\", // ground-800\n      muted: \"#262626\", // ground-800\n      mutedForeground: \"#a3a3a3\", // ground-400\n      accent: \"#404040\", // ground-700 — neutral elevated/hover (designer item-hover)\n      accentForeground: \"#fafafa\",\n      primary: \"#c100f1\", // purple-500 — brand stays consistent (D8)\n      primaryForeground: \"#ffffff\",\n      secondary: \"#262626\", // ground-800\n      secondaryForeground: \"#f5f5f5\",\n      destructive: \"#ef4444\", // red-500 (slightly lighter for dark)\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#0a0a0a\",\n      warning: \"#221600\", // butter-950 surface\n      warningForeground: \"#fffad0\", // butter-100\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n  },\n\n  /* ============================================================== *\n   *  TYPOGRAPHY                                                      *\n   * ============================================================== */\n\n  fontFamily: {\n    sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    display:\n      'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    mono: 'ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace',\n  },\n\n  /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */\n  typeScale: {\n    \"display-xl\": {\n      family: \"display\",\n      size: \"3rem\",\n      weight: 400,\n      lineHeight: \"1.15\",\n      textWrap: \"balance\",\n    },\n    display: {\n      family: \"display\",\n      size: \"2.25rem\",\n      weight: 400,\n      lineHeight: \"1.15\",\n      textWrap: \"balance\",\n    },\n    \"heading-xl\": {\n      family: \"display\",\n      size: \"1.875rem\",\n      weight: 400,\n      lineHeight: \"1.2\",\n      textWrap: \"balance\",\n    },\n    heading: {\n      family: \"display\",\n      size: \"1.5rem\",\n      weight: 400,\n      lineHeight: \"1.2\",\n      textWrap: \"balance\",\n    },\n    subheading: {\n      family: \"display\",\n      size: \"1.25rem\",\n      weight: 400,\n      lineHeight: \"1.4\",\n      textWrap: \"balance\",\n    },\n    \"body-lg\": {\n      family: \"sans\",\n      size: \"1rem\",\n      weight: 400,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    body: {\n      family: \"sans\",\n      size: \"0.875rem\",\n      weight: 400,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    \"body-sm\": {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 500,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    caption: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 400,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    \"caption-xs\": { family: \"sans\", size: \"0.625rem\", weight: 400, lineHeight: \"1.625\" },\n\n    /* --- \"Eyebrow\" family — uppercase tracked label used above headlines, --- *\n     *   on badges, and on section markers. `eyebrow` is the canonical name;   *\n     *   `overline` (Material parlance), `kicker` (editorial parlance) and     *\n     *   `label` (legacy) are aliases of the same scale so consumers can pick  *\n     *   whichever vocabulary reads best in their context. `eyebrow-sm` is    *\n     *   the compact variant for badge-sized chips and tiny status pills.      */\n    eyebrow: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    \"eyebrow-sm\": {\n      family: \"sans\",\n      size: \"0.625rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    overline: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    kicker: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    label: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n  },\n\n  /* ============================================================== *\n   *  GEOMETRY                                                        *\n   * ============================================================== */\n\n  radius: {\n    base: \"0.5rem\",\n    sm: \"calc(0.5rem - 4px)\",\n    md: \"calc(0.5rem - 2px)\",\n    lg: \"calc(0.5rem + 2px)\",\n    xl: \"calc(0.5rem + 4px)\",\n    full: \"9999px\",\n  },\n\n  /* ============================================================== *\n   *  Z-INDEX — semantic layering scale                              *\n   * ============================================================== */\n\n  zIndex: {\n    dropdown: 40,\n    sticky: 50,\n    fixed: 60,\n    modal: 100,\n    popover: 110,\n    tooltip: 120,\n  },\n\n  shadow: {\n    natural:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)\",\n    elevated:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)\",\n  },\n\n  /* ============================================================== *\n   *  ANIMATION                                                       *\n   * ============================================================== */\n\n  animation: {\n    \"accordion-down\": \"accordion-down 0.2s ease-out\",\n    \"accordion-up\": \"accordion-up 0.2s ease-out\",\n    \"caret-blink\": \"caret-blink 1.25s ease-out infinite\",\n    \"hilum-orbit\": \"hilum-orbit 1.4s ease-in-out infinite\",\n    \"hilum-spring-in\": \"hilum-spring-in 180ms cubic-bezier(0.2, 0.9, 0.2, 1.15)\",\n    \"hilum-thinking\": \"hilum-thinking 1.1s ease-in-out infinite\",\n  },\n} as const;\n\nexport type Tokens = typeof tokens;\nexport type SemanticTokens = typeof tokens.semantic.light;\n"]}