@nanahoshi/mona-ui 0.1.1 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-theme.mjs

@@ -1,306 +1,1148 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, Injectable } from '@angular/core';
+import { InjectionToken, inject, DOCUMENT, DestroyRef, signal, computed, Injectable, makeEnvironmentProviders } from '@angular/core';
+import { converter, parse, wcagContrast, clampChroma } from 'culori';
 
+function flattenThemeProfile(profile) {
+    return {
+        ...profile.colors,
+        ...profile.shadows,
+        ...profile.motion,
+        ...profile.effects,
+        ...profile.shape,
+        ...profile.components,
+        ...profile.custom
+    };
+}
+
+const toOklch = converter("oklch");
+const roles = ["primary", "secondary", "success", "error", "warning", "info"];
+const minimumTextContrast = 4.5;
+const minimumBoundaryContrast = 3;
+const lightSettings = {
+    activeDelta: -0.07,
+    baseLightness: 0.48,
+    borderLightness: 0.64,
+    contrastDirection: -1,
+    hoverDelta: -0.035,
+    subtleForegroundLightness: 0.34,
+    subtleLightness: 0.945,
+    surface: { mode: "oklch", l: 0.99, c: 0.003, h: 270 }
+};
+const darkSettings = {
+    activeDelta: 0.07,
+    baseLightness: 0.72,
+    borderLightness: 0.58,
+    contrastDirection: 1,
+    hoverDelta: 0.035,
+    subtleForegroundLightness: 0.82,
+    subtleLightness: 0.285,
+    surface: { mode: "oklch", l: 0.19, c: 0.012, h: 270 }
+};
 /**
- * Parses an OKLCH color string (with optional alpha) into its components.
- * Lightness (L) can be a percentage (e.g., "39.8%") or a number (e.g., "0.398").
- * If L is a number, it's converted to the 0-100 scale (0.398 -> 39.8).
- * @param oklchColorString - e.g., "oklch(39.8% 0.195 277.366)" or "oklch(0.21 0.01 0)"
- * @returns Parsed OklchColor object or null if invalid.
+ * Generates accessible light and dark color-role overrides from consumer-provided CSS colors.
+ * Seed lightness is treated as source identity; the generated variants use fixed tonal anchors.
  */
-function parseOklch(oklchColorString) {
-    const matchResult = oklchColorString.match(/oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+))?\s*\)/i);
-    if (matchResult && matchResult[1] !== undefined && matchResult[3] !== undefined && matchResult[4] !== undefined) {
-        let lightnessValue = parseFloat(matchResult[1]);
-        const lightnessUnit = matchResult[2];
-        if (lightnessUnit === "") {
-            lightnessValue *= 100;
+function generateThemeColorPalette(seeds) {
+    const light = {};
+    const dark = {};
+    for (const role of roles) {
+        const value = seeds[role];
+        if (value === undefined) {
+            continue;
         }
-        const chromaValue = parseFloat(matchResult[3]);
-        const hueValue = parseFloat(matchResult[4]);
-        let alphaValue = undefined;
-        if (matchResult[5] !== undefined) {
-            alphaValue = parseFloat(matchResult[5]);
+        const seed = parseSeed(role, value);
+        Object.assign(light, createRolePalette(role, seed, lightSettings));
+        Object.assign(dark, createRolePalette(role, seed, darkSettings));
+        if (role === "primary") {
+            Object.assign(light, createPrimaryEmphasisPalette(seed, lightSettings));
+            Object.assign(dark, createPrimaryEmphasisPalette(seed, darkSettings));
         }
-        return { l: lightnessValue, c: chromaValue, h: hueValue, a: alphaValue };
     }
-    return null;
+    return Object.freeze({
+        light: Object.freeze(light),
+        dark: Object.freeze(dark)
+    });
 }
-/**
- * Formats OklchColor components back into an OKLCH string.
- * Ensures L is clamped [0, 100], C is non-negative, and H is wrapped [0, 360).
- * Alpha is included if defined and < 1. L is always formatted as a percentage.
- * Matches precision of the input example.
- * @param colorComponents - OklchColor object
- * @returns Formatted OKLCH string.
- */
-function formatOklch(colorComponents) {
-    const clampedLightness = Math.max(0, Math.min(100, colorComponents.l));
-    const clampedChroma = Math.max(0, colorComponents.c);
-    let wrappedHue = colorComponents.h % 360;
-    if (wrappedHue < 0) {
-        wrappedHue += 360;
+function parseSeed(role, value) {
+    const parsed = parse(value);
+    const converted = parsed ? toOklch(parsed) : undefined;
+    if (!converted) {
+        throw new Error(`Invalid ${role} theme color seed: "${value}". Expected an opaque CSS color.`);
     }
-    let oklchOutputString = `oklch(${clampedLightness.toFixed(1)}% ${clampedChroma.toFixed(3)} ${wrappedHue.toFixed(3)}`;
-    if (colorComponents.a !== undefined && colorComponents.a < 1.0) {
-        const clampedAlpha = Math.max(0, Math.min(1, colorComponents.a));
-        oklchOutputString += ` / ${clampedAlpha.toString()}`;
+    if ((converted.alpha ?? 1) < 1) {
+        throw new Error(`Invalid ${role} theme color seed: translucent colors are not supported.`);
     }
-    oklchOutputString += `)`;
-    return oklchOutputString;
+    return mapToSrgb({
+        mode: "oklch",
+        l: clamp(converted.l, 0, 1),
+        c: Math.max(converted.c, 0),
+        h: normalizeHue(converted.h ?? 0)
+    });
 }
-/**
- * Generates a primary color palette based on a given primary OKLCH color.
- * The relationships are derived from the example provided, with adjustments
- * for a "more white-y" foreground.
- * @param primaryOklchString The primary color in OKLCH string format.
- * @returns An object containing the generated color palette.
- * @throws Error if the primaryOklchString is invalid.
- */
-function generatePrimaryColorPalette(primaryOklchString) {
-    const primaryColor = parseOklch(primaryOklchString);
-    if (!primaryColor) {
-        throw new Error("Invalid primary color string. Expected format: oklch(L[%] C H [/ A])");
-    }
-    const colorPalette = {
-        "--color-primary": formatOklch(primaryColor),
-        "--color-primary-foreground": "",
-        "--color-primary-hover": "",
-        "--color-primary-active": "",
-        "--color-primary-selected": "",
-        "--color-secondary-selected": ""
-    };
-    // --color-primary-foreground: Adjusted for a "more white-y" appearance
-    // L: Increased to 97.5% (was 94.3%)
-    // C: Decreased to 0.005 (was 0.029) to be more achromatic
-    // H: Kept the primaryColor.h + 17.222 relationship
-    colorPalette["--color-primary-foreground"] = formatOklch({
-        l: 97.5, // Higher lightness for more "whiteness"
-        c: 0.005, // Lower chroma for more neutrality (closer to pure white)
-        h: primaryColor.h + 17.222
+function createRolePalette(role, seed, settings) {
+    const chroma = Math.min(seed.c, 0.16);
+    const hue = seed.h ?? 0;
+    const base = fitContrast(mapToSrgb({ mode: "oklch", l: settings.baseLightness, c: chroma, h: hue }), settings.surface, minimumBoundaryContrast, settings.contrastDirection);
+    const foreground = chooseForeground(base, hue);
+    const hover = ensureForegroundContrast(mapToSrgb({ ...base, l: clamp(base.l + settings.hoverDelta, 0, 1) }), foreground, settings.contrastDirection);
+    const active = ensureForegroundContrast(mapToSrgb({ ...base, l: clamp(base.l + settings.activeDelta, 0, 1) }), foreground, settings.contrastDirection);
+    const subtle = mapToSrgb({
+        mode: "oklch",
+        l: settings.subtleLightness,
+        c: Math.min(chroma * 0.22, 0.04),
+        h: hue
     });
-    colorPalette["--color-primary-hover"] = formatOklch({
-        l: primaryColor.l + 6,
-        c: primaryColor.c,
-        h: primaryColor.h
+    const subtleForeground = fitContrast(mapToSrgb({
+        mode: "oklch",
+        l: settings.subtleForegroundLightness,
+        c: Math.min(chroma * 0.8, 0.12),
+        h: hue
+    }), subtle, minimumTextContrast, settings.contrastDirection);
+    const border = fitContrast(mapToSrgb({
+        mode: "oklch",
+        l: settings.borderLightness,
+        c: Math.min(chroma * 0.55, 0.09),
+        h: hue
+    }), subtle, minimumBoundaryContrast, settings.contrastDirection);
+    const prefix = `--color-${role}`;
+    return {
+        [prefix]: formatOklch(base),
+        [`${prefix}-foreground`]: formatOklch(foreground),
+        [`${prefix}-hover`]: formatOklch(hover),
+        [`${prefix}-active`]: formatOklch(active),
+        [`${prefix}-selected`]: formatOklch(active),
+        [`${prefix}-subtle`]: formatOklch(subtle),
+        [`${prefix}-subtle-foreground`]: formatOklch(subtleForeground),
+        [`${prefix}-border`]: formatOklch(border)
+    };
+}
+function createPrimaryEmphasisPalette(seed, settings) {
+    const isLight = settings.contrastDirection === -1;
+    const hue = seed.h ?? 0;
+    const chroma = Math.min(seed.c * 0.32, 0.05);
+    const accent = mapToSrgb({
+        mode: "oklch",
+        l: isLight ? 0.925 : 0.31,
+        c: chroma,
+        h: hue
     });
-    colorPalette["--color-primary-active"] = formatOklch({
-        l: primaryColor.l - 4,
-        c: primaryColor.c,
-        h: primaryColor.h
+    const foreground = fitContrast(mapToSrgb({
+        mode: "oklch",
+        l: isLight ? 0.3 : 0.88,
+        c: Math.min(seed.c * 0.75, 0.11),
+        h: hue
+    }), accent, minimumTextContrast, settings.contrastDirection);
+    const hover = mapToSrgb({ ...accent, l: clamp(accent.l + (isLight ? -0.025 : 0.035), 0, 1) });
+    const active = mapToSrgb({ ...accent, l: clamp(accent.l + (isLight ? -0.055 : 0.07), 0, 1) });
+    return {
+        "--color-accent": formatOklch(accent),
+        "--color-accent-foreground": formatOklch(foreground),
+        "--color-accent-hover": formatOklch(hover),
+        "--color-accent-active": formatOklch(active),
+        "--color-accent-dark": "var(--color-accent-active)",
+        "--color-focus-indicator": "var(--color-primary)",
+        "--color-selected": "var(--color-accent)",
+        "--color-selected-foreground": "var(--color-accent-foreground)",
+        "--color-selected-hover": "var(--color-accent-hover)",
+        "--color-selected-hover-foreground": "var(--color-accent-foreground)",
+        "--color-selected-active": "var(--color-accent-active)",
+        "--color-selected-active-foreground": "var(--color-accent-foreground)",
+        "--color-selected-focus": "var(--color-accent-hover)",
+        "--color-selected-focus-foreground": "var(--color-accent-foreground)",
+        "--color-selected-border": "var(--color-primary)"
+    };
+}
+function chooseForeground(background, hue) {
+    const light = mapToSrgb({ mode: "oklch", l: 0.98, c: 0.004, h: hue });
+    const dark = mapToSrgb({ mode: "oklch", l: 0.16, c: 0.012, h: hue });
+    const preferred = wcagContrast(light, background) >= wcagContrast(dark, background) ? light : dark;
+    const direction = preferred === light ? 1 : -1;
+    return fitContrast(preferred, background, minimumTextContrast, direction);
+}
+function ensureForegroundContrast(background, foreground, direction) {
+    if (wcagContrast(background, foreground) >= minimumTextContrast) {
+        return background;
+    }
+    return fitContrast(background, foreground, minimumTextContrast, direction);
+}
+function fitContrast(color, background, minimum, direction) {
+    let candidate = color;
+    for (let index = 0; index < 400 && wcagContrast(candidate, background) < minimum; index++) {
+        const lightness = clamp(candidate.l + direction * 0.0025, 0, 1);
+        if (lightness === candidate.l) {
+            break;
+        }
+        candidate = mapToSrgb({ ...candidate, l: lightness });
+    }
+    return candidate;
+}
+function mapToSrgb(color) {
+    const mapped = clampChroma({
+        mode: "oklch",
+        l: clamp(color.l, 0, 1),
+        c: Math.max(color.c, 0),
+        h: normalizeHue(color.h ?? 0)
+    }, "oklch", "rgb");
+    return { ...mapped, alpha: undefined };
+}
+function formatOklch(color) {
+    return `oklch(${(color.l * 100).toFixed(2)}% ${color.c.toFixed(4)} ${normalizeHue(color.h ?? 0).toFixed(2)})`;
+}
+function normalizeHue(hue) {
+    return ((hue % 360) + 360) % 360;
+}
+function clamp(value, minimum, maximum) {
+    return Math.min(Math.max(value, minimum), maximum);
+}
+
+const generatedRoles$2 = generateThemeColorPalette({
+    primary: "#583573",
+    secondary: "#3A3B40",
+    success: "#32BEA6",
+    error: "#FF3055",
+    warning: "#FFDA6B",
+    info: "#4DA3FF"
+});
+const dark$5 = Object.freeze({
+    "--color-canvas": "#202123",
+    "--color-surface": "#1D1E20",
+    "--color-surface-muted": "#161718",
+    "--color-surface-raised": "#242528",
+    "--color-surface-overlay": "#161718",
+    "--color-foreground": "#D6D6D8",
+    "--color-muted-foreground": "#A8A8AD",
+    "--color-input-background": "#1D1E20",
+    "--color-input-foreground": "var(--color-foreground)",
+    "--color-border-subtle": "#0F0F10",
+    "--color-border": "#131416",
+    "--color-border-control": "#0F0F10",
+    "--color-border-control-hover": "#17181A",
+    "--color-hover": "#242528",
+    "--color-active": "#2A2B2E",
+    "--color-disabled-foreground": "#9A9AA0",
+    "--color-disabled-background": "#1A1B1D",
+    "--color-disabled-border": "#111214",
+    ...generatedRoles$2.dark,
+    "--color-primary": "#583573",
+    "--color-primary-foreground": "#F5EFF8",
+    "--color-primary-hover": "#684484",
+    "--color-primary-active": "#472A5E",
+    "--color-primary-selected": "#583573",
+    "--color-primary-subtle": "#2B2131",
+    "--color-primary-subtle-foreground": "#DABFEA",
+    "--color-primary-border": "#A174C2",
+    "--color-secondary": "#34353A",
+    "--color-secondary-foreground": "#F0F0F2",
+    "--color-secondary-hover": "#414247",
+    "--color-secondary-active": "#292A2E",
+    "--color-secondary-selected": "#414247",
+    "--color-secondary-subtle": "#232428",
+    "--color-secondary-subtle-foreground": "#D6D6D8",
+    "--color-secondary-border": "#777880",
+    "--color-accent": "#583573",
+    "--color-accent-foreground": "#F5EFF8",
+    "--color-accent-hover": "#684484",
+    "--color-accent-active": "#472A5E",
+    "--color-accent-dark": "var(--color-accent-active)",
+    "--color-selected": "var(--color-primary)",
+    "--color-selected-foreground": "var(--color-primary-foreground)",
+    "--color-selected-hover": "var(--color-primary-hover)",
+    "--color-selected-hover-foreground": "var(--color-primary-foreground)",
+    "--color-selected-active": "var(--color-active)",
+    "--color-selected-active-foreground": "var(--color-foreground)",
+    "--color-selected-focus": "var(--color-primary)",
+    "--color-selected-focus-foreground": "var(--color-primary-foreground)",
+    "--color-selected-border": "var(--color-border-subtle)",
+    "--color-focus-surface": "var(--color-surface)",
+    "--color-focus-indicator": "#A174C2",
+    "--color-background": "var(--color-surface)",
+    "--color-background-dark": "var(--color-surface-muted)",
+    "--color-header-background": "var(--color-surface-muted)",
+    "--color-header-foreground": "var(--color-foreground)",
+    "--color-input-border": "var(--color-border-control)",
+    "--color-input-hover": "var(--color-hover)",
+    "--color-input-active": "var(--color-surface-raised)",
+    "--color-popover": "var(--color-surface-overlay)",
+    "--color-popover-foreground": "var(--color-foreground)",
+    "--color-muted": "var(--color-surface-muted)",
+    "--color-destructive": "var(--color-error)",
+    "--color-destructive-foreground": "var(--color-error-foreground)",
+    "--color-input": "var(--color-border-control)",
+    "--color-disabled": "var(--color-disabled-foreground)",
+    "--color-chart-1": "#A174C2",
+    "--color-chart-2": "#6F4A8A",
+    "--color-chart-3": "#4DA3FF",
+    "--color-chart-4": "#32BEA6",
+    "--color-chart-5": "#FFDA6B",
+    "--color-scrollbar-thumb": "#34353A",
+    "--color-scrollbar-thumb-hover": "#4A4B51",
+    "--color-scrollbar-thumb-active": "#62636A",
+    "--color-scrollbar-thumb-focus": "var(--color-focus-indicator)",
+    "--color-scrollbar-track": "#161718",
+    "--color-scrollbar-track-hover": "#1D1E20",
+    "--color-scrollbar-track-active": "#242528",
+    "--color-scrollbar-track-focus": "#2B2131",
+    "--color-scrollbar-corner": "#161718"
+});
+const annaThemeColors = Object.freeze({ dark: dark$5 });
+
+const dark$4 = Object.freeze({
+    "--shadow-control": "none",
+    "--shadow-raised": "0 4px 10px -4px rgb(0 0 0 / 0.6)",
+    "--shadow-overlay": "0 6px 14px -4px rgb(0 0 0 / 0.65)"
+});
+const annaThemeShadows = Object.freeze({ dark: dark$4 });
+
+function createDefaultThemeEffects() {
+    return Object.freeze({
+        "--mona-effect-control-background-color": "var(--color-input-background)",
+        "--mona-effect-control-fallback-background-color": "var(--color-input-background)",
+        "--mona-effect-control-background-image": "none",
+        "--mona-effect-control-backdrop-filter": "none",
+        "--mona-effect-raised-background-color": "var(--color-surface-raised)",
+        "--mona-effect-raised-fallback-background-color": "var(--color-surface-raised)",
+        "--mona-effect-raised-background-image": "none",
+        "--mona-effect-raised-backdrop-filter": "none",
+        "--mona-effect-overlay-background-color": "var(--color-surface-overlay)",
+        "--mona-effect-overlay-fallback-background-color": "var(--color-surface-overlay)",
+        "--mona-effect-overlay-background-image": "none",
+        "--mona-effect-overlay-backdrop-filter": "none"
     });
-    colorPalette["--color-primary-selected"] = formatOklch({
-        l: primaryColor.l + 9,
-        c: primaryColor.c,
-        h: primaryColor.h
+}
+function createDefaultThemeShape() {
+    return Object.freeze({
+        "--radius-sm": "0.25rem",
+        "--radius-md": "0.375rem",
+        "--radius-lg": "0.5rem"
     });
-    colorPalette["--color-secondary-selected"] = formatOklch({
-        l: primaryColor.l + 4,
-        c: primaryColor.c,
-        h: primaryColor.h,
-        a: 0.5
+}
+
+const motion$1 = Object.freeze({
+    "--mona-motion-fast": "150ms",
+    "--mona-motion-standard": "150ms"
+});
+const components = Object.freeze({
+    "--mona-calendar-background": "var(--color-input-background)",
+    "--mona-calendar-shadow": "none",
+    "--mona-list-background": "var(--color-surface)",
+    "--mona-list-disabled-background": "var(--color-disabled-background)",
+    "--mona-list-group-background": "var(--color-surface-muted)",
+    "--mona-list-group-border-width": "1px",
+    "--mona-list-group-font-weight": "600",
+    "--mona-menubar-background": "var(--color-surface-muted)",
+    "--mona-menubar-shadow": "none",
+    "--mona-pager-background": "var(--color-surface-muted)",
+    "--mona-slider-handle-border-color": "var(--color-focus-indicator)",
+    "--mona-tab-list-background": "var(--color-surface-muted)",
+    "--mona-tab-content-background": "transparent"
+});
+const annaTheme = Object.freeze({
+    name: "anna",
+    variants: {
+        dark: Object.freeze({
+            colors: annaThemeColors.dark,
+            components,
+            effects: createDefaultThemeEffects(),
+            motion: motion$1,
+            shape: createDefaultThemeShape(),
+            shadows: annaThemeShadows.dark
+        })
+    }
+});
+
+const generatedRoles$1 = generateThemeColorPalette({
+    primary: "#3f6be2",
+    secondary: "#667085",
+    success: "#3f8665",
+    error: "#d64b4b",
+    warning: "#a86c18",
+    info: "#3978c6"
+});
+const light$3 = Object.freeze({
+    "--color-canvas": "#fcfcfc",
+    "--color-surface": "#ffffff",
+    "--color-surface-muted": "#f3f4f5",
+    "--color-surface-raised": "#fbfbfb",
+    "--color-surface-overlay": "#f9f9fa",
+    "--color-foreground": "#252525",
+    "--color-muted-foreground": "#6f7074",
+    "--color-input-background": "#f3f4f5",
+    "--color-input-foreground": "var(--color-foreground)",
+    "--color-border-subtle": "#eeeeef",
+    "--color-border": "#e4e4e6",
+    "--color-border-control": "#d5d6d9",
+    "--color-border-control-hover": "#c5c6ca",
+    "--color-hover": "#ecedef",
+    "--color-active": "#e2e3e6",
+    "--color-disabled-foreground": "#77787c",
+    "--color-disabled-background": "#f0f0f1",
+    "--color-disabled-border": "#e4e4e6",
+    ...generatedRoles$1.light,
+    "--color-primary": "#3f6be2",
+    "--color-primary-foreground": "#ffffff",
+    "--color-primary-hover": "#365fce",
+    "--color-primary-active": "#2f54b8",
+    "--color-primary-selected": "#2f54b8",
+    "--color-primary-subtle": "#e5ebfb",
+    "--color-primary-subtle-foreground": "#29478f",
+    "--color-primary-border": "#3f6be2",
+    "--color-accent": "#e5ebfb",
+    "--color-accent-foreground": "#29478f",
+    "--color-accent-hover": "#dce5fa",
+    "--color-accent-active": "#d1dcf7",
+    "--color-accent-dark": "var(--color-accent-active)",
+    "--color-focus-indicator": "#3f6be2",
+    "--color-selected": "#e5ebfb",
+    "--color-selected-foreground": "#29478f",
+    "--color-selected-hover": "#dce5fa",
+    "--color-selected-hover-foreground": "#29478f",
+    "--color-selected-active": "#d1dcf7",
+    "--color-selected-active-foreground": "#29478f",
+    "--color-selected-focus": "#dce5fa",
+    "--color-selected-focus-foreground": "#29478f",
+    "--color-selected-border": "#3f6be2",
+    "--color-focus-surface": "#eef2ff",
+    "--color-background": "var(--color-surface)",
+    "--color-background-dark": "var(--color-surface-muted)",
+    "--color-header-background": "var(--color-surface-muted)",
+    "--color-header-foreground": "var(--color-foreground)",
+    "--color-input-border": "var(--color-border-control)",
+    "--color-input-hover": "var(--color-hover)",
+    "--color-input-active": "var(--color-surface-raised)",
+    "--color-popover": "var(--color-surface-overlay)",
+    "--color-popover-foreground": "var(--color-foreground)",
+    "--color-muted": "var(--color-surface-muted)",
+    "--color-destructive": "var(--color-error)",
+    "--color-destructive-foreground": "var(--color-error-foreground)",
+    "--color-input": "var(--color-border-control)",
+    "--color-disabled": "var(--color-disabled-foreground)",
+    "--color-chart-1": "#3f6be2",
+    "--color-chart-2": "#667085",
+    "--color-chart-3": "#4f8a70",
+    "--color-chart-4": "#b37a2b",
+    "--color-chart-5": "#c55d5d",
+    "--color-scrollbar-thumb": "#b7b8bc",
+    "--color-scrollbar-thumb-hover": "#94969b",
+    "--color-scrollbar-thumb-active": "#74767b",
+    "--color-scrollbar-thumb-focus": "var(--color-focus-indicator)",
+    "--color-scrollbar-track": "var(--color-canvas)",
+    "--color-scrollbar-track-hover": "var(--color-surface-muted)",
+    "--color-scrollbar-track-active": "var(--color-hover)",
+    "--color-scrollbar-track-focus": "var(--color-accent)",
+    "--color-scrollbar-corner": "var(--color-canvas)"
+});
+const dark$3 = Object.freeze({
+    "--color-canvas": "#151515",
+    "--color-surface": "#1b1b1c",
+    "--color-surface-muted": "#252527",
+    "--color-surface-raised": "#202022",
+    "--color-surface-overlay": "#262628",
+    "--color-foreground": "#f5f5f6",
+    "--color-muted-foreground": "#a9aaae",
+    "--color-input-background": "#252527",
+    "--color-input-foreground": "var(--color-foreground)",
+    "--color-border-subtle": "#303033",
+    "--color-border": "#39393d",
+    "--color-border-control": "#494a4f",
+    "--color-border-control-hover": "#5a5b61",
+    "--color-hover": "#2f2f32",
+    "--color-active": "#3a3a3e",
+    "--color-disabled-foreground": "#85868b",
+    "--color-disabled-background": "#222224",
+    "--color-disabled-border": "#36363a",
+    ...generatedRoles$1.dark,
+    "--color-primary": "#6f8de8",
+    "--color-primary-foreground": "#111522",
+    "--color-primary-hover": "#7d99f0",
+    "--color-primary-active": "#8ba6f8",
+    "--color-primary-selected": "#8ba6f8",
+    "--color-primary-subtle": "#293656",
+    "--color-primary-subtle-foreground": "#e7ecff",
+    "--color-primary-border": "#6f8de8",
+    "--color-accent": "#293656",
+    "--color-accent-foreground": "#e7ecff",
+    "--color-accent-hover": "#32436c",
+    "--color-accent-active": "#3b4e7c",
+    "--color-accent-dark": "var(--color-accent-active)",
+    "--color-focus-indicator": "#88a2f4",
+    "--color-selected": "#293656",
+    "--color-selected-foreground": "#e7ecff",
+    "--color-selected-hover": "#32436c",
+    "--color-selected-hover-foreground": "#eef2ff",
+    "--color-selected-active": "#3b4e7c",
+    "--color-selected-active-foreground": "#ffffff",
+    "--color-selected-focus": "#344872",
+    "--color-selected-focus-foreground": "#ffffff",
+    "--color-selected-border": "#6f8de8",
+    "--color-focus-surface": "#293656",
+    "--color-background": "var(--color-surface)",
+    "--color-background-dark": "var(--color-surface-muted)",
+    "--color-header-background": "var(--color-surface-muted)",
+    "--color-header-foreground": "var(--color-foreground)",
+    "--color-input-border": "var(--color-border-control)",
+    "--color-input-hover": "var(--color-hover)",
+    "--color-input-active": "var(--color-surface-raised)",
+    "--color-popover": "var(--color-surface-overlay)",
+    "--color-popover-foreground": "var(--color-foreground)",
+    "--color-muted": "var(--color-surface-muted)",
+    "--color-destructive": "var(--color-error)",
+    "--color-destructive-foreground": "var(--color-error-foreground)",
+    "--color-input": "var(--color-border-control)",
+    "--color-disabled": "var(--color-disabled-foreground)",
+    "--color-chart-1": "#7f9bf0",
+    "--color-chart-2": "#9ba3b2",
+    "--color-chart-3": "#70aa8e",
+    "--color-chart-4": "#d09a4c",
+    "--color-chart-5": "#de7c7c",
+    "--color-scrollbar-thumb": "#55565b",
+    "--color-scrollbar-thumb-hover": "#73747a",
+    "--color-scrollbar-thumb-active": "#929399",
+    "--color-scrollbar-thumb-focus": "var(--color-focus-indicator)",
+    "--color-scrollbar-track": "var(--color-canvas)",
+    "--color-scrollbar-track-hover": "var(--color-surface-muted)",
+    "--color-scrollbar-track-active": "var(--color-hover)",
+    "--color-scrollbar-track-focus": "var(--color-accent)",
+    "--color-scrollbar-corner": "var(--color-canvas)"
+});
+const lunaThemeColors = Object.freeze({ light: light$3, dark: dark$3 });
+
+const light$2 = Object.freeze({
+    "--shadow-control": "0 1px 2px rgb(20 20 20 / 0.04)",
+    "--shadow-raised": "0 8px 24px -14px rgb(20 20 20 / 0.14), 0 2px 6px -3px rgb(20 20 20 / 0.06)",
+    "--shadow-overlay": "0 18px 42px -20px rgb(20 20 20 / 0.22), 0 6px 16px -10px rgb(20 20 20 / 0.1)"
+});
+const dark$2 = Object.freeze({
+    "--shadow-control": "0 1px 2px rgb(0 0 0 / 0.28)",
+    "--shadow-raised": "0 10px 26px -14px rgb(0 0 0 / 0.5), 0 2px 7px -4px rgb(0 0 0 / 0.34)",
+    "--shadow-overlay": "0 20px 46px -20px rgb(0 0 0 / 0.62), 0 7px 18px -11px rgb(0 0 0 / 0.46)"
+});
+const lunaThemeShadows = Object.freeze({ light: light$2, dark: dark$2 });
+
+const lunaTheme = Object.freeze({
+    name: "luna",
+    variants: {
+        light: Object.freeze({
+            colors: lunaThemeColors.light,
+            shadows: lunaThemeShadows.light,
+            motion: Object.freeze({
+                "--mona-motion-fast": "180ms",
+                "--mona-motion-standard": "320ms"
+            }),
+            effects: Object.freeze({
+                "--mona-effect-control-background-color": "rgb(243 244 245 / 0.78)",
+                "--mona-effect-control-fallback-background-color": "#f3f4f5",
+                "--mona-effect-control-background-image": "none",
+                "--mona-effect-control-backdrop-filter": "blur(16px) saturate(110%)",
+                "--mona-effect-raised-background-color": "rgb(252 252 252 / 0.76)",
+                "--mona-effect-raised-fallback-background-color": "#fbfbfb",
+                "--mona-effect-raised-background-image": "none",
+                "--mona-effect-raised-backdrop-filter": "blur(22px) saturate(112%)",
+                "--mona-effect-overlay-background-color": "rgb(249 249 250 / 0.72)",
+                "--mona-effect-overlay-fallback-background-color": "#f9f9fa",
+                "--mona-effect-overlay-background-image": "none",
+                "--mona-effect-overlay-backdrop-filter": "blur(28px) saturate(115%)"
+            }),
+            shape: createDefaultThemeShape(),
+            custom: Object.freeze({
+                "--mona-date-popup-calendar-backdrop-filter": "none",
+                "--mona-date-popup-calendar-background": "transparent",
+                "--mona-date-popup-calendar-background-image": "none",
+                "--mona-dropdown-popup-list-background": "transparent",
+                "--mona-input-addon-background": "color-mix(in srgb, var(--color-input-background), var(--color-foreground) 8%)",
+                "--mona-menu-item-hover-background": "rgb(37 37 37 / 0.06)",
+                "--mona-menu-item-hover-foreground": "var(--color-foreground)",
+                "--mona-menubar-backdrop-filter": "var(--mona-effect-control-backdrop-filter)",
+                "--mona-menubar-background-image": "var(--mona-effect-control-background-image)"
+            }),
+            components: Object.freeze({
+                "--mona-calendar-background": "var(--mona-effect-raised-background-color)",
+                "--mona-calendar-shadow": "var(--shadow-raised)",
+                "--mona-list-background": "var(--color-surface)",
+                "--mona-list-disabled-background": "var(--color-disabled-background)",
+                "--mona-list-group-background": "rgb(37 37 37 / 0.05)",
+                "--mona-list-group-border-width": "1px",
+                "--mona-list-group-font-weight": "650",
+                "--mona-menubar-background": "var(--mona-effect-control-background-color)",
+                "--mona-menubar-shadow": "var(--shadow-control)",
+                "--mona-pager-background": "var(--mona-effect-raised-background-color)",
+                "--mona-slider-handle-border-color": "var(--color-border-control)",
+                "--mona-tab-list-background": "#f5f5f6",
+                "--mona-tab-content-background": "var(--color-surface)"
+            })
+        }),
+        dark: Object.freeze({
+            colors: lunaThemeColors.dark,
+            shadows: lunaThemeShadows.dark,
+            motion: Object.freeze({
+                "--mona-motion-fast": "180ms",
+                "--mona-motion-standard": "320ms"
+            }),
+            effects: Object.freeze({
+                "--mona-effect-control-background-color": "rgb(37 37 39 / 0.74)",
+                "--mona-effect-control-fallback-background-color": "#252527",
+                "--mona-effect-control-background-image": "none",
+                "--mona-effect-control-backdrop-filter": "blur(16px) saturate(110%)",
+                "--mona-effect-raised-background-color": "rgb(32 32 34 / 0.78)",
+                "--mona-effect-raised-fallback-background-color": "#202022",
+                "--mona-effect-raised-background-image": "none",
+                "--mona-effect-raised-backdrop-filter": "blur(22px) saturate(112%)",
+                "--mona-effect-overlay-background-color": "rgb(38 38 40 / 0.74)",
+                "--mona-effect-overlay-fallback-background-color": "#262628",
+                "--mona-effect-overlay-background-image": "none",
+                "--mona-effect-overlay-backdrop-filter": "blur(28px) saturate(115%)"
+            }),
+            shape: createDefaultThemeShape(),
+            custom: Object.freeze({
+                "--mona-date-popup-calendar-backdrop-filter": "none",
+                "--mona-date-popup-calendar-background": "transparent",
+                "--mona-date-popup-calendar-background-image": "none",
+                "--mona-dropdown-popup-list-background": "transparent",
+                "--mona-input-addon-background": "color-mix(in srgb, var(--color-input-background), var(--color-foreground) 8%)",
+                "--mona-menubar-backdrop-filter": "var(--mona-effect-control-backdrop-filter)",
+                "--mona-menubar-background-image": "var(--mona-effect-control-background-image)"
+            }),
+            components: Object.freeze({
+                "--mona-calendar-background": "var(--mona-effect-raised-background-color)",
+                "--mona-calendar-shadow": "var(--shadow-raised)",
+                "--mona-list-background": "var(--color-surface)",
+                "--mona-list-disabled-background": "var(--color-disabled-background)",
+                "--mona-list-group-background": "rgb(255 255 255 / 0.04)",
+                "--mona-list-group-border-width": "1px",
+                "--mona-list-group-font-weight": "650",
+                "--mona-menubar-background": "var(--mona-effect-control-background-color)",
+                "--mona-menubar-shadow": "var(--shadow-control)",
+                "--mona-pager-background": "var(--mona-effect-raised-background-color)",
+                "--mona-slider-handle-border-color": "var(--color-border-control)",
+                "--mona-tab-list-background": "var(--mona-effect-raised-background-color)",
+                "--mona-tab-content-background": "var(--color-surface)"
+            })
+        })
+    }
+});
+
+// The public seed API requires a primary color. Mona replaces the generated identity roles with
+// the neutral definitions below and keeps the generated output only for chromatic status roles.
+const generatedRoles = generateThemeColorPalette({
+    primary: "oklch(20.5% 0.006 285.885)",
+    secondary: "oklch(55.2% 0.010 285.938)",
+    success: "oklch(62% 0.14 150)",
+    error: "oklch(58% 0.19 25)",
+    warning: "oklch(72% 0.14 75)",
+    info: "oklch(60% 0.15 255)"
+});
+const lightNeutralRoles = Object.freeze({
+    "--color-primary": "oklch(20.5% 0.006 285.885)",
+    "--color-primary-foreground": "oklch(98.5% 0 0)",
+    "--color-primary-hover": "oklch(26.9% 0.006 285.885)",
+    "--color-primary-active": "oklch(14.1% 0.005 285.823)",
+    "--color-primary-selected": "oklch(14.1% 0.005 285.823)",
+    "--color-primary-subtle": "oklch(96.7% 0.001 286.375)",
+    "--color-primary-subtle-foreground": "oklch(26.9% 0.006 285.885)",
+    "--color-primary-border": "oklch(55.2% 0.010 285.938)",
+    "--color-secondary": "oklch(92.2% 0.004 286.320)",
+    "--color-secondary-foreground": "oklch(20.5% 0.006 285.885)",
+    "--color-secondary-hover": "oklch(87.1% 0.006 286.286)",
+    "--color-secondary-active": "oklch(80.5% 0.008 286.067)",
+    "--color-secondary-selected": "oklch(80.5% 0.008 286.067)",
+    "--color-secondary-subtle": "oklch(96.7% 0.001 286.375)",
+    "--color-secondary-subtle-foreground": "oklch(26.9% 0.006 285.885)",
+    "--color-secondary-border": "oklch(55.2% 0.010 285.938)",
+    "--color-accent": "oklch(96.7% 0.001 286.375)",
+    "--color-accent-foreground": "oklch(20.5% 0.006 285.885)",
+    "--color-accent-hover": "oklch(92.2% 0.004 286.320)",
+    "--color-accent-active": "oklch(87.1% 0.006 286.286)",
+    "--color-accent-dark": "var(--color-accent-active)",
+    "--color-selected": "var(--color-accent)",
+    "--color-focus-indicator": "var(--color-primary)"
+});
+const darkNeutralRoles = Object.freeze({
+    "--color-primary": "oklch(92.2% 0.004 286.320)",
+    "--color-primary-foreground": "oklch(20.5% 0.006 285.885)",
+    "--color-primary-hover": "oklch(87.1% 0.006 286.286)",
+    "--color-primary-active": "oklch(80.5% 0.008 286.067)",
+    "--color-primary-selected": "oklch(80.5% 0.008 286.067)",
+    "--color-primary-subtle": "oklch(27.4% 0.006 286.033)",
+    "--color-primary-subtle-foreground": "oklch(92.2% 0.004 286.320)",
+    "--color-primary-border": "oklch(65% 0.010 286.067)",
+    "--color-secondary": "oklch(27.4% 0.006 286.033)",
+    "--color-secondary-foreground": "oklch(98.5% 0 0)",
+    "--color-secondary-hover": "oklch(37.1% 0.008 285.805)",
+    "--color-secondary-active": "oklch(43.9% 0.010 285.938)",
+    "--color-secondary-selected": "oklch(43.9% 0.010 285.938)",
+    "--color-secondary-subtle": "oklch(27.4% 0.006 286.033)",
+    "--color-secondary-subtle-foreground": "oklch(92.2% 0.004 286.320)",
+    "--color-secondary-border": "oklch(65% 0.010 286.067)",
+    "--color-accent": "oklch(27.4% 0.006 286.033)",
+    "--color-accent-foreground": "oklch(98.5% 0 0)",
+    "--color-accent-hover": "oklch(37.1% 0.008 285.805)",
+    "--color-accent-active": "oklch(43.9% 0.010 285.938)",
+    "--color-accent-dark": "var(--color-accent-active)",
+    "--color-selected": "var(--color-accent)",
+    "--color-focus-indicator": "var(--color-primary)"
+});
+const light$1 = Object.freeze({
+    "--color-canvas": "oklch(98.5% 0 0)",
+    "--color-surface": "oklch(100% 0 0)",
+    "--color-surface-muted": "oklch(96.7% 0.001 286.375)",
+    "--color-surface-raised": "oklch(100% 0 0)",
+    "--color-surface-overlay": "oklch(100% 0 0)",
+    "--color-foreground": "oklch(14.1% 0.005 285.823)",
+    "--color-muted-foreground": "oklch(55.2% 0.016 285.938)",
+    "--color-input-background": "oklch(100% 0 0)",
+    "--color-input-foreground": "var(--color-foreground)",
+    "--color-border-subtle": "oklch(94% 0.002 286.320)",
+    "--color-border": "oklch(92.2% 0.004 286.320)",
+    "--color-border-control": "oklch(87.1% 0.006 286.286)",
+    "--color-border-control-hover": "oklch(80.5% 0.008 286.067)",
+    "--color-hover": "oklch(96.7% 0.001 286.375)",
+    "--color-active": "oklch(92.2% 0.004 286.320)",
+    "--color-disabled-foreground": "oklch(46% 0.010 285.938)",
+    "--color-disabled-background": "oklch(96.7% 0.001 286.375)",
+    "--color-disabled-border": "oklch(92.2% 0.004 286.320)",
+    ...generatedRoles.light,
+    ...lightNeutralRoles,
+    "--color-selected": "var(--color-active)",
+    "--color-selected-foreground": "var(--color-foreground)",
+    "--color-selected-hover": "var(--color-active)",
+    "--color-selected-hover-foreground": "var(--color-foreground)",
+    "--color-selected-active": "var(--color-active)",
+    "--color-selected-active-foreground": "var(--color-foreground)",
+    "--color-selected-focus": "var(--color-active)",
+    "--color-selected-focus-foreground": "var(--color-foreground)",
+    "--color-selected-border": "var(--color-primary)",
+    "--color-focus-surface": "var(--color-surface-muted)",
+    "--color-background": "var(--color-surface)",
+    "--color-background-dark": "var(--color-surface-muted)",
+    "--color-header-background": "var(--color-surface-muted)",
+    "--color-header-foreground": "var(--color-foreground)",
+    "--color-input-border": "var(--color-border-control)",
+    "--color-input-hover": "var(--color-hover)",
+    "--color-input-active": "var(--color-surface-raised)",
+    "--color-popover": "var(--color-surface-overlay)",
+    "--color-popover-foreground": "var(--color-foreground)",
+    "--color-muted": "var(--color-surface-muted)",
+    "--color-destructive": "var(--color-error)",
+    "--color-destructive-foreground": "var(--color-error-foreground)",
+    "--color-input": "var(--color-border-control)",
+    "--color-disabled": "var(--color-disabled-foreground)",
+    "--color-chart-1": "oklch(20.5% 0.006 285.885)",
+    "--color-chart-2": "oklch(37.1% 0.008 285.805)",
+    "--color-chart-3": "oklch(55.2% 0.010 285.938)",
+    "--color-chart-4": "oklch(70.5% 0.010 286.067)",
+    "--color-chart-5": "oklch(87.1% 0.006 286.286)",
+    "--color-scrollbar-thumb": "oklch(80.5% 0.008 286.067)",
+    "--color-scrollbar-thumb-hover": "oklch(70.5% 0.010 286.067)",
+    "--color-scrollbar-thumb-active": "oklch(55.2% 0.010 285.938)",
+    "--color-scrollbar-thumb-focus": "var(--color-primary)",
+    "--color-scrollbar-track": "var(--color-canvas)",
+    "--color-scrollbar-track-hover": "var(--color-surface-muted)",
+    "--color-scrollbar-track-active": "var(--color-hover)",
+    "--color-scrollbar-track-focus": "var(--color-accent)",
+    "--color-scrollbar-corner": "var(--color-canvas)"
+});
+const dark$1 = Object.freeze({
+    "--color-canvas": "oklch(14.1% 0.005 285.823)",
+    "--color-surface": "oklch(18% 0.006 285.885)",
+    "--color-surface-muted": "oklch(20.5% 0.006 285.885)",
+    "--color-surface-raised": "oklch(24% 0.006 286.033)",
+    "--color-surface-overlay": "oklch(27.4% 0.006 286.033)",
+    "--color-foreground": "oklch(98.5% 0 0)",
+    "--color-muted-foreground": "oklch(70.5% 0.015 286.067)",
+    "--color-input-background": "oklch(20.5% 0.006 285.885)",
+    "--color-input-foreground": "var(--color-foreground)",
+    "--color-border-subtle": "oklch(24% 0.006 286.033)",
+    "--color-border": "oklch(30% 0.007 286.033)",
+    "--color-border-control": "oklch(32% 0.008 285.938)",
+    "--color-border-control-hover": "oklch(37.1% 0.008 285.805)",
+    "--color-hover": "oklch(32% 0.007 286.033)",
+    "--color-active": "oklch(37.1% 0.008 285.805)",
+    "--color-disabled-foreground": "oklch(70.5% 0.010 286.067)",
+    "--color-disabled-background": "oklch(27.4% 0.006 286.033)",
+    "--color-disabled-border": "oklch(30% 0.007 286.033)",
+    ...generatedRoles.dark,
+    ...darkNeutralRoles,
+    "--color-selected": "var(--color-active)",
+    "--color-selected-foreground": "var(--color-foreground)",
+    "--color-selected-hover": "var(--color-active)",
+    "--color-selected-hover-foreground": "var(--color-foreground)",
+    "--color-selected-active": "var(--color-active)",
+    "--color-selected-active-foreground": "var(--color-foreground)",
+    "--color-selected-focus": "var(--color-active)",
+    "--color-selected-focus-foreground": "var(--color-foreground)",
+    "--color-selected-border": "var(--color-primary)",
+    "--color-focus-surface": "var(--color-surface-muted)",
+    "--color-background": "var(--color-surface)",
+    "--color-background-dark": "var(--color-surface-muted)",
+    "--color-header-background": "var(--color-surface-muted)",
+    "--color-header-foreground": "var(--color-foreground)",
+    "--color-input-border": "var(--color-border-control)",
+    "--color-input-hover": "var(--color-hover)",
+    "--color-input-active": "var(--color-surface-raised)",
+    "--color-popover": "var(--color-surface-overlay)",
+    "--color-popover-foreground": "var(--color-foreground)",
+    "--color-muted": "var(--color-surface-muted)",
+    "--color-destructive": "var(--color-error)",
+    "--color-destructive-foreground": "var(--color-error-foreground)",
+    "--color-input": "var(--color-border-control)",
+    "--color-disabled": "var(--color-disabled-foreground)",
+    "--color-chart-1": "oklch(92.2% 0.004 286.320)",
+    "--color-chart-2": "oklch(80.5% 0.008 286.067)",
+    "--color-chart-3": "oklch(70.5% 0.010 286.067)",
+    "--color-chart-4": "oklch(55.2% 0.010 285.938)",
+    "--color-chart-5": "oklch(43.9% 0.010 285.938)",
+    "--color-scrollbar-thumb": "oklch(37.1% 0.008 285.805)",
+    "--color-scrollbar-thumb-hover": "oklch(52% 0.010 285.938)",
+    "--color-scrollbar-thumb-active": "oklch(65% 0.010 286.067)",
+    "--color-scrollbar-thumb-focus": "var(--color-primary)",
+    "--color-scrollbar-track": "var(--color-canvas)",
+    "--color-scrollbar-track-hover": "var(--color-surface-muted)",
+    "--color-scrollbar-track-active": "var(--color-hover)",
+    "--color-scrollbar-track-focus": "var(--color-accent)",
+    "--color-scrollbar-corner": "var(--color-canvas)"
+});
+const monaThemeColors = Object.freeze({ light: light$1, dark: dark$1 });
+
+const light = Object.freeze({
+    "--shadow-control": "0 1px 2px rgb(9 9 11 / 0.03)",
+    "--shadow-raised": "0 2px 6px rgb(9 9 11 / 0.1)",
+    "--shadow-overlay": "0 8px 24px rgb(9 9 11 / 0.14)"
+});
+const dark = Object.freeze({
+    "--shadow-control": "0 1px 2px rgb(0 0 0 / 0.28)",
+    "--shadow-raised": "0 4px 10px -4px rgb(0 0 0 / 0.55)",
+    "--shadow-overlay": "0 8px 24px -6px rgb(0 0 0 / 0.72)"
+});
+const monaThemeShadows = Object.freeze({ light, dark });
+
+const motion = Object.freeze({
+    "--mona-motion-fast": "200ms",
+    "--mona-motion-standard": "300ms"
+});
+function createComponents() {
+    return Object.freeze({
+        "--mona-calendar-background": "var(--color-input-background)",
+        "--mona-calendar-shadow": "var(--shadow-raised)",
+        "--mona-list-background": "transparent",
+        "--mona-list-disabled-background": "transparent",
+        "--mona-list-group-background": "transparent",
+        "--mona-list-group-border-width": "0px",
+        "--mona-list-group-font-weight": "700",
+        "--mona-menubar-background": "var(--color-surface-muted)",
+        "--mona-menubar-shadow": "var(--shadow-raised)",
+        "--mona-pager-background": "var(--color-surface-muted)",
+        "--mona-slider-handle-border-color": "color-mix(in srgb, var(--color-focus-indicator) 50%, transparent)",
+        "--mona-tab-list-background": "var(--color-surface-muted)",
+        "--mona-tab-content-background": "var(--color-surface)"
     });
-    return colorPalette;
 }
+const monaTheme = Object.freeze({
+    name: "mona",
+    variants: {
+        light: Object.freeze({
+            colors: monaThemeColors.light,
+            components: createComponents(),
+            effects: createDefaultThemeEffects(),
+            motion,
+            shape: createDefaultThemeShape(),
+            shadows: monaThemeShadows.light
+        }),
+        dark: Object.freeze({
+            colors: monaThemeColors.dark,
+            components: createComponents(),
+            effects: createDefaultThemeEffects(),
+            motion,
+            shape: createDefaultThemeShape(),
+            shadows: monaThemeShadows.dark
+        })
+    }
+});
 
-const themeColorMap = {
-    flora: "oklch(50.8% 0.118 165.612)",
-    kafka: "oklch(0.2912 0.0994 349.29)",
-    lisa: "oklch(0.3671 0.1381 281.69)",
-    mona: "oklch(0.4008 0.107 308.49)",
-    reina: "oklch(42.4% 0.199 265.638)",
-    rosaria: "oklch(0.3987 0.1272 20.69)"
-};
+const builtInThemes = Object.freeze({
+    anna: annaTheme,
+    luna: lunaTheme,
+    mona: monaTheme
+});
+
+class DefaultThemeStrategy {
+    #overrides;
+    #themes = new Map();
+    constructor(registrations, overrides) {
+        for (const theme of Object.values(builtInThemes)) {
+            for (const [variant, profile] of getDefinedVariants(theme)) {
+                validateProfile(theme.name, variant, profile);
+            }
+            this.#themes.set(theme.name, theme);
+        }
+        for (const registration of registrations) {
+            this.#register(registration);
+        }
+        for (const override of overrides) {
+            const family = this.#themes.get(override.theme);
+            if (!family) {
+                throw new Error(`Cannot override unknown Mona UI theme "${override.theme}".`);
+            }
+            for (const variant of ["light", "dark"]) {
+                if (override[variant] && !family.variants[variant]) {
+                    throw new Error(`Cannot override undeclared "${variant}" variant of Mona UI theme "${override.theme}".`);
+                }
+            }
+            validateCustomVariables(override.theme, override.common?.custom);
+            validateCustomVariables(override.theme, override.light?.custom);
+            validateCustomVariables(override.theme, override.dark?.custom);
+        }
+        this.#overrides = overrides;
+    }
+    resolve(selection) {
+        const family = this.#themes.get(selection.name);
+        if (!family) {
+            throw new Error(`Unknown Mona UI theme "${selection.name}".`);
+        }
+        const profile = family.variants[selection.variant];
+        if (!profile) {
+            throw new Error(`Mona UI theme "${selection.name}" does not support the "${selection.variant}" variant.`);
+        }
+        let resolved = cloneProfile(profile);
+        for (const override of this.#overrides) {
+            if (override.theme === selection.name) {
+                resolved = applyOverrides(resolved, override.common);
+                resolved = applyOverrides(resolved, override[selection.variant]);
+            }
+        }
+        return resolved;
+    }
+    #register(registration) {
+        if (!registration.name.trim()) {
+            throw new Error("Mona UI theme names cannot be empty.");
+        }
+        if (this.#themes.has(registration.name)) {
+            throw new Error(`Mona UI theme "${registration.name}" is already registered.`);
+        }
+        const variants = getDefinedVariants(registration);
+        if (variants.length === 0) {
+            throw new Error(`Mona UI theme "${registration.name}" must define at least one variant.`);
+        }
+        for (const [variant, profile] of variants) {
+            validateProfile(registration.name, variant, profile);
+        }
+        this.#themes.set(registration.name, registration);
+    }
+}
+function getDefinedVariants(registration) {
+    const entries = Object.entries(registration.variants);
+    const unknownVariants = entries.filter(([variant]) => variant !== "light" && variant !== "dark");
+    if (unknownVariants.length > 0) {
+        throw new Error(`Mona UI theme "${registration.name}" declares unsupported variants: ${unknownVariants.map(([variant]) => variant).join(", ")}.`);
+    }
+    return entries.filter((entry) => entry[1] !== undefined);
+}
+function applyOverrides(profile, overrides) {
+    if (!overrides) {
+        return profile;
+    }
+    const custom = profile.custom || overrides.custom ? Object.freeze({ ...profile.custom, ...overrides.custom }) : undefined;
+    return {
+        colors: Object.freeze({ ...profile.colors, ...overrides.colors }),
+        components: Object.freeze({ ...profile.components, ...overrides.components }),
+        custom,
+        effects: Object.freeze({ ...profile.effects, ...overrides.effects }),
+        motion: Object.freeze({ ...profile.motion, ...overrides.motion }),
+        shape: Object.freeze({ ...profile.shape, ...overrides.shape }),
+        shadows: Object.freeze({ ...profile.shadows, ...overrides.shadows })
+    };
+}
+function cloneProfile(profile) {
+    return applyOverrides(profile, {});
+}
+function validateProfile(name, variant, profile) {
+    const reference = builtInThemes.mona.variants.light;
+    for (const section of ["colors", "shadows", "motion", "effects", "shape", "components"]) {
+        const values = profile[section];
+        const missing = values
+            ? Object.keys(reference[section]).filter(key => !(key in values))
+            : Object.keys(reference[section]);
+        if (missing.length > 0) {
+            throw new Error(`Mona UI theme "${name}" is missing ${section} tokens for the "${variant}" variant: ${missing.join(", ")}.`);
+        }
+    }
+    validateCustomVariables(name, profile.custom);
+}
+function validateCustomVariables(name, custom) {
+    const requiredVariables = new Set(Object.keys(flattenThemeProfile(builtInThemes.mona.variants.light)));
+    const collisions = Object.keys(custom ?? {}).filter(key => requiredVariables.has(key));
+    if (collisions.length > 0) {
+        throw new Error(`Mona UI theme "${name}" custom variables collide with required tokens: ${collisions.join(", ")}.`);
+    }
+}
+
+const THEME_FAMILY_REGISTRATIONS = new InjectionToken("Mona UI theme family registrations");
+const THEME_OVERRIDE_REGISTRATIONS = new InjectionToken("Mona UI theme override registrations");
+const THEME_OPTIONS = new InjectionToken("Mona UI theme options", {
+    providedIn: "root",
+    factory: () => ({ initialTheme: { name: "mona", variant: "light" } })
+});
+const THEME_STRATEGY = new InjectionToken("Mona UI theme strategy", {
+    providedIn: "root",
+    factory: () => new DefaultThemeStrategy(inject(THEME_FAMILY_REGISTRATIONS, { optional: true }) ?? [], inject(THEME_OVERRIDE_REGISTRATIONS, { optional: true }) ?? [])
+});
 
 class ThemeService {
+    #appliedVariables;
     #document;
-    #theme;
-    #themeVariant;
+    #destroyRef;
+    #initialSelection;
+    #strategy;
+    #activeSelection;
+    #activeProfile;
+    #activeColorPaletteSeeds;
+    #transparencyQuery;
+    #runtimeColorPalette;
     constructor() {
+        this.#appliedVariables = new Set();
         this.#document = inject(DOCUMENT);
-        this.#theme = signal("mona", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#theme" }] : /* istanbul ignore next */ []));
-        this.#themeVariant = signal("light", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#themeVariant" }] : /* istanbul ignore next */ []));
-        this.themeId = signal("mona-light", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "themeId" }] : /* istanbul ignore next */ []));
-        this.theme = this.#theme.asReadonly();
-        this.themeVariant = this.#themeVariant.asReadonly();
-        this.updateThemeVariables();
+        this.#destroyRef = inject(DestroyRef);
+        this.#initialSelection = normalizeSelection(inject(THEME_OPTIONS).initialTheme);
+        this.#strategy = inject(THEME_STRATEGY);
+        this.#activeSelection = signal(this.#initialSelection, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#activeSelection" }] : /* istanbul ignore next */ []));
+        this.#activeProfile = signal(this.#strategy.resolve(this.#initialSelection), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#activeProfile" }] : /* istanbul ignore next */ []));
+        this.#activeColorPaletteSeeds = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#activeColorPaletteSeeds" }] : /* istanbul ignore next */ []));
+        this.#transparencyQuery = this.#document.defaultView?.matchMedia?.("(prefers-reduced-transparency: reduce)");
+        this.#runtimeColorPalette = null;
+        /** The consumer-provided seeds for the active runtime color palette, or `null` when provider defaults are active. */
+        this.colorPaletteSeeds = this.#activeColorPaletteSeeds.asReadonly();
+        this.profile = this.#activeProfile.asReadonly();
+        this.selection = this.#activeSelection.asReadonly();
+        this.themeName = computed(() => this.#activeSelection().name, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "themeName" }] : /* istanbul ignore next */ []));
+        this.themeVariant = computed(() => this.#activeSelection().variant, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "themeVariant" }] : /* istanbul ignore next */ []));
+        this.#applyTheme(this.#initialSelection, this.#activeProfile());
+        const query = this.#transparencyQuery;
+        if (query) {
+            const onPreferenceChange = () => this.#applyTheme(this.#activeSelection(), this.#activeProfile());
+            query.addEventListener("change", onPreferenceChange);
+            this.#destroyRef.onDestroy(() => query.removeEventListener("change", onPreferenceChange));
+        }
     }
-    setThemeId(themeId) {
-        const [theme, variant] = themeId.split("-");
-        this.#theme.set(theme);
-        this.#themeVariant.set(variant);
-        this.themeId.set(themeId);
-        this.updateThemeVariables();
+    /** Removes the runtime color palette and restores the registered profile and provider overrides. */
+    clearColorPalette() {
+        const selection = this.#activeSelection();
+        const profile = this.#strategy.resolve(selection);
+        this.#applyTheme(selection, profile);
+        this.#runtimeColorPalette = null;
+        this.#activeProfile.set(profile);
+        this.#activeColorPaletteSeeds.set(null);
     }
-    getActiveThemeVariables() {
-        const theme = this.theme();
-        const variant = this.themeVariant();
-        if (theme === "mona") {
-            return variant === "light" ? this.getMonaLightThemeVariables() : this.getMonaDarkThemeVariables();
-        }
-        return {};
+    /**
+     * Applies a runtime-generated semantic color palette after all registered profile overrides.
+     * The palette remains active across theme and light/dark switches until cleared.
+     */
+    setColorPalette(seeds) {
+        const normalizedSeeds = Object.freeze({ ...seeds });
+        const palette = generateThemeColorPalette(normalizedSeeds);
+        const selection = this.#activeSelection();
+        const baseProfile = this.#strategy.resolve(selection);
+        const profile = applyColorPalette(baseProfile, palette[selection.variant]);
+        this.#applyTheme(selection, profile);
+        this.#runtimeColorPalette = palette;
+        this.#activeProfile.set(profile);
+        this.#activeColorPaletteSeeds.set(normalizedSeeds);
     }
-    getMonaDarkThemeVariables() {
-        return {
-            "--color-background": "oklch(0.21 0 0)",
-            "--color-background-dark": "oklch(0.19 0 0)",
-            "--color-foreground": "oklch(100% 0.001 106.424)",
-            "--color-hover": "oklch(22.5% 0 0)",
-            "--color-active": "oklch(19.5% 0 0)",
-            "--color-selected": "oklch(24% 0 0)",
-            "--color-header-background": "oklch(0.18 0 0)",
-            "--color-header-foreground": "oklch(0.20 0 0)",
-            "--color-accent": "oklch(24.5% 0 0)",
-            "--color-accent-dark": "oklch(21.5% 0 0)",
-            "--color-accent-foreground": "oklch(97% 0 0)",
-            "--color-accent-hover": "oklch(26.5% 0 0)",
-            "--color-accent-active": "oklch(31.5% 0 0)",
-            "--color-input-background": "oklch(0.20 0 0)",
-            "--color-input-border": "oklch(0.12 0 0)",
-            "--color-input-hover": "oklch(0.22 0 0)",
-            "--color-input-active": "oklch(0.21 0 0)",
-            "--color-popover": "#fff",
-            "--color-popover-foreground": "#09090b",
-            ...generatePrimaryColorPalette(themeColorMap.flora),
-            "--color-secondary": "oklch(0.27 0 0)",
-            "--color-secondary-foreground": "oklch(97.7% 0.001 106.424)",
-            "--color-secondary-hover": "oklch(0.29 0 0)",
-            "--color-secondary-active": "oklch(0.31 0 0)",
-            // "--color-secondary-selected": "oklch(43.8% 0.195 277.366 / 0.5)",
-            "--color-success": "oklch(62.7% 0.194 149.214)",
-            "--color-success-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-success-hover": "oklch(66.7% 0.194 149.214)",
-            "--color-success-active": "oklch(54.7% 0.194 149.214)",
-            "--color-success-selected": "oklch(76.7% 0.194 149.214)",
-            "--color-error": "oklch(57.7% 0.245 27.325)",
-            "--color-error-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-error-hover": "oklch(61.7% 0.245 27.325)",
-            "--color-error-active": "oklch(53.7% 0.245 27.325)",
-            "--color-error-selected": "oklch(71.7% 0.245 27.325)",
-            "--color-warning": "oklch(66.6% 0.179 58.318)",
-            "--color-warning-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-warning-hover": "oklch(70.6% 0.179 58.318)",
-            "--color-warning-active": "oklch(58.6% 0.179 58.318)",
-            "--color-warning-selected": "oklch(80.6% 0.179 58.318)",
-            "--color-info": "oklch(54.6% 0.245 262.881)",
-            "--color-info-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-info-hover": "oklch(58.6% 0.245 262.881)",
-            "--color-info-active": "oklch(46.6% 0.245 262.881)",
-            "--color-info-selected": "oklch(68.6% 0.245 262.881)",
-            "--color-muted": "#f4f4f5",
-            "--color-muted-foreground": "#71717a",
-            "--color-border": "oklch(0.1689 0.0021 286.18)",
-            "--color-input": "#e4e4e7",
-            "--color-chart-1": "#e76e50",
-            "--color-chart-2": "#2a9d90",
-            "--color-chart-3": "#274754",
-            "--color-chart-4": "#e8c468",
-            "--color-chart-5": "#f4a462",
-            "--color-scrollbar-thumb": "#d1d5db",
-            "--color-scrollbar-thumb-hover": "#9ca3af",
-            "--color-scrollbar-thumb-active": "#6b7280",
-            "--color-scrollbar-thumb-focus": "#9ca3af",
-            "--color-scrollbar-track": "#f9fafb",
-            "--color-scrollbar-track-hover": "#f4f5f7",
-            "--color-scrollbar-track-active": "#e5e7eb",
-            "--color-scrollbar-track-focus": "#f4f5f7",
-            "--color-scrollbar-corner": "#f9fafb",
-            // Temporary variables for testing purposes
-            "--page-background": "#1a1b1c",
-            "--color-demo-background": "#202122"
-            // "--color-demo-background": "oklch(0.24 0 0)"
-        };
+    /** Updates only the runtime primary seed while retaining any other active runtime seeds. */
+    setPrimaryColor(primary) {
+        this.setColorPalette({ ...(this.#activeColorPaletteSeeds() ?? {}), primary });
     }
-    getMonaLightThemeVariables() {
-        return {
-            "--color-background": "oklch(1 0 0)",
-            "--color-background-dark": "oklch(0.99 0 0)",
-            "--color-foreground": "oklch(0.1407 0.0044 285.82)",
-            "--color-hover": "oklch(0.96 0 0)",
-            "--color-active": "oklch(0.94 0 0)",
-            "--color-selected": "#f4f5f7",
-            "--color-header-background": "oklch(0.97 0 0)",
-            "--color-header-foreground": "oklch(0.99 0 0)",
-            "--color-accent": "oklch(0.96 0 0)",
-            "--color-accent-dark": "oklch(0.93 0 0)",
-            "--color-accent-foreground": "oklch(0.21 0 0)",
-            "--color-accent-hover": "oklch(0.95 0 0)",
-            "--color-accent-active": "oklch(0.90 0 0)",
-            "--color-input-background": "oklch(1 0 0)",
-            "--color-input-border": "oklch(0.92 0 0)",
-            "--color-input-hover": "oklch(0.95 0 0)",
-            "--color-input-active": "oklch(0.98 0 0)",
-            "--color-popover": "#fff",
-            "--color-popover-foreground": "#09090b",
-            ...generatePrimaryColorPalette("oklch(0.21 0.01 0)"),
-            // ...generatePrimaryColorPalette("oklch(0.59 0.25 17.59)"),
-            "--color-secondary": "oklch(.97 0 0)",
-            "--color-secondary-foreground": "oklch(0.21 0 0)",
-            "--color-secondary-hover": "oklch(0.95 0 0)",
-            "--color-secondary-active": "oklch(0.90 0 0)",
-            "--color-success": "oklch(62.7% 0.194 149.214)",
-            "--color-success-foreground": "oklch(97.7% 0.001 106.424)",
-            "--color-success-hover": "oklch(66.7% 0.194 149.214)",
-            "--color-success-active": "oklch(54.7% 0.194 149.214)",
-            "--color-success-selected": "oklch(76.7% 0.194 149.214)",
-            "--color-error": "oklch(57.7% 0.245 27.325)",
-            "--color-error-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-error-hover": "oklch(61.7% 0.245 27.325)",
-            "--color-error-active": "oklch(53.7% 0.245 27.325)",
-            "--color-error-selected": "oklch(71.7% 0.245 27.325)",
-            "--color-warning": "oklch(66.6% 0.179 58.318)",
-            "--color-warning-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-warning-hover": "oklch(70.6% 0.179 58.318)",
-            "--color-warning-active": "oklch(58.6% 0.179 58.318)",
-            "--color-warning-selected": "oklch(80.6% 0.179 58.318)",
-            "--color-info": "oklch(54.6% 0.245 262.881)",
-            "--color-info-foreground": "oklch(94.3% 0.029 294.588)",
-            "--color-info-hover": "oklch(58.6% 0.245 262.881)",
-            "--color-info-active": "oklch(46.6% 0.245 262.881)",
-            "--color-info-selected": "oklch(68.6% 0.245 262.881)",
-            "--color-muted": "#f4f4f5",
-            "--color-muted-foreground": "#71717a",
-            "--color-destructive": "#ef4444",
-            "--color-destructive-foreground": "#fafafa",
-            "--color-border": "oklch(0.9197 0.004 286.32)",
-            "--color-input": "#e4e4e7",
-            "--color-chart-1": "#e76e50",
-            "--color-chart-2": "#2a9d90",
-            "--color-chart-3": "#274754",
-            "--color-chart-4": "#e8c468",
-            "--color-chart-5": "#f4a462",
-            "--color-scrollbar-thumb": "#d1d5db",
-            "--color-scrollbar-thumb-hover": "#9ca3af",
-            "--color-scrollbar-thumb-active": "#6b7280",
-            "--color-scrollbar-thumb-focus": "#9ca3af",
-            "--color-scrollbar-track": "#f9fafb",
-            "--color-scrollbar-track-hover": "#f4f5f7",
-            "--color-scrollbar-track-active": "#e5e7eb",
-            "--color-scrollbar-track-focus": "#f4f5f7",
-            "--color-scrollbar-corner": "#f9fafb",
-            "--page-background": "#fff",
-            "--color-demo-background": "#f9fafb"
-        };
+    setTheme(selection) {
+        const normalized = normalizeSelection(selection);
+        const profile = this.#resolveProfile(normalized);
+        this.#applyTheme(normalized, profile);
+        this.#activeProfile.set(profile);
+        this.#activeSelection.set(normalized);
     }
-    updateThemeVariables() {
-        const themeVariables = this.getActiveThemeVariables();
-        const root = this.#document.querySelector(":root");
-        Object.entries(themeVariables).forEach(([key, value]) => {
-            root.style.setProperty(key, value);
-        });
+    #applyTheme(selection, profile) {
+        const root = this.#document.documentElement;
+        if (!root) {
+            return;
+        }
+        const transparency = this.#getTransparencyMode();
+        const variables = getEffectiveVariables(profile, transparency);
+        for (const previousName of this.#appliedVariables) {
+            if (!(previousName in variables)) {
+                root.style.removeProperty(previousName);
+            }
+        }
+        for (const [name, value] of Object.entries(variables)) {
+            root.style.setProperty(name, value);
+        }
+        root.setAttribute("data-mona-theme", selection.name);
+        root.setAttribute("data-mona-variant", selection.variant);
+        root.setAttribute("data-mona-transparency", transparency);
+        this.#appliedVariables.clear();
+        for (const name of Object.keys(variables)) {
+            this.#appliedVariables.add(name);
+        }
+    }
+    #getTransparencyMode() {
+        const css = this.#document.defaultView?.CSS;
+        const supportsBackdropFilter = css?.supports("backdrop-filter", "blur(1px)") === true ||
+            css?.supports("-webkit-backdrop-filter", "blur(1px)") === true;
+        return supportsBackdropFilter && this.#transparencyQuery?.matches !== true ? "full" : "reduced";
+    }
+    #resolveProfile(selection) {
+        const profile = this.#strategy.resolve(selection);
+        const palette = this.#runtimeColorPalette;
+        return palette ? applyColorPalette(profile, palette[selection.variant]) : profile;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ThemeService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: "root"
-                }]
+            args: [{ providedIn: "root" }]
         }], ctorParameters: () => [] });
+const effectLevels = ["control", "raised", "overlay"];
+function applyColorPalette(profile, colors) {
+    return Object.freeze({
+        ...profile,
+        colors: Object.freeze({ ...profile.colors, ...colors })
+    });
+}
+function getEffectiveVariables(profile, transparency) {
+    const variables = { ...flattenThemeProfile(profile) };
+    if (transparency === "full") {
+        return variables;
+    }
+    for (const level of effectLevels) {
+        variables[`--mona-effect-${level}-background-color`] =
+            profile.effects[`--mona-effect-${level}-fallback-background-color`];
+        variables[`--mona-effect-${level}-background-image`] = "none";
+        variables[`--mona-effect-${level}-backdrop-filter`] = "none";
+    }
+    return variables;
+}
+function normalizeSelection(selection) {
+    return Object.freeze({ name: selection.name, variant: selection.variant });
+}
+
+function provideThemeFamily(registration) {
+    return makeEnvironmentProviders([{ provide: THEME_FAMILY_REGISTRATIONS, multi: true, useValue: registration }]);
+}
+function provideThemeOverrides(registration) {
+    return makeEnvironmentProviders([{ provide: THEME_OVERRIDE_REGISTRATIONS, multi: true, useValue: registration }]);
+}
+function provideThemeOptions(options) {
+    return makeEnvironmentProviders([{ provide: THEME_OPTIONS, useValue: options }]);
+}
+function provideThemeColorPalette(registration) {
+    const colors = generateThemeColorPalette(registration.seeds);
+    return provideThemeOverrides({
+        theme: registration.theme,
+        light: { colors: colors.light },
+        dark: { colors: colors.dark }
+    });
+}
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/theme
@@ -310,5 +1152,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ThemeService };
+export { THEME_STRATEGY, ThemeService, flattenThemeProfile, generateThemeColorPalette, provideThemeColorPalette, provideThemeFamily, provideThemeOptions, provideThemeOverrides };
 //# sourceMappingURL=nanahoshi-mona-ui-theme.mjs.map