Add token generator and generated artifacts

.github/workflows/tokens.yml

@@ -0,0 +1,36 @@
+name: Tokens
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  staleness:
+    name: Generated artifacts are current
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.12.1
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Regenerate token artifacts
+        run: node build
+
+      - name: Check generated artifacts are committed
+        run: git diff --exit-code -- src/tokens.web.css src/tokens.ts src/tokens.host-map.md

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+node_modules

.plans/kilo-design-system-execution-checklist.md

@@ -43,11 +43,11 @@ that file is the *why*.
 ## Step 2 / M1 — Tokens + fix the cloud styles
 > Repo was clean-slated (Option A): only `README.md`, `CONTEXT.md`, `docs/adr/`, `.plans/` remain.
 > Old token values recoverable from git commit `acdcc60`.
-- `☐` **T1.1 Author `tokens.json`** (hand-authored **hex** source). `primary` === `brand` ===
+- `☑` **T1.1 Author `tokens.json`** (hand-authored **hex** source). `primary` === `brand` ===
   `#EDFF00`, `--primary-foreground` = `#1F1F1F`; split into **brand+status (mode-agnostic)** vs
   **dark surface neutrals**; include status domain→color map, type scale (Inter + Roboto Mono),
   spacing, radius. _(ADR 0003, 0005, 0009.)_ _DoD: `tokens.json` exists and matches the ADRs._
-- `☐` **T1.2 Build the generator** (`build/` + `culori`): emits `tokens.web.css` (OKLCH, web),
+- `☑` **T1.2 Build the generator** (`build/` + `culori`): emits `tokens.web.css` (OKLCH, web),
   `tokens.ts` (hex, portable), `tokens.host-map.md` (incl. the `--vscode-*` mapping); own
   `package.json` + a **CI staleness check**. _(ADR 0003, 0010.)_ _DoD: `node build` regenerates
   all three; CI fails if artifacts drift from source._

README.md

@@ -2,11 +2,13 @@
 
 Canonical source of truth for Kilo's design system across products including Cloud, Landing, Console, VS Code, JetBrains, CLI, and Mobile.
 
-This repository currently contains the first implementation slice of the design system: the hand-authored token contract and a local playground for reviewing and tuning it visually.
+This repository currently contains the first implementation slice of the design system: the hand-authored token contract, generated token artifacts, and a local playground for reviewing and tuning tokens visually.
 
 ## What Lives Here
 
 - `tokens.json` is the canonical design token source for the current dark-first Kilo design language.
+- `src/` contains generated token artifacts for product consumption.
+- `build/` contains the token generator used by humans, the playground, and CI.
 - `playground/` is a local Next.js app for previewing, editing, and saving `tokens.json`.
 - `CONTEXT.md` defines the shared glossary for the design-system architecture.
 - `docs/adr/` records the locked architecture decisions behind the system.
@@ -29,14 +31,29 @@ Current token groups include:
 
 The current primary brand action color is `#F7F586`. The system is dark-only by decision; there is no light-mode token set in this repo.
 
+## Generated Artifacts
+
+Run the generator from the repository root:
+
+```bash
+node build
+```
+
+This regenerates:
+
+- `src/tokens.web.css`: OKLCH CSS variables for browser products.
+- `src/tokens.ts`: hex token values and flattened CSS-variable names for portable JavaScript/TypeScript consumers.
+- `src/tokens.host-map.md`: generated host-environment mapping notes for VS Code, JetBrains, and CLI/ANSI usage.
+
+CI runs the same command and fails if regenerated artifacts differ from the committed files. That keeps `tokens.json` and `src/` in sync.
+
 ## Run The Playground
 
 From the repository root:
 
 ```bash
-cd playground
 pnpm install
-pnpm dev
+pnpm --dir playground dev
 ```
 
 Then open:
@@ -48,16 +65,16 @@ http://localhost:8731
 If dependencies are already installed:
 
 ```bash
-cd playground && pnpm dev
+pnpm --dir playground dev
 ```
 
 Useful playground scripts:
 
 ```bash
-pnpm dev     # Start the local playground on port 8731
-pnpm build   # Build smoke test into .next-build
-pnpm start   # Start the production build on port 8731
-pnpm lint    # Next lint command
+pnpm --dir playground dev     # Start the local playground on port 8731
+pnpm --dir playground build   # Build smoke test into .next-build
+pnpm --dir playground start   # Start the production build on port 8731
+pnpm --dir playground lint    # Next lint command
 ```
 
 ## Edit Tokens
@@ -67,7 +84,9 @@ The playground loads `../tokens.json` at startup and applies the values as live
 - Edit color tokens from the preview swatches.
 - Edit radius, spacing, typography, and status-domain mappings from the left control rail.
 - Inspect the serialized output in the right JSON rail.
-- Use `Save to tokens.json` to write the current playground state back to the repo root token file.
+- Use `Save Tokens` to write the current playground state back to the source file.
+- Use `Undo last save` if a saved experiment should be restored to the previous source state.
+- Open the dropdown next to `Save Tokens` and choose `Generate Tokens` to regenerate `src/` from the saved source file. This action is disabled while there are unsaved edits.
 - Use `Cmd+.` or `Ctrl+.` to collapse or expand both side rails together.
 
 The write-back API is local-development only and refuses token reads or writes when `NODE_ENV` is `production`.