feat: add color picker

web-common/src/components/color-picker/ColorInput.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  import * as Popover from "@rilldata/web-common/components/popover";
+  import ColorSlider from "./ColorSlider.svelte";
+
+  export let stringColor: string;
+  export let label: string;
+
+  let open = false;
+
+  $: ({ h: hue, s: saturation, l: lightness } = stringColorToHsl(stringColor));
+
+  $: hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+
+  function extractHSL(color: string) {
+    const [, hue, saturation, lightness] = color.match(
+      /hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/,
+    ) || [null, 0, 100, 50];
+
+    return {
+      h: +hue,
+      s: +saturation,
+      l: +lightness,
+    };
+  }
+
+  function stringColorToHsl(string: string) {
+    if (string.startsWith("hsl")) {
+      return extractHSL(string);
+    }
+
+    const color = getComputedColor(
+      hexColorWithoutPound(string) ? `#${string}` : string,
+    );
+
+    if (!color)
+      return {
+        h: 0,
+        s: 100,
+        l: 50,
+      };
+
+    if (color.startsWith("rgba")) {
+      return rgbaToHSL(color);
+    }
+
+    const hsl = hexToHSL(color);
+
+    return hsl;
+  }
+
+  function rgbaToHSL(string: string) {
+    const matches = string.match(
+      /rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/,
+    );
+
+    if (!matches) {
+      return {
+        h: 0,
+        s: 0,
+        l: 0,
+      };
+    }
+
+    const [, red, green, blue] = matches;
+
+    const r = +red / 255;
+    const g = +green / 255;
+    const b = +blue / 255;
+
+    let max = Math.max(r, g, b);
+    let min = Math.min(r, g, b);
+
+    let h = (max + min) / 2;
+    let s = h;
+    let l = h;
+
+    if (max === min) {
+      return { h: 0, s: 0, l };
+    }
+
+    const d = max - min;
+    s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + 0) * 60;
+        break;
+      case g:
+        h = ((b - r) / d + 2) * 60;
+        break;
+      case b:
+        h = ((r - g) / d + 4) * 60;
+        break;
+    }
+
+    return {
+      h: Math.round(h),
+      s: Math.round(s * 100),
+      l: Math.round(l * 100),
+    };
+  }
+
+  function hexColorWithoutPound(color: string) {
+    return /^[0-9A-F]{6}$/i.test(color);
+  }
+
+  function getComputedColor(color: string) {
+    const canvas = document.createElement("canvas").getContext("2d");
+    if (!canvas) return;
+    canvas.fillStyle = color;
+    return canvas.fillStyle;
+  }
+
+  function hexToHSL(hex: string) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+    let h = 0;
+    let s = 100;
+    let l = 50;
+
+    if (!result)
+      return {
+        h,
+        s,
+        l,
+      };
+
+    let r = parseInt(result[1], 16);
+    let g = parseInt(result[2], 16);
+    let b = parseInt(result[3], 16);
+
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    let max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    h = s = l = (max + min) / 2;
+
+    if (max == min) {
+      h = s = 0;
+    } else {
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+
+      h /= 6;
+    }
+
+    h = Math.round(h * 360);
+    s = Math.round(s * 100);
+    l = Math.round(l * 100);
+
+    return { h, s, l };
+  }
+</script>
+
+<svelte:window
+  on:keydown={(e) => {
+    if (e.key === "Escape" || e.key === "Enter") {
+      open = false;
+    }
+  }}
+/>
+
+<div class="color-wrapper">
+  <Popover.Root bind:open>
+    <Popover.Trigger asChild let:builder>
+      <button
+        class="trigger"
+        use:builder.action
+        {...builder}
+        style:background-color={hsl}
+      />
+    </Popover.Trigger>
+
+    <Popover.Content class="w-[270px] space-y-2" align="start" sideOffset={10}>
+      <ColorSlider
+        mode="hue"
+        bind:value={hue}
+        {hue}
+        onChange={() => {
+          stringColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+        }}
+      />
+      <ColorSlider
+        mode="saturation"
+        bind:value={saturation}
+        {hue}
+        onChange={() => {
+          stringColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+        }}
+      />
+      <ColorSlider
+        mode="lightness"
+        bind:value={lightness}
+        {hue}
+        onChange={() => {
+          stringColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+        }}
+      />
+    </Popover.Content>
+  </Popover.Root>
+
+  <input bind:value={stringColor} />
+
+  <p>{label}</p>
+</div>
+
+<style lang="postcss">
+  .trigger {
+    @apply h-full aspect-square;
+    @apply rounded-[2px];
+  }
+
+  .color-wrapper {
+    @apply py-[5px] px-[5px] pr-3;
+    @apply h-8 w-full border border-gray-300 rounded-[2px];
+    @apply flex gap-x-3;
+  }
+
+  .color-wrapper:focus-within {
+    @apply border-primary-500 ring-2 ring-primary-100;
+  }
+
+  p {
+    @apply text-sm text-gray-500;
+  }
+
+  input {
+    @apply w-full text-sm;
+    @apply outline-none border-0;
+  }
+</style>

web-common/src/components/color-picker/ColorSlider.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" context="module">
+  const gradients = {
+    hue: createGradientString(
+      Array.from({ length: 360 }).map((_, i) => `hsl(${i}, 100%, 50%)`),
+    ),
+    saturation: createGradientString(
+      Array.from({ length: 50 }).map(
+        (_, i) => `hsl(var(--hue), ${i * 2}%, 50%)`,
+      ),
+    ),
+    lightness: createGradientString(
+      Array.from({ length: 50 }).map(
+        (_, i) => `hsl(var(--hue), 100%, ${i * 2}%)`,
+      ),
+    ),
+  };
+
+  function createGradientString(array: string[]) {
+    return `linear-gradient(to right, ${array.join(", ")})`;
+  }
+</script>
+
+<script lang="ts">
+  export let value: number;
+  export let hue = 0;
+  export let mode: "hue" | "saturation" | "lightness";
+  export let onChange: () => void;
+</script>
+
+<div class="size-full flex flex-none gap-x-2 items-center">
+  <input
+    style:--hue={hue}
+    style:background-image={gradients[mode]}
+    type="range"
+    min="0"
+    max={mode === "hue" ? 360 : 100}
+    bind:value
+    on:change={onChange}
+  />
+
+  <input
+    type="number"
+    min="0"
+    max={mode === "hue" ? 360 : 100}
+    class="border rounded-sm pl-1 w-[50px]"
+    bind:value
+    on:change={onChange}
+  />
+</div>
+
+<style lang="postcss">
+  input:focus {
+    @apply outline-none;
+  }
+
+  input[type="range"] {
+    @apply rounded-full w-full;
+    -webkit-appearance: none;
+    box-shadow:
+      rgba(255, 255, 255, 0.25) 0 1px 1px inset,
+      rgba(0, 0, 0, 0.6) 0 0 0 1px;
+    height: 18px;
+    margin: 0;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    @apply rounded-full;
+    -webkit-appearance: none;
+    box-shadow:
+      rgba(0, 0, 0, 0.6) 0 0 0 1px inset,
+      rgb(235, 235, 235) 0 0 0 2.5px,
+      rgba(0, 0, 0, 0.6) 0 0 0 3.5px;
+    height: 16px;
+    width: 16px;
+    background: transparent;
+    cursor: pointer;
+    margin-top: -0px;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    @apply rounded-full;
+    -webkit-appearance: none;
+    box-shadow:
+      rgba(0, 0, 0, 0.6) 0 0 0 1px inset,
+      rgb(235, 235, 235) 0 0 0 2.5px,
+      rgba(0, 0, 0, 0.6) 0 0 0 3.5px;
+    height: 16px;
+    width: 16px;
+    background: transparent;
+    cursor: pointer;
+    margin-top: -0px;
+  }
+
+  input[type="range"]:hover::-webkit-slider-thumb {
+    box-shadow:
+      rgba(0, 0, 0, 0.6) 0 0 0 1px inset,
+      rgba(255, 255, 255, 1) 0 0 0 2.5px,
+      rgba(0, 0, 0, 0.6) 0 0 0 3.5px;
+  }
+
+  input[type="range"]:focus::-webkit-slider-thumb {
+    box-shadow:
+      rgba(0, 0, 0, 0.6) 0 0 0 1px inset,
+      rgba(255, 255, 255, 1) 0 0 0 2.5px,
+      hsl(var(--hue), 100%, 50%) 0 0 0 4.5px,
+      rgba(0, 0, 0, 0.6) 0 0 0 5.5px;
+  }
+
+  input[type="range"]:hover::-moz-range-thumb {
+    box-shadow:
+      rgba(0, 0, 0, 0.6) 0 0 0 1px inset,
+      rgba(255, 255, 255, 1) 0 0 0 2.5px,
+      rgba(0, 0, 0, 0.6) 0 0 0 3.5px;
+  }
+
+  input[type="range"]:focus::-moz-range-thumb {
+    box-shadow:
+      rgba(0, 0, 0, 0.6) 0 0 0 1px inset,
+      rgba(255, 255, 255, 1) 0 0 0 2.5px,
+      hsl(var(--hue), 100%, 50%) 0 0 0 4.5px,
+      rgba(0, 0, 0, 0.6) 0 0 0 5.5px;
+  }
+</style>