Share color picker effect to set hue slider css variables

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -52,6 +52,25 @@
 
 ;; --- Color Picker Modal
 
+(defn use-color-picker-css-variables! [node-ref current-color]
+  (mf/with-effect [current-color]
+    (let [node (mf/ref-val node-ref)
+          {:keys [r g b h v]} current-color
+          rgb [r g b]
+          hue-rgb (cc/hsv->rgb [h 1.0 255])
+          hsl-from (cc/hsv->hsl [h 0.0 v])
+          hsl-to (cc/hsv->hsl [h 1.0 v])
+
+          format-hsl (fn [[h s l]]
+                       (str/fmt "hsl(%s, %s, %s)"
+                                h
+                                (str (* s 100) "%")
+                                (str (* l 100) "%")))]
+      (dom/set-css-property! node "--color" (str/join ", " rgb))
+      (dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
+      (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
+      (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
+
 (mf/defc colorpicker
   {::mf/props :obj}
   [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}]
@@ -220,23 +239,7 @@
       (st/emit! (dc/update-colorpicker data)))
 
     ;; Updates the CSS color variable when there is a change in the color
-    (mf/with-effect [current-color]
+    (use-color-picker-css-variables! node-ref current-color)
-      (let [node (mf/ref-val node-ref)
-            {:keys [r g b h v]} current-color
-            rgb [r g b]
-            hue-rgb (cc/hsv->rgb [h 1.0 255])
-            hsl-from (cc/hsv->hsl [h 0.0 v])
-            hsl-to (cc/hsv->hsl [h 1.0 v])
-
-            format-hsl (fn [[h s l]]
-                         (str/fmt "hsl(%s, %s, %s)"
-                                  h
-                                  (str (* s 100) "%")
-                                  (str (* l 100) "%")))]
-        (dom/set-css-property! node "--color" (str/join ", " rgb))
-        (dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
-        (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
-        (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))
 
     ;; Updates color when pixel picker is used
     (mf/with-effect [picking-color? picked-color picked-color-select]

frontend/src/app/main/ui/workspace/tokens/form.cljs

@@ -7,18 +7,20 @@
 (ns app.main.ui.workspace.tokens.form
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.workspace.tokens.errors :as wte]
    ["lodash.debounce" :as debounce]
-   [app.common.colors :as cc]
+   [app.common.colors :as c]
    [app.common.data :as d]
    [app.main.data.modal :as modal]
    [app.main.data.tokens :as dt]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :refer [color-bullet]]
+   [app.main.ui.workspace.colorpicker :as colorpicker]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
    [app.main.ui.workspace.tokens.common :as tokens.common]
+   [app.main.ui.workspace.tokens.errors :as wte]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
+   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
@@ -26,8 +28,7 @@
    [malli.core :as m]
    [malli.error :as me]
    [promesa.core :as p]
-   [rumext.v2 :as mf]
+   [rumext.v2 :as mf]))
-   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]))
 
 ;; Schemas ---------------------------------------------------------------------
 
@@ -155,21 +156,30 @@ Token names should only contain letters and digits separated by . characters.")}
 
 (mf/defc ramp
   [{:keys [color on-change]}]
-  (let [dragging? (mf/use-state)
+  (let [wrapper-node-ref (mf/use-ref nil)
-        [r g b] (cc/hex->rgb color)
+        dragging? (mf/use-state)
-        [h s v] (cc/hex->hsv color)
+        hex->value (fn [hex]
-        value (mf/use-state {:hex color
+                     (when-let [tc (tinycolor/valid-color hex)]
-                             :r r :g g :b b
+                       (let [hex (str "#" (tinycolor/->hex tc))
-                             :h h :s s :v v})
+                             [r g b] (c/hex->rgb hex)
-        on-change' (fn [color]
+                             [h s v] (c/hex->hsv hex)]
-                     (swap! value merge color)
+                         {:hex hex
-                     (when-not (and @dragging? (:hex color))
+                          :r r :g g :b b
-                       (on-change (:hex color))))]
+                          :h h :s s :v v
-    [:& ramp-selector {:color @value
+                          :alpha 1})))
-                       :disable-opacity true
+        value (mf/use-state (hex->value color))
-                       :on-start-drag #(reset! dragging? true)
+        on-change' (fn [{:keys [hex]}]
-                       :on-finish-drag #(reset! dragging? false)
+                     (reset! value (hex->value hex))
-                       :on-change on-change'}]))
+                     (when-not (and @dragging? hex)
+                       (on-change hex)))]
+    (colorpicker/use-color-picker-css-variables! wrapper-node-ref @value)
+    [:div {:ref wrapper-node-ref}
+     [:& ramp-selector
+      {:color @value
+       :disable-opacity true
+       :on-start-drag #(reset! dragging? true)
+       :on-finish-drag #(reset! dragging? false)
+       :on-change on-change'}]]))
 
 (mf/defc token-value-or-errors
   [{:keys [result-or-errors]}]
@@ -343,8 +353,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                                                   [:div {:class (stl/css :color-bullet-placeholder)}])]))}]
       (when @color-ramp-open?
         [:& ramp {:color (some-> (or @token-resolve-result (:value token))
-                                 (tinycolor/valid-color)
+                                 (tinycolor/valid-color))
-                                 (tinycolor/->hex))
                   :on-change on-update-color}])
       [:& token-value-or-errors {:result-or-errors @token-resolve-result}]