✨ Show alpha percentage in asset library color names (#8975)

When several library colors share the same RGB value but differ only
in opacity, append the alpha percentage (e.g. "#ff0000 50%") next to
the displayed default name and in the color bullet tooltip so users
can tell them apart at a glance.

Closes #6328

Signed-off-by: rockchris99 <chrisleo0721@gmail.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>

CHANGES.md

@@ -10,6 +10,7 @@
 
 ### :sparkles: New features & Enhancements
 
+- Show alpha percentage next to library color values to distinguish colors that differ only in opacity (by @rockchris099) [Github #6328](https://github.com/penpot/penpot/issues/6328)
 - Add "Clear artboard guides" option to right-click context menu for frames (by @eureka0928) [Github #6987](https://github.com/penpot/penpot/issues/6987)
 - Allow duplicating color and typography styles (by @MkDev11) [Github #2912](https://github.com/penpot/penpot/issues/2912)
 - Add woff2 support on user uploaded fonts (by @Nivl) [Github #8248](https://github.com/penpot/penpot/pull/8248)

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

@@ -7,24 +7,33 @@
 (ns app.main.ui.components.color-bullet
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.math :as mth]
    [app.config :as cfg]
    [app.util.color :as uc]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
+(defn- format-color-with-alpha
+  [color opacity]
+  (if (and (number? opacity) (< opacity 1))
+    (str color " " (mth/round (* opacity 100)) "%")
+    color))
+
 (defn- color-title
   [color-item]
   (let [{:keys [name path]} (meta color-item)
         path-and-name (if path (str path " / " name) name)
         gradient (:gradient color-item)
         image (:image color-item)
-        color (:color color-item)]
+        opacity (:opacity color-item)
+        color (:color color-item)
+        color-str (when color (format-color-with-alpha color opacity))]
 
     (if (some? name)
       (cond
         (some? color)
-        (str/ffmt "% (%)" path-and-name color)
+        (str/ffmt "% (%)" path-and-name color-str)
 
         (some? gradient)
         (str/ffmt "% (%)" path-and-name (uc/gradient-type->string (:type gradient)))
@@ -37,7 +46,7 @@
 
       (cond
         (some? color)
-        color
+        color-str
 
         (some? gradient)
         (uc/gradient-type->string (:type gradient))

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.math :as mth]
    [app.common.path-names :as cpn]
    [app.config :as cf]
    [app.main.constants :refer [max-input-length]]
@@ -61,10 +62,16 @@
         menu-state  (mf/use-state cmm/initial-context-menu-state)
         read-only?  (mf/use-ctx ctx/workspace-read-only?)
 
+        opacity      (:opacity color)
+        alpha-suffix (when (and (number? opacity) (< opacity 1))
+                       (dm/str " " (mth/round (* opacity 100)) "%"))
         default-name (cond
                        (:gradient color) (uc/gradient-type->string (dm/get-in color [:gradient :type]))
                        (:color color)    (:color color)
                        :else             (:value color))
+        display-name (if (and alpha-suffix (not (:gradient color)))
+                       (dm/str default-name alpha-suffix)
+                       default-name)
 
         rename-color
         (mf/use-fn
@@ -231,16 +238,16 @@
          :default-value (cpn/merge-path-item (:path color) (:name color))}]
 
        [:div {:title (if (= (:name color) default-name)
-                       default-name
-                       (dm/str (:name color) " (" default-name ")"))
+                       display-name
+                       (dm/str (:name color) " (" display-name ")"))
               :class (stl/css :name-block)
               :on-double-click rename-color-clicked}
 
         (if (= (:name color) default-name)
-          [:span  {:class (stl/css :default-name)} default-name]
+          [:span  {:class (stl/css :default-name)} display-name]
           [:*
            (:name color)
-           [:span  {:class (stl/css :default-name :default-name-with-color)} default-name]])])
+           [:span  {:class (stl/css :default-name :default-name-with-color)} display-name]])])
 
      (when local?
        [:> cmm/assets-context-menu*