From 05bea14a8860af3b6bd38907978c79ad6ff7e5f5 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Wed, 12 Nov 2025 10:04:29 +0100
Subject: [PATCH] :bug: Fix review selected colors (#7715)

* :bug: Fix gap between token sets

* :bug: Show token selected on color selecction modal
---
 frontend/src/app/main/ui/workspace/colorpicker.cljs       | 5 ++++-
 .../app/main/ui/workspace/colorpicker/color_tokens.cljs   | 8 ++++----
 .../app/main/ui/workspace/colorpicker/color_tokens.scss   | 3 +++
 .../main/ui/workspace/sidebar/options/rows/color_row.cljs | 3 ++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index c0842670ad..4da60706d0 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -94,7 +94,7 @@
       (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
 
 (mf/defc colorpicker
-  [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept origin combined-tokens color-origin on-token-change tab]}]
+  [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept origin combined-tokens color-origin on-token-change tab applied-token]}]
   (let [state                  (mf/deref refs/colorpicker)
         node-ref               (mf/use-ref)
 
@@ -542,6 +542,7 @@
 
         [:> token-section* {:combined-tokens combined-tokens
                             :on-token-change on-token-change
+                            :applied-token applied-token
                             :color-origin color-origin}])]
      (when (fn? on-accept)
        [:div {:class (stl/css :actions)}
@@ -728,6 +729,7 @@
            on-token-change
            on-close
            tab
+           applied-token
            on-accept]}]
   (let [vport       (mf/deref viewport)
         dirty?      (mf/use-var false)
@@ -790,6 +792,7 @@
                       :disable-opacity disable-opacity
                       :disable-image disable-image
                       :on-token-change on-token-change
+                      :applied-token applied-token
                       :on-change on-change'
                       :origin origin
                       :tab tab
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
index fb04f920da..2174b8aac2 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
@@ -103,7 +103,7 @@
 
 (mf/defc set-section*
   {::mf/private true}
-  [{:keys [collapsed toggle-sets-open group-or-set name color-origin on-token-change] :rest props}]
+  [{:keys [collapsed toggle-sets-open group-or-set name color-origin on-token-change applied-token] :rest props}]
 
   (let [list-style* (mf/use-state :list)
         list-style  (deref list-style*)
@@ -207,8 +207,7 @@
           (let [selected? (case color-origin
                             :fill (= has-color-tokens? (:name token))
                             :stroke-color (= has-stroke-tokens? (:name token))
-                            :color-selection (or (= has-color-tokens? (:name token))
-                                                 (= has-stroke-tokens? (:name token)))
+                            :color-selection (= applied-token (:name token))
                             false)]
             (if (= :grid list-style)
               [:> grid-item* {:key (str "token-grid-" (:id token))
@@ -266,7 +265,7 @@
 
 (mf/defc token-section*
   {}
-  [{:keys [combined-tokens color-origin on-token-change] :rest props}]
+  [{:keys [combined-tokens color-origin on-token-change applied-token] :rest props}]
   (let [sets (set (mapv label-group-or-set combined-tokens))
         filter-term* (mf/use-state "")
         filter-term (deref filter-term*)
@@ -311,6 +310,7 @@
                 :color-origin color-origin
                 :on-token-change on-token-change
                 :name name
+                :applied-token applied-token
                 :group-or-set combined-sets}]))]
          [:> token-empty-state*])]
       [:> token-empty-state*])))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss
index 97a0d4de36..37ab3f3e40 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss
@@ -88,6 +88,9 @@
 
 .color-tokens-inputs {
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-s);
 }
 
 // Title bar
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 181f992b56..6e74d9708f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -239,7 +239,7 @@
 
         open-modal
         (mf/use-fn
-         (mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens index)
+         (mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens index applied-token)
          (fn [color pos tab]
            (let [color (cond
                          ^boolean has-multiple-colors
@@ -263,6 +263,7 @@
                                     (when on-close
                                       (on-close value opacity id file-id)))
                         :active-tokens tokens
+                        :applied-token applied-token
                         :color-origin origin
                         :tab tab
                         :origin :sidebar