@pathscale/ui 1.1.22 → 1.1.24

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -36,6 +36,9 @@ const createColorItem = (id, rgb, offsetX, offsetY, options)=>{
         id,
         rgb,
         hex: (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.rgbToHex)(r, g, b).toUpperCase(),
+        r,
+        g,
+        b,
         offsetX,
         offsetY,
         hue: hsl.hue,
@@ -453,7 +456,22 @@ const ColorWheelFlower = (props)=>{
         }
         setSelectedIndex(index);
         if (item.isCenter) return void context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(0, 0, 100, context.color().hsl.a));
-        context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(item.hue, item.saturation, item.lightness, context.color().hsl.a));
+        const alpha = context.color().hsl.a;
+        context.onChange({
+            rgb: {
+                r: item.r,
+                g: item.g,
+                b: item.b,
+                a: alpha
+            },
+            hsl: {
+                h: item.hue,
+                s: item.saturation,
+                l: item.lightness,
+                a: alpha
+            },
+            hex: item.hex
+        });
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         const selected = selectedIndex();

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

@@ -2,12 +2,14 @@ import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export interface ThemeColorPickerProps extends IComponentBaseProps {
     /**
-     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_hue_shift")
+     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
      * @default "theme"
      */
     storagePrefix?: string;
     /**
-     * Callback when color changes
+     * Callback when color changes. Passes the hex string (or null on reset).
+     * Kept with legacy `(hue, saturation)` signature for backward compatibility —
+     * hue is derived from the picked hex, saturation is forwarded as-is.
      */
     onColorChange?: (hue: number | null, saturation: number) => void;
     /**

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

@@ -8,9 +8,9 @@ import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../butto
 import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-3"><div class="flex justify-center"></div><div class="flex flex-col gap-1.5">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110">');
-function hueToColorValue(hue, sat) {
-    if (null === hue) return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(0, 0, 100, 1);
-    return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(hue, sat, 50, 1);
+function hexToColorValue(hex) {
+    if (null === hex) return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(0, 0, 100, 1);
+    return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(hex) ?? (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(0, 0, 100, 1);
 }
 const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -28,22 +28,16 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [featureAvailable, setFeatureAvailable] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
     let containerRef;
     const store = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore)(local.storagePrefix ?? "theme"));
-    const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hueToColorValue(store().hueShift(), store().hueSaturation()));
-    const setThemeColor = (hue, saturation)=>{
-        if (null === hue) {
-            store().setHueShift(null);
+    const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hexToColorValue(store().themeColor()));
+    const handleColorChange = (color)=>{
+        const { s, l } = color.hsl;
+        if (s < 10 && l > 90) {
+            store().setThemeColor(null);
             local.onColorChange?.(null, 100);
             return;
         }
-        const normalizedHue = (hue % 360 + 360) % 360;
-        const normalizedSaturation = Math.max(0, Math.min(100, saturation));
-        store().setHueShift(normalizedHue, normalizedSaturation);
-        local.onColorChange?.(normalizedHue, normalizedSaturation);
-    };
-    const handleColorChange = (color)=>{
-        const { h, s, l } = color.hsl;
-        if (s < 10 && l > 90) return void setThemeColor(null, 100);
-        setThemeColor(h, s);
+        store().setThemeColor(color.hex);
+        local.onColorChange?.(color.hsl.h, color.hsl.s);
     };
     const GRAYSCALE_SWATCHES = [
         {
@@ -72,7 +66,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         }
     ];
     const handleGrayscale = (lightnessOffset)=>{
-        store().setHueShift(0, 0, lightnessOffset);
+        store().setThemeColor(null);
         local.onColorChange?.(null, 0);
         if (lightnessOffset >= 5) local.onThemeSwitch?.("light");
         else if (lightnessOffset <= -10) local.onThemeSwitch?.("dark");
@@ -141,7 +135,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                         width: 16,
                         height: 16,
                         get ["class"] () {
-                            return null !== store().hueShift() ? "text-primary" : void 0;
+                            return null !== store().themeColor() ? "text-primary" : void 0;
                         }
                     });
                 }

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

@@ -1,14 +1,14 @@
 declare function resetHueShift(): void;
 export interface HueShiftStore {
-    hueShift: () => number | null;
-    hueSaturation: () => number;
-    hueLightness: () => number;
-    setHueShift: (hue: number | null, saturation?: number, lightness?: number) => void;
+    /** Current theme color as a hex string, or null when no override is active. */
+    themeColor: () => string | null;
+    /** Set (or clear with null) the theme color. Hex strings only. */
+    setThemeColor: (color: string | null) => void;
     isAvailable: () => boolean;
 }
 /**
- * Creates a hue shift store with configurable storage prefix.
- * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_hue_shift")
+ * Creates a theme color store with configurable storage prefix.
+ * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
  */
 export declare function createHueShiftStore(storagePrefix: string): HueShiftStore;
 export declare function getDefaultHueShiftStore(): HueShiftStore;

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

@@ -13,478 +13,95 @@ const checkCspAllowsInlineStyles = ()=>{
     } catch  {
         cspAllowsInlineStyles = false;
     }
-    if (!cspAllowsInlineStyles) console.info("[hueShift] CSP blocks inline styles - hue customization disabled");
+    if (!cspAllowsInlineStyles) console.info("[themeColor] CSP blocks inline styles - theme color customization disabled");
     return cspAllowsInlineStyles;
 };
-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;
+const PRIMARY_VARS = [
+    "--color-primary",
+    "--nf-accent",
+    "--color-nf-accent"
+];
+const CONTENT_VARS = [
+    "--color-primary-content",
+    "--nf-on-accent",
+    "--color-nf-on-accent"
+];
+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
     };
-    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 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 getResolvedTheme() {
-    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 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 applyHueShift(targetHue, saturation = 100, lightnessOffset = 0) {
+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 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));
-    }
+    const content = pickContentColor(rgb.r, rgb.g, rgb.b);
+    for (const varName of PRIMARY_VARS)root.style.setProperty(varName, hex);
+    for (const varName of CONTENT_VARS)root.style.setProperty(varName, content);
 }
 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);
 }
 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));
+                const color = themeColor();
+                if (null !== color) requestAnimationFrame(()=>applyThemeColor(color));
             }
         });
         observer.observe(document.documentElement, {
@@ -494,16 +111,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "author": "pathscale",
   "repository": {
     "type": "git",