@ojiepermana/angular-theme 22.0.34 → 22.0.36

package/styles/css/color/pink.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: pink. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='pink'][data-mode='light'] {
+    --background: 330 23% 98%;
+    --foreground: 330 28% 16%;
+    --surface: 330 27% 95%;
+    --surface-foreground: 330 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 330 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 330 28% 16%;
+    --muted: 330 23% 95%;
+    --muted-foreground: 330 16% 40%;
+    --border: 330 23% 87%;
+    --input: 330 23% 87%;
+    --primary: 330 78% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 330 47% 94%;
+    --accent-foreground: 330 78% 32%;
+    --secondary: 330 31% 93%;
+    --secondary-foreground: 330 78% 28%;
+    --ring: 330 78% 48%;
+    --highlight: 330 78% 64%;
+  }
+
+  html[theme-color='pink'][data-mode='dark'] {
+    --background: 330 23% 8%;
+    --foreground: 330 12% 96%;
+    --surface: 330 20% 12%;
+    --surface-foreground: 330 12% 96%;
+    --card: 330 23% 9%;
+    --card-foreground: 330 12% 96%;
+    --popover: 330 23% 9%;
+    --popover-foreground: 330 12% 96%;
+    --muted: 330 20% 16%;
+    --muted-foreground: 330 16% 64%;
+    --border: 330 20% 18%;
+    --input: 330 20% 18%;
+    --primary: 330 78% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 330 39% 18%;
+    --accent-foreground: 330 62% 80%;
+    --secondary: 330 31% 18%;
+    --secondary-foreground: 330 55% 82%;
+    --ring: 330 78% 58%;
+    --highlight: 330 78% 58%;
+  }
+}

package/styles/css/color/purple.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: purple. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='purple'][data-mode='light'] {
+    --background: 271 24% 98%;
+    --foreground: 271 28% 16%;
+    --surface: 271 28% 95%;
+    --surface-foreground: 271 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 271 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 271 28% 16%;
+    --muted: 271 24% 95%;
+    --muted-foreground: 271 16% 40%;
+    --border: 271 24% 87%;
+    --input: 271 24% 87%;
+    --primary: 271 81% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 271 49% 94%;
+    --accent-foreground: 271 81% 32%;
+    --secondary: 271 32% 93%;
+    --secondary-foreground: 271 81% 28%;
+    --ring: 271 81% 48%;
+    --highlight: 271 81% 64%;
+  }
+
+  html[theme-color='purple'][data-mode='dark'] {
+    --background: 271 24% 8%;
+    --foreground: 271 12% 96%;
+    --surface: 271 20% 12%;
+    --surface-foreground: 271 12% 96%;
+    --card: 271 24% 9%;
+    --card-foreground: 271 12% 96%;
+    --popover: 271 24% 9%;
+    --popover-foreground: 271 12% 96%;
+    --muted: 271 20% 16%;
+    --muted-foreground: 271 16% 64%;
+    --border: 271 20% 18%;
+    --input: 271 20% 18%;
+    --primary: 271 81% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 271 41% 18%;
+    --accent-foreground: 271 65% 80%;
+    --secondary: 271 32% 18%;
+    --secondary-foreground: 271 57% 82%;
+    --ring: 271 81% 58%;
+    --highlight: 271 81% 58%;
+  }
+}

package/styles/css/color/red.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: red. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='red'][data-mode='light'] {
+    --background: 0 22% 98%;
+    --foreground: 0 26% 16%;
+    --surface: 0 25% 95%;
+    --surface-foreground: 0 26% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 26% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 26% 16%;
+    --muted: 0 22% 95%;
+    --muted-foreground: 0 14% 40%;
+    --border: 0 22% 87%;
+    --input: 0 22% 87%;
+    --primary: 0 72% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 0 43% 94%;
+    --accent-foreground: 0 72% 32%;
+    --secondary: 0 29% 93%;
+    --secondary-foreground: 0 72% 28%;
+    --ring: 0 72% 48%;
+    --highlight: 0 72% 64%;
+  }
+
+  html[theme-color='red'][data-mode='dark'] {
+    --background: 0 22% 8%;
+    --foreground: 0 11% 96%;
+    --surface: 0 18% 12%;
+    --surface-foreground: 0 11% 96%;
+    --card: 0 22% 9%;
+    --card-foreground: 0 11% 96%;
+    --popover: 0 22% 9%;
+    --popover-foreground: 0 11% 96%;
+    --muted: 0 18% 16%;
+    --muted-foreground: 0 14% 64%;
+    --border: 0 18% 18%;
+    --input: 0 18% 18%;
+    --primary: 0 72% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 0 36% 18%;
+    --accent-foreground: 0 58% 80%;
+    --secondary: 0 29% 18%;
+    --secondary-foreground: 0 50% 82%;
+    --ring: 0 72% 58%;
+    --highlight: 0 72% 58%;
+  }
+}

package/styles/css/color/rose.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: rose. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='rose'][data-mode='light'] {
+    --background: 349 25% 98%;
+    --foreground: 349 29% 16%;
+    --surface: 349 29% 95%;
+    --surface-foreground: 349 29% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 349 29% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 349 29% 16%;
+    --muted: 349 25% 95%;
+    --muted-foreground: 349 17% 40%;
+    --border: 349 25% 87%;
+    --input: 349 25% 87%;
+    --primary: 349 84% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 349 50% 94%;
+    --accent-foreground: 349 84% 32%;
+    --secondary: 349 34% 93%;
+    --secondary-foreground: 349 84% 28%;
+    --ring: 349 84% 48%;
+    --highlight: 349 84% 64%;
+  }
+
+  html[theme-color='rose'][data-mode='dark'] {
+    --background: 349 25% 8%;
+    --foreground: 349 13% 96%;
+    --surface: 349 21% 12%;
+    --surface-foreground: 349 13% 96%;
+    --card: 349 25% 9%;
+    --card-foreground: 349 13% 96%;
+    --popover: 349 25% 9%;
+    --popover-foreground: 349 13% 96%;
+    --muted: 349 21% 16%;
+    --muted-foreground: 349 17% 64%;
+    --border: 349 21% 18%;
+    --input: 349 21% 18%;
+    --primary: 349 84% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 349 42% 18%;
+    --accent-foreground: 349 67% 80%;
+    --secondary: 349 34% 18%;
+    --secondary-foreground: 349 59% 82%;
+    --ring: 349 84% 58%;
+    --highlight: 349 84% 58%;
+  }
+}

package/styles/css/color/sky.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: sky. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='sky'][data-mode='light'] {
+    --background: 199 27% 98%;
+    --foreground: 199 30% 16%;
+    --surface: 199 31% 95%;
+    --surface-foreground: 199 30% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 199 30% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 199 30% 16%;
+    --muted: 199 27% 95%;
+    --muted-foreground: 199 18% 40%;
+    --border: 199 27% 87%;
+    --input: 199 27% 87%;
+    --primary: 199 89% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 199 53% 94%;
+    --accent-foreground: 199 89% 32%;
+    --secondary: 199 36% 93%;
+    --secondary-foreground: 199 89% 28%;
+    --ring: 199 89% 48%;
+    --highlight: 199 89% 64%;
+  }
+
+  html[theme-color='sky'][data-mode='dark'] {
+    --background: 199 27% 8%;
+    --foreground: 199 13% 96%;
+    --surface: 199 22% 12%;
+    --surface-foreground: 199 13% 96%;
+    --card: 199 27% 9%;
+    --card-foreground: 199 13% 96%;
+    --popover: 199 27% 9%;
+    --popover-foreground: 199 13% 96%;
+    --muted: 199 22% 16%;
+    --muted-foreground: 199 18% 64%;
+    --border: 199 22% 18%;
+    --input: 199 22% 18%;
+    --primary: 199 89% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 199 45% 18%;
+    --accent-foreground: 199 71% 80%;
+    --secondary: 199 36% 18%;
+    --secondary-foreground: 199 62% 82%;
+    --ring: 199 89% 58%;
+    --highlight: 199 89% 58%;
+  }
+}

package/styles/css/color/teal.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: teal. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='teal'][data-mode='light'] {
+    --background: 173 23% 98%;
+    --foreground: 173 27% 16%;
+    --surface: 173 26% 95%;
+    --surface-foreground: 173 27% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 173 27% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 173 27% 16%;
+    --muted: 173 23% 95%;
+    --muted-foreground: 173 15% 40%;
+    --border: 173 23% 87%;
+    --input: 173 23% 87%;
+    --primary: 173 75% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 173 45% 94%;
+    --accent-foreground: 173 75% 32%;
+    --secondary: 173 30% 93%;
+    --secondary-foreground: 173 75% 28%;
+    --ring: 173 75% 48%;
+    --highlight: 173 75% 64%;
+  }
+
+  html[theme-color='teal'][data-mode='dark'] {
+    --background: 173 23% 8%;
+    --foreground: 173 11% 96%;
+    --surface: 173 19% 12%;
+    --surface-foreground: 173 11% 96%;
+    --card: 173 23% 9%;
+    --card-foreground: 173 11% 96%;
+    --popover: 173 23% 9%;
+    --popover-foreground: 173 11% 96%;
+    --muted: 173 19% 16%;
+    --muted-foreground: 173 15% 64%;
+    --border: 173 19% 18%;
+    --input: 173 19% 18%;
+    --primary: 173 75% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 173 38% 18%;
+    --accent-foreground: 173 60% 80%;
+    --secondary: 173 30% 18%;
+    --secondary-foreground: 173 53% 82%;
+    --ring: 173 75% 58%;
+    --highlight: 173 75% 58%;
+  }
+}

package/styles/css/color/violet.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: violet. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='violet'][data-mode='light'] {
+    --background: 258 26% 98%;
+    --foreground: 258 30% 16%;
+    --surface: 258 30% 95%;
+    --surface-foreground: 258 30% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 258 30% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 258 30% 16%;
+    --muted: 258 26% 95%;
+    --muted-foreground: 258 17% 40%;
+    --border: 258 26% 87%;
+    --input: 258 26% 87%;
+    --primary: 258 86% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 258 52% 94%;
+    --accent-foreground: 258 86% 32%;
+    --secondary: 258 34% 93%;
+    --secondary-foreground: 258 86% 28%;
+    --ring: 258 86% 48%;
+    --highlight: 258 86% 64%;
+  }
+
+  html[theme-color='violet'][data-mode='dark'] {
+    --background: 258 26% 8%;
+    --foreground: 258 13% 96%;
+    --surface: 258 22% 12%;
+    --surface-foreground: 258 13% 96%;
+    --card: 258 26% 9%;
+    --card-foreground: 258 13% 96%;
+    --popover: 258 26% 9%;
+    --popover-foreground: 258 13% 96%;
+    --muted: 258 22% 16%;
+    --muted-foreground: 258 17% 64%;
+    --border: 258 22% 18%;
+    --input: 258 22% 18%;
+    --primary: 258 86% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 258 43% 18%;
+    --accent-foreground: 258 69% 80%;
+    --secondary: 258 34% 18%;
+    --secondary-foreground: 258 60% 82%;
+    --ring: 258 86% 58%;
+    --highlight: 258 86% 58%;
+  }
+}

package/styles/css/color/yellow.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: yellow. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='yellow'][data-mode='light'] {
+    --background: 48 29% 98%;
+    --foreground: 48 32% 16%;
+    --surface: 48 34% 95%;
+    --surface-foreground: 48 32% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 48 32% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 48 32% 16%;
+    --muted: 48 29% 95%;
+    --muted-foreground: 48 19% 40%;
+    --border: 48 29% 87%;
+    --input: 48 29% 87%;
+    --primary: 48 96% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 48 58% 94%;
+    --accent-foreground: 48 96% 32%;
+    --secondary: 48 38% 93%;
+    --secondary-foreground: 48 96% 28%;
+    --ring: 48 96% 48%;
+    --highlight: 48 96% 64%;
+  }
+
+  html[theme-color='yellow'][data-mode='dark'] {
+    --background: 48 29% 8%;
+    --foreground: 48 14% 96%;
+    --surface: 48 24% 12%;
+    --surface-foreground: 48 14% 96%;
+    --card: 48 29% 9%;
+    --card-foreground: 48 14% 96%;
+    --popover: 48 29% 9%;
+    --popover-foreground: 48 14% 96%;
+    --muted: 48 24% 16%;
+    --muted-foreground: 48 19% 64%;
+    --border: 48 24% 18%;
+    --input: 48 24% 18%;
+    --primary: 48 96% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 48 48% 18%;
+    --accent-foreground: 48 77% 80%;
+    --secondary: 48 38% 18%;
+    --secondary-foreground: 48 67% 82%;
+    --ring: 48 96% 58%;
+    --highlight: 48 96% 58%;
+  }
+}

package/styles/css/index.css

@@ -1,9 +1,18 @@
 /*
- * Default theme stylesheet: base tokens/components only.
+ * Default theme stylesheet: core base theme + all runtime theme axes.
  *
- * CSS musiman TIDAK lagi di-bundle di sini (±36 kB). Musim aktif dimuat
- * runtime oleh ThemeSeasonService bila `seasonalCssUrl` dikonfigurasi pada
- * provideUiTheme(), atau impor manual './seasonal/<season>/package.css'
- * (semua musim sekaligus: './seasonal/index.css').
+ *   - base/        core tokens, light/dark, components (all axes' 'base'/default)
+ *   - color/       accent palettes (theme-color) — full tinted palette per color
+ *   - neutral/     gray families (theme-neutral) — imported AFTER color so it wins
+ *                  the shared neutral tokens when both axes are set
+ *   - radius/      corner radius presets (theme-radius) — drive --radius-base
+ *   - space/       spacing density presets (theme-space) — drive --spacing-base
+ *
+ * Axes are runtime-switched via <html theme-color|theme-neutral|theme-radius|
+ * theme-space> by their services; --brand is set by ThemeBrandService.
  */
-@import './seasonal/base/package.css';
+@import './base/package.css';
+@import './color/index.css';
+@import './neutral/index.css';
+@import './radius/index.css';
+@import './space/index.css';

package/styles/css/neutral/gray.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: gray. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='gray'][data-mode='light'] {
+    --background: 220 5% 98%;
+    --foreground: 220 9% 12%;
+    --surface: 220 9% 96%;
+    --surface-foreground: 220 9% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 9% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 9% 12%;
+    --muted: 220 9% 95%;
+    --muted-foreground: 220 9% 42%;
+    --border: 220 9% 88%;
+    --input: 220 9% 88%;
+  }
+
+  html[theme-neutral='gray'][data-mode='dark'] {
+    --background: 220 9% 7%;
+    --foreground: 220 5% 96%;
+    --surface: 220 9% 11%;
+    --surface-foreground: 220 5% 96%;
+    --card: 220 9% 8%;
+    --card-foreground: 220 5% 96%;
+    --popover: 220 9% 8%;
+    --popover-foreground: 220 5% 96%;
+    --muted: 220 9% 15%;
+    --muted-foreground: 220 6% 64%;
+    --border: 220 9% 17%;
+    --input: 220 9% 17%;
+  }
+}

package/styles/css/neutral/index.css

@@ -0,0 +1,11 @@
+/* Neutral families (theme-neutral). Imported AFTER accent so it wins the gray
+ * family at equal specificity. base = core theme (no file). */
+@import './slate.css';
+@import './gray.css';
+@import './zinc.css';
+@import './neutral.css';
+@import './stone.css';
+@import './mauve.css';
+@import './olive.css';
+@import './mist.css';
+@import './taupe.css';

package/styles/css/neutral/mauve.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: mauve. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='mauve'][data-mode='light'] {
+    --background: 280 4% 98%;
+    --foreground: 280 6% 12%;
+    --surface: 280 6% 96%;
+    --surface-foreground: 280 6% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 280 6% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 280 6% 12%;
+    --muted: 280 6% 95%;
+    --muted-foreground: 280 6% 42%;
+    --border: 280 6% 88%;
+    --input: 280 6% 88%;
+  }
+
+  html[theme-neutral='mauve'][data-mode='dark'] {
+    --background: 280 6% 7%;
+    --foreground: 280 3% 96%;
+    --surface: 280 6% 11%;
+    --surface-foreground: 280 3% 96%;
+    --card: 280 6% 8%;
+    --card-foreground: 280 3% 96%;
+    --popover: 280 6% 8%;
+    --popover-foreground: 280 3% 96%;
+    --muted: 280 6% 15%;
+    --muted-foreground: 280 4% 64%;
+    --border: 280 6% 17%;
+    --input: 280 6% 17%;
+  }
+}

package/styles/css/neutral/mist.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: mist. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='mist'][data-mode='light'] {
+    --background: 200 8% 98%;
+    --foreground: 200 14% 12%;
+    --surface: 200 14% 96%;
+    --surface-foreground: 200 14% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 200 14% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 200 14% 12%;
+    --muted: 200 14% 95%;
+    --muted-foreground: 200 14% 42%;
+    --border: 200 14% 88%;
+    --input: 200 14% 88%;
+  }
+
+  html[theme-neutral='mist'][data-mode='dark'] {
+    --background: 200 14% 7%;
+    --foreground: 200 7% 96%;
+    --surface: 200 14% 11%;
+    --surface-foreground: 200 7% 96%;
+    --card: 200 14% 8%;
+    --card-foreground: 200 7% 96%;
+    --popover: 200 14% 8%;
+    --popover-foreground: 200 7% 96%;
+    --muted: 200 14% 15%;
+    --muted-foreground: 200 10% 64%;
+    --border: 200 14% 17%;
+    --input: 200 14% 17%;
+  }
+}

package/styles/css/neutral/neutral.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: neutral. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='neutral'][data-mode='light'] {
+    --background: 0 0% 98%;
+    --foreground: 0 0% 12%;
+    --surface: 0 0% 96%;
+    --surface-foreground: 0 0% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 12%;
+    --muted: 0 0% 95%;
+    --muted-foreground: 0 0% 42%;
+    --border: 0 0% 88%;
+    --input: 0 0% 88%;
+  }
+
+  html[theme-neutral='neutral'][data-mode='dark'] {
+    --background: 0 0% 7%;
+    --foreground: 0 0% 96%;
+    --surface: 0 0% 11%;
+    --surface-foreground: 0 0% 96%;
+    --card: 0 0% 8%;
+    --card-foreground: 0 0% 96%;
+    --popover: 0 0% 8%;
+    --popover-foreground: 0 0% 96%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 0 0% 64%;
+    --border: 0 0% 17%;
+    --input: 0 0% 17%;
+  }
+}

package/styles/css/neutral/olive.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: olive. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='olive'][data-mode='light'] {
+    --background: 80 5% 98%;
+    --foreground: 80 8% 12%;
+    --surface: 80 8% 96%;
+    --surface-foreground: 80 8% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 80 8% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 80 8% 12%;
+    --muted: 80 8% 95%;
+    --muted-foreground: 80 8% 42%;
+    --border: 80 8% 88%;
+    --input: 80 8% 88%;
+  }
+
+  html[theme-neutral='olive'][data-mode='dark'] {
+    --background: 80 8% 7%;
+    --foreground: 80 4% 96%;
+    --surface: 80 8% 11%;
+    --surface-foreground: 80 4% 96%;
+    --card: 80 8% 8%;
+    --card-foreground: 80 4% 96%;
+    --popover: 80 8% 8%;
+    --popover-foreground: 80 4% 96%;
+    --muted: 80 8% 15%;
+    --muted-foreground: 80 6% 64%;
+    --border: 80 8% 17%;
+    --input: 80 8% 17%;
+  }
+}

package/styles/css/neutral/slate.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: slate. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='slate'][data-mode='light'] {
+    --background: 215 10% 98%;
+    --foreground: 215 16% 12%;
+    --surface: 215 16% 96%;
+    --surface-foreground: 215 16% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 215 16% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 215 16% 12%;
+    --muted: 215 16% 95%;
+    --muted-foreground: 215 16% 42%;
+    --border: 215 16% 88%;
+    --input: 215 16% 88%;
+  }
+
+  html[theme-neutral='slate'][data-mode='dark'] {
+    --background: 215 16% 7%;
+    --foreground: 215 8% 96%;
+    --surface: 215 16% 11%;
+    --surface-foreground: 215 8% 96%;
+    --card: 215 16% 8%;
+    --card-foreground: 215 8% 96%;
+    --popover: 215 16% 8%;
+    --popover-foreground: 215 8% 96%;
+    --muted: 215 16% 15%;
+    --muted-foreground: 215 11% 64%;
+    --border: 215 16% 17%;
+    --input: 215 16% 17%;
+  }
+}

package/styles/css/neutral/stone.css

@@ -0,0 +1,34 @@
+/**
+ * Neutral theme: stone. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='stone'][data-mode='light'] {
+    --background: 30 4% 98%;
+    --foreground: 30 6% 12%;
+    --surface: 30 6% 96%;
+    --surface-foreground: 30 6% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 30 6% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 30 6% 12%;
+    --muted: 30 6% 95%;
+    --muted-foreground: 30 6% 42%;
+    --border: 30 6% 88%;
+    --input: 30 6% 88%;
+  }
+
+  html[theme-neutral='stone'][data-mode='dark'] {
+    --background: 30 6% 7%;
+    --foreground: 30 3% 96%;
+    --surface: 30 6% 11%;
+    --surface-foreground: 30 3% 96%;
+    --card: 30 6% 8%;
+    --card-foreground: 30 3% 96%;
+    --popover: 30 6% 8%;
+    --popover-foreground: 30 3% 96%;
+    --muted: 30 6% 15%;
+    --muted-foreground: 30 4% 64%;
+    --border: 30 6% 17%;
+    --input: 30 6% 17%;
+  }
+}