@pathscale/ui 1.1.2 → 1.1.4

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

@@ -5,11 +5,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__ from "../colorpicker/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
 import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__ from "../color-field/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__ from "../color-slider/index.js";
 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=space-y-3><div class="flex justify-center">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 w-[248px] rounded-lg border border-base-300 bg-base-100 p-4 shadow-xl">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+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);
@@ -46,14 +44,35 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         if (s < 10 && l > 90) return void setThemeColor(null, 100);
         setThemeColor(h, s);
     };
-    const handleHueChange = (hue)=>{
-        const saturation = null === store().hueShift() ? 100 : store().hueSaturation();
-        setThemeColor(hue, saturation);
-    };
-    const handleFieldChange = (value)=>{
-        const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
-        if (!parsed) return;
-        handleColorChange(parsed);
+    const GRAYSCALE_SWATCHES = [
+        {
+            label: "White",
+            lightness: 10
+        },
+        {
+            label: "Light gray",
+            lightness: 5
+        },
+        {
+            label: "Gray",
+            lightness: 0
+        },
+        {
+            label: "Dark gray",
+            lightness: -5
+        },
+        {
+            label: "Charcoal",
+            lightness: -10
+        },
+        {
+            label: "Black",
+            lightness: -15
+        }
+    ];
+    const handleGrayscale = (lightnessOffset)=>{
+        store().setHueShift(0, 0, lightnessOffset);
+        local.onColorChange?.(0, 0);
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;
@@ -134,27 +153,31 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                             return contextValue();
                         },
                         get children () {
-                            var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
+                            var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorWheelFlower, {
                                 class: "color-wheel-custom"
                             }));
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], {
-                                type: "hue",
-                                get value () {
-                                    return colorValue().hsl.h;
-                                },
-                                onChange: handleHueChange,
-                                "aria-label": "Theme hue"
-                            }), null);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], {
-                                get value () {
-                                    return colorValue().hex.toUpperCase();
-                                },
-                                format: "hex",
-                                onChange: handleFieldChange,
-                                "aria-label": "Theme color value",
-                                fullWidth: true
-                            }), null);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>GRAYSCALE_SWATCHES.map((g, i)=>(()=>{
+                                        var _el$6 = _tmpl$4();
+                                        _el$6.$$click = ()=>handleGrayscale(g.lightness);
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                            var _v$ = `oklch(${[
+                                                95,
+                                                80,
+                                                60,
+                                                40,
+                                                25,
+                                                5
+                                            ][i]}% 0 0)`, _v$2 = g.label;
+                                            _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$6.style.setProperty("background-color", _v$) : _el$6.style.removeProperty("background-color"));
+                                            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-label", _p$.t = _v$2);
+                                            return _p$;
+                                        }, {
+                                            e: void 0,
+                                            t: void 0
+                                        });
+                                        return _el$6;
+                                    })()));
                             return _el$3;
                         }
                     }));
@@ -167,6 +190,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
 };
 const ThemeColorPicker = ThemeColorPicker_ThemeColorPicker;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "keydown"
+    "keydown",
+    "click"
 ]);
 export { ThemeColorPicker as default };

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

@@ -2,7 +2,8 @@ declare function resetHueShift(): void;
 export interface HueShiftStore {
     hueShift: () => number | null;
     hueSaturation: () => number;
-    setHueShift: (hue: number | null, saturation?: number) => void;
+    hueLightness: () => number;
+    setHueShift: (hue: number | null, saturation?: number, lightness?: number) => void;
     isAvailable: () => boolean;
 }
 /**

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

@@ -361,16 +361,17 @@ function getResolvedTheme() {
     if ("light" === dataTheme) return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function applyHueShift(targetHue, saturation = 100) {
+function applyHueShift(targetHue, saturation = 100, lightnessOffset = 0) {
     if (!checkCspAllowsInlineStyles()) return;
     const root = document.documentElement;
     const oklchHue = hslHueToOklchHue(targetHue);
-    const chromaScale = MIN_CHROMA_SCALE + saturation / 100 * (1 - MIN_CHROMA_SCALE);
+    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(settings.l, scaledChroma, oklchHue));
+        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, oklchHue));
     }
     const harmonySettings = HARMONY_SETTINGS[resolvedTheme];
     for (const [varName, settings] of Object.entries(harmonySettings)){
@@ -378,7 +379,7 @@ function applyHueShift(targetHue, saturation = 100) {
         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(settings.l, scaledChroma, hue));
+        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, hue));
     }
     const semanticSettings = SEMANTIC_SETTINGS[resolvedTheme];
     for (const [varName, settings] of Object.entries(semanticSettings)){
@@ -388,9 +389,9 @@ function applyHueShift(targetHue, saturation = 100) {
         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 = MIN_CHROMA_SCALE + (1 - MIN_CHROMA_SCALE) * Math.sqrt(saturation / 100);
+        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(settings.l, scaledChroma, tintedHue));
+        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, tintedHue));
     }
     const gradients = GRADIENT_COLORS[resolvedTheme];
     for (const [varName, color] of Object.entries(gradients)){
@@ -402,13 +403,13 @@ function applyHueShift(targetHue, saturation = 100) {
     for (const [varName, color] of Object.entries(baseColors)){
         const baseChroma = Math.max(color.c, BASE_CHROMA_BOOST);
         const scaledChroma = baseChroma * chromaScale;
-        const shifted = toOklch(color.l, scaledChroma, oklchHue);
+        const shifted = toOklch(clampL(color.l), scaledChroma, oklchHue);
         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(settings.l, scaledChroma, oklchHue));
+        root.style.setProperty(varName, toOklch(clampL(settings.l), scaledChroma, oklchHue));
     }
 }
 function resetHueShift() {
@@ -424,6 +425,7 @@ function resetHueShift() {
 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 = ()=>{
         if ("undefined" == typeof window) return null;
         const saved = localStorage.getItem(STORAGE_KEY);
@@ -442,20 +444,33 @@ function createHueShiftStore(storagePrefix) {
         }
         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 shift = hueShift();
         const sat = hueSaturation();
+        const lit = hueLightness();
         if ("undefined" == typeof window) return;
         if (null === shift) {
             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));
-            applyHueShift(shift, sat);
+            localStorage.setItem(STORAGE_KEY_LIT, String(lit));
+            applyHueShift(shift, sat, lit);
         }
     });
     if ("undefined" != typeof window) {
@@ -463,7 +478,8 @@ function createHueShiftStore(storagePrefix) {
             for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
                 const shift = hueShift();
                 const sat = hueSaturation();
-                if (null !== shift) requestAnimationFrame(()=>applyHueShift(shift, sat));
+                const lit = hueLightness();
+                if (null !== shift) requestAnimationFrame(()=>applyHueShift(shift, sat, lit));
             }
         });
         observer.observe(document.documentElement, {
@@ -473,13 +489,15 @@ function createHueShiftStore(storagePrefix) {
             ]
         });
     }
-    const setHueShift = (hue, saturation = 100)=>{
+    const setHueShift = (hue, saturation = 100, lightness = 0)=>{
         setHueShiftInternal(hue);
         setHueSaturationInternal(saturation);
+        setHueLightnessInternal(lightness);
     };
     return {
         hueShift,
         hueSaturation,
+        hueLightness,
         setHueShift,
         isAvailable: ()=>checkCspAllowsInlineStyles()
     };

package/package.json

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