🐛 Update switch checked state on change prop (#8235)

frontend/src/app/main/data/workspace/tokens/library_edit.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.data.workspace.tokens.library-edit
   (:require
-   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.changes-builder :as pcb]
    [app.common.files.helpers :as cfh]
@@ -28,7 +27,6 @@
    [potok.v2.core :as ptk]))
 
 (declare set-selected-token-set-id)
-(declare toggle-token-path)
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; TOKENS Getters
@@ -64,41 +62,6 @@
       (watch [_ _ _]
         (rx/of (dwsh/update-shapes [id] #(merge % attrs)))))))
 
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Toggle tree nodes
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn clean-tokens-paths
-  []
-
-  (ptk/reify ::clean-tokens-paths
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-tokens :unfolded-token-paths] []))))
-
-(defn toggle-token-path
-  [path]
-  (ptk/reify ::toggle-token-path
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:workspace-tokens :unfolded-token-paths]
-                 (fn [paths]
-                   (let [paths (or paths [])]
-                     (if (some #(= % path) paths)
-                       (vec (remove #(str/starts-with? % (str path))
-                                    paths))
-                       (let [split-path (cpn/split-path path :separator ".")
-                             partial-paths (reduce
-                                            (fn [acc segment]
-                                              (let [new-acc (if (empty? acc)
-                                                              segment
-                                                              (str (last acc) "." segment))]
-                                                (conj acc new-acc)))
-                                            []
-                                            split-path)]
-                         (vec (distinct (into paths partial-paths)))))))))))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; TOKENS Actions
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -476,14 +439,11 @@
             token     (-> (get-tokens-lib state)
                           (ctob/get-token (ctob/get-id token-set) token-id))
             token-type (:type token)
-            token-name (:name token)
-            token-path (str (d/name token-type) "." token-name)
 
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/set-token set-id token-id nil))]
         (rx/of (dch/commit-changes changes)
-               (toggle-token-path token-path)
                (ptk/data-event ::ev/event {::ev/name "delete-token" :type token-type}))))))
 
 (defn bulk-delete-tokens
@@ -526,7 +486,35 @@
 ;; TOKEN UI OPS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(defn clean-tokens-paths
+  []
+  (ptk/reify ::clean-tokens-paths
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-tokens :unfolded-token-paths] []))))
 
+(defn toggle-token-path
+  [path]
+  (ptk/reify ::toggle-token-path
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:workspace-tokens :unfolded-token-paths]
+                 (fn [paths]
+                   (let [paths (or paths [])]
+                     (if (some #(= % path) paths)
+                       (vec (remove #(or (= % path)
+                                         (str/starts-with? % (str path ".")))
+                                    paths))
+                       (let [split-path (cpn/split-path path :separator ".")
+                             partial-paths (reduce
+                                            (fn [acc segment]
+                                              (let [new-acc (if (empty? acc)
+                                                              segment
+                                                              (str (last acc) "." segment))]
+                                                (conj acc new-acc)))
+                                            []
+                                            split-path)]
+                         (into paths partial-paths)))))))))
 
 (defn assign-token-context-menu
   [{:keys [position] :as params}]

frontend/src/app/main/ui/ds/controls/switch.cljs

@@ -67,6 +67,11 @@
                                 :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)}

frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs

@@ -3,17 +3,15 @@
   (: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]
@@ -46,63 +44,6 @@
          (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]}]
@@ -110,6 +51,7 @@
         (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*)
@@ -235,18 +177,30 @@
            :on-detach on-detach-all
            :icon i/corner-radius
            :min 0
-           :name :border-radius
+           :attr :border-radius
            :nillable true
            :property (tr "workspace.options.radius")
-           :class (stl/css :radius-wrapper)
-           :applied-tokens applied-tokens
-           :radius :all
+           :applied-token (cond
+                            (not (seq applied-tokens))
+                            nil
+
+                            (or (not all-values-equal?) (not all-token-equal?))
+                            :multiple
+
+                            :else
+                            (get applied-tokens :r1))
            :align :right
-           :values (if all-values-equal?
-                     (if (nil? (:r1 values))
-                       0
-                       (:r1 values))
-                     nil)}]
+           :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)}]
 
          [:div {:class (stl/css :radius-1)
                 :title (tr "workspace.options.radius")}
@@ -276,56 +230,75 @@
            {:on-change on-radius-r1-change
             :on-detach on-detach-r1
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :property (tr "workspace.options.radius-top-left")
-            :applied-tokens applied-tokens
-            :radius :r1
+            :applied-token (get applied-tokens :r1)
             :align :right
-            :class (stl/css :radius-wrapper :dropdown-offset)
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r1))
+                               (= :multiple (get values :r1)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
+            :class (stl/css :dropdown-offset)
             :inner-class (stl/css :no-icon-input)
-            :values  (:r1 values)}]
+            :value  (:r1 values)}]
 
           [:> numeric-input-wrapper*
            {:on-change on-radius-r2-change
             :on-detach on-detach-r2
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :nillable true
             :property (tr "workspace.options.radius-top-right")
-            :applied-tokens applied-tokens
+            :applied-token (get applied-tokens :r2)
             :align :right
-            :class (stl/css :radius-wrapper)
             :inner-class (stl/css :no-icon-input)
-            :radius :r2
-            :values (:r2 values)}]
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r2))
+                               (= :multiple (get values :r2)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
+            :value (:r2 values)}]
 
           [:> numeric-input-wrapper*
            {:on-change on-radius-r4-change
             :on-detach on-detach-r4
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :nillable true
             :property (tr "workspace.options.radius-bottom-left")
-            :applied-tokens applied-tokens
-            :class (stl/css :radius-wrapper :dropdown-offset)
+            :applied-token (get applied-tokens :r4)
+            :class (stl/css :dropdown-offset)
             :inner-class (stl/css :no-icon-input)
-            :radius :r4
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r4))
+                               (= :multiple (get values :r4)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
             :align :right
-            :values (:r4 values)}]
+            :value (:r4 values)}]
 
           [:> numeric-input-wrapper*
            {:on-change on-radius-r3-change
             :on-detach on-detach-r3
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :nillable true
             :property (tr "workspace.options.radius-bottom-right")
-            :applied-tokens applied-tokens
-            :radius :r3
+            :applied-token (get applied-tokens :r3)
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r3))
+                               (= :multiple (get values :r3)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
             :align :right
             :class (stl/css :radius-wrapper)
             :inner-class (stl/css :no-icon-input)
-            :values (:r3 values)}]]
+            :value (:r3 values)}]]
 
          [:div {:class (stl/css :radius-4)}
           [:div {:class (stl/css :small-input)}

frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss

@@ -40,10 +40,6 @@
   margin-inline: var(--sp-xs);
 }
 
-.radius-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
 .no-icon-input {
   padding-inline-start: px2rem(6);
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.cljs

@@ -0,0 +1,37 @@
+(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]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss

@@ -0,0 +1,9 @@
+// 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);
+}

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs

@@ -9,7 +9,6 @@
   (: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]
@@ -17,10 +16,9 @@
    [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]))
@@ -62,36 +60,6 @@
          (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]}]
@@ -257,12 +225,17 @@
          :icon i/percentage
          :min 0
          :max 100
-         :name :opacity
+         :attr :opacity
          :property (tr "workspace.options.opacity")
-         :applied-tokens applied-tokens
+         :applied-token (get applied-tokens :opacity)
+         :placeholder (if (or (= :multiple (get applied-tokens :opacity))
+                              (= :multiple (or (get values name) 1)))
+                        (tr "settings.multiple")
+                        "--")
          :align :right
          :class (stl/css :numeric-input-wrapper)
-         :values values}]
+         :value (* 100
+                   (or (get values name) 1))}]
 
        [:div {:class (stl/css :input)
               :title (tr "workspace.options.opacity")}

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss

@@ -47,6 +47,5 @@
 
 .numeric-input-wrapper {
   grid-column: span 2;
-  --dropdown-width: var(--7-columns-dropdown-width);
   --dropdown-offset: #{px2rem(-35)};
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -11,7 +11,6 @@
    [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]
@@ -25,15 +24,14 @@
    [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]
@@ -48,44 +46,6 @@
     :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
@@ -415,11 +375,17 @@
          :on-focus on-focus-p1
          :icon i/padding-top-bottom
          :min 0
-         :name :p1
+         :attr :p1
+         :input-type :vertical-padding
          :property (tr "workspace.layout-grid.editor.padding.vertical")
          :nillable true
-         :applied-tokens {:p1 applied-to-p1}
-         :values {:p1 p1}}]
+         :placeholder (if (or (= :multiple applied-to-p1)
+                              (= :multiple p1)
+                              (nil? p1))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p1
+         :value p1}]
 
        [:div {:class (stl/css :padding-simple)
               :title (tr "workspace.layout-grid.editor.padding.vertical")}
@@ -444,12 +410,18 @@
          :on-focus on-focus-p2
          :icon i/padding-left-right
          :min 0
-         :name :p2
+         :attr :p2
+         :input-type :horizontal-padding
          :align :right
          :property (tr "workspace.layout-grid.editor.padding.horizontal")
          :nillable true
-         :applied-tokens {:p2 applied-to-p2}
-         :values {:p2 p2}}]
+         :applied-token applied-to-p2
+         :placeholder (if (or (= :multiple applied-to-p2)
+                              (= :multiple p2)
+                              (nil? p2))
+                        (tr "settings.multiple")
+                        "--")
+         :value p2}]
 
        [:div {:class (stl/css :padding-simple)
               :title (tr "workspace.layout-grid.editor.padding.horizontal")}
@@ -476,6 +448,11 @@
         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)
@@ -535,10 +512,15 @@
          :on-focus on-focus-p1
          :icon i/padding-top
          :min 0
-         :name :p1
+         :attr :p1
+         :input-type :vertical-padding
          :property (tr "workspace.layout-grid.editor.padding.top")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p1)
+                              (= :multiple p1))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p1
+         :value p1}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.top")}
@@ -563,11 +545,16 @@
          :on-focus on-focus-p2
          :icon i/padding-right
          :min 0
-         :name :p2
+         :attr :p2
+         :input-type :horizontal-padding
          :align :right
          :property (tr "workspace.layout-grid.editor.padding.right")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p2)
+                              (= :multiple p2))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p2
+         :value p2}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.right")}
@@ -592,10 +579,15 @@
          :on-focus on-focus-p3
          :icon i/padding-bottom
          :min 0
-         :name :p3
+         :attr :p3
+         :input-type :vertical-padding
          :property (tr "workspace.layout-grid.editor.padding.bottom")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p3)
+                              (= :multiple p3))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p3
+         :value p3}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.bottom")}
@@ -621,10 +613,15 @@
          :icon i/padding-left
          :min 0
          :align :right
-         :name :p4
+         :attr :p4
+         :input-type :horizontal-padding
          :property (tr "workspace.layout-grid.editor.padding.left")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p4)
+                              (= :multiple p4))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p4
+         :value p4}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.left")}
@@ -757,11 +754,16 @@
          :icon i/gap-vertical
          :nillable true
          :min 0
-         :name :row-gap
-         :applied-tokens applied-tokens
+         :attr :row-gap
          :property "Row gap"
          :values {:row-gap (:row-gap value)}
-         :disabled row-gap-disabled?}]
+         :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)}]
 
        [:div {:class (stl/css-case
                       :row-gap true
@@ -791,11 +793,15 @@
          :icon i/gap-horizontal
          :nillable true
          :min 0
-         :name :column-gap
+         :attr :column-gap
          :align :right
-         :applied-tokens applied-tokens
          :property "Column gap"
-         :values {:column-gap (:column-gap value)}
+         :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)
          :disabled col-gap-disabled?}]
 
        [:div {:class (stl/css-case

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss

@@ -357,7 +357,3 @@
   grid-column: 1 / -1;
   align-items: center;
 }
-
-.numeric-input-layout {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs

@@ -10,7 +10,6 @@
    [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]
@@ -19,62 +18,16 @@
    [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
@@ -198,11 +151,12 @@
          :placeholder m1-placeholder
          :icon i/margin-top-bottom
          :min 0
-         :name :m1
+         :attr :m1
+         :input-type :vertical-margin
          :property "Vertical margin "
          :nillable true
-         :applied-tokens {:m1 token-applied-m1}
-         :values {:m1 m1}}]
+         :applied-token token-applied-m1
+         :value m1}]
 
        [:div {:class (stl/css :vertical-margin)
               :title "Vertical margin"}
@@ -227,12 +181,13 @@
          :icon i/margin-left-right
          :class (stl/css :horizontal-margin-wrapper)
          :min 0
-         :name :m2
+         :attr :m2
          :align :right
+         :input-type :horizontal-margin
          :property "Horizontal margin"
          :nillable true
-         :applied-tokens {:m2 token-applied-m2}
-         :values {:m2 m2}}]
+         :applied-token token-applied-m2
+         :value m2}]
 
        [:div {:class (stl/css :horizontal-margin)
               :title "Horizontal margin"}
@@ -324,11 +279,12 @@
          :icon i/margin-top
          :class (stl/css :top-margin-wrapper)
          :min 0
-         :name :m1
+         :attr :m1
+         :input-type :vertical-margin
          :property "Top margin"
          :nillable true
-         :applied-tokens {:m1 applied-token-to-m1}
-         :values {:m1 m1}}]
+         :applied-token applied-token-to-m1
+         :value m1}]
 
        [:div {:class (stl/css :top-margin)
               :title "Top margin"}
@@ -351,12 +307,13 @@
          :icon i/margin-right
          :class (stl/css :right-margin-wrapper)
          :min 0
-         :name :m2
+         :attr :m2
          :align :right
+         :input-type :horizontal-margin
          :property "Right margin"
          :nillable true
-         :applied-tokens {:m2 applied-token-to-m2}
-         :values {:m2 m2}}]
+         :applied-token applied-token-to-m2
+         :value m2}]
 
        [:div {:class (stl/css :right-margin)
               :title "Right margin"}
@@ -380,12 +337,13 @@
          :icon i/margin-bottom
          :class (stl/css :bottom-margin-wrapper)
          :min 0
-         :name :m3
+         :attr :m3
          :align :right
+         :input-type :vertical-margin
          :property "Bottom margin"
          :nillable true
-         :applied-tokens {:m3 applied-token-to-m3}
-         :values {:m3 m3}}]
+         :applied-token applied-token-to-m3
+         :value m3}]
 
        [:div {:class (stl/css :bottom-margin)
               :title "Bottom margin"}
@@ -409,11 +367,12 @@
          :icon i/margin-left
          :class (stl/css :left-margin-wrapper)
          :min 0
-         :name :m4
+         :attr :m4
          :property "Left margin"
+         :input-type :horizontal-margin
          :nillable true
-         :applied-tokens {:m4 applied-token-to-m4}
-         :values {:m4 m4}}]
+         :applied-token applied-token-to-m4
+         :value m4}]
 
        [:div {:class (stl/css :left-margin)
               :title "Left margin"}
@@ -561,7 +520,7 @@
 (def ^:private schema:layout-size-constraints
   [:map
    [:values schema:layout-item-props-schema]
-   [:applied-tokens [:map-of :keyword :string]]
+   [:applied-tokens [:maybe [:map-of :keyword :string]]]
    [:ids [::sm/vec ::sm/uuid]]
    [:v-sizing {:optional true} [:maybe [:= :fill]]]])
 
@@ -627,15 +586,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
-            :name :layout-item-min-w
+            :attr :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-tokens {:layout-item-min-w applied-token-to-min-w}
+            :applied-token applied-token-to-min-w
             :tooltip-class (stl/css :tooltip-wrapper)
-            :values {:layout-item-min-w min-w}}]
+            :value min-w}]
 
           [:div {:class (stl/css :layout-item-min-w)
                  :title (tr "workspace.options.layout-item.layout-item-min-w")}
@@ -658,15 +617,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-tokens {:layout-item-max-w applied-token-to-max-w}
-            :values {:layout-item-max-w max-w}}]
+            :applied-token applied-token-to-max-w
+            :value max-w}]
 
           [:div {:class (stl/css :layout-item-max-w)
                  :title (tr "workspace.options.layout-item.layout-item-max-w")}
@@ -690,14 +649,15 @@
            {:on-change on-layout-item-min-h-change
             :on-detach on-detach-token
             :text-icon "MIN H"
-            :class (stl/css :min-h-wrapper)
+            :input-type :max-height
             :min 0
-            :name :layout-item-min-h
+            :attr :layout-item-min-h
             :property (tr "workspace.options.layout-item.layout-item-min-h")
             :nillable true
             :tooltip-class (stl/css :tooltip-wrapper)
-            :applied-tokens {:layout-item-min-h applied-token-to-min-h}
-            :values {:layout-item-min-h min-h}}]
+
+            :applied-token applied-token-to-min-h
+            :value min-h}]
 
           [:div {:class (stl/css :layout-item-min-h)
                  :title (tr "workspace.options.layout-item.layout-item-min-h")}
@@ -718,16 +678,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-tokens {:layout-item-max-h applied-token-to-max-h}
-            :values {:layout-item-max-h max-h}}]
+            :applied-token applied-token-to-max-h
+            :value max-h}]
 
           [:div {:class (stl/css :layout-item-max-h)
                  :title (tr "workspace.options.layout-item.layout-item-max-h")}

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss

@@ -91,12 +91,10 @@
 
 .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 {
@@ -115,39 +113,28 @@
 
 .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:

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -13,7 +13,6 @@
    [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]
@@ -26,13 +25,12 @@
    [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]
@@ -91,32 +89,6 @@
                  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))
 
@@ -444,10 +416,13 @@
              :on-detach on-detach-token
              :icon i/character-w
              :min 0.01
-             :name :width
+             :attr :width
              :property (tr "workspace.options.width")
-             :applied-tokens applied-tokens
-             :values values}]
+             :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)}]
 
            [:> numeric-input-wrapper*
             {:disabled disabled-height-sizing?
@@ -455,11 +430,11 @@
              :on-detach on-detach-token
              :min 0.01
              :icon i/character-h
-             :name :height
+             :attr :height
              :align :right
              :property (tr "workspace.options.height")
-             :applied-tokens applied-tokens
-             :values values}]]
+             :applied-token (get applied-tokens :height)
+             :value (get values :height)}]]
 
           [:*
            [:div {:class (stl/css-case :width true
@@ -503,20 +478,26 @@
              :on-change on-pos-x-change
              :on-detach on-detach-token
              :icon i/character-x
-             :name :x
+             :attr :x
              :property (tr "workspace.options.x")
-             :applied-tokens applied-tokens
-             :values values}]
+             :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)}]
            [:> numeric-input-wrapper*
             {:disabled disabled-position?
              :on-change on-pos-y-change
              :on-detach on-detach-token
              :icon i/character-y
-             :name :y
+             :attr :y
              :align :right
              :property (tr "workspace.options.y")
-             :applied-tokens applied-tokens
-             :values values}]]
+             :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)}]]
 
           [:*
            [:div {:class (stl/css-case :x-position true
@@ -551,10 +532,13 @@
               :icon i/rotation
               :min -359
               :max 359
-              :name :rotation
+              :attr :rotation
               :property (tr "workspace.options.rotation")
-              :applied-tokens applied-tokens
-              :values values}]
+              :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)}]
 
             [:div {:class (stl/css :rotation)
                    :title (tr "workspace.options.rotation")}

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss

@@ -156,7 +156,3 @@
   justify-content: flex-start;
   gap: deprecated.$s-4;
 }
-
-.numeric-input-measures {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -9,50 +9,20 @@
   (: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
@@ -250,11 +220,11 @@
                                     :min 0
                                     :on-focus on-focus
                                     :on-blur on-blur
-                                    :name :stroke-width
+                                    :attr :stroke-width
                                     :class (stl/css :numeric-input-wrapper)
                                     :property (tr "workspace.options.stroke-width")
-                                    :applied-tokens applied-tokens
-                                    :values stroke-width}]
+                                    :applied-token (get applied-tokens :stroke-width)
+                                    :value stroke-width}]
 
         [:div {:class (stl/css :stroke-width-input)
                :title (tr "workspace.options.stroke-width")}

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss

@@ -47,7 +47,6 @@
 
 .numeric-input-wrapper {
   grid-column: span 2;
-  --dropdown-width: var(--7-columns-dropdown-width);
 }
 
 .stroke-alignment-select {

frontend/src/app/main/ui/workspace/tokens/management.cljs

@@ -112,7 +112,6 @@
         tokens
         (sd/use-resolved-tokens* tokens)
 
-        ;; Group tokens by their type
         tokens-by-type
         (mf/with-memo [tokens selected-token-set-tokens]
           (let [tokens (reduce-kv (fn [tokens k _]
@@ -140,46 +139,12 @@
                         (let [[_ token-value] token]
                           (:id token-value)))))))
 
-        remaining-tokens-of-type?
-        (mf/use-fn
-         (fn [tokens-by-type tokens-in-path-ids]
-           (let [token-ids (set tokens-in-path-ids)
-                 remaining-tokens (filter (fn [token]
-                                            (not (contains? token-ids (:id token))))
-                                          tokens-by-type)]
-             (seq remaining-tokens))))
-
-        delete-token
-        (mf/with-memo [tokens selected-token-set-id]
-          (fn [token]
-            (let [id (:id token)
-                  type (:type token)
-                  path (:name token)
-                  tokens-by-type (ctob/group-by-type tokens)
-                  tokens-filtered-by-type (get tokens-by-type type)
-                  tokens-in-path-ids (filter-tokens-by-path-ids type path)
-                  remaining-tokens? (remaining-tokens-of-type? tokens-filtered-by-type tokens-in-path-ids)]
-              ;; Delete the token
-              (st/emit! (dwtl/delete-token selected-token-set-id id))
-              ;; Remove from unfolded tree path
-              (if remaining-tokens?
-                (st/emit! (dwtl/toggle-token-path (str (name type) "." path)))
-                (st/emit! (dwtl/toggle-token-path (name type)))))))
-
         delete-node
         (mf/with-memo [tokens selected-token-set-id]
           (fn [node type]
             (let [path (:path node)
-                  tokens-by-type (ctob/group-by-type tokens)
-                  tokens-filtered-by-type (get tokens-by-type type)
-                  tokens-in-path-ids (filter-tokens-by-path-ids type path)
-                  remaining-tokens? (remaining-tokens-of-type? tokens-filtered-by-type tokens-in-path-ids)]
-              ;; Delete tokens in path
-              (st/emit! (dwtl/bulk-delete-tokens selected-token-set-id tokens-in-path-ids))
-              ;; Remove from unfolded tree path
-              (if remaining-tokens?
-                (st/emit! (dwtl/toggle-token-path (str (name type) "." path)))
-                (st/emit! (dwtl/toggle-token-path (name type)))))))]
+                  tokens-in-path-ids (filter-tokens-by-path-ids type path)]
+              (st/emit! (dwtl/bulk-delete-tokens selected-token-set-id tokens-in-path-ids)))))]
 
     (mf/with-effect [tokens-lib selected-token-set-id]
       (when (and tokens-lib
@@ -192,7 +157,7 @@
             (st/emit! (dwtl/set-selected-token-set-id (ctob/get-id match)))))))
 
     [:*
-     [:& token-context-menu {:on-delete-token delete-token}]
+     [:& token-context-menu]
      [:> token-node-context-menu* {:on-delete-node delete-node}]
 
      [:> selected-set-info* {:tokens-lib tokens-lib

frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs

@@ -316,9 +316,8 @@
                         (generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape dwta/update-shape-position)))
                        (clean-separators)))}))
 
-(defn default-actions [{:keys [token selected-token-set-id on-delete-token]}]
-  (let [{:keys [modal]} (dwta/get-token-properties token)
-        on-duplicate-token #(st/emit! (dwtl/duplicate-token (:id token)))]
+(defn default-actions [{:keys [token selected-token-set-id]}]
+  (let [{:keys [modal]} (dwta/get-token-properties token)]
     [{:title (tr "workspace.tokens.edit")
       :no-selectable true
       :action (fn [event]
@@ -334,10 +333,12 @@
                                              :token token}))))}
      {:title (tr "workspace.tokens.duplicate")
       :no-selectable true
-      :action on-duplicate-token}
+      :action #(st/emit! (dwtl/duplicate-token (:id token)))}
      {:title (tr "workspace.tokens.delete")
       :no-selectable true
-      :action #(on-delete-token token)}]))
+      :action #(st/emit! (dwtl/delete-token
+                          selected-token-set-id
+                          (:id token)))}]))
 
 (defn- allowed-shape-attributes [shapes]
   (reduce into #{} (map #(ctt/shape-type->attributes (:type %) (:layout %)) shapes)))
@@ -463,7 +464,7 @@
                  :selected? selected?}])])))
 
 (mf/defc token-context-menu-tree
-  [{:keys [width errors on-delete-token] :as mdata}]
+  [{:keys [width errors] :as mdata}]
   (let [objects  (mf/deref refs/workspace-page-objects)
         selected (mf/deref refs/selected-shapes)
 
@@ -487,11 +488,10 @@
                     :errors errors
                     :selected-token-set-id selected-token-set-id
                     :selected-shapes selected-shapes
-                    :is-selected-inside-layout is-selected-inside-layout
-                    :on-delete-token on-delete-token}]]))
+                    :is-selected-inside-layout is-selected-inside-layout}]]))
 
 (mf/defc token-context-menu
-  [{:keys [on-delete-token]}]
+  []
   (let [mdata               (mf/deref tokens-menu-ref)
         is-open?            (boolean mdata)
         width               (mf/use-state 0)
@@ -538,5 +538,5 @@
                         :left (dm/str left "px")}
                 :on-context-menu prevent-default}
           (when mdata
-            [:& token-context-menu-tree (assoc mdata :width @width :on-delete-token on-delete-token)])]])
+            [:& token-context-menu-tree (assoc mdata :width @width)])]])
        (dom/get-body)))))

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-wrap: break-word;
+  word-break: break-word;
 }
 
 .modal-content {