feat: use a custom color picker widget

packages/keybr-theme-designer/lib/design/ColorImport.module.less

@@ -0,0 +1,29 @@
+@import "@keybr/widget/lib/index.less";
+
+.root {
+  display: inline-block;
+  vertical-align: middle;
+  inline-size: 4rem;
+  min-block-size: @field-height;
+  margin: 0;
+  padding: 0;
+  border: var(--separator-border);
+  cursor: pointer;
+}
+
+.popup {
+  color: var(--Popup__color);
+  background-color: var(--Popup__background-color);
+  box-shadow: var(--Popup--small__box-shadow);
+}
+
+.adjust {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  flex: 1;
+  text-align: center;
+}

packages/keybr-theme-designer/lib/design/ColorInput.tsx

@@ -1,7 +1,28 @@
 import { type CustomTheme, type PropName } from "@keybr/themes";
-import { Color } from "@keybr/widget";
-import { useRef } from "react";
+import {
+  type AnchorProps,
+  Color,
+  type Focusable,
+  getBoundingBox,
+  Icon,
+  IconButton,
+  Popover,
+  sizeClassName,
+  type SizeName,
+  useOnClickOutside,
+} from "@keybr/widget";
+import { mdiMenuLeft, mdiMenuRight } from "@mdi/js";
+import { clsx } from "clsx";
+import {
+  type ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { HexColorPicker } from "react-colorful";
 import { useCustomTheme } from "../context/context.ts";
+import * as styles from "./ColorImport.module.less";
 
 export const black = Color.parse("#000000");
 export const gray = Color.parse("#999999");
@@ -19,17 +40,113 @@ export const makeAccessor = (prop: PropName): Accessor => {
   } as Accessor;
 };
 
-export function ColorInput({ accessor }: { readonly accessor: Accessor }) {
+export function ColorInput({
+  accessor,
+  size,
+}: {
+  readonly accessor: Accessor;
+  readonly size?: SizeName;
+}) {
   const { theme, setTheme } = useCustomTheme();
-  const ref = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  useOnClickOutside(ref, () => {
+    setOpen(false);
+  });
+  const color = accessor.getColor(theme);
   return (
-    <input
-      ref={ref}
-      type="color"
-      value={accessor.getColor(theme).toRgb().formatHex()}
-      onChange={() => {
-        setTheme(accessor.setColor(theme, Color.parse(ref.current!.value)));
+    <Popover
+      open={open}
+      anchor={
+        <Button
+          color={color}
+          size={size}
+          onClick={() => {
+            setOpen(!open);
+          }}
+        />
+      }
+      position="block-end-start"
+      offset={10}
+    >
+      <div ref={ref} className={styles.popup}>
+        <HexColorPicker
+          color={color.toRgb().formatHex()}
+          onChange={(hex) => {
+            setTheme(accessor.setColor(theme, Color.parse(hex)));
+          }}
+        />
+        <div className={styles.adjust}>
+          <IconButton
+            icon={<Icon shape={mdiMenuLeft} />}
+            onClick={() => {
+              setTheme(accessor.setColor(theme, color.lighten(-1 / 255)));
+            }}
+          />
+          <span className={styles.label}>lightness</span>
+          <IconButton
+            icon={<Icon shape={mdiMenuRight} />}
+            onClick={() => {
+              setTheme(accessor.setColor(theme, color.lighten(+1 / 255)));
+            }}
+          />
+        </div>
+        <div className={styles.adjust}>
+          <IconButton
+            icon={<Icon shape={mdiMenuLeft} />}
+            onClick={() => {
+              setTheme(accessor.setColor(theme, color.saturate(-1 / 255)));
+            }}
+          />
+          <span className={styles.label}>saturation</span>
+          <IconButton
+            icon={<Icon shape={mdiMenuRight} />}
+            onClick={() => {
+              setTheme(accessor.setColor(theme, color.saturate(+1 / 255)));
+            }}
+          />
+        </div>
+      </div>
+    </Popover>
+  );
+}
+
+const Button = forwardRef(function Button(
+  {
+    anchor,
+    color,
+    disabled,
+    size,
+    onClick,
+  }: {
+    readonly color: Color;
+    readonly size?: SizeName;
+    readonly onClick: () => void;
+  } & AnchorProps,
+  ref: ForwardedRef<Focusable>,
+) {
+  const element = useRef<HTMLSpanElement>(null);
+  useImperativeHandle(ref, () => ({
+    focus() {
+      element.current?.focus();
+    },
+    blur() {
+      element.current?.blur();
+    },
+  }));
+  useImperativeHandle(anchor, () => ({
+    getBoundingBox(position) {
+      return getBoundingBox(element.current!, position);
+    },
+  }));
+  return (
+    <span
+      ref={element}
+      className={clsx(styles.root, sizeClassName(size))}
+      style={{
+        backgroundColor: color.toRgb().formatHex(),
       }}
+      onClick={onClick}
     />
   );
-}
+});

packages/keybr-theme-designer/package.json

@@ -15,7 +15,8 @@
     "@keybr/textinput": "*",
     "@keybr/textinput-ui": "*",
     "@keybr/themes": "*",
-    "@keybr/widget": "*"
+    "@keybr/widget": "*",
+    "react-colorful": "^5.6.1"
   },
   "devDependencies": {},
   "scripts": {

packages/keybr-widget/lib/hooks/index.ts

@@ -7,6 +7,7 @@ export * from "./use-fullscreen.ts";
 export * from "./use-hotkeys.ts";
 export * from "./use-interval.ts";
 export * from "./use-mouse-hover.ts";
+export * from "./use-on-click-outside.ts";
 export * from "./use-screen-scroll.ts";
 export * from "./use-screen-size.ts";
 export * from "./use-timeout.ts";

packages/keybr-widget/lib/hooks/use-on-click-outside.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from "react";
+import { useDocumentEvent } from "./use-document-event.ts";
+
+export const useOnClickOutside = (
+  { current }: RefObject<HTMLElement>,
+  onClickOutside: (event: MouseEvent | TouchEvent) => void,
+) => {
+  const listener = (event: MouseEvent | TouchEvent) => {
+    if (current != null && !current.contains(event.target as Node)) {
+      onClickOutside(event);
+    }
+  };
+  useDocumentEvent("mousedown", listener);
+  useDocumentEvent("touchstart", listener);
+};