🐛 Pass color format to css formatter (#5890)

* 🐛 Pass color format to css formatter

* 📎 Use get method to retrieve format

* 📎 Add UI test to check background color is correctly copied to clipboard when changing the format

frontend/src/app/main/ui/components/copy_button.cljs

@@ -11,13 +11,14 @@
    [app.main.data.event :as-alias ev]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
    [app.util.timers :as tm]
    [app.util.webapi :as wapi]
    [rumext.v2 :as mf]))
 
 (mf/defc copy-button
   {::mf/props :obj}
-  [{:keys [data on-copied children class]}]
+  [{:keys [data on-copied children class aria-label]}]
   (let [active* (mf/use-state false)
         active? (deref active*)
 
@@ -38,6 +39,7 @@
               (if (fn? data) (data) data)))))]
 
     [:button {:class class
+              :aria-label (or aria-label (tr "labels.copy"))
               :data-active (dm/str active?)
               :on-click on-click}
      children

frontend/src/app/main/ui/components/select.cljs

@@ -102,6 +102,8 @@
           current-icon (:icon selected-option)
           current-icon-ref (i/key->icon current-icon)]
       [:div {:on-click open-dropdown
+             :role "combobox"
+             :aria-activedescendent current-value
              :class (dm/str (stl/css-case :custom-select true
                                           :disabled disabled
                                           :icon (some? current-icon-ref))
@@ -116,11 +118,13 @@
          (for [[index item] (d/enumerate options)]
            (if (= :separator item)
              [:li {:class (dom/classnames (stl/css :separator) true)
+                   :role "option"
                    :key (dm/str current-id "-" index)}]
              (let [[value label icon] (as-key-value item)
                    icon-ref (i/key->icon icon)]
                [:li
                 {:key (dm/str current-id "-" index)
+                 :role "option"
                  :class (stl/css-case
                          :checked-element true
                          :disabled (:disabled item)

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

@@ -117,6 +117,7 @@
           [:div {:class (stl/css :format-info)} "rgba"])]
 
        [:& copy-button {:data copy-data
+                        :aria-label (tr "labels.copy-color")
                         :class (stl/css-case :color-row-copy-btn true
                                              :one-line (not color-library-name)
                                              :two-line (some? color-library-name))}

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

@@ -45,7 +45,7 @@
       {:color color
        :format format
        :on-change-format on-change
-       :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]))
+       :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties {:format format})}]]))
 
 (mf/defc fill-panel
   {::mf/wrap-props false}

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

@@ -53,28 +53,30 @@
     :else value))
 
 (defn format-color
-  [value _options]
-  (cond
-    (:image value)
-    (let [image-url (cfg/resolve-file-media (:image value))
-          opacity-color (when (not= (:opacity value) 1)
-                          (uc/gradient->css {:type :linear
-                                             :stops [{:color "#FFFFFF" :opacity (:opacity value)}
-                                                     {:color "#FFFFFF" :opacity (:opacity value)}]}))]
-      (if opacity-color
-        ;; CSS doesn't allow setting directly opacity to background image, we should add a dummy gradient to get it
-        (dm/fmt "%, url(%) no-repeat center center / cover" opacity-color image-url)
-        (dm/fmt "url(%) no-repeat center center / cover" image-url)))
+  [value options]
+  (let [format (get options :format :hex)]
+    (cond
+      (:image value)
+      (let [image-url (cfg/resolve-file-media (:image value))
+            opacity-color (when (not= (:opacity value) 1)
+                            (uc/gradient->css {:type :linear
+                                               :stops [{:color "#FFFFFF" :opacity (:opacity value)}
+                                                       {:color "#FFFFFF" :opacity (:opacity value)}]}))]
+        (if opacity-color
+          ;; CSS doesn't allow setting directly opacity to background image, we should add a dummy gradient to get it
+          (dm/fmt "%, url(%) no-repeat center center / cover" opacity-color image-url)
+          (dm/fmt "url(%) no-repeat center center / cover" image-url)))
 
-    (not= (:opacity value) 1)
-    (uc/color->background value)
+      (not= (:opacity value) 1)
+      (uc/color->format->background value format)
 
-    :else
-    (str/upper (:color value))))
+      :else
+      (uc/color->format->background value format))))
 
 (defmethod format-value :color
   [_ value options]
-  (format-color value options))
+  (let [format (get options :format :hex)]
+    (format-color value (assoc options :format format))))
 
 (defmethod format-value :color-array
   [_ value options]