actual-css 0.3.0 → 0.4.0

package/src/css/themes/forest.css

@@ -1,65 +0,0 @@
-[data-theme="forest"] {
-  color-scheme: light dark;
-
-  --primary: hsl(175 48% 26%);
-  --primary-fg: white;
-  --secondary: hsl(82 42% 34%);
-  --secondary-fg: white;
-  --success: hsl(148 58% 32%);
-  --success-fg: white;
-  --warning: hsl(42 88% 48%);
-  --warning-fg: hsl(35 35% 12%);
-  --danger: hsl(4 62% 48%);
-  --danger-fg: white;
-  --neutral: hsl(120 10% 34%);
-  --neutral-fg: white;
-
-  --surface: hsl(48 36% 96%);
-  --surface-raised: hsl(45 36% 98%);
-  --surface-subtle: hsl(112 26% 91%);
-  --surface-solid: hsl(130 22% 15%);
-
-  --text: hsl(130 20% 14%);
-  --text-muted: hsl(125 10% 38%);
-  --text-subtle: hsl(125 8% 50%);
-
-  --border: hsl(105 18% 78%);
-  --focus: var(--primary);
-  --focus-ring: hsl(175 48% 26% / 0.22);
-
-  /* Organic rounding — demonstrates scaling the radius tokens up. */
-  --radius: 0.75rem;
-  --radius-sm: 0.5rem;
-  --radius-lg: 1.25rem;
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="forest"] {
-    --primary: light-dark(hsl(175 48% 26%), hsl(175 45% 76%));
-    --primary-fg: light-dark(white, hsl(175 30% 12%));
-    --secondary: light-dark(hsl(82 42% 34%), hsl(82 50% 80%));
-    --secondary-fg: light-dark(white, hsl(82 30% 12%));
-    --success: light-dark(hsl(148 58% 32%), hsl(148 66% 80%));
-    --success-fg: light-dark(white, hsl(148 30% 12%));
-    --warning: light-dark(hsl(42 88% 48%), hsl(42 75% 80%));
-    --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%));
-    --danger: light-dark(hsl(4 62% 48%), hsl(4 70% 80%));
-    --danger-fg: light-dark(white, hsl(4 30% 12%));
-    --neutral: light-dark(hsl(120 10% 34%), hsl(120 18% 80%));
-    --neutral-fg: light-dark(white, hsl(120 30% 12%));
-
-    --surface: light-dark(hsl(48 36% 96%), hsl(130 18% 8%));
-    --surface-raised: light-dark(hsl(45 36% 98%), hsl(130 16% 11%));
-    --surface-subtle: light-dark(hsl(112 26% 91%), hsl(130 14% 16%));
-    --surface-solid: light-dark(hsl(130 22% 15%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(130 20% 14%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(125 10% 38%), hsl(130 8% 68%));
-    --text-subtle: light-dark(hsl(125 8% 50%), hsl(130 7% 55%));
-
-    --border: light-dark(hsl(105 18% 78%), hsl(130 12% 24%));
-    --focus-ring: light-dark(hsl(175 48% 26% / 0.22), hsl(175 45% 76% / 0.28));
-    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
-  }
-}

package/src/css/themes/gradient.css

@@ -1,97 +0,0 @@
-/* Gradient — paired light/dark theme, palette inspired by Bootstrap 4's
- * defaults. Demonstrates that a solid button can be given the classic
- * Bootstrap 4 gradient treatment (a 15%-white-lightened top fading to the
- * flat intent color) purely through token overrides, without touching
- * button.css. Only bare/.solid buttons are targeted — .soft/.outline/.ghost/
- * .link stay flat, matching Bootstrap 4's own gradient mixin, which only
- * wraps its filled button variant. */
-[data-theme="gradient"] {
-  color-scheme: light dark;
-
-  --primary: hsl(211 100% 50%);
-  --primary-fg: white;
-  --secondary: hsl(208 7% 46%);
-  --secondary-fg: white;
-  --success: hsl(134 61% 41%);
-  --success-fg: white;
-  --warning: hsl(45 100% 51%);
-  --warning-fg: hsl(45 100% 10%);
-  --danger: hsl(354 70% 54%);
-  --danger-fg: white;
-  --neutral: hsl(210 10% 23%);
-  --neutral-fg: white;
-
-  --surface: hsl(0 0% 100%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(210 17% 95%);
-  --surface-solid: hsl(210 10% 15%);
-
-  --text: hsl(210 11% 15%);
-  --text-muted: hsl(208 7% 46%);
-  --text-subtle: hsl(210 9% 62%);
-
-  --border: hsl(210 14% 89%);
-  --focus: var(--primary);
-  --focus-ring: hsl(211 100% 50% / 0.25);
-  --hover-overlay: hsl(210 30% 10% / 0.04);
-
-  --radius: 0.25rem;
-  --radius-sm: 0.2rem;
-  --radius-lg: 0.3rem;
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="gradient"] {
-    --primary: light-dark(hsl(211 100% 50%), hsl(211 90% 72%));
-    --primary-fg: light-dark(white, hsl(211 40% 10%));
-    --secondary: light-dark(hsl(208 7% 46%), hsl(208 10% 72%));
-    --secondary-fg: light-dark(white, hsl(208 15% 10%));
-    --success: light-dark(hsl(134 61% 41%), hsl(134 55% 65%));
-    --success-fg: light-dark(white, hsl(134 40% 8%));
-    --warning: light-dark(hsl(45 100% 51%), hsl(45 90% 70%));
-    --warning-fg: light-dark(hsl(45 100% 10%), hsl(45 100% 10%));
-    --danger: light-dark(hsl(354 70% 54%), hsl(354 75% 74%));
-    --danger-fg: light-dark(white, hsl(354 40% 10%));
-    --neutral: light-dark(hsl(210 10% 23%), hsl(210 12% 75%));
-    --neutral-fg: light-dark(white, hsl(210 15% 10%));
-
-    --surface: light-dark(hsl(0 0% 100%), hsl(210 15% 8%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(210 13% 11%));
-    --surface-subtle: light-dark(hsl(210 17% 95%), hsl(210 12% 16%));
-    --surface-solid: light-dark(hsl(210 10% 15%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(210 11% 15%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(208 7% 46%), hsl(210 8% 68%));
-    --text-subtle: light-dark(hsl(210 9% 62%), hsl(210 7% 55%));
-
-    --border: light-dark(hsl(210 14% 89%), hsl(210 12% 24%));
-    --focus-ring: light-dark(hsl(211 100% 50% / 0.25), hsl(211 90% 72% / 0.3));
-    --hover-overlay: light-dark(hsl(210 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(210 30% 10%), hsl(0 0% 0%));
-  }
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  /* Bootstrap 4 gradient recipe (linear-gradient(180deg, mix(white, $color,
-     15%), $color)) ported to the token contract. --ui-bg covers explicit
-     .solid; --btn-default-bg covers the bare/no-variant default. Bootstrap 4
-     still darkens the button on hover even with gradients enabled, so
-     --ui-hover-bg reruns the same recipe over a darkened base color instead
-     of reusing --ui-bg verbatim — the resting gradient shape survives, just
-     shifted darker, same as the flat color-mix darken variants.css uses for
-     hover on ungradiented themes. */
-  [data-theme="gradient"] .btn:not(:where(.soft, .outline, .ghost, .link)) {
-    --gradient-hover-color: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
-    --ui-bg: linear-gradient(
-      180deg,
-      color-mix(in oklch, white 15%, var(--intent, var(--neutral))),
-      var(--intent, var(--neutral))
-    );
-    --btn-default-bg: var(--ui-bg);
-    --ui-hover-bg: linear-gradient(
-      180deg,
-      color-mix(in oklch, white 15%, var(--gradient-hover-color)),
-      var(--gradient-hover-color)
-    );
-  }
-}

package/src/css/themes/index.css

@@ -1,43 +0,0 @@
-/* Opt-in theme bundle. Importing this file pulls in every theme below, each
- * gated by [data-theme="…"]. The light baseline is :root in src/css/theme.css —
- * there is no light.css here.
- *
- * The themes are illustrative: each one demonstrates a different set of knobs
- * the token contract exposes, beyond recoloring.
- *
- *   indigo     — deep blue/violet dark palette (single block)
- *   dim        — dark variant with lifted surface tones
- *   corporate  — reference paired light/dark recolor via light-dark()
- *   forest     — paired recolor + scaled-up radius tokens
- *   ocean      — reference paired recolor
- *   spruce     — deep spruce-green primary + copper secondary
- *   petrol     — desaturated petrol-blue primary + apricot secondary
- *   sunset     — paired recolor + selection and shadow-color theming
- *   lavender   — paired recolor + soft-variant tuning, tinted shadows
- *   mono       — grayscale palette, colored status intents only
- *   square     — paired recolor + full radius scale forced to 0
- *   edge       — paired recolor + intent-colored button lower edge
- *   cyberpunk  — light-only stress test: yellow canvas, dark-on-bright
- *                intents, 2px borders, hard offset shadows
- *   neon       — dark-only + wide-gamut P3 upgrade via oklch(), glow
- *                shadows, soft-variant tuning
- *   gradient   — paired recolor + Bootstrap 4 style gradient on solid buttons
- *                via component-local button tokens
- *
- * Single-block themes (indigo, dim, cyberpunk, neon) pin one color-scheme and
- * cannot adapt to prefers-color-scheme; the paired ones follow the OS. */
-@import "./indigo.css";
-@import "./dim.css";
-@import "./corporate.css";
-@import "./forest.css";
-@import "./ocean.css";
-@import "./spruce.css";
-@import "./petrol.css";
-@import "./sunset.css";
-@import "./lavender.css";
-@import "./mono.css";
-@import "./square.css";
-@import "./edge.css";
-@import "./cyberpunk.css";
-@import "./neon.css";
-@import "./gradient.css";

package/src/css/themes/indigo.css

@@ -1,33 +0,0 @@
-/* Indigo — deep blue/violet palette, dark-only. Single-block shape
- * (color-scheme: dark only) — it does not adapt to prefers-color-scheme;
- * opt in via [data-theme="indigo"]. dim.css is a darker variant with
- * lifted surface tones. */
-[data-theme="indigo"] {
-  color-scheme: dark;
-
-  --primary: hsl(220 90% 66%);
-  --primary-fg: hsl(222 30% 8%);
-  --secondary: hsl(270 65% 70%);
-  --secondary-fg: hsl(270 30% 10%);
-  --success: hsl(145 55% 54%);
-  --success-fg: hsl(145 40% 8%);
-  --warning: hsl(38 92% 62%);
-  --warning-fg: hsl(35 35% 10%);
-  --danger: hsl(0 75% 66%);
-  --danger-fg: hsl(0 35% 10%);
-  --neutral: hsl(220 10% 72%);
-  --neutral-fg: hsl(222 24% 8%);
-
-  --surface: hsl(222 24% 8%);
-  --surface-raised: hsl(222 22% 11%);
-  --surface-subtle: hsl(222 18% 15%);
-  --surface-solid: hsl(0 0% 96%);
-
-  --text: hsl(0 0% 96%);
-  --text-muted: hsl(220 10% 68%);
-  --text-subtle: hsl(220 8% 55%);
-  --border: hsl(222 14% 24%);
-  --focus: var(--primary);
-  --focus-ring: hsl(220 90% 66% / 0.28);
-  --hover-overlay: hsl(0 0% 100% / 0.06);
-}

package/src/css/themes/lavender.css

@@ -1,66 +0,0 @@
-[data-theme="lavender"] {
-  color-scheme: light dark;
-
-  --primary: hsl(258 70% 58%);
-  --primary-fg: white;
-  --secondary: hsl(305 45% 48%);
-  --secondary-fg: white;
-  --success: hsl(150 50% 33%);
-  --success-fg: white;
-  --warning: hsl(42 90% 52%);
-  --warning-fg: hsl(35 35% 12%);
-  --danger: hsl(350 68% 52%);
-  --danger-fg: white;
-  --neutral: hsl(260 10% 42%);
-  --neutral-fg: white;
-
-  --surface: hsl(260 45% 98%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(260 35% 94%);
-  --surface-solid: hsl(260 30% 18%);
-
-  --text: hsl(260 28% 15%);
-  --text-muted: hsl(260 12% 43%);
-  --text-subtle: hsl(260 10% 57%);
-
-  --border: hsl(260 28% 85%);
-  --focus: var(--primary);
-  --focus-ring: hsl(258 70% 58% / 0.22);
-
-  /* Pastel tuning — demonstrates the soft-variant knobs (paler tints, gentler
-     hovers) and violet-tinted shadows. */
-  --soft-bg-mix: 92%;
-  --soft-hover-alpha: 8%;
-  --shadow-color: hsl(260 45% 20%);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="lavender"] {
-    --primary: light-dark(hsl(258 70% 58%), hsl(258 75% 80%));
-    --primary-fg: light-dark(white, hsl(258 30% 12%));
-    --secondary: light-dark(hsl(305 45% 48%), hsl(305 53% 80%));
-    --secondary-fg: light-dark(white, hsl(305 30% 12%));
-    --success: light-dark(hsl(150 50% 33%), hsl(150 58% 80%));
-    --success-fg: light-dark(white, hsl(150 30% 12%));
-    --warning: light-dark(hsl(42 90% 52%), hsl(42 75% 80%));
-    --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%));
-    --danger: light-dark(hsl(350 68% 52%), hsl(350 75% 80%));
-    --danger-fg: light-dark(white, hsl(350 30% 12%));
-    --neutral: light-dark(hsl(260 10% 42%), hsl(260 18% 80%));
-    --neutral-fg: light-dark(white, hsl(260 30% 12%));
-
-    --surface: light-dark(hsl(260 45% 98%), hsl(260 18% 8%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(260 16% 11%));
-    --surface-subtle: light-dark(hsl(260 35% 94%), hsl(260 14% 16%));
-    --surface-solid: light-dark(hsl(260 30% 18%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(260 28% 15%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(260 12% 43%), hsl(260 8% 68%));
-    --text-subtle: light-dark(hsl(260 10% 57%), hsl(260 7% 55%));
-
-    --border: light-dark(hsl(260 28% 85%), hsl(260 12% 24%));
-    --focus-ring: light-dark(hsl(258 70% 58% / 0.22), hsl(258 75% 80% / 0.28));
-    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(260 45% 20%), hsl(260 40% 2%));
-  }
-}

package/src/css/themes/mono.css

@@ -1,60 +0,0 @@
-[data-theme="mono"] {
-  color-scheme: light dark;
-
-  --primary: hsl(220 8% 18%);
-  --primary-fg: white;
-  --secondary: hsl(220 7% 34%);
-  --secondary-fg: white;
-  --success: hsl(145 42% 32%);
-  --success-fg: white;
-  --warning: hsl(40 70% 44%);
-  --warning-fg: hsl(35 35% 10%);
-  --danger: hsl(0 56% 46%);
-  --danger-fg: white;
-  --neutral: hsl(220 6% 45%);
-  --neutral-fg: white;
-
-  --surface: hsl(0 0% 99%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(220 8% 94%);
-  --surface-solid: hsl(220 8% 15%);
-
-  --text: hsl(220 8% 12%);
-  --text-muted: hsl(220 6% 42%);
-  --text-subtle: hsl(220 5% 58%);
-
-  --border: hsl(220 8% 84%);
-  --focus: var(--primary);
-  --focus-ring: hsl(220 8% 18% / 0.22);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="mono"] {
-    --primary: light-dark(hsl(220 8% 18%), hsl(220 16% 80%));
-    --primary-fg: light-dark(white, hsl(220 30% 12%));
-    --secondary: light-dark(hsl(220 7% 34%), hsl(220 15% 80%));
-    --secondary-fg: light-dark(white, hsl(220 30% 12%));
-    --success: light-dark(hsl(145 42% 32%), hsl(145 50% 80%));
-    --success-fg: light-dark(white, hsl(145 30% 12%));
-    --warning: light-dark(hsl(40 70% 44%), hsl(40 75% 80%));
-    --warning-fg: light-dark(hsl(35 35% 10%), hsl(40 30% 12%));
-    --danger: light-dark(hsl(0 56% 46%), hsl(0 64% 80%));
-    --danger-fg: light-dark(white, hsl(0 30% 12%));
-    --neutral: light-dark(hsl(220 6% 45%), hsl(220 14% 80%));
-    --neutral-fg: light-dark(white, hsl(220 30% 12%));
-
-    --surface: light-dark(hsl(0 0% 99%), hsl(0 0% 8%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(0 0% 11%));
-    --surface-subtle: light-dark(hsl(220 8% 94%), hsl(0 0% 16%));
-    --surface-solid: light-dark(hsl(220 8% 15%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(220 8% 12%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(220 6% 42%), hsl(0 0% 68%));
-    --text-subtle: light-dark(hsl(220 5% 58%), hsl(0 0% 55%));
-
-    --border: light-dark(hsl(220 8% 84%), hsl(0 0% 24%));
-    --focus-ring: light-dark(hsl(220 8% 18% / 0.22), hsl(220 16% 80% / 0.28));
-    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
-  }
-}

package/src/css/themes/neon.css

@@ -1,66 +0,0 @@
-/* Neon — dark-only theme (single block, color-scheme: dark, same shape as
- * indigo.css) that demonstrates wide-gamut progressive enhancement. The
- * baseline block uses sRGB-safe hsl() and works everywhere indigo.css works;
- * on P3 displays with oklch() support the intents are re-declared with chroma
- * beyond sRGB. This is the pattern for shipping colors sRGB cannot express
- * without breaking older screens or browsers. Also demonstrates the soft-variant
- * tuning knobs and glow shadows on popovers. */
-[data-theme="neon"] {
-  color-scheme: dark;
-
-  /* Electric intents over near-black: bright hues carry dark ink so solid
-     chips read as lit signs rather than white-on-color buttons. */
-  --primary: hsl(315 95% 62%);
-  --primary-fg: hsl(315 100% 8%);
-  --secondary: hsl(182 100% 46%);
-  --secondary-fg: hsl(182 100% 7%);
-  --success: hsl(135 85% 52%);
-  --success-fg: hsl(135 100% 6%);
-  --warning: hsl(55 95% 55%);
-  --warning-fg: hsl(55 100% 7%);
-  --danger: hsl(350 100% 64%);
-  --danger-fg: hsl(350 100% 8%);
-  --neutral: hsl(260 12% 76%);
-  --neutral-fg: hsl(260 25% 8%);
-
-  --surface: hsl(260 25% 6%);
-  --surface-raised: hsl(260 22% 9%);
-  --surface-subtle: hsl(260 20% 13%);
-  --surface-solid: hsl(0 0% 96%);
-
-  --text: hsl(0 0% 97%);
-  --text-muted: hsl(260 12% 70%);
-  --text-subtle: hsl(260 8% 55%);
-
-  --border: hsl(260 18% 24%);
-  --focus: var(--secondary);
-  --focus-ring: hsl(182 100% 46% / 0.35);
-  --hover-overlay: hsl(0 0% 100% / 0.07);
-  --shadow-color: hsl(260 60% 3%);
-
-  /* Neon tints: stronger soft surfaces and hovers than the default recipe,
-     so tinted chips glow against the near-black canvas. */
-  --soft-bg-mix: 80%;
-  --soft-border-mix: 45%;
-  --soft-hover-alpha: 20%;
-
-  /* Popovers and tooltips glow instead of dropping a shadow. */
-  --shadow-popout: 0 0 1rem hsl(315 95% 62% / 0.25);
-}
-
-/* Wide-gamut upgrade: chroma beyond sRGB on P3-capable displays. Both gates
-   are required — a P3 screen driven by an older browser keeps the hsl()
-   baseline above; -fg inks stay unchanged (near-black is gamut-safe). */
-@media (color-gamut: p3) {
-  @supports (color: oklch(0% 0 0)) {
-    [data-theme="neon"] {
-      --primary: oklch(70% 0.32 340);
-      --secondary: oklch(85% 0.17 195);
-      --success: oklch(85% 0.28 148);
-      --warning: oklch(92% 0.2 105);
-      --danger: oklch(68% 0.26 15);
-      --focus-ring: oklch(85% 0.17 195 / 0.35);
-      --shadow-popout: 0 0 1rem oklch(70% 0.32 340 / 0.3);
-    }
-  }
-}

package/src/css/themes/ocean.css

@@ -1,60 +0,0 @@
-[data-theme="ocean"] {
-  color-scheme: light dark;
-
-  --primary: hsl(198 82% 35%);
-  --primary-fg: white;
-  --secondary: hsl(174 58% 30%);
-  --secondary-fg: white;
-  --success: hsl(160 62% 30%);
-  --success-fg: white;
-  --warning: hsl(36 90% 50%);
-  --warning-fg: hsl(35 35% 12%);
-  --danger: hsl(350 70% 52%);
-  --danger-fg: white;
-  --neutral: hsl(205 12% 38%);
-  --neutral-fg: white;
-
-  --surface: hsl(200 50% 98%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(198 42% 94%);
-  --surface-solid: hsl(204 38% 16%);
-
-  --text: hsl(205 34% 14%);
-  --text-muted: hsl(205 12% 42%);
-  --text-subtle: hsl(205 10% 56%);
-
-  --border: hsl(198 30% 84%);
-  --focus: var(--primary);
-  --focus-ring: hsl(198 82% 35% / 0.22);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="ocean"] {
-    --primary: light-dark(hsl(198 82% 35%), hsl(198 75% 80%));
-    --primary-fg: light-dark(white, hsl(198 30% 12%));
-    --secondary: light-dark(hsl(174 58% 30%), hsl(174 66% 80%));
-    --secondary-fg: light-dark(white, hsl(174 30% 12%));
-    --success: light-dark(hsl(160 62% 30%), hsl(160 70% 80%));
-    --success-fg: light-dark(white, hsl(160 30% 12%));
-    --warning: light-dark(hsl(36 90% 50%), hsl(36 75% 80%));
-    --warning-fg: light-dark(hsl(35 35% 12%), hsl(36 30% 12%));
-    --danger: light-dark(hsl(350 70% 52%), hsl(350 75% 80%));
-    --danger-fg: light-dark(white, hsl(350 30% 12%));
-    --neutral: light-dark(hsl(205 12% 38%), hsl(205 20% 80%));
-    --neutral-fg: light-dark(white, hsl(205 30% 12%));
-
-    --surface: light-dark(hsl(200 50% 98%), hsl(200 18% 8%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(200 16% 11%));
-    --surface-subtle: light-dark(hsl(198 42% 94%), hsl(200 14% 16%));
-    --surface-solid: light-dark(hsl(204 38% 16%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(205 34% 14%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(205 12% 42%), hsl(200 8% 68%));
-    --text-subtle: light-dark(hsl(205 10% 56%), hsl(200 7% 55%));
-
-    --border: light-dark(hsl(198 30% 84%), hsl(200 12% 24%));
-    --focus-ring: light-dark(hsl(198 82% 35% / 0.22), hsl(198 75% 80% / 0.28));
-    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
-  }
-}

package/src/css/themes/petrol.css

@@ -1,64 +0,0 @@
-/* Petrol — desaturated petrol-blue primary with apricot secondary over cool
- * blue-tinted neutrals. Paired light/dark via light-dark(). The most
- * conventional of the bundled palettes: warm, highly legible, no semantic
- * hue collisions. */
-[data-theme="petrol"] {
-  color-scheme: light dark;
-
-  --primary: hsl(203 55% 30%);
-  --primary-fg: hsl(0 0% 98%);
-  --secondary: hsl(22 55% 47%);
-  --secondary-fg: hsl(0 0% 98%);
-  --success: hsl(155 45% 32%);
-  --success-fg: hsl(0 0% 98%);
-  --warning: hsl(38 70% 36%);
-  --warning-fg: hsl(0 0% 98%);
-  --danger: hsl(357 55% 45%);
-  --danger-fg: hsl(0 0% 98%);
-  --neutral: hsl(210 8% 43%);
-  --neutral-fg: hsl(0 0% 98%);
-
-  --surface: hsl(0 0% 100%);
-  --surface-raised: hsl(204 30% 98%);
-  --surface-subtle: hsl(204 25% 96%);
-  --surface-solid: hsl(207 25% 12%);
-
-  --text: hsl(207 25% 12%);
-  --text-muted: hsl(206 9% 42%);
-  --text-subtle: hsl(205 7% 57%);
-
-  --border: hsl(205 15% 87%);
-  --focus: var(--primary);
-  --focus-ring: hsl(203 55% 30% / 0.22);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="petrol"] {
-    --primary: light-dark(hsl(203 55% 30%), hsl(202 55% 72%));
-    --primary-fg: light-dark(hsl(0 0% 98%), hsl(204 40% 10%));
-    --secondary: light-dark(hsl(22 55% 47%), hsl(24 55% 70%));
-    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(24 35% 11%));
-    --success: light-dark(hsl(155 45% 32%), hsl(155 40% 60%));
-    --success-fg: light-dark(hsl(0 0% 98%), hsl(155 35% 8%));
-    --warning: light-dark(hsl(38 70% 36%), hsl(40 62% 63%));
-    --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%));
-    --danger: light-dark(hsl(357 55% 45%), hsl(357 58% 70%));
-    --danger-fg: light-dark(hsl(0 0% 98%), hsl(357 35% 10%));
-    --neutral: light-dark(hsl(210 8% 43%), hsl(208 10% 71%));
-    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(208 18% 10%));
-
-    --surface: light-dark(hsl(0 0% 100%), hsl(206 22% 9%));
-    --surface-raised: light-dark(hsl(204 30% 98%), hsl(206 19% 12%));
-    --surface-subtle: light-dark(hsl(204 25% 96%), hsl(206 15% 16%));
-    --surface-solid: light-dark(hsl(207 25% 12%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(207 25% 12%), hsl(205 12% 95%));
-    --text-muted: light-dark(hsl(206 9% 42%), hsl(205 8% 67%));
-    --text-subtle: light-dark(hsl(205 7% 57%), hsl(205 7% 53%));
-
-    --border: light-dark(hsl(205 15% 87%), hsl(206 12% 24%));
-    --focus-ring: light-dark(hsl(203 55% 30% / 0.22), hsl(202 55% 72% / 0.28));
-    --hover-overlay: light-dark(hsl(207 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(207 30% 10%), hsl(0 0% 0%));
-  }
-}

package/src/css/themes/spruce.css

@@ -1,64 +0,0 @@
-/* Spruce — deep spruce-green primary with copper secondary over sea-green
- * tinted neutrals. Paired light/dark via light-dark(). The green primary is
- * deliberately far from success in hue (174 vs 135) and saturation so the two
- * never read as the same signal; keep that split when adjusting either. */
-[data-theme="spruce"] {
-  color-scheme: light dark;
-
-  --primary: hsl(174 45% 24%);
-  --primary-fg: hsl(160 30% 97%);
-  --secondary: hsl(24 48% 42%);
-  --secondary-fg: hsl(0 0% 98%);
-  --success: hsl(135 38% 33%);
-  --success-fg: hsl(0 0% 98%);
-  --warning: hsl(42 72% 35%);
-  --warning-fg: hsl(0 0% 98%);
-  --danger: hsl(3 55% 44%);
-  --danger-fg: hsl(0 0% 98%);
-  --neutral: hsl(185 8% 40%);
-  --neutral-fg: hsl(0 0% 98%);
-
-  --surface: hsl(0 0% 100%);
-  --surface-raised: hsl(160 20% 98%);
-  --surface-subtle: hsl(168 18% 95%);
-  --surface-solid: hsl(185 25% 11%);
-
-  --text: hsl(185 25% 11%);
-  --text-muted: hsl(183 9% 40%);
-  --text-subtle: hsl(182 7% 55%);
-
-  --border: hsl(170 12% 86%);
-  --focus: var(--primary);
-  --focus-ring: hsl(174 45% 24% / 0.22);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="spruce"] {
-    --primary: light-dark(hsl(174 45% 24%), hsl(170 35% 66%));
-    --primary-fg: light-dark(hsl(160 30% 97%), hsl(174 40% 9%));
-    --secondary: light-dark(hsl(24 48% 42%), hsl(26 50% 70%));
-    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(26 35% 11%));
-    --success: light-dark(hsl(135 38% 33%), hsl(135 35% 60%));
-    --success-fg: light-dark(hsl(0 0% 98%), hsl(135 35% 8%));
-    --warning: light-dark(hsl(42 72% 35%), hsl(44 60% 62%));
-    --warning-fg: light-dark(hsl(0 0% 98%), hsl(42 35% 10%));
-    --danger: light-dark(hsl(3 55% 44%), hsl(3 58% 69%));
-    --danger-fg: light-dark(hsl(0 0% 98%), hsl(3 35% 10%));
-    --neutral: light-dark(hsl(185 8% 40%), hsl(183 10% 70%));
-    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(185 18% 10%));
-
-    --surface: light-dark(hsl(0 0% 100%), hsl(182 20% 8%));
-    --surface-raised: light-dark(hsl(160 20% 98%), hsl(182 17% 11%));
-    --surface-subtle: light-dark(hsl(168 18% 95%), hsl(182 14% 15%));
-    --surface-solid: light-dark(hsl(185 25% 11%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(185 25% 11%), hsl(175 12% 94%));
-    --text-muted: light-dark(hsl(183 9% 40%), hsl(180 8% 66%));
-    --text-subtle: light-dark(hsl(182 7% 55%), hsl(180 7% 52%));
-
-    --border: light-dark(hsl(170 12% 86%), hsl(182 12% 23%));
-    --focus-ring: light-dark(hsl(174 45% 24% / 0.22), hsl(170 35% 66% / 0.28));
-    --hover-overlay: light-dark(hsl(185 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(185 30% 10%), hsl(0 0% 0%));
-  }
-}