@koehler8/cms 1.0.0-beta.13 → 1.0.0-beta.14

package/bin/cms-create-extension.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptPath = path.resolve(__dirname, '..', 'scripts', 'create-extension.mjs');
+await import(pathToFileURL(scriptPath).href);

package/bin/cms-create-theme.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptPath = path.resolve(__dirname, '..', 'scripts', 'create-theme.mjs');
+await import(pathToFileURL(scriptPath).href);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koehler8/cms",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "description": "Vertex CMS — lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support",
   "license": "MIT",
   "type": "module",
@@ -47,7 +47,9 @@
   "bin": {
     "cms-generate-public-assets": "./bin/cms-generate-public-assets.js",
     "cms-validate-themes": "./bin/cms-validate-themes.js",
-    "cms-validate-extensions": "./bin/cms-validate-extensions.js"
+    "cms-validate-extensions": "./bin/cms-validate-extensions.js",
+    "cms-create-theme": "./bin/cms-create-theme.js",
+    "cms-create-extension": "./bin/cms-create-extension.js"
   },
   "files": [
     "src",

package/scripts/create-extension.mjs

@@ -0,0 +1,11 @@
+import { runScaffold } from './scaffold.mjs';
+
+const result = await runScaffold({
+  kind: 'extension',
+  argv: process.argv.slice(2),
+});
+
+if (result.message) {
+  process[result.ok ? 'stdout' : 'stderr'].write(result.message + '\n');
+}
+process.exit(result.ok ? 0 : 1);

package/scripts/create-theme.mjs

@@ -0,0 +1,11 @@
+import { runScaffold } from './scaffold.mjs';
+
+const result = await runScaffold({
+  kind: 'theme',
+  argv: process.argv.slice(2),
+});
+
+if (result.message) {
+  process[result.ok ? 'stdout' : 'stderr'].write(result.message + '\n');
+}
+process.exit(result.ok ? 0 : 1);

package/scripts/scaffold.mjs

@@ -0,0 +1,206 @@
+// Shared core for the cms-create-{theme,extension} CLIs. Reads a template
+// directory, substitutes __SLUG__ / __DISPLAY_NAME__ placeholders, writes
+// the result to <cwd>/{themes,extensions}/<slug>/.
+//
+// Intentionally side-effect-free except for the file writes — wiring into
+// the consuming site's package.json / vite.config.js is left to the user
+// via the printed next-steps message. Modifying those files automatically
+// would risk corrupting custom formatting and is harder to reverse than a
+// copy/paste from the terminal.
+
+import { mkdir, readdir, readFile, writeFile, access } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Don't use `new URL('..', import.meta.url)` — vitest's happy-dom env can
+// patch the URL constructor in ways that make fileURLToPath reject the
+// result. Compute the path directly.
+function defaultFrameworkRoot() {
+  try {
+    return path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+  } catch {
+    return null;
+  }
+}
+const SLUG_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+
+function toDisplayName(slug) {
+  return slug
+    .split('-')
+    .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
+    .join(' ');
+}
+
+function parseArgs(argv) {
+  const args = { slug: null, out: null, force: false, help: false };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--help' || a === '-h') args.help = true;
+    else if (a === '--force' || a === '-f') args.force = true;
+    else if (a === '--out') args.out = argv[++i];
+    else if (a.startsWith('--out=')) args.out = a.slice('--out='.length);
+    else if (!args.slug && !a.startsWith('-')) args.slug = a;
+  }
+  return args;
+}
+
+async function pathExists(p) {
+  try {
+    await access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function collectTemplateFiles(dir) {
+  const out = [];
+  const entries = await readdir(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.name.startsWith('.')) continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      out.push(...(await collectTemplateFiles(full)));
+    } else {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+function applySubstitutions(content, subs) {
+  let result = content;
+  for (const [from, to] of Object.entries(subs)) {
+    result = result.split(from).join(to);
+  }
+  return result;
+}
+
+/**
+ * Run the scaffold for one of {theme, extension}.
+ *
+ * @param {object} opts
+ * @param {'theme'|'extension'} opts.kind
+ * @param {string[]} opts.argv  argv slice excluding `node` + script path
+ * @param {string} opts.cwd     working directory (defaults to process.cwd())
+ * @returns {Promise<{ok: boolean, slug?: string, targetDir?: string, message?: string}>}
+ */
+export async function runScaffold({ kind, argv, cwd = process.cwd(), frameworkRoot } = {}) {
+  if (kind !== 'theme' && kind !== 'extension') {
+    return { ok: false, message: `unknown kind: ${kind}` };
+  }
+  const root = frameworkRoot || defaultFrameworkRoot();
+  if (!root) {
+    return {
+      ok: false,
+      message: 'error: could not resolve @koehler8/cms framework root; pass `frameworkRoot` explicitly',
+    };
+  }
+  const args = parseArgs(argv);
+
+  if (args.help) {
+    return { ok: true, message: usage(kind) };
+  }
+  if (!args.slug) {
+    return { ok: false, message: `error: missing <slug>\n${usage(kind)}` };
+  }
+  if (!SLUG_PATTERN.test(args.slug)) {
+    return {
+      ok: false,
+      message: `error: slug "${args.slug}" must be lowercase kebab-case (e.g. "coastal", "lush-canopy")`,
+    };
+  }
+
+  const slug = args.slug;
+  const displayName = toDisplayName(slug);
+  const subs = { __SLUG__: slug, __DISPLAY_NAME__: displayName };
+  const templateDir = path.join(root, 'templates', 'scaffolds', kind);
+  const defaultDirName = kind === 'theme' ? 'themes' : 'extensions';
+  const targetDir = args.out
+    ? path.resolve(cwd, args.out)
+    : path.join(cwd, defaultDirName, slug);
+
+  if (!(await pathExists(templateDir))) {
+    return {
+      ok: false,
+      message: `error: scaffold templates missing at ${templateDir}. Reinstall @koehler8/cms?`,
+    };
+  }
+  if ((await pathExists(targetDir)) && !args.force) {
+    return {
+      ok: false,
+      message: `error: target directory already exists: ${targetDir}\n(use --force to overwrite)`,
+    };
+  }
+
+  const files = await collectTemplateFiles(templateDir);
+  await mkdir(targetDir, { recursive: true });
+  for (const file of files) {
+    const rel = path.relative(templateDir, file);
+    const outPath = path.join(targetDir, rel);
+    await mkdir(path.dirname(outPath), { recursive: true });
+    const raw = await readFile(file, 'utf8');
+    await writeFile(outPath, applySubstitutions(raw, subs));
+  }
+
+  const targetRel = path.relative(cwd, targetDir) || targetDir;
+  return {
+    ok: true,
+    slug,
+    targetDir,
+    message: `${successHeader(kind, slug, targetRel)}\n${nextSteps(kind, slug, targetRel)}`,
+  };
+}
+
+function successHeader(kind, slug, targetRel) {
+  const fileCount = kind === 'theme' ? 5 : 4;
+  return `✓ Scaffolded ${kind} "${slug}" → ${targetRel}/ (${fileCount} files)`;
+}
+
+function nextSteps(kind, slug, targetRel) {
+  if (kind === 'theme') {
+    return [
+      '',
+      'Next steps:',
+      '  1. Add to your site\'s package.json dependencies:',
+      `       "cms-theme-${slug}": "file:./${targetRel}"`,
+      '  2. Run `npm install` to symlink it into node_modules.',
+      '  3. Add to vite.config.js\'s themes array:',
+      `       themes: ['cms-theme-${slug}'],`,
+      '  4. Activate it in site/content/{baseLocale}/site.json:',
+      `       "theme": "${slug}"`,
+      `  5. Edit ${targetRel}/theme.config.js to define your palette.`,
+      '',
+    ].join('\n');
+  }
+  return [
+    '',
+    'Next steps:',
+    '  1. Add to your site\'s package.json dependencies:',
+    `       "cms-ext-${slug}": "file:./${targetRel}"`,
+    '  2. Run `npm install` to symlink it into node_modules.',
+    '  3. Add to vite.config.js\'s extensions array:',
+    `       extensions: ['cms-ext-${slug}'],`,
+    `  4. Add components to ${targetRel}/components/ as needed (see ${targetRel}/README.md).`,
+    `     Or, for one-off site-only components, prefer site/components/ instead.`,
+    '',
+  ].join('\n');
+}
+
+function usage(kind) {
+  const cmd = kind === 'theme' ? 'cms-create-theme' : 'cms-create-extension';
+  const dir = kind === 'theme' ? 'themes' : 'extensions';
+  return `
+Usage: npx ${cmd} <slug> [--out <directory>] [--force]
+
+Scaffolds a new @koehler8/cms ${kind} into the current site.
+
+Arguments:
+  <slug>          Lowercase kebab-case slug (e.g. "coastal", "lush-canopy").
+
+Options:
+  --out <dir>     Where to create the ${kind}. Defaults to ./${dir}/<slug>/.
+  --force         Overwrite an existing target directory.
+  -h, --help      Show this message.
+`;
+}

package/templates/scaffolds/extension/README.md

@@ -0,0 +1,53 @@
+# cms-ext-__SLUG__
+
+__DISPLAY_NAME__ extension for [`@koehler8/cms`](https://github.com/koehler8/cms).
+
+## Status
+
+Starter scaffold. Currently empty (`components: []`). Add components as the design takes shape.
+
+## Activate
+
+After scaffolding (`npx cms-create-extension __SLUG__`), wire it into your site:
+
+```jsonc
+// package.json
+"dependencies": {
+  "cms-ext-__SLUG__": "file:./extensions/__SLUG__"
+}
+```
+
+```js
+// vite.config.js
+plugins: cms({
+  siteDir: './site',
+  extensions: ['cms-ext-__SLUG__'],
+}),
+```
+
+Run `npm install`, then build/preview.
+
+## Add a component
+
+1. Create `components/Foo.vue`. Follow the standard CMS pattern:
+   - Read content via `inject('pageContent')`
+   - Use `<style scoped>`
+   - Consume theme tokens via `var(--brand-*)`
+2. Add an entry to [extension.config.json](extension.config.json) `components[]` — `name`, `label`, `description`, `module`, `configKey`.
+3. Add a lazy dynamic import to [index.js](index.js)'s `components` map keyed by the same module path.
+4. Reference the component by name in any page's `components[]` array (e.g. `"components[N]": "Foo"`).
+5. Put translations under `content.{configKey}.*` in `pages/{pageId}.json`.
+
+## When to put a component here vs `site/components/`
+
+- **`site/components/`** — one-off components specific to a single site. Auto-globbed; no extension wrapper needed. **Default.**
+- **This extension** — components destined to be shared across multiple sites (e.g. eventually published to npm).
+
+## Extracting to a standalone repo
+
+Once the extension carries enough to be worth sharing:
+
+1. Copy `extensions/__SLUG__/` to a new repo named `cms-ext-__SLUG__/`
+2. Rename `name` in `package.json` to `@koehler8/cms-ext-__SLUG__` and add the standard repo metadata (homepage, bugs, repository) following the pattern of `@koehler8/cms-ext-compliance`
+3. Publish to GitHub Packages / npm
+4. Replace the `file:` dependency in each consuming site with the published version

package/templates/scaffolds/extension/extension.config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/@koehler8/cms/extensions/manifest.schema.json",
+  "slug": "__SLUG__",
+  "version": "0.1.0",
+  "license": "MIT",
+  "provider": {
+    "name": "__DISPLAY_NAME__ extension"
+  },
+  "components": []
+}

package/templates/scaffolds/extension/index.js

@@ -0,0 +1,37 @@
+import manifest from './extension.config.json' with { type: 'json' };
+
+// Components contributed by this extension (use lazy dynamic imports so
+// Vite splits each into its own chunk). Key by the same module path
+// declared in extension.config.json's components[].module.
+//
+// To add a new component:
+//   1. Create components/Foo.vue.
+//   2. Add a {name, label, description, module, configKey} entry to
+//      extension.config.json's components[] array.
+//   3. Add a `'./components/Foo.vue': () => import('./components/Foo.vue')`
+//      entry to the map below.
+const components = {};
+
+// Optional setup() hook — runs once during app initialization with
+// { app, router, pinia, siteData, isClient }. Use it for runtime
+// concerns the manifest doesn't cover (e.g. mounting a banner Vue app
+// to document.body, registering a Pinia store, etc.). Remove if unused.
+//
+// async function setup({ app, router, pinia, siteData, isClient }) {
+//   // ...
+// }
+
+// Optional contentDefaults — a frozen object keyed by `configKey` that
+// the resolver merges underneath each component's content. Use it to
+// ship sensible defaults so consumer sites only override what they
+// want to change. Remove if unused.
+//
+// import contentDefaults from './content.defaults.json' with { type: 'json' };
+
+export default {
+  manifest,
+  components,
+  // setup,
+  // contentDefaults,
+};
+export { manifest };

package/templates/scaffolds/extension/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "cms-ext-__SLUG__",
+  "version": "0.1.0",
+  "description": "__DISPLAY_NAME__ extension for @koehler8/cms.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./config": "./extension.config.json"
+  },
+  "files": [
+    "index.js",
+    "extension.config.json",
+    "components",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@koehler8/cms": "^1.0.0-beta.1"
+  }
+}

package/templates/scaffolds/theme/README.md

@@ -0,0 +1,50 @@
+# cms-theme-__SLUG__
+
+__DISPLAY_NAME__ theme for [`@koehler8/cms`](https://github.com/koehler8/cms).
+
+## Status
+
+Starter scaffold. Edit [theme.config.js](theme.config.js) to define your palette, typography, surfaces, etc. The bland slate-and-sand defaults are placeholders.
+
+## Activate
+
+After scaffolding (`npx cms-create-theme __SLUG__`), wire it into your site:
+
+```jsonc
+// package.json
+"dependencies": {
+  "cms-theme-__SLUG__": "file:./themes/__SLUG__"
+}
+```
+
+```js
+// vite.config.js
+plugins: cms({
+  siteDir: './site',
+  themes: ['cms-theme-__SLUG__'],
+}),
+```
+
+```jsonc
+// site/content/{baseLocale}/site.json
+{
+  "theme": "__SLUG__"
+}
+```
+
+Run `npm install`, then build/preview to see your theme applied.
+
+## Edit
+
+All theming happens in [theme.config.js](theme.config.js). The CMS turns each `tokens.*` block into `--brand-*` / `--theme-*` / `--ui-*` CSS variables under `:root[data-site-theme="__SLUG__"]`, bundled into a sync stylesheet so they apply during the initial paint.
+
+[theme.css](theme.css) is for supplemental rules the manifest doesn't cover (font `@import`s, brand-color aliases, etc.).
+
+## Extracting to a standalone repo
+
+Once the theme stabilises:
+
+1. Copy `themes/__SLUG__/` to a new repo named `cms-theme-__SLUG__/`
+2. Rename the `name` in `package.json` to `@koehler8/cms-theme-__SLUG__` and add the standard repo metadata (homepage, bugs, repository) following the pattern of `@koehler8/cms-theme-neon`
+3. Publish to GitHub Packages / npm
+4. Replace the `file:` dependency in the consuming site with the published version

package/templates/scaffolds/theme/index.js

@@ -0,0 +1,8 @@
+import manifest from './theme.config.js';
+// Side-effect import (not `?inline`): @koehler8/cms >= 1.0.0-beta.8 bundles
+// theme.css as a sync <link rel="stylesheet">, applied during the initial
+// paint instead of injected via JS after Vue hydrates.
+import './theme.css';
+
+export default { manifest };
+export { manifest };

package/templates/scaffolds/theme/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "cms-theme-__SLUG__",
+  "version": "0.1.0",
+  "description": "__DISPLAY_NAME__ theme for @koehler8/cms.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./config": "./theme.config.js"
+  },
+  "files": [
+    "index.js",
+    "theme.config.js",
+    "theme.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@koehler8/cms": "^1.0.0-beta.1"
+  }
+}

package/templates/scaffolds/theme/theme.config.js

@@ -0,0 +1,228 @@
+// __DISPLAY_NAME__ theme manifest. Defines the design tokens the CMS turns
+// into `--brand-*`, `--theme-*`, and `--ui-*` CSS variables under
+// `:root[data-site-theme="__SLUG__"]`. CMS components consume these via
+// `var(--brand-*)`, so editing the values here cascades automatically.
+//
+// All token blocks below are required by the validator. The default palette
+// is intentionally bland (cool slate + warm sand accent) so it's obvious
+// what to change first. See @koehler8/cms-theme-neon, -frog, -aurora,
+// -southpark, -swamp for production-quality references.
+
+const slate900 = '#0f172a';
+const slate800 = '#1e293b';
+const slate700 = '#334155';
+const slate200 = '#e2e8f0';
+const slate100 = '#f1f5f9';
+const sand = '#f4a261';
+const sandDeep = '#d97e3a';
+const ink = '#0b1220';
+const cream = '#f7f3ec';
+
+export default {
+  slug: '__SLUG__',
+  meta: {
+    name: '__DISPLAY_NAME__',
+    version: '0.1.0',
+  },
+  tokens: {
+    palette: {
+      primary: slate800,
+      primaryAccent: slate900,
+      secondary: slate700,
+      accent: sand,
+      accentSoft: 'rgba(244, 162, 97, 0.18)',
+      neutral: ink,
+      neutralStrong: cream,
+      neutralSoft: slate200,
+      inverse: '#ffffff',
+      success: '#2a9d8f',
+      info: slate700,
+      warning: sand,
+      critical: '#d62828',
+      criticalSoft: 'rgba(214, 40, 40, 0.18)',
+    },
+    text: {
+      primary: cream,
+      muted: slate200,
+      mutedStrong: slate100,
+      inverse: ink,
+      accent: sand,
+      onAccent: '#ffffff',
+    },
+    surfaces: {
+      base: ink,
+      baseAlt: slate900,
+      raised: slate800,
+      sunken: '#070b14',
+      callout: 'rgba(244, 162, 97, 0.12)',
+      card: 'rgba(30, 41, 59, 0.92)',
+      cardAlt: 'rgba(51, 65, 85, 0.92)',
+      overlay: 'rgba(11, 18, 32, 0.96)',
+      backdrop: 'rgba(11, 18, 32, 0.78)',
+      border: 'rgba(226, 232, 240, 0.18)',
+      divider: 'rgba(226, 232, 240, 0.12)',
+      input: 'rgba(30, 41, 59, 0.96)',
+      chip: 'rgba(244, 162, 97, 0.22)',
+      chipAccent: sand,
+      helper: {
+        background: 'rgba(226, 232, 240, 0.08)',
+        hover: 'rgba(226, 232, 240, 0.16)',
+        text: cream,
+        border: 'rgba(226, 232, 240, 0.2)',
+        heading: cream,
+        body: 'rgba(247, 243, 236, 0.85)',
+      },
+      tabs: {
+        background: 'rgba(30, 41, 59, 0.92)',
+        border: 'rgba(226, 232, 240, 0.16)',
+        shadow: '0 18px 34px rgba(11, 18, 32, 0.45)',
+        tabColor: 'rgba(247, 243, 236, 0.88)',
+        activeBackground: 'rgba(244, 162, 97, 0.18)',
+        activeColor: '#ffffff',
+        activeShadow: '0 18px 40px rgba(11, 18, 32, 0.55), inset 0 1px 0 rgba(255,255,255,0.16)',
+        stepBackground: 'rgba(255, 255, 255, 0.06)',
+        stepBorder: 'rgba(255, 255, 255, 0.18)',
+        stepColor: 'rgba(255, 255, 255, 0.72)',
+        activeStepBackground: 'rgba(244, 162, 97, 0.24)',
+        activeStepBorder: 'rgba(244, 162, 97, 0.5)',
+        activeStepColor: sand,
+      },
+      field: {
+        background: 'rgba(30, 41, 59, 0.96)',
+        border: 'rgba(226, 232, 240, 0.16)',
+        shadow: '0 8px 24px rgba(11, 18, 32, 0.32)',
+        addonBackground: 'rgba(11, 18, 32, 0.92)',
+        addonBorder: 'rgba(226, 232, 240, 0.16)',
+        addonColor: cream,
+        inputColor: cream,
+        inputPlaceholder: 'rgba(241, 245, 249, 0.55)',
+      },
+      strip: {
+        background: 'rgba(11, 18, 32, 0.9)',
+        border: 'rgba(226, 232, 240, 0.16)',
+        text: cream,
+      },
+      chrome: {
+        background: 'rgba(11, 18, 32, 0.94)',
+        text: cream,
+        shadow: '0 18px 45px rgba(2, 5, 12, 0.55)',
+        compactShadow: '0 12px 32px rgba(2, 5, 12, 0.65)',
+      },
+      backdropPrimary: {
+        background: 'linear-gradient(150deg, rgba(11,18,32,0.98), rgba(15,23,42,0.92))',
+        before: 'radial-gradient(circle, rgba(226,232,240,0.3), rgba(0,0,0,0))',
+        after: 'radial-gradient(circle, rgba(244,162,97,0.5), rgba(0,0,0,0))',
+      },
+      backdropSecondary: {
+        background: 'linear-gradient(140deg, rgba(11,18,32,0.97), rgba(15,23,42,0.92))',
+        before: 'radial-gradient(circle, rgba(244,162,97,0.45), rgba(0,0,0,0))',
+        after: 'radial-gradient(circle, rgba(226,232,240,0.4), rgba(0,0,0,0))',
+      },
+    },
+    typography: {
+      bodyFamily: '"Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
+      headingFamily: '"Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
+      monoFamily: '"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace',
+      baseSize: '16px',
+      scale: 1.125,
+      weightRegular: 400,
+      weightMedium: 500,
+      weightBold: 600,
+      letterSpacingTight: '-0.015em',
+      letterSpacingWide: '0.08em',
+    },
+    ctas: {
+      primary: {
+        bg: `linear-gradient(135deg, ${sand} 0%, ${sandDeep} 100%)`,
+        text: '#ffffff',
+        border: '1px solid rgba(255,255,255,0.18)',
+        hoverBg: `linear-gradient(135deg, ${sandDeep} 0%, ${sand} 100%)`,
+        hoverBorder: '1px solid rgba(255,255,255,0.24)',
+        shadow: '0 18px 35px rgba(11, 18, 32, 0.45)',
+      },
+      secondary: {
+        bg: 'rgba(30, 41, 59, 0.92)',
+        text: cream,
+        border: 'rgba(226, 232, 240, 0.2)',
+        hoverBg: 'rgba(226, 232, 240, 0.08)',
+        hoverBorder: 'rgba(226, 232, 240, 0.32)',
+        shadow: '0 8px 24px rgba(11, 18, 32, 0.32)',
+      },
+      ghost: {
+        bg: 'transparent',
+        text: cream,
+        border: 'rgba(226, 232, 240, 0.2)',
+        hoverBg: 'rgba(226, 232, 240, 0.08)',
+        hoverBorder: 'rgba(226, 232, 240, 0.32)',
+        shadow: 'none',
+      },
+      link: {
+        text: sand,
+        hoverText: sandDeep,
+        underline: 'rgba(244, 162, 97, 0.45)',
+      },
+    },
+    chips: {
+      neutral: {
+        bg: 'rgba(226, 232, 240, 0.12)',
+        text: cream,
+        border: 'rgba(226, 232, 240, 0.2)',
+      },
+      accent: {
+        bg: 'rgba(244, 162, 97, 0.22)',
+        text: '#ffffff',
+        border: 'rgba(244, 162, 97, 0.45)',
+      },
+      outline: {
+        bg: 'transparent',
+        text: sand,
+        border: 'rgba(244, 162, 97, 0.45)',
+      },
+    },
+    focus: {
+      ring: '0 0 0 2px rgba(226, 232, 240, 0.45)',
+      ringMuted: '0 0 0 1px rgba(226, 232, 240, 0.32)',
+      outline: 'rgba(226, 232, 240, 0.65)',
+      shadowInset: '0 0 22px rgba(226, 232, 240, 0.32)',
+    },
+    radii: {
+      sm: '6px',
+      md: '12px',
+      lg: '20px',
+      pill: '999px',
+      full: '50%',
+    },
+    elevation: {
+      flat: '0 8px 24px rgba(11, 18, 32, 0.18)',
+      raised: '0 18px 38px rgba(11, 18, 32, 0.32)',
+      overlay: '0 24px 56px rgba(11, 18, 32, 0.5)',
+    },
+    utility: {
+      divider: 'rgba(226, 232, 240, 0.16)',
+      inputBorder: 'rgba(226, 232, 240, 0.16)',
+      inputText: cream,
+      inputPlaceholder: 'rgba(241, 245, 249, 0.55)',
+      selectionBg: 'rgba(244, 162, 97, 0.32)',
+      selectionText: '#ffffff',
+      gradientHero: 'linear-gradient(150deg, rgba(11,18,32,0.98), rgba(15,23,42,0.92))',
+      gradientPromo: 'linear-gradient(140deg, rgba(11,18,32,0.97), rgba(15,23,42,0.92))',
+      bodyBackground: [
+        'linear-gradient(155deg, rgba(11,18,32,0.98), rgba(15,23,42,0.92))',
+      ],
+      modalSurface: 'rgba(30, 41, 59, 0.96)',
+      modalBorder: 'rgba(226, 232, 240, 0.16)',
+      modalShadow: '0 24px 56px rgba(11, 18, 32, 0.5)',
+      modalRadius: '20px',
+      chartTrack: 'rgba(30, 41, 59, 0.85)',
+      chartCenterText: cream,
+      statusHeadline: {
+        background: 'linear-gradient(120deg, rgba(226,232,240,0.12), rgba(244,162,97,0.18))',
+        color: sand,
+        shadow: '0 12px 24px rgba(11, 18, 32, 0.32), inset 0 1px 0 rgba(255,255,255,0.18)',
+      },
+    },
+  },
+  assets: {
+    css: './theme.css',
+  },
+};

package/templates/scaffolds/theme/theme.css

@@ -0,0 +1,14 @@
+/* __DISPLAY_NAME__ theme — supplemental rules and brand-specific aliases.
+ *
+ * Most theming happens via the tokens object in theme.config.js — the CMS
+ * derives `:root[data-site-theme="__SLUG__"] { --brand-*, --theme-* }` from
+ * the manifest and bundles it into `virtual:cms-theme-vars.css` (loaded as
+ * a sync <link rel="stylesheet">). This file is for things the manifest
+ * doesn't cover: font @imports, brand-color aliases, transitions, etc.
+ */
+
+:root[data-site-theme="__SLUG__"] {
+  /* Brand color aliases (also exposed by the manifest, mirrored here for
+     parity with the existing @koehler8/cms-theme-* packages). */
+  /* --brand-foo: #XXXXXX; */
+}