@ojiepermana/angular-theme 22.0.35 → 22.0.36

package/styles/css/{seasonal/base → base}/tailwind.css

@@ -6,7 +6,7 @@
  * Usage (styles.css):
  *   @import '@ojiepermana/angular-theme/theme.css';
  *   @import 'tailwindcss';
- *   @import '@ojiepermana/angular-theme/styles/css/seasonal/base/tailwind.css';
+ *   @import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';
  *
  * Maps the 3-layer HSL CSS variables onto Tailwind v4 design tokens so
  * utilities like `bg-primary`, `text-foreground`, `rounded-md`, and
@@ -27,6 +27,9 @@
   --color-primary: hsl(var(--primary));
   --color-primary-foreground: hsl(var(--primary-foreground));
 
+  --color-brand: hsl(var(--brand));
+  --color-brand-foreground: hsl(var(--brand-foreground));
+
   --color-secondary: hsl(var(--secondary));
   --color-secondary-foreground: hsl(var(--secondary-foreground));
 
@@ -123,6 +126,11 @@
   --leading-relaxed: var(--line-height-relaxed);
   --leading-loose: var(--line-height-loose);
 
+  /* Global spacing unit — Tailwind derives every padding, margin, gap, width and
+   * height utility from this. Wired to --spacing-base so the theme-space density
+   * axis rescales all spacing at runtime (default 0.25rem = unchanged). */
+  --spacing: var(--spacing-base);
+
   --spacing-control-xs: var(--control-height-xs);
   --spacing-control-sm: var(--control-height-sm);
   --spacing-control-md: var(--control-height-md);
@@ -138,7 +146,3 @@
   --font-sans: var(--theme-font-sans);
   --font-mono: var(--theme-font-mono);
 }
-
-@utility rounded-base {
-  border-radius: var(--rounded-base);
-}

package/styles/css/{seasonal/base → base}/theme.css

@@ -5,9 +5,8 @@
 
 @layer tokens {
   :root {
-    --radius-base: var(--theme-radius-base, 0.625rem);
+    --radius-base: 0.625rem;
     --radius-none: 0px;
-    --rounded-base: var(--radius-none);
     --scrollbar-size: 0.5rem;
     --scrollbar-radius: 9999px;
     --scrollbar-track: var(--primary) / var(--opacity-10);
@@ -177,10 +176,6 @@
      * @theme mapping re-emits --shadow-*: var(--theme-shadow-*), so an alias
      * back to --shadow-* forms a var() cycle. */
     --theme-shadow-xs: var(--shadow-xs-base);
-    --theme-radius-xs: var(--radius-xs);
-    --theme-radius-sm: var(--radius-sm);
-    --theme-radius-md: var(--radius-base);
-    --theme-radius-lg: var(--radius-xl);
     --border-width: var(--border-width-base);
     --theme-shadow-sm: var(--shadow-base);
     --theme-shadow: var(--shadow-base);

package/styles/css/{seasonal/base → base}/tokens.css

@@ -24,24 +24,27 @@
     --border: 211 28% 82%;
     --input: 211 28% 82%;
 
-    --primary: 211 95% 29%;
+    /* Base accent = near-black neutral (FluxUI "base"); inverts to near-white in
+     * dark mode (see :root[data-mode='dark'] below). Accent palettes
+     * (theme-color) override these at higher specificity. */
+    --primary: 240 6% 10%;
     --primary-foreground: 0 0% 100%;
-    --accent: 211 95% 96%;
-    --accent-foreground: 211 95% 22%;
-    --secondary: 211 24% 95%;
-    --secondary-foreground: 211 75% 24%;
-    --ring: 211 95% 29%;
+    --accent: 210 30% 95%;
+    --accent-foreground: 222 20% 14%;
+    --secondary: 210 24% 95%;
+    --secondary-foreground: 222 20% 18%;
+    --ring: 222 18% 16%;
+
+    /* Brand identity color — set by the consumer via ThemeBrandService
+     * (provideUiTheme({ brand }) or setBrand()). Concrete (not var(--primary))
+     * so the theme-color='brand' preset never forms a var() cycle. Defaults to
+     * the base accent and inverts in dark mode. */
+    --brand: 240 6% 10%;
+    --brand-foreground: 0 0% 100%;
 
     --radius-base: 0.625rem;
     --radius: var(--radius-base);
 
-    /* Deprecated: use the --radius-* tokens directly. */
-    --theme-radius-base: var(--radius-base);
-    --theme-radius-xs: var(--radius-xs);
-    --theme-radius-sm: var(--radius-sm);
-    --theme-radius-md: var(--radius-base);
-    --theme-radius-lg: var(--radius-base);
-
     --border-width-base: 1px;
     --border-width: var(--border-width-base);
 
@@ -128,10 +131,17 @@
     --border: 211 24% 24%;
     --input: 211 24% 24%;
 
-    --accent: 211 58% 18%;
-    --accent-foreground: 211 90% 84%;
+    /* Base accent inverts: near-white primary on dark. */
+    --primary: 0 0% 98%;
+    --primary-foreground: 222 20% 12%;
+    --accent: 211 40% 16%;
+    --accent-foreground: 0 0% 98%;
     --secondary: 211 24% 18%;
-    --secondary-foreground: 211 82% 84%;
+    --secondary-foreground: 0 0% 96%;
+    --ring: 0 0% 85%;
+
+    --brand: 0 0% 98%;
+    --brand-foreground: 222 20% 12%;
 
     --shadow-base: 0 1px 0 0 hsl(210 40% 96% / 0.08);
     --shadow-sm: var(--shadow-base);

package/styles/css/color/amber.css

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

package/styles/css/color/blue.css

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

package/styles/css/color/brand.css

@@ -0,0 +1,16 @@
+/**
+ * Accent theme: brand. Maps the chromatic accent tokens to the consumer's
+ * --brand / --brand-foreground (set by ThemeBrandService). Neutrals are left to
+ * the base/neutral axis. Hand-written — not emitted by the generated index.
+ */
+@layer tokens {
+  html[theme-color='brand'][data-mode='light'],
+  html[theme-color='brand'][data-mode='dark'] {
+    --primary: var(--brand);
+    --primary-foreground: var(--brand-foreground);
+    --ring: var(--brand);
+    --accent-foreground: var(--brand);
+    --secondary-foreground: var(--brand);
+    --highlight: var(--brand);
+  }
+}

package/styles/css/color/cyan.css

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

package/styles/css/color/emerald.css

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

package/styles/css/color/fuchsia.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: fuchsia. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='fuchsia'][data-mode='light'] {
+    --background: 292 24% 98%;
+    --foreground: 292 28% 16%;
+    --surface: 292 28% 95%;
+    --surface-foreground: 292 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 292 28% 16%;
+    --popover: 0 0% 100%;
+    --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'] {
+    --background: 292 24% 8%;
+    --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% 100%;
+    --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/styles/css/color/green.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: green. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='green'][data-mode='light'] {
+    --background: 142 21% 98%;
+    --foreground: 142 25% 16%;
+    --surface: 142 24% 95%;
+    --surface-foreground: 142 25% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 142 25% 16%;
+    --popover: 0 0% 100%;
+    --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% 100%;
+    --accent: 142 41% 94%;
+    --accent-foreground: 142 69% 32%;
+    --secondary: 142 28% 93%;
+    --secondary-foreground: 142 69% 28%;
+    --ring: 142 69% 48%;
+    --highlight: 142 69% 64%;
+  }
+
+  html[theme-color='green'][data-mode='dark'] {
+    --background: 142 21% 8%;
+    --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% 100%;
+    --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/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/styles/css/color/indigo.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: indigo. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='indigo'][data-mode='light'] {
+    --background: 239 23% 98%;
+    --foreground: 239 28% 16%;
+    --surface: 239 27% 95%;
+    --surface-foreground: 239 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 239 28% 16%;
+    --popover: 0 0% 100%;
+    --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'] {
+    --background: 239 23% 8%;
+    --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% 58%;
+    --highlight: 239 78% 58%;
+  }
+}

package/styles/css/color/lime.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: lime. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='lime'][data-mode='light'] {
+    --background: 84 23% 98%;
+    --foreground: 84 28% 16%;
+    --surface: 84 27% 95%;
+    --surface-foreground: 84 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 84 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 84 28% 16%;
+    --muted: 84 23% 95%;
+    --muted-foreground: 84 16% 40%;
+    --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% 32%;
+    --secondary: 84 31% 93%;
+    --secondary-foreground: 84 78% 28%;
+    --ring: 84 78% 48%;
+    --highlight: 84 78% 64%;
+  }
+
+  html[theme-color='lime'][data-mode='dark'] {
+    --background: 84 23% 8%;
+    --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/styles/css/color/orange.css

@@ -0,0 +1,50 @@
+/**
+ * Accent theme: orange. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='orange'][data-mode='light'] {
+    --background: 24 29% 98%;
+    --foreground: 24 32% 16%;
+    --surface: 24 33% 95%;
+    --surface-foreground: 24 32% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 24 32% 16%;
+    --popover: 0 0% 100%;
+    --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% 100%;
+    --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'] {
+    --background: 24 29% 8%;
+    --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% 100%;
+    --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/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%;
+  }
+}