🐛 Fix copy color information in several formats

CHANGES.md

@@ -90,6 +90,7 @@
 - Fix export multiple images when only one of them has export settings [Taiga #5649](https://tree.taiga.io/project/penpot/issue/5649)
 - Fix error when a user different than the thread creator edits a comment [Taiga #5647](https://tree.taiga.io/project/penpot/issue/5647)
 - Fix unnecessary button [Taiga #3312](https://tree.taiga.io/project/penpot/issue/3312)
+- Fix copy color information in several formats [Taiga #4723](https://tree.taiga.io/project/penpot/issue/4723)
 
 ### :arrow_up: Deps updates
 

common/src/app/common/data.cljc

@@ -752,6 +752,12 @@
                [key (delay (generator-fn key))]))
         keys))
 
+(defn opacity-to-hex [opacity]
+  (let [opacity (* opacity 255)
+        value   (mth/round opacity)]
+    (.. value
+        (toString 16)
+        (padStart 2 "0"))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; String Functions

frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs

@@ -35,6 +35,13 @@
    {:to-prop "background"
     :format #(uc/color->background (shape->color shape))}))
 
+(defn copy-data-format [shape format]
+  (cg/generate-css-props
+   shape
+   fill-attributes
+   {:to-prop "background-color"
+    :format #(uc/color->format->background (shape->color shape) format)}))
+
 (mf/defc fill-block [{:keys [shape]}]
   (let [color-format (mf/use-state :hex)
         color (shape->color shape)]
@@ -43,7 +50,7 @@
      [:& color-row {:color color
                     :format @color-format
                     :on-change-format #(reset! color-format %)
-                    :copy-data (copy-data shape)}]]))
+                    :copy-data (copy-data-format shape  @color-format)}]]))
 
 (mf/defc fill-panel
   [{:keys [shapes]}]

frontend/src/app/util/color.cljs

@@ -7,6 +7,7 @@
 (ns app.util.color
   "Color conversion utils."
   (:require
+   [app.common.data :as d]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
    [app.util.strings :as ust]
@@ -150,6 +151,24 @@
 
       :else "transparent")))
 
+(defn color->format->background [{:keys [color opacity gradient]} format]
+  (let [opacity (or opacity 1)]
+    (cond
+      (and gradient (not= :multiple gradient))
+      (gradient->css gradient)
+
+      (not= color :multiple)
+      (case format
+        :rgba (let [[r g b] (hex->rgb color)]
+               (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity))
+
+        :hsla (let [[h s l] (hex->hsl color)]
+                (str/fmt "hsla(%s, %s, %s, %s)" h (* 100 s) (* 100 l) opacity))
+
+        :hex (str color (str/upper (d/opacity-to-hex opacity))))
+
+      :else "transparent")))
+
 (defn multiple? [{:keys [id file-id value color gradient]}]
   (or (= value :multiple)
       (= color :multiple)