chore: scaffold phase 0 workspace

packages/tokens/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ai-ui/tokens",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./base.css": "./src/base.css",
+    "./motion.css": "./src/motion.css",
+    "./styles.css": "./src/styles.css",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --clean --dts --format esm",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
+}
+

packages/tokens/src/base.css

@@ -0,0 +1,26 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: light;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+

packages/tokens/src/index.ts

@@ -0,0 +1,8 @@
+export const themeNames = ["light", "dark"] as const;
+
+export const motionScale = {
+  fast: "var(--dur-fast)",
+  base: "var(--dur-base)",
+  slow: "var(--dur-slow)"
+} as const;
+

packages/tokens/src/motion.css

@@ -0,0 +1,32 @@
+:root {
+  --dur-fast: 120ms;
+  --dur-base: 200ms;
+  --dur-slow: 320ms;
+
+  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+
+  --distance-xs: 4px;
+  --distance-sm: 8px;
+  --distance-md: 16px;
+
+  --scale-press: 0.98;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-fast: 1ms;
+    --dur-base: 1ms;
+    --dur-slow: 1ms;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+  }
+}
+

packages/tokens/src/styles.css

@@ -0,0 +1,4 @@
+@import "./base.css";
+@import "./tokens.css";
+@import "./motion.css";
+

packages/tokens/src/tokens.css

@@ -0,0 +1,45 @@
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --font-sans: "Avenir Next", "Segoe UI", sans-serif;
+  --font-mono: "SF Mono", "SFMono-Regular", "Consolas", monospace;
+
+  --color-background: oklch(0.985 0.004 85);
+  --color-foreground: oklch(0.24 0.03 60);
+  --color-surface: oklch(0.965 0.008 80);
+  --color-surface-strong: oklch(0.93 0.012 78);
+  --color-border: oklch(0.87 0.01 75);
+  --color-ring: oklch(0.56 0.12 32);
+  --color-primary: oklch(0.53 0.15 30);
+  --color-primary-foreground: oklch(0.98 0.01 80);
+  --color-muted: oklch(0.94 0.008 78);
+  --color-muted-foreground: oklch(0.42 0.028 60);
+  --color-accent: oklch(0.76 0.1 82);
+  --color-card: color-mix(in oklch, var(--color-surface) 86%, white 14%);
+  --color-card-foreground: var(--color-foreground);
+
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+
+  --shadow-xs: 0 1px 2px oklch(0.28 0.02 55 / 0.06);
+  --shadow-sm: 0 8px 24px oklch(0.28 0.02 55 / 0.08);
+  --shadow-md: 0 18px 48px oklch(0.28 0.03 55 / 0.12);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --color-background: oklch(0.2 0.015 60);
+  --color-foreground: oklch(0.94 0.01 80);
+  --color-surface: oklch(0.26 0.018 60);
+  --color-surface-strong: oklch(0.31 0.018 60);
+  --color-border: oklch(0.4 0.015 60);
+  --color-ring: oklch(0.7 0.12 35);
+  --color-primary: oklch(0.72 0.13 40);
+  --color-primary-foreground: oklch(0.22 0.014 60);
+  --color-muted: oklch(0.28 0.015 60);
+  --color-muted-foreground: oklch(0.8 0.02 72);
+  --color-accent: oklch(0.68 0.09 82);
+  --color-card: color-mix(in oklch, var(--color-surface) 90%, black 10%);
+  --color-card-foreground: var(--color-foreground);
+}

packages/tokens/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "include": ["src/**/*"]
+}
+