@ojiepermana/angular 22.1.11 → 22.1.13

package/theme/styles/css/color/fuchsia.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: fuchsia. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='fuchsia'][data-mode='light'] {
+    --foreground: 292 28% 16%;
+    --surface: 292 28% 95%;
+    --surface-foreground: 292 28% 16%;
+    --card: 292 52% 99%;
+    --card-foreground: 292 28% 16%;
+    --popover: 292 52% 99%;
+    --popover-foreground: 292 28% 16%;
+    --muted: 292 24% 95%;
+    --muted-foreground: 292 16% 40%;
+    --border: 292 24% 87%;
+    --input: 292 24% 87%;
+    --primary: 292 80% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 292 48% 94%;
+    --accent-foreground: 292 80% 32%;
+    --secondary: 292 32% 93%;
+    --secondary-foreground: 292 80% 28%;
+    --ring: 292 80% 48%;
+    --highlight: 292 80% 64%;
+  }
+
+  html[theme-color='fuchsia'][data-mode='dark'] {
+    --foreground: 292 12% 96%;
+    --surface: 292 20% 12%;
+    --surface-foreground: 292 12% 96%;
+    --card: 292 24% 9%;
+    --card-foreground: 292 12% 96%;
+    --popover: 292 24% 9%;
+    --popover-foreground: 292 12% 96%;
+    --muted: 292 20% 16%;
+    --muted-foreground: 292 16% 64%;
+    --border: 292 20% 18%;
+    --input: 292 20% 18%;
+    --primary: 292 80% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 292 40% 18%;
+    --accent-foreground: 292 64% 80%;
+    --secondary: 292 32% 18%;
+    --secondary-foreground: 292 56% 82%;
+    --ring: 292 80% 58%;
+    --highlight: 292 80% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='fuchsia']:not([data-mode='light']) {
+      --foreground: 292 12% 96%;
+      --surface: 292 20% 12%;
+      --surface-foreground: 292 12% 96%;
+      --card: 292 24% 9%;
+      --card-foreground: 292 12% 96%;
+      --popover: 292 24% 9%;
+      --popover-foreground: 292 12% 96%;
+      --muted: 292 20% 16%;
+      --muted-foreground: 292 16% 64%;
+      --border: 292 20% 18%;
+      --input: 292 20% 18%;
+      --primary: 292 80% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 292 40% 18%;
+      --accent-foreground: 292 64% 80%;
+      --secondary: 292 32% 18%;
+      --secondary-foreground: 292 56% 82%;
+      --ring: 292 80% 58%;
+      --highlight: 292 80% 58%;
+    }
+  }
+}

package/theme/styles/css/color/green.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: green. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='green'][data-mode='light'] {
+    --foreground: 142 25% 16%;
+    --surface: 142 24% 95%;
+    --surface-foreground: 142 25% 16%;
+    --card: 142 52% 99%;
+    --card-foreground: 142 25% 16%;
+    --popover: 142 52% 99%;
+    --popover-foreground: 142 25% 16%;
+    --muted: 142 21% 95%;
+    --muted-foreground: 142 14% 40%;
+    --border: 142 21% 87%;
+    --input: 142 21% 87%;
+    --primary: 142 69% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 142 41% 94%;
+    --accent-foreground: 142 69% 29%;
+    --secondary: 142 28% 93%;
+    --secondary-foreground: 142 69% 28%;
+    --ring: 142 69% 39%;
+    --highlight: 142 69% 64%;
+  }
+
+  html[theme-color='green'][data-mode='dark'] {
+    --foreground: 142 10% 96%;
+    --surface: 142 17% 12%;
+    --surface-foreground: 142 10% 96%;
+    --card: 142 21% 9%;
+    --card-foreground: 142 10% 96%;
+    --popover: 142 21% 9%;
+    --popover-foreground: 142 10% 96%;
+    --muted: 142 17% 16%;
+    --muted-foreground: 142 14% 64%;
+    --border: 142 17% 18%;
+    --input: 142 17% 18%;
+    --primary: 142 69% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 142 35% 18%;
+    --accent-foreground: 142 55% 80%;
+    --secondary: 142 28% 18%;
+    --secondary-foreground: 142 48% 82%;
+    --ring: 142 69% 58%;
+    --highlight: 142 69% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='green']:not([data-mode='light']) {
+      --foreground: 142 10% 96%;
+      --surface: 142 17% 12%;
+      --surface-foreground: 142 10% 96%;
+      --card: 142 21% 9%;
+      --card-foreground: 142 10% 96%;
+      --popover: 142 21% 9%;
+      --popover-foreground: 142 10% 96%;
+      --muted: 142 17% 16%;
+      --muted-foreground: 142 14% 64%;
+      --border: 142 17% 18%;
+      --input: 142 17% 18%;
+      --primary: 142 69% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 142 35% 18%;
+      --accent-foreground: 142 55% 80%;
+      --secondary: 142 28% 18%;
+      --secondary-foreground: 142 48% 82%;
+      --ring: 142 69% 58%;
+      --highlight: 142 69% 58%;
+    }
+  }
+}

package/theme/styles/css/color/index.css

@@ -0,0 +1,19 @@
+/* Accent palettes (theme-color). Generated index — base = core theme (no file). */
+@import './red.css';
+@import './orange.css';
+@import './amber.css';
+@import './yellow.css';
+@import './lime.css';
+@import './green.css';
+@import './emerald.css';
+@import './teal.css';
+@import './cyan.css';
+@import './sky.css';
+@import './blue.css';
+@import './indigo.css';
+@import './violet.css';
+@import './purple.css';
+@import './fuchsia.css';
+@import './pink.css';
+@import './rose.css';
+@import './brand.css';

package/theme/styles/css/color/indigo.css

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

package/theme/styles/css/color/lime.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: lime. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='lime'][data-mode='light'] {
+    --foreground: 84 28% 16%;
+    --surface: 84 27% 95%;
+    --surface-foreground: 84 28% 16%;
+    --card: 84 52% 99%;
+    --card-foreground: 84 28% 16%;
+    --popover: 84 52% 99%;
+    --popover-foreground: 84 28% 16%;
+    --muted: 84 23% 95%;
+    --muted-foreground: 84 16% 39%;
+    --border: 84 23% 87%;
+    --input: 84 23% 87%;
+    --primary: 84 78% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 84 47% 94%;
+    --accent-foreground: 84 78% 27%;
+    --secondary: 84 31% 93%;
+    --secondary-foreground: 84 78% 26%;
+    --ring: 84 78% 36%;
+    --highlight: 84 78% 64%;
+  }
+
+  html[theme-color='lime'][data-mode='dark'] {
+    --foreground: 84 12% 96%;
+    --surface: 84 20% 12%;
+    --surface-foreground: 84 12% 96%;
+    --card: 84 23% 9%;
+    --card-foreground: 84 12% 96%;
+    --popover: 84 23% 9%;
+    --popover-foreground: 84 12% 96%;
+    --muted: 84 20% 16%;
+    --muted-foreground: 84 16% 64%;
+    --border: 84 20% 18%;
+    --input: 84 20% 18%;
+    --primary: 84 78% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 84 39% 18%;
+    --accent-foreground: 84 62% 80%;
+    --secondary: 84 31% 18%;
+    --secondary-foreground: 84 55% 82%;
+    --ring: 84 78% 58%;
+    --highlight: 84 78% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='lime']:not([data-mode='light']) {
+      --foreground: 84 12% 96%;
+      --surface: 84 20% 12%;
+      --surface-foreground: 84 12% 96%;
+      --card: 84 23% 9%;
+      --card-foreground: 84 12% 96%;
+      --popover: 84 23% 9%;
+      --popover-foreground: 84 12% 96%;
+      --muted: 84 20% 16%;
+      --muted-foreground: 84 16% 64%;
+      --border: 84 20% 18%;
+      --input: 84 20% 18%;
+      --primary: 84 78% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 84 39% 18%;
+      --accent-foreground: 84 62% 80%;
+      --secondary: 84 31% 18%;
+      --secondary-foreground: 84 55% 82%;
+      --ring: 84 78% 58%;
+      --highlight: 84 78% 58%;
+    }
+  }
+}

package/theme/styles/css/color/orange.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: orange. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='orange'][data-mode='light'] {
+    --foreground: 24 32% 16%;
+    --surface: 24 33% 95%;
+    --surface-foreground: 24 32% 16%;
+    --card: 24 52% 99%;
+    --card-foreground: 24 32% 16%;
+    --popover: 24 52% 99%;
+    --popover-foreground: 24 32% 16%;
+    --muted: 24 29% 95%;
+    --muted-foreground: 24 19% 40%;
+    --border: 24 29% 87%;
+    --input: 24 29% 87%;
+    --primary: 24 95% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 24 57% 94%;
+    --accent-foreground: 24 95% 32%;
+    --secondary: 24 38% 93%;
+    --secondary-foreground: 24 95% 28%;
+    --ring: 24 95% 48%;
+    --highlight: 24 95% 64%;
+  }
+
+  html[theme-color='orange'][data-mode='dark'] {
+    --foreground: 24 14% 96%;
+    --surface: 24 24% 12%;
+    --surface-foreground: 24 14% 96%;
+    --card: 24 29% 9%;
+    --card-foreground: 24 14% 96%;
+    --popover: 24 29% 9%;
+    --popover-foreground: 24 14% 96%;
+    --muted: 24 24% 16%;
+    --muted-foreground: 24 19% 64%;
+    --border: 24 24% 18%;
+    --input: 24 24% 18%;
+    --primary: 24 95% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 24 48% 18%;
+    --accent-foreground: 24 76% 80%;
+    --secondary: 24 38% 18%;
+    --secondary-foreground: 24 67% 82%;
+    --ring: 24 95% 58%;
+    --highlight: 24 95% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='orange']:not([data-mode='light']) {
+      --foreground: 24 14% 96%;
+      --surface: 24 24% 12%;
+      --surface-foreground: 24 14% 96%;
+      --card: 24 29% 9%;
+      --card-foreground: 24 14% 96%;
+      --popover: 24 29% 9%;
+      --popover-foreground: 24 14% 96%;
+      --muted: 24 24% 16%;
+      --muted-foreground: 24 19% 64%;
+      --border: 24 24% 18%;
+      --input: 24 24% 18%;
+      --primary: 24 95% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 24 48% 18%;
+      --accent-foreground: 24 76% 80%;
+      --secondary: 24 38% 18%;
+      --secondary-foreground: 24 67% 82%;
+      --ring: 24 95% 58%;
+      --highlight: 24 95% 58%;
+    }
+  }
+}

package/theme/styles/css/color/pink.css

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

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

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

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