srcdev-nuxt-components 9.1.56 → 9.1.57

package/.claude/settings.json

@@ -53,7 +53,8 @@
       "Bash(rm -rf /Users/simoncornforth/websites/nuxt-components/.claude/projects/)",
       "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/01.atoms/toast)",
       "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/02.molecules/alert-content)",
-      "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/01.atoms/prompt)"
+      "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/01.atoms/prompt)",
+      "Bash(git fetch *)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/instepreflexology",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.56",
+  "version": "9.1.57",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -34,6 +34,8 @@
     ".claude/",
     "app/",
     "modules/",
+    "scripts/",
+    "ramps.config.mjs",
     "nuxt.config.ts",
     "types.d.ts"
   ],

package/ramps.config.mjs

@@ -0,0 +1,28 @@
+// One source of truth for the oklch colour curve.
+// Edit this file; run `npm run generate:ramps` to rebuild the CSS.
+
+/** Lightness % at each step index 00–10 (light → dark) */
+export const LIGHTNESS = [98, 94, 88, 80, 72, 64, 56, 48, 40, 32, 25];
+
+/** Chroma multipliers at each step index 00–10.
+ *  Actual chroma = ramp.chroma × multiplier.
+ *  Ramps at mid-tone (06) reach full chroma; tapers toward both extremes. */
+export const CHROMA_MULTIPLIERS = [0.045, 0.18, 0.32, 0.5, 0.68, 0.86, 1, 0.95, 0.86, 0.77, 0.64];
+
+/**
+ * Named ramps.
+ *   hue     – oklch hue angle (degrees)
+ *   chroma  – maximum chroma (at the 06 step)
+ *   drift   – optional: rotates hue linearly across steps
+ *             hue_i = hue + drift × (i / 10)
+ *             e.g. drift -25 on hue 50 → step 00 = 50°, step 10 = 25°
+ */
+export const ramps = {
+  blue:   { hue: 255, chroma: 0.22 },
+  red:    { hue: 30,  chroma: 0.24 },
+  green:  { hue: 157, chroma: 0.19 },
+  amber:  { hue: 75,  chroma: 0.19 },
+  orange: { hue: 60,  chroma: 0.15 },
+  sunset: { hue: 50,  chroma: 0.22, drift: -25 },
+  slate:  { hue: 260, chroma: 0.02 },
+};

package/scripts/check-ramps.mjs

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * CI check: runs the generator then fails if any generated file changed.
+ * Usage: node scripts/check-ramps.mjs
+ */
+
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const ROOT = dirname(dirname(fileURLToPath(import.meta.url)));
+
+const GENERATED = [
+  "app/assets/styles/setup/02.colours/_blue.css",
+  "app/assets/styles/setup/02.colours/_red.css",
+  "app/assets/styles/setup/02.colours/_green.css",
+  "app/assets/styles/setup/02.colours/_amber.css",
+  "app/assets/styles/setup/02.colours/_orange.css",
+  "app/assets/styles/setup/02.colours/_sunset.css",
+  "app/assets/styles/setup/02.colours/_slate.css",
+  "app/assets/styles/setup/02.colours/_theme-params.css",
+  "app/assets/styles/setup/03.theming/theme-ramp.css",
+];
+
+console.log("Running generator…");
+execSync("node scripts/generate-ramps.mjs", { cwd: ROOT, stdio: "inherit" });
+
+console.log("Checking for diff…");
+const diff = execSync(`git diff --name-only ${GENERATED.join(" ")}`, { cwd: ROOT })
+  .toString()
+  .trim();
+
+if (diff) {
+  console.error("\n✗ Generated files are out of date. Run `npm run generate:ramps` and commit:\n");
+  console.error(diff);
+  process.exit(1);
+}
+
+// Also check for untracked generated files
+const untracked = execSync(`git ls-files --others --exclude-standard ${GENERATED.join(" ")}`, { cwd: ROOT })
+  .toString()
+  .trim();
+
+if (untracked) {
+  console.error("\n✗ Generated files are new and untracked. Run `npm run generate:ramps` and commit:\n");
+  console.error(untracked);
+  process.exit(1);
+}
+
+console.log("✓ Generated files are up to date.");

package/scripts/generate-consumer-ramps.mjs

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+/**
+ * Consumer colour ramp generator.
+ *
+ * Run from your consuming app's project root:
+ *   node node_modules/srcdev-nuxt-components/scripts/generate-consumer-ramps.mjs
+ *
+ * Reads:   ramps.config.mjs in your project root
+ * Writes:  app/assets/styles/setup/02.colours/ in your project root
+ *
+ * Your ramps.config.mjs can contain any combination of:
+ *   - New palettes (e.g. gold, copper) — adds --gold-00..10 and --palette-gold-* vars
+ *   - Built-in names (e.g. blue, red, green) — your generated file overrides the layer's
+ *     values because consumer CSS loads after layer CSS in the cascade
+ *
+ * Example ramps.config.mjs:
+ *   export const ramps = {
+ *     gold: { hue: 85, chroma: 0.20 },
+ *   };
+ *
+ * Produces:
+ *   _gold.css          — --gold-00 … --gold-10 (literal oklch values)
+ *   _palette-params.css — --palette-gold-hue, --palette-gold-chroma
+ *
+ * Import both in your app/assets/styles/setup/02.colours/index.css, then
+ * reference --gold-09 etc. in your theme override files.
+ */
+
+import { writeFileSync, mkdirSync } from "node:fs";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const LAYER_ROOT = join(__dirname, "..");
+const CONSUMER_ROOT = process.cwd();
+
+// Lightness / chroma curves come from the layer so all ramps share the same curve shape
+const { LIGHTNESS, CHROMA_MULTIPLIERS } = await import(pathToFileURL(join(LAYER_ROOT, "ramps.config.mjs")).href);
+
+// Consumer's palette definitions
+let consumerRamps;
+try {
+  const config = await import(pathToFileURL(join(CONSUMER_ROOT, "ramps.config.mjs")).href);
+  consumerRamps = config.ramps;
+  if (!consumerRamps || typeof consumerRamps !== "object") throw new Error("ramps export missing");
+} catch {
+  console.error("✗ Could not load ramps.config.mjs from your project root.");
+  console.error("  Create one exporting a `ramps` object, e.g.:");
+  console.error("    export const ramps = {");
+  console.error("      gold: { hue: 85, chroma: 0.20 },");
+  console.error("    };");
+  process.exit(1);
+}
+
+const COLOURS_DIR = join(CONSUMER_ROOT, "app/assets/styles/setup/02.colours");
+mkdirSync(COLOURS_DIR, { recursive: true });
+
+const HEADER = "/* GENERATED — edit your ramps.config.mjs, not this file */";
+
+/** Round to at most `places` decimal places, stripping trailing zeros. */
+function r(n, places = 4) {
+  return parseFloat(n.toFixed(places));
+}
+
+// ─── Individual colour files ──────────────────────────────────────────────────
+
+for (const [name, cfg] of Object.entries(consumerRamps)) {
+  const { hue, chroma, drift = 0 } = cfg;
+  const lines = [HEADER, ":where(html) {"];
+
+  for (let i = 0; i <= 10; i++) {
+    const step = String(i).padStart(2, "0");
+    const L = LIGHTNESS[i];
+    const C = r(chroma * CHROMA_MULTIPLIERS[i]);
+    const H = drift !== 0 ? r(hue + drift * (i / 10), 1) : hue;
+    lines.push(`  --${name}-${step}: oklch(${L}% ${C} ${H});`);
+  }
+
+  lines.push("}");
+  writeFileSync(join(COLOURS_DIR, `_${name}.css`), lines.join("\n") + "\n");
+  console.log(`  ✓ _${name}.css`);
+}
+
+// ─── _palette-params.css ─────────────────────────────────────────────────────
+
+const paramLines = [HEADER, ":where(html) {"];
+for (const [name, { hue, chroma, drift }] of Object.entries(consumerRamps)) {
+  paramLines.push(`  --palette-${name}-hue: ${hue};`);
+  paramLines.push(`  --palette-${name}-chroma: ${chroma};`);
+  if (drift !== undefined) paramLines.push(`  --palette-${name}-drift: ${drift};`);
+}
+paramLines.push("}");
+writeFileSync(join(COLOURS_DIR, "_palette-params.css"), paramLines.join("\n") + "\n");
+console.log("  ✓ _palette-params.css");
+
+console.log("");
+console.log("Done. Next steps:");
+console.log("  1. Import generated files in app/assets/styles/setup/02.colours/index.css");
+console.log("  2. Reference --palette-*-hue / --palette-*-chroma in your theme override");
+console.log("  3. Use named steps (e.g. var(--gold-09)) in page-level token overrides");

package/scripts/generate-ramps.mjs

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+/**
+ * Generates colour ramp CSS from ramps.config.mjs.
+ * Outputs:
+ *   app/assets/styles/setup/02.colours/_{name}.css     — per-ramp literal values
+ *   app/assets/styles/setup/02.colours/_theme-params.css — --palette-*-hue/chroma vars
+ *   app/assets/styles/setup/03.theming/theme-ramp.css  — parametric --colour-theme-* slot
+ */
+
+import { writeFileSync } from "node:fs";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, "..");
+
+const { LIGHTNESS, CHROMA_MULTIPLIERS, ramps } = await import(pathToFileURL(join(ROOT, "ramps.config.mjs")).href);
+
+const COLOURS_DIR = join(ROOT, "app/assets/styles/setup/02.colours");
+const THEMING_DIR = join(ROOT, "app/assets/styles/setup/03.theming");
+
+const HEADER = "/* GENERATED — edit ramps.config.mjs, not this file */";
+
+/** Round to at most `places` decimal places, stripping trailing zeros. */
+function r(n, places = 4) {
+  return parseFloat(n.toFixed(places));
+}
+
+// ─── Individual ramp files ───────────────────────────────────────────────────
+
+for (const [name, cfg] of Object.entries(ramps)) {
+  const { hue, chroma, drift = 0 } = cfg;
+  const lines = [HEADER, ":where(html) {"];
+
+  for (let i = 0; i <= 10; i++) {
+    const step = String(i).padStart(2, "0");
+    const L = LIGHTNESS[i];
+    const C = r(chroma * CHROMA_MULTIPLIERS[i]);
+    const H = drift !== 0 ? r(hue + drift * (i / 10), 1) : hue;
+    lines.push(`  --${name}-${step}: oklch(${L}% ${C} ${H});`);
+  }
+
+  lines.push("}");
+  writeFileSync(join(COLOURS_DIR, `_${name}.css`), lines.join("\n") + "\n");
+  console.log(`  ✓ _${name}.css`);
+}
+
+// ─── _theme-params.css ────────────────────────────────────────────────────────
+
+const paramLines = [HEADER, ":where(html) {"];
+for (const [name, { hue, chroma, drift }] of Object.entries(ramps)) {
+  paramLines.push(`  --palette-${name}-hue: ${hue};`);
+  paramLines.push(`  --palette-${name}-chroma: ${chroma};`);
+  if (drift !== undefined) paramLines.push(`  --palette-${name}-drift: ${drift};`);
+}
+paramLines.push("}");
+writeFileSync(join(COLOURS_DIR, "_theme-params.css"), paramLines.join("\n") + "\n");
+console.log("  ✓ _theme-params.css");
+
+// ─── theme-ramp.css ───────────────────────────────────────────────────────────
+// Declares --colour-theme-0..10 as oklch formulas on every element that can
+// carry --theme-hue / --theme-chroma. The selector list must include every
+// element that can redefine those vars so the formula re-evaluates there.
+// --theme-hue-drift defaults to 0; set it (e.g. var(--palette-sunset-drift))
+// to rotate hue linearly across steps, matching the ramp drift behaviour.
+
+const rampLines = [
+  HEADER,
+  "/* Parametric theme-colour slot. Set --theme-hue and --theme-chroma on a",
+  "   theme selector; these vars automatically pick up the right palette. */",
+  ":where(html, [data-theme], [data-invalid]) {",
+];
+
+for (let i = 0; i <= 10; i++) {
+  const L = LIGHTNESS[i];
+  const M = CHROMA_MULTIPLIERS[i];
+  const fraction = i === 0 ? "0" : i === 10 ? "1" : `${i} / 10`;
+  rampLines.push(
+    `  --colour-theme-${i}: oklch(${L}% calc(var(--theme-chroma) * ${M}) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (${fraction})));`
+  );
+}
+
+// Alias out-of-range indices used by older component code
+rampLines.push("  /* Aliases for legacy --colour-theme-11 / -12 references */");
+rampLines.push("  --colour-theme-11: var(--colour-theme-10);");
+rampLines.push("  --colour-theme-12: var(--colour-theme-10);");
+rampLines.push("}");
+
+writeFileSync(join(THEMING_DIR, "theme-ramp.css"), rampLines.join("\n") + "\n");
+console.log("  ✓ theme-ramp.css");
+
+console.log("Done.");