@hewnui/themes 0.0.0-stage → 0.1.0

package/exports/graphite/DESIGN.md

@@ -0,0 +1,138 @@
+# Graphite — Design brief
+
+> Generated from Hewn curated theme packs. Semantic OKLCH tokens; do not edit by hand.
+
+## Identity
+
+Technical neutral and restrained steel-blue.
+
+- **Pack id:** `graphite`
+- **Base pack:** `graphite`
+- **Supported modes:** light, dark
+- **Color scheme (primary):** light
+
+## Palette
+
+| Token | Role | light | dark |
+|---|---|---|---|
+| `background` | Page and app canvas | `oklch(0.965 0.005 255)` | `oklch(0.17 0.012 255)` |
+| `foreground` | Primary text and icons | `oklch(0.23 0.02 255)` | `oklch(0.93 0.01 255)` |
+| `surface` | Cards, panels, and elevated chrome | `oklch(0.99 0.003 255)` | `oklch(0.21 0.015 255)` |
+| `surface-raised` | Overlays and nested elevation | `oklch(1 0 0)` | `oklch(0.25 0.018 255)` |
+| `muted` | Subtle fills and disabled wells | `oklch(0.925 0.008 255)` | `oklch(0.27 0.016 255)` |
+| `muted-foreground` | Secondary text and captions | `oklch(0.47 0.02 255)` | `oklch(0.715 0.015 255)` |
+| `accent` | Primary actions and focus accents | `oklch(0.48 0.06 250)` | `oklch(0.7 0.07 245)` |
+| `accent-foreground` | Text/icons on accent | `oklch(0.98 0.01 250)` | `oklch(0.985 0.008 255)` |
+| `border` | Separators and control outlines | `oklch(0.34 0.02 255 / 14%)` | `oklch(0.85 0.012 255 / 12%)` |
+| `ring` | Focus ring | `oklch(0.55 0.07 250)` | `oklch(0.7 0.07 245)` |
+| `danger` | Destructive and error states | `oklch(0.55 0.17 27)` | `oklch(0.68 0.16 27)` |
+| `danger-foreground` | danger-foreground | `oklch(0.985 0.01 27)` | `oklch(0.985 0.01 27)` |
+| `danger-subtle` | danger-subtle | `oklch(0.94 0.035 27)` | `oklch(0.32 0.05 27)` |
+| `danger-border` | danger-border | `oklch(0.56 0.12 27 / 40%)` | `oklch(0.72 0.1 27 / 40%)` |
+| `success` | success | `oklch(0.55 0.15 150)` | `oklch(0.72 0.14 150)` |
+| `success-foreground` | success-foreground | `oklch(0.985 0.01 150)` | `oklch(0.985 0.01 150)` |
+| `success-subtle` | success-subtle | `oklch(0.94 0.035 150)` | `oklch(0.32 0.045 150)` |
+| `success-border` | success-border | `oklch(0.55 0.12 150 / 40%)` | `oklch(0.72 0.1 150 / 40%)` |
+| `warning` | warning | `oklch(0.75 0.14 75)` | `oklch(0.78 0.12 75)` |
+| `warning-foreground` | warning-foreground | `oklch(0.25 0.05 75)` | `oklch(0.22 0.04 75)` |
+| `warning-subtle` | warning-subtle | `oklch(0.94 0.04 75)` | `oklch(0.34 0.04 75)` |
+| `warning-border` | warning-border | `oklch(0.72 0.12 75 / 40%)` | `oklch(0.78 0.1 75 / 40%)` |
+| `info` | info | `oklch(0.52 0.11 250)` | `oklch(0.72 0.1 250)` |
+| `info-foreground` | info-foreground | `oklch(0.985 0.01 250)` | `oklch(0.985 0.01 250)` |
+| `info-subtle` | info-subtle | `oklch(0.94 0.03 250)` | `oklch(0.32 0.035 250)` |
+| `info-border` | info-border | `oklch(0.52 0.09 250 / 40%)` | `oklch(0.72 0.08 250 / 40%)` |
+| `glass-tint` | Tinted frosted glass material | `oklch(0.7 0.06 250 / 26%)` | `oklch(0.58 0.07 245 / 22%)` |
+
+## Typography
+
+| Role | Stack | Usage |
+|---|---|---|
+| Sans | IBM Plex Sans, ui-sans-serif, system-ui | UI chrome, body, headings |
+| Mono | IBM Plex Mono, ui-monospace | Labels, code, tabular metrics |
+| Display | Space Grotesk → sans | Marketing hero H1 and brand wordmark ≥18px only |
+
+Body text uses pretty wrapping; headings use balanced wrapping; dynamic numbers use `tabular-nums`.
+
+## Radius & density
+
+- `radius-sm`: `0.4rem`
+- `radius-md`: `0.6rem`
+- `radius-lg`: `0.85rem`
+- `radius-panel`: `0.85rem`
+- `density`: `1.05`
+- `motion-duration`: `220ms`
+- `motion-stiffness`: `420`
+- `motion-damping`: `32`
+
+Density scales control spacing rhythm. Panel radius (`radius-panel`) caps menus and dialogs so they never go full-pill.
+
+## Motion
+
+- Duration: `220ms`
+- Spring stiffness: `420`
+- Spring damping: `32`
+- Reduced motion always wins over global motion toggles.
+- Prefer transform / opacity / filter; never animate layout properties continuously.
+
+## Material
+
+- `solid` — structured product surfaces and separators
+- `glass` — accent-tinted frosted surfaces (blur, saturation, refraction, opaque fallback)
+
+## Do
+
+- Use semantic OKLCH tokens (`--kp-*` / `--color-*`); never hard-code theme hues.
+- Typography: IBM Plex Sans (UI), IBM Plex Mono (code/labels), Space Grotesk only for marketing hero H1 and brand wordmark ≥18px.
+- Icons: Phosphor. Interactive hit targets ≥40×40px; press feedback `scale(0.96)`.
+- Motion: animate transform, opacity, and filter; reduced motion always wins.
+- Radius: concentric scale; panels use `--kp-radius-panel` (never full-pill menus/dialogs).
+- Glass is a global material — tint, blur, saturation, refraction edge, opaque fallback.
+
+## Don't
+
+- No purple/lila defaults, neon glow, pure black, Inter, emoji, or generic centered heroes.
+- Never `transition: all` — list exact properties.
+- Never `h-screen` for full-height sections — use `min-h-[100dvh]`.
+- No per-component `glass` prop; material is global.
+- Do not invent unsupported light/dark combinations for a pack.
+- Do not put Space Grotesk in UI chrome, forms, or dense product copy.
+
+## Token reference (primary mode)
+
+```
+--kp-background: oklch(0.965 0.005 255);
+--kp-foreground: oklch(0.23 0.02 255);
+--kp-surface: oklch(0.99 0.003 255);
+--kp-surface-raised: oklch(1 0 0);
+--kp-muted: oklch(0.925 0.008 255);
+--kp-muted-foreground: oklch(0.47 0.02 255);
+--kp-accent: oklch(0.48 0.06 250);
+--kp-accent-foreground: oklch(0.98 0.01 250);
+--kp-border: oklch(0.34 0.02 255 / 14%);
+--kp-ring: oklch(0.55 0.07 250);
+--kp-danger: oklch(0.55 0.17 27);
+--kp-danger-foreground: oklch(0.985 0.01 27);
+--kp-danger-subtle: oklch(0.94 0.035 27);
+--kp-danger-border: oklch(0.56 0.12 27 / 40%);
+--kp-success: oklch(0.55 0.15 150);
+--kp-success-foreground: oklch(0.985 0.01 150);
+--kp-success-subtle: oklch(0.94 0.035 150);
+--kp-success-border: oklch(0.55 0.12 150 / 40%);
+--kp-warning: oklch(0.75 0.14 75);
+--kp-warning-foreground: oklch(0.25 0.05 75);
+--kp-warning-subtle: oklch(0.94 0.04 75);
+--kp-warning-border: oklch(0.72 0.12 75 / 40%);
+--kp-info: oklch(0.52 0.11 250);
+--kp-info-foreground: oklch(0.985 0.01 250);
+--kp-info-subtle: oklch(0.94 0.03 250);
+--kp-info-border: oklch(0.52 0.09 250 / 40%);
+--kp-glass-tint: oklch(0.7 0.06 250 / 26%);
+--kp-radius-sm: 0.4rem;
+--kp-radius-md: 0.6rem;
+--kp-radius-lg: 0.85rem;
+--kp-radius-panel: 0.85rem;
+--kp-density: 1.05;
+--kp-motion-duration: 220ms;
+--kp-motion-stiffness: 420;
+--kp-motion-damping: 32;
+```

package/exports/graphite/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: hewn-graphite-theme
+description: Apply the Hewn Graphite theme tokens, typography, motion, and design rules when building or restyling UI.
+---
+
+# Graphite theme (Hewn)
+
+Technical neutral and restrained steel-blue.
+
+Use this skill whenever generating UI that should match the **Graphite** pack
+(`graphite`). Supported modes: **light, dark**.
+
+## Quick rules
+
+- Use semantic OKLCH tokens (`--kp-*` / `--color-*`); never hard-code theme hues.
+- Typography: IBM Plex Sans (UI), IBM Plex Mono (code/labels), Space Grotesk only for marketing hero H1 and brand wordmark ≥18px.
+- Icons: Phosphor. Interactive hit targets ≥40×40px; press feedback `scale(0.96)`.
+- Motion: animate transform, opacity, and filter; reduced motion always wins.
+- Radius: concentric scale; panels use `--kp-radius-panel` (never full-pill menus/dialogs).
+- Glass is a global material — tint, blur, saturation, refraction edge, opaque fallback.
+
+## Never
+
+- No purple/lila defaults, neon glow, pure black, Inter, emoji, or generic centered heroes.
+- Never `transition: all` — list exact properties.
+- Never `h-screen` for full-height sections — use `min-h-[100dvh]`.
+- No per-component `glass` prop; material is global.
+- Do not invent unsupported light/dark combinations for a pack.
+- Do not put Space Grotesk in UI chrome, forms, or dense product copy.
+
+## How to apply
+
+1. Set `data-theme="graphite"` and `data-mode="{light|dark}"` on a root element (or import the generated `@theme` CSS).
+2. Prefer semantic utilities / CSS variables (`bg-background`, `text-foreground`, `bg-accent`, `border-border`, `--kp-*`).
+3. Respect reduced motion — disable springs/shimmers when `prefers-reduced-motion: reduce`.
+4. Keep glass as a global material toggle; do not add per-component glass props.
+
+## Color tokens (primary mode: light)
+
+| Token | Role | Value |
+|---|---|---|
+| `--kp-background` / `--color-background` | Page and app canvas | `oklch(0.965 0.005 255)` |
+| `--kp-foreground` / `--color-foreground` | Primary text and icons | `oklch(0.23 0.02 255)` |
+| `--kp-surface` / `--color-surface` | Cards, panels, and elevated chrome | `oklch(0.99 0.003 255)` |
+| `--kp-surface-raised` / `--color-surface-raised` | Overlays and nested elevation | `oklch(1 0 0)` |
+| `--kp-muted` / `--color-muted` | Subtle fills and disabled wells | `oklch(0.925 0.008 255)` |
+| `--kp-muted-foreground` / `--color-muted-foreground` | Secondary text and captions | `oklch(0.47 0.02 255)` |
+| `--kp-accent` / `--color-accent` | Primary actions and focus accents | `oklch(0.48 0.06 250)` |
+| `--kp-accent-foreground` / `--color-accent-foreground` | Text/icons on accent | `oklch(0.98 0.01 250)` |
+| `--kp-border` / `--color-border` | Separators and control outlines | `oklch(0.34 0.02 255 / 14%)` |
+| `--kp-ring` / `--color-ring` | Focus ring | `oklch(0.55 0.07 250)` |
+| `--kp-danger` / `--color-danger` | Destructive and error states | `oklch(0.55 0.17 27)` |
+| `--kp-danger-foreground` / `--color-danger-foreground` | danger-foreground | `oklch(0.985 0.01 27)` |
+| `--kp-danger-subtle` / `--color-danger-subtle` | danger-subtle | `oklch(0.94 0.035 27)` |
+| `--kp-danger-border` / `--color-danger-border` | danger-border | `oklch(0.56 0.12 27 / 40%)` |
+| `--kp-success` / `--color-success` | success | `oklch(0.55 0.15 150)` |
+| `--kp-success-foreground` / `--color-success-foreground` | success-foreground | `oklch(0.985 0.01 150)` |
+| `--kp-success-subtle` / `--color-success-subtle` | success-subtle | `oklch(0.94 0.035 150)` |
+| `--kp-success-border` / `--color-success-border` | success-border | `oklch(0.55 0.12 150 / 40%)` |
+| `--kp-warning` / `--color-warning` | warning | `oklch(0.75 0.14 75)` |
+| `--kp-warning-foreground` / `--color-warning-foreground` | warning-foreground | `oklch(0.25 0.05 75)` |
+| `--kp-warning-subtle` / `--color-warning-subtle` | warning-subtle | `oklch(0.94 0.04 75)` |
+| `--kp-warning-border` / `--color-warning-border` | warning-border | `oklch(0.72 0.12 75 / 40%)` |
+| `--kp-info` / `--color-info` | info | `oklch(0.52 0.11 250)` |
+| `--kp-info-foreground` / `--color-info-foreground` | info-foreground | `oklch(0.985 0.01 250)` |
+| `--kp-info-subtle` / `--color-info-subtle` | info-subtle | `oklch(0.94 0.03 250)` |
+| `--kp-info-border` / `--color-info-border` | info-border | `oklch(0.52 0.09 250 / 40%)` |
+| `--kp-glass-tint` / `--color-glass-tint` | Tinted frosted glass material | `oklch(0.7 0.06 250 / 26%)` |
+
+## Structure
+
+- `--kp-radius-sm`: `0.4rem`
+- `--kp-radius-md`: `0.6rem`
+- `--kp-radius-lg`: `0.85rem`
+- `--kp-radius-panel`: `0.85rem`
+- `--kp-density`: `1.05`
+- `--kp-motion-duration`: `220ms`
+- `--kp-motion-stiffness`: `420`
+- `--kp-motion-damping`: `32`
+
+## Typography
+
+- **Sans:** IBM Plex Sans — UI and body
+- **Mono:** IBM Plex Mono — labels, code, metrics (`tabular-nums`)
+- **Display:** Space Grotesk — hero H1 / brand wordmark ≥18px only
+
+## Export companions
+
+- `DESIGN.md` — full design brief
+- `tokens.dtcg.json` — DTCG (`$value` / `$type`) with light/dark modes
+- `theme.css` — Tailwind v4 `@theme` block
+
+When unsure, re-read `DESIGN.md` for this pack and keep accents within the
+curated ramp — do not invent a new hue family.

package/exports/graphite/theme.css

@@ -0,0 +1,67 @@
+/* graphite — Tailwind v4 @theme */
+@theme {
+  --color-background: oklch(0.965 0.005 255);
+  --color-foreground: oklch(0.23 0.02 255);
+  --color-surface: oklch(0.99 0.003 255);
+  --color-surface-raised: oklch(1 0 0);
+  --color-muted: oklch(0.925 0.008 255);
+  --color-muted-foreground: oklch(0.47 0.02 255);
+  --color-accent: oklch(0.48 0.06 250);
+  --color-accent-foreground: oklch(0.98 0.01 250);
+  --color-border: oklch(0.34 0.02 255 / 14%);
+  --color-ring: oklch(0.55 0.07 250);
+  --color-danger: oklch(0.55 0.17 27);
+  --color-danger-foreground: oklch(0.985 0.01 27);
+  --color-danger-subtle: oklch(0.94 0.035 27);
+  --color-danger-border: oklch(0.56 0.12 27 / 40%);
+  --color-success: oklch(0.55 0.15 150);
+  --color-success-foreground: oklch(0.985 0.01 150);
+  --color-success-subtle: oklch(0.94 0.035 150);
+  --color-success-border: oklch(0.55 0.12 150 / 40%);
+  --color-warning: oklch(0.75 0.14 75);
+  --color-warning-foreground: oklch(0.25 0.05 75);
+  --color-warning-subtle: oklch(0.94 0.04 75);
+  --color-warning-border: oklch(0.72 0.12 75 / 40%);
+  --color-info: oklch(0.52 0.11 250);
+  --color-info-foreground: oklch(0.985 0.01 250);
+  --color-info-subtle: oklch(0.94 0.03 250);
+  --color-info-border: oklch(0.52 0.09 250 / 40%);
+  --color-glass-tint: oklch(0.7 0.06 250 / 26%);
+  --radius-sm: 0.4rem;
+  --radius-md: 0.6rem;
+  --radius-lg: 0.85rem;
+  --radius-panel: 0.85rem;
+  --font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
+  --font-display: var(--font-space-grotesk, "Space Grotesk"), var(--font-sans);
+}
+
+[data-theme="graphite"][data-mode="dark"] {
+  --color-background: oklch(0.17 0.012 255);
+  --color-foreground: oklch(0.93 0.01 255);
+  --color-surface: oklch(0.21 0.015 255);
+  --color-surface-raised: oklch(0.25 0.018 255);
+  --color-muted: oklch(0.27 0.016 255);
+  --color-muted-foreground: oklch(0.715 0.015 255);
+  --color-accent: oklch(0.7 0.07 245);
+  --color-accent-foreground: oklch(0.985 0.008 255);
+  --color-border: oklch(0.85 0.012 255 / 12%);
+  --color-ring: oklch(0.7 0.07 245);
+  --color-danger: oklch(0.68 0.16 27);
+  --color-danger-foreground: oklch(0.985 0.01 27);
+  --color-danger-subtle: oklch(0.32 0.05 27);
+  --color-danger-border: oklch(0.72 0.1 27 / 40%);
+  --color-success: oklch(0.72 0.14 150);
+  --color-success-foreground: oklch(0.985 0.01 150);
+  --color-success-subtle: oklch(0.32 0.045 150);
+  --color-success-border: oklch(0.72 0.1 150 / 40%);
+  --color-warning: oklch(0.78 0.12 75);
+  --color-warning-foreground: oklch(0.22 0.04 75);
+  --color-warning-subtle: oklch(0.34 0.04 75);
+  --color-warning-border: oklch(0.78 0.1 75 / 40%);
+  --color-info: oklch(0.72 0.1 250);
+  --color-info-foreground: oklch(0.985 0.01 250);
+  --color-info-subtle: oklch(0.32 0.035 250);
+  --color-info-border: oklch(0.72 0.08 250 / 40%);
+  --color-glass-tint: oklch(0.58 0.07 245 / 22%);
+}

package/exports/graphite/tokens.dtcg.json

@@ -0,0 +1,348 @@
+{
+  "$description": "Hewn graphite theme — DTCG design tokens (light / dark).",
+  "meta": {
+    "packId": {
+      "$type": "string",
+      "$value": "graphite"
+    },
+    "basePackId": {
+      "$type": "string",
+      "$value": "graphite"
+    },
+    "supportedModes": {
+      "$type": "string",
+      "$value": "light,dark"
+    },
+    "colorScheme": {
+      "$type": "string",
+      "$value": "light"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": {
+        "$type": "fontFamily",
+        "$value": [
+          "IBM Plex Sans",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif"
+        ]
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": [
+          "IBM Plex Mono",
+          "ui-monospace",
+          "monospace"
+        ]
+      },
+      "display": {
+        "$type": "fontFamily",
+        "$value": [
+          "Space Grotesk",
+          "IBM Plex Sans",
+          "sans-serif"
+        ]
+      }
+    }
+  },
+  "modes": {
+    "light": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": "oklch(0.965 0.005 255)"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "oklch(0.23 0.02 255)"
+        },
+        "surface": {
+          "$type": "color",
+          "$value": "oklch(0.99 0.003 255)"
+        },
+        "surface-raised": {
+          "$type": "color",
+          "$value": "oklch(1 0 0)"
+        },
+        "muted": {
+          "$type": "color",
+          "$value": "oklch(0.925 0.008 255)"
+        },
+        "muted-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.47 0.02 255)"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "oklch(0.48 0.06 250)"
+        },
+        "accent-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.98 0.01 250)"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "oklch(0.34 0.02 255 / 14%)"
+        },
+        "ring": {
+          "$type": "color",
+          "$value": "oklch(0.55 0.07 250)"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "oklch(0.55 0.17 27)"
+        },
+        "danger-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.01 27)"
+        },
+        "danger-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.94 0.035 27)"
+        },
+        "danger-border": {
+          "$type": "color",
+          "$value": "oklch(0.56 0.12 27 / 40%)"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "oklch(0.55 0.15 150)"
+        },
+        "success-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.01 150)"
+        },
+        "success-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.94 0.035 150)"
+        },
+        "success-border": {
+          "$type": "color",
+          "$value": "oklch(0.55 0.12 150 / 40%)"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "oklch(0.75 0.14 75)"
+        },
+        "warning-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.25 0.05 75)"
+        },
+        "warning-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.94 0.04 75)"
+        },
+        "warning-border": {
+          "$type": "color",
+          "$value": "oklch(0.72 0.12 75 / 40%)"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "oklch(0.52 0.11 250)"
+        },
+        "info-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.01 250)"
+        },
+        "info-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.94 0.03 250)"
+        },
+        "info-border": {
+          "$type": "color",
+          "$value": "oklch(0.52 0.09 250 / 40%)"
+        },
+        "glass-tint": {
+          "$type": "color",
+          "$value": "oklch(0.7 0.06 250 / 26%)"
+        }
+      },
+      "radius": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "0.4rem"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "0.6rem"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "0.85rem"
+        },
+        "panel": {
+          "$type": "dimension",
+          "$value": "0.85rem"
+        }
+      },
+      "motion": {
+        "duration": {
+          "$type": "duration",
+          "$value": "220ms"
+        },
+        "stiffness": {
+          "$type": "number",
+          "$value": 420
+        },
+        "damping": {
+          "$type": "number",
+          "$value": 32
+        }
+      },
+      "density": {
+        "$type": "number",
+        "$value": 1.05
+      }
+    },
+    "dark": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": "oklch(0.17 0.012 255)"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "oklch(0.93 0.01 255)"
+        },
+        "surface": {
+          "$type": "color",
+          "$value": "oklch(0.21 0.015 255)"
+        },
+        "surface-raised": {
+          "$type": "color",
+          "$value": "oklch(0.25 0.018 255)"
+        },
+        "muted": {
+          "$type": "color",
+          "$value": "oklch(0.27 0.016 255)"
+        },
+        "muted-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.715 0.015 255)"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "oklch(0.7 0.07 245)"
+        },
+        "accent-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.008 255)"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "oklch(0.85 0.012 255 / 12%)"
+        },
+        "ring": {
+          "$type": "color",
+          "$value": "oklch(0.7 0.07 245)"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "oklch(0.68 0.16 27)"
+        },
+        "danger-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.01 27)"
+        },
+        "danger-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.32 0.05 27)"
+        },
+        "danger-border": {
+          "$type": "color",
+          "$value": "oklch(0.72 0.1 27 / 40%)"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "oklch(0.72 0.14 150)"
+        },
+        "success-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.01 150)"
+        },
+        "success-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.32 0.045 150)"
+        },
+        "success-border": {
+          "$type": "color",
+          "$value": "oklch(0.72 0.1 150 / 40%)"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "oklch(0.78 0.12 75)"
+        },
+        "warning-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.22 0.04 75)"
+        },
+        "warning-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.34 0.04 75)"
+        },
+        "warning-border": {
+          "$type": "color",
+          "$value": "oklch(0.78 0.1 75 / 40%)"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "oklch(0.72 0.1 250)"
+        },
+        "info-foreground": {
+          "$type": "color",
+          "$value": "oklch(0.985 0.01 250)"
+        },
+        "info-subtle": {
+          "$type": "color",
+          "$value": "oklch(0.32 0.035 250)"
+        },
+        "info-border": {
+          "$type": "color",
+          "$value": "oklch(0.72 0.08 250 / 40%)"
+        },
+        "glass-tint": {
+          "$type": "color",
+          "$value": "oklch(0.58 0.07 245 / 22%)"
+        }
+      },
+      "radius": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "0.4rem"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "0.6rem"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "0.85rem"
+        },
+        "panel": {
+          "$type": "dimension",
+          "$value": "0.85rem"
+        }
+      },
+      "motion": {
+        "duration": {
+          "$type": "duration",
+          "$value": "220ms"
+        },
+        "stiffness": {
+          "$type": "number",
+          "$value": 420
+        },
+        "damping": {
+          "$type": "number",
+          "$value": 32
+        }
+      },
+      "density": {
+        "$type": "number",
+        "$value": 1.05
+      }
+    }
+  }
+}

package/exports/index.json

@@ -0,0 +1,45 @@
+{
+  "generated": true,
+  "packs": [
+    "forest",
+    "tide",
+    "graphite",
+    "dune",
+    "clay",
+    "ember"
+  ],
+  "formats": [
+    {
+      "id": "design-md",
+      "label": "DESIGN.md",
+      "description": "Human- and AI-readable design brief with OKLCH roles and rules",
+      "tier": "free",
+      "basename": "DESIGN.md",
+      "pathTemplate": "/themes/{packId}/DESIGN.md"
+    },
+    {
+      "id": "dtcg",
+      "label": "DTCG tokens",
+      "description": "W3C Design Tokens JSON ($value / $type) with light and dark modes",
+      "tier": "free",
+      "basename": "tokens.dtcg.json",
+      "pathTemplate": "/themes/{packId}/tokens.dtcg.json"
+    },
+    {
+      "id": "tailwind-theme",
+      "label": "Tailwind @theme",
+      "description": "Tailwind CSS v4 @theme file with mode remaps",
+      "tier": "free",
+      "basename": "theme.css",
+      "pathTemplate": "/themes/{packId}/theme.css"
+    },
+    {
+      "id": "skill-md",
+      "label": "Agent skill",
+      "description": "SKILL.md instructions for coding agents using this theme",
+      "tier": "free",
+      "basename": "SKILL.md",
+      "pathTemplate": "/themes/{packId}/SKILL.md"
+    }
+  ]
+}