🐛 Fix null when copying shadow color on inspect tab (#6923)

Co-authored-by: Xavier Julian <xaviju@proton.me>

CHANGES.md

@@ -55,6 +55,7 @@
 - Fix main component receives focus and is selected when using 'Show Main Component' [Taiga #11402](https://tree.taiga.io/project/penpot/issue/11402)
 - Fix duplicating pages with mainInstance shapes nested inside groups [Taiga #10774](https://tree.taiga.io/project/penpot/issue/10774)
 - Fix ESC key not closing Add/Manage Libraries modal [Taiga #11523](https://tree.taiga.io/project/penpot/issue/11523)
+- Fix copying a shadow color from info tab [Taiga #11211](https://tree.taiga.io/project/penpot/issue/11211)
 
 ## 2.8.1 (Unreleased)
 

frontend/src/app/main/ui/inspect/attributes/shadow.cljs

@@ -13,6 +13,7 @@
    [app.main.ui.components.title-bar :refer [inspect-title-bar*]]
    [app.main.ui.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css :as css]
+   [app.util.code-gen.style-css-formats :refer [format-color]]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -22,8 +23,18 @@
 (defn- shadow-copy-data [shadow]
   (css/shadow->css shadow))
 
+(defn- copy-color-data
+  "Converts a fill object to CSS color string in the specified format."
+  [color format]
+  (format-color color {:format format}))
+
 (mf/defc shadow-block [{:keys [shadow]}]
-  (let [color-format (mf/use-state :hex)]
+  (let [color-format (mf/use-state :hex)
+        color-format* (deref color-format)
+        on-change-format
+        (mf/use-fn
+         (fn [format]
+           (reset! color-format format)))]
     [:div {:class (stl/css :attributes-shadow-block)}
      [:div {:class (stl/css :shadow-row)}
       [:div {:class (stl/css :global/attr-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))]
@@ -42,7 +53,8 @@
 
      [:& color-row {:color (:color shadow)
                     :format @color-format
-                    :on-change-format #(reset! color-format %)}]]))
+                    :copy-data (copy-color-data (:color shadow) color-format*)
+                    :on-change-format on-change-format}]]))
 
 (mf/defc shadow-panel [{:keys [shapes]}]
   (let [shapes (->> shapes (filter has-shadow?))]

frontend/src/app/main/ui/inspect/attributes/text.cljs

@@ -7,10 +7,8 @@
 (ns app.main.ui.inspect.attributes.text
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.colors :as cc]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.math :as mth]
    [app.common.text :as txt]
    [app.common.types.color :as ctc]
    [app.main.fonts :as fonts]
@@ -20,6 +18,7 @@
    [app.main.ui.components.title-bar :refer [inspect-title-bar*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.inspect.attributes.common :refer [color-row]]
+   [app.util.code-gen.style-css-formats :refer [format-color]]
    [app.util.color :as uc]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -38,13 +37,6 @@
           (get-in state [:viewer-libraries file-id :data :typographies]))]
     #(l/derived get-library st/state)))
 
-(defn alpha->hex [alpha]
-  (-> (mth/round (* 255 alpha))
-      (js/Number)
-      (.toString 16)
-      (.toUpperCase)
-      (.padStart 2 "0")))
-
 (defn- copy-style-data
   [style & properties]
   (->> properties
@@ -58,35 +50,13 @@
        "background-clip: text;"
        "color: transparent;"))
 
-(defn- format-solid-color
-  "returns a CSS color string based on the provided color and format."
-  [color format]
-  (let [color-value (:color color)
-        opacity (:opacity color 1)
-        has-opacity? (not (= 1 opacity))]
-    (case format
-      :rgba
-      (let [[r g b a] (cc/hex->rgba color-value opacity)]
-        (str "color: rgba(" (cc/format-rgba [r g b a]) ");"))
-
-      :hex
-      (str "color: " color-value
-           (when has-opacity? (alpha->hex opacity)) ";")
-
-      :hsla
-      (let [[h s l a] (cc/hex->hsla color-value opacity)]
-        (str "color: hsla(" (cc/format-hsla [h s l a]) ");"))
-
-      ;; Default fallback
-      (str "color: " color-value ";"))))
-
 (defn- copy-color-data
   "Converts a fill object to CSS color string in the specified format."
   [fill format]
   (let [color (ctc/fill->color fill)]
     (if-let [gradient (:gradient color)]
       (format-gradient-css gradient)
-      (format-solid-color color format))))
+      (format-color color {:format format}))))
 
 (mf/defc typography-block
   [{:keys [text style]}]

frontend/src/app/util/code_gen/style_css.cljs

@@ -172,6 +172,7 @@ body {
      (format-value property value options))))
 
 (defn format-css-property
+  "Format a single CSS property in the format 'property: value;'."
   [[property value] options]
   (when (some? value)
     (let [formatted-value (format-css-value property value options)

frontend/src/app/util/code_gen/style_css_formats.cljs

@@ -53,6 +53,7 @@
     :else value))
 
 (defn format-color
+  "Format a color value to a CSS compatible string based on the given format."
   [value options]
   (let [format (get options :format :hex)]
     (cond