@pathscale/ui 1.1.14 → 1.1.15

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -110,56 +110,261 @@ const isNearColor = (color, item)=>{
     const lightnessDelta = Math.abs(color.hsl.l - item.lightness);
     return hueDelta <= 2 && saturationDelta <= 2 && lightnessDelta <= 2;
 };
-const COLORS = [
-    createColorItem("outer-1", "rgb(80,80,80)", 47.631, -27.5),
-    createColorItem("outer-2", "rgb(80,60,50)", 27.5, -47.631),
-    createColorItem("outer-3", "rgb(80,50,50)", 0, -55),
-    createColorItem("outer-4", "rgb(80,50,70)", -27.5, -47.631),
-    createColorItem("outer-5", "rgb(70,50,80)", -47.631, -27.5),
-    createColorItem("outer-6", "rgb(55,50,80)", -55, 0),
-    createColorItem("outer-7", "rgb(50,55,80)", -47.631, 27.5),
-    createColorItem("outer-8", "rgb(50,65,80)", -27.5, 47.631),
-    createColorItem("outer-9", "rgb(50,80,80)", 0, 55),
-    createColorItem("outer-10", "rgb(50,80,65)", 27.5, 47.631),
-    createColorItem("outer-11", "rgb(55,80,50)", 47.631, 27.5),
-    createColorItem("outer-12", "rgb(70,80,50)", 55, 0),
-    createColorItem("middle-1", "rgb(245,245,61)", 34.641, -20),
-    createColorItem("middle-2", "rgb(245,153,61)", 20, -34.641),
-    createColorItem("middle-3", "rgb(245,61,61)", 0, -40),
-    createColorItem("middle-4", "rgb(245,61,153)", -20, -34.641),
-    createColorItem("middle-5", "rgb(245,61,245)", -34.641, -20),
-    createColorItem("middle-6", "rgb(153,61,245)", -40, 0),
-    createColorItem("middle-7", "rgb(61,61,245)", -34.641, 20),
-    createColorItem("middle-8", "rgb(61,153,245)", -20, 34.641),
-    createColorItem("middle-9", "rgb(61,245,245)", 0, 40),
-    createColorItem("middle-10", "rgb(61,245,153)", 20, 34.641),
-    createColorItem("middle-11", "rgb(61,245,61)", 34.641, 20),
-    createColorItem("middle-12", "rgb(153,245,61)", 40, 0),
-    createColorItem("inner-1", "rgb(240,217,194)", 10, -17.3205),
-    createColorItem("inner-2", "rgb(240,194,217)", -10, -17.3205),
-    createColorItem("inner-3", "rgb(217,194,240)", -20, 0),
-    createColorItem("inner-4", "rgb(194,217,240)", -10, 17.3205),
-    createColorItem("inner-5", "rgb(194,240,217)", 10, 17.3205),
-    createColorItem("inner-6", "rgb(217,240,194)", 20, 0),
-    createColorItem("center", "rgb(255,255,255)", 0, 0, {
+const LAYOUT = [
+    {
+        id: "outer-1",
+        offsetX: 47.631,
+        offsetY: -27.5
+    },
+    {
+        id: "outer-2",
+        offsetX: 27.5,
+        offsetY: -47.631
+    },
+    {
+        id: "outer-3",
+        offsetX: 0,
+        offsetY: -55
+    },
+    {
+        id: "outer-4",
+        offsetX: -27.5,
+        offsetY: -47.631
+    },
+    {
+        id: "outer-5",
+        offsetX: -47.631,
+        offsetY: -27.5
+    },
+    {
+        id: "outer-6",
+        offsetX: -55,
+        offsetY: 0
+    },
+    {
+        id: "outer-7",
+        offsetX: -47.631,
+        offsetY: 27.5
+    },
+    {
+        id: "outer-8",
+        offsetX: -27.5,
+        offsetY: 47.631
+    },
+    {
+        id: "outer-9",
+        offsetX: 0,
+        offsetY: 55
+    },
+    {
+        id: "outer-10",
+        offsetX: 27.5,
+        offsetY: 47.631
+    },
+    {
+        id: "outer-11",
+        offsetX: 47.631,
+        offsetY: 27.5
+    },
+    {
+        id: "outer-12",
+        offsetX: 55,
+        offsetY: 0
+    },
+    {
+        id: "middle-1",
+        offsetX: 34.641,
+        offsetY: -20
+    },
+    {
+        id: "middle-2",
+        offsetX: 20,
+        offsetY: -34.641
+    },
+    {
+        id: "middle-3",
+        offsetX: 0,
+        offsetY: -40
+    },
+    {
+        id: "middle-4",
+        offsetX: -20,
+        offsetY: -34.641
+    },
+    {
+        id: "middle-5",
+        offsetX: -34.641,
+        offsetY: -20
+    },
+    {
+        id: "middle-6",
+        offsetX: -40,
+        offsetY: 0
+    },
+    {
+        id: "middle-7",
+        offsetX: -34.641,
+        offsetY: 20
+    },
+    {
+        id: "middle-8",
+        offsetX: -20,
+        offsetY: 34.641
+    },
+    {
+        id: "middle-9",
+        offsetX: 0,
+        offsetY: 40
+    },
+    {
+        id: "middle-10",
+        offsetX: 20,
+        offsetY: 34.641
+    },
+    {
+        id: "middle-11",
+        offsetX: 34.641,
+        offsetY: 20
+    },
+    {
+        id: "middle-12",
+        offsetX: 40,
+        offsetY: 0
+    },
+    {
+        id: "inner-1",
+        offsetX: 10,
+        offsetY: -17.3205
+    },
+    {
+        id: "inner-2",
+        offsetX: -10,
+        offsetY: -17.3205
+    },
+    {
+        id: "inner-3",
+        offsetX: -20,
+        offsetY: 0
+    },
+    {
+        id: "inner-4",
+        offsetX: -10,
+        offsetY: 17.3205
+    },
+    {
+        id: "inner-5",
+        offsetX: 10,
+        offsetY: 17.3205
+    },
+    {
+        id: "inner-6",
+        offsetX: 20,
+        offsetY: 0
+    },
+    {
+        id: "center",
+        offsetX: 0,
+        offsetY: 0,
         isCenter: true
-    })
+    }
 ];
-const CENTER_INDEX = COLORS.findIndex((item)=>item.isCenter);
-const MAX_RADIUS = Math.max(...COLORS.map((item)=>Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2)));
-const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
-const MAX_WAVE_DELAY = 0.12;
-const RAINBOW_GRADIENT = `conic-gradient(
+const LIGHT_RGBS = [
+    "rgb(249,168,37)",
+    "rgb(239,108,0)",
+    "rgb(198,40,40)",
+    "rgb(173,20,87)",
+    "rgb(106,27,154)",
+    "rgb(69,39,160)",
+    "rgb(40,53,147)",
+    "rgb(21,101,192)",
+    "rgb(0,131,143)",
+    "rgb(0,105,92)",
+    "rgb(46,125,50)",
+    "rgb(85,139,47)",
+    "rgb(255,235,59)",
+    "rgb(255,152,0)",
+    "rgb(244,67,54)",
+    "rgb(233,30,99)",
+    "rgb(156,39,176)",
+    "rgb(103,58,183)",
+    "rgb(63,81,181)",
+    "rgb(33,150,243)",
+    "rgb(0,188,212)",
+    "rgb(0,150,136)",
+    "rgb(76,175,80)",
+    "rgb(139,195,74)",
+    "rgb(239,154,154)",
+    "rgb(206,147,216)",
+    "rgb(144,202,249)",
+    "rgb(128,222,234)",
+    "rgb(165,214,167)",
+    "rgb(255,224,130)",
+    "rgb(255,255,255)"
+];
+const DARK_RGBS = [
+    "rgb(255,238,88)",
+    "rgb(255,167,38)",
+    "rgb(239,83,80)",
+    "rgb(236,64,122)",
+    "rgb(171,71,188)",
+    "rgb(126,87,194)",
+    "rgb(92,107,192)",
+    "rgb(66,165,245)",
+    "rgb(38,198,218)",
+    "rgb(38,166,154)",
+    "rgb(102,187,106)",
+    "rgb(156,204,101)",
+    "rgb(255,245,157)",
+    "rgb(255,204,128)",
+    "rgb(239,154,154)",
+    "rgb(244,143,177)",
+    "rgb(206,147,216)",
+    "rgb(179,157,219)",
+    "rgb(159,168,218)",
+    "rgb(144,202,249)",
+    "rgb(128,222,234)",
+    "rgb(128,203,196)",
+    "rgb(165,214,167)",
+    "rgb(197,225,165)",
+    "rgb(255,205,210)",
+    "rgb(225,190,231)",
+    "rgb(187,222,251)",
+    "rgb(178,235,242)",
+    "rgb(200,230,201)",
+    "rgb(255,236,179)",
+    "rgb(255,255,255)"
+];
+const LIGHT_RAINBOW = `conic-gradient(
+  from 0deg,
+  rgb(244,67,54) 0deg,
+  rgb(255,152,0) 30deg,
+  rgb(255,235,59) 60deg,
+  rgb(76,175,80) 120deg,
+  rgb(0,188,212) 180deg,
+  rgb(63,81,181) 240deg,
+  rgb(156,39,176) 300deg,
+  rgb(244,67,54) 360deg
+)`;
+const DARK_RAINBOW = `conic-gradient(
   from 0deg,
-  rgb(245,61,61) 0deg,
-  rgb(245,153,61) 30deg,
-  rgb(245,245,61) 60deg,
-  rgb(61,245,61) 120deg,
-  rgb(61,245,245) 180deg,
-  rgb(61,61,245) 240deg,
-  rgb(245,61,245) 300deg,
-  rgb(245,61,61) 360deg
+  rgb(239,154,154) 0deg,
+  rgb(255,204,128) 30deg,
+  rgb(255,245,157) 60deg,
+  rgb(165,214,167) 120deg,
+  rgb(128,222,234) 180deg,
+  rgb(159,168,218) 240deg,
+  rgb(206,147,216) 300deg,
+  rgb(239,154,154) 360deg
 )`;
+function buildColors(rgbs) {
+    return LAYOUT.map((layout, i)=>createColorItem(layout.id, rgbs[i], layout.offsetX, layout.offsetY, layout.isCenter ? {
+            isCenter: true
+        } : void 0));
+}
+const CENTER_INDEX = LAYOUT.findIndex((l)=>l.isCenter);
+const MAX_RADIUS = Math.max(...LAYOUT.map((l)=>Math.sqrt(l.offsetX ** 2 + l.offsetY ** 2)));
+const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
+const MAX_WAVE_DELAY = 0.12;
 const ColorWheelFlower = (props)=>{
     const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
     const [selectedIndex, setSelectedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
@@ -171,6 +376,22 @@ const ColorWheelFlower = (props)=>{
         active: false
     });
     const [pulseState, setPulseState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [currentTheme, setCurrentTheme] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("undefined" != typeof document ? document.documentElement.getAttribute("data-theme") ?? "light" : "light");
+    if ("undefined" != typeof window) {
+        const observer = new MutationObserver(()=>{
+            const t = document.documentElement.getAttribute("data-theme");
+            setCurrentTheme("dark" === t ? "dark" : "light");
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                "data-theme"
+            ]
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>observer.disconnect());
+    }
+    const colors = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>buildColors("dark" === currentTheme() ? DARK_RGBS : LIGHT_RGBS));
+    const rainbowGradient = ()=>"dark" === currentTheme() ? DARK_RAINBOW : LIGHT_RAINBOW;
     const reduceMotion = (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.prefersReducedMotion)();
     const ringTransition = reduceMotion ? {
         duration: 0
@@ -188,11 +409,12 @@ const ColorWheelFlower = (props)=>{
     let outerRingControl = null;
     const closestIndex = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         const current = context.color();
+        const items = colors();
         if (current.hsl.s <= 6 && current.hsl.l >= 95 && CENTER_INDEX >= 0) return CENTER_INDEX;
         let closest = 0;
         let bestScore = Number.POSITIVE_INFINITY;
-        for(let index = 0; index < COLORS.length; index += 1){
-            const item = COLORS[index];
+        for(let index = 0; index < items.length; index += 1){
+            const item = items[index];
             if (item.isCenter) continue;
             const hueDelta = hueDistance(current.hsl.h, item.hue);
             const saturationDelta = Math.abs(current.hsl.s - item.saturation);
@@ -219,11 +441,12 @@ const ColorWheelFlower = (props)=>{
     };
     const handlePickerChange = (selectedHex)=>{
         if (context.disabled()) return;
-        const index = COLORS.findIndex((item)=>item.hex === selectedHex.toUpperCase());
+        const items = colors();
+        const index = items.findIndex((item)=>item.hex === selectedHex.toUpperCase());
         if (index < 0) return;
         triggerPulse(index);
         const selected = selectedIndex();
-        const item = COLORS[index];
+        const item = items[index];
         if (selected === index && !item.isCenter) {
             setSelectedIndex(null);
             context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(0, 0, 100, context.color().hsl.a));
@@ -237,7 +460,7 @@ const ColorWheelFlower = (props)=>{
         const selected = selectedIndex();
         const current = context.color();
         if (null === selected) return;
-        const selectedItem = COLORS[selected];
+        const selectedItem = colors()[selected];
         if (!selectedItem) return;
         if (!isNearColor(current, selectedItem)) setSelectedIndex(null);
     });
@@ -269,8 +492,8 @@ const ColorWheelFlower = (props)=>{
     };
     const outerRingBackground = ()=>{
         const selected = selectedIndex();
-        if (null === selected) return RAINBOW_GRADIENT;
-        const color = COLORS[selected];
+        if (null === selected) return rainbowGradient();
+        const color = colors()[selected];
         return `conic-gradient(${color.rgb}, ${color.rgb})`;
     };
     const outerRingTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
@@ -295,7 +518,7 @@ const ColorWheelFlower = (props)=>{
         if (context.disabled()) return "none";
         const index = hoveredIndex() ?? selectedIndex();
         if (null === index) return "0 0 10px rgba(255,255,255,0.08)";
-        const color = COLORS[index].rgb;
+        const color = colors()[index].rgb;
         return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
@@ -309,7 +532,7 @@ const ColorWheelFlower = (props)=>{
         if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     });
-    const pickerValue = ()=>COLORS[visualSelectedIndex()]?.hex;
+    const pickerValue = ()=>colors()[visualSelectedIndex()]?.hex;
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
         _el$.addEventListener("mouseleave", handlePointerLeave);
@@ -331,7 +554,9 @@ const ColorWheelFlower = (props)=>{
             "aria-label": "Flower color palette",
             get children () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                    each: COLORS,
+                    get each () {
+                        return colors();
+                    },
                     children: (item, index)=>{
                         let motionRef;
                         let dotControl = null;
@@ -346,12 +571,12 @@ const ColorWheelFlower = (props)=>{
                                 y: 0
                             };
                             const pointerState = pointer();
-                            const anchorIndex = hoveredIndex();
+                            const anchorIdx = hoveredIndex();
                             let scale = 1;
                             let offsetX = 0;
                             let offsetY = 0;
-                            if (null !== anchorIndex && pointerState.active) {
-                                const anchor = COLORS[anchorIndex];
+                            if (null !== anchorIdx && pointerState.active) {
+                                const anchor = colors()[anchorIdx];
                                 const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
                                 const waveRadius = 0.9 * MAX_RADIUS;
                                 const influence = Math.max(0, 1 - distance / waveRadius);
@@ -397,11 +622,11 @@ const ColorWheelFlower = (props)=>{
                             if (reduceMotion) return {
                                 duration: 0
                             };
-                            const anchorIndex = hoveredIndex();
+                            const anchorIdx = hoveredIndex();
                             const pointerState = pointer();
                             let delay = 0;
-                            if (null !== anchorIndex && pointerState.active) {
-                                const anchor = COLORS[anchorIndex];
+                            if (null !== anchorIdx && pointerState.active) {
+                                const anchor = colors()[anchorIdx];
                                 const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
                                 delay = Math.min(MAX_WAVE_DELAY, distance / MAX_WAVE_DISTANCE * MAX_WAVE_DELAY);
                             }

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

@@ -10,6 +10,10 @@ export interface ThemeColorPickerProps extends IComponentBaseProps {
      * Callback when color changes
      */
     onColorChange?: (hue: number | null, saturation: number) => void;
+    /**
+     * Callback to switch light/dark theme (triggered by grayscale selection)
+     */
+    onThemeSwitch?: (theme: "light" | "dark") => void;
     /**
      * ARIA label for the button
      */

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

@@ -16,6 +16,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "storagePrefix",
         "onColorChange",
+        "onThemeSwitch",
         "aria-label",
         "children",
         "class",
@@ -73,6 +74,8 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const handleGrayscale = (lightnessOffset)=>{
         store().setHueShift(0, 0, lightnessOffset);
         local.onColorChange?.(null, 0);
+        if (lightnessOffset >= 5) local.onThemeSwitch?.("light");
+        else if (lightnessOffset <= -10) local.onThemeSwitch?.("dark");
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;

package/package.json

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