From ea1ab7c23b8a45955aa42ec631cba0f09582a5a8 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Tue, 7 Oct 2025 12:11:40 +0200
Subject: [PATCH] :bug: Fix modal title on edit token (#7453)

* :bug: Fix modal title on edit token

* :bug: Fix font size on numeric input

* :recycle: Update color token border on hover

* :recycle: Use swatch component on token pill
---
 frontend/playwright/ui/specs/tokens.spec.js                  | 2 +-
 frontend/src/app/main/ui/ds/controls/numeric_input.cljs      | 1 +
 .../main/ui/workspace/sidebar/options/rows/color_row.scss    | 2 +-
 .../app/main/ui/workspace/tokens/management/create/form.cljs | 2 +-
 .../app/main/ui/workspace/tokens/management/token_pill.cljs  | 5 +++--
 frontend/translations/en.po                                  | 2 +-
 6 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js
index 19f5f6594b..f371b0cb7a 100644
--- a/frontend/playwright/ui/specs/tokens.spec.js
+++ b/frontend/playwright/ui/specs/tokens.spec.js
@@ -174,7 +174,7 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toBeEnabled();
 
     // Tokens tab panel should have two tokens with the color red / #ff0000
-    await expect(tokensTabPanel.getByTitle("#ff0000")).toHaveCount(2);
+    await expect(tokensTabPanel.getByRole("button", {name: "#ff0000"})).toHaveCount(2);
 
     // Global set has been auto created and is active
     await expect(
diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs
index ed11c7b278..e09200febe 100644
--- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs
+++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs
@@ -623,6 +623,7 @@
                                 :on-key-down on-key-down
                                 :on-focus on-focus
                                 :on-change store-raw-value
+                                :variant "comfortable"
                                 :disabled disabled
                                 :slot-start (when icon
                                               (mf/html [:> tooltip*
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index 98e71e9794..6ecce7425c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -276,7 +276,7 @@
   &:hover {
     --token-color-wrapper-background-color: var(--color-token-background);
     --token-color-wrapper-foreground-color: var(--color-foreground-primary);
-    --token-color-wrapper-border-color: var(--color-token-background);
+    --token-color-wrapper-border-color: var(--color-token-accent);
     --token-actions-display: flex;
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs
index b6a9e4386c..4ec40e9a03 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs
@@ -548,7 +548,7 @@
      [:div {:class (stl/css :token-rows)}
       [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
        (if (= action "edit")
-         (tr "workspace.tokens.edit-token")
+         (tr "workspace.tokens.edit-token" token-type)
          (tr "workspace.tokens.create-token" token-type))]
 
       [:div {:class (stl/css :input-row)}
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
index 7af9d29ae5..e93a69c2aa 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
@@ -17,9 +17,9 @@
    [app.main.data.workspace.tokens.color :as dwtc]
    [app.main.data.workspace.tokens.format :as dwtf]
    [app.main.refs :as refs]
-   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
+   [app.main.ui.ds.utilities.swatch :refer [swatch*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [clojure.set :as set]
@@ -298,7 +298,8 @@
          :class (stl/css :token-pill-icon)}]
 
        color
-       [:& color-bullet {:color color :mini true}]
+       [:> swatch* {:background color
+                    :size "small"}]
 
        status-icon?
        [:> token-status-icon*
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index b0034bde0b..8b1041f862 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -7428,7 +7428,7 @@ msgstr "Edit themes"
 
 #: src/app/main/ui/workspace/tokens/management/create/form.cljs:533
 msgid "workspace.tokens.edit-token"
-msgstr "Edit token %s"
+msgstr "Edit %s token"
 
 #: src/app/main/data/workspace/tokens/errors.cljs:41
 msgid "workspace.tokens.empty-input"