🐛 Allow detach broken token from input

2026-01-29 08:41:55 -05:00 · 2026-01-29 11:41:35 +01:00
23 changed files with 572 additions and 325 deletions
--- a/common/src/app/common/files/tokens.cljc
+++ b/common/src/app/common/files/tokens.cljc
@@ -48,6 +48,12 @@
                 applied-tokens)
         (into {}))))

+(defn remove-attribute-for-detached-token
+  "Removes applied tokens when token-id is nil for the given `attributes` set from `applied-tokens`."
+  [attributes applied-tokens]
+  (prn applied-tokens)
+  (apply dissoc applied-tokens attributes))
+
 (defn token-attribute-applied?
  "Test if `token` is applied to a `shape` on single `token-attribute`."
  [token shape token-attribute]
--- a/frontend/playwright/ui/specs/tokens/apply.spec.js
+++ b/frontend/playwright/ui/specs/tokens/apply.spec.js
@@ -831,15 +831,102 @@ test.describe("Tokens: Apply token", () => {
    });
    await detachButton.click();
    await expect(marginPillXL).not.toBeVisible();
-    const horizontalMarginInput = layoutItemSectionSidebar.getByText('Horizontal marginOpen token');
+    const horizontalMarginInput = layoutItemSectionSidebar.getByText(
+      "Horizontal marginOpen token",
+    );
    await expect(horizontalMarginInput).toBeVisible();

-    const tokenDropdown = horizontalMarginInput.getByRole('button', { name: 'Open token list' });
+    const tokenDropdown = horizontalMarginInput.getByRole("button", {
+      name: "Open token list",
+    });
    await tokenDropdown.click();

    await expect(dimensionTokenOptionXl).toBeVisible();
    await dimensionTokenOptionXl.click();
-    
+
    await expect(marginPillXL).toBeVisible();
  });
 });
+
+test.describe("Tokens: Detach token", () => {
+  test("User applies border-radius token to a shape from sidebar", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    // Open tokens sections on left sidebar
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    // Unfold border radius tokens
+    await page.getByRole("button", { name: "Border Radius 3" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "borderRadius" }),
+    ).toBeVisible();
+    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
+    ).toBeVisible();
+
+    // Apply border radius token from token panels
+    await tokensSidebar
+      .getByRole("button", { name: "borderRadius.sm" })
+      .click();
+
+    // Check if border radius sections is visible on right sidebar
+    const borderRadiusSection = page.getByRole("region", {
+      name: "border-radius-section",
+    });
+    await expect(borderRadiusSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const brTokenPillSM = borderRadiusSection.getByRole("button", {
+      name: "borderRadius.sm",
+    });
+    await expect(brTokenPillSM).toBeVisible();
+    await brTokenPillSM.click();
+
+    // Rename token
+    await tokensSidebar
+      .getByRole("button", { name: "borderRadius.sm" })
+      .click({ button: "right" });
+    await expect(page.getByText("Edit token")).toBeVisible();
+    await page.getByText("Edit token").click();
+    const editModal = page.getByTestId("token-update-create-modal");
+    await expect(editModal).toBeVisible();
+    await expect(
+      editModal.getByRole("textbox", { name: "Name" }),
+    ).toBeVisible();
+    await editModal
+      .getByRole("textbox", { name: "Name" })
+      .fill("BorderRadius.smBis");
+    const submitButton = editModal.getByRole("button", { name: "Save" });
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+    await expect(page.getByText("Don't remap")).toBeVisible();
+    await page.getByText("Don't remap").click();
+    const brokenPill = borderRadiusSection.getByRole("button", {
+      name: "This token is not in any",
+    });
+    await expect(brokenPill).toBeVisible();
+
+    // Detach broken token
+    const detachButton = borderRadiusSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.click();
+    await expect(brokenPill).not.toBeVisible();
+
+    //De-select and select shape again to double check token is detached
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(0).click();
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+    await expect(brokenPill).not.toBeVisible();
+  });
+});
--- a/frontend/src/app/main/data/workspace/tokens/application.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/application.cljs
@@ -710,6 +710,23 @@
          (fn [shape]
            (update shape :applied-tokens remove-token))))))))

+(defn detach-token
+  "Removes `attributes` when token-id is nil.
+
+  Doesn't update shape attributes."
+  [{:keys [attributes shape-ids] :as _props}]
+  (ptk/reify ::unapply-token
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (prn "entro en el detach")
+      (prn attributes)
+      (rx/of
+       (let [remove-token #(when % (cft/remove-attribute-for-detached-token attributes %))]
+         (dwsh/update-shapes
+          shape-ids
+          (fn [shape]
+            (update shape :applied-tokens remove-token))))))))
+
 (defn toggle-token
  [{:keys [token attrs shape-ids expand-with-children]}]
  (ptk/reify ::on-toggle-token
--- a/frontend/src/app/main/data/workspace/tokens/library_edit.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/library_edit.cljs
@@ -433,18 +433,11 @@
    ptk/WatchEvent
    (watch [it state _]
      (let [data    (dsh/lookup-file-data state)
-            token-set (if set-id
-                        (lookup-token-set state set-id)
-                        (lookup-token-set state))
-            token     (-> (get-tokens-lib state)
-                          (ctob/get-token (ctob/get-id token-set) token-id))
-            token-type (:type token)

            changes (-> (pcb/empty-changes it)
                        (pcb/with-library-data data)
                        (pcb/set-token set-id token-id nil))]
-        (rx/of (dch/commit-changes changes)
-               (ptk/data-event ::ev/event {::ev/name "delete-token" :type token-type}))))))
+        (rx/of (dch/commit-changes changes))))))

 (defn bulk-delete-tokens
  [set-id token-ids]
@@ -452,15 +445,9 @@
  (dm/assert! (every? uuid? token-ids))
  (ptk/reify ::bulk-delete-tokens
    ptk/WatchEvent
-    (watch [it state _]
-      (let [data    (dsh/lookup-file-data state)
-            changes (reduce (fn [changes token-id]
-                              (pcb/set-token changes set-id token-id nil))
-                            (-> (pcb/empty-changes it)
-                                (pcb/with-library-data data))
-                            token-ids)]
-        (rx/of (dch/commit-changes changes)
-               (ptk/data-event ::ev/event {::ev/name "delete-token-node"}))))))
+    (watch [_ _ _]
+      (apply rx/of
+             (map #(delete-token set-id %) token-ids)))))

 (defn duplicate-token
  [token-id]
--- a/frontend/src/app/main/ui/ds/controls/switch.cljs
+++ b/frontend/src/app/main/ui/ds/controls/switch.cljs
@@ -67,11 +67,6 @@
                                :on-key-down handle-keydown
                                :disabled disabled?})]

-    (mf/use-effect
-     (mf/deps default-checked)
-     (fn []
-       (reset! checked* default-checked)))
-
    [:> :div props
     [:div {:id id
            :class (stl/css :switch-track)}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
@@ -3,15 +3,17 @@
  (:require
   [app.common.data.macros :as dm]
   [app.common.types.shape.radius :as ctsr]
+   [app.common.types.token :as tk]
   [app.main.data.workspace.shapes :as dwsh]
   [app.main.data.workspace.tokens.application :as dwta]
   [app.main.features :as features]
   [app.main.store :as st]
   [app.main.ui.components.numeric-input :as deprecated-input]
+   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
   [app.main.ui.hooks :as hooks]
-   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
   [app.util.i18n :as i18n :refer [tr]]
   [beicon.v2.core :as rx]
   [potok.v2.core :as ptk]
@@ -44,6 +46,63 @@
         (identical? (get old-values :r4)
                     (get new-values :r4)))))

+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach radius] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach name)
+         #(on-detach % name))
+
+        r1-value   (get applied-tokens :r1)
+        all-token-equal? (and (seq applied-tokens) (all-equal? applied-tokens))
+        all-values-equal? (all-equal? values)
+
+        applied-token (cond
+                        (not (seq applied-tokens))
+                        nil
+
+                        (and (= radius :all) (or (not all-values-equal?) (not all-token-equal?)))
+                        :multiple
+
+                        (and all-token-equal? all-values-equal? (= radius :all))
+                        r1-value
+
+                        :else
+                        (get applied-tokens radius))
+
+
+        placeholder (if (= radius :all)
+                      (cond
+                        (or (not all-values-equal?)
+                            (not all-token-equal?))
+                        (tr "settings.multiple")
+                        :else
+                        "--")
+
+                      (cond
+                        (or (= :multiple (:applied-tokens values))
+                            (= :multiple (get values name)))
+                        (tr "settings.multiple")
+                        :else
+                        "--"))
+
+
+        props  (mf/spread-props props
+                                {:placeholder placeholder
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :value values})]
+    [:> numeric-input* props]))
+
 (mf/defc border-radius-menu*
  {::mf/wrap [#(mf/memo' % check-border-radius-menu-props)]}
  [{:keys [class ids values applied-tokens]}]
@@ -51,7 +110,6 @@
        (features/use-feature "tokens/numeric-input")

        all-values-equal? (all-equal? values)
-        all-token-equal? (and (seq applied-tokens) (all-equal? applied-tokens))

        radius-expanded* (mf/use-state false)
        radius-expanded  (deref radius-expanded*)
@@ -61,9 +119,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-detach-all
        (mf/use-fn
@@ -177,30 +238,18 @@
           :on-detach on-detach-all
           :icon i/corner-radius
           :min 0
-           :attr :border-radius
+           :name :border-radius
           :nillable true
           :property (tr "workspace.options.radius")
-           :applied-token (cond
-                            (not (seq applied-tokens))
-                            nil
-
-                            (or (not all-values-equal?) (not all-token-equal?))
-                            :multiple
-
-                            :else
-                            (get applied-tokens :r1))
+           :class (stl/css :radius-wrapper)
+           :applied-tokens applied-tokens
+           :radius :all
           :align :right
-           :placeholder (cond
-                          (or (not all-values-equal?)
-                              (not all-token-equal?))
-                          (tr "settings.multiple")
-                          :else
-                          "--")
-           :value (if all-values-equal?
-                    (if (nil? (:r1 values))
-                      0
-                      (:r1 values))
-                    nil)}]
+           :values (if all-values-equal?
+                     (if (nil? (:r1 values))
+                       0
+                       (:r1 values))
+                     nil)}]

         [:div {:class (stl/css :radius-1)
                :title (tr "workspace.options.radius")}
@@ -230,75 +279,56 @@
           {:on-change on-radius-r1-change
            :on-detach on-detach-r1
            :min 0
-            :attr :border-radius
+            :name :border-radius
            :property (tr "workspace.options.radius-top-left")
-            :applied-token (get applied-tokens :r1)
+            :applied-tokens applied-tokens
+            :radius :r1
            :align :right
-            :placeholder (cond
-                           (or (= :multiple (get applied-tokens :r1))
-                               (= :multiple (get values :r1)))
-                           (tr "settings.multiple")
-                           :else
-                           "--")
-            :class (stl/css :dropdown-offset)
+            :class (stl/css :radius-wrapper :dropdown-offset)
            :inner-class (stl/css :no-icon-input)
-            :value  (:r1 values)}]
+            :values  (:r1 values)}]

          [:> numeric-input-wrapper*
           {:on-change on-radius-r2-change
            :on-detach on-detach-r2
            :min 0
-            :attr :border-radius
+            :name :border-radius
            :nillable true
            :property (tr "workspace.options.radius-top-right")
-            :applied-token (get applied-tokens :r2)
+            :applied-tokens applied-tokens
            :align :right
+            :class (stl/css :radius-wrapper)
            :inner-class (stl/css :no-icon-input)
-            :placeholder (cond
-                           (or (= :multiple (get applied-tokens :r2))
-                               (= :multiple (get values :r2)))
-                           (tr "settings.multiple")
-                           :else
-                           "--")
-            :value (:r2 values)}]
+            :radius :r2
+            :values (:r2 values)}]

          [:> numeric-input-wrapper*
           {:on-change on-radius-r4-change
            :on-detach on-detach-r4
            :min 0
-            :attr :border-radius
+            :name :border-radius
            :nillable true
            :property (tr "workspace.options.radius-bottom-left")
-            :applied-token (get applied-tokens :r4)
-            :class (stl/css :dropdown-offset)
+            :applied-tokens applied-tokens
+            :class (stl/css :radius-wrapper :dropdown-offset)
            :inner-class (stl/css :no-icon-input)
-            :placeholder (cond
-                           (or (= :multiple (get applied-tokens :r4))
-                               (= :multiple (get values :r4)))
-                           (tr "settings.multiple")
-                           :else
-                           "--")
+            :radius :r4
            :align :right
-            :value (:r4 values)}]
+            :values (:r4 values)}]

          [:> numeric-input-wrapper*
           {:on-change on-radius-r3-change
            :on-detach on-detach-r3
            :min 0
-            :attr :border-radius
+            :name :border-radius
            :nillable true
            :property (tr "workspace.options.radius-bottom-right")
-            :applied-token (get applied-tokens :r3)
-            :placeholder (cond
-                           (or (= :multiple (get applied-tokens :r3))
-                               (= :multiple (get values :r3)))
-                           (tr "settings.multiple")
-                           :else
-                           "--")
+            :applied-tokens applied-tokens
+            :radius :r3
            :align :right
            :class (stl/css :radius-wrapper)
            :inner-class (stl/css :no-icon-input)
-            :value (:r3 values)}]]
+            :values (:r3 values)}]]

         [:div {:class (stl/css :radius-4)}
          [:div {:class (stl/css :small-input)}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss
@@ -40,6 +40,10 @@
  margin-inline: var(--sp-xs);
 }

+.radius-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
+}
+
 .no-icon-input {
  padding-inline-start: px2rem(6);
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
@@ -166,9 +166,16 @@
                               (d/without-nils))]
                 (mf/set-ref-val! prev-colors-ref
                                  (conj prev-colors color))
-                 (st/emit! (dwta/unapply-token {:attributes attr
-                                                :token token
-                                                :shape-ids [(:shape-id op)]})))))))
+                 (prn token)
+                 (if (seq token)
+                   (st/emit! (dwta/unapply-token {:token (first token)
+                                                  :attributes attr
+                                                  :shape-ids [(:shape-id op)]}))
+                   (st/emit! (dwta/detach-token {:attributes attr
+                                                 :shape-ids [(:shape-id op)]})))
+                 #_(st/emit! (dwta/unapply-token {:attributes attr
+                                                  :token token
+                                                  :shape-ids [(:shape-id op)]})))))))

        select-only
        (mf/use-fn
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@@ -74,7 +74,6 @@

        render-wasm?   (feat/use-feature "render-wasm/v1")

-
        ^boolean
        multiple?      (= :multiple fills)

@@ -184,9 +183,13 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token]
-           (st/emit! (dwta/unapply-token {:attributes #{:fill}
-                                          :token token
-                                          :shape-ids ids}))))]
+           (prn "on-detach-token" token)
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{:fill}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{:fill}
+                                           :shape-ids ids})))))]

    (mf/with-layout-effect [hide-on-export]
      (when-let [checkbox (mf/ref-val checkbox-ref)]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.cljs
@@ -1,37 +0,0 @@
-(ns app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.types.token :as tk]
-   [app.main.ui.context :as muc]
-   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
-   [app.util.i18n :as i18n :refer [tr]]
-   [rumext.v2 :as mf]))
-
-(mf/defc numeric-input-wrapper*
-  [{:keys [value attr applied-token align on-detach placeholder input-type class] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-
-        tokens (mf/with-memo [tokens input-type]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input (or input-type attr)))
-                       (not-empty))))
-
-        on-detach-attr
-        (mf/use-fn
-         (mf/deps on-detach attr)
-         #(on-detach % attr))
-
-        props  (mf/spread-props props
-                                {:placeholder (or placeholder
-                                                  (if (= :multiple value)
-                                                    (tr "settings.multiple")
-                                                    "--"))
-                                 :class [class (stl/css :numeric-input-wrapper)]
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :name attr
-                                 :value value})]
-    [:> numeric-input* props]))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss
@@ -1,9 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.numeric-input-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
@@ -9,6 +9,7 @@
  (:require
   [app.common.data :as d]
   [app.common.data.macros :as dm]
+   [app.common.types.token :as tk]
   [app.main.data.workspace :as dw]
   [app.main.data.workspace.shapes :as dwsh]
   [app.main.data.workspace.tokens.application :as dwta]
@@ -16,9 +17,10 @@
   [app.main.store :as st]
   [app.main.ui.components.numeric-input :as deprecated-input]
   [app.main.ui.components.select :refer [select]]
+   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
   [app.render-wasm.api :as wasm.api]
   [app.util.i18n :as i18n :refer [tr]]
   [rumext.v2 :as mf]))
@@ -60,6 +62,36 @@
         (identical? (get old-values :hidden)
                     (get new-values :hidden)))))

+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+
+        on-detach-attr (mf/use-fn
+                        (mf/deps on-detach name)
+                        #(on-detach % name))
+
+        applied-token (get applied-tokens name)
+        opacity-value (or (get values name) 1)
+
+        props  (mf/spread-props props
+                                {:placeholder (if (or (= :multiple (:applied-tokens values))
+                                                      (= :multiple opacity-value))
+                                                (tr "settings.multiple")
+                                                "--")
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :name name
+                                 :value (* 100 opacity-value)})]
+    [:> numeric-input* props]))
+
 (mf/defc layer-menu*
  {::mf/wrap [#(mf/memo' % check-layer-menu-props)]}
  [{:keys [ids values applied-tokens]}]
@@ -73,9 +105,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        current-blend-mode  (or (get values :blend-mode) :normal)
        current-opacity     (opacity->string (:opacity values))
@@ -225,17 +260,12 @@
         :icon i/percentage
         :min 0
         :max 100
-         :attr :opacity
+         :name :opacity
         :property (tr "workspace.options.opacity")
-         :applied-token (get applied-tokens :opacity)
-         :placeholder (if (or (= :multiple (get applied-tokens :opacity))
-                              (= :multiple (or (get values name) 1)))
-                        (tr "settings.multiple")
-                        "--")
+         :applied-tokens applied-tokens
         :align :right
         :class (stl/css :numeric-input-wrapper)
-         :value (* 100
-                   (or (get values name) 1))}]
+         :values values}]

       [:div {:class (stl/css :input)
              :title (tr "workspace.options.opacity")}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
@@ -47,5 +47,6 @@

 .numeric-input-wrapper {
  grid-column: span 2;
+  --dropdown-width: var(--7-columns-dropdown-width);
  --dropdown-offset: #{px2rem(-35)};
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -11,6 +11,7 @@
   [app.common.data.macros :as dm]
   [app.common.math :as mth]
   [app.common.types.shape.layout :as ctl]
+   [app.common.types.token :as tk]
   [app.config :as cf]
   [app.main.data.event :as-alias ev]
   [app.main.data.workspace :as udw]
@@ -24,14 +25,15 @@
   [app.main.ui.components.numeric-input :as deprecated-input]
   [app.main.ui.components.select :refer [select]]
   [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.button :refer [button*]]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
   [app.main.ui.ds.foundations.assets.icon :as i]
   [app.main.ui.formats :as fmt]
   [app.main.ui.hooks :as h]
   [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.keyboard :as kbd]
@@ -46,6 +48,44 @@
    :column         i/column
    :column-reverse i/column-reverse))

+
+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        input-type (cond
+                     (some #{:p2 :p4} [name])
+                     :horizontal-padding
+
+                     (some #{:p1 :p3} [name])
+                     :vertical-padding
+                     :else
+                     name)
+
+        tokens (mf/with-memo [tokens input-type]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input input-type))
+                       (not-empty))))
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach name)
+         #(on-detach % name))
+
+        props  (mf/spread-props props
+                                {:placeholder (if (or (= :multiple (:applied-tokens values))
+                                                      (= :multiple (get values name))
+                                                      (nil? (get values name)))
+                                                (tr "settings.multiple")
+                                                "--")
+                                 :class (stl/css :numeric-input-layout)
+                                 :applied-token (get applied-tokens name)
+                                 :tokens tokens
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :value (get values name)})]
+    [:> numeric-input* props]))
+
 ;; FLEX COMPONENTS

 (def layout-container-flex-attrs
@@ -340,9 +380,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-focus
        (mf/use-fn
@@ -375,17 +418,11 @@
         :on-focus on-focus-p1
         :icon i/padding-top-bottom
         :min 0
-         :attr :p1
-         :input-type :vertical-padding
+         :name :p1
         :property (tr "workspace.layout-grid.editor.padding.vertical")
         :nillable true
-         :placeholder (if (or (= :multiple applied-to-p1)
-                              (= :multiple p1)
-                              (nil? p1))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token applied-to-p1
-         :value p1}]
+         :applied-tokens {:p1 applied-to-p1}
+         :values {:p1 p1}}]

       [:div {:class (stl/css :padding-simple)
              :title (tr "workspace.layout-grid.editor.padding.vertical")}
@@ -410,18 +447,12 @@
         :on-focus on-focus-p2
         :icon i/padding-left-right
         :min 0
-         :attr :p2
-         :input-type :horizontal-padding
+         :name :p2
         :align :right
         :property (tr "workspace.layout-grid.editor.padding.horizontal")
         :nillable true
-         :applied-token applied-to-p2
-         :placeholder (if (or (= :multiple applied-to-p2)
-                              (= :multiple p2)
-                              (nil? p2))
-                        (tr "settings.multiple")
-                        "--")
-         :value p2}]
+         :applied-tokens {:p2 applied-to-p2}
+         :values {:p2 p2}}]

       [:div {:class (stl/css :padding-simple)
              :title (tr "workspace.layout-grid.editor.padding.horizontal")}
@@ -448,11 +479,6 @@
        p3 (:p3 value)
        p4 (:p4 value)

-        applied-to-p1 (:p1 applied-tokens)
-        applied-to-p2 (:p2 applied-tokens)
-        applied-to-p3 (:p3 applied-tokens)
-        applied-to-p4 (:p4 applied-tokens)
-
        on-change'
        (mf/use-fn
         (mf/deps on-change ids)
@@ -475,9 +501,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-p1-change
        (mf/use-fn (mf/deps on-change') #(on-change' % :p1))
@@ -512,15 +541,10 @@
         :on-focus on-focus-p1
         :icon i/padding-top
         :min 0
-         :attr :p1
-         :input-type :vertical-padding
+         :name :p1
         :property (tr "workspace.layout-grid.editor.padding.top")
-         :placeholder (if (or (= :multiple applied-to-p1)
-                              (= :multiple p1))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token applied-to-p1
-         :value p1}]
+         :applied-tokens applied-tokens
+         :values value}]

       [:div {:class (stl/css :padding-multiple)
              :title (tr "workspace.layout-grid.editor.padding.top")}
@@ -545,16 +569,11 @@
         :on-focus on-focus-p2
         :icon i/padding-right
         :min 0
-         :attr :p2
-         :input-type :horizontal-padding
+         :name :p2
         :align :right
         :property (tr "workspace.layout-grid.editor.padding.right")
-         :placeholder (if (or (= :multiple applied-to-p2)
-                              (= :multiple p2))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token applied-to-p2
-         :value p2}]
+         :applied-tokens applied-tokens
+         :values value}]

       [:div {:class (stl/css :padding-multiple)
              :title (tr "workspace.layout-grid.editor.padding.right")}
@@ -579,15 +598,10 @@
         :on-focus on-focus-p3
         :icon i/padding-bottom
         :min 0
-         :attr :p3
-         :input-type :vertical-padding
+         :name :p3
         :property (tr "workspace.layout-grid.editor.padding.bottom")
-         :placeholder (if (or (= :multiple applied-to-p3)
-                              (= :multiple p3))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token applied-to-p3
-         :value p3}]
+         :applied-tokens applied-tokens
+         :values value}]

       [:div {:class (stl/css :padding-multiple)
              :title (tr "workspace.layout-grid.editor.padding.bottom")}
@@ -613,15 +627,10 @@
         :icon i/padding-left
         :min 0
         :align :right
-         :attr :p4
-         :input-type :horizontal-padding
+         :name :p4
         :property (tr "workspace.layout-grid.editor.padding.left")
-         :placeholder (if (or (= :multiple applied-to-p4)
-                              (= :multiple p4))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token applied-to-p4
-         :value p4}]
+         :applied-tokens applied-tokens
+         :values value}]

       [:div {:class (stl/css :padding-multiple)
              :title (tr "workspace.layout-grid.editor.padding.left")}
@@ -722,9 +731,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-row-gap-change
        (mf/use-fn (mf/deps on-change') #(on-change' %1 %2 :row-gap))
@@ -754,16 +766,11 @@
         :icon i/gap-vertical
         :nillable true
         :min 0
-         :attr :row-gap
+         :name :row-gap
+         :applied-tokens applied-tokens
         :property "Row gap"
         :values {:row-gap (:row-gap value)}
-         :disabled row-gap-disabled?
-         :placeholder (if (or (= :multiple (:row-gap applied-tokens))
-                              (= :multiple (:row-gap value)))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token (:row-gap applied-tokens)
-         :value (:row-gap value)}]
+         :disabled row-gap-disabled?}]

       [:div {:class (stl/css-case
                      :row-gap true
@@ -793,15 +800,11 @@
         :icon i/gap-horizontal
         :nillable true
         :min 0
-         :attr :column-gap
+         :name :column-gap
         :align :right
+         :applied-tokens applied-tokens
         :property "Column gap"
-         :placeholder (if (or (= :multiple (:column-gap applied-tokens))
-                              (= :multiple (:column-gap value)))
-                        (tr "settings.multiple")
-                        "--")
-         :applied-token (:column-gap applied-tokens)
-         :value (:column-gap value)
+         :values {:column-gap (:column-gap value)}
         :disabled col-gap-disabled?}]

       [:div {:class (stl/css-case
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
@@ -357,3 +357,7 @@
  grid-column: 1 / -1;
  align-items: center;
 }
+
+.numeric-input-layout {
+  --dropdown-width: var(--7-columns-dropdown-width);
+}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -10,6 +10,7 @@
   [app.common.data :as d]
   [app.common.schema :as sm]
   [app.common.types.shape.layout :as ctl]
+   [app.common.types.token :as tk]
   [app.main.data.workspace :as udw]
   [app.main.data.workspace.shape-layout :as dwsl]
   [app.main.data.workspace.tokens.application :as dwta]
@@ -18,16 +19,62 @@
   [app.main.store :as st]
   [app.main.ui.components.numeric-input :as deprecated-input]
   [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
   [app.main.ui.ds.foundations.assets.icon :as i]
   [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [rumext.v2 :as mf]))

+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach placeholder] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        input-type (cond
+                     (some #{:m2 :m4} [name])
+                     :horizontal-margin
+
+                     (some #{:m1 :m3} [name])
+                     :vertical-margin
+
+                     (= name :layout-item-max-w)
+                     :max-width
+
+                     (= name :layout-item-max-h)
+                     :max-height
+
+                     (= name :layout-item-min-w)
+                     :min-width
+
+                     (= name :layout-item-min-h)
+                     :min-height
+
+                     :else
+                     name)
+
+        tokens (mf/with-memo [tokens input-type]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input input-type))
+                       (not-empty))))
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach name)
+         #(on-detach % name))
+
+        props  (mf/spread-props props
+                                {:placeholder (or placeholder "--")
+                                 :applied-token (get applied-tokens name)
+                                 :tokens tokens
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :value (get values name)})]
+    [:> numeric-input* props]))
+
 (def layout-item-attrs
  [:layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
   :layout-item-margin-type ;; :simple :multiple
@@ -98,9 +145,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-detach-horizontal
        (mf/use-fn
@@ -151,12 +201,11 @@
         :placeholder m1-placeholder
         :icon i/margin-top-bottom
         :min 0
-         :attr :m1
-         :input-type :vertical-margin
+         :name :m1
         :property "Vertical margin "
         :nillable true
-         :applied-token token-applied-m1
-         :value m1}]
+         :applied-tokens {:m1 token-applied-m1}
+         :values {:m1 m1}}]

       [:div {:class (stl/css :vertical-margin)
              :title "Vertical margin"}
@@ -181,13 +230,12 @@
         :icon i/margin-left-right
         :class (stl/css :horizontal-margin-wrapper)
         :min 0
-         :attr :m2
+         :name :m2
         :align :right
-         :input-type :horizontal-margin
         :property "Horizontal margin"
         :nillable true
-         :applied-token token-applied-m2
-         :value m2}]
+         :applied-tokens {:m2 token-applied-m2}
+         :values {:m2 m2}}]

       [:div {:class (stl/css :horizontal-margin)
              :title "Horizontal margin"}
@@ -221,9 +269,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-focus
        (mf/use-fn
@@ -279,12 +330,11 @@
         :icon i/margin-top
         :class (stl/css :top-margin-wrapper)
         :min 0
-         :attr :m1
-         :input-type :vertical-margin
+         :name :m1
         :property "Top margin"
         :nillable true
-         :applied-token applied-token-to-m1
-         :value m1}]
+         :applied-tokens {:m1 applied-token-to-m1}
+         :values {:m1 m1}}]

       [:div {:class (stl/css :top-margin)
              :title "Top margin"}
@@ -307,13 +357,12 @@
         :icon i/margin-right
         :class (stl/css :right-margin-wrapper)
         :min 0
-         :attr :m2
+         :name :m2
         :align :right
-         :input-type :horizontal-margin
         :property "Right margin"
         :nillable true
-         :applied-token applied-token-to-m2
-         :value m2}]
+         :applied-tokens {:m2 applied-token-to-m2}
+         :values {:m2 m2}}]

       [:div {:class (stl/css :right-margin)
              :title "Right margin"}
@@ -337,13 +386,12 @@
         :icon i/margin-bottom
         :class (stl/css :bottom-margin-wrapper)
         :min 0
-         :attr :m3
+         :name :m3
         :align :right
-         :input-type :vertical-margin
         :property "Bottom margin"
         :nillable true
-         :applied-token applied-token-to-m3
-         :value m3}]
+         :applied-tokens {:m3 applied-token-to-m3}
+         :values {:m3 m3}}]

       [:div {:class (stl/css :bottom-margin)
              :title "Bottom margin"}
@@ -367,12 +415,11 @@
         :icon i/margin-left
         :class (stl/css :left-margin-wrapper)
         :min 0
-         :attr :m4
+         :name :m4
         :property "Left margin"
-         :input-type :horizontal-margin
         :nillable true
-         :applied-token applied-token-to-m4
-         :value m4}]
+         :applied-tokens {:m4 applied-token-to-m4}
+         :values {:m4 m4}}]

       [:div {:class (stl/css :left-margin)
              :title "Left margin"}
@@ -520,7 +567,7 @@
 (def ^:private schema:layout-size-constraints
  [:map
   [:values schema:layout-item-props-schema]
-   [:applied-tokens [:maybe [:map-of :keyword :string]]]
+   [:applied-tokens [:map-of :keyword :string]]
   [:ids [::sm/vec ::sm/uuid]]
   [:v-sizing {:optional true} [:maybe [:= :fill]]]])

@@ -551,9 +598,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        on-size-change
        (mf/use-fn
@@ -586,15 +636,15 @@
          [:> numeric-input-wrapper*
           {:on-change on-layout-item-min-w-change
            :on-detach on-detach-token
+            :class (stl/css :min-w-wrapper)
            :min 0
-            :attr :layout-item-min-w
+            :name :layout-item-min-w
            :property (tr "workspace.options.layout-item.layout-item-min-w")
            :text-icon "MIN W"
-            :input-type :min-width
            :nillable true
-            :applied-token applied-token-to-min-w
+            :applied-tokens {:layout-item-min-w applied-token-to-min-w}
            :tooltip-class (stl/css :tooltip-wrapper)
-            :value min-w}]
+            :values {:layout-item-min-w min-w}}]

          [:div {:class (stl/css :layout-item-min-w)
                 :title (tr "workspace.options.layout-item.layout-item-min-w")}
@@ -617,15 +667,15 @@
           {:on-change on-layout-item-max-w-change
            :on-detach on-detach-token
            :text-icon "MAX W"
+            :class (stl/css :max-w-wrapper)
            :min 0
+            :name :layout-item-max-w
            :align :right
-            :input-type :max-width
-            :attr :layout-item-max-w
            :property (tr "workspace.options.layout-item.layout-item-max-w")
            :nillable true
            :tooltip-class (stl/css :tooltip-wrapper)
-            :applied-token applied-token-to-max-w
-            :value max-w}]
+            :applied-tokens {:layout-item-max-w applied-token-to-max-w}
+            :values {:layout-item-max-w max-w}}]

          [:div {:class (stl/css :layout-item-max-w)
                 :title (tr "workspace.options.layout-item.layout-item-max-w")}
@@ -649,15 +699,14 @@
           {:on-change on-layout-item-min-h-change
            :on-detach on-detach-token
            :text-icon "MIN H"
-            :input-type :max-height
+            :class (stl/css :min-h-wrapper)
            :min 0
-            :attr :layout-item-min-h
+            :name :layout-item-min-h
            :property (tr "workspace.options.layout-item.layout-item-min-h")
            :nillable true
            :tooltip-class (stl/css :tooltip-wrapper)
-
-            :applied-token applied-token-to-min-h
-            :value min-h}]
+            :applied-tokens {:layout-item-min-h applied-token-to-min-h}
+            :values {:layout-item-min-h min-h}}]

          [:div {:class (stl/css :layout-item-min-h)
                 :title (tr "workspace.options.layout-item.layout-item-min-h")}
@@ -678,16 +727,16 @@
          [:> numeric-input-wrapper*
           {:on-change on-layout-item-max-h-change
            :on-detach on-detach-token
+            :class (stl/css :max-h-wrapper)
            :min 0
            :text-icon "MAX H"
+            :name :layout-item-max-h
            :align :right
-            :input-type :max-height
-            :attr :layout-item-max-h
            :property (tr "workspace.options.layout-item.layout-item-max-h")
            :nillable true
            :tooltip-class (stl/css :tooltip-wrapper)
-            :applied-token applied-token-to-max-h
-            :value max-h}]
+            :applied-tokens {:layout-item-max-h applied-token-to-max-h}
+            :values {:layout-item-max-h max-h}}]

          [:div {:class (stl/css :layout-item-max-h)
                 :title (tr "workspace.options.layout-item.layout-item-max-h")}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
@@ -91,10 +91,12 @@

 .vertical-margin-wrapper {
  grid-column: 1;
+  --dropdown-width: var(--7-columns-dropdown-width);
 }

 .horizontal-margin-wrapper {
  grid-column: 2;
+  --dropdown-width: var(--7-columns-dropdown-width);
 }

 .margin-multiple {
@@ -113,28 +115,39 @@

 .top-margin,
 .top-margin-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
  grid-column: 1;
  grid-row: 1;
 }

 .bottom-margin,
 .bottom-margin-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
  grid-column: 2;
  grid-row: 1;
 }

 .left-margin,
 .left-margin-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
  grid-column: 1;
  grid-row: 2;
 }

 .right-margin,
 .right-margin-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
  grid-column: 2;
  grid-row: 2;
 }

+.min-w-wrapper,
+.max-w-wrapper,
+.min-h-wrapper,
+.max-h-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
+}
+
 .advanced-options {
  display: grid;
  grid-template-columns:
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -13,6 +13,7 @@
   [app.common.geom.shapes :as gsh]
   [app.common.logic.shapes :as cls]
   [app.common.types.shape.layout :as ctl]
+   [app.common.types.token :as tk]
   [app.main.constants :refer [size-presets]]
   [app.main.data.workspace :as udw]
   [app.main.data.workspace.interactions :as dwi]
@@ -25,12 +26,13 @@
   [app.main.store :as st]
   [app.main.ui.components.dropdown :refer [dropdown]]
   [app.main.ui.components.numeric-input :as deprecated-input]
+   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
   [app.main.ui.ds.foundations.assets.icon :as i]
   [app.main.ui.icons :as deprecated-icon]
   [app.main.ui.workspace.sidebar.options.menus.border-radius :refer  [border-radius-menu*]]
-   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [clojure.set :as set]
@@ -89,6 +91,32 @@
                 shape)]
    (select-keys shape measure-attrs)))

+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach name)
+         #(on-detach % name))
+
+        props  (mf/spread-props props
+                                {:placeholder (if (or (= :multiple (:applied-tokens values))
+                                                      (= :multiple (get values name)))
+                                                (tr "settings.multiple") "--")
+                                 :class (stl/css :numeric-input-measures)
+                                 :applied-token (get applied-tokens name)
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :value (get values name)})]
+    [:> numeric-input* props]))
+
 (def ^:private xf:map-type (map :type))
 (def ^:private xf:mapcat-type-to-options (mapcat type->options))

@@ -320,9 +348,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes #{attr}
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes #{attr}
+                                           :shape-ids ids})))))

        ;; CLIP CONTENT AND SHOW IN VIEWER
        on-change-clip-content
@@ -416,13 +447,10 @@
             :on-detach on-detach-token
             :icon i/character-w
             :min 0.01
-             :attr :width
+             :name :width
             :property (tr "workspace.options.width")
-             :applied-token (get applied-tokens :width)
-             :placeholder (if (or (= :multiple (get applied-tokens :width))
-                                  (= :multiple (get values :width)))
-                            (tr "settings.multiple") "--")
-             :value (get values :width)}]
+             :applied-tokens applied-tokens
+             :values values}]

           [:> numeric-input-wrapper*
            {:disabled disabled-height-sizing?
@@ -430,11 +458,11 @@
             :on-detach on-detach-token
             :min 0.01
             :icon i/character-h
-             :attr :height
+             :name :height
             :align :right
             :property (tr "workspace.options.height")
-             :applied-token (get applied-tokens :height)
-             :value (get values :height)}]]
+             :applied-tokens applied-tokens
+             :values values}]]

          [:*
           [:div {:class (stl/css-case :width true
@@ -478,26 +506,20 @@
             :on-change on-pos-x-change
             :on-detach on-detach-token
             :icon i/character-x
-             :attr :x
+             :name :x
             :property (tr "workspace.options.x")
-             :applied-token (get applied-tokens :x)
-             :placeholder (if (or (= :multiple (get applied-tokens :x))
-                                  (= :multiple (get values :x)))
-                            (tr "settings.multiple") "--")
-             :value (get values :x)}]
+             :applied-tokens applied-tokens
+             :values values}]
           [:> numeric-input-wrapper*
            {:disabled disabled-position?
             :on-change on-pos-y-change
             :on-detach on-detach-token
             :icon i/character-y
-             :attr :y
+             :name :y
             :align :right
             :property (tr "workspace.options.y")
-             :applied-token (get applied-tokens :y)
-             :placeholder (if (or (= :multiple (get applied-tokens :y))
-                                  (= :multiple (get values :y)))
-                            (tr "settings.multiple") "--")
-             :value (get values :y)}]]
+             :applied-tokens applied-tokens
+             :values values}]]

          [:*
           [:div {:class (stl/css-case :x-position true
@@ -532,13 +554,10 @@
              :icon i/rotation
              :min -359
              :max 359
-              :attr :rotation
+              :name :rotation
              :property (tr "workspace.options.rotation")
-              :applied-token (get applied-tokens :rotation)
-              :placeholder (if (or (= :multiple (get applied-tokens :rotation))
-                                   (= :multiple (get values :rotation)))
-                             (tr "settings.multiple") "--")
-              :value (get values :rotation)}]
+              :applied-tokens applied-tokens
+              :values values}]

            [:div {:class (stl/css :rotation)
                   :title (tr "workspace.options.rotation")}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -156,3 +156,7 @@
  justify-content: flex-start;
  gap: deprecated.$s-4;
 }
+
+.numeric-input-measures {
+  --dropdown-width: var(--7-columns-dropdown-width);
+}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -172,9 +172,12 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attrs]
-           (st/emit! (dwta/unapply-token {:attributes attrs
-                                          :token token
-                                          :shape-ids ids}))))]
+           (if (seq token)
+             (st/emit! (dwta/unapply-token {:token (first token)
+                                            :attributes attrs
+                                            :shape-ids ids}))
+             (st/emit! (dwta/detach-token {:attributes attrs
+                                           :shape-ids ids})))))]

    [:section {:class (stl/css :stroke-section)
               :aria-label "stroke-section"}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -9,20 +9,50 @@
  (:require
   [app.common.data :as d]
   [app.common.types.color :as ctc]
+   [app.common.types.token :as tk]
   [app.main.data.workspace.tokens.application :as dwta]
   [app.main.features :as features]
   [app.main.store :as st]
   [app.main.ui.components.numeric-input :as deprecated-input]
   [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
   [app.main.ui.components.select :refer [select]]
+   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
   [app.main.ui.hooks :as h]
-   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
   [app.util.i18n :as i18n :refer [tr]]
   [rumext.v2 :as mf]))

+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+
+        on-detach-attr (mf/use-fn
+                        (mf/deps on-detach name)
+                        #(on-detach % name))
+
+        applied-token (get applied-tokens name)
+
+        props  (mf/spread-props props
+                                {:placeholder (if (= :multiple values)
+                                                (tr "settings.multiple")
+                                                "--")
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :name name
+                                 :value values})]
+    [:> numeric-input* props]))
+
 (mf/defc stroke-row*
  [{:keys [index
           stroke
@@ -220,11 +250,11 @@
                                    :min 0
                                    :on-focus on-focus
                                    :on-blur on-blur
-                                    :attr :stroke-width
+                                    :name :stroke-width
                                    :class (stl/css :numeric-input-wrapper)
                                    :property (tr "workspace.options.stroke-width")
-                                    :applied-token (get applied-tokens :stroke-width)
-                                    :value stroke-width}]
+                                    :applied-tokens applied-tokens
+                                    :values stroke-width}]

        [:div {:class (stl/css :stroke-width-input)
               :title (tr "workspace.options.stroke-width")}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
@@ -47,6 +47,7 @@

 .numeric-input-wrapper {
  grid-column: span 2;
+  --dropdown-width: var(--7-columns-dropdown-width);
 }

 .stroke-alignment-select {
--- a/frontend/src/app/main/ui/workspace/tokens/remapping_modal.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/remapping_modal.scss
@@ -50,7 +50,7 @@
 .modal-title {
  @include t.use-typography("headline-medium");
  color: var(--modal-title-foreground-color);
-  word-break: break-word;
+  word-wrap: break-word;
 }

 .modal-content {