@koehler8/cms 1.0.0-beta.8 → 1.0.0

package/templates/scaffolds/site/CLAUDE.md

@@ -0,0 +1,121 @@
+# site-__SLUG__
+
+(staging URL TBD)
+
+A site built on the [`@koehler8/cms`](https://github.com/koehler8/cms) framework. **Owner: TBD.** This file is auto-loaded by Claude Code in this directory — read it before making changes.
+
+## Project status
+
+Freshly scaffolded via `npx cms-create-site`. Home page renders the bundled `Header` + `Hero` + `Footer` components with placeholder copy. No theme, extension, or custom components yet — see "Where things go" below for the path each new addition should take.
+
+## Working with the site owner
+
+Assume the owner is not a developer unless you know otherwise. Default behaviors:
+
+- Explain trade-offs in plain language; propose options, don't present decisions.
+- Confirm before structural or visual changes that will be hard to reverse.
+- Push small, reviewable changes frequently and verify on the live URL.
+- Don't over-engineer — most requests can be satisfied by editing `pages/*.json` + bundled CMS components. Reach for a custom Vue component only when the bundled set clearly can't do the job.
+
+## Where things go (the navigation guide)
+
+| Goal | Where |
+|---|---|
+| Edit page copy / hero text / section content | `site/content/{locale}/pages/{pageId}.json` under `content.{configKey}.*` keys |
+| Edit site title, theme key, support email | `site/content/{locale}/site.json` |
+| Edit header logo text, nav items, footer flags | `site/content/{locale}/shared.json` |
+| Add a translation | Mirror the keys you want to override into `site/content/{otherLocale}/...` (only set the keys that differ — the rest inherit from the base locale) |
+| Add an asset (image, icon) | `site/assets/img/...`. Reference it from a component via `resolveAsset('img/foo.png')` or a URL string in content (`"img/foo.png"`) |
+| Override the favicon | Drop a real `.ico` at `site/favicon.ico`; the `cms-generate-public-assets` script picks it up |
+| Add a one-off Vue component (this site only) | `site/components/Foo.vue`. Auto-globbed by the CMS — reference it as `"Foo"` in any page's `components[]`. Read content via `inject('pageContent')`, use `<style scoped>` with `var(--brand-*)` tokens. |
+| Add a component intended to be reused on other sites | The local extension at `extensions/<slug>/`. Add `components/Foo.vue`, register it in `extension.config.json`, and add a dynamic import to `index.js`. Eventually publishable as `@koehler8/cms-ext-<slug>`. |
+| Customize colors, typography, surfaces | `themes/<slug>/theme.config.js`. The CMS regenerates `virtual:cms-theme-vars.css` from the manifest on next build; CMS components consume the vars via `var(--brand-*)`. |
+| Activate a theme | Set `"theme": "<slug>"` in `site/content/{baseLocale}/site.json`. |
+| Add a new page | Create `site/content/{locale}/pages/{pageId}.json` with a `path` and `components[]` array. vite-ssg pre-renders one HTML file per page automatically. |
+| Add a new locale | Create `site/content/{locale}/...` mirroring the base locale's structure. Auto-discovered. |
+| Add a new theme to the project | `npx cms-create-theme <slug>` (scaffolds `themes/<slug>/`, then follow the printed next-steps). |
+| Add a new local extension | `npx cms-create-extension <slug>`. |
+
+If you find yourself writing a component that conceptually belongs in a "regions" or "agents" or "podcasts" sister site, **promote it from `site/components/` into `extensions/<slug>/`** so it can eventually become a published shared package.
+
+## Stack at a glance
+
+- `@koehler8/cms` ^1.0.0 — Vue 3 + vite-ssg framework
+- `@koehler8/cms-ext-compliance` — cookie banner / legal pages (registered by default)
+- `[site/components/](site/components/)` — auto-globbed Vue files for one-off custom UI specific to this site. **The default home for new components.**
+- `[themes/](themes/)`, `[extensions/](extensions/)` — currently empty. Add via the `cms-create-{theme,extension}` CLIs above.
+
+## File layout
+
+```
+site/content/{locale}/        per-locale content (auto-discovered)
+  site.json                   site title, description, theme key, support email
+  shared.json                 cross-page settings — header logo / nav, footer flags
+  pages/{pageId}.json         per-page components[] + content.{configKey}.* keys
+  pages/home.json             home page (the only page in a freshly scaffolded site)
+site/components/              auto-globbed Vue files (the default home for one-off
+                              custom UI). Reference by basename in components[].
+site/assets/img/              site-specific images / icons
+site/style.css                non-critical site overrides (loaded async by the CMS;
+                              fine for things that wouldn't cause a visible flash)
+site/favicon.ico              optional override; `cms-generate-public-assets`
+                              picks it up over the auto-generated letter-favicon
+themes/<slug>/                site-local CMS theme — destined to lift into a
+                              standalone @koehler8/cms-theme-<slug> repo
+extensions/<slug>/            site-local CMS extension — destined to lift into a
+                              standalone @koehler8/cms-ext-<slug> repo
+```
+
+## Common tasks (quick recipes)
+
+### Edit hero / footer copy
+Open `site/content/{baseLocale}/pages/home.json`. Hero text lives under `content.promo.*`; footer text under `content.footer.*` (or whatever configKey the components use). Push and the deploy pipeline picks it up.
+
+### Edit nav links
+`site/content/{baseLocale}/shared.json` → `content.header.navItems[N]`. Each entry is `{ text, href, target? }`. Add `"target": "_blank"` for off-site links.
+
+### Add a custom component
+1. Create `site/components/Foo.vue`.
+2. `inject('pageContent')` for content; `<style scoped>` with `var(--brand-*)` tokens.
+3. Reference as `"Foo"` in any page's `components[]`.
+
+### Add a new page
+1. Create `site/content/{baseLocale}/pages/{pageId}.json` with a `path` (e.g. `/about`) and `components[]`.
+2. Add a `navItems` entry pointing at the new path in `shared.json` if it should be in the nav.
+3. Push — vite-ssg generates `dist/{path}/index.html` automatically.
+
+### Change colors / typography
+Edit `themes/<slug>/theme.config.js`. The CMS regenerates `virtual:cms-theme-vars.css` from the manifest on next build; CMS components and your custom components consume the vars via `var(--brand-*)`, so the change cascades.
+
+## Lockfile and npm version — read before bumping any dep
+
+This project pins **Node 20.19 / npm 10.8** to match AWS Amplify exactly. Local installs with a different npm version produce subtly different lockfiles that look fine locally but break CI.
+
+Two failure modes seen on sister sites:
+1. `Cannot find module '@rolldown/binding-linux-x64-gnu'` — npm 11 regen stripped optional-dep entries Amplify needs.
+2. `npm ci ... Missing: @types/react@..., @noble/hashes@... from lock file` — npm 11 omitted entries npm 10 expects.
+
+Rules:
+- **Always run `nvm use` before `npm install`**. `.nvmrc` pins 20.19.0 (which ships npm 10.8.x).
+- **Prefer targeted bumps**: `npm install <pkg>@<ver> --no-audit --no-fund`. **Never** `rm package-lock.json && npm install` unless you're on the pinned npm version.
+- **The build uses `npm install`**, not `npm ci` (see `amplify.yml`) for drift tolerance.
+
+## Local dev
+
+```bash
+nvm use
+cp .env.example .env       # placeholder values; not used by default
+npm install
+npm run dev                # Vite dev server on http://localhost:5173
+```
+
+Build:
+
+```bash
+npm run generate:public-assets   # generates favicon/og-image from site.json
+npm run build:ssg                # pre-renders dist/{locale}/{page}/index.html
+```
+
+## Deploy
+
+Pushes to `main` trigger an automatic AWS Amplify build per `amplify.yml`. Set up the Amplify app + custom domain via the AWS console (or `aws amplify create-app` + `create-domain-association`) — see the existing sister sites' setup notes if available, or the koehler8 site repos as reference.

package/templates/scaffolds/site/README.md

@@ -0,0 +1,25 @@
+# site-__SLUG__
+
+A site built on [`@koehler8/cms`](https://github.com/koehler8/cms).
+
+For architecture, conventions, and a navigation guide for "where things go" (content, components, themes, extensions), read **[CLAUDE.md](CLAUDE.md)**.
+
+## Local development
+
+```bash
+nvm use                    # Node 20.19.0 per .nvmrc
+cp .env.example .env
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run generate:public-assets
+npm run build:ssg
+```
+
+## Deployment
+
+Pushes to `main` trigger an automatic AWS Amplify build (see [amplify.yml](amplify.yml)).

package/templates/scaffolds/site/amplify.yml

@@ -0,0 +1,22 @@
+version: 1
+frontend:
+  phases:
+    preBuild:
+      commands:
+        - nvm install 20.19.0 && nvm use 20.19.0
+        # Use `npm install` (not `npm ci`) so the build tolerates
+        # lockfile/npm-version drift. See CLAUDE.md → "Lockfile and
+        # npm version" for the rationale.
+        - npm install --prefer-offline --no-audit --no-fund
+        - npm run generate:public-assets
+    build:
+      commands:
+        - npm run build:ssg
+  artifacts:
+    baseDirectory: dist
+    files:
+      - '**/*'
+  cache:
+    paths:
+      - node_modules/**/*
+      - .npm/**/*

package/templates/scaffolds/site/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@koehler8/site-__SLUG__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:ssg": "cms-ssg-build",
+    "preview": "vite preview",
+    "generate:public-assets": "cms-generate-public-assets --site-dir ./site"
+  },
+  "dependencies": {
+    "@koehler8/cms": "^1.0.0",
+    "@koehler8/cms-ext-compliance": "^1.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^8.0.3",
+    "vite-ssg": "^28.2.2",
+    "vue": "^3.5.22",
+    "vue-router": "^5.0.4"
+  },
+  "engines": {
+    "node": ">=20.19.0",
+    "npm": "^10.8.0"
+  }
+}

package/templates/scaffolds/site/site/content/content.config.json

@@ -0,0 +1,3 @@
+{
+  "baseLocale": "en"
+}

package/templates/scaffolds/site/site/content/en/pages/home.json

@@ -0,0 +1,8 @@
+{
+  "components[0]": "Header",
+  "components[1]": "Hero",
+  "components[2]": "Footer",
+  "content.promo.mainText": "__DISPLAY_NAME__",
+  "content.promo.tagLine": "Welcome",
+  "path": "/"
+}

package/templates/scaffolds/site/site/content/en/shared.json

@@ -0,0 +1,5 @@
+{
+  "content.header.logoText": "__DISPLAY_NAME__",
+  "content.header.showLocaleLinks": false,
+  "content.header.showWallet": false
+}

package/templates/scaffolds/site/site/content/en/site.json

@@ -0,0 +1,10 @@
+{
+  "description": "",
+  "googleId": "",
+  "supportEmail": "",
+  "theme": "",
+  "title": "__DISPLAY_NAME__",
+  "trailingSlash": true,
+  "trimInitialState": true,
+  "url": ""
+}

package/templates/scaffolds/site/site/style.css

@@ -0,0 +1,4 @@
+/* Site-specific style overrides. Loaded async by the CMS bootstrap, so
+ * fine for things that wouldn't cause a visible flash if they applied
+ * a few hundred ms late. For critical-path styles (above-the-fold,
+ * hide-this-default), see CLAUDE.md → Styles. */

package/templates/scaffolds/site/vite.config.js

@@ -0,0 +1,15 @@
+import cms from '@koehler8/cms/vite';
+
+export default {
+  plugins: cms({
+    siteDir: './site',
+    // Add local themes (created via `npx cms-create-theme <slug>`) here:
+    //   themes: ['cms-theme-<slug>'],
+    // Then activate by setting `"theme": "<slug>"` in site.json.
+    extensions: [
+      '@koehler8/cms-ext-compliance',
+      // Add local extensions (created via `npx cms-create-extension <slug>`) here:
+      //   'cms-ext-<slug>',
+    ],
+  }),
+};

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"
+  }
+}

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; */
+}