@pathscale/ui 1.1.55 → 1.1.56

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

@@ -6,7 +6,6 @@ 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);
@@ -14,162 +13,479 @@ const checkCspAllowsInlineStyles = ()=>{
     } catch  {
         cspAllowsInlineStyles = false;
     }
-    if (false === cspAllowsInlineStyles) console.info("[themeColor] CSP blocks inline styles - theme color customization disabled");
-    return cspAllowsInlineStyles ?? true;
+    if (!cspAllowsInlineStyles) console.info("[hueShift] CSP blocks inline styles - hue customization disabled");
+    return cspAllowsInlineStyles;
 };
-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 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 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 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) {
+function applyHueShift(targetHue, saturation = 100, lightnessOffset = 0) {
     if (!checkCspAllowsInlineStyles()) return;
-    const rgb = parseHex(hex);
-    if (!rgb) return;
     const root = document.documentElement;
-    const content = pickContentColor(rgb.r, rgb.g, rgb.b);
+    const oklchHue = hslHueToOklchHue(targetHue);
+    const chromaScale = 0 === saturation ? 0 : MIN_CHROMA_SCALE + saturation / 100 * (1 - MIN_CHROMA_SCALE);
     const resolvedTheme = getResolvedTheme();
-    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");
+    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));
+    }
 }
 function resetHueShift() {
     if (!checkCspAllowsInlineStyles()) return;
     const root = document.documentElement;
-    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);
+    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);
 }
 function createHueShiftStore(storagePrefix) {
-    const STORAGE_KEY = `${storagePrefix}_theme_color`;
-    const LEGACY_KEYS = [
-        `${storagePrefix}_hue_shift`,
-        `${storagePrefix}_hue_saturation`,
-        `${storagePrefix}_hue_lightness`
-    ];
-    const getInitial = ()=>{
+    const STORAGE_KEY = `${storagePrefix}_hue_shift`;
+    const STORAGE_KEY_SAT = `${storagePrefix}_hue_saturation`;
+    const STORAGE_KEY_LIT = `${storagePrefix}_hue_lightness`;
+    const getInitialHueShift = ()=>{
         if ("undefined" == typeof window) return null;
-        for (const key of LEGACY_KEYS)localStorage.removeItem(key);
         const saved = localStorage.getItem(STORAGE_KEY);
-        if (saved && parseHex(saved)) return saved;
+        if (null !== saved) {
+            const parsed = parseFloat(saved);
+            if (!isNaN(parsed)) return parsed;
+        }
         return null;
     };
-    const [themeColor, setThemeColorInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitial());
+    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());
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const color = themeColor();
+        const shift = hueShift();
+        const sat = hueSaturation();
+        const lit = hueLightness();
         if ("undefined" == typeof window) return;
-        if (null === color) {
+        if (null === shift) {
             localStorage.removeItem(STORAGE_KEY);
+            localStorage.removeItem(STORAGE_KEY_SAT);
+            localStorage.removeItem(STORAGE_KEY_LIT);
             resetHueShift();
         } else {
-            localStorage.setItem(STORAGE_KEY, color);
-            applyThemeColor(color);
+            localStorage.setItem(STORAGE_KEY, String(shift));
+            localStorage.setItem(STORAGE_KEY_SAT, String(sat));
+            localStorage.setItem(STORAGE_KEY_LIT, String(lit));
+            applyHueShift(shift, sat, lit);
         }
     });
     if ("undefined" != typeof window) {
         const observer = new MutationObserver((mutations)=>{
-            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(()=>{
-                const color = themeColor();
-                if (null !== color) applyThemeColor(color);
-            });
+            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));
+            }
         });
         observer.observe(document.documentElement, {
             attributes: true,
@@ -178,14 +494,16 @@ function createHueShiftStore(storagePrefix) {
             ]
         });
     }
-    const setThemeColor = (color)=>{
-        if (null === color) return void setThemeColorInternal(null);
-        if (!parseHex(color)) return;
-        setThemeColorInternal(color);
+    const setHueShift = (hue, saturation = 100, lightness = 0)=>{
+        setHueShiftInternal(hue);
+        setHueSaturationInternal(saturation);
+        setHueLightnessInternal(lightness);
     };
     return {
-        themeColor,
-        setThemeColor,
+        hueShift,
+        hueSaturation,
+        hueLightness,
+        setHueShift,
         isAvailable: ()=>checkCspAllowsInlineStyles()
     };
 }

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,12 @@
+import "./timeline.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type TimelineProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLUListElement> & {
+    vertical?: boolean;
+    horizontal?: boolean;
+    responsive?: boolean;
+    snap?: boolean;
+    compact?: boolean;
+};
+declare const Timeline: (props: TimelineProps) => JSX.Element;
+export default Timeline;

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,42 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./timeline.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
+const Timeline_Timeline = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "vertical",
+        "horizontal",
+        "responsive",
+        "snap",
+        "compact",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("timeline", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "timeline-vertical": local.vertical,
+        "timeline-horizontal": local.horizontal,
+        "timeline-vertical lg:timeline-horizontal": local.responsive,
+        "timeline-snap-icon": local.snap,
+        "timeline-compact": local.compact
+    }), local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes,
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const Timeline = Timeline_Timeline;
+export { Timeline as default };