actual-css 0.3.1 → 0.4.1

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%));
-  }
-}

package/src/css/themes/square.css

@@ -1,65 +0,0 @@
-[data-theme="square"] {
-  color-scheme: light dark;
-
-  --primary: hsl(220 90% 56%);
-  --primary-fg: white;
-  --secondary: hsl(270 60% 56%);
-  --secondary-fg: white;
-  --success: hsl(145 60% 32%);
-  --success-fg: white;
-  --warning: hsl(38 92% 50%);
-  --warning-fg: hsl(35 30% 12%);
-  --danger: hsl(0 75% 51%);
-  --danger-fg: white;
-  --neutral: hsl(220 10% 42%);
-  --neutral-fg: white;
-
-  --surface: hsl(0 0% 100%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(220 20% 96%);
-  --surface-solid: hsl(222 22% 12%);
-
-  --text: hsl(222 22% 12%);
-  --text-muted: hsl(220 10% 42%);
-  --text-subtle: hsl(220 8% 55%);
-
-  --border: hsl(220 15% 88%);
-  --focus: var(--primary);
-  --focus-ring: hsl(220 90% 56% / 0.22);
-  --hover-overlay: hsl(220 30% 10% / 0.04);
-
-  --radius: 0;
-  --radius-sm: 0;
-  --radius-lg: 0;
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="square"] {
-    --primary: light-dark(hsl(220 90% 56%), hsl(220 75% 80%));
-    --primary-fg: light-dark(white, hsl(220 30% 12%));
-    --secondary: light-dark(hsl(270 60% 56%), hsl(270 68% 80%));
-    --secondary-fg: light-dark(white, hsl(270 30% 12%));
-    --success: light-dark(hsl(145 60% 32%), hsl(145 68% 80%));
-    --success-fg: light-dark(white, hsl(145 30% 12%));
-    --warning: light-dark(hsl(38 92% 50%), hsl(38 75% 80%));
-    --warning-fg: light-dark(hsl(35 30% 12%), hsl(38 30% 12%));
-    --danger: light-dark(hsl(0 75% 51%), hsl(0 75% 80%));
-    --danger-fg: light-dark(white, hsl(0 30% 12%));
-    --neutral: light-dark(hsl(220 10% 42%), hsl(220 18% 80%));
-    --neutral-fg: light-dark(white, hsl(220 30% 12%));
-
-    --surface: light-dark(hsl(0 0% 100%), hsl(222 18% 8%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(222 16% 11%));
-    --surface-subtle: light-dark(hsl(220 20% 96%), hsl(222 14% 16%));
-    --surface-solid: light-dark(hsl(222 22% 12%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(222 22% 12%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(220 10% 42%), hsl(222 8% 68%));
-    --text-subtle: light-dark(hsl(220 8% 55%), hsl(222 7% 55%));
-
-    --border: light-dark(hsl(220 15% 88%), hsl(222 12% 24%));
-    --focus-ring: light-dark(hsl(220 90% 56% / 0.22), hsl(220 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/sunset.css

@@ -1,66 +0,0 @@
-[data-theme="sunset"] {
-  color-scheme: light dark;
-
-  --primary: hsl(16 84% 43%);
-  --primary-fg: white;
-  --secondary: hsl(330 60% 52%);
-  --secondary-fg: white;
-  --success: hsl(142 52% 34%);
-  --success-fg: white;
-  --warning: hsl(42 94% 52%);
-  --warning-fg: hsl(30 35% 12%);
-  --danger: hsl(358 72% 52%);
-  --danger-fg: white;
-  --neutral: hsl(24 12% 38%);
-  --neutral-fg: white;
-
-  --surface: hsl(34 70% 97%);
-  --surface-raised: hsl(30 80% 99%);
-  --surface-subtle: hsl(28 62% 92%);
-  --surface-solid: hsl(18 34% 18%);
-
-  --text: hsl(20 34% 14%);
-  --text-muted: hsl(20 12% 42%);
-  --text-subtle: hsl(20 10% 55%);
-
-  --border: hsl(25 38% 84%);
-  --focus: var(--primary);
-  --focus-ring: hsl(16 84% 43% / 0.22);
-
-  /* Warm chrome — demonstrates selection and shadow-color theming. The
-     selection pair rides the intent tokens, so it adapts to dark for free. */
-  --selection-bg: var(--secondary);
-  --selection-fg: var(--secondary-fg);
-  --shadow-color: hsl(20 60% 12%);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="sunset"] {
-    --primary: light-dark(hsl(16 84% 43%), hsl(16 75% 80%));
-    --primary-fg: light-dark(white, hsl(16 30% 12%));
-    --secondary: light-dark(hsl(330 60% 52%), hsl(330 68% 80%));
-    --secondary-fg: light-dark(white, hsl(330 30% 12%));
-    --success: light-dark(hsl(142 52% 34%), hsl(142 60% 80%));
-    --success-fg: light-dark(white, hsl(142 30% 12%));
-    --warning: light-dark(hsl(42 94% 52%), hsl(42 75% 80%));
-    --warning-fg: light-dark(hsl(30 35% 12%), hsl(42 30% 12%));
-    --danger: light-dark(hsl(358 72% 52%), hsl(358 75% 80%));
-    --danger-fg: light-dark(white, hsl(358 30% 12%));
-    --neutral: light-dark(hsl(24 12% 38%), hsl(24 20% 80%));
-    --neutral-fg: light-dark(white, hsl(24 30% 12%));
-
-    --surface: light-dark(hsl(34 70% 97%), hsl(20 18% 8%));
-    --surface-raised: light-dark(hsl(30 80% 99%), hsl(20 16% 11%));
-    --surface-subtle: light-dark(hsl(28 62% 92%), hsl(20 14% 16%));
-    --surface-solid: light-dark(hsl(18 34% 18%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(20 34% 14%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(20 12% 42%), hsl(20 8% 68%));
-    --text-subtle: light-dark(hsl(20 10% 55%), hsl(20 7% 55%));
-
-    --border: light-dark(hsl(25 38% 84%), hsl(20 12% 24%));
-    --focus-ring: light-dark(hsl(16 84% 43% / 0.22), hsl(16 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(20 60% 12%), hsl(20 40% 2%));
-  }
-}