✨ Improve readability of RGBA and HSLA values in inspect mode (#5918)

* ✨ Improve readability of RGBA and HSLA values in inspect mode

* 📎 Remove reader conditionals for format common methods

common/src/app/common/colors.cljc

@@ -342,13 +342,20 @@
   (-> (hex->hsl data)
       (conj opacity)))
 
-#?(:cljs
-   (defn format-hsla
-     [[h s l a]]
-     (let [precision 2
-           rounded-s (* 100 (parse-double (d/format-precision s precision)))
-           rounded-l (* 100 (parse-double (d/format-precision l precision)))]
-       (str/concat "" h ", " rounded-s "%, " rounded-l "%, " a))))
+(defn format-hsla
+  [[h s l a]]
+  (let [precision 2
+        rounded-h (int h)
+        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)))
+
+(defn format-rgba
+  [[r g b a]]
+  (let [precision 2
+        rounded-a (d/format-number a precision)]
+    (str/ffmt "%, %, %, %" r g b rounded-a)))
 
 (defn- hue->rgb
   "Helper for hsl->rgb"

common/src/app/common/data.cljc

@@ -1007,27 +1007,35 @@
 (def ^:const trail-zeros-regex-1 #"\.0+$")
 (def ^:const trail-zeros-regex-2 #"(\.\d*[^0])0+$")
 
-#?(:cljs
-   (defn format-precision
-     "Creates a number with predetermined precision and then removes the trailing 0.
+(defn format-precision
+  "Creates a number with predetermined precision and then removes the trailing 0.
   Examples:
     12.0123, 0 => 12
     12.0123, 1 => 12
     12.0123, 2 => 12.01"
-     [num precision]
+  [num precision]
 
-     (if (number? num)
-       (try
-         (let [num-str (mth/to-fixed num precision)
+  (if (number? num)
+    (try
+      (let [num-str (mth/to-fixed num precision)
                ;; Remove all trailing zeros after the comma 100.00000
-               num-str (str/replace num-str trail-zeros-regex-1 "")]
+            num-str (str/replace num-str trail-zeros-regex-1 "")]
            ;; Remove trailing zeros after a decimal number: 0.001|00|
-           (if-let [m (re-find trail-zeros-regex-2 num-str)]
-             (str/replace num-str (first m) (second m))
-             num-str))
-         (catch :default _
-           (str num)))
-       (str num))))
+        (if-let [m (re-find trail-zeros-regex-2 num-str)]
+          (str/replace num-str (first m) (second m))
+          num-str))
+      (catch #?(:clj Throwable :cljs :default) _
+        (str num)))
+    (str num)))
+
+(defn format-number
+  ([value]
+   (format-number value nil))
+  ([value {:keys [precision] :or {precision 2}}]
+   (let [value (if (string? value) (parse-double value) value)]
+     (when (num? value)
+       (let [value (format-precision value precision)]
+         (str value))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Util protocols

common/test/common_tests/colors_test.cljc

@@ -51,9 +51,13 @@
   (t/is (= [0 0 0] (colors/hex->rgb "#kkk")))
   (t/is (= [1 2 3] (colors/hex->rgb "#010203"))))
 
-#?(:cljs
-   (t/deftest format-hsla
-     (t/is (= "210, 50%, 1%, 1" (colors/format-hsla [210.0 0.5 0.00784313725490196 1])))))
+(t/deftest format-hsla
+  (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/deftest format-rgba
+  (t/is (= "210, 199, 12, 0.08" (colors/format-rgba [210 199 12 0.08])))
+  (t/is (= "210, 199, 12, 1" (colors/format-rgba [210 199 12 1]))))
 
 (t/deftest rgb-to-hsl
   (t/is (= [210.0 0.5 0.00784313725490196] (colors/rgb->hsl [1 2 3])))

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

@@ -129,13 +129,14 @@
              [:& cb/color-name {:color color :size 90}]
              (case format
                :hex [:& cb/color-name {:color color}]
-               :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
-                       (str/ffmt "%, %, %, %" r g b a))
+               :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))
+                           result (cc/format-rgba [r g b a])]
+                       [:* result])
                :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
                            result (cc/format-hsla [h s l a])]
                        [:* result])))]
 
-          (when-not (:gradient color)
+          (when (and (not (:gradient color)) (= :hex format))
             [:span {:class (stl/css :opacity-info)}
              (dm/str (-> color
                          (:opacity)

frontend/src/app/util/color.cljs

@@ -63,10 +63,10 @@
       (not= color :multiple)
       (case format
         :rgba (let [[r g b] (cc/hex->rgb color)]
-                (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity))
+                (str/fmt "rgba(%s)" (cc/format-rgba [r g b opacity])))
 
         :hsla (let [[h s l] (cc/hex->hsl color)]
-                (str/fmt "hsla(%s, %s, %s, %s)" h (* 100 s) (* 100 l) opacity))
+                (str/fmt "hsla(%s)" (cc/format-hsla [h s l opacity])))
 
         :hex (str color (str/upper (d/opacity-to-hex opacity))))