npm - srcdev-nuxt-components - Versions diffs - 9.1.55 → 9.1.57 - Mend

srcdev-nuxt-components 9.1.55 → 9.1.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/README.md CHANGED Viewed

@@ -104,6 +104,172 @@ When disabled, no `data-color-scheme` attribute is set on `<html>` and `useColou
 ---
+## Colour System
+The layer ships a parametric oklch colour ramp. Two CSS custom properties — `--theme-hue` and
+`--theme-chroma` — drive an 11-step colour scale (`--colour-theme-0` to `--colour-theme-10`) that
+all themed components (buttons, inputs, prompts, toasts) read through a shared set of semantic
+slots. Switching the palette is a two-variable change; no token-by-token remapping is required.
+### How it works
+A formula declared on every potential theme host (`html`, `[data-theme]`, `[data-invalid]`)
+computes the scale from the two params:
+```css
+--colour-theme-6: oklch(56% calc(var(--theme-chroma) * 1.00) var(--theme-hue)); /* peak chroma */
+--colour-theme-0: oklch(98% calc(var(--theme-chroma) * 0.045) var(--theme-hue)); /* near-white */
+--colour-theme-10: oklch(25% calc(var(--theme-chroma) * 0.64) var(--theme-hue)); /* near-black */
+```
+Scale direction: **00 = lightest, 10 = darkest**. Chroma tapers at both ends and peaks at step 06.
+Nine semantic slots (`--theme-surface`, `--theme-accent`, `--theme-text`, `--theme-ring`, etc.) are derived from the
+scale using `light-dark()` and are shared by all components. Theme variants (`data-theme="success"`,
+`"warning"`, `"error"`) swap `--theme-hue` and `--theme-chroma` on their element; the formula
+re-evaluates locally so each themed element gets its own full palette without affecting the page.
+### Built-in named palettes
+| Name   | Hue | Used for                                          |
+|--------|-----|---------------------------------------------------|
+| blue   | 255 | Default (page-level)                              |
+| red    | 30  | Error / `data-theme="error"`                      |
+| green  | 157 | Success / `data-theme="success"`                  |
+| amber  | 75  | Available for consumer use                        |
+| orange | 60  | Available for consumer use                        |
+| sunset | 50  | Warning / `data-theme="warning"` (with hue drift) |
+| slate  | 260 | Near-neutral grey                                 |
+### Consumer app: generating a custom palette
+The recommended approach for a consuming app is to generate your own named colour files. This gives
+you clean step variables (`--gold-09`, `--gold-04`) rather than raw oklch values in your theme
+overrides.
+#### 1. Create `ramps.config.mjs` in your project root
+Define the palettes you want. You can add new ones, reuse a built-in name to override the
+layer's values, or do both. Consumer CSS loads after the layer, so your generated files win
+the cascade automatically:
+```js
+// ramps.config.mjs
+export const ramps = {
+  // New palette — adds --gold-00..10 and --palette-gold-* vars
+  gold: { hue: 85, chroma: 0.20 },
+  // Override a built-in — replaces the layer's --blue-00..10 with your values
+  // blue: { hue: 240, chroma: 0.18 },
+  // Override the error palette — all error/invalid states use your red
+  // red: { hue: 15, chroma: 0.26 },
+  // Optional — add hue drift to rotate colour across the scale:
+  // copper: { hue: 45, chroma: 0.21, drift: -15 },
+};
+```
+#### 2. Add the generator script to `package.json`
+The script lives in the layer's `node_modules` — no copying required. Prepending it to `dev`,
+`build`, and `generate` prevents generated CSS from drifting out of sync with `ramps.config.mjs`:
+```json
+"scripts": {
+  "generate:ramps": "node node_modules/srcdev-nuxt-components/scripts/generate-consumer-ramps.mjs",
+  "dev":      "npm run generate:ramps && nuxt dev",
+  "build":    "npm run generate:ramps && nuxt build",
+  "generate": "npm run generate:ramps && nuxt generate"
+}
+```
+> **Do not manually edit generated files.** They carry a `/* GENERATED */` comment at the top
+> and are rebuilt every time the generator runs. Put all changes in `ramps.config.mjs` instead.
+#### 3. Run it
+```bash
+npm run generate:ramps
+```
+Produces in `app/assets/styles/setup/02.colours/`:
+- `_gold.css` — `--gold-00` … `--gold-10` (literal oklch values)
+- `_palette-params.css` — `--palette-gold-hue`, `--palette-gold-chroma`
+#### 4. Import the generated files
+In your `app/assets/styles/setup/02.colours/index.css` (create if it doesn't exist):
+```css
+@import "./_palette-params";
+@import "./_gold";
+```
+#### 5. Set the palette as your theme default
+```css
+/* app/assets/styles/setup/03.theming/_default.css */
+:where(html) {
+  --theme-hue:    var(--palette-gold-hue);
+  --theme-chroma: var(--palette-gold-chroma);
+  /* Page-level tokens — readable named steps, not raw oklch */
+  --colour-text-accent:  light-dark(var(--gold-09), var(--gold-04));
+  --colour-text-eyebrow: light-dark(var(--gold-09), var(--gold-04));
+}
+```
+#### 6. Wire up in your setup index
+```css
+/* app/assets/styles/setup/index.css */
+@import "./02.colours/";
+@import "./03.theming/_default.css";
+```
+And in `app/assets/styles/main.css`:
+```css
+@import "./setup/";
+```
+### Hue quick reference
+| Range   | Colour         |
+|---------|----------------|
+| 0–30    | Red / pink     |
+| 30–70   | Orange / amber |
+| 70–100  | Yellow / gold  |
+| 100–160 | Green          |
+| 220–270 | Blue           |
+| 270–310 | Violet         |
+Use [oklch.com](https://oklch.com) to preview values before committing.
+### Generator (for library contributors)
+Named palettes in the layer itself are maintained in `ramps.config.mjs` at the repo root:
+```bash
+npm run generate:ramps   # rebuild all layer CSS from ramps.config.mjs
+npm run check:ramps      # CI: fail if generated CSS is out of date
+```
+### Further reading
+| Guide | Location |
+|-------|----------|
+| Full ramp architecture, formula details, hue drift | `.claude/skills/theming-colour-ramps.md` |
+| Full palette swap for a consumer app | `.claude/skills/theming-override-default.md` |
+| Partial token override (palette shift, buttons, inputs) | `.claude/skills/theming-partial-override.md` |
+| Disable light/dark mode support | `.claude/skills/colour-scheme-disable.md` |
+Skills are available in your project after running `npm run setup:claude`.
+---
 ## Known Build / Production Issues
 ### `ERR_MODULE_NOT_FOUND: vue/index.mjs` — 500 on every request (Node 22)

package/app/app.config.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "~/types/components";
+export default defineAppConfig({
+  srcdev: {
+    alertContent: {
+      icons: {
+        info: "akar-icons:info",
+        success: "akar-icons:check",
+        warning: "akar-icons:circle-alert",
+        error: "akar-icons:circle-alert",
+      },
+      dismissIcon: "material-symbols:close",
+    },
+    displayPrompt: {
+      theme: "info" as DisplayPromptTheme,
+      dismissible: false,
+      useAutoFocus: false,
+      masked: false,
+    },
+    displayToast: {
+      appearance: {
+        theme: "info" as DisplayToastTheme,
+        position: "top" as DisplayToastPosition,
+        alignment: "right" as DisplayToastAlignment,
+        fullWidth: false,
+        masked: false,
+      },
+      behavior: {
+        autoDismiss: true,
+        duration: 5000,
+        revealDuration: 550,
+      },
+    },
+    displayDialog: {
+      variant: "dialog" as "dialog" | "modal" | "confirm" | "alert" | "fullscreen",
+      justifyDialog: "center" as "start" | "center" | "end",
+      alignDialog: "center" as "start" | "center" | "end",
+      lockViewport: true,
+      allowContentScroll: false,
+      theme: undefined as SemanticTheme | undefined,
+      closeIcon: "bitcoin-icons:cross-filled",
+    },
+  },
+});

package/app/assets/styles/setup/01.config/_head.css CHANGED Viewed

@@ -1,14 +1,14 @@
 html {
-  /* color-scheme: light dark; */
+  color-scheme: light dark;
   interpolate-size: allow-keywords;
-  /* &.light {
+  &.light {
     color-scheme: light;
   }
   &.dark {
     color-scheme: dark;
-  } */
+  }
   font-size: 62.5%;

package/app/assets/styles/setup/02.colours/_amber.css CHANGED Viewed

@@ -1,12 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --amber-01: oklch(0.945 0.064 75);
-  --amber-02: oklch(0.894 0.11 75);
-  --amber-03: oklch(0.788 0.177 75);
-  --amber-04: oklch(0.733 0.194 75);
-  --amber-05: oklch(0.592 0.188 75);
-  --amber-06: oklch(0.501 0.166 75);
-  --amber-07: oklch(0.433 0.144 75);
-  --amber-08: oklch(0.383 0.123 75);
-  --amber-09: oklch(0.238 0.1 75);
-  --amber-10: oklch(0.188 0.072 75);
+  --amber-00: oklch(98% 0.0086 75);
+  --amber-01: oklch(94% 0.0342 75);
+  --amber-02: oklch(88% 0.0608 75);
+  --amber-03: oklch(80% 0.095 75);
+  --amber-04: oklch(72% 0.1292 75);
+  --amber-05: oklch(64% 0.1634 75);
+  --amber-06: oklch(56% 0.19 75);
+  --amber-07: oklch(48% 0.1805 75);
+  --amber-08: oklch(40% 0.1634 75);
+  --amber-09: oklch(32% 0.1463 75);
+  --amber-10: oklch(25% 0.1216 75);
 }

package/app/assets/styles/setup/02.colours/_blue.css CHANGED Viewed

@@ -1,13 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --blue-00: oklch(98% 0.01 255);
-  --blue-01: oklch(94% 0.04 255);
-  --blue-02: oklch(88% 0.07 255);
+  --blue-00: oklch(98% 0.0099 255);
+  --blue-01: oklch(94% 0.0396 255);
+  --blue-02: oklch(88% 0.0704 255);
   --blue-03: oklch(80% 0.11 255);
-  --blue-04: oklch(72% 0.15 255);
-  --blue-05: oklch(64% 0.19 255);
+  --blue-04: oklch(72% 0.1496 255);
+  --blue-05: oklch(64% 0.1892 255);
   --blue-06: oklch(56% 0.22 255);
-  --blue-07: oklch(48% 0.21 255);
-  --blue-08: oklch(40% 0.19 255);
-  --blue-09: oklch(32% 0.17 255);
-  --blue-10: oklch(25% 0.14 255);
+  --blue-07: oklch(48% 0.209 255);
+  --blue-08: oklch(40% 0.1892 255);
+  --blue-09: oklch(32% 0.1694 255);
+  --blue-10: oklch(25% 0.1408 255);
 }

package/app/assets/styles/setup/02.colours/_green.css CHANGED Viewed

@@ -1,13 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --green-00: oklch(0.99 0.02 157);
-  --green-01: oklch(0.95 0.078 157);
-  --green-02: oklch(0.889 0.19 157);
-  --green-03: oklch(0.829 0.197 157);
-  --green-04: oklch(0.768 0.183 157);
-  --green-05: oklch(0.708 0.169 157);
-  --green-06: oklch(0.647 0.154 157);
-  --green-07: oklch(0.587 0.14 157);
-  --green-08: oklch(0.526 0.125 157);
-  --green-09: oklch(0.466 0.111 157);
-  --green-10: oklch(0.405 0.096 157);
+  --green-00: oklch(98% 0.0086 157);
+  --green-01: oklch(94% 0.0342 157);
+  --green-02: oklch(88% 0.0608 157);
+  --green-03: oklch(80% 0.095 157);
+  --green-04: oklch(72% 0.1292 157);
+  --green-05: oklch(64% 0.1634 157);
+  --green-06: oklch(56% 0.19 157);
+  --green-07: oklch(48% 0.1805 157);
+  --green-08: oklch(40% 0.1634 157);
+  --green-09: oklch(32% 0.1463 157);
+  --green-10: oklch(25% 0.1216 157);
 }

package/app/assets/styles/setup/02.colours/_orange.css CHANGED Viewed

@@ -1,12 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --orange-01: oklch(0.95 0.037 75);
-  --orange-02: oklch(0.892 0.083 75);
-  --orange-03: oklch(0.834 0.132 75);
-  --orange-04: oklch(0.775 0.149 75);
-  --orange-05: oklch(0.788 0.177 75);
-  --orange-06: oklch(0.659 0.127 75);
-  --orange-07: oklch(0.601 0.115 75);
-  --orange-08: oklch(0.543 0.104 75);
-  --orange-09: oklch(0.485 0.093 75);
-  --orange-10: oklch(0.426 0.082 75);
+  --orange-00: oklch(98% 0.0067 60);
+  --orange-01: oklch(94% 0.027 60);
+  --orange-02: oklch(88% 0.048 60);
+  --orange-03: oklch(80% 0.075 60);
+  --orange-04: oklch(72% 0.102 60);
+  --orange-05: oklch(64% 0.129 60);
+  --orange-06: oklch(56% 0.15 60);
+  --orange-07: oklch(48% 0.1425 60);
+  --orange-08: oklch(40% 0.129 60);
+  --orange-09: oklch(32% 0.1155 60);
+  --orange-10: oklch(25% 0.096 60);
 }

package/app/assets/styles/setup/02.colours/_red.css CHANGED Viewed

@@ -1,13 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --red-00: oklch(98% 0.01 30);
-  --red-01: oklch(94% 0.04 30);
-  --red-02: oklch(88% 0.07 30);
+  --red-00: oklch(98% 0.0108 30);
+  --red-01: oklch(94% 0.0432 30);
+  --red-02: oklch(88% 0.0768 30);
   --red-03: oklch(80% 0.12 30);
-  --red-04: oklch(72% 0.17 30);
-  --red-05: oklch(64% 0.21 30);
+  --red-04: oklch(72% 0.1632 30);
+  --red-05: oklch(64% 0.2064 30);
   --red-06: oklch(56% 0.24 30);
-  --red-07: oklch(42% 0.23 30);
-  --red-08: oklch(46% 0.21 30);
-  --red-09: oklch(52% 0.22 30);
-  --red-10: oklch(25% 0.16 30);
+  --red-07: oklch(48% 0.228 30);
+  --red-08: oklch(40% 0.2064 30);
+  --red-09: oklch(32% 0.1848 30);
+  --red-10: oklch(25% 0.1536 30);
 }

package/app/assets/styles/setup/02.colours/_slate.css CHANGED Viewed

@@ -1,13 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --slate-00: oklch(0.98 0.004 256);
-  --slate-01: oklch(0.932 0.004 256);
-  --slate-02: oklch(0.86 0.008 256);
-  --slate-03: oklch(0.716 0.016 256);
-  --slate-04: oklch(0.645 0.018 256);
-  --slate-05: oklch(0.548 0.02 264);
-  --slate-06: oklch(0.459 0.018 264);
-  --slate-07: oklch(0.396 0.016 264);
-  --slate-08: oklch(0.349 0.014 264);
-  --slate-09: oklch(0.303 0.013 264);
-  --slate-10: oklch(0.256 0.011 264);
+  --slate-00: oklch(98% 0.0009 260);
+  --slate-01: oklch(94% 0.0036 260);
+  --slate-02: oklch(88% 0.0064 260);
+  --slate-03: oklch(80% 0.01 260);
+  --slate-04: oklch(72% 0.0136 260);
+  --slate-05: oklch(64% 0.0172 260);
+  --slate-06: oklch(56% 0.02 260);
+  --slate-07: oklch(48% 0.019 260);
+  --slate-08: oklch(40% 0.0172 260);
+  --slate-09: oklch(32% 0.0154 260);
+  --slate-10: oklch(25% 0.0128 260);
 }

package/app/assets/styles/setup/02.colours/_sunset.css CHANGED Viewed

@@ -1,12 +1,14 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
 :where(html) {
-  --sunset-01: oklch(0.98 0.06 45);
-  --sunset-02: oklch(0.92 0.08 50);
-  --sunset-03: oklch(0.82 0.12 55);
-  --sunset-04: oklch(0.75 0.18 50);
-  --sunset-05: oklch(0.7 0.2 48);
-  --sunset-06: oklch(0.65 0.22 45);
-  --sunset-07: oklch(0.6 0.22 40);
-  --sunset-08: oklch(0.5 0.2 35);
-  --sunset-09: oklch(0.4 0.18 30);
-  --sunset-10: oklch(0.3 0.15 25);
+  --sunset-00: oklch(98% 0.0099 50);
+  --sunset-01: oklch(94% 0.0396 47.5);
+  --sunset-02: oklch(88% 0.0704 45);
+  --sunset-03: oklch(80% 0.11 42.5);
+  --sunset-04: oklch(72% 0.1496 40);
+  --sunset-05: oklch(64% 0.1892 37.5);
+  --sunset-06: oklch(56% 0.22 35);
+  --sunset-07: oklch(48% 0.209 32.5);
+  --sunset-08: oklch(40% 0.1892 30);
+  --sunset-09: oklch(32% 0.1694 27.5);
+  --sunset-10: oklch(25% 0.1408 25);
 }

package/app/assets/styles/setup/02.colours/_theme-params.css ADDED Viewed

@@ -0,0 +1,18 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
+:where(html) {
+  --palette-blue-hue: 255;
+  --palette-blue-chroma: 0.22;
+  --palette-red-hue: 30;
+  --palette-red-chroma: 0.24;
+  --palette-green-hue: 157;
+  --palette-green-chroma: 0.19;
+  --palette-amber-hue: 75;
+  --palette-amber-chroma: 0.19;
+  --palette-orange-hue: 60;
+  --palette-orange-chroma: 0.15;
+  --palette-sunset-hue: 50;
+  --palette-sunset-chroma: 0.22;
+  --palette-sunset-drift: -25;
+  --palette-slate-hue: 260;
+  --palette-slate-chroma: 0.02;
+}

package/app/assets/styles/setup/02.colours/index.css CHANGED Viewed

@@ -1,3 +1,4 @@
+@import "./_theme-params";
 @import "./_amber";
 @import "./_blue";
 @import "./_green";

package/app/assets/styles/setup/03.theming/_default.css ADDED Viewed

@@ -0,0 +1,87 @@
+:where(html) {
+  /* Default palette — blue */
+  --theme-hue: var(--palette-blue-hue);
+  --theme-chroma: var(--palette-blue-chroma);
+  /* ===========================================
+     GENERIC BODY VARIABLES
+     =========================================== */
+  --page-bg: light-dark(var(--slate-00), var(--slate-08));
+  --colour-text-default: light-dark(var(--slate-09), var(--slate-01));
+  --colour-text-accent: light-dark(var(--blue-09), var(--blue-05));
+  --colour-text-eyebrow: light-dark(var(--blue-09), var(--blue-05));
+  /* ===========================================
+     GLASS PANEL VARIABLES
+     =========================================== */
+  --glass-panel-bg: light-dark(rgba(255, 255, 255, 0.55), rgba(12, 12, 20, 0.45));
+  --glass-panel-border-color: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.07));
+  /* Multi-shadow: opacity driven by light-dark() sub-vars */
+  --_gp-shadow-a: light-dark(0.08, 0.5);
+  --_gp-shadow-b: light-dark(0.04, 0.3);
+  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, var(--_gp-shadow-a)), 0 2px 8px rgba(0, 0, 0, var(--_gp-shadow-b));
+  --glass-panel-highlight: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.04));
+  /* ===========================================
+     HERO / EYEBROW TEXT VARIABLES
+     =========================================== */
+  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+  /* ===========================================
+     STEPPER LIST VARIABLES
+     =========================================== */
+  --stepper-list-counter-circle-background: transparent;
+  --stepper-list-counter-circle-text: light-dark(var(--blue-09), var(--blue-02));
+  --stepper-list-counter-circle-border: light-dark(var(--blue-09), var(--blue-02));
+  --stepper-list-counter-disc-background: light-dark(var(--blue-01), var(--blue-02));
+  --stepper-list-counter-disc-text: var(--blue-09);
+  --stepper-list-counter-disc-border: light-dark(var(--blue-01), var(--blue-02));
+  --stepper-list-counter-square-background: transparent;
+  --stepper-list-counter-square-text: light-dark(var(--blue-09), var(--blue-02));
+  --stepper-list-counter-square-border: light-dark(var(--blue-09), var(--blue-02));
+  --stepper-list-connector-color: light-dark(var(--blue-01), var(--blue-02));
+  --stepper-list-icon: light-dark(var(--blue-09), var(--blue-02));
+  /* ===========================================
+     COLOUR FINDER VARIABLES
+     =========================================== */
+  --colour-finder-primary-colour: var(--blue-03);
+  --colour-finder-border-colour: light-dark(var(--blue-02), var(--blue-03));
+  --colour-finder-checked-surface-colour: light-dark(var(--green-03), var(--green-10));
+  --colour-finder-checked-stroke-colour: light-dark(var(--green-09), var(--green-03));
+  --colour-finder-conflict-surface-colour: light-dark(var(--sunset-03), var(--sunset-09));
+  --colour-finder-conflict-stroke-colour: light-dark(var(--sunset-09), var(--sunset-03));
+  /* ===========================================
+     TREATMENT CONSULTANT VARIABLES
+     =========================================== */
+  --treatment-consultant-primary-colour: light-dark(var(--amber-05), var(--amber-02));
+  --treatment-consultant-primary-foreground: light-dark(var(--amber-09), var(--amber-02));
+  --treatment-consultant-muted-colour: light-dark(var(--amber-03), var(--amber-05));
+  --treatment-consultant-muted-foreground: light-dark(var(--amber-07), var(--amber-05));
+  --treatment-consultant-background: light-dark(var(--amber-01), var(--amber-10));
+  --treatment-consultant-foreground: light-dark(var(--amber-09), var(--amber-02));
+  --treatment-consultant-border-colour: light-dark(var(--blue-02), var(--amber-03));
+  --treatment-consultant-checked-surface-colour: light-dark(var(--green-03), var(--green-10));
+  --treatment-consultant-checked-stroke-colour: light-dark(var(--green-09), var(--green-03));
+  --treatment-consultant-conflict-surface-colour: light-dark(var(--sunset-03), var(--sunset-09));
+  --treatment-consultant-conflict-stroke-colour: light-dark(var(--sunset-09), var(--sunset-03));
+  /* ===========================================
+     ANCHOR LINK VARIABLES
+     =========================================== */
+  --colour-link-default: light-dark(var(--blue-10), var(--blue-02));
+  --colour-link-hover: light-dark(var(--blue-09), var(--blue-03));
+  /* ===========================================
+     STRUCTURAL INPUT TOKENS
+     Neutral slate surface — independent of theme colour
+     =========================================== */
+  --theme-input-surface: light-dark(var(--slate-00), var(--slate-10));
+  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-09));
+  --theme-input-text-color-normal: light-dark(var(--slate-09), var(--slate-01));
+  --theme-input-placeholder: light-dark(var(--slate-05), var(--slate-04));
+  --theme-checkbox-symbol-surface: var(--theme-input-surface);
+  --input-error-margin-block-start: 0.25rem;
+}

package/app/assets/styles/setup/03.theming/_error.css ADDED Viewed

@@ -0,0 +1,14 @@
+:where([data-invalid]),
+:where([data-theme="error"]) {
+  --theme-hue: var(--palette-red-hue);
+  --theme-chroma: var(--palette-red-chroma);
+  /* ===========================================
+     FORM ERROR DISPLAY TOKENS
+     These are always error-red regardless of nesting context.
+     =========================================== */
+  --input-error-color: white;
+  --theme-error-surface: light-dark(var(--red-06), var(--red-07));
+  --theme-error-border: light-dark(var(--red-06), var(--red-07));
+  --theme-error-outline: light-dark(var(--red-01), var(--red-05));
+}

package/app/assets/styles/setup/03.theming/_success.css ADDED Viewed

@@ -0,0 +1,4 @@
+:where([data-theme="success"]) {
+  --theme-hue: var(--palette-green-hue);
+  --theme-chroma: var(--palette-green-chroma);
+}

package/app/assets/styles/setup/03.theming/_theme-slots.css ADDED Viewed

@@ -0,0 +1,16 @@
+/* Theme semantic slots — 8 shared colour roles used by all themed components.
+   Declared on the same selector as theme-ramp.css so the formula re-evaluates
+   per [data-theme] element rather than being inherited from html. */
+:where(html, [data-theme], [data-invalid]) {
+  --theme-surface: light-dark(var(--colour-theme-7), var(--colour-theme-9));
+  --theme-surface-inverted: light-dark(var(--colour-theme-9), var(--colour-theme-2));
+  --theme-surface-hover: light-dark(var(--colour-theme-9), var(--colour-theme-7));
+  --theme-accent: light-dark(var(--colour-theme-5), var(--colour-theme-4));
+  --theme-surface-subtle: light-dark(var(--colour-theme-1), var(--colour-theme-9));
+  --theme-border: light-dark(var(--colour-theme-6), var(--colour-theme-5));
+  --theme-border-focus: light-dark(var(--colour-theme-4), var(--colour-theme-3));
+  --theme-ring: light-dark(var(--colour-theme-1), var(--colour-theme-9));
+  --theme-on-surface: var(--colour-theme-0);
+  --theme-text: light-dark(var(--colour-theme-9), var(--colour-theme-2));
+  --theme-text-inverted: light-dark(var(--colour-theme-9), var(--colour-theme-7));
+}

package/app/assets/styles/setup/03.theming/_warning.css ADDED Viewed

@@ -0,0 +1,13 @@
+/* Warning theme uses the full sunset ramp with hue drift.
+   Steps 00–05 sit in amber/orange territory; steps 06–10 shift toward red-orange.
+   --theme-surface overrides to step 5 (mid-light) so warning CTAs read as
+   warm/alert rather than the dark-filled default. */
+:where([data-theme="warning"]) {
+  --theme-hue: var(--palette-sunset-hue);
+  --theme-chroma: var(--palette-sunset-chroma);
+  --theme-hue-drift: var(--palette-sunset-drift);
+  /* Lighter surface than the default step-9 — keeps warning buttons warm, not heavy */
+  --theme-surface:       light-dark(var(--colour-theme-5), var(--colour-theme-4));
+  --theme-surface-hover: light-dark(var(--colour-theme-7), var(--colour-theme-5));
+}

package/app/assets/styles/setup/03.theming/index.css CHANGED Viewed

@@ -1,4 +1,6 @@
-@import "./default/";
-@import "./error/";
-@import "./success/";
-@import "./warning/";
+@import "./theme-ramp";
+@import "./_theme-slots";
+@import "./_default";
+@import "./_error";
+@import "./_success";
+@import "./_warning";

package/app/assets/styles/setup/03.theming/theme-ramp.css ADDED Viewed

@@ -0,0 +1,19 @@
+/* GENERATED — edit ramps.config.mjs, not this file */
+/* 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]) {
+  --colour-theme-0: oklch(98% calc(var(--theme-chroma) * 0.045) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (0)));
+  --colour-theme-1: oklch(94% calc(var(--theme-chroma) * 0.18) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (1 / 10)));
+  --colour-theme-2: oklch(88% calc(var(--theme-chroma) * 0.32) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (2 / 10)));
+  --colour-theme-3: oklch(80% calc(var(--theme-chroma) * 0.5) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (3 / 10)));
+  --colour-theme-4: oklch(72% calc(var(--theme-chroma) * 0.68) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (4 / 10)));
+  --colour-theme-5: oklch(64% calc(var(--theme-chroma) * 0.86) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (5 / 10)));
+  --colour-theme-6: oklch(56% calc(var(--theme-chroma) * 1) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (6 / 10)));
+  --colour-theme-7: oklch(48% calc(var(--theme-chroma) * 0.95) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (7 / 10)));
+  --colour-theme-8: oklch(40% calc(var(--theme-chroma) * 0.86) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (8 / 10)));
+  --colour-theme-9: oklch(32% calc(var(--theme-chroma) * 0.77) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (9 / 10)));
+  --colour-theme-10: oklch(25% calc(var(--theme-chroma) * 0.64) calc(var(--theme-hue) + var(--theme-hue-drift, 0) * (1)));
+  /* Aliases for legacy --colour-theme-11 / -12 references */
+  --colour-theme-11: var(--colour-theme-10);
+  --colour-theme-12: var(--colour-theme-10);
+}

package/app/assets/styles/setup/04.elements/forms/00.element-defaults.css CHANGED Viewed

@@ -1,11 +1,4 @@
 :where(html) {
-  input,
-  textarea,
-  select,
-  button {
-    /* all: unset; */
-  }
   input:autofill,
   input:-internal-autofill-selected,
   input:-webkit-autofill-strong-password,

package/app/assets/styles/setup/04.elements/forms/06.button-geometry.css CHANGED Viewed

@@ -2,7 +2,7 @@
   --button-padding-block: 1rem;
   --button-padding-inline: 1.8rem;
-  --button-border-radius: 0.8rem;
+  --button-border-radius: 0.2rem;
   --button-border-radius-icon-only: 100vw;
   --button-border-width: 0.1rem;

package/app/assets/styles/setup/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@layer reset, colours, theming, form-tokens, typography, a11y, components, utilities;
+@layer reset, colours, theming, form-tokens, typography, a11y, components, utilities, consumer;
 @import "./01.config/" layer(reset);
 @import "./02.colours/" layer(colours);