@ojiepermana/angular-theme 22.0.35 → 22.0.41

package/styles/css/color/teal.css

@@ -0,0 +1,52 @@
+/**
+ * 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%;
+    --layout-grid-line: 173 23% 82%;
+    --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%;
+    --layout-grid-line: 173 19% 23%;
+    --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,52 @@
+/**
+ * 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%;
+    --layout-grid-line: 258 26% 82%;
+    --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%;
+    --layout-grid-line: 258 22% 23%;
+    --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,52 @@
+/**
+ * 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%;
+    --layout-grid-line: 48 29% 82%;
+    --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%;
+    --layout-grid-line: 48 24% 23%;
+    --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,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 220 9% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 220 9% 22%;
+  }
+}

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,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 280 6% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 280 6% 22%;
+  }
+}

package/styles/css/neutral/mist.css

@@ -0,0 +1,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 200 14% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 200 14% 22%;
+  }
+}

package/styles/css/neutral/neutral.css

@@ -0,0 +1,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 0 0% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 0 0% 22%;
+  }
+}

package/styles/css/neutral/olive.css

@@ -0,0 +1,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 80 8% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 80 8% 22%;
+  }
+}

package/styles/css/neutral/slate.css

@@ -0,0 +1,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 215 16% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 215 16% 22%;
+  }
+}

package/styles/css/neutral/stone.css

@@ -0,0 +1,36 @@
+/**
+ * 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%;
+    --layout-grid-line: 30 6% 82%;
+  }
+
+  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%;
+    --layout-grid-line: 30 6% 22%;
+  }
+}

package/styles/css/neutral/taupe.css

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

package/styles/css/neutral/zinc.css

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

package/styles/css/radius/index.css

@@ -0,0 +1,29 @@
+/*
+ * Corner radius axis (theme-radius). Each preset sets the single --radius-base
+ * knob; the whole --radius-* scale + every rounded-* utility follows via the
+ * calc() chain (base/tailwind.css @theme inline). Runtime-switched by
+ * ThemeRadiusService via <html theme-radius>. 'md' = the 0.625rem default.
+ *
+ * Wrapped in @layer tokens to match base/tokens.css and the color/neutral
+ * presets; html[theme-radius='x'] (0,1,1) beats the :root default (0,1,0).
+ */
+@layer tokens {
+  html[theme-radius='none'] {
+    --radius-base: 0px;
+  }
+  html[theme-radius='sm'] {
+    --radius-base: 0.375rem;
+  }
+  html[theme-radius='md'] {
+    --radius-base: 0.625rem;
+  }
+  html[theme-radius='lg'] {
+    --radius-base: 0.875rem;
+  }
+  html[theme-radius='xl'] {
+    --radius-base: 1.25rem;
+  }
+  html[theme-radius='full'] {
+    --radius-base: 9999px;
+  }
+}

package/styles/css/space/index.css

@@ -0,0 +1,24 @@
+/*
+ * Spacing density axis (theme-space). Each preset sets the single --spacing-base
+ * knob; Tailwind derives --spacing from it (base/tailwind.css @theme inline), so
+ * every padding, margin, gap, width and height utility (and the --spacing-N
+ * scale) rescales at runtime. Switched by ThemeSpaceService via <html theme-space>.
+ * normal = the 0.25rem default (the Tailwind unit), so it is a no-op baseline.
+ *
+ * Wrapped in @layer tokens to match the radius/color/neutral presets;
+ * html[theme-space='x'] (0,1,1) beats the :root default (0,1,0).
+ */
+@layer tokens {
+  html[theme-space='compact'] {
+    --spacing-base: 0.2rem;
+  }
+  html[theme-space='normal'] {
+    --spacing-base: 0.25rem;
+  }
+  html[theme-space='relaxed'] {
+    --spacing-base: 0.28rem;
+  }
+  html[theme-space='spacious'] {
+    --spacing-base: 0.32rem;
+  }
+}