@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/theme-color-picker/hueShift.js

@@ -6,6 +6,7 @@ const checkCspAllowsInlineStyles = ()=>{
     try {
         const testEl = document.createElement("div");
         testEl.style.setProperty("--csp-test", "1");
+        if (!document.body) return true;
         document.body.appendChild(testEl);
         const computed = getComputedStyle(testEl).getPropertyValue("--csp-test");
         document.body.removeChild(testEl);
@@ -13,479 +14,162 @@ const checkCspAllowsInlineStyles = ()=>{
     } catch  {
         cspAllowsInlineStyles = false;
     }
-    if (!cspAllowsInlineStyles) console.info("[hueShift] CSP blocks inline styles - hue customization disabled");
-    return cspAllowsInlineStyles;
+    if (false === cspAllowsInlineStyles) console.info("[themeColor] CSP blocks inline styles - theme color customization disabled");
+    return cspAllowsInlineStyles ?? true;
 };
-const MIN_CHROMA_SCALE = 0.3;
-function hslHueToOklchHue(hslHue) {
-    const h = (hslHue % 360 + 360) % 360;
-    const controlPoints = [
-        [
-            0,
-            29
-        ],
-        [
-            30,
-            55
-        ],
-        [
-            60,
-            100
-        ],
-        [
-            120,
-            145
-        ],
-        [
-            180,
-            195
-        ],
-        [
-            240,
-            265
-        ],
-        [
-            300,
-            330
-        ],
-        [
-            360,
-            389
-        ]
-    ];
-    for(let i = 0; i < controlPoints.length - 1; i++){
-        const [h1, o1] = controlPoints[i];
-        const [h2, o2] = controlPoints[i + 1];
-        if (h >= h1 && h <= h2) {
-            const t = (h - h1) / (h2 - h1);
-            const oklchHue = o1 + t * (o2 - o1);
-            return (oklchHue % 360 + 360) % 360;
-        }
-    }
-    return h;
-}
-const PRIMARY_SETTINGS = {
-    light: {
-        "--color-primary": {
-            l: 58,
-            c: 0.22
-        },
-        "--color-primary-content": {
-            l: 98,
-            c: 0.02
-        }
-    },
-    dark: {
-        "--color-primary": {
-            l: 75,
-            c: 0.18
-        },
-        "--color-primary-content": {
-            l: 15,
-            c: 0.02
-        }
-    }
-};
-const HARMONY_OFFSETS = {
-    secondary: 108,
-    accent: -94
-};
-const HARMONY_SETTINGS = {
-    light: {
-        "--color-secondary": {
-            l: 68,
-            c: 0.162
-        },
-        "--color-secondary-content": {
-            l: 98,
-            c: 0.026
-        },
-        "--color-accent": {
-            l: 62,
-            c: 0.2
-        },
-        "--color-accent-content": {
-            l: 98,
-            c: 0.014
-        }
-    },
-    dark: {
-        "--color-secondary": {
-            l: 72,
-            c: 0.16
-        },
-        "--color-secondary-content": {
-            l: 15,
-            c: 0.013
-        },
-        "--color-accent": {
-            l: 78,
-            c: 0.12
-        },
-        "--color-accent-content": {
-            l: 15,
-            c: 0.014
-        }
-    }
-};
-const SEMANTIC_BASE_HUES = {
-    success: 140,
-    warning: 55,
-    error: 10,
-    info: 220
-};
-const SEMANTIC_TINT_FACTOR = 0.12;
-const SEMANTIC_SETTINGS = {
-    light: {
-        "--color-success": {
-            l: 72,
-            c: 0.219
-        },
-        "--color-success-content": {
-            l: 98,
-            c: 0.018
-        },
-        "--color-warning": {
-            l: 70,
-            c: 0.213
-        },
-        "--color-warning-content": {
-            l: 98,
-            c: 0.016
-        },
-        "--color-error": {
-            l: 65,
-            c: 0.241
-        },
-        "--color-error-content": {
-            l: 97,
-            c: 0.014
-        },
-        "--color-info": {
-            l: 68,
-            c: 0.169
-        },
-        "--color-info-content": {
-            l: 97,
-            c: 0.013
-        }
-    },
-    dark: {
-        "--color-success": {
-            l: 76,
-            c: 0.233
-        },
-        "--color-success-content": {
-            l: 98,
-            c: 0.031
-        },
-        "--color-warning": {
-            l: 79,
-            c: 0.184
-        },
-        "--color-warning-content": {
-            l: 98,
-            c: 0.026
-        },
-        "--color-error": {
-            l: 64,
-            c: 0.246
-        },
-        "--color-error-content": {
-            l: 96,
-            c: 0.015
-        },
-        "--color-info": {
-            l: 71,
-            c: 0.143
-        },
-        "--color-info-content": {
-            l: 98,
-            c: 0.019
-        }
-    }
+const PRIMARY_VARS = [
+    "--color-primary",
+    "--nf-accent",
+    "--color-nf-accent"
+];
+const CONTENT_VARS = [
+    "--color-primary-content",
+    "--nf-on-accent",
+    "--color-nf-on-accent"
+];
+const BACKGROUND_VARS = {
+    light: [
+        {
+            name: "--color-base-100",
+            anchor: "oklch(98% 0.001 106.423)",
+            mix: 4
+        },
+        {
+            name: "--color-base-200",
+            anchor: "oklch(97% 0.001 106.424)",
+            mix: 5
+        },
+        {
+            name: "--color-base-300",
+            anchor: "oklch(92% 0.003 48.717)",
+            mix: 7
+        },
+        {
+            name: "--gradient-start",
+            anchor: "#ffffff",
+            mix: 18
+        },
+        {
+            name: "--gradient-end",
+            anchor: "#f5f5f5",
+            mix: 10
+        }
+    ],
+    dark: [
+        {
+            name: "--color-base-100",
+            anchor: "oklch(13% 0.028 261.692)",
+            mix: 8
+        },
+        {
+            name: "--color-base-200",
+            anchor: "oklch(21% 0.034 264.665)",
+            mix: 9
+        },
+        {
+            name: "--color-base-300",
+            anchor: "oklch(27% 0.033 256.848)",
+            mix: 11
+        },
+        {
+            name: "--gradient-start",
+            anchor: "#0f1420",
+            mix: 20
+        },
+        {
+            name: "--gradient-end",
+            anchor: "#060910",
+            mix: 12
+        }
+    ]
 };
-const NF_ACCENT_SETTINGS = {
-    light: {
-        "--nf-accent": {
-            l: 58,
-            c: 0.22
-        },
-        "--nf-on-accent": {
-            l: 98,
-            c: 0.02
-        },
-        "--color-nf-accent": {
-            l: 58,
-            c: 0.22
-        },
-        "--color-nf-on-accent": {
-            l: 98,
-            c: 0.02
-        }
-    },
-    dark: {
-        "--nf-accent": {
-            l: 75,
-            c: 0.18
-        },
-        "--nf-on-accent": {
-            l: 15,
-            c: 0.02
-        },
-        "--color-nf-accent": {
-            l: 75,
-            c: 0.18
-        },
-        "--color-nf-on-accent": {
-            l: 15,
-            c: 0.02
-        }
-    }
-};
-const BASE_COLORS = {
-    light: {
-        "--color-base-100": {
-            l: 98,
-            c: 0.001,
-            h: 106.423
-        },
-        "--color-base-200": {
-            l: 97,
-            c: 0.001,
-            h: 106.424
-        },
-        "--color-base-300": {
-            l: 92,
-            c: 0.003,
-            h: 48.717
-        }
-    },
-    dark: {
-        "--color-base-100": {
-            l: 13,
-            c: 0.028,
-            h: 261.692
-        },
-        "--color-base-200": {
-            l: 21,
-            c: 0.034,
-            h: 264.665
-        },
-        "--color-base-300": {
-            l: 27,
-            c: 0.033,
-            h: 256.848
-        }
-    }
-};
-const BASE_CHROMA_BOOST = {
-    light: 0,
-    dark: 0.025
-};
-const GRADIENT_COLORS = {
-    light: {
-        "--gradient-start": {
-            h: 347,
-            s: 8,
-            l: 96
-        },
-        "--gradient-end": {
-            h: 199,
-            s: 8,
-            l: 97
-        }
-    },
-    dark: {
-        "--gradient-start": {
-            h: 261,
-            s: 38,
-            l: 15
-        },
-        "--gradient-end": {
-            h: 220,
-            s: 54,
-            l: 8
-        }
-    }
-};
-function toOklch(l, c, h) {
-    const normalizedH = (h % 360 + 360) % 360;
-    return `oklch(${l}% ${c} ${normalizedH})`;
-}
-function hslToHex(h, s, l) {
-    const normalizedH = (h % 360 + 360) % 360;
-    const sNorm = s / 100;
-    const lNorm = l / 100;
-    const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
-    const x = c * (1 - Math.abs(normalizedH / 60 % 2 - 1));
-    const m = lNorm - c / 2;
-    let r = 0, g = 0, b = 0;
-    if (normalizedH < 60) {
-        r = c;
-        g = x;
-        b = 0;
-    } else if (normalizedH < 120) {
-        r = x;
-        g = c;
-        b = 0;
-    } else if (normalizedH < 180) {
-        r = 0;
-        g = c;
-        b = x;
-    } else if (normalizedH < 240) {
-        r = 0;
-        g = x;
-        b = c;
-    } else if (normalizedH < 300) {
-        r = x;
-        g = 0;
-        b = c;
-    } else {
-        r = c;
-        g = 0;
-        b = x;
-    }
-    const toHex = (n)=>{
-        const hex = Math.round((n + m) * 255).toString(16);
-        return 1 === hex.length ? "0" + hex : hex;
-    };
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function getTintedHue(baseHue, targetHue) {
-    let diff = targetHue - baseHue;
-    if (diff > 180) diff -= 360;
-    if (diff < -180) diff += 360;
-    return baseHue + diff * SEMANTIC_TINT_FACTOR;
-}
 function getResolvedTheme() {
+    if ("undefined" == typeof document) return "light";
     const dataTheme = document.documentElement.getAttribute("data-theme");
     if ("dark" === dataTheme) return "dark";
     if ("light" === dataTheme) return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function applyHueShift(targetHue, saturation = 100, lightnessOffset = 0) {
+function parseHex(hex) {
+    let h = hex.trim();
+    if (h.startsWith("#")) h = h.slice(1);
+    if (3 === h.length) h = h.split("").map((c)=>c + c).join("");
+    if (6 !== h.length) return null;
+    const r = Number.parseInt(h.slice(0, 2), 16);
+    const g = Number.parseInt(h.slice(2, 4), 16);
+    const b = Number.parseInt(h.slice(4, 6), 16);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
+    return {
+        r,
+        g,
+        b
+    };
+}
+function relativeLuminance(r, g, b) {
+    const toLin = (c)=>{
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * toLin(r) + 0.7152 * toLin(g) + 0.0722 * toLin(b);
+}
+function pickContentColor(r, g, b) {
+    const bgL = relativeLuminance(r, g, b);
+    const whiteL = 1;
+    const darkL = relativeLuminance(0x11, 0x11, 0x11);
+    const contrastWithWhite = (whiteL + 0.05) / (bgL + 0.05);
+    const contrastWithDark = (bgL + 0.05) / (darkL + 0.05);
+    return contrastWithWhite >= contrastWithDark ? "#ffffff" : "#111111";
+}
+function applyThemeColor(hex) {
     if (!checkCspAllowsInlineStyles()) return;
+    const rgb = parseHex(hex);
+    if (!rgb) return;
     const root = document.documentElement;
-    const oklchHue = hslHueToOklchHue(targetHue);
-    const chromaScale = 0 === saturation ? 0 : MIN_CHROMA_SCALE + saturation / 100 * (1 - MIN_CHROMA_SCALE);
+    const content = pickContentColor(rgb.r, rgb.g, rgb.b);
     const resolvedTheme = getResolvedTheme();
-    const clampL = (l)=>Math.max(0, Math.min(100, l + lightnessOffset));
-    const primarySettings = PRIMARY_SETTINGS[resolvedTheme];
-    for (const [varName, settings] of Object.entries(primarySettings)){
-        const scaledChroma = settings.c * chromaScale;
-        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, oklchHue));
-    }
-    const harmonySettings = HARMONY_SETTINGS[resolvedTheme];
-    for (const [varName, settings] of Object.entries(harmonySettings)){
-        let hue = oklchHue;
-        if (varName.includes("secondary")) hue = oklchHue + HARMONY_OFFSETS.secondary;
-        else if (varName.includes("accent")) hue = oklchHue + HARMONY_OFFSETS.accent;
-        const scaledChroma = settings.c * chromaScale;
-        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, hue));
-    }
-    const semanticSettings = SEMANTIC_SETTINGS[resolvedTheme];
-    for (const [varName, settings] of Object.entries(semanticSettings)){
-        let baseHue = 0;
-        if (varName.includes("success")) baseHue = SEMANTIC_BASE_HUES.success;
-        else if (varName.includes("warning")) baseHue = SEMANTIC_BASE_HUES.warning;
-        else if (varName.includes("error")) baseHue = SEMANTIC_BASE_HUES.error;
-        else if (varName.includes("info")) baseHue = SEMANTIC_BASE_HUES.info;
-        const tintedHue = getTintedHue(baseHue, oklchHue);
-        const semanticChromaScale = 0 === saturation ? 0 : MIN_CHROMA_SCALE + (1 - MIN_CHROMA_SCALE) * Math.sqrt(saturation / 100);
-        const scaledChroma = settings.c * semanticChromaScale;
-        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, tintedHue));
-    }
-    const gradients = GRADIENT_COLORS[resolvedTheme];
-    for (const [varName, color] of Object.entries(gradients)){
-        const scaledSat = color.s * (saturation / 100);
-        const shifted = hslToHex(targetHue + (varName.includes("end") ? 40 : 0), scaledSat, color.l);
-        root.style.setProperty(varName, shifted);
-    }
-    const baseColors = BASE_COLORS[resolvedTheme];
-    const baseBoost = BASE_CHROMA_BOOST[resolvedTheme];
-    for (const [varName, color] of Object.entries(baseColors)){
-        const baseChroma = Math.max(color.c, baseBoost);
-        const scaledChroma = baseChroma * chromaScale;
-        const hue = baseBoost > 0 ? oklchHue : color.h;
-        const shifted = toOklch(clampL(color.l), scaledChroma, hue);
-        root.style.setProperty(varName, shifted);
-    }
-    const nfAccentSettings = NF_ACCENT_SETTINGS[resolvedTheme];
-    for (const [varName, settings] of Object.entries(nfAccentSettings)){
-        const scaledChroma = settings.c * chromaScale;
-        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, oklchHue));
-    }
+    for (const varName of PRIMARY_VARS)root.style.setProperty(varName, hex, "important");
+    for (const varName of CONTENT_VARS)root.style.setProperty(varName, content, "important");
+    for (const { name, anchor, mix } of BACKGROUND_VARS[resolvedTheme])root.style.setProperty(name, `color-mix(in oklab, ${hex} ${mix}%, ${anchor})`, "important");
 }
 function resetHueShift() {
     if (!checkCspAllowsInlineStyles()) return;
     const root = document.documentElement;
-    for (const varName of Object.keys(PRIMARY_SETTINGS.light))root.style.removeProperty(varName);
-    for (const varName of Object.keys(HARMONY_SETTINGS.light))root.style.removeProperty(varName);
-    for (const varName of Object.keys(SEMANTIC_SETTINGS.light))root.style.removeProperty(varName);
-    for (const varName of Object.keys(GRADIENT_COLORS.light))root.style.removeProperty(varName);
-    for (const varName of Object.keys(BASE_COLORS.light))root.style.removeProperty(varName);
-    for (const varName of Object.keys(NF_ACCENT_SETTINGS.light))root.style.removeProperty(varName);
+    for (const varName of PRIMARY_VARS)root.style.removeProperty(varName);
+    for (const varName of CONTENT_VARS)root.style.removeProperty(varName);
+    for (const { name } of BACKGROUND_VARS.light)root.style.removeProperty(name);
 }
 function createHueShiftStore(storagePrefix) {
-    const STORAGE_KEY = `${storagePrefix}_hue_shift`;
-    const STORAGE_KEY_SAT = `${storagePrefix}_hue_saturation`;
-    const STORAGE_KEY_LIT = `${storagePrefix}_hue_lightness`;
-    const getInitialHueShift = ()=>{
+    const STORAGE_KEY = `${storagePrefix}_theme_color`;
+    const LEGACY_KEYS = [
+        `${storagePrefix}_hue_shift`,
+        `${storagePrefix}_hue_saturation`,
+        `${storagePrefix}_hue_lightness`
+    ];
+    const getInitial = ()=>{
         if ("undefined" == typeof window) return null;
+        for (const key of LEGACY_KEYS)localStorage.removeItem(key);
         const saved = localStorage.getItem(STORAGE_KEY);
-        if (null !== saved) {
-            const parsed = parseFloat(saved);
-            if (!isNaN(parsed)) return parsed;
-        }
+        if (saved && parseHex(saved)) return saved;
         return null;
     };
-    const getInitialSaturation = ()=>{
-        if ("undefined" == typeof window) return 100;
-        const saved = localStorage.getItem(STORAGE_KEY_SAT);
-        if (null !== saved) {
-            const parsed = parseFloat(saved);
-            if (!isNaN(parsed)) return parsed;
-        }
-        return 100;
-    };
-    const getInitialLightness = ()=>{
-        if ("undefined" == typeof window) return 0;
-        const saved = localStorage.getItem(STORAGE_KEY_LIT);
-        if (null !== saved) {
-            const parsed = parseFloat(saved);
-            if (!isNaN(parsed)) return parsed;
-        }
-        return 0;
-    };
-    const [hueShift, setHueShiftInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitialHueShift());
-    const [hueSaturation, setHueSaturationInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitialSaturation());
-    const [hueLightness, setHueLightnessInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitialLightness());
+    const [themeColor, setThemeColorInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitial());
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const shift = hueShift();
-        const sat = hueSaturation();
-        const lit = hueLightness();
+        const color = themeColor();
         if ("undefined" == typeof window) return;
-        if (null === shift) {
+        if (null === color) {
             localStorage.removeItem(STORAGE_KEY);
-            localStorage.removeItem(STORAGE_KEY_SAT);
-            localStorage.removeItem(STORAGE_KEY_LIT);
             resetHueShift();
         } else {
-            localStorage.setItem(STORAGE_KEY, String(shift));
-            localStorage.setItem(STORAGE_KEY_SAT, String(sat));
-            localStorage.setItem(STORAGE_KEY_LIT, String(lit));
-            applyHueShift(shift, sat, lit);
+            localStorage.setItem(STORAGE_KEY, color);
+            applyThemeColor(color);
         }
     });
     if ("undefined" != typeof window) {
         const observer = new MutationObserver((mutations)=>{
-            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
-                const shift = hueShift();
-                const sat = hueSaturation();
-                const lit = hueLightness();
-                if (null !== shift) requestAnimationFrame(()=>applyHueShift(shift, sat, lit));
-            }
+            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(()=>{
+                const color = themeColor();
+                if (null !== color) applyThemeColor(color);
+            });
         });
         observer.observe(document.documentElement, {
             attributes: true,
@@ -494,16 +178,14 @@ function createHueShiftStore(storagePrefix) {
             ]
         });
     }
-    const setHueShift = (hue, saturation = 100, lightness = 0)=>{
-        setHueShiftInternal(hue);
-        setHueSaturationInternal(saturation);
-        setHueLightnessInternal(lightness);
+    const setThemeColor = (color)=>{
+        if (null === color) return void setThemeColorInternal(null);
+        if (!parseHex(color)) return;
+        setThemeColorInternal(color);
     };
     return {
-        hueShift,
-        hueSaturation,
-        hueLightness,
-        setHueShift,
+        themeColor,
+        setThemeColor,
         isAvailable: ()=>checkCspAllowsInlineStyles()
     };
 }

package/dist/components/theme-color-picker/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ThemeColorPicker } from "./ThemeColorPicker";
-export type { ThemeColorPickerProps } from "./ThemeColorPicker";
+export type { ThemeColorPickerProps, ThemeColorPickerAlign } from "./ThemeColorPicker";
 export { createHueShiftStore, getDefaultHueShiftStore, resetHueShift, type HueShiftStore, } from "./hueShift";

package/dist/components/time-field/TimeField.classes.d.ts

@@ -0,0 +1,37 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "time-field";
+        readonly variant: {
+            readonly primary: "time-field--primary";
+            readonly secondary: "time-field--secondary";
+        };
+        readonly flag: {
+            readonly fullWidth: "time-field--full-width";
+        };
+    };
+    readonly Group: {
+        readonly base: "date-input-group";
+        readonly variant: {
+            readonly primary: "date-input-group--primary";
+            readonly secondary: "date-input-group--secondary";
+        };
+        readonly flag: {
+            readonly fullWidth: "date-input-group--full-width";
+        };
+    };
+    readonly Input: {
+        readonly base: "date-input-group__input";
+    };
+    readonly InputContainer: {
+        readonly base: "date-input-group__input-container";
+    };
+    readonly Segment: {
+        readonly base: "date-input-group__segment";
+    };
+    readonly Prefix: {
+        readonly base: "date-input-group__prefix";
+    };
+    readonly Suffix: {
+        readonly base: "date-input-group__suffix";
+    };
+};