3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-14 15:47:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Don't override user provided color format (#6231)

Browse source
This commit is contained in:
Florian Schrödl 2025-04-22 09:10:07 +02:00 • committed by GitHub
parent c7b062f483
commit 0bff76e5f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 105 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.cljs
View file

@ -20,7 +20,8 @@
{::mf/props :obj
::mf/schema schema::input-token-color-bullet}
[{:keys [color on-click]}]
[:div {:class (stl/css :input-token-color-bullet)
[:div {:data-testid "token-form-color-bullet"
:class (stl/css :input-token-color-bullet)
:on-click on-click}
(if-let [color' (wtt/color-bullet-color color)]
[:> color-bullet {:color color' :mini true}]

45
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -198,6 +198,13 @@
(when-not (and dragging? hex)
(reset! internal-color* selector-color)
(on-change hex alpha)))))]
(mf/use-effect
(mf/deps color)
(fn []
;; Update internal color when user changes input value
(when-let [color (tinycolor/valid-color color)]
(when-not (= (tinycolor/->hex-string color) (:hex internal-color))
(reset! internal-color* (hex->value color))))))
(colorpicker/use-color-picker-css-variables! wrapper-node-ref internal-color)
[:div {:ref wrapper-node-ref}
@ -315,7 +322,8 @@
(valid-name? @token-name-ref))
;; Value
color (mf/use-state (when color? (:value token)))
color* (mf/use-state (when color? (:value token)))
color (deref color*)
color-ramp-open* (mf/use-state false)
color-ramp-open? (deref color-ramp-open*)
value-input-ref (mf/use-ref nil)
@ -338,7 +346,7 @@
:else
(:resolved-value token-or-err))]
(when color? (reset! color (if error? nil v)))
(when color? (reset! color* (if error? nil v)))
(reset! token-resolve-result* v))))
on-update-value-debounced (use-debonced-resolve-callback token-name-ref token active-theme-tokens set-resolve-value)
@ -355,13 +363,28 @@
(reset! value-ref value')
(on-update-value-debounced value'))))
on-update-color (mf/use-fn
(mf/deps on-update-value-debounced)
(mf/deps color on-update-value-debounced)
(fn [hex-value alpha]
(let [color-value (if (= 1 alpha)
hex-value
(-> (tinycolor/valid-color hex-value)
(tinycolor/set-alpha alpha)
(tinycolor/->rgba-string)))]
(let [;; StyleDictionary will always convert to hex/rgba, so we take the format from the value input field
prev-input-color (some-> (dom/get-value (mf/ref-val value-input-ref))
(tinycolor/valid-color))
;; If the input is a reference we will take the format from the computed value
prev-computed-color (when-not prev-input-color
(some-> color (tinycolor/valid-color)))
prev-format (some-> (or prev-input-color prev-computed-color)
(tinycolor/color-format))
to-rgba? (and
(< alpha 1)
(or (= prev-format "hex") (not prev-format)))
to-hex? (and (not prev-format) (= alpha 1))
format (cond
to-rgba? "rgba"
to-hex? "hex"
prev-format prev-format
:else "hex")
color-value (-> (tinycolor/valid-color hex-value)
(tinycolor/set-alpha (or alpha 1))
(tinycolor/->string format))]
(reset! value-ref color-value)
(dom/set-value! (mf/ref-val value-input-ref) color-value)
(on-update-value-debounced color-value))))
@ -538,10 +561,10 @@
:on-blur on-update-value}
(when color?
[:> input-token-color-bullet*
{:color @color :on-click on-display-colorpicker'}])]
{:color color
:on-click on-display-colorpicker'}])]
(when color-ramp-open?
[:> ramp* {:color (some-> (or token-resolve-result (:value token))
(tinycolor/valid-color))
[:> ramp* {:color (some-> color (tinycolor/valid-color))
:on-change on-update-color}])
[:& token-value-or-errors {:result-or-errors token-resolve-result}]]

19
frontend/src/app/main/ui/workspace/tokens/tinycolor.cljs
View file

@ -32,17 +32,24 @@
(let [tc (tinycolor color-str)]
(str/starts-with? (.getFormat tc) "hex"))))
(defn ->string [^js tc]
(.toString tc))
(defn ->string
"Stringify `tc` to `format`, uses `hex` as per default."
[^js tc format]
(let [format' (case format
;; Tinycolor `.toString` doesnt support the `a` suffix it gives you via `.getFormat`
"rgba" "rgb"
"hsva" "hsv"
;; Keep these formats
"rgb" "rgb"
"hsv" "hsv"
;; Fall back to hex as the default
"hex")]
(.toString tc format')))
(defn ->hex-string [^js tc]
(assert (tinycolor? tc))
(.toHexString tc))
(defn ->rgba-string [^js tc]
(assert (tinycolor? tc))
(.toRgbString tc))
(defn color-format [^js tc]
(assert (tinycolor? tc))
(.getFormat tc))