@vuecs/design 1.0.0

package/assets/index.css

@@ -0,0 +1,197 @@
+/*!
+ * @vuecs/design — Design tokens + motion primitives
+ *
+ * CSS-variable token layer for vuecs components: 6 semantic color
+ * scales × 11 shades, light/dark semantic aliases, radius tokens, and
+ * motion primitives (vanilla-CSS port of tw-animate-css; see
+ * animations.css).
+ *
+ * `--vc-color-<scale>-*` reference Tailwind v4's `--color-<palette>-*`
+ * catalog (primary→blue, neutral→neutral, success→green, warning→amber,
+ * error→red, info→sky). The right-hand catalog is single-source:
+ * Tailwind ships it when consumers `@import "tailwindcss"` and vuecs's
+ * `/standalone` subpath ships it via `palettes.css` for Tailwind-free
+ * apps. Importing this file alone leaves the references dangling — load
+ * one of the catalog sources first.
+ *
+ * Two supported import orders:
+ *   Tailwind:           @import "tailwindcss"; @import "@vuecs/design";
+ *   Bootstrap / Bulma:  @import "@vuecs/design/standalone";
+ *
+ * Runtime palette switching (`setColorPalette()`) writes new
+ * `--vc-color-<scale>-*: var(--color-<other>-*)` declarations to a
+ * `<style id="vc-color-palette">` block, which cascades over these
+ * defaults. Theme-tailwind layers on an `@theme` block that exposes
+ * vuecs tokens as Tailwind color names (`bg-primary-600`, `text-fg`,
+ * …) — see `@vuecs/theme-tailwind` for that bridge.
+ *
+ * Resolution chain (Tailwind setup):
+ *   bg-primary-600
+ *     → var(--color-primary-600)         (Tailwind utility)
+ *     → var(--vc-color-primary-600)      (theme-tailwind @theme bridge)
+ *     → var(--color-blue-600)            (this file)
+ *     → oklch(54.6% 0.245 262.881)       (Tailwind palette literal)
+ *
+ * Resolution chain (standalone setup):
+ *   --vc-color-primary-600
+ *     → var(--color-blue-600)            (this file)
+ *     → oklch(54.6% 0.245 262.881)       (palettes.css from standalone)
+ */
+
+/* Motion primitives — `animate-in fade-in-0 zoom-in-95` etc. as plain CSS
+   classes (NOT Tailwind utilities), so any theme can drive overlay
+   animations via `data-state`-keyed selectors. See animations.css for the
+   full class catalog and the tw-animate-css attribution. Consumers who
+   want only the design tokens (no motion) can pull `@vuecs/design/animations.css`
+   for motion-only or skip this file and pull a custom subset. */
+@import "./animations.css";
+
+:root {
+    /* -------------------------------------------------------------
+       Semantic scales — references onto the Tailwind palette catalog.
+
+       The right-hand `--color-<palette>-*` vars come from one of:
+         - `tailwindcss` (when consumers @import it before @vuecs/design), or
+         - `@vuecs/design/standalone` (which @imports palettes.css ahead
+           of this file).
+
+       Single source of truth — when Tailwind bumps the OKLCH literal
+       for blue-500, our `--vc-color-primary-500` automatically picks
+       up the new value. Runtime palette switching (setColorPalette)
+       writes new `--vc-color-<scale>-*: var(--color-<other>-*)`
+       declarations to a `<style id="vc-color-palette">` block, which
+       cascades over these defaults.
+       ------------------------------------------------------------- */
+
+    /* primary → Tailwind blue */
+    --vc-color-primary-50:  var(--color-blue-50);
+    --vc-color-primary-100: var(--color-blue-100);
+    --vc-color-primary-200: var(--color-blue-200);
+    --vc-color-primary-300: var(--color-blue-300);
+    --vc-color-primary-400: var(--color-blue-400);
+    --vc-color-primary-500: var(--color-blue-500);
+    --vc-color-primary-600: var(--color-blue-600);
+    --vc-color-primary-700: var(--color-blue-700);
+    --vc-color-primary-800: var(--color-blue-800);
+    --vc-color-primary-900: var(--color-blue-900);
+    --vc-color-primary-950: var(--color-blue-950);
+
+    /* neutral → Tailwind neutral (pure grayscale, no cool/warm tint).
+       Swap via setColorPalette({ neutral: 'slate' | 'zinc' | 'stone' | ... }). */
+    --vc-color-neutral-50:  var(--color-neutral-50);
+    --vc-color-neutral-100: var(--color-neutral-100);
+    --vc-color-neutral-200: var(--color-neutral-200);
+    --vc-color-neutral-300: var(--color-neutral-300);
+    --vc-color-neutral-400: var(--color-neutral-400);
+    --vc-color-neutral-500: var(--color-neutral-500);
+    --vc-color-neutral-600: var(--color-neutral-600);
+    --vc-color-neutral-700: var(--color-neutral-700);
+    --vc-color-neutral-800: var(--color-neutral-800);
+    --vc-color-neutral-900: var(--color-neutral-900);
+    --vc-color-neutral-950: var(--color-neutral-950);
+
+    /* success → Tailwind green */
+    --vc-color-success-50:  var(--color-green-50);
+    --vc-color-success-100: var(--color-green-100);
+    --vc-color-success-200: var(--color-green-200);
+    --vc-color-success-300: var(--color-green-300);
+    --vc-color-success-400: var(--color-green-400);
+    --vc-color-success-500: var(--color-green-500);
+    --vc-color-success-600: var(--color-green-600);
+    --vc-color-success-700: var(--color-green-700);
+    --vc-color-success-800: var(--color-green-800);
+    --vc-color-success-900: var(--color-green-900);
+    --vc-color-success-950: var(--color-green-950);
+
+    /* warning → Tailwind amber */
+    --vc-color-warning-50:  var(--color-amber-50);
+    --vc-color-warning-100: var(--color-amber-100);
+    --vc-color-warning-200: var(--color-amber-200);
+    --vc-color-warning-300: var(--color-amber-300);
+    --vc-color-warning-400: var(--color-amber-400);
+    --vc-color-warning-500: var(--color-amber-500);
+    --vc-color-warning-600: var(--color-amber-600);
+    --vc-color-warning-700: var(--color-amber-700);
+    --vc-color-warning-800: var(--color-amber-800);
+    --vc-color-warning-900: var(--color-amber-900);
+    --vc-color-warning-950: var(--color-amber-950);
+
+    /* error → Tailwind red */
+    --vc-color-error-50:  var(--color-red-50);
+    --vc-color-error-100: var(--color-red-100);
+    --vc-color-error-200: var(--color-red-200);
+    --vc-color-error-300: var(--color-red-300);
+    --vc-color-error-400: var(--color-red-400);
+    --vc-color-error-500: var(--color-red-500);
+    --vc-color-error-600: var(--color-red-600);
+    --vc-color-error-700: var(--color-red-700);
+    --vc-color-error-800: var(--color-red-800);
+    --vc-color-error-900: var(--color-red-900);
+    --vc-color-error-950: var(--color-red-950);
+
+    /* info → Tailwind sky */
+    --vc-color-info-50:  var(--color-sky-50);
+    --vc-color-info-100: var(--color-sky-100);
+    --vc-color-info-200: var(--color-sky-200);
+    --vc-color-info-300: var(--color-sky-300);
+    --vc-color-info-400: var(--color-sky-400);
+    --vc-color-info-500: var(--color-sky-500);
+    --vc-color-info-600: var(--color-sky-600);
+    --vc-color-info-700: var(--color-sky-700);
+    --vc-color-info-800: var(--color-sky-800);
+    --vc-color-info-900: var(--color-sky-900);
+    --vc-color-info-950: var(--color-sky-950);
+
+    /* -------------------------------------------------------------
+       Semantic aliases — light mode
+       These flip in .dark to swap the whole UI.
+       ------------------------------------------------------------- */
+
+    --vc-color-bg:           #fff;
+    --vc-color-bg-muted:     var(--vc-color-neutral-50);
+    --vc-color-bg-elevated:  var(--vc-color-neutral-100);
+    --vc-color-fg:           var(--vc-color-neutral-900);
+    --vc-color-fg-muted:     var(--vc-color-neutral-500);
+    --vc-color-border:       var(--vc-color-neutral-200);
+    --vc-color-border-muted: var(--vc-color-neutral-100);
+    --vc-color-ring:         var(--vc-color-primary-500);
+
+    /* "on-*" tokens = foreground color when placed on a filled semantic bg */
+    --vc-color-on-primary: #fff;
+    --vc-color-on-success: #fff;
+    --vc-color-on-warning: var(--vc-color-neutral-900);
+    --vc-color-on-error:   #fff;
+    --vc-color-on-info:    #fff;
+    --vc-color-on-neutral: #fff;
+
+    /* -------------------------------------------------------------
+       Radius
+       ------------------------------------------------------------- */
+
+    --vc-radius-sm:   0.125rem; /* 2px  */
+    --vc-radius-md:   0.375rem; /* 6px  */
+    --vc-radius-lg:   0.5rem;   /* 8px  */
+    --vc-radius-xl:   0.75rem;  /* 12px */
+    --vc-radius-full: 9999px;
+}
+
+/* -----------------------------------------------------------------
+   Dark mode — only semantic aliases flip; scales stay the same.
+   Apply by toggling `class="dark"` on <html> or an ancestor.
+   ----------------------------------------------------------------- */
+
+.dark {
+    /* Shade choices mirror Nuxt UI: bg=900 (softer than 950),
+       fg=200 (softer than pure 100), muted bg=800. Reduces the
+       harsh white-on-black contrast while staying clearly dark. */
+    --vc-color-bg:           var(--vc-color-neutral-900);
+    --vc-color-bg-muted:     var(--vc-color-neutral-800);
+    --vc-color-bg-elevated:  var(--vc-color-neutral-800);
+    --vc-color-fg:           var(--vc-color-neutral-200);
+    --vc-color-fg-muted:     var(--vc-color-neutral-500);
+    --vc-color-border:       var(--vc-color-neutral-800);
+    --vc-color-border-muted: var(--vc-color-neutral-900);
+    --vc-color-ring:         var(--vc-color-primary-400);
+
+    --vc-color-on-warning: var(--vc-color-neutral-950);
+}

package/assets/palettes.css

@@ -0,0 +1,303 @@
+/*!
+ * @vuecs/design — Tailwind v4 palette catalog (standalone subpath)
+ *
+ * AUTO-GENERATED. Do not edit by hand.
+ *
+ * Source: tailwindcss@4.2.4 → theme.css. 22 palettes × 11 shades
+ * (242 OKLCH literals) emitted as plain CSS custom properties so consumers
+ * who don't load Tailwind can still use `setColorPalette()` and reference
+ * the palette tokens directly.
+ *
+ * Regenerate:
+ *   npm run --workspace=packages/design standalone:build
+ *
+ * Validate (CI):
+ *   npm run --workspace=packages/design standalone:check
+ */
+:root {
+    /* slate */
+    --color-slate-50: oklch(98.4% 0.003 247.858);
+    --color-slate-100: oklch(96.8% 0.007 247.896);
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
+    --color-slate-500: oklch(55.4% 0.046 257.417);
+    --color-slate-600: oklch(44.6% 0.043 257.281);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-800: oklch(27.9% 0.041 260.031);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
+
+    /* gray */
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
+
+    /* zinc */
+    --color-zinc-50: oklch(98.5% 0 0);
+    --color-zinc-100: oklch(96.7% 0.001 286.375);
+    --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-600: oklch(44.2% 0.017 285.786);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
+    --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+    /* neutral */
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-600: oklch(43.9% 0 0);
+    --color-neutral-700: oklch(37.1% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
+    --color-neutral-950: oklch(14.5% 0 0);
+
+    /* stone */
+    --color-stone-50: oklch(98.5% 0.001 106.423);
+    --color-stone-100: oklch(97% 0.001 106.424);
+    --color-stone-200: oklch(92.3% 0.003 48.717);
+    --color-stone-300: oklch(86.9% 0.005 56.366);
+    --color-stone-400: oklch(70.9% 0.01 56.259);
+    --color-stone-500: oklch(55.3% 0.013 58.071);
+    --color-stone-600: oklch(44.4% 0.011 73.639);
+    --color-stone-700: oklch(37.4% 0.01 67.558);
+    --color-stone-800: oklch(26.8% 0.007 34.298);
+    --color-stone-900: oklch(21.6% 0.006 56.043);
+    --color-stone-950: oklch(14.7% 0.004 49.25);
+
+    /* red */
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-red-950: oklch(25.8% 0.092 26.042);
+
+    /* orange */
+    --color-orange-50: oklch(98% 0.016 73.684);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+
+    /* amber */
+    --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-300: oklch(87.9% 0.169 91.605);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-amber-800: oklch(47.3% 0.137 46.201);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
+
+    /* yellow */
+    --color-yellow-50: oklch(98.7% 0.026 102.212);
+    --color-yellow-100: oklch(97.3% 0.071 103.193);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-yellow-700: oklch(55.4% 0.135 66.442);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
+    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+    /* lime */
+    --color-lime-50: oklch(98.6% 0.031 120.757);
+    --color-lime-100: oklch(96.7% 0.067 122.328);
+    --color-lime-200: oklch(93.8% 0.127 124.321);
+    --color-lime-300: oklch(89.7% 0.196 126.665);
+    --color-lime-400: oklch(84.1% 0.238 128.85);
+    --color-lime-500: oklch(76.8% 0.233 130.85);
+    --color-lime-600: oklch(64.8% 0.2 131.684);
+    --color-lime-700: oklch(53.2% 0.157 131.589);
+    --color-lime-800: oklch(45.3% 0.124 130.933);
+    --color-lime-900: oklch(40.5% 0.101 131.063);
+    --color-lime-950: oklch(27.4% 0.072 132.109);
+
+    /* green */
+    --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
+    --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-green-950: oklch(26.6% 0.065 152.934);
+
+    /* emerald */
+    --color-emerald-50: oklch(97.9% 0.021 166.113);
+    --color-emerald-100: oklch(95% 0.052 163.051);
+    --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-emerald-800: oklch(43.2% 0.095 166.913);
+    --color-emerald-900: oklch(37.8% 0.077 168.94);
+    --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+    /* teal */
+    --color-teal-50: oklch(98.4% 0.014 180.72);
+    --color-teal-100: oklch(95.3% 0.051 180.801);
+    --color-teal-200: oklch(91% 0.096 180.426);
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
+    --color-teal-800: oklch(43.7% 0.078 188.216);
+    --color-teal-900: oklch(38.6% 0.063 188.416);
+    --color-teal-950: oklch(27.7% 0.046 192.524);
+
+    /* cyan */
+    --color-cyan-50: oklch(98.4% 0.019 200.873);
+    --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-500: oklch(71.5% 0.143 215.221);
+    --color-cyan-600: oklch(60.9% 0.126 221.723);
+    --color-cyan-700: oklch(52% 0.105 223.128);
+    --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-cyan-900: oklch(39.8% 0.07 227.392);
+    --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+    /* sky */
+    --color-sky-50: oklch(97.7% 0.013 236.62);
+    --color-sky-100: oklch(95.1% 0.026 236.824);
+    --color-sky-200: oklch(90.1% 0.058 230.902);
+    --color-sky-300: oklch(82.8% 0.111 230.318);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-500: oklch(68.5% 0.169 237.323);
+    --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-800: oklch(44.3% 0.11 240.79);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-sky-950: oklch(29.3% 0.066 243.157);
+
+    /* blue */
+    --color-blue-50: oklch(97% 0.014 254.604);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-blue-950: oklch(28.2% 0.091 267.935);
+
+    /* indigo */
+    --color-indigo-50: oklch(96.2% 0.018 272.314);
+    --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-200: oklch(87% 0.065 274.039);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
+    --color-indigo-800: oklch(39.8% 0.195 277.366);
+    --color-indigo-900: oklch(35.9% 0.144 278.697);
+    --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+    /* violet */
+    --color-violet-50: oklch(96.9% 0.016 293.756);
+    --color-violet-100: oklch(94.3% 0.029 294.588);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-300: oklch(81.1% 0.111 293.571);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-violet-700: oklch(49.1% 0.27 292.581);
+    --color-violet-800: oklch(43.2% 0.232 292.759);
+    --color-violet-900: oklch(38% 0.189 293.745);
+    --color-violet-950: oklch(28.3% 0.141 291.089);
+
+    /* purple */
+    --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-300: oklch(82.7% 0.119 306.383);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-600: oklch(55.8% 0.288 302.321);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-purple-950: oklch(29.1% 0.149 302.717);
+
+    /* fuchsia */
+    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+    --color-fuchsia-400: oklch(74% 0.238 322.16);
+    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+    /* pink */
+    --color-pink-50: oklch(97.1% 0.014 343.198);
+    --color-pink-100: oklch(94.8% 0.028 342.258);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
+    --color-pink-300: oklch(82.3% 0.12 346.018);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
+    --color-pink-600: oklch(59.2% 0.249 0.584);
+    --color-pink-700: oklch(52.5% 0.223 3.958);
+    --color-pink-800: oklch(45.9% 0.187 3.815);
+    --color-pink-900: oklch(40.8% 0.153 2.432);
+    --color-pink-950: oklch(28.4% 0.109 3.907);
+
+    /* rose */
+    --color-rose-50: oklch(96.9% 0.015 12.422);
+    --color-rose-100: oklch(94.1% 0.03 12.58);
+    --color-rose-200: oklch(89.2% 0.058 10.001);
+    --color-rose-300: oklch(81% 0.117 11.638);
+    --color-rose-400: oklch(71.2% 0.194 13.428);
+    --color-rose-500: oklch(64.5% 0.246 16.439);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
+    --color-rose-700: oklch(51.4% 0.222 16.935);
+    --color-rose-800: oklch(45.5% 0.188 13.697);
+    --color-rose-900: oklch(41% 0.159 10.272);
+    --color-rose-950: oklch(27.1% 0.105 12.094);
+}

package/assets/standalone.css

@@ -0,0 +1,37 @@
+/*!
+ * @vuecs/design — Standalone entry (plan 015 P3)
+ *
+ * Tailwind-free starting point for Bootstrap / Bulma consumers (and
+ * anyone else who doesn't want Tailwind v4 in their bundle). Brings:
+ *
+ *   1. The full 22-palette Tailwind v4 OKLCH catalog
+ *      (`--color-<palette>-<shade>`, 242 vars). This is what
+ *      `setColorPalette()` writes against — without it, runtime palette
+ *      switching silently no-ops on Tailwind-free apps.
+ *   2. All the design tokens from `@vuecs/design`'s default entry
+ *      (`--vc-color-*`, radius, light/dark aliases, motion primitives).
+ *
+ * Consumer paths (mutually exclusive — never import both):
+ *
+ *     // Tailwind user
+ *     @import "tailwindcss";
+ *     @import "@vuecs/design";
+ *     @import "@vuecs/theme-tailwind";
+ *
+ *     // Bootstrap / Bulma user — Tailwind-free
+ *     @import "bootstrap/dist/css/bootstrap.css";  (or "bulma/css/bulma.css")
+ *     @import "@vuecs/design/standalone";
+ *     @import "@vuecs/theme-bootstrap";            (or "@vuecs/theme-bulma")
+ *
+ * Note: `setColorPalette()` is exported from theme packages
+ * (`@vuecs/theme-tailwind`, `@vuecs/theme-bulma`), not from
+ * `@vuecs/design`. The `/standalone` subpath provides the
+ * `--color-<palette>-*` source variables those runtimes target;
+ * Bootstrap consumers without a theme-side palette runtime can compose
+ * `applyColorPaletteCss` from `@vuecs/design` directly.
+ *
+ * `palettes.css` ships separately at `@vuecs/design/palettes.css` for
+ * consumers who only want the catalog without the semantic-scale defaults.
+ */
+@import "./palettes.css";
+@import "./index.css";

package/dist/core/color-mode/bind.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue';
+import type { ColorMode, UseColorModeOptions, UseColorModeReturn } from './types';
+/**
+ * Wire any reactive `Ref<ColorMode>` into the design system: track
+ * system preference, expose the resolved light/dark value, and
+ * (optionally) sync the `.dark` / `.light` class on `<html>`.
+ *
+ * The `syncClass` watcher mirrors what `@vuecs/nuxt`'s SSR plugin
+ * writes server-side, so client hydration leaves the class in place.
+ */
+export declare function bindColorMode(source: Ref<ColorMode>, options?: Pick<UseColorModeOptions, 'syncClass'>): UseColorModeReturn;
+//# sourceMappingURL=bind.d.ts.map

package/dist/core/color-mode/bind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../../../src/core/color-mode/bind.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElF;;;;;;;GAOG;AACH,wBAAgB,aAAa,CACzB,MAAM,EAAE,GAAG,CAAC,SAAS,CAAC,EACtB,OAAO,GAAE,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAM,GACrD,kBAAkB,CA0EpB"}

package/dist/core/color-mode/composable.d.ts

@@ -0,0 +1,13 @@
+import type { UseColorModeOptions, UseColorModeReturn } from './types';
+/**
+ * Reactive color-mode state with localStorage persistence. Shared
+ * across all call sites via `createSharedComposable` so toggling in
+ * one component updates every consumer (and the `<html>` class) in
+ * lockstep.
+ *
+ * For SSR-aware cookie-backed storage (Nuxt), the `@vuecs/nuxt` module
+ * ships its own `useColorMode()` that calls `bindColorMode()` directly
+ * with a cookie-backed ref. Both expose the same return shape.
+ */
+export declare const useColorMode: (options?: UseColorModeOptions) => UseColorModeReturn;
+//# sourceMappingURL=composable.d.ts.map

package/dist/core/color-mode/composable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composable.d.ts","sourceRoot":"","sources":["../../../src/core/color-mode/composable.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAYlF;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,aACX,mBAAmB,KAAQ,kBAmBxC,CAAC"}

package/dist/core/color-mode/index.d.ts

@@ -0,0 +1,4 @@
+export * from './bind';
+export * from './composable';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/color-mode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/color-mode/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/core/color-mode/types.d.ts

@@ -0,0 +1,36 @@
+import type { ComputedRef, WritableComputedRef } from 'vue';
+export type ColorMode = 'light' | 'dark' | 'system';
+/**
+ * Options for `useColorMode()`. Note that `useColorMode` is wrapped
+ * with `createSharedComposable`, so these options are honored **only
+ * on the first call**. Subsequent invocations from anywhere in the
+ * app receive the cached instance — passing a different `storageKey`,
+ * `initial`, or `syncClass` is a silent no-op.
+ *
+ * If you need a per-call configuration, call `bindColorMode()`
+ * directly with your own reactive ref instead.
+ */
+export interface UseColorModeOptions {
+    /** Initial mode when no persisted value exists. Default: `'system'`. */
+    initial?: ColorMode;
+    /** Persist via localStorage (`useStorage` from `@vueuse/core`). Default: `true`. */
+    persist?: boolean;
+    /** Storage key for the default backend. Default: `'vc-color-mode'`. */
+    storageKey?: string;
+    /** Toggle the `.dark` / `.light` class on `<html>`. Default: `true`. */
+    syncClass?: boolean;
+}
+export interface UseColorModeReturn {
+    /** Selected mode — may be `'system'` to defer to OS preference. */
+    mode: WritableComputedRef<ColorMode>;
+    /** Effective mode — never `'system'`; resolves to `'light'` or `'dark'`. */
+    resolved: ComputedRef<'light' | 'dark'>;
+    /**
+     * Convenience boolean proxying `resolved.value === 'dark'`.
+     * Writing `true` sets `mode` to `'dark'`; `false` sets `'light'`.
+     */
+    isDark: WritableComputedRef<boolean>;
+    /** Flip between light and dark. Always sets a concrete mode (no `'system'`). */
+    toggle(): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/core/color-mode/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/color-mode/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,KAAK,CAAC;AAE5D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,WAAW,mBAAmB;IAChC,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,mEAAmE;IACnE,IAAI,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACrC,4EAA4E;IAC5E,QAAQ,EAAE,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,gFAAgF;IAChF,MAAM,IAAI,IAAI,CAAC;CAClB"}

package/dist/core/color-palette/apply.d.ts

@@ -0,0 +1,34 @@
+/**
+ * DOM id used for the runtime palette `<style>` block. Themes that
+ * implement palette switching should write into a `<style>` element
+ * with this id (via `applyColorPaletteCss()`); SSR plugins use the same
+ * id so client hydration replaces the server-rendered block atomically.
+ */
+export declare const COLOR_PALETTE_STYLE_ELEMENT_ID = "vc-color-palette";
+/**
+ * Apply an arbitrary CSS string as a `<style id="vc-color-palette">` block
+ * (client-side only). Idempotent — subsequent calls replace the
+ * element's content.
+ *
+ * Theme-agnostic: accepts whatever CSS string the caller wants. Themes
+ * that ship palette switching compose this with their own renderer
+ * (e.g. `@vuecs/theme-tailwind`'s `renderColorPaletteStyles()`); other
+ * tooling can call it directly with custom CSS.
+ *
+ * The optional `nonce` parameter wires CSP nonce attribution: when set,
+ * the created `<style>` element carries `nonce="..."` so it survives a
+ * strict Content-Security-Policy. Subsequent calls update the
+ * attribute when the value changes, and clear it when the new value is
+ * undefined (so consumers can revoke a stale nonce on policy update).
+ * Consumers typically read this via
+ * `useConfig('nonce')` (from `@vuecs/core`, augmented by
+ * `@vuecs/theme-tailwind`); the per-theme `useColorPalette` wrappers
+ * already do this.
+ *
+ * On the server (`document` undefined) this is a no-op; SSR pre-render
+ * paths should serialize the renderer's output into the response head
+ * directly (with the nonce wired through framework-specific head
+ * APIs), then let the client take over on hydration.
+ */
+export declare function applyColorPaletteCss(css: string, doc?: Document | undefined, nonce?: string): void;
+//# sourceMappingURL=apply.d.ts.map

package/dist/core/color-palette/apply.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/apply.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,8BAA8B,qBAAqB,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,oBAAoB,CAChC,GAAG,EAAE,MAAM,EACX,GAAG,GAAE,QAAQ,GAAG,SAA+B,EAC/C,KAAK,CAAC,EAAE,MAAM,GACf,IAAI,CAiBN"}