@hewnui/themes 0.0.0-stage → 0.1.0

package/figma/sticker-sheet.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="616" height="664" viewBox="0 0 616 664" role="img" aria-label="Hewn sticker sheet">
+  <rect width="100%" height="100%" fill="#f4f4f2"/>
+  <text x="24" y="40" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="16" font-weight="600" fill="#1a1a18">Hewn · sticker sheet</text>
+  <text x="112" y="58" font-family="IBM Plex Mono, ui-monospace, monospace" font-size="10" fill="#6b6b66">surface</text>
+  <text x="232" y="58" font-family="IBM Plex Mono, ui-monospace, monospace" font-size="10" fill="#6b6b66">raised</text>
+  <text x="352" y="58" font-family="IBM Plex Mono, ui-monospace, monospace" font-size="10" fill="#6b6b66">button</text>
+  <text x="472" y="58" font-family="IBM Plex Mono, ui-monospace, monospace" font-size="10" fill="#6b6b66">input</text>
+  <g>
+    <text x="24" y="106" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#1a1a18">forest</text>
+    <rect x="112" y="64" width="100" height="72" rx="10" fill="oklch(0.972 0.012 145)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <rect x="124" y="78" width="76" height="44" rx="8" fill="oklch(0.995 0.004 145)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <rect x="232" y="64" width="100" height="72" rx="10" fill="oklch(0.972 0.012 145)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <rect x="244" y="78" width="76" height="44" rx="8" fill="oklch(1 0 0)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <rect x="352" y="64" width="100" height="72" rx="10" fill="oklch(0.972 0.012 145)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <rect x="366" y="86" width="72" height="28" rx="8" fill="oklch(0.49 0.105 148)"/>
+    <text x="402" y="104" text-anchor="middle" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.985 0.008 145)">Button</text>
+    <rect x="472" y="64" width="100" height="72" rx="10" fill="oklch(0.972 0.012 145)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <rect x="482" y="86" width="80" height="28" rx="8" fill="oklch(0.995 0.004 145)" stroke="oklch(0.36 0.035 145 / 14%)" stroke-width="1"/>
+    <text x="490" y="104" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.49 0.035 145)">Input</text>
+    <text x="542" y="104" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="9" fill="oklch(0.225 0.028 145)" opacity="0.35">|</text>
+  </g>
+  <g>
+    <text x="24" y="202" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#1a1a18">tide</text>
+    <rect x="112" y="160" width="100" height="72" rx="10" fill="oklch(0.97 0.01 220)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <rect x="124" y="174" width="76" height="44" rx="8" fill="oklch(0.995 0.004 220)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <rect x="232" y="160" width="100" height="72" rx="10" fill="oklch(0.97 0.01 220)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <rect x="244" y="174" width="76" height="44" rx="8" fill="oklch(1 0 0)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <rect x="352" y="160" width="100" height="72" rx="10" fill="oklch(0.97 0.01 220)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <rect x="366" y="182" width="72" height="28" rx="8" fill="oklch(0.52 0.07 210)"/>
+    <text x="402" y="200" text-anchor="middle" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.98 0.01 210)">Button</text>
+    <rect x="472" y="160" width="100" height="72" rx="10" fill="oklch(0.97 0.01 220)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <rect x="482" y="182" width="80" height="28" rx="8" fill="oklch(0.995 0.004 220)" stroke="oklch(0.35 0.03 230 / 14%)" stroke-width="1"/>
+    <text x="490" y="200" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.48 0.03 230)">Input</text>
+    <text x="542" y="200" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="9" fill="oklch(0.24 0.03 230)" opacity="0.35">|</text>
+  </g>
+  <g>
+    <text x="24" y="298" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#1a1a18">graphite</text>
+    <rect x="112" y="256" width="100" height="72" rx="10" fill="oklch(0.965 0.005 255)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <rect x="124" y="270" width="76" height="44" rx="8" fill="oklch(0.99 0.003 255)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <rect x="232" y="256" width="100" height="72" rx="10" fill="oklch(0.965 0.005 255)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <rect x="244" y="270" width="76" height="44" rx="8" fill="oklch(1 0 0)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <rect x="352" y="256" width="100" height="72" rx="10" fill="oklch(0.965 0.005 255)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <rect x="366" y="278" width="72" height="28" rx="8" fill="oklch(0.48 0.06 250)"/>
+    <text x="402" y="296" text-anchor="middle" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.98 0.01 250)">Button</text>
+    <rect x="472" y="256" width="100" height="72" rx="10" fill="oklch(0.965 0.005 255)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <rect x="482" y="278" width="80" height="28" rx="8" fill="oklch(0.99 0.003 255)" stroke="oklch(0.34 0.02 255 / 14%)" stroke-width="1"/>
+    <text x="490" y="296" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.47 0.02 255)">Input</text>
+    <text x="542" y="296" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="9" fill="oklch(0.23 0.02 255)" opacity="0.35">|</text>
+  </g>
+  <g>
+    <text x="24" y="394" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#1a1a18">dune</text>
+    <rect x="112" y="352" width="100" height="72" rx="10" fill="oklch(0.96 0.02 85)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <rect x="124" y="366" width="76" height="44" rx="8" fill="oklch(0.985 0.012 90)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <rect x="232" y="352" width="100" height="72" rx="10" fill="oklch(0.96 0.02 85)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <rect x="244" y="366" width="76" height="44" rx="8" fill="oklch(0.995 0.006 95)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <rect x="352" y="352" width="100" height="72" rx="10" fill="oklch(0.96 0.02 85)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <rect x="366" y="374" width="72" height="28" rx="8" fill="oklch(0.58 0.11 70)"/>
+    <text x="402" y="392" text-anchor="middle" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.98 0.01 90)">Button</text>
+    <rect x="472" y="352" width="100" height="72" rx="10" fill="oklch(0.96 0.02 85)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <rect x="482" y="374" width="80" height="28" rx="8" fill="oklch(0.985 0.012 90)" stroke="oklch(0.4 0.04 70 / 16%)" stroke-width="1"/>
+    <text x="490" y="392" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.5 0.04 70)">Input</text>
+    <text x="542" y="392" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="9" fill="oklch(0.28 0.04 65)" opacity="0.35">|</text>
+  </g>
+  <g>
+    <text x="24" y="490" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#1a1a18">clay</text>
+    <rect x="112" y="448" width="100" height="72" rx="10" fill="oklch(0.955 0.02 55)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <rect x="124" y="462" width="76" height="44" rx="8" fill="oklch(0.98 0.012 50)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <rect x="232" y="448" width="100" height="72" rx="10" fill="oklch(0.955 0.02 55)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <rect x="244" y="462" width="76" height="44" rx="8" fill="oklch(0.995 0.006 45)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <rect x="352" y="448" width="100" height="72" rx="10" fill="oklch(0.955 0.02 55)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <rect x="366" y="470" width="72" height="28" rx="8" fill="oklch(0.55 0.12 40)"/>
+    <text x="402" y="488" text-anchor="middle" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.98 0.01 50)">Button</text>
+    <rect x="472" y="448" width="100" height="72" rx="10" fill="oklch(0.955 0.02 55)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <rect x="482" y="470" width="80" height="28" rx="8" fill="oklch(0.98 0.012 50)" stroke="oklch(0.4 0.05 40 / 16%)" stroke-width="1"/>
+    <text x="490" y="488" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.5 0.045 40)">Input</text>
+    <text x="542" y="488" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="9" fill="oklch(0.27 0.045 40)" opacity="0.35">|</text>
+  </g>
+  <g>
+    <text x="24" y="586" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#1a1a18">ember</text>
+    <rect x="112" y="544" width="100" height="72" rx="10" fill="oklch(0.17 0.02 40)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <rect x="124" y="558" width="76" height="44" rx="8" fill="oklch(0.21 0.025 40)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <rect x="232" y="544" width="100" height="72" rx="10" fill="oklch(0.17 0.02 40)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <rect x="244" y="558" width="76" height="44" rx="8" fill="oklch(0.255 0.03 42)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <rect x="352" y="544" width="100" height="72" rx="10" fill="oklch(0.17 0.02 40)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <rect x="366" y="566" width="72" height="28" rx="8" fill="oklch(0.7 0.15 50)"/>
+    <text x="402" y="584" text-anchor="middle" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.985 0.015 50)">Button</text>
+    <rect x="472" y="544" width="100" height="72" rx="10" fill="oklch(0.17 0.02 40)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <rect x="482" y="566" width="80" height="28" rx="8" fill="oklch(0.21 0.025 40)" stroke="oklch(0.84 0.03 60 / 14%)" stroke-width="1"/>
+    <text x="490" y="584" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="11" fill="oklch(0.72 0.03 60)">Input</text>
+    <text x="542" y="584" font-family="IBM Plex Sans, ui-sans-serif, system-ui, sans-serif" font-size="9" fill="oklch(0.93 0.02 70)" opacity="0.35">|</text>
+  </g>
+</svg>

package/package.json

@@ -1,6 +1,100 @@
 {
   "name": "@hewnui/themes",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hewnui/Hewn.git",
+    "directory": "packages/themes"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      "./tokens.css": "./src/tokens.css",
+      "./motion.css": "./src/motion.css",
+      "./glass.css": "./src/glass.css",
+      "./glass-buttons.css": "./src/glass-buttons.css",
+      "./radius.css": "./src/radius.css",
+      "./packs/clay.css": "./src/packs/clay.css",
+      "./packs/dune.css": "./src/packs/dune.css",
+      "./packs/ember.css": "./src/packs/ember.css",
+      "./packs/forest.css": "./src/packs/forest.css",
+      "./packs/graphite.css": "./src/packs/graphite.css",
+      "./packs/tide.css": "./src/packs/tide.css",
+      "./authoring": {
+        "types": "./dist/authoring/index.d.ts",
+        "default": "./dist/authoring/index.js"
+      },
+      "./figma/hewn.tokens.json": "./figma/hewn.tokens.json",
+      "./figma/sticker-sheet.svg": "./figma/sticker-sheet.svg",
+      "./package.json": "./package.json"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && tsx ../../tooling/fix-esm-relative-extensions.ts dist/authoring",
+    "generate": "tsx ../../tooling/build-figma-kit.ts && tsx ../../tooling/build-theme-exports.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "dist",
+    "src",
+    "figma",
+    "exports",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!**/__tests__/**"
+  ],
+  "exports": {
+    "./tokens.css": "./src/tokens.css",
+    "./motion.css": "./src/motion.css",
+    "./glass.css": "./src/glass.css",
+    "./glass-buttons.css": "./src/glass-buttons.css",
+    "./radius.css": "./src/radius.css",
+    "./packs/clay.css": "./src/packs/clay.css",
+    "./packs/dune.css": "./src/packs/dune.css",
+    "./packs/ember.css": "./src/packs/ember.css",
+    "./packs/forest.css": "./src/packs/forest.css",
+    "./packs/graphite.css": "./src/packs/graphite.css",
+    "./packs/tide.css": "./src/packs/tide.css",
+    "./authoring": {
+      "types": "./src/authoring/index.ts",
+      "default": "./src/authoring/index.ts"
+    },
+    "./figma/hewn.tokens.json": "./figma/hewn.tokens.json",
+    "./figma/sticker-sheet.svg": "./figma/sticker-sheet.svg",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@hewnui/tsconfig": "workspace:*",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  },
+  "homepage": "https://hewnui.dev",
+  "bugs": {
+    "url": "https://github.com/hewnui/Hewn/issues"
+  },
+  "author": "Himanshu Kumar",
+  "description": "Semantic OKLCH design tokens, motion tokens and six curated theme packs (forest, tide, graphite, dune, clay, ember), with DESIGN.md, DTCG and Tailwind v4 exports.",
+  "keywords": [
+    "design-tokens",
+    "oklch",
+    "css-variables",
+    "themes",
+    "tailwindcss",
+    "tailwind-v4",
+    "dtcg",
+    "design-md",
+    "dark-mode",
+    "glassmorphism",
+    "wcag",
+    "figma-tokens",
+    "hewnui"
+  ]
+}

package/src/authoring/css-vars.ts

@@ -0,0 +1,92 @@
+import { formatOklch } from "./oklch";
+import { colorEntries, structuralEntries } from "./token-entries";
+import type { ResolvedMode } from "./types";
+
+const COLOR_BRIDGE = [
+  "background",
+  "foreground",
+  "surface",
+  "surface-raised",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "border",
+  "ring",
+  "danger",
+  "danger-foreground",
+  "danger-subtle",
+  "danger-border",
+  "success",
+  "success-foreground",
+  "success-subtle",
+  "success-border",
+  "warning",
+  "warning-foreground",
+  "warning-subtle",
+  "warning-border",
+  "info",
+  "info-foreground",
+  "info-subtle",
+  "info-border",
+] as const;
+
+/**
+ * Map a resolved mode to CSS custom properties for scoped live preview.
+ * Includes Tailwind `--color-*` rebinds so utilities do not keep :root-resolved
+ * docs-shell values, plus local glass vars so html[data-material=glass] rules
+ * sample the draft pack instead of the documentation theme.
+ */
+export function modeToCssVars(mode: ResolvedMode): Record<string, string> {
+  const vars: Record<string, string> = {};
+  for (const entry of colorEntries(mode)) {
+    vars[`--kp-${entry.name}`] = entry.value;
+  }
+  for (const entry of structuralEntries(mode)) {
+    vars[`--kp-${entry.name}`] = entry.value;
+  }
+  vars["--kp-font-sans"] =
+    'var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif';
+  vars["--kp-font-mono"] =
+    'var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace';
+  vars["--kp-font-display"] =
+    'var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans)';
+  vars["--kp-shadow-surface"] =
+    `0 1px 2px color-mix(in oklch, ${formatOklch(mode.foreground)} 8%, transparent), ` +
+    `0 16px 40px -28px color-mix(in oklch, ${formatOklch(mode.foreground)} 28%, transparent)`;
+
+  // Recompute glass locally so inherited html glass fills cannot leak docs tint.
+  vars["--kp-glass-fill"] =
+    "color-mix(in oklch, var(--kp-surface) 46%, transparent)";
+  vars["--kp-glass-border"] =
+    "color-mix(in oklch, var(--kp-foreground) 16%, transparent)";
+  vars["--kp-glass-sheen"] =
+    "linear-gradient(148deg, color-mix(in oklch, var(--kp-glass-tint) 70%, white 8%), " +
+    "color-mix(in oklch, var(--kp-surface) 22%, transparent) 42%, " +
+    "color-mix(in oklch, var(--kp-surface) 38%, transparent))";
+
+  for (const name of COLOR_BRIDGE) {
+    vars[`--color-${name}`] = `var(--kp-${name})`;
+  }
+  // Fumadocs tokens occasionally paint nested chrome; keep them on the draft.
+  vars["--color-fd-background"] = "var(--kp-background)";
+  vars["--color-fd-foreground"] = "var(--kp-foreground)";
+  vars["--color-fd-card"] = "var(--kp-surface)";
+  vars["--color-fd-card-foreground"] = "var(--kp-foreground)";
+  vars["--color-fd-muted"] = "var(--kp-muted)";
+  vars["--color-fd-muted-foreground"] = "var(--kp-muted-foreground)";
+  vars["--color-fd-primary"] = "var(--kp-accent)";
+  vars["--color-fd-primary-foreground"] = "var(--kp-accent-foreground)";
+  vars["--color-fd-border"] = "var(--kp-border)";
+  vars["--color-fd-ring"] = "var(--kp-ring)";
+
+  return vars;
+}
+
+/** Stylesheet block for a live-preview selector (no :root). */
+export function modeToPreviewCss(selector: string, mode: ResolvedMode): string {
+  const lines = Object.entries(modeToCssVars(mode)).map(
+    ([name, value]) => `  ${name}: ${value};`,
+  );
+  return `${selector} {\n${lines.join("\n")}\n}\n`;
+}

package/src/authoring/derive.ts

@@ -0,0 +1,106 @@
+import { applyGlass, applyMotion, applyNeutrals, applySemantic, applyShape } from "./pro-apply";
+import { BASE_PACKS, supportedModes } from "./packs";
+import { accentSetFromSeed } from "./ramps";
+import type {
+  OverrideMap,
+  RadiusPreset,
+  ResolvedMode,
+  ResolvedPack,
+  StructuralTokens,
+  ThemeMode,
+} from "./types";
+
+const RADIUS_PRESETS: Record<
+  Exclude<RadiusPreset, "soft">,
+  Pick<
+    StructuralTokens,
+    "radiusSm" | "radiusMd" | "radiusLg" | "radiusPanel"
+  >
+> = {
+  sharp: {
+    radiusSm: "0.125rem",
+    radiusMd: "0.2rem",
+    radiusLg: "0.3rem",
+    radiusPanel: "0.25rem",
+  },
+  rounded: {
+    radiusSm: "0.85rem",
+    radiusMd: "1.15rem",
+    radiusLg: "1.5rem",
+    radiusPanel: "1.25rem",
+  },
+  pill: {
+    radiusSm: "9999px",
+    radiusMd: "9999px",
+    radiusLg: "1.5rem",
+    radiusPanel: "1.15rem",
+  },
+};
+
+export type DeriveResult =
+  | { ok: true; pack: ResolvedPack }
+  | { ok: false; errors: string[] };
+
+export function derivePack(overrides: OverrideMap): DeriveResult {
+  const base = BASE_PACKS[overrides.basePackId];
+  const modes = supportedModes(overrides.basePackId);
+  const adjustments: string[] = [];
+  const resolved: Partial<Record<ThemeMode, ResolvedMode>> = {};
+
+  let structural: StructuralTokens = { ...base.structural };
+  if (overrides.radiusPreset && overrides.radiusPreset !== "soft") {
+    structural = { ...structural, ...RADIUS_PRESETS[overrides.radiusPreset] };
+  }
+  structural = applyShape(structural, overrides.shape);
+  structural = applyMotion(structural, overrides.motion);
+
+  for (const mode of modes) {
+    const colors = base.modes[mode];
+    if (!colors) continue;
+
+    let next = { ...colors };
+    if (overrides.accentSeed) {
+      const accent = accentSetFromSeed(overrides.accentSeed, mode);
+      if ("error" in accent) {
+        return { ok: false, errors: [accent.error] };
+      }
+      next = {
+        ...next,
+        accent: accent.set.accent,
+        accentForeground: accent.set.accentForeground,
+        ring: accent.set.ring,
+        glassTint: accent.set.glassTint,
+      };
+      adjustments.push(...accent.adjustments);
+    }
+
+    next = applyNeutrals(next, overrides.neutrals, mode, adjustments);
+    const semantic = applySemantic(next, overrides.semantic, mode, adjustments);
+    if ("error" in semantic) {
+      return { ok: false, errors: [semantic.error] };
+    }
+    next = applyGlass(semantic, overrides.glass);
+
+    resolved[mode] = {
+      ...next,
+      ...structural,
+      mode,
+      colorScheme: mode,
+    };
+  }
+
+  const packId =
+    overrides.packId ??
+    `custom-${overrides.basePackId}${overrides.accentSeed ? "-accent" : ""}`;
+
+  return {
+    ok: true,
+    pack: {
+      id: packId,
+      basePackId: overrides.basePackId,
+      supportedModes: modes,
+      modes: resolved,
+      adjustments: [...new Set(adjustments)],
+    },
+  };
+}

package/src/authoring/export-css.ts

@@ -0,0 +1,86 @@
+import {
+  colorEntries,
+  modeOrder,
+  primaryMode,
+  structuralEntries,
+} from "./token-entries";
+import type { ResolvedMode, ResolvedPack } from "./types";
+
+function colorLines(mode: ResolvedMode): string {
+  return [
+    `  color-scheme: ${mode.colorScheme};`,
+    ...colorEntries(mode).map(
+      (entry) => `  --kp-${entry.name}: ${entry.value};`,
+    ),
+  ].join("\n");
+}
+
+function structuralLines(mode: ResolvedMode): string {
+  return [
+    ...structuralEntries(mode).map(
+      (entry) => `  --kp-${entry.name}: ${entry.value};`,
+    ),
+    `  --kp-font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui,`,
+    `    sans-serif;`,
+    `  --kp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;`,
+    `  --kp-font-display: var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans);`,
+  ].join("\n");
+}
+
+/** Free-tier CSS pack export — drop-in `[data-theme]` file. */
+export function exportPackCss(pack: ResolvedPack): string {
+  const blocks: string[] = [];
+  let first = true;
+
+  for (const modeName of modeOrder(pack)) {
+    const mode = pack.modes[modeName];
+    if (!mode) continue;
+
+    const selector = first
+      ? `:root,\n[data-theme="${pack.id}"][data-mode="${mode.mode}"]`
+      : `[data-theme="${pack.id}"][data-mode="${mode.mode}"]`;
+
+    const body = first
+      ? `${colorLines(mode)}\n${structuralLines(mode)}`
+      : colorLines(mode);
+
+    blocks.push(`${selector} {\n${body}\n}`);
+    first = false;
+  }
+
+  return `${blocks.join("\n\n")}\n`;
+}
+
+/**
+ * Free — Tailwind v4 `@theme` block for the primary mode, plus mode overrides
+ * that remap the same `--color-*` custom properties.
+ */
+export function exportTailwindTheme(pack: ResolvedPack): string {
+  const primary = primaryMode(pack);
+  const themeLines = [
+    ...colorEntries(primary).map(
+      (entry) => `  --color-${entry.name}: ${entry.value};`,
+    ),
+    ...structuralEntries(primary)
+      .filter((entry) => entry.name.startsWith("radius-"))
+      .map((entry) => `  --${entry.name}: ${entry.value};`),
+    `  --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);`,
+  ];
+
+  const blocks = [`@theme {\n${themeLines.join("\n")}\n}`];
+
+  for (const modeName of modeOrder(pack).slice(1)) {
+    const mode = pack.modes[modeName];
+    if (!mode) continue;
+    const lines = colorEntries(mode).map(
+      (entry) => `  --color-${entry.name}: ${entry.value};`,
+    );
+    blocks.push(
+      `[data-theme="${pack.id}"][data-mode="${mode.mode}"] {\n${lines.join("\n")}\n}`,
+    );
+  }
+
+  return `/* ${pack.id} — Tailwind v4 @theme */\n${blocks.join("\n\n")}\n`;
+}

package/src/authoring/export-design-md.ts

@@ -0,0 +1,134 @@
+import {
+  COLOR_ROLES,
+  DESIGN_DO,
+  DESIGN_DONT,
+  PACK_IDENTITY,
+} from "./pack-meta";
+import { formatOklch } from "./oklch";
+import {
+  colorEntries,
+  modeOrder,
+  primaryMode,
+  structuralEntries,
+} from "./token-entries";
+import type { BasePackId, ResolvedPack } from "./types";
+
+function identity(pack: ResolvedPack) {
+  const meta = PACK_IDENTITY[pack.basePackId as BasePackId];
+  return meta ?? { label: pack.id, summary: `Custom pack based on ${pack.basePackId}.` };
+}
+
+function paletteTable(pack: ResolvedPack): string {
+  const modes = modeOrder(pack);
+  const header =
+    modes.length > 1
+      ? `| Token | Role | ${modes.map((m) => m).join(" | ")} |`
+      : `| Token | Role | ${modes[0]} |`;
+  const sep =
+    modes.length > 1
+      ? `|---|---|${modes.map(() => "---").join("|")}|`
+      : `|---|---|---|`;
+
+  const primary = primaryMode(pack);
+  const rows = colorEntries(primary).map((entry) => {
+    const role = COLOR_ROLES[entry.name] ?? entry.name;
+    const values = modes.map((modeName) => {
+      const mode = pack.modes[modeName];
+      if (!mode) return "—";
+      const match = colorEntries(mode).find((e) => e.name === entry.name);
+      return match ? `\`${match.value}\`` : "—";
+    });
+    return `| \`${entry.name}\` | ${role} | ${values.join(" | ")} |`;
+  });
+
+  return [header, sep, ...rows].join("\n");
+}
+
+function structuralBlock(pack: ResolvedPack): string {
+  const mode = primaryMode(pack);
+  return structuralEntries(mode)
+    .map((entry) => `- \`${entry.name}\`: \`${entry.value}\``)
+    .join("\n");
+}
+
+function list(items: readonly string[]): string {
+  return items.map((item) => `- ${item}`).join("\n");
+}
+
+/** Free — human- and AI-readable design brief for one pack. */
+export function exportDesignMd(pack: ResolvedPack): string {
+  const { label, summary } = identity(pack);
+  const modes = modeOrder(pack).join(", ");
+  const mode = primaryMode(pack);
+
+  return `# ${label} — Design brief
+
+> Generated from Hewn curated theme packs. Semantic OKLCH tokens; do not edit by hand.
+
+## Identity
+
+${summary}
+
+- **Pack id:** \`${pack.id}\`
+- **Base pack:** \`${pack.basePackId}\`
+- **Supported modes:** ${modes}
+- **Color scheme (primary):** ${mode.colorScheme}
+
+## Palette
+
+${paletteTable(pack)}
+
+## 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
+
+${structuralBlock(pack)}
+
+Density scales control spacing rhythm. Panel radius (\`radius-panel\`) caps menus and dialogs so they never go full-pill.
+
+## Motion
+
+- Duration: \`${mode.motionDuration}\`
+- Spring stiffness: \`${mode.motionStiffness}\`
+- Spring damping: \`${mode.motionDamping}\`
+- 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
+
+${list(DESIGN_DO)}
+
+## Don't
+
+${list(DESIGN_DONT)}
+
+## Token reference (primary mode)
+
+\`\`\`
+${colorEntries(mode)
+  .map((e) => `--kp-${e.name}: ${e.value};`)
+  .join("\n")}
+${structuralEntries(mode)
+  .map((e) => `--kp-${e.name}: ${e.value};`)
+  .join("\n")}
+\`\`\`
+`;
+}
+
+/** Convenience — expose formatted OKLCH for tests/docs samples. */
+export function sampleAccent(pack: ResolvedPack): string {
+  return formatOklch(primaryMode(pack).accent);
+}