🐛 Fix modal title on edit token (#7453)

* 🐛 Fix modal title on edit token

* 🐛 Fix font size on numeric input

* ♻️ Update color token border on hover

* ♻️ Use swatch component on token pill

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(

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*

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;
   }
 }

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)}

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*

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"