srcdev-nuxt-components 9.1.55 → 9.1.57

package/app/pages/ui/settings.vue

@@ -10,38 +10,12 @@
         </PageRow>
 
         <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Default button elements</h1>
+          <div class="theme-test" data-theme="error">
+            <h2 class="page-heading-2 mbe-18">Theme test (error)</h2>
 
-          <div class="mb-12">
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Primary button elements</h1>
-
-          <div class="mb-12" data-theme="default">
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Error button elements</h1>
-
-          <div class="mb-12" data-theme="default" data-error>
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="error"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Success button elements</h1>
-
-          <div class="mb-12" data-theme="success">
-            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="success"</code></p>
-            <button class="input-button-core" type="button">This is a button</button>
+            <div class="mb-12">
+              <p class="page-body-normal mbe-12">This is test text</p>
+            </div>
           </div>
         </PageRow>
       </template>
@@ -65,16 +39,16 @@ useHead({
 
 <style lang="css">
 .settings-page {
-  .test-button {
-    /* all: unset; */
+  .theme-test {
+    margin: 2rem;
     padding: 0.6rem 1.2rem;
 
     border: var(--colour-theme-10) solid 1px;
     outline: var(--colour-theme-10) solid 1px;
     outline-offset: 3px;
     background-color: var(--colour-theme-1);
-    color: var(--colour-theme-10);
-    border-radius: 100vw;
+    color: var(--colour-theme-7);
+    border-radius: 0.4rem;
   }
 }
 </style>

package/app/types/app-config.d.ts

@@ -0,0 +1,41 @@
+import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "./components"
+
+declare module "@nuxt/schema" {
+  interface AppConfigInput {
+    srcdev?: {
+      alertContent?: {
+        icons?: Partial<Record<SemanticTheme, string>>
+        dismissIcon?: string
+      }
+      displayPrompt?: {
+        theme?: DisplayPromptTheme
+        dismissible?: boolean
+        useAutoFocus?: boolean
+        masked?: boolean
+      }
+      displayToast?: {
+        appearance?: {
+          theme?: DisplayToastTheme
+          position?: DisplayToastPosition
+          alignment?: DisplayToastAlignment
+          fullWidth?: boolean
+          masked?: boolean
+        }
+        behavior?: {
+          autoDismiss?: boolean
+          duration?: number
+          revealDuration?: number
+        }
+      }
+      displayDialog?: {
+        variant?: "dialog" | "modal" | "confirm" | "alert" | "fullscreen"
+        justifyDialog?: "start" | "center" | "end"
+        alignDialog?: "start" | "center" | "end"
+        lockViewport?: boolean
+        allowContentScroll?: boolean
+        theme?: SemanticTheme
+        closeIcon?: string
+      }
+    }
+  }
+}

package/app/types/components/display-prompt.d.ts

@@ -0,0 +1,11 @@
+import type { SemanticTheme } from "./semantic-theme.d"
+
+export type DisplayPromptTheme = SemanticTheme
+
+export interface DisplayPromptProps {
+  theme?: DisplayPromptTheme
+  dismissible?: boolean
+  useAutoFocus?: boolean
+  masked?: boolean
+  styleClassPassthrough?: string | string[]
+}

package/app/types/components/display-toast.d.ts

@@ -1,14 +1,7 @@
 import type { VNode, ComponentPublicInstance } from "vue"
+import type { SemanticTheme } from "./semantic-theme.d"
 
-export type DisplayToastTheme =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "ghost"
-  | "error"
-  | "info"
-  | "success"
-  | "warning"
+export type DisplayToastTheme = SemanticTheme
 
 export type DisplayToastPosition = "top" | "bottom"
 export type DisplayToastAlignment = "left" | "center" | "right"
@@ -18,6 +11,7 @@ export interface DisplayToastAppearanceConfig {
   position?: DisplayToastPosition
   alignment?: DisplayToastAlignment
   fullWidth?: boolean
+  masked?: boolean
 }
 
 export interface DisplayToastBehaviorConfig {
@@ -45,6 +39,14 @@ export interface DisplayToastProps {
   styleClassPassthrough?: string | string[]
 }
 
+export type ToastQueueStatus = "pending" | "visible"
+
+export interface ToastQueueEntry {
+  id: string
+  config: DisplayToastConfig
+  status: ToastQueueStatus
+}
+
 export interface ToastSlots {
   default?(props?: Record<string, never>): VNode[]
   customToastIcon?(props?: Record<string, never>): VNode[]

package/app/types/components/index.ts

@@ -1,4 +1,5 @@
 // Export types from the components directory
+export * from "./semantic-theme.d"
 export * from "./carousel-basic.d"
 export * from "./slider-gallery.d"
 export * from "./canvas-switcher.d"
@@ -6,6 +7,7 @@ export * from "./display-chip.d"
 export * from "./tabs.d"
 export * from "./responsive-header.d"
 export * from "./display-toast.d"
+export * from "./display-prompt.d"
 export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
 export * from "./hero-text"

package/app/types/components/semantic-theme.d.ts

@@ -0,0 +1 @@
+export type SemanticTheme = "info" | "success" | "warning" | "error"

package/nuxt.config.ts

@@ -1,8 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import { createResolver } from "@nuxt/kit";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
 
 const { resolve } = createResolver(import.meta.url);
 const isStandalone = !!process.env.SRCDEV_STANDALONE;
+const execFileAsync = promisify(execFile);
 
 export default defineNuxtConfig({
   // debug: !isProduction,
@@ -126,6 +129,19 @@ export default defineNuxtConfig({
   vue: {
     runtimeCompiler: true,
   },
+  // Re-generate ramps on config change during local dev.
+  // Guarded by isStandalone so consumers extending this layer never trigger
+  // generation inside node_modules (they never set SRCDEV_STANDALONE).
+  hooks: isStandalone
+    ? {
+        async "builder:watch"(_event, path) {
+          if (!path.endsWith("ramps.config.mjs")) return;
+          console.log("[ramps] ramps.config.mjs changed, regenerating…");
+          await execFileAsync("node", ["scripts/generate-ramps.mjs"], { cwd: resolve("./") });
+          console.log("[ramps] done.");
+        },
+      }
+    : {},
   compatibilityDate: "2026-05-20",
   typescript: {
     includeWorkspace: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.55",
+  "version": "9.1.57",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -10,9 +10,11 @@
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
     "cleaninstall": "npm run clean && npm run reinstall",
-    "dev": "SRCDEV_STANDALONE=true nuxt dev",
-    "build": "SRCDEV_STANDALONE=true nuxt build",
-    "generate": "SRCDEV_STANDALONE=true nuxt generate",
+    "generate:ramps": "node scripts/generate-ramps.mjs",
+    "check:ramps": "node scripts/check-ramps.mjs",
+    "dev": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt dev",
+    "build": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt build",
+    "generate": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt generate",
     "preview": "SRCDEV_STANDALONE=true nuxt preview",
     "lint": "eslint .",
     "prepare": "SRCDEV_STANDALONE=true nuxt prepare",
@@ -32,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.");

package/app/assets/styles/setup/03.theming/default/_dark.css

@@ -1,156 +0,0 @@
-:where(html.dark) {
-  /* ===========================================
-     COLOR SCALE VARIABLES
-     Base color tokens for the default theme
-     =========================================== */
-  --colour-theme-1: var(--blue-01);
-  --colour-theme-2: var(--blue-02);
-  --colour-theme-3: var(--blue-03);
-  --colour-theme-4: var(--blue-04);
-  --colour-theme-5: var(--blue-05);
-  --colour-theme-6: var(--blue-06);
-  --colour-theme-7: var(--blue-07);
-  --colour-theme-8: var(--blue-08);
-  --colour-theme-9: var(--blue-09);
-  --colour-theme-10: var(--blue-10);
-  --colour-theme-11: var(--blue-10);
-  --colour-theme-12: var(--blue-10);
-
-  /* ===========================================
-     GENERIC BODY VARIABLES
-     =========================================== */
-  --page-bg: var(--slate-08);
-  --colour-text-default: var(--slate-01);
-  --colour-text-accent: var(--blue-05);
-  --colour-text-eyebrow: var(--blue-05);
-
-  /* ===========================================
-     GLASS PANEL VARIABLES
-     =========================================== */
-  --glass-panel-bg: rgba(12, 12, 20, 0.45);
-  --glass-panel-border-color: rgba(255, 255, 255, 0.07);
-  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-  --glass-panel-highlight: rgba(255, 255, 255, 0.04);
-
-  /* ===========================================
-     HERO TEXT VARIABLES
-     =========================================== */
-  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
-
-  /* ===========================================
-     EYEBROW TEXT VARIABLES
-     =========================================== */
-  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
-
-  /* ===========================================
-     STEPPER LIST VARIABLES
-     =========================================== */
-  --stepper-list-counter-circle-background: transparent;
-  --stepper-list-counter-circle-text: var(--blue-02);
-  --stepper-list-counter-circle-border: var(--blue-02);
-
-  --stepper-list-counter-disc-background: var(--blue-02);
-  --stepper-list-counter-disc-text: var(--blue-09);
-  --stepper-list-counter-disc-border: var(--blue-02);
-
-  --stepper-list-counter-square-background: transparent;
-  --stepper-list-counter-square-text: var(--blue-02);
-  --stepper-list-counter-square-border: var(--blue-02);
-
-  --stepper-list-connector-color: var(--blue-02);
-
-  --stepper-list-icon: var(--blue-02);
-
-  /* ===========================================
-     COLOUR FINDER VARIABLES
-     =========================================== */
-  --colour-finder-primary-colour: var(--blue-03);
-  --colour-finder-border-colour: var(--blue-03);
-
-  --colour-finder-checked-surface-colour: var(--green-10);
-  --colour-finder-checked-stroke-colour: var(--green-03);
-
-  --colour-finder-conflict-surface-colour: var(--sunset-09);
-  --colour-finder-conflict-stroke-colour: var(--sunset-03);
-
-  /* ===========================================
-     TREATMENT CONSULTANT VARIABLES
-     =========================================== */
-  --treatment-consultant-primary-colour: var(--amber-02);
-  --treatment-consultant-primary-foreground: var(--amber-02);
-
-  --treatment-consultant-muted-colour: var(--amber-05);
-  --treatment-consultant-muted-foreground: var(--amber-05);
-
-  --treatment-consultant-background: var(--amber-10);
-  --treatment-consultant-foreground: var(--amber-02);
-
-  --treatment-consultant-border-colour: var(--amber-03);
-
-  --treatment-consultant-checked-surface-colour: var(--green-10);
-  --treatment-consultant-checked-stroke-colour: var(--green-03);
-
-  --treatment-consultant-conflict-surface-colour: var(--sunset-09);
-  --treatment-consultant-conflict-stroke-colour: var(--sunset-03);
-
-  /* ===========================================
-     ANCHOR LINK VARIABLES
-     =========================================== */
-  --colour-link-default: var(--blue-02);
-  --colour-link-hover: var(--blue-03);
-
-  /* ===========================================
-     FORM INPUT VARIABLES
-     Styling for form inputs and controls
-     =========================================== */
-
-  /* Input surfaces and backgrounds */
-  --theme-input-surface: var(--slate-10);
-  --theme-input-surface-hover: var(--slate-09);
-
-  /* Input borders */
-  --theme-input-border: var(--blue-06);
-  --theme-input-border-hover: var(--blue-05);
-  --theme-input-border-focus: var(--blue-04);
-
-  /* Input outlines and focus */
-  --theme-input-outline: var(--blue-06);
-  --theme-input-outline-focus: var(--blue-04);
-  --theme-input-visible-outline: var(--blue-04);
-  --theme-focus-visible-shadow: 0 0 0 2px var(--blue-02);
-
-  /* ===========================================
-     INPUT TEXT VARIABLES
-     =========================================== */
-  --theme-input-placeholder: var(--slate-04);
-  --theme-input-text-color-normal: var(--slate-01);
-
-  /* ===========================================
-     CHECKBOX AND RADIO BUTTON VARIABLES
-     =========================================== */
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: var(--blue-02);
-  --theme-checkbox-decorator-color: var(--blue-02);
-
-  /* ===========================================
-     FORM BUTTON VARIABLES
-     Styling for form buttons and controls
-     =========================================== */
-
-  /* Variant Primary */
-  --theme-button-primary-border: var(--blue-07);
-  --theme-button-primary-border-active: var(--blue-07);
-  --theme-button-primary-text: var(--blue-00);
-  --theme-button-primary-text-hover: var(--blue-00);
-
-  /* Variant Secondary */
-  --theme-button-secondary-surface: var(--blue-01);
-  --theme-button-secondary-border-active: var(--blue-01);
-  --theme-button-secondary-text: var(--blue-09);
-
-  /* Variant Tertiary */
-  --theme-button-tertiary-surface: transparent;
-  --theme-button-tertiary-text: var(--blue-01);
-  --theme-button-tertiary-border-active: var(--blue-01);
-  --theme-button-tertiary-outline-active: var(--blue-09);
-}