@khal-os/ui 1.0.21 → 1.0.22

package/README.md

@@ -20,6 +20,32 @@ Import design tokens CSS:
 import '@khal-os/ui/tokens.css';
 ```
 
+## Design system
+
+The visual + interaction language for `@khal-os/ui` is documented as a
+package-local spec:
+
+- [`DESIGN-SYSTEM.md`](./DESIGN-SYSTEM.md) — posture, canonical tokens,
+  component families, P0/P1/P2 review checklist.
+- [`design-system.html`](./design-system.html) — standalone HTML preview
+  (token swatches, primitive gallery, starter templates). Open in a
+  browser; no server needed.
+
+Canonical tokens are exposed three ways:
+
+| Surface | Source |
+| ------- | ------ |
+| CSS custom properties (`--khal-*`) | [`tokens.css`](./tokens.css), `KhalOS Brand Aliases` block |
+| TypeScript constants (`KHAL_*`)    | [`src/tokens/khal-os-tokens.ts`](./src/tokens/khal-os-tokens.ts) |
+| Aggregate object (`KHAL_TOKENS`)   | same module — frozen, typed, runtime-safe |
+
+```ts
+import { KHAL_TOKENS, KHAL_ACCENT } from '@khal-os/ui';
+```
+
+The legacy `lp-tokens.ts` module is retained for the mesh-gradient
+consumer; prefer `khal-os-tokens.ts` for new code.
+
 ## License
 
 [Elastic License 2.0 (ELv2)](./LICENSE)

package/dist/index.cjs

@@ -79,6 +79,27 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   GlassCard: () => GlassCard,
   Input: () => Input,
+  KHAL_ACCENT: () => KHAL_ACCENT,
+  KHAL_ACCENT_BLUE: () => KHAL_ACCENT_BLUE,
+  KHAL_BG: () => KHAL_BG,
+  KHAL_BORDER: () => KHAL_BORDER,
+  KHAL_BORDER_STRONG: () => KHAL_BORDER_STRONG,
+  KHAL_CELL: () => KHAL_CELL,
+  KHAL_CHROME: () => KHAL_CHROME,
+  KHAL_CSS_VARS: () => KHAL_CSS_VARS,
+  KHAL_FG: () => KHAL_FG,
+  KHAL_FONT_BODY: () => KHAL_FONT_BODY,
+  KHAL_FONT_DISPLAY: () => KHAL_FONT_DISPLAY,
+  KHAL_FONT_MONO: () => KHAL_FONT_MONO,
+  KHAL_MOTION_DURATION_MS: () => KHAL_MOTION_DURATION_MS,
+  KHAL_MOTION_EASE: () => KHAL_MOTION_EASE,
+  KHAL_MUTED: () => KHAL_MUTED,
+  KHAL_RADIUS: () => KHAL_RADIUS,
+  KHAL_RADIUS_LG: () => KHAL_RADIUS_LG,
+  KHAL_SURFACE: () => KHAL_SURFACE,
+  KHAL_SURFACE_LIGHT: () => KHAL_SURFACE_LIGHT,
+  KHAL_TERTIARY: () => KHAL_TERTIARY,
+  KHAL_TOKENS: () => KHAL_TOKENS,
   KhalLogo: () => KhalLogo,
   ListView: () => ListView,
   LiveFeed: () => LiveFeed,
@@ -2516,6 +2537,70 @@ var useNotificationStore = (0, import_zustand2.create)()((set, get) => ({
   }
 }));
 
+// src/tokens/khal-os-tokens.ts
+var KHAL_BG = "oklch(14.48% 0.0000 89.88)";
+var KHAL_SURFACE = "oklch(18.69% 0.0107 268.11)";
+var KHAL_FG = "oklch(93.72% 0.0084 271.33)";
+var KHAL_MUTED = "oklch(66.06% 0.0293 269.51)";
+var KHAL_BORDER = "oklch(25.72% 0.0257 268.23)";
+var KHAL_ACCENT = "oklch(71.49% 0.1112 63.09)";
+var KHAL_CHROME = "oklch(16.86% 0.0110 268.03)";
+var KHAL_CELL = "oklch(17.33% 0.0154 266.68)";
+var KHAL_TERTIARY = "oklch(47.99% 0.0369 269.33)";
+var KHAL_BORDER_STRONG = "oklch(36.17% 0.0439 266.77)";
+var KHAL_ACCENT_BLUE = "oklch(55.73% 0.1910 256.76)";
+var KHAL_SURFACE_LIGHT = "oklch(95.99% 0.0079 73.74)";
+var KHAL_FONT_DISPLAY = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+var KHAL_FONT_BODY = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+var KHAL_FONT_MONO = '"Geist Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace';
+var KHAL_RADIUS = "10px";
+var KHAL_RADIUS_LG = "12px";
+var KHAL_MOTION_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+var KHAL_MOTION_DURATION_MS = 420;
+var KHAL_TOKENS = Object.freeze({
+  color: {
+    bg: KHAL_BG,
+    surface: KHAL_SURFACE,
+    fg: KHAL_FG,
+    muted: KHAL_MUTED,
+    border: KHAL_BORDER,
+    accent: KHAL_ACCENT,
+    chrome: KHAL_CHROME,
+    cell: KHAL_CELL,
+    tertiary: KHAL_TERTIARY,
+    borderStrong: KHAL_BORDER_STRONG,
+    accentBlue: KHAL_ACCENT_BLUE,
+    surfaceLight: KHAL_SURFACE_LIGHT
+  },
+  font: {
+    display: KHAL_FONT_DISPLAY,
+    body: KHAL_FONT_BODY,
+    mono: KHAL_FONT_MONO
+  },
+  radius: {
+    base: KHAL_RADIUS,
+    lg: KHAL_RADIUS_LG
+  },
+  motion: {
+    ease: KHAL_MOTION_EASE,
+    durationMs: KHAL_MOTION_DURATION_MS
+  }
+});
+var KHAL_CSS_VARS = Object.freeze({
+  bg: "--khal-bg",
+  surface: "--khal-surface",
+  fg: "--khal-fg",
+  muted: "--khal-muted",
+  border: "--khal-border",
+  accent: "--khal-accent",
+  chrome: "--khal-chrome",
+  cell: "--khal-cell",
+  tertiary: "--khal-tertiary",
+  borderStrong: "--khal-border-strong",
+  accentBlue: "--khal-accent-blue",
+  surfaceLight: "--khal-surface-light"
+});
+
 // src/tokens/lp-tokens.ts
 var WIN_BG = "#111318";
 var CHROME_BG = "#0D0F14";
@@ -2589,6 +2674,27 @@ var BUTTON_RADIUS = "10px";
   EmptyState,
   GlassCard,
   Input,
+  KHAL_ACCENT,
+  KHAL_ACCENT_BLUE,
+  KHAL_BG,
+  KHAL_BORDER,
+  KHAL_BORDER_STRONG,
+  KHAL_CELL,
+  KHAL_CHROME,
+  KHAL_CSS_VARS,
+  KHAL_FG,
+  KHAL_FONT_BODY,
+  KHAL_FONT_DISPLAY,
+  KHAL_FONT_MONO,
+  KHAL_MOTION_DURATION_MS,
+  KHAL_MOTION_EASE,
+  KHAL_MUTED,
+  KHAL_RADIUS,
+  KHAL_RADIUS_LG,
+  KHAL_SURFACE,
+  KHAL_SURFACE_LIGHT,
+  KHAL_TERTIARY,
+  KHAL_TOKENS,
   KhalLogo,
   ListView,
   LiveFeed,