npm - @openkeyai/ui - Versions diffs - 0.1.0 → 1.0.0 - Mend

@openkeyai/ui 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/tailwind.js CHANGED Viewed

@@ -1,39 +1,83 @@
 // src/tokens.ts
-var tokens = {
-  color: {
-    /** App-wide canvas. Dark navy with a touch of indigo. */
-    bg: "#0a0c1a",
-    /** Surface a half-step lighter than `bg`. Card / panel default. */
-    surface: "#11142a",
-    /** Surface above `surface` — popovers, hover states. */
-    surfaceRaised: "#181d3a",
-    /** Primary readable text. */
-    foreground: "#e6e8f5",
-    /** Lower-emphasis text. Captions, metadata. */
-    foregroundMuted: "#9097b8",
-    /** Subtle border default for cards / dividers. */
-    border: "rgba(150, 160, 220, 0.12)",
-    /** Indigo-violet primary, softened so it doesn't blow out the bg. */
-    accent: "#7c6cf5",
-    /** Brighter accent for focus rings + active links. */
-    accentBright: "#9b8af9",
-    /** Destructive action accent. */
-    destructive: "#ef4459",
-    /** Success / positive accent. */
-    success: "#34d399"
+var darkPalette = {
+  /** App-wide canvas. Warm dark slate (oklch hue 35). */
+  bg: "oklch(0.13 0.008 35)",
+  /** Surface a half-step lighter than `bg`. Card / panel default. */
+  surface: "oklch(0.17 0.010 35)",
+  /** Surface above `surface` — popovers, hover states. */
+  surface1: "oklch(0.17 0.010 35)",
+  surface2: "oklch(0.21 0.012 35)",
+  surface3: "oklch(0.25 0.014 35)",
+  surface4: "oklch(0.29 0.016 35)",
+  surfaceRaised: "oklch(0.21 0.012 35)",
+  /** Primary readable text. */
+  foreground: "oklch(0.96 0.005 35)",
+  /** Lower-emphasis text. Captions, metadata. */
+  foregroundMuted: "oklch(0.74 0.008 35)",
+  /** Even lower emphasis — placeholder text, ghost labels. */
+  foregroundSubtle: "oklch(0.58 0.010 35)",
+  /** Subtle border default for cards / dividers. */
+  border: "oklch(1 0 0 / 0.08)",
+  /** Stronger border for inputs + outlined buttons. */
+  borderStrong: "oklch(1 0 0 / 0.14)",
+  /** Brand — warm coral (Material 3 key color, Claude warmth). */
+  accent: "oklch(0.76 0.17 35)",
+  /** Brighter accent for focus rings + active links. */
+  accentBright: "oklch(0.82 0.17 35)",
+  /** Tint that sits behind brand-on-brand content. */
+  accentContainer: "oklch(0.30 0.13 28 / 0.25)",
+  /** Text/icon color on top of accentContainer. */
+  onAccentContainer: "oklch(0.88 0.085 35)",
+  /** Text/icon color on top of solid accent. */
+  onAccent: "oklch(0.13 0.008 35)",
+  /** Destructive action accent — warmer than the old red. */
+  destructive: "oklch(0.74 0.18 28)",
+  /** Success / positive accent — sage. */
+  success: "oklch(0.84 0.08 150)",
+  /** Warning accent — amber. */
+  warning: "oklch(0.88 0.12 80)"
+};
+var shared = {
+  /** 4px base. Use multiples of these for layout — keeps the grid honest. */
+  space: {
+    px: "1px",
+    "0_5": "2px",
+    "1": "4px",
+    "1_5": "6px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px"
   },
+  /**
+   * Material 3 shape scale. Generous radii, predictable family. One
+   * radius per element — NO mixed-corner shapes.
+   */
   radius: {
-    sm: "4px",
-    md: "8px",
-    lg: "12px",
-    /** Default for cards and surfaces. */
-    xl: "16px",
-    "2xl": "20px"},
+    xs: "6px",
+    sm: "10px",
+    md: "14px",
+    lg: "20px",
+    xl: "28px",
+    "2xl": "36px",
+    full: "9999px"
+  },
   font: {
     /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
     sans: 'Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     /** Geist Mono for code + hashes + token displays. */
-    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+    /**
+     * Display — Roboto Flex (Apache 2.0 via Google Fonts). Consumer loads
+     * via next/font and exposes the CSS variable `--font-display`. If
+     * absent, falls back to the body sans.
+     */
+    display: "var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif)"
   },
   fontSize: {
     xs: "11px",
@@ -41,28 +85,54 @@ var tokens = {
     base: "14px",
     md: "16px",
     lg: "18px",
-    xl: "22px"
+    xl: "22px",
+    "2xl": "28px",
+    "3xl": "36px",
+    "4xl": "48px",
+    /** Big display moments (marketing hero). */
+    display: "60px"
   },
+  lineHeight: {
+    /** Display — tight, almost 1:1 to the cap height. */
+    display: "1.05",
+    /** Headlines. */
+    tight: "1.2",
+    /** UI. */
+    normal: "1.5",
+    /** Long-form. */
+    relaxed: "1.65"
+  },
+  /**
+   * Shadows — heavier in light (real visible shadow), lighter in dark
+   * (surface lift carries hierarchy; shadow is just a hairline tint).
+   *
+   * Values match the hub's `--next-shadow-*` tokens.
+   */
   shadow: {
-    /** Subtle pop on raised cards. */
-    sm: "0 1px 2px rgba(0, 0, 0, 0.25)",
-    /** Standard floating-pill / dropdown lift. */
-    md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)",
-    /** Modal-style. */
-    lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)"
+    /** Dark — cards, hover lift. */
+    sm: "0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)",
+    md: "0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)",
+    lg: "0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)",
+    /** Light — real shadow values for the light theme. */
+    smLight: "0 1px 2px oklch(0.13 0.008 35 / 0.06), 0 4px 12px oklch(0.13 0.008 35 / 0.06)",
+    mdLight: "0 2px 4px oklch(0.13 0.008 35 / 0.08), 0 12px 28px oklch(0.13 0.008 35 / 0.10)",
+    lgLight: "0 4px 8px oklch(0.13 0.008 35 / 0.10), 0 24px 56px oklch(0.13 0.008 35 / 0.14)"
   },
   motion: {
-    /** Default easing — feels good for most UI. */
-    ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+    /** Material easing — standard. Most UI transitions. */
+    easeStandard: "cubic-bezier(0.2, 0.0, 0.0, 1.0)",
+    /** Material easing — emphasized. Bigger surface motions. */
+    easeEmphasized: "cubic-bezier(0.05, 0.7, 0.1, 1.0)",
     /** Quick interactions — hover, focus. */
-    fast: "120ms",
-    /** Standard — most state transitions. */
-    normal: "180ms",
-    /** Used for entrance / exit animations. */
-    slow: "260ms"
+    fast: "160ms",
+    /** Standard — dialogs, surface moves. */
+    normal: "280ms",
+    /** Used for big route / page transitions. */
+    slow: "400ms"
   },
   /** Z-index scale. Use these names, never raw numbers. */
   z: {
+    base: 0,
     raised: 10,
     sticky: 30,
     /** HubHeader sits here. */
@@ -77,6 +147,11 @@ var tokens = {
     headerHeight: "56px"
   }
 };
+var darkTokens = {
+  color: darkPalette,
+  ...shared
+};
+var tokens = darkTokens;
 // src/tailwind.ts
 var hubTailwindPreset = {
@@ -85,16 +160,27 @@ var hubTailwindPreset = {
       colors: {
         "okai-bg": tokens.color.bg,
         "okai-surface": tokens.color.surface,
+        "okai-surface-1": tokens.color.surface1,
+        "okai-surface-2": tokens.color.surface2,
+        "okai-surface-3": tokens.color.surface3,
+        "okai-surface-4": tokens.color.surface4,
         "okai-surface-raised": tokens.color.surfaceRaised,
         "okai-foreground": tokens.color.foreground,
         "okai-foreground-muted": tokens.color.foregroundMuted,
+        "okai-foreground-subtle": tokens.color.foregroundSubtle,
         "okai-border": tokens.color.border,
+        "okai-border-strong": tokens.color.borderStrong,
         "okai-accent": tokens.color.accent,
         "okai-accent-bright": tokens.color.accentBright,
+        "okai-accent-container": tokens.color.accentContainer,
+        "okai-on-accent": tokens.color.onAccent,
+        "okai-on-accent-container": tokens.color.onAccentContainer,
         "okai-destructive": tokens.color.destructive,
-        "okai-success": tokens.color.success
+        "okai-success": tokens.color.success,
+        "okai-warning": tokens.color.warning
       },
       borderRadius: {
+        "okai-xs": tokens.radius.xs,
         "okai-sm": tokens.radius.sm,
         "okai-md": tokens.radius.md,
         "okai-lg": tokens.radius.lg,
@@ -103,7 +189,8 @@ var hubTailwindPreset = {
       },
       fontFamily: {
         "okai-sans": tokens.font.sans.split(",").map((s) => s.trim()),
-        "okai-mono": tokens.font.mono.split(",").map((s) => s.trim())
+        "okai-mono": tokens.font.mono.split(",").map((s) => s.trim()),
+        "okai-display": tokens.font.display.split(",").map((s) => s.trim())
       },
       fontSize: {
         "okai-xs": tokens.fontSize.xs,
@@ -111,7 +198,11 @@ var hubTailwindPreset = {
         "okai-base": tokens.fontSize.base,
         "okai-md": tokens.fontSize.md,
         "okai-lg": tokens.fontSize.lg,
-        "okai-xl": tokens.fontSize.xl
+        "okai-xl": tokens.fontSize.xl,
+        "okai-2xl": tokens.fontSize["2xl"],
+        "okai-3xl": tokens.fontSize["3xl"],
+        "okai-4xl": tokens.fontSize["4xl"],
+        "okai-display": tokens.fontSize.display
       },
       boxShadow: {
         "okai-sm": tokens.shadow.sm,
@@ -119,7 +210,8 @@ var hubTailwindPreset = {
         "okai-lg": tokens.shadow.lg
       },
       transitionTimingFunction: {
-        "okai-ease": tokens.motion.ease
+        "okai-ease": tokens.motion.easeStandard,
+        "okai-ease-emphasized": tokens.motion.easeEmphasized
       },
       transitionDuration: {
         "okai-fast": tokens.motion.fast.replace("ms", ""),

package/dist/tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/tokens.ts","../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.js","sourcesContent":["/*\n Design tokens — colors, spacing, typography, radius, motion.\n \n Frozen-ish: visual changes that affect layout (header height, spacing\n * scale, font sizes) require coordinated checks against deployed tools.\n * See ../CLAUDE.md.\n \n Two consumption styles:\n * 1. As CSS custom properties — import `@openkeyai/ui/css` and use\n * `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n * 2. As a JS object — `import { tokens } from \"@openkeyai/ui/tokens\"`\n * for programmatic colour pickups (charts, gradients).\n \n The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n /\n\nexport const tokens = {\n color: {\n /* App-wide canvas. Dark navy with a touch of indigo. /\n bg: \"#0a0c1a\",\n /* Surface a half-step lighter than `bg`. Card / panel default. /\n surface: \"#11142a\",\n /* Surface above `surface` — popovers, hover states. /\n surfaceRaised: \"#181d3a\",\n /* Primary readable text. /\n foreground: \"#e6e8f5\",\n /* Lower-emphasis text. Captions, metadata. /\n foregroundMuted: \"#9097b8\",\n /* Subtle border default for cards / dividers. /\n border: \"rgba(150, 160, 220, 0.12)\",\n /* Indigo-violet primary, softened so it doesn't blow out the bg. /\n accent: \"#7c6cf5\",\n /* Brighter accent for focus rings + active links. /\n accentBright: \"#9b8af9\",\n /* Destructive action accent. /\n destructive: \"#ef4459\",\n /* Success / positive accent. /\n success: \"#34d399\",\n },\n /* 4px base. Use multiples of these for layout — keeps the grid honest. /\n space: {\n px: \"1px\",\n \"0_5\": \"2px\",\n \"1\": \"4px\",\n \"1_5\": \"6px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n },\n radius: {\n sm: \"4px\",\n md: \"8px\",\n lg: \"12px\",\n /* Default for cards and surfaces. /\n xl: \"16px\",\n \"2xl\": \"20px\",\n full: \"9999px\",\n },\n font: {\n /* Geist Sans — opt-in by the consumer's stack. We just suggest it. /\n sans:\n \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n '\"Segoe UI\", Roboto, sans-serif',\n /* Geist Mono for code + hashes + token displays. /\n mono:\n \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n '\"Liberation Mono\", monospace',\n },\n fontSize: {\n xs: \"11px\",\n sm: \"13px\",\n base: \"14px\",\n md: \"16px\",\n lg: \"18px\",\n xl: \"22px\",\n },\n lineHeight: {\n tight: \"1.2\",\n normal: \"1.5\",\n relaxed: \"1.65\",\n },\n shadow: {\n /* Subtle pop on raised cards. /\n sm: \"0 1px 2px rgba(0, 0, 0, 0.25)\",\n /* Standard floating-pill / dropdown lift. /\n md: \"0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)\",\n /* Modal-style. /\n lg: \"0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)\",\n },\n motion: {\n /* Default easing — feels good for most UI. /\n ease: \"cubic-bezier(0.4, 0.0, 0.2, 1)\",\n /* Quick interactions — hover, focus. /\n fast: \"120ms\",\n /* Standard — most state transitions. /\n normal: \"180ms\",\n /* Used for entrance / exit animations. /\n slow: \"260ms\",\n },\n /* Z-index scale. Use these names, never raw numbers. /\n z: {\n base: 0,\n raised: 10,\n sticky: 30,\n /* HubHeader sits here. /\n header: 40,\n overlay: 50,\n modal: 60,\n toast: 70,\n },\n /* Component-specific dimensions. /\n size: {\n /* HubHeader height. Tools should leave this much top padding. /\n headerHeight: \"56px\",\n },\n} as const;\n\nexport type DesignTokens = typeof tokens;\n","import { tokens } from \"./tokens\";\n\n/\n Tailwind preset for `@openkeyai/ui` consumers.\n \n Drop into a tool's `tailwind.config.ts`:\n \n import { hubTailwindPreset } from \"@openkeyai/ui/tailwind\";\n * export default {\n * presets: [hubTailwindPreset],\n * content: [...],\n * } satisfies Config;\n \n The preset extends Tailwind's theme with the hub's tokens. It does NOT\n * override Tailwind's defaults — tools can still use the full standard\n * scale alongside the hub additions. Hub-flavoured names are prefixed with\n * `okai-` to avoid colliding with Tailwind's own colour names.\n \n We intentionally don't `require(\"tailwindcss\")` here — `tailwind` is a\n * peer concern of the consumer's stack and isn't a dep of this package.\n */\nexport const hubTailwindPreset = {\n theme: {\n extend: {\n colors: {\n \"okai-bg\": tokens.color.bg,\n \"okai-surface\": tokens.color.surface,\n \"okai-surface-raised\": tokens.color.surfaceRaised,\n \"okai-foreground\": tokens.color.foreground,\n \"okai-foreground-muted\": tokens.color.foregroundMuted,\n \"okai-border\": tokens.color.border,\n \"okai-accent\": tokens.color.accent,\n \"okai-accent-bright\": tokens.color.accentBright,\n \"okai-destructive\": tokens.color.destructive,\n \"okai-success\": tokens.color.success,\n },\n borderRadius: {\n \"okai-sm\": tokens.radius.sm,\n \"okai-md\": tokens.radius.md,\n \"okai-lg\": tokens.radius.lg,\n \"okai-xl\": tokens.radius.xl,\n \"okai-2xl\": tokens.radius[\"2xl\"],\n },\n fontFamily: {\n \"okai-sans\": tokens.font.sans.split(\",\").map((s) => s.trim()),\n \"okai-mono\": tokens.font.mono.split(\",\").map((s) => s.trim()),\n },\n fontSize: {\n \"okai-xs\": tokens.fontSize.xs,\n \"okai-sm\": tokens.fontSize.sm,\n \"okai-base\": tokens.fontSize.base,\n \"okai-md\": tokens.fontSize.md,\n \"okai-lg\": tokens.fontSize.lg,\n \"okai-xl\": tokens.fontSize.xl,\n },\n boxShadow: {\n \"okai-sm\": tokens.shadow.sm,\n \"okai-md\": tokens.shadow.md,\n \"okai-lg\": tokens.shadow.lg,\n },\n transitionTimingFunction: {\n \"okai-ease\": tokens.motion.ease,\n },\n transitionDuration: {\n \"okai-fast\": tokens.motion.fast.replace(\"ms\", \"\"),\n \"okai-normal\": tokens.motion.normal.replace(\"ms\", \"\"),\n \"okai-slow\": tokens.motion.slow.replace(\"ms\", \"\"),\n },\n zIndex: {\n \"okai-raised\": String(tokens.z.raised),\n \"okai-sticky\": String(tokens.z.sticky),\n \"okai-header\": String(tokens.z.header),\n \"okai-overlay\": String(tokens.z.overlay),\n \"okai-modal\": String(tokens.z.modal),\n \"okai-toast\": String(tokens.z.toast),\n },\n spacing: {\n \"okai-header\": tokens.size.headerHeight,\n },\n },\n },\n} as const;\n\nexport type HubTailwindPreset = typeof hubTailwindPreset;\n\n// Default export so it can also be consumed via\n// `import preset from \"@openkeyai/ui/tailwind\"`.\nexport default hubTailwindPreset;\n"]}
1	+ {"version":3,"sources":["../src/tokens.ts","../src/tailwind.ts"],"names":[],"mappings":";AA2BA,IAAM,WAAA,GAAc;AAAA;AAAA,EAElB,EAAA,EAAI,sBAAA;AAAA;AAAA,EAEJ,OAAA,EAAS,sBAAA;AAAA;AAAA,EAET,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,aAAA,EAAe,sBAAA;AAAA;AAAA,EAEf,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,eAAA,EAAiB,sBAAA;AAAA;AAAA,EAEjB,gBAAA,EAAkB,sBAAA;AAAA;AAAA,EAElB,MAAA,EAAQ,qBAAA;AAAA;AAAA,EAER,YAAA,EAAc,qBAAA;AAAA;AAAA,EAEd,MAAA,EAAQ,qBAAA;AAAA;AAAA,EAER,YAAA,EAAc,qBAAA;AAAA;AAAA,EAEd,eAAA,EAAiB,4BAAA;AAAA;AAAA,EAEjB,iBAAA,EAAmB,sBAAA;AAAA;AAAA,EAEnB,QAAA,EAAU,sBAAA;AAAA;AAAA,EAEV,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,OAAA,EAAS,sBAAA;AAAA;AAAA,EAET,OAAA,EAAS;AACX,CAAA;AA6BA,IAAM,MAAA,GAAS;AAAA;AAAA,EAEb,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,KAAA;AAAA,IACJ,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,MAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,IAAA,EAAM;AAAA;AAAA,IAEJ,IAAA,EACE,oGAAA;AAAA;AAAA,IAGF,IAAA,EACE,iGAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOF,OAAA,EACE;AAAA,GACJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,MAAA;AAAA,IACP,KAAA,EAAO,MAAA;AAAA,IACP,KAAA,EAAO,MAAA;AAAA;AAAA,IAEP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,UAAA,EAAY;AAAA;AAAA,IAEV,OAAA,EAAS,MAAA;AAAA;AAAA,IAET,KAAA,EAAO,KAAA;AAAA;AAAA,IAEP,MAAA,EAAQ,KAAA;AAAA;AAAA,IAER,OAAA,EAAS;AAAA,GACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAA,EAAQ;AAAA;AAAA,IAEN,EAAA,EACE,6DAAA;AAAA,IACF,EAAA,EACE,8DAAA;AAAA,IACF,EAAA,EACE,8DAAA;AAAA;AAAA,IAEF,OAAA,EACE,+EAAA;AAAA,IACF,OAAA,EACE,gFAAA;AAAA,IACF,OAAA,EACE;AAAA,GACJ;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,YAAA,EAAc,kCAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,mCAAA;AAAA;AAAA,IAEhB,IAAA,EAAM,OAAA;AAAA;AAAA,IAEN,MAAA,EAAQ,OAAA;AAAA;AAAA,IAER,IAAA,EAAM;AAAA,GACR;AAAA;AAAA,EAEA,CAAA,EAAG;AAAA,IACD,IAAA,EAAM,CAAA;AAAA,IACN,MAAA,EAAQ,EAAA;AAAA,IACR,MAAA,EAAQ,EAAA;AAAA;AAAA,IAER,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,EAAA;AAAA,IACT,KAAA,EAAO,EAAA;AAAA,IACP,KAAA,EAAO;AAAA,GACT;AAAA;AAAA,EAEA,IAAA,EAAM;AAAA;AAAA,IAEJ,YAAA,EAAc;AAAA;AAElB,CAAA;AASO,IAAM,UAAA,GAAa;AAAA,EACxB,KAAA,EAAO,WAAA;AAAA,EACP,GAAG;AACL,CAAA;AAaO,IAAM,MAAA,GAAS,UAAA;;;ACzNf,IAAM,iBAAA,GAAoB;AAAA,EAC/B,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW,OAAO,KAAA,CAAM,EAAA;AAAA,QACxB,cAAA,EAAgB,OAAO,KAAA,CAAM,OAAA;AAAA,QAC7B,gBAAA,EAAkB,OAAO,KAAA,CAAM,QAAA;AAAA,QAC/B,gBAAA,EAAkB,OAAO,KAAA,CAAM,QAAA;AAAA,QAC/B,gBAAA,EAAkB,OAAO,KAAA,CAAM,QAAA;AAAA,QAC/B,gBAAA,EAAkB,OAAO,KAAA,CAAM,QAAA;AAAA,QAC/B,qBAAA,EAAuB,OAAO,KAAA,CAAM,aAAA;AAAA,QACpC,iBAAA,EAAmB,OAAO,KAAA,CAAM,UAAA;AAAA,QAChC,uBAAA,EAAyB,OAAO,KAAA,CAAM,eAAA;AAAA,QACtC,wBAAA,EAA0B,OAAO,KAAA,CAAM,gBAAA;AAAA,QACvC,aAAA,EAAe,OAAO,KAAA,CAAM,MAAA;AAAA,QAC5B,oBAAA,EAAsB,OAAO,KAAA,CAAM,YAAA;AAAA,QACnC,aAAA,EAAe,OAAO,KAAA,CAAM,MAAA;AAAA,QAC5B,oBAAA,EAAsB,OAAO,KAAA,CAAM,YAAA;AAAA,QACnC,uBAAA,EAAyB,OAAO,KAAA,CAAM,eAAA;AAAA,QACtC,gBAAA,EAAkB,OAAO,KAAA,CAAM,QAAA;AAAA,QAC/B,0BAAA,EAA4B,OAAO,KAAA,CAAM,iBAAA;AAAA,QACzC,kBAAA,EAAoB,OAAO,KAAA,CAAM,WAAA;AAAA,QACjC,cAAA,EAAgB,OAAO,KAAA,CAAM,OAAA;AAAA,QAC7B,cAAA,EAAgB,OAAO,KAAA,CAAM;AAAA,OAC/B;AAAA,MACA,YAAA,EAAc;AAAA,QACZ,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,KAAK;AAAA,OACjC;AAAA,MACA,UAAA,EAAY;AAAA,QACV,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,IAAA,CAAK,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,EAAM,CAAA;AAAA,QAC5D,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,IAAA,CAAK,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,EAAM,CAAA;AAAA,QAC5D,cAAA,EAAgB,MAAA,CAAO,IAAA,CAAK,OAAA,CAAQ,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,EAAM;AAAA,OACpE;AAAA,MACA,QAAA,EAAU;AAAA,QACR,SAAA,EAAW,OAAO,QAAA,CAAS,EAAA;AAAA,QAC3B,SAAA,EAAW,OAAO,QAAA,CAAS,EAAA;AAAA,QAC3B,WAAA,EAAa,OAAO,QAAA,CAAS,IAAA;AAAA,QAC7B,SAAA,EAAW,OAAO,QAAA,CAAS,EAAA;AAAA,QAC3B,SAAA,EAAW,OAAO,QAAA,CAAS,EAAA;AAAA,QAC3B,SAAA,EAAW,OAAO,QAAA,CAAS,EAAA;AAAA,QAC3B,UAAA,EAAY,MAAA,CAAO,QAAA,CAAS,KAAK,CAAA;AAAA,QACjC,UAAA,EAAY,MAAA,CAAO,QAAA,CAAS,KAAK,CAAA;AAAA,QACjC,UAAA,EAAY,MAAA,CAAO,QAAA,CAAS,KAAK,CAAA;AAAA,QACjC,cAAA,EAAgB,OAAO,QAAA,CAAS;AAAA,OAClC;AAAA,MACA,SAAA,EAAW;AAAA,QACT,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,SAAA,EAAW,OAAO,MAAA,CAAO,EAAA;AAAA,QACzB,SAAA,EAAW,OAAO,MAAA,CAAO;AAAA,OAC3B;AAAA,MACA,wBAAA,EAA0B;AAAA,QACxB,WAAA,EAAa,OAAO,MAAA,CAAO,YAAA;AAAA,QAC3B,sBAAA,EAAwB,OAAO,MAAA,CAAO;AAAA,OACxC;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,aAAa,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA,CAAQ,MAAM,EAAE,CAAA;AAAA,QAChD,eAAe,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,MAAM,EAAE,CAAA;AAAA,QACpD,aAAa,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA,CAAQ,MAAM,EAAE;AAAA,OAClD;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe,MAAA,CAAO,MAAA,CAAO,CAAA,CAAE,MAAM,CAAA;AAAA,QACrC,aAAA,EAAe,MAAA,CAAO,MAAA,CAAO,CAAA,CAAE,MAAM,CAAA;AAAA,QACrC,aAAA,EAAe,MAAA,CAAO,MAAA,CAAO,CAAA,CAAE,MAAM,CAAA;AAAA,QACrC,cAAA,EAAgB,MAAA,CAAO,MAAA,CAAO,CAAA,CAAE,OAAO,CAAA;AAAA,QACvC,YAAA,EAAc,MAAA,CAAO,MAAA,CAAO,CAAA,CAAE,KAAK,CAAA;AAAA,QACnC,YAAA,EAAc,MAAA,CAAO,MAAA,CAAO,CAAA,CAAE,KAAK;AAAA,OACrC;AAAA,MACA,OAAA,EAAS;AAAA,QACP,aAAA,EAAe,OAAO,IAAA,CAAK;AAAA;AAC7B;AACF;AAEJ;AAMA,IAAO,gBAAA,GAAQ","file":"tailwind.js","sourcesContent":["/*\n Design tokens — colors, spacing, typography, radius, motion.\n \n v1.0.0 — major version: palette swap from cool indigo-violet to\n * warm coral, Material 3 elevation model, light + dark themes,\n * Roboto Flex display font. See README for the migration map and the\n * `hub` repo's `docs/DESIGN.md` for the language behind the choices.\n \n Two consumption styles:\n * 1. As CSS custom properties — import `@openkeyai/ui/css` and use\n * `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n * 2. As a JS object — `import { tokens, darkTokens, lightTokens }`\n * from \"@openkeyai/ui/tokens\" for programmatic colour pickups\n * (charts, gradients).\n \n The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n \n Dark is the default. Light mode is opt-in by the consumer:\n \n <html data-theme=\"light\">\n \n Switches every `--okai-` color variable to the light palette.\n /\n\n/* ─── Dark palette (default) ──────────────────────────────────────────────── /\n\nconst darkPalette = {\n /* App-wide canvas. Warm dark slate (oklch hue 35). /\n bg: \"oklch(0.13 0.008 35)\",\n /* Surface a half-step lighter than `bg`. Card / panel default. /\n surface: \"oklch(0.17 0.010 35)\",\n /* Surface above `surface` — popovers, hover states. /\n surface1: \"oklch(0.17 0.010 35)\",\n surface2: \"oklch(0.21 0.012 35)\",\n surface3: \"oklch(0.25 0.014 35)\",\n surface4: \"oklch(0.29 0.016 35)\",\n surfaceRaised: \"oklch(0.21 0.012 35)\",\n /* Primary readable text. /\n foreground: \"oklch(0.96 0.005 35)\",\n /* Lower-emphasis text. Captions, metadata. /\n foregroundMuted: \"oklch(0.74 0.008 35)\",\n /* Even lower emphasis — placeholder text, ghost labels. /\n foregroundSubtle: \"oklch(0.58 0.010 35)\",\n /* Subtle border default for cards / dividers. /\n border: \"oklch(1 0 0 / 0.08)\",\n /* Stronger border for inputs + outlined buttons. /\n borderStrong: \"oklch(1 0 0 / 0.14)\",\n /* Brand — warm coral (Material 3 key color, Claude warmth). /\n accent: \"oklch(0.76 0.17 35)\",\n /* Brighter accent for focus rings + active links. /\n accentBright: \"oklch(0.82 0.17 35)\",\n /* Tint that sits behind brand-on-brand content. /\n accentContainer: \"oklch(0.30 0.13 28 / 0.25)\",\n /* Text/icon color on top of accentContainer. /\n onAccentContainer: \"oklch(0.88 0.085 35)\",\n /* Text/icon color on top of solid accent. /\n onAccent: \"oklch(0.13 0.008 35)\",\n /* Destructive action accent — warmer than the old red. /\n destructive: \"oklch(0.74 0.18 28)\",\n /* Success / positive accent — sage. /\n success: \"oklch(0.84 0.08 150)\",\n /* Warning accent — amber. /\n warning: \"oklch(0.88 0.12 80)\",\n} as const;\n\n/ ─── Light palette (opt-in via data-theme=\"light\") ───────────────────────── /\n\nconst lightPalette = {\n bg: \"oklch(0.985 0.005 35)\",\n surface: \"oklch(1 0 0)\",\n surface1: \"oklch(1 0 0)\",\n surface2: \"oklch(0.96 0.006 35)\",\n surface3: \"oklch(0.93 0.008 35)\",\n surface4: \"oklch(0.90 0.010 35)\",\n surfaceRaised: \"oklch(0.96 0.006 35)\",\n foreground: \"oklch(0.18 0.012 35)\",\n foregroundMuted: \"oklch(0.42 0.012 50)\",\n foregroundSubtle: \"oklch(0.58 0.010 50)\",\n border: \"oklch(0 0 0 / 0.08)\",\n borderStrong: \"oklch(0 0 0 / 0.16)\",\n accent: \"oklch(0.64 0.21 30)\",\n accentBright: \"oklch(0.56 0.20 28)\",\n accentContainer: \"oklch(0.93 0.045 35)\",\n onAccentContainer: \"oklch(0.30 0.13 28)\",\n onAccent: \"oklch(1 0 0)\",\n destructive: \"oklch(0.55 0.21 28)\",\n success: \"oklch(0.52 0.10 150)\",\n warning: \"oklch(0.60 0.15 70)\",\n} as const;\n\n/ ─── Shared (theme-invariant) ────────────────────────────────────────────── /\n\nconst shared = {\n /* 4px base. Use multiples of these for layout — keeps the grid honest. /\n space: {\n px: \"1px\",\n \"0_5\": \"2px\",\n \"1\": \"4px\",\n \"1_5\": \"6px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n },\n /\n Material 3 shape scale. Generous radii, predictable family. One\n * radius per element — NO mixed-corner shapes.\n /\n radius: {\n xs: \"6px\",\n sm: \"10px\",\n md: \"14px\",\n lg: \"20px\",\n xl: \"28px\",\n \"2xl\": \"36px\",\n full: \"9999px\",\n },\n font: {\n /* Geist Sans — opt-in by the consumer's stack. We just suggest it. /\n sans:\n \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n '\"Segoe UI\", Roboto, sans-serif',\n /* Geist Mono for code + hashes + token displays. /\n mono:\n \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n '\"Liberation Mono\", monospace',\n /\n Display — Roboto Flex (Apache 2.0 via Google Fonts). Consumer loads\n * via next/font and exposes the CSS variable `--font-display`. If\n * absent, falls back to the body sans.\n /\n display:\n \"var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif)\",\n },\n fontSize: {\n xs: \"11px\",\n sm: \"13px\",\n base: \"14px\",\n md: \"16px\",\n lg: \"18px\",\n xl: \"22px\",\n \"2xl\": \"28px\",\n \"3xl\": \"36px\",\n \"4xl\": \"48px\",\n /* Big display moments (marketing hero). /\n display: \"60px\",\n },\n lineHeight: {\n /* Display — tight, almost 1:1 to the cap height. /\n display: \"1.05\",\n /* Headlines. /\n tight: \"1.2\",\n /* UI. /\n normal: \"1.5\",\n /* Long-form. /\n relaxed: \"1.65\",\n },\n /\n Shadows — heavier in light (real visible shadow), lighter in dark\n * (surface lift carries hierarchy; shadow is just a hairline tint).\n \n Values match the hub's `--next-shadow-` tokens.\n /\n shadow: {\n /** Dark — cards, hover lift. /\n sm:\n \"0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)\",\n md:\n \"0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)\",\n lg:\n \"0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)\",\n /* Light — real shadow values for the light theme. /\n smLight:\n \"0 1px 2px oklch(0.13 0.008 35 / 0.06), 0 4px 12px oklch(0.13 0.008 35 / 0.06)\",\n mdLight:\n \"0 2px 4px oklch(0.13 0.008 35 / 0.08), 0 12px 28px oklch(0.13 0.008 35 / 0.10)\",\n lgLight:\n \"0 4px 8px oklch(0.13 0.008 35 / 0.10), 0 24px 56px oklch(0.13 0.008 35 / 0.14)\",\n },\n motion: {\n /* Material easing — standard. Most UI transitions. /\n easeStandard: \"cubic-bezier(0.2, 0.0, 0.0, 1.0)\",\n /* Material easing — emphasized. Bigger surface motions. /\n easeEmphasized: \"cubic-bezier(0.05, 0.7, 0.1, 1.0)\",\n /* Quick interactions — hover, focus. /\n fast: \"160ms\",\n /* Standard — dialogs, surface moves. /\n normal: \"280ms\",\n /* Used for big route / page transitions. /\n slow: \"400ms\",\n },\n /* Z-index scale. Use these names, never raw numbers. /\n z: {\n base: 0,\n raised: 10,\n sticky: 30,\n /* HubHeader sits here. /\n header: 40,\n overlay: 50,\n modal: 60,\n toast: 70,\n },\n /* Component-specific dimensions. /\n size: {\n /* HubHeader height. Tools should leave this much top padding. /\n headerHeight: \"56px\",\n },\n} as const;\n\n/ ─── Exports ─────────────────────────────────────────────────────────────── /\n\n/\n Tokens for the dark theme (default). For programmatic use; UI\n * components should reference the CSS variables in styles.css which\n * automatically swap to the light palette when `data-theme=\"light\"`.\n /\nexport const darkTokens = {\n color: darkPalette,\n ...shared,\n} as const;\n\n/* Tokens for the light theme. /\nexport const lightTokens = {\n color: lightPalette,\n ...shared,\n} as const;\n\n/\n Default `tokens` export — dark palette. Kept for backwards\n * compatibility with v0.x callers that did `tokens.color.bg`. The shape\n * is unchanged; only color values have shifted from cool to warm.\n /\nexport const tokens = darkTokens;\n\nexport type DesignTokens = typeof tokens;\n\n/* Names for theming. Use to coerce stringly-typed data into the union. /\nexport type ThemeName = \"dark\" \| \"light\";\n","import { tokens } from \"./tokens\";\n\n/\n Tailwind preset for `@openkeyai/ui` consumers.\n \n Drop into a tool's `tailwind.config.ts`:\n \n import { hubTailwindPreset } from \"@openkeyai/ui/tailwind\";\n * export default {\n * presets: [hubTailwindPreset],\n * content: [...],\n * } satisfies Config;\n \n The preset extends Tailwind's theme with the hub's tokens. It does NOT\n * override Tailwind's defaults — tools can still use the full standard\n * scale alongside the hub additions. Hub-flavoured names are prefixed with\n * `okai-` to avoid colliding with Tailwind's own colour names.\n \n We intentionally don't `require(\"tailwindcss\")` here — `tailwind` is a\n * peer concern of the consumer's stack and isn't a dep of this package.\n */\nexport const hubTailwindPreset = {\n theme: {\n extend: {\n colors: {\n \"okai-bg\": tokens.color.bg,\n \"okai-surface\": tokens.color.surface,\n \"okai-surface-1\": tokens.color.surface1,\n \"okai-surface-2\": tokens.color.surface2,\n \"okai-surface-3\": tokens.color.surface3,\n \"okai-surface-4\": tokens.color.surface4,\n \"okai-surface-raised\": tokens.color.surfaceRaised,\n \"okai-foreground\": tokens.color.foreground,\n \"okai-foreground-muted\": tokens.color.foregroundMuted,\n \"okai-foreground-subtle\": tokens.color.foregroundSubtle,\n \"okai-border\": tokens.color.border,\n \"okai-border-strong\": tokens.color.borderStrong,\n \"okai-accent\": tokens.color.accent,\n \"okai-accent-bright\": tokens.color.accentBright,\n \"okai-accent-container\": tokens.color.accentContainer,\n \"okai-on-accent\": tokens.color.onAccent,\n \"okai-on-accent-container\": tokens.color.onAccentContainer,\n \"okai-destructive\": tokens.color.destructive,\n \"okai-success\": tokens.color.success,\n \"okai-warning\": tokens.color.warning,\n },\n borderRadius: {\n \"okai-xs\": tokens.radius.xs,\n \"okai-sm\": tokens.radius.sm,\n \"okai-md\": tokens.radius.md,\n \"okai-lg\": tokens.radius.lg,\n \"okai-xl\": tokens.radius.xl,\n \"okai-2xl\": tokens.radius[\"2xl\"],\n },\n fontFamily: {\n \"okai-sans\": tokens.font.sans.split(\",\").map((s) => s.trim()),\n \"okai-mono\": tokens.font.mono.split(\",\").map((s) => s.trim()),\n \"okai-display\": tokens.font.display.split(\",\").map((s) => s.trim()),\n },\n fontSize: {\n \"okai-xs\": tokens.fontSize.xs,\n \"okai-sm\": tokens.fontSize.sm,\n \"okai-base\": tokens.fontSize.base,\n \"okai-md\": tokens.fontSize.md,\n \"okai-lg\": tokens.fontSize.lg,\n \"okai-xl\": tokens.fontSize.xl,\n \"okai-2xl\": tokens.fontSize[\"2xl\"],\n \"okai-3xl\": tokens.fontSize[\"3xl\"],\n \"okai-4xl\": tokens.fontSize[\"4xl\"],\n \"okai-display\": tokens.fontSize.display,\n },\n boxShadow: {\n \"okai-sm\": tokens.shadow.sm,\n \"okai-md\": tokens.shadow.md,\n \"okai-lg\": tokens.shadow.lg,\n },\n transitionTimingFunction: {\n \"okai-ease\": tokens.motion.easeStandard,\n \"okai-ease-emphasized\": tokens.motion.easeEmphasized,\n },\n transitionDuration: {\n \"okai-fast\": tokens.motion.fast.replace(\"ms\", \"\"),\n \"okai-normal\": tokens.motion.normal.replace(\"ms\", \"\"),\n \"okai-slow\": tokens.motion.slow.replace(\"ms\", \"\"),\n },\n zIndex: {\n \"okai-raised\": String(tokens.z.raised),\n \"okai-sticky\": String(tokens.z.sticky),\n \"okai-header\": String(tokens.z.header),\n \"okai-overlay\": String(tokens.z.overlay),\n \"okai-modal\": String(tokens.z.modal),\n \"okai-toast\": String(tokens.z.toast),\n },\n spacing: {\n \"okai-header\": tokens.size.headerHeight,\n },\n },\n },\n} as const;\n\nexport type HubTailwindPreset = typeof hubTailwindPreset;\n\n// Default export so it can also be consumed via\n// `import preset from \"@openkeyai/ui/tailwind\"`.\nexport default hubTailwindPreset;\n"]}

package/dist/tokens.cjs CHANGED Viewed

@@ -1,29 +1,67 @@
 'use strict';
 // src/tokens.ts
-var tokens = {
-  color: {
-    /** App-wide canvas. Dark navy with a touch of indigo. */
-    bg: "#0a0c1a",
-    /** Surface a half-step lighter than `bg`. Card / panel default. */
-    surface: "#11142a",
-    /** Surface above `surface` — popovers, hover states. */
-    surfaceRaised: "#181d3a",
-    /** Primary readable text. */
-    foreground: "#e6e8f5",
-    /** Lower-emphasis text. Captions, metadata. */
-    foregroundMuted: "#9097b8",
-    /** Subtle border default for cards / dividers. */
-    border: "rgba(150, 160, 220, 0.12)",
-    /** Indigo-violet primary, softened so it doesn't blow out the bg. */
-    accent: "#7c6cf5",
-    /** Brighter accent for focus rings + active links. */
-    accentBright: "#9b8af9",
-    /** Destructive action accent. */
-    destructive: "#ef4459",
-    /** Success / positive accent. */
-    success: "#34d399"
-  },
+var darkPalette = {
+  /** App-wide canvas. Warm dark slate (oklch hue 35). */
+  bg: "oklch(0.13 0.008 35)",
+  /** Surface a half-step lighter than `bg`. Card / panel default. */
+  surface: "oklch(0.17 0.010 35)",
+  /** Surface above `surface` — popovers, hover states. */
+  surface1: "oklch(0.17 0.010 35)",
+  surface2: "oklch(0.21 0.012 35)",
+  surface3: "oklch(0.25 0.014 35)",
+  surface4: "oklch(0.29 0.016 35)",
+  surfaceRaised: "oklch(0.21 0.012 35)",
+  /** Primary readable text. */
+  foreground: "oklch(0.96 0.005 35)",
+  /** Lower-emphasis text. Captions, metadata. */
+  foregroundMuted: "oklch(0.74 0.008 35)",
+  /** Even lower emphasis — placeholder text, ghost labels. */
+  foregroundSubtle: "oklch(0.58 0.010 35)",
+  /** Subtle border default for cards / dividers. */
+  border: "oklch(1 0 0 / 0.08)",
+  /** Stronger border for inputs + outlined buttons. */
+  borderStrong: "oklch(1 0 0 / 0.14)",
+  /** Brand — warm coral (Material 3 key color, Claude warmth). */
+  accent: "oklch(0.76 0.17 35)",
+  /** Brighter accent for focus rings + active links. */
+  accentBright: "oklch(0.82 0.17 35)",
+  /** Tint that sits behind brand-on-brand content. */
+  accentContainer: "oklch(0.30 0.13 28 / 0.25)",
+  /** Text/icon color on top of accentContainer. */
+  onAccentContainer: "oklch(0.88 0.085 35)",
+  /** Text/icon color on top of solid accent. */
+  onAccent: "oklch(0.13 0.008 35)",
+  /** Destructive action accent — warmer than the old red. */
+  destructive: "oklch(0.74 0.18 28)",
+  /** Success / positive accent — sage. */
+  success: "oklch(0.84 0.08 150)",
+  /** Warning accent — amber. */
+  warning: "oklch(0.88 0.12 80)"
+};
+var lightPalette = {
+  bg: "oklch(0.985 0.005 35)",
+  surface: "oklch(1 0 0)",
+  surface1: "oklch(1 0 0)",
+  surface2: "oklch(0.96 0.006 35)",
+  surface3: "oklch(0.93 0.008 35)",
+  surface4: "oklch(0.90 0.010 35)",
+  surfaceRaised: "oklch(0.96 0.006 35)",
+  foreground: "oklch(0.18 0.012 35)",
+  foregroundMuted: "oklch(0.42 0.012 50)",
+  foregroundSubtle: "oklch(0.58 0.010 50)",
+  border: "oklch(0 0 0 / 0.08)",
+  borderStrong: "oklch(0 0 0 / 0.16)",
+  accent: "oklch(0.64 0.21 30)",
+  accentBright: "oklch(0.56 0.20 28)",
+  accentContainer: "oklch(0.93 0.045 35)",
+  onAccentContainer: "oklch(0.30 0.13 28)",
+  onAccent: "oklch(1 0 0)",
+  destructive: "oklch(0.55 0.21 28)",
+  success: "oklch(0.52 0.10 150)",
+  warning: "oklch(0.60 0.15 70)"
+};
+var shared = {
   /** 4px base. Use multiples of these for layout — keeps the grid honest. */
   space: {
     px: "1px",
@@ -40,20 +78,30 @@ var tokens = {
     "12": "48px",
     "16": "64px"
   },
+  /**
+   * Material 3 shape scale. Generous radii, predictable family. One
+   * radius per element — NO mixed-corner shapes.
+   */
   radius: {
-    sm: "4px",
-    md: "8px",
-    lg: "12px",
-    /** Default for cards and surfaces. */
-    xl: "16px",
-    "2xl": "20px",
+    xs: "6px",
+    sm: "10px",
+    md: "14px",
+    lg: "20px",
+    xl: "28px",
+    "2xl": "36px",
     full: "9999px"
   },
   font: {
     /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
     sans: 'Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     /** Geist Mono for code + hashes + token displays. */
-    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+    /**
+     * Display — Roboto Flex (Apache 2.0 via Google Fonts). Consumer loads
+     * via next/font and exposes the CSS variable `--font-display`. If
+     * absent, falls back to the body sans.
+     */
+    display: "var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif)"
   },
   fontSize: {
     xs: "11px",
@@ -61,30 +109,50 @@ var tokens = {
     base: "14px",
     md: "16px",
     lg: "18px",
-    xl: "22px"
+    xl: "22px",
+    "2xl": "28px",
+    "3xl": "36px",
+    "4xl": "48px",
+    /** Big display moments (marketing hero). */
+    display: "60px"
   },
   lineHeight: {
+    /** Display — tight, almost 1:1 to the cap height. */
+    display: "1.05",
+    /** Headlines. */
     tight: "1.2",
+    /** UI. */
     normal: "1.5",
+    /** Long-form. */
     relaxed: "1.65"
   },
+  /**
+   * Shadows — heavier in light (real visible shadow), lighter in dark
+   * (surface lift carries hierarchy; shadow is just a hairline tint).
+   *
+   * Values match the hub's `--next-shadow-*` tokens.
+   */
   shadow: {
-    /** Subtle pop on raised cards. */
-    sm: "0 1px 2px rgba(0, 0, 0, 0.25)",
-    /** Standard floating-pill / dropdown lift. */
-    md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)",
-    /** Modal-style. */
-    lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)"
+    /** Dark — cards, hover lift. */
+    sm: "0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)",
+    md: "0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)",
+    lg: "0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)",
+    /** Light — real shadow values for the light theme. */
+    smLight: "0 1px 2px oklch(0.13 0.008 35 / 0.06), 0 4px 12px oklch(0.13 0.008 35 / 0.06)",
+    mdLight: "0 2px 4px oklch(0.13 0.008 35 / 0.08), 0 12px 28px oklch(0.13 0.008 35 / 0.10)",
+    lgLight: "0 4px 8px oklch(0.13 0.008 35 / 0.10), 0 24px 56px oklch(0.13 0.008 35 / 0.14)"
   },
   motion: {
-    /** Default easing — feels good for most UI. */
-    ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+    /** Material easing — standard. Most UI transitions. */
+    easeStandard: "cubic-bezier(0.2, 0.0, 0.0, 1.0)",
+    /** Material easing — emphasized. Bigger surface motions. */
+    easeEmphasized: "cubic-bezier(0.05, 0.7, 0.1, 1.0)",
     /** Quick interactions — hover, focus. */
-    fast: "120ms",
-    /** Standard — most state transitions. */
-    normal: "180ms",
-    /** Used for entrance / exit animations. */
-    slow: "260ms"
+    fast: "160ms",
+    /** Standard — dialogs, surface moves. */
+    normal: "280ms",
+    /** Used for big route / page transitions. */
+    slow: "400ms"
   },
   /** Z-index scale. Use these names, never raw numbers. */
   z: {
@@ -103,7 +171,18 @@ var tokens = {
     headerHeight: "56px"
   }
 };
+var darkTokens = {
+  color: darkPalette,
+  ...shared
+};
+var lightTokens = {
+  color: lightPalette,
+  ...shared
+};
+var tokens = darkTokens;
+exports.darkTokens = darkTokens;
+exports.lightTokens = lightTokens;
 exports.tokens = tokens;
 //# sourceMappingURL=tokens.cjs.map
 //# sourceMappingURL=tokens.cjs.map

package/dist/tokens.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":";;;AAiBO,IAAM,MAAA,GAAS;AAAA,EACpB,KAAA,EAAO;AAAA;AAAA,IAEL,EAAA,EAAI,SAAA;AAAA;AAAA,IAEJ,OAAA,EAAS,SAAA;AAAA;AAAA,IAET,aAAA,EAAe,SAAA;AAAA;AAAA,IAEf,UAAA,EAAY,SAAA;AAAA;AAAA,IAEZ,eAAA,EAAiB,SAAA;AAAA;AAAA,IAEjB,MAAA,EAAQ,2BAAA;AAAA;AAAA,IAER,MAAA,EAAQ,SAAA;AAAA;AAAA,IAER,YAAA,EAAc,SAAA;AAAA;AAAA,IAEd,WAAA,EAAa,SAAA;AAAA;AAAA,IAEb,OAAA,EAAS;AAAA,GACX;AAAA;AAAA,EAEA,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,KAAA;AAAA,IACJ,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA;AAAA,IAEJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,MAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,IAAA,EAAM;AAAA;AAAA,IAEJ,IAAA,EACE,oGAAA;AAAA;AAAA,IAGF,IAAA,EACE;AAAA,GAEJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,KAAA;AAAA,IACP,MAAA,EAAQ,KAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,EAAA,EAAI,+BAAA;AAAA;AAAA,IAEJ,EAAA,EAAI,kEAAA;AAAA;AAAA,IAEJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,IAAA,EAAM,gCAAA;AAAA;AAAA,IAEN,IAAA,EAAM,OAAA;AAAA;AAAA,IAEN,MAAA,EAAQ,OAAA;AAAA;AAAA,IAER,IAAA,EAAM;AAAA,GACR;AAAA;AAAA,EAEA,CAAA,EAAG;AAAA,IACD,IAAA,EAAM,CAAA;AAAA,IACN,MAAA,EAAQ,EAAA;AAAA,IACR,MAAA,EAAQ,EAAA;AAAA;AAAA,IAER,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,EAAA;AAAA,IACT,KAAA,EAAO,EAAA;AAAA,IACP,KAAA,EAAO;AAAA,GACT;AAAA;AAAA,EAEA,IAAA,EAAM;AAAA;AAAA,IAEJ,YAAA,EAAc;AAAA;AAElB","file":"tokens.cjs","sourcesContent":["/*\n Design tokens — colors, spacing, typography, radius, motion.\n \n Frozen-ish: visual changes that affect layout (header height, spacing\n * scale, font sizes) require coordinated checks against deployed tools.\n * See ../CLAUDE.md.\n \n Two consumption styles:\n * 1. As CSS custom properties — import `@openkeyai/ui/css` and use\n * `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n * 2. As a JS object — `import { tokens } from \"@openkeyai/ui/tokens\"`\n * for programmatic colour pickups (charts, gradients).\n \n The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n /\n\nexport const tokens = {\n color: {\n /* App-wide canvas. Dark navy with a touch of indigo. /\n bg: \"#0a0c1a\",\n /* Surface a half-step lighter than `bg`. Card / panel default. /\n surface: \"#11142a\",\n /* Surface above `surface` — popovers, hover states. /\n surfaceRaised: \"#181d3a\",\n /* Primary readable text. /\n foreground: \"#e6e8f5\",\n /* Lower-emphasis text. Captions, metadata. /\n foregroundMuted: \"#9097b8\",\n /* Subtle border default for cards / dividers. /\n border: \"rgba(150, 160, 220, 0.12)\",\n /* Indigo-violet primary, softened so it doesn't blow out the bg. /\n accent: \"#7c6cf5\",\n /* Brighter accent for focus rings + active links. /\n accentBright: \"#9b8af9\",\n /* Destructive action accent. /\n destructive: \"#ef4459\",\n /* Success / positive accent. /\n success: \"#34d399\",\n },\n /* 4px base. Use multiples of these for layout — keeps the grid honest. /\n space: {\n px: \"1px\",\n \"0_5\": \"2px\",\n \"1\": \"4px\",\n \"1_5\": \"6px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n },\n radius: {\n sm: \"4px\",\n md: \"8px\",\n lg: \"12px\",\n /* Default for cards and surfaces. /\n xl: \"16px\",\n \"2xl\": \"20px\",\n full: \"9999px\",\n },\n font: {\n /* Geist Sans — opt-in by the consumer's stack. We just suggest it. /\n sans:\n \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n '\"Segoe UI\", Roboto, sans-serif',\n /* Geist Mono for code + hashes + token displays. /\n mono:\n \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n '\"Liberation Mono\", monospace',\n },\n fontSize: {\n xs: \"11px\",\n sm: \"13px\",\n base: \"14px\",\n md: \"16px\",\n lg: \"18px\",\n xl: \"22px\",\n },\n lineHeight: {\n tight: \"1.2\",\n normal: \"1.5\",\n relaxed: \"1.65\",\n },\n shadow: {\n /* Subtle pop on raised cards. /\n sm: \"0 1px 2px rgba(0, 0, 0, 0.25)\",\n /* Standard floating-pill / dropdown lift. /\n md: \"0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)\",\n /* Modal-style. /\n lg: \"0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)\",\n },\n motion: {\n /* Default easing — feels good for most UI. /\n ease: \"cubic-bezier(0.4, 0.0, 0.2, 1)\",\n /* Quick interactions — hover, focus. /\n fast: \"120ms\",\n /* Standard — most state transitions. /\n normal: \"180ms\",\n /* Used for entrance / exit animations. /\n slow: \"260ms\",\n },\n /* Z-index scale. Use these names, never raw numbers. /\n z: {\n base: 0,\n raised: 10,\n sticky: 30,\n /* HubHeader sits here. /\n header: 40,\n overlay: 50,\n modal: 60,\n toast: 70,\n },\n /* Component-specific dimensions. /\n size: {\n /* HubHeader height. Tools should leave this much top padding. */\n headerHeight: \"56px\",\n },\n} as const;\n\nexport type DesignTokens = typeof tokens;\n"]}
1	+ {"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":"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","file":"tokens.cjs","sourcesContent":["/*\n Design tokens — colors, spacing, typography, radius, motion.\n \n v1.0.0 — major version: palette swap from cool indigo-violet to\n * warm coral, Material 3 elevation model, light + dark themes,\n * Roboto Flex display font. See README for the migration map and the\n * `hub` repo's `docs/DESIGN.md` for the language behind the choices.\n \n Two consumption styles:\n * 1. As CSS custom properties — import `@openkeyai/ui/css` and use\n * `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n * 2. As a JS object — `import { tokens, darkTokens, lightTokens }`\n * from \"@openkeyai/ui/tokens\" for programmatic colour pickups\n * (charts, gradients).\n \n The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n \n Dark is the default. Light mode is opt-in by the consumer:\n \n <html data-theme=\"light\">\n \n Switches every `--okai-` color variable to the light palette.\n /\n\n/* ─── Dark palette (default) ──────────────────────────────────────────────── /\n\nconst darkPalette = {\n /* App-wide canvas. Warm dark slate (oklch hue 35). /\n bg: \"oklch(0.13 0.008 35)\",\n /* Surface a half-step lighter than `bg`. Card / panel default. /\n surface: \"oklch(0.17 0.010 35)\",\n /* Surface above `surface` — popovers, hover states. /\n surface1: \"oklch(0.17 0.010 35)\",\n surface2: \"oklch(0.21 0.012 35)\",\n surface3: \"oklch(0.25 0.014 35)\",\n surface4: \"oklch(0.29 0.016 35)\",\n surfaceRaised: \"oklch(0.21 0.012 35)\",\n /* Primary readable text. /\n foreground: \"oklch(0.96 0.005 35)\",\n /* Lower-emphasis text. Captions, metadata. /\n foregroundMuted: \"oklch(0.74 0.008 35)\",\n /* Even lower emphasis — placeholder text, ghost labels. /\n foregroundSubtle: \"oklch(0.58 0.010 35)\",\n /* Subtle border default for cards / dividers. /\n border: \"oklch(1 0 0 / 0.08)\",\n /* Stronger border for inputs + outlined buttons. /\n borderStrong: \"oklch(1 0 0 / 0.14)\",\n /* Brand — warm coral (Material 3 key color, Claude warmth). /\n accent: \"oklch(0.76 0.17 35)\",\n /* Brighter accent for focus rings + active links. /\n accentBright: \"oklch(0.82 0.17 35)\",\n /* Tint that sits behind brand-on-brand content. /\n accentContainer: \"oklch(0.30 0.13 28 / 0.25)\",\n /* Text/icon color on top of accentContainer. /\n onAccentContainer: \"oklch(0.88 0.085 35)\",\n /* Text/icon color on top of solid accent. /\n onAccent: \"oklch(0.13 0.008 35)\",\n /* Destructive action accent — warmer than the old red. /\n destructive: \"oklch(0.74 0.18 28)\",\n /* Success / positive accent — sage. /\n success: \"oklch(0.84 0.08 150)\",\n /* Warning accent — amber. /\n warning: \"oklch(0.88 0.12 80)\",\n} as const;\n\n/ ─── Light palette (opt-in via data-theme=\"light\") ───────────────────────── /\n\nconst lightPalette = {\n bg: \"oklch(0.985 0.005 35)\",\n surface: \"oklch(1 0 0)\",\n surface1: \"oklch(1 0 0)\",\n surface2: \"oklch(0.96 0.006 35)\",\n surface3: \"oklch(0.93 0.008 35)\",\n surface4: \"oklch(0.90 0.010 35)\",\n surfaceRaised: \"oklch(0.96 0.006 35)\",\n foreground: \"oklch(0.18 0.012 35)\",\n foregroundMuted: \"oklch(0.42 0.012 50)\",\n foregroundSubtle: \"oklch(0.58 0.010 50)\",\n border: \"oklch(0 0 0 / 0.08)\",\n borderStrong: \"oklch(0 0 0 / 0.16)\",\n accent: \"oklch(0.64 0.21 30)\",\n accentBright: \"oklch(0.56 0.20 28)\",\n accentContainer: \"oklch(0.93 0.045 35)\",\n onAccentContainer: \"oklch(0.30 0.13 28)\",\n onAccent: \"oklch(1 0 0)\",\n destructive: \"oklch(0.55 0.21 28)\",\n success: \"oklch(0.52 0.10 150)\",\n warning: \"oklch(0.60 0.15 70)\",\n} as const;\n\n/ ─── Shared (theme-invariant) ────────────────────────────────────────────── /\n\nconst shared = {\n /* 4px base. Use multiples of these for layout — keeps the grid honest. /\n space: {\n px: \"1px\",\n \"0_5\": \"2px\",\n \"1\": \"4px\",\n \"1_5\": \"6px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n },\n /\n Material 3 shape scale. Generous radii, predictable family. One\n * radius per element — NO mixed-corner shapes.\n /\n radius: {\n xs: \"6px\",\n sm: \"10px\",\n md: \"14px\",\n lg: \"20px\",\n xl: \"28px\",\n \"2xl\": \"36px\",\n full: \"9999px\",\n },\n font: {\n /* Geist Sans — opt-in by the consumer's stack. We just suggest it. /\n sans:\n \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n '\"Segoe UI\", Roboto, sans-serif',\n /* Geist Mono for code + hashes + token displays. /\n mono:\n \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n '\"Liberation Mono\", monospace',\n /\n Display — Roboto Flex (Apache 2.0 via Google Fonts). Consumer loads\n * via next/font and exposes the CSS variable `--font-display`. If\n * absent, falls back to the body sans.\n /\n display:\n \"var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif)\",\n },\n fontSize: {\n xs: \"11px\",\n sm: \"13px\",\n base: \"14px\",\n md: \"16px\",\n lg: \"18px\",\n xl: \"22px\",\n \"2xl\": \"28px\",\n \"3xl\": \"36px\",\n \"4xl\": \"48px\",\n /* Big display moments (marketing hero). /\n display: \"60px\",\n },\n lineHeight: {\n /* Display — tight, almost 1:1 to the cap height. /\n display: \"1.05\",\n /* Headlines. /\n tight: \"1.2\",\n /* UI. /\n normal: \"1.5\",\n /* Long-form. /\n relaxed: \"1.65\",\n },\n /\n Shadows — heavier in light (real visible shadow), lighter in dark\n * (surface lift carries hierarchy; shadow is just a hairline tint).\n \n Values match the hub's `--next-shadow-` tokens.\n /\n shadow: {\n /** Dark — cards, hover lift. /\n sm:\n \"0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20)\",\n md:\n \"0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30)\",\n lg:\n \"0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38)\",\n /* Light — real shadow values for the light theme. /\n smLight:\n \"0 1px 2px oklch(0.13 0.008 35 / 0.06), 0 4px 12px oklch(0.13 0.008 35 / 0.06)\",\n mdLight:\n \"0 2px 4px oklch(0.13 0.008 35 / 0.08), 0 12px 28px oklch(0.13 0.008 35 / 0.10)\",\n lgLight:\n \"0 4px 8px oklch(0.13 0.008 35 / 0.10), 0 24px 56px oklch(0.13 0.008 35 / 0.14)\",\n },\n motion: {\n /* Material easing — standard. Most UI transitions. /\n easeStandard: \"cubic-bezier(0.2, 0.0, 0.0, 1.0)\",\n /* Material easing — emphasized. Bigger surface motions. /\n easeEmphasized: \"cubic-bezier(0.05, 0.7, 0.1, 1.0)\",\n /* Quick interactions — hover, focus. /\n fast: \"160ms\",\n /* Standard — dialogs, surface moves. /\n normal: \"280ms\",\n /* Used for big route / page transitions. /\n slow: \"400ms\",\n },\n /* Z-index scale. Use these names, never raw numbers. /\n z: {\n base: 0,\n raised: 10,\n sticky: 30,\n /* HubHeader sits here. /\n header: 40,\n overlay: 50,\n modal: 60,\n toast: 70,\n },\n /* Component-specific dimensions. /\n size: {\n /* HubHeader height. Tools should leave this much top padding. /\n headerHeight: \"56px\",\n },\n} as const;\n\n/ ─── Exports ─────────────────────────────────────────────────────────────── /\n\n/\n Tokens for the dark theme (default). For programmatic use; UI\n * components should reference the CSS variables in styles.css which\n * automatically swap to the light palette when `data-theme=\"light\"`.\n /\nexport const darkTokens = {\n color: darkPalette,\n ...shared,\n} as const;\n\n/* Tokens for the light theme. /\nexport const lightTokens = {\n color: lightPalette,\n ...shared,\n} as const;\n\n/\n Default `tokens` export — dark palette. Kept for backwards\n * compatibility with v0.x callers that did `tokens.color.bg`. The shape\n * is unchanged; only color values have shifted from cool to warm.\n /\nexport const tokens = darkTokens;\n\nexport type DesignTokens = typeof tokens;\n\n/* Names for theming. Use to coerce stringly-typed data into the union. */\nexport type ThemeName = \"dark\" \| \"light\";\n"]}