refactor: color picker

chakra-ui · Nov 9, 2024 · 87ebdd1 · 87ebdd1
1 parent da4bdce
commit 87ebdd1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/cuddly-jeans-drop.md b/.changeset/cuddly-jeans-drop.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/color-picker": patch
+---
+
+- Add `--color` to the swatch and swatch trigger parts
+- Allow clicking swatch being in the open state
diff --git a/.xstate/color-picker.js b/.xstate/color-picker.js
@@ -42,6 +42,9 @@ const fetchMachine = createMachine({
     },
     "EYEDROPPER.CLICK": {
       actions: ["openEyeDropper"]
+    },
+    "SWATCH_TRIGGER.CLICK": {
+      actions: ["setValue"]
     }
   },
   on: {

diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts
@@ -607,6 +607,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value })
         },
         style: {
+          "--color": swatchState.valueAsString,
           position: "relative",
         },
       })
@@ -624,14 +625,16 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     getSwatchProps(props) {
       const { respectAlpha = true } = props
       const swatchState = getSwatchTriggerState(props)
+      const color = swatchState.value.toString(respectAlpha ? "css" : "hex")
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
         style: {
+          "--color": color,
           position: "relative",
-          background: swatchState.value.toString(respectAlpha ? "css" : "hex"),
+          background: color,
         },
       })
     },

diff --git a/packages/machines/color-picker/src/color-picker.machine.ts b/packages/machines/color-picker/src/color-picker.machine.ts
@@ -77,6 +77,9 @@ export function machine(userContext: UserDefinedContext) {
         "EYEDROPPER.CLICK": {
           actions: ["openEyeDropper"],
         },
+        "SWATCH_TRIGGER.CLICK": {
+          actions: ["setValue"],
+        },
       },
 
       states: {