@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,314 @@
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, signal, Injectable } from '@angular/core';
+
+/**
+ * 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.
+ */
+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;
+        }
+        const chromaValue = parseFloat(matchResult[3]);
+        const hueValue = parseFloat(matchResult[4]);
+        let alphaValue = undefined;
+        if (matchResult[5] !== undefined) {
+            alphaValue = parseFloat(matchResult[5]);
+        }
+        return { l: lightnessValue, c: chromaValue, h: hueValue, a: alphaValue };
+    }
+    return null;
+}
+/**
+ * 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;
+    }
+    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()}`;
+    }
+    oklchOutputString += `)`;
+    return oklchOutputString;
+}
+/**
+ * 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
+    });
+    colorPalette["--color-primary-hover"] = formatOklch({
+        l: primaryColor.l + 6,
+        c: primaryColor.c,
+        h: primaryColor.h
+    });
+    colorPalette["--color-primary-active"] = formatOklch({
+        l: primaryColor.l - 4,
+        c: primaryColor.c,
+        h: primaryColor.h
+    });
+    colorPalette["--color-primary-selected"] = formatOklch({
+        l: primaryColor.l + 9,
+        c: primaryColor.c,
+        h: primaryColor.h
+    });
+    colorPalette["--color-secondary-selected"] = formatOklch({
+        l: primaryColor.l + 4,
+        c: primaryColor.c,
+        h: primaryColor.h,
+        a: 0.5
+    });
+    return colorPalette;
+}
+
+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)"
+};
+
+class ThemeService {
+    #document;
+    #theme;
+    #themeVariant;
+    constructor() {
+        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();
+    }
+    setThemeId(themeId) {
+        const [theme, variant] = themeId.split("-");
+        this.#theme.set(theme);
+        this.#themeVariant.set(variant);
+        this.themeId.set(themeId);
+        this.updateThemeVariables();
+    }
+    getActiveThemeVariables() {
+        const theme = this.theme();
+        const variant = this.themeVariant();
+        if (theme === "mona") {
+            return variant === "light" ? this.getMonaLightThemeVariables() : this.getMonaDarkThemeVariables();
+        }
+        return {};
+    }
+    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)"
+        };
+    }
+    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"
+        };
+    }
+    updateThemeVariables() {
+        const themeVariables = this.getActiveThemeVariables();
+        const root = this.#document.querySelector(":root");
+        Object.entries(themeVariables).forEach(([key, value]) => {
+            root.style.setProperty(key, value);
+        });
+    }
+    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"
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/theme
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ThemeService };
+//# sourceMappingURL=nanahoshi-mona-ui-theme.mjs.map