chore: work on color input

tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -1,7 +1,19 @@
 import * as React from 'react'
+import * as Popover from '@radix-ui/react-popover';
+import { TablerIcon } from '../icons'
 
 interface ColorInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
+enum HighlightColor {
+  Gray = 'gray',
+  Red = 'red',
+  Yellow = 'yellow',
+  Green = 'green',
+  Blue = 'blue',
+  Purple = 'purple',
+  Pink = 'pink',
+}
+
 export function ColorInput({ value, onChange, ...rest }: ColorInputProps) {
   const ref = React.useRef<HTMLDivElement>(null)
   const [computedValue, setComputedValue] = React.useState(value)
@@ -18,19 +30,41 @@ export function ColorInput({ value, onChange, ...rest }: ColorInputProps) {
   }, [value])
 
   return (
-    <div className="input" ref={ref}>
-      <div className="color-input-wrapper">
-        <input
-          className="color-input"
-          type="color"
-          value={computedValue}
-          onChange={e => {
-            setComputedValue(e.target.value)
-            onChange?.(e)
-          }}
-          {...rest}
-        />
-      </div>
-    </div>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <div className="input" ref={ref}>
+          <div className="color-input-wrapper">
+            <button
+              className={`bg-${computedValue}-500)`}
+            />
+          </div>
+        </div>
+      </Popover.Trigger>
+      <Popover.Anchor />
+      <Popover.Portal>
+        <Popover.Content
+          className="tl-popover-content"
+          side="top"
+          arrowPadding={10}
+        >
+          <div className={"tl-color-palette"}>
+            {Object.values(HighlightColor).map(value =>
+              <button
+                className={`tl-color-drip bg-${value}-500`}
+                onClick={()=>{
+                  setComputedValue(value)
+                }}
+              />
+            )}
+            <button
+                className="tl-color-drip"
+            >
+              <TablerIcon name="text" />
+            </button>
+          </div>
+          <Popover.Arrow className="tl-popover-arrow" />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   )
 }

tldraw/apps/tldraw-logseq/src/styles.css

@@ -848,3 +848,25 @@ html[data-theme='dark'] {
   pointer-events: all;
   stroke-width: min(100px, calc(12px * var(--tl-scale)));
 }
+
+.tl-popover-content {
+  border-radius: 4px;
+  padding: 20px;
+  background-color: var(--ls-secondary-background-color);
+  z-index: 100000;
+}
+
+.tl-popover-arrow {
+  fill: var(--ls-secondary-background-color);
+}
+
+.tl-color-palette {
+  @apply flex;
+}
+
+.tl-color-drip {
+  width: 30px;
+  height: 30px;
+  margin: 2px;
+  border: 1px solid var(--ls-secondary-border-color);
+}