✨ Keep color data when copying from info tab into CSS

CHANGES.md

@@ -7,10 +7,12 @@
 ### :boom: Breaking changes & Deprecations
 
 ### :heart: Community contributions (Thank you!)
+
 - Clarify message when inviting existing team members to make it more user-friendly and clear which invitations will be sent. [Taiga #11441](https://tree.taiga.io/project/penpot/issue/11441) by [@iprithvitharun](https://github.com/iprithvitharun)
 - Update email change confirmation message for clarity and correct grammar. [GitHub #6786](https://github.com/penpot/penpot/issues/6786) by [@iprithvitharun](https://github.com/iprithvitharun)
 
 ### :sparkles: New features & Enhancements
+
 - Add visual indicator for new comments in the workspace [Taiga #11328](https://tree.taiga.io/project/penpot/issue/11328)
 - On components overrides, separate the content of the text from the rest of properties [Taiga #7434](https://tree.taiga.io/project/penpot/us/7434)
 - Improve dashboard's sidebar [Taiga #10700](https://tree.taiga.io/project/penpot/us/10700)
@@ -22,6 +24,7 @@
 - New typography token type - font size token [Taiga #10938](https://tree.taiga.io/project/penpot/us/10938)
 
 ### :bug: Bugs fixed
+
 - Copying font size does not copy the unit [Taiga #11143](https://tree.taiga.io/project/penpot/issue/11143)
 - Fix text-decoration line-through that displays a wrong property value [Taiga #11145](https://tree.taiga.io/project/penpot/issue/11145)
 - Fix display error message on register form [Taiga #11444](https://tree.taiga.io/project/penpot/issue/11444)
@@ -30,6 +33,8 @@
 - Fix title button from Title Case to Capitalize [Taiga #11476](https://tree.taiga.io/project/penpot/issue/11476)
 - Fix Main component receives focus and is selected when using 'Show Main Component' [Taiga #11402](https://tree.taiga.io/project/penpot/issue/11402)
 - Fix touchpad swipe leading to navigating back/forth [GitHub #4246](https://github.com/penpot/penpot/issues/4246)
+- Keep color data when copying from info tab into CSS [Taiga #11144](https://tree.taiga.io/project/penpot/issue/11144)
+- Update HSL values to modern syntax as defined in W3C CSS Color Module Level 4 [Taiga #11144](https://tree.taiga.io/project/penpot/issue/11144)
 
 ## 2.8.0
 

common/src/app/common/colors.cljc

@@ -349,7 +349,7 @@
         rounded-s (d/format-number (* 100 s) precision)
         rounded-l (d/format-number (* 100 l) precision)
         rounded-a (d/format-number a precision)]
-    (str/concat "" rounded-h ", " rounded-s "%, " rounded-l "%, " rounded-a)))
+    (str/concat "" rounded-h " " rounded-s "% " rounded-l "% / " rounded-a)))
 
 (defn format-rgba
   [[r g b a]]

common/test/common_tests/colors_test.cljc

@@ -8,7 +8,6 @@
   (:require
    #?(:cljs [goog.color :as gcolors])
    [app.common.colors :as colors]
-   [app.common.data :as d]
    [clojure.test :as t]))
 
 (t/deftest valid-hex-color
@@ -52,8 +51,8 @@
   (t/is (= [1 2 3] (colors/hex->rgb "#010203"))))
 
 (t/deftest format-hsla
-  (t/is (= "210, 50%, 0.78%, 1" (colors/format-hsla [210.0 0.5 0.00784313725490196 1])))
+  (t/is (= "210 50% 0.78% / 1" (colors/format-hsla [210.0 0.5 0.00784313725490196 1])))
-  (t/is (= "220, 5%, 30%, 0.8" (colors/format-hsla [220.0 0.05 0.3 0.8]))))
+  (t/is (= "220 5% 30% / 0.8" (colors/format-hsla [220.0 0.05 0.3 0.8]))))
 
 (t/deftest format-rgba
   (t/is (= "210, 199, 12, 0.08" (colors/format-rgba [210 199 12 0.08])))

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

@@ -7,10 +7,12 @@
 (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 types.color]
+   [app.common.types.color :as ctc]
    [app.main.fonts :as fonts]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -18,6 +20,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.color :as uc]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -35,12 +38,56 @@
           (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
        (map #(dm/str (d/name %) ": " (get style %) ";"))
        (str/join "\n")))
 
+(defn- format-gradient-css
+  "Converts a gradient object to a CSS string."
+  [gradient]
+  (str "background-image: " (uc/gradient->css gradient) ";"
+       "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))))
+
 (mf/defc typography-block
   [{:keys [text style]}]
   (let [typography-library-ref
@@ -57,7 +104,8 @@
         file-library-workspace      (get (mf/deref refs/files) (:typography-ref-file style))
         typography-external-lib (get-in file-library-workspace [:data :typographies (:typography-ref-id style)])
 
-        color-format       (mf/use-state :hex)
+        color-format!       (mf/use-state :hex)
+        color-format* (deref color-format!)
 
         typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)]
 
@@ -65,10 +113,10 @@
      (when (:fills style)
        (for [[idx fill] (map-indexed vector (:fills style))]
          [:& color-row {:key idx
-                        :format @color-format
+                        :format color-format*
-                        :color (types.color/fill->color fill)
+                        :color (ctc/fill->color fill)
-                        :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
+                        :copy-data (copy-color-data fill color-format*)
-                        :on-change-format #(reset! color-format %)}]))
+                        :on-change-format #(reset! color-format! %)}]))
 
      (when (:typography-ref-id style)
        [:div {:class (stl/css :text-row)}