🐛 Fix hsla information in viewer

CHANGES.md

@@ -48,6 +48,7 @@
 - Fix mousewheel on viewer inspector [Taiga #4221](https://tree.taiga.io/project/penpot/issue/4221)
 - Fix path edition activated on boards [Taiga #4105](https://tree.taiga.io/project/penpot/issue/4105)
 - Fix hidden layers inside groups become visible after the group visibility is changed[Taiga #4710](https://tree.taiga.io/project/penpot/issue/4710)
+- Fix format of HSLA color on viewer [Taiga #4393](https://tree.taiga.io/project/penpot/issue/4393)
 
 ## 1.16.2-beta
 

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

@@ -60,8 +60,9 @@
         (case format
           :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))]
                   [:div (str/fmt "%s, %s, %s, %s" r g b a)])
-          :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color))]
-                  [:div (str/fmt "%s, %s, %s, %s" h s l a)])
+          :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color))
+                      result (uc/format-hsla [h s l a])]
+                  [:div result])
           [:*
            [:& color-name {:color color}]
            (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]))

frontend/src/app/util/color.cljs

@@ -8,6 +8,7 @@
   "Color conversion utils."
   (:require
    [app.util.object :as obj]
+   [app.util.strings :as ust]
    [cuerdas.core :as str]
    [goog.color :as gcolor]))
 
@@ -55,6 +56,14 @@
   (-> (hex->hsl data)
       (conj opacity)))
 
+(defn format-hsla
+  [[h s l a]]
+  (let [precision 2
+        rounded-s (* 100 (ust/format-precision s precision))
+        rounded-l (* 100 (ust/format-precision l precision))]
+
+    (str/fmt "%s, %s%, %s%, %s" h rounded-s rounded-l a)))
+
 (defn hsl->rgb
   [[h s l]]
   (gcolor/hslToRgb h s l))
@@ -116,9 +125,9 @@
 
         stops-css (str/join "," (map parse-stop stops))]
 
-      (if (= type :linear)
-        (str/fmt "linear-gradient(to bottom, %s)" stops-css)
-        (str/fmt "radial-gradient(circle, %s)" stops-css))))
+    (if (= type :linear)
+      (str/fmt "linear-gradient(to bottom, %s)" stops-css)
+      (str/fmt "radial-gradient(circle, %s)" stops-css))))
 
 ;; TODO: REMOVE `VALUE` WHEN COLOR IS INTEGRATED
 (defn color->background [{:keys [color opacity gradient value]}]