@pathscale/ui 1.1.14 → 1.1.16

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -107,59 +107,263 @@ const hueDistance = (a, b)=>{
 const isNearColor = (color, item)=>{
     const hueDelta = hueDistance(color.hsl.h, item.hue);
     const saturationDelta = Math.abs(color.hsl.s - item.saturation);
-    const lightnessDelta = Math.abs(color.hsl.l - item.lightness);
-    return hueDelta <= 2 && saturationDelta <= 2 && lightnessDelta <= 2;
+    return hueDelta <= 5 && saturationDelta <= 15;
 };
-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 +375,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,16 +408,17 @@ 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);
             const lightnessDelta = Math.abs(current.hsl.l - item.lightness);
-            const score = 1.4 * hueDelta + 0.8 * saturationDelta + 0.55 * lightnessDelta;
+            const score = 2.0 * hueDelta + +saturationDelta + 0.1 * lightnessDelta;
             if (score < bestScore) {
                 bestScore = score;
                 closest = index;
@@ -219,11 +440,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 +459,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 +491,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 +517,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 +531,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 +553,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 +570,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 +621,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/dist/components/theme-color-picker/hueShift.js

@@ -17,58 +17,11 @@ const checkCspAllowsInlineStyles = ()=>{
     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: 45,
-            c: 0.2
+            l: 58,
+            c: 0.22
         },
         "--color-primary-content": {
             l: 98,
@@ -77,12 +30,12 @@ const PRIMARY_SETTINGS = {
     },
     dark: {
         "--color-primary": {
-            l: 58,
-            c: 0.233
+            l: 75,
+            c: 0.18
         },
         "--color-primary-content": {
-            l: 96,
-            c: 0.018
+            l: 15,
+            c: 0.02
         }
     }
 };
@@ -101,8 +54,8 @@ const HARMONY_SETTINGS = {
             c: 0.026
         },
         "--color-accent": {
-            l: 60,
-            c: 0.118
+            l: 62,
+            c: 0.14
         },
         "--color-accent-content": {
             l: 98,
@@ -111,19 +64,19 @@ const HARMONY_SETTINGS = {
     },
     dark: {
         "--color-secondary": {
-            l: 63,
-            c: 0.237
+            l: 72,
+            c: 0.16
         },
         "--color-secondary-content": {
-            l: 97,
+            l: 15,
             c: 0.013
         },
         "--color-accent": {
-            l: 70,
-            c: 0.14
+            l: 78,
+            c: 0.12
         },
         "--color-accent-content": {
-            l: 98,
+            l: 15,
             c: 0.014
         }
     }
@@ -208,16 +161,16 @@ const SEMANTIC_SETTINGS = {
 const NF_ACCENT_SETTINGS = {
     light: {
         "--nf-accent": {
-            l: 45,
-            c: 0.2
+            l: 58,
+            c: 0.22
         },
         "--nf-on-accent": {
             l: 98,
             c: 0.02
         },
         "--color-nf-accent": {
-            l: 45,
-            c: 0.2
+            l: 58,
+            c: 0.22
         },
         "--color-nf-on-accent": {
             l: 98,
@@ -226,20 +179,20 @@ const NF_ACCENT_SETTINGS = {
     },
     dark: {
         "--nf-accent": {
-            l: 58,
-            c: 0.233
+            l: 75,
+            c: 0.18
         },
         "--nf-on-accent": {
-            l: 96,
-            c: 0.018
+            l: 15,
+            c: 0.02
         },
         "--color-nf-accent": {
-            l: 58,
-            c: 0.233
+            l: 75,
+            c: 0.18
         },
         "--color-nf-on-accent": {
-            l: 96,
-            c: 0.018
+            l: 15,
+            c: 0.02
         }
     }
 };
@@ -364,7 +317,7 @@ function getResolvedTheme() {
 function applyHueShift(targetHue, saturation = 100, lightnessOffset = 0) {
     if (!checkCspAllowsInlineStyles()) return;
     const root = document.documentElement;
-    const oklchHue = hslHueToOklchHue(targetHue);
+    const oklchHue = (targetHue % 360 + 360) % 360;
     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));

package/package.json

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