Reinstate modern light dark

[srcdev]

Parametric colour ramp system + semantic theme alignment

Summary

• Replaces hardcoded light/dark CSS blocks with a parametric oklch ramp system. Each named palette (blue, red, green, amber, etc.) is now generated from ramps.config.mjs — hue, chroma, and 11 fixed lightness steps — eliminating hundreds of hand-authored colour values and making the entire system consistent and auditable.

• Semantic theme slots (--theme-surface, --theme-text, --theme-border, etc.) now use light-dark() to pick the correct ramp step automatically. Components no longer hardcode positional ramp values — they reference semantic slots and respond to light/dark mode correctly.

• Consumer ramp generator (scripts/generate-consumer-ramps.mjs) lets downstream apps generate a matching custom-branded ramp from a single hue/chroma config, with a check-ramps CI guard to catch drift.

• DisplayPrompt and DisplayToast aligned to a shared SemanticTheme type ("info" | "success" | "warning" | "error"), dropping the non-semantic variants that had no CSS backing. Both components now theme correctly in light and dark mode. DisplayPromptCore renamed to DisplayPrompt and moved to 01.atoms/prompt/; toast moved to 01.atoms/toast/. Broken DisplayPromptError variant deleted.

• 64 Vitest tests added across both display components, including a fix for a real slot-forwarding bug discovered during test authoring.

Test plan

• Toggle light/dark mode — all four semantic themes (info/success/warning/error) render with correct colours in both modes across DisplayPrompt and DisplayToast
• Trigger a toast — verify show/hide animation, progress bar, auto-dismiss, and close button
• Dismiss a DisplayPrompt — verify collapse animation (local dismiss) and v-model emit path
• Run npm run test:run — all tests pass
• Run npm run generate:ramps — output files are unchanged (no drift)
• Check app/pages/ui/display-prompt and app/pages/ui/display-toast demo pages render correctly

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
srcdev-design-system	Ready	Preview, Comment	Jun 11, 2026 8:41pm
srcdev-design-system-storybook	Ready	Preview, Comment	Jun 11, 2026 8:41pm

[Copilot]

Pull request overview

This PR reinstates and modernizes the project’s light/dark theming by replacing hand-authored theme blocks with a generated OKLCH colour ramp system, then aligning component styling to semantic theme slots and simplifying component theme variants.

Changes:

• Add a parametric OKLCH ramp generator (generate-ramps, check-ramps) and a consumer-facing ramp generator for downstream apps.
• Introduce semantic theme slots (e.g. --theme-surface, --theme-text, --theme-border, --theme-ring) driven by light-dark() and ramp params (--theme-hue, --theme-chroma).
• Consolidate DisplayPrompt / DisplayToast onto a shared SemanticTheme (info|success|warning|error), add Storybook + Vitest coverage, and remove legacy prompt variants/core.

Reviewed changes

Copilot reviewed 75 out of 78 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
scripts/generate-ramps.mjs	Generates per-palette step CSS, palette param vars, and the parametric --colour-theme-* formula file.
scripts/generate-consumer-ramps.mjs	Allows consuming apps to generate compatible ramps from their own ramps.config.mjs.
scripts/check-ramps.mjs	CI guard to ensure generated ramp/theme files are committed and up-to-date.
ramps.config.mjs	Single source of truth for lightness curve, chroma multipliers, and named palettes (incl. drift).
package.json	Adds ramp scripts and ensures ramps regenerate before dev/build/generate.
nuxt.config.ts	Regenerates ramps on ramps.config.mjs changes during standalone local dev.
README.md	Documents the ramp system, semantic slots, and consumer setup workflow.
app/types/components/semantic-theme.d.ts	Adds shared SemanticTheme union type.
app/types/components/index.ts	Re-exports new types (SemanticTheme, DisplayPrompt types).
app/types/components/display-toast.d.ts	Narrows toast theme type to SemanticTheme.
app/types/components/display-prompt.d.ts	Adds DisplayPrompt public prop/type surface.
app/components/01.atoms/prompt/DisplayPrompt.vue	New prompt component using semantic slots + semantic theme variants.
app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts	Adds unit tests for prompt rendering, slots, and dismiss behaviour.
app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts	Adds Storybook stories for semantic themes and behaviour.
app/components/01.atoms/toast/DisplayToast.vue	Updates toast defaults/slots/theming to semantic slots and semantic themes.
app/components/01.atoms/toast/molecules/DefaultToastContent.vue	Aligns default toast content visuals/icons to semantic slots + theme union.
app/components/01.atoms/toast/tests/DisplayToast.spec.ts	Adds unit tests for toast rendering, ARIA, positioning, dismiss, and slots.
app/components/01.atoms/toast/stories/DisplayToast.stories.ts	Updates stories to semantic themes and new prompt integration naming.
app/components/display-tooltip/DisplayTooltip.vue	Switches from button-specific theme vars to semantic theme slots.
app/components/display-theme-switch/DisplayThemeSwitch.vue	Updates borders/outlines to semantic slot tokens.
app/components/05.forms/triple-toggle-switch/TripleToggleSwitchCore.vue	Updates form control styling to semantic border/ring tokens.
app/components/05.forms/toggle-switch/ToggleSwitchCore.vue	Updates switch styling to semantic tokens (border/ring/surface/text).
app/components/05.forms/pending-effect/PendingEffect.vue	Aligns pending effect colours to semantic slots.
app/components/05.forms/input-textarea/InputTextareaCore.vue	Updates outlines/borders to semantic border/ring tokens.
app/components/05.forms/input-text/InputTextCore.vue	Updates outlines/borders to semantic border/ring tokens.
app/components/05.forms/input-text/variants/InputTextAsNumberWithLabel.vue	Updates button split borders to semantic border token.
app/components/05.forms/input-select/InputSelectCore.vue	Updates borders/outlines and caret colour to semantic border token.
app/components/05.forms/input-number/InputNumberCore.vue	Aligns input surface/border styling to semantic input + border tokens.
app/components/05.forms/input-copy/InputCopyCore.vue	Updates borders/hover/focus colours to semantic slots.
app/components/05.forms/input-checkbox-radio/InputCheckboxRadioCore.vue	Updates checkbox/radio border/outline/icon colours to semantic tokens.
app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue	Updates button variant border/outline/label/decorator tokens.
app/components/05.forms/input-button/InputButtonCore.vue	Re-maps button variants to semantic surface/text/border/ring slots.
app/components/02.molecules/action-menu/ActionMenu.vue	Updates focus outline token to semantic ring.
app/components/02.molecules/action-menu/ActionMenuItemCore.vue	Updates focus outline token to semantic ring.
app/components/display-prompt/DisplayPromptCore.vue	Removes legacy core prompt implementation.
app/components/display-prompt/variants/DisplayPromptError.vue	Removes legacy non-semantic error variant component.
app/assets/styles/setup/index.css	Extends layer ordering to include a consumer layer.
app/assets/styles/setup/01.config/_head.css	Re-enables color-scheme: light dark and explicit .light / .dark overrides.
app/assets/styles/setup/02.colours/index.css	Imports generated palette params before named ramp files.
app/assets/styles/setup/02.colours/_theme-params.css	Generated palette param vars (--palette-*-hue/chroma/drift).
app/assets/styles/setup/02.colours/_blue.css	Converts blue ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_red.css	Converts red ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_green.css	Converts green ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_amber.css	Converts amber ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_orange.css	Converts orange ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/02.colours/_sunset.css	Converts sunset ramp to generated OKLCH step values with drift (00–10).
app/assets/styles/setup/02.colours/_slate.css	Converts slate ramp to generated OKLCH step values (00–10).
app/assets/styles/setup/03.theming/index.css	Switches theming entrypoint to ramp formula + semantic slots + palette selectors.
app/assets/styles/setup/03.theming/theme-ramp.css	Generated parametric --colour-theme-0..10 formula and legacy aliases.
app/assets/styles/setup/03.theming/_theme-slots.css	Adds semantic theme slots derived from the ramp via light-dark().
app/assets/styles/setup/03.theming/_default.css	Sets default palette params and updates global/page-level tokens to light-dark().
app/assets/styles/setup/03.theming/_error.css	Sets error palette params + preserves error-specific form tokens.
app/assets/styles/setup/03.theming/_success.css	Sets success palette params.
app/assets/styles/setup/03.theming/_warning.css	Sets warning palette params, hue drift, and adjusts surface intensity.
app/assets/styles/setup/03.theming/default/index.css	Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/default/_light.css	Removes old hardcoded default theme values.
app/assets/styles/setup/03.theming/default/_dark.css	Removes old hardcoded default theme values.
app/assets/styles/setup/03.theming/error/index.css	Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/error/_light.css	Removes old hardcoded error theme values.
app/assets/styles/setup/03.theming/error/_dark.css	Removes old hardcoded error theme values.
app/assets/styles/setup/03.theming/success/index.css	Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/success/_light.css	Removes old hardcoded success theme values.
app/assets/styles/setup/03.theming/success/_dark.css	Removes old hardcoded success theme values.
app/assets/styles/setup/03.theming/warning/index.css	Removes old light/dark theming import structure.
app/assets/styles/setup/03.theming/warning/_light.css	Removes old hardcoded warning theme values.
app/assets/styles/setup/03.theming/warning/_dark.css	Removes old hardcoded warning theme values.
app/assets/styles/setup/04.elements/forms/00.element-defaults.css	Removes unused commented default element reset block.
app/pages/ui/display-prompt.vue	Updates demo page to use DisplayPrompt instead of legacy core variants.
app/pages/ui/display-toast.vue	Updates prompt embedding inside toasts to use DisplayPrompt.
app/pages/ui/settings.vue	Updates UI test content to exercise data-theme ramp behaviour.
app/pages/ui/mask-element.vue	Tweaks mask demo colours/sizing to match new ramps.
.vscode/srcdev-nuxt3-display-prompt-component.code-snippets	Updates snippet to reference DisplayPrompt (but still needs API alignment fixes).
.claude/skills/theming-colour-ramps.md	Adds detailed architecture doc for ramps + semantic slots + drift.
.claude/skills/theming-override-default.md	Updates consumer guidance to new hue/chroma + generator workflow.
.claude/skills/theming-partial-override.md	Updates partial override guidance to semantic-slot based theming.
.claude/skills/index.md	Adds new theming skills and new component skills (toast/prompt).
.claude/skills/components/display-toast.md	Adds component usage + slot forwarding + ARIA documentation.
.claude/skills/components/display-prompt.md	Adds component usage + dismiss behaviour + theme docs.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.