@ojiepermana/angular 22.1.11 → 22.1.13

package/theme/styles/css/color/sky.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: sky. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='sky'][data-mode='light'] {
+    --foreground: 199 30% 16%;
+    --surface: 199 31% 95%;
+    --surface-foreground: 199 30% 16%;
+    --card: 199 52% 99%;
+    --card-foreground: 199 30% 16%;
+    --popover: 199 52% 99%;
+    --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% 12%;
+    --accent: 199 53% 94%;
+    --accent-foreground: 199 89% 32%;
+    --secondary: 199 36% 93%;
+    --secondary-foreground: 199 89% 28%;
+    --ring: 199 89% 46%;
+    --highlight: 199 89% 64%;
+  }
+
+  html[theme-color='sky'][data-mode='dark'] {
+    --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% 10%;
+    --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%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='sky']:not([data-mode='light']) {
+      --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% 10%;
+      --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/theme/styles/css/color/teal.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: teal. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='teal'][data-mode='light'] {
+    --foreground: 173 27% 16%;
+    --surface: 173 26% 95%;
+    --surface-foreground: 173 27% 16%;
+    --card: 173 52% 99%;
+    --card-foreground: 173 27% 16%;
+    --popover: 173 52% 99%;
+    --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% 12%;
+    --accent: 173 45% 94%;
+    --accent-foreground: 173 75% 28%;
+    --secondary: 173 30% 93%;
+    --secondary-foreground: 173 75% 27%;
+    --ring: 173 75% 37%;
+    --highlight: 173 75% 64%;
+  }
+
+  html[theme-color='teal'][data-mode='dark'] {
+    --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% 10%;
+    --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%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='teal']:not([data-mode='light']) {
+      --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% 10%;
+      --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/theme/styles/css/color/violet.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: violet. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='violet'][data-mode='light'] {
+    --foreground: 258 30% 16%;
+    --surface: 258 30% 95%;
+    --surface-foreground: 258 30% 16%;
+    --card: 258 52% 99%;
+    --card-foreground: 258 30% 16%;
+    --popover: 258 52% 99%;
+    --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'] {
+    --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%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='violet']:not([data-mode='light']) {
+      --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/theme/styles/css/color/yellow.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: yellow. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='yellow'][data-mode='light'] {
+    --foreground: 48 32% 16%;
+    --surface: 48 34% 95%;
+    --surface-foreground: 48 32% 16%;
+    --card: 48 52% 99%;
+    --card-foreground: 48 32% 16%;
+    --popover: 48 52% 99%;
+    --popover-foreground: 48 32% 16%;
+    --muted: 48 29% 95%;
+    --muted-foreground: 48 19% 39%;
+    --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% 27%;
+    --secondary: 48 38% 93%;
+    --secondary-foreground: 48 96% 26%;
+    --ring: 48 96% 35%;
+    --highlight: 48 96% 64%;
+  }
+
+  html[theme-color='yellow'][data-mode='dark'] {
+    --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%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='yellow']:not([data-mode='light']) {
+      --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/theme/styles/css/index.css

@@ -0,0 +1,18 @@
+/*
+ * Default theme stylesheet: core base theme + all runtime theme axes.
+ *
+ *   - 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 './base/package.css';
+@import './color/index.css';
+@import './neutral/index.css';
+@import './radius/index.css';
+@import './space/index.css';

package/theme/styles/css/neutral/gray.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: gray. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='gray'][data-mode='light'] {
+    --layout-canvas: 220 23% 95%;
+    --foreground: 220 9% 12%;
+    --surface: 220 9% 96%;
+    --surface-foreground: 220 9% 12%;
+    --card: 220 35% 99%;
+    --card-foreground: 220 9% 12%;
+    --popover: 220 35% 99%;
+    --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%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 220 23%;
+    --layout-pattern-node: 220 23% 32%;
+  }
+
+  html[theme-neutral='gray'][data-mode='dark'] {
+    --layout-canvas: 220 9% 15%;
+    --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%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 220 18%;
+    --layout-pattern-node: 220 18% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='gray']:not([data-mode='light']) {
+      --layout-canvas: 220 9% 15%;
+      --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%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 220 18%;
+      --layout-pattern-node: 220 18% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/index.css

@@ -0,0 +1,11 @@
+/* Neutral families (theme-neutral). Imported AFTER accent so the gray family
+ * and surface-pattern hue win 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/theme/styles/css/neutral/mauve.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: mauve. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='mauve'][data-mode='light'] {
+    --layout-canvas: 280 15% 95%;
+    --foreground: 280 6% 12%;
+    --surface: 280 6% 96%;
+    --surface-foreground: 280 6% 12%;
+    --card: 280 27% 99%;
+    --card-foreground: 280 6% 12%;
+    --popover: 280 27% 99%;
+    --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%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 280 15%;
+    --layout-pattern-node: 280 15% 32%;
+  }
+
+  html[theme-neutral='mauve'][data-mode='dark'] {
+    --layout-canvas: 280 6% 15%;
+    --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%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 280 12%;
+    --layout-pattern-node: 280 12% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='mauve']:not([data-mode='light']) {
+      --layout-canvas: 280 6% 15%;
+      --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%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 280 12%;
+      --layout-pattern-node: 280 12% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/mist.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: mist. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='mist'][data-mode='light'] {
+    --layout-canvas: 200 35% 95%;
+    --foreground: 200 14% 12%;
+    --surface: 200 14% 96%;
+    --surface-foreground: 200 14% 12%;
+    --card: 200 47% 99%;
+    --card-foreground: 200 14% 12%;
+    --popover: 200 47% 99%;
+    --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%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 200 35%;
+    --layout-pattern-node: 200 35% 32%;
+  }
+
+  html[theme-neutral='mist'][data-mode='dark'] {
+    --layout-canvas: 200 14% 15%;
+    --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%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 200 28%;
+    --layout-pattern-node: 200 28% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='mist']:not([data-mode='light']) {
+      --layout-canvas: 200 14% 15%;
+      --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%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 200 28%;
+      --layout-pattern-node: 200 28% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/neutral.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: neutral. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='neutral'][data-mode='light'] {
+    --layout-canvas: 0 0% 95%;
+    --foreground: 0 0% 12%;
+    --surface: 0 0% 96%;
+    --surface-foreground: 0 0% 12%;
+    --card: 0 0% 99%;
+    --card-foreground: 0 0% 12%;
+    --popover: 0 0% 99%;
+    --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%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 0 0%;
+    --layout-pattern-node: 0 0% 32%;
+  }
+
+  html[theme-neutral='neutral'][data-mode='dark'] {
+    --layout-canvas: 0 0% 15%;
+    --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%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 0 0%;
+    --layout-pattern-node: 0 0% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='neutral']:not([data-mode='light']) {
+      --layout-canvas: 0 0% 15%;
+      --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%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 0 0%;
+      --layout-pattern-node: 0 0% 78%;
+    }
+  }
+}

package/theme/styles/css/neutral/olive.css

@@ -0,0 +1,63 @@
+/**
+ * Neutral theme: olive. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-neutral='olive'][data-mode='light'] {
+    --layout-canvas: 80 20% 95%;
+    --foreground: 80 8% 12%;
+    --surface: 80 8% 96%;
+    --surface-foreground: 80 8% 12%;
+    --card: 80 32% 99%;
+    --card-foreground: 80 8% 12%;
+    --popover: 80 32% 99%;
+    --popover-foreground: 80 8% 12%;
+    --muted: 80 8% 95%;
+    --muted-foreground: 80 8% 41%;
+    --border: 80 8% 88%;
+    --input: 80 8% 88%;
+    --layout-grid-line: 80 8% 82%;
+    --layout-grid-l: 82%;
+    --layout-pattern-hs: 80 20%;
+    --layout-pattern-node: 80 20% 32%;
+  }
+
+  html[theme-neutral='olive'][data-mode='dark'] {
+    --layout-canvas: 80 8% 15%;
+    --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%;
+    --layout-grid-l: 22%;
+    --layout-pattern-hs: 80 16%;
+    --layout-pattern-node: 80 16% 78%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-neutral='olive']:not([data-mode='light']) {
+      --layout-canvas: 80 8% 15%;
+      --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%;
+      --layout-grid-l: 22%;
+      --layout-pattern-hs: 80 16%;
+      --layout-pattern-node: 80 16% 78%;
+    }
+  }
+}