✨ Show color hex or name on hover

CHANGES.md

@@ -5,6 +5,7 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
+- Show color hex or name on hover [Taiga #2413](https://tree.taiga.io/project/penpot/us/2413).
 - Add shortcut to create artboard from selected objects [Taiga #2412](https://tree.taiga.io/project/penpot/us/2412).
 - Add shortcut for opacity [Taiga #2442](https://tree.taiga.io/project/penpot/us/2442).
 - Setting fill automatically for new texts [Taiga #2441](https://tree.taiga.io/project/penpot/us/2441).

frontend/resources/styles/main/partials/color-bullet.scss

@@ -92,8 +92,6 @@ ul.palette-menu .color-bullet {
 .color-bullet {
   display: flex;
   flex-direction: row;
-  overflow: hidden;
-
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
     left center;
   background-color: $color-white;
@@ -104,6 +102,14 @@ ul.palette-menu .color-bullet {
   }
 }
 
+.color-bullet-left {
+  border-radius: 10px 0 0 10px;
+}
+
+.color-bullet-right {
+  border-radius: 0 10px 10px 0;
+}
+
 .color-data .color-bullet.multiple {
   background: transparent;
 
@@ -155,6 +161,11 @@ ul.palette-menu .color-bullet {
   }
 }
 
+.color-data .color-bullet .color-bullet-left,
+.color-data .color-bullet .color-bullet-right {
+  border-radius: unset;
+}
+
 .colorpicker-content .libraries .selected-colors .color-bullet {
   grid-area: auto;
   margin-bottom: 0.25rem;
@@ -162,6 +173,7 @@ ul.palette-menu .color-bullet {
 
   &:hover {
     border-color: $color-primary;
+    z-index: 10;
   }
 
   &.button {

frontend/resources/styles/main/partials/colorpicker.scss

@@ -343,8 +343,6 @@
       grid-template-columns: repeat(8, 1fr);
       justify-content: space-between;
       margin-right: -8px;
-      overflow-x: hidden;
-      overflow-y: auto;
       max-height: 5.5rem;
     }
 

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

@@ -16,8 +16,9 @@
 
     ;; No multiple selection
     (let [color (if (string? color) {:color color :opacity 1} color)]
-      [:div.color-bullet {:class (when (:id color) "is-library-color")
-                          :on-click #(when on-click (on-click %))}
+      [:div.color-bullet.tooltip.tooltip-right {:class (when (:id color) "is-library-color")
+                          :on-click #(when on-click (on-click %))
+                          :alt (or (:name color) (:color color))}
        (when (not (:gradient color))
          [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])