From f0d74ab63e640b6e1b52e488227f412f1dd93fae Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Fri, 20 Jan 2023 14:28:40 +0100
Subject: [PATCH] :bug: Fix hsla information in viewer

---
 CHANGES.md                                        |  1 +
 .../main/ui/viewer/inspect/attributes/common.cljs |  5 +++--
 frontend/src/app/util/color.cljs                  | 15 ++++++++++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 795ffd0449..1f9546d670 100644
--- a/CHANGES.md
+++ b/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
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
index cd3b7e1805..76e593f4c8 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
+++ b/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)) "%")])]))
diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs
index 30ee9415ec..80f60a41eb 100644
--- a/frontend/src/app/util/color.cljs
+++ b/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]}]