@openkeyai/ui 0.1.0 → 1.0.0

package/dist/tokens.js

@@ -1,27 +1,65 @@
 // 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",
@@ -38,20 +76,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",
@@ -59,30 +107,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: {
@@ -101,7 +169,16 @@ var tokens = {
     headerHeight: "56px"
   }
 };
+var darkTokens = {
+  color: darkPalette,
+  ...shared
+};
+var lightTokens = {
+  color: lightPalette,
+  ...shared
+};
+var tokens = darkTokens;
 
-export { tokens };
+export { darkTokens, lightTokens, tokens };
 //# sourceMappingURL=tokens.js.map
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -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.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"]}
+{"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":"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","file":"tokens.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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkeyai/ui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Design system + mandatory HubHeader for OpenKey AI tools.",
   "license": "MIT",
   "author": "Scott Goodwin",