Refactor - Separate core into namespaces: changes, token_types

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

@@ -14,10 +14,8 @@
    [app.config :as cf]
    [app.main.data.events :as-alias ev]
    [app.main.data.workspace :as udw]
-   [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.grid-layout.editor :as dwge]
    [app.main.data.workspace.shape-layout :as dwsl]
-   [app.main.data.workspace.undo :as dwu]
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -31,6 +29,7 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
+   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -864,7 +863,7 @@
                                    (wtc/tokens-name-map->select-options
                                     {:shape shape
                                      :tokens spacing-tokens
-                                     :attributes (wtc/token-attributes :spacing)
+                                     :attributes (wtty/token-attributes :spacing)
                                      :selected-attributes #{:spacing-column}})))
 
         spacing-row-options (mf/use-memo
@@ -873,7 +872,7 @@
                                 (wtc/tokens-name-map->select-options
                                  {:shape shape
                                   :tokens spacing-tokens
-                                  :attributes (wtc/token-attributes :spacing)
+                                  :attributes (wtty/token-attributes :spacing)
                                   :selected-attributes #{:spacing-row}})))
 
         padding-x-options (mf/use-memo
@@ -882,7 +881,7 @@
                               (wtc/tokens-name-map->select-options
                                {:shape shape
                                 :tokens spacing-tokens
-                                :attributes (wtc/token-attributes :spacing)
+                                :attributes (wtty/token-attributes :spacing)
                                 :selected-attributes #{:padding-p1 :padding-p3}})))
 
         padding-y-options (mf/use-memo
@@ -891,7 +890,7 @@
                               (wtc/tokens-name-map->select-options
                                {:shape shape
                                 :tokens spacing-tokens
-                                :attributes (wtc/token-attributes :spacing)
+                                :attributes (wtty/token-attributes :spacing)
                                 :selected-attributes #{:padding-p2 :padding-p4}})))
 
         on-add-layout

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

@@ -27,6 +27,7 @@
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
+   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [clojure.set :refer [rename-keys union]]
@@ -109,21 +110,21 @@
                                #(wtc/tokens-name-map->select-options
                                  {:shape shape
                                   :tokens border-radius-tokens
-                                  :attributes (wtc/token-attributes :border-radius)}))
+                                  :attributes (wtty/token-attributes :border-radius)}))
         sizing-tokens (:sizing tokens-by-type)
         width-options (mf/use-memo
                        (mf/deps shape sizing-tokens)
                        #(wtc/tokens-name-map->select-options
                          {:shape shape
                           :tokens sizing-tokens
-                          :attributes (wtc/token-attributes :sizing)
+                          :attributes (wtty/token-attributes :sizing)
                           :selected-attributes #{:width}}))
         height-options (mf/use-memo
                         (mf/deps shape sizing-tokens)
                         #(wtc/tokens-name-map->select-options
                           {:shape shape
                            :tokens sizing-tokens
-                           :attributes (wtc/token-attributes :sizing)
+                           :attributes (wtty/token-attributes :sizing)
                            :selected-attributes #{:height}}))
 
         flex-child?       (->> selection-parents (some ctl/flex-layout?))
@@ -330,7 +331,7 @@
            (let [token-value (wtc/maybe-resolve-token-value token)]
              (st/emit!
               (change-radius (fn [shape]
-                               (-> (dt/unapply-token-id shape (wtc/token-attributes :border-radius))
+                               (-> (dt/unapply-token-id shape (wtty/token-attributes :border-radius))
                                    (ctsr/set-radius-1 token-value))))))))
 
         on-radius-1-change
@@ -342,7 +343,7 @@
               (change-radius (fn [shape]
                                (-> (dt/maybe-apply-token-to-shape {:token (when token-value value)
                                                                    :shape shape
-                                                                   :attributes (wtc/token-attributes :border-radius)})
+                                                                   :attributes (wtty/token-attributes :border-radius)})
                                    (ctsr/set-radius-1 (or token-value value)))))))))
 
         on-radius-multi-change

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

@@ -0,0 +1,141 @@
+;; 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
+
+(ns app.main.ui.workspace.tokens.changes
+  (:require
+   [app.common.types.token :as ctt]
+   [app.common.types.shape.radius :as ctsr]
+   [app.main.data.tokens :as dt]
+   [app.main.data.workspace.changes :as dch]
+   [app.main.data.workspace :as udw]
+   [app.main.data.workspace.shape-layout :as dwsl]
+   [app.main.data.workspace.transforms :as dwt]
+   [app.main.store :as st]
+   [app.main.ui.workspace.tokens.core :as wtc]
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
+   [app.main.ui.workspace.tokens.token :as wtt]
+   [beicon.v2.core :as rx]
+   [clojure.set :as set]
+   [potok.v2.core :as ptk]
+   [promesa.core :as p]))
+
+;; Token Updates ---------------------------------------------------------------
+
+(defn on-apply-token [{:keys [token token-type-props selected-shapes] :as _props}]
+  (let [{:keys [attributes on-apply on-update-shape]
+         :or {on-apply dt/update-token-from-attributes}} token-type-props
+        shape-ids (->> selected-shapes
+                       (eduction
+                        (remove #(wtt/shapes-token-applied? token % attributes))
+                        (map :id)))]
+
+    (p/let [sd-tokens (sd/resolve-workspace-tokens+ {:debug? true})]
+      (let [resolved-token (get sd-tokens (:id token))
+            resolved-token-value (wtt/resolve-token-value resolved-token)]
+        (doseq [shape selected-shapes]
+          (st/emit! (on-apply {:token-id (:id token)
+                               :shape-id (:id shape)
+                               :attributes attributes}))
+          (on-update-shape resolved-token-value shape-ids attributes))))))
+
+;; Shape Updates ---------------------------------------------------------------
+
+(defn update-shape-radius-all [value shape-ids]
+  (dch/update-shapes shape-ids
+                     (fn [shape]
+                       (when (ctsr/has-radius? shape)
+                         (ctsr/set-radius-1 shape value)))
+                     {:reg-objects? true
+                      :attrs ctt/border-radius-keys}))
+
+(defn update-opacity [value shape-ids]
+  (dch/update-shapes shape-ids #(assoc % :opacity value)))
+
+(defn update-rotation [value shape-ids]
+  (ptk/reify ::update-shape-dimensions
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (rx/of
+       (udw/trigger-bounding-box-cloaking shape-ids)
+       (udw/increase-rotation shape-ids value)))))
+
+(defn update-shape-radius-single-corner [value shape-ids attributes]
+  (dch/update-shapes shape-ids
+                     (fn [shape]
+                       (when (ctsr/has-radius? shape)
+                         (cond-> shape
+                           (:rx shape) (ctsr/switch-to-radius-4)
+                           :always (ctsr/set-radius-4 (first attributes) value))))
+                     {:reg-objects? true
+                      :attrs [:rx :ry :r1 :r2 :r3 :r4]}))
+
+(defn update-stroke-width
+  [value shape-ids]
+  (dch/update-shapes shape-ids (fn [shape]
+                                 (when (seq (:strokes shape))
+                                   (assoc-in shape [:strokes 0 :stroke-width] value)))))
+
+(defn update-layout-spacing [value shape-ids attributes]
+  (if-let [layout-gap (cond
+                          (:row-gap attributes) {:row-gap value}
+                          (:column-gap attributes) {:column-gap value})]
+    (dwsl/update-layout shape-ids {:layout-gap layout-gap})
+    (dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))})))
+
+(defn update-shape-dimensions [value shape-ids attributes]
+  (ptk/reify ::update-shape-dimensions
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (rx/of
+       (when (:width attributes) (dwt/update-dimensions shape-ids :width value))
+       (when (:height attributes) (dwt/update-dimensions shape-ids :height value))))))
+
+(defn update-layout-spacing-column [value shape-ids]
+  (ptk/reify ::update-layout-spacing-column
+    ptk/WatchEvent
+    (watch [_ state _]
+      (rx/concat
+       (for [shape-id shape-ids]
+         (let [shape (dt/get-shape-from-state shape-id state)
+               layout-direction (:layout-flex-dir shape)
+               layout-update (if (or (= layout-direction :row-reverse) (= layout-direction :row))
+                               {:layout-gap {:column-gap value}}
+                               {:layout-gap {:row-gap value}})]
+           (dwsl/update-layout [shape-id] layout-update)))))))
+
+(defn update-shape-position [value shape-ids attributes]
+  (doseq [shape-id shape-ids]
+    (st/emit! (dwt/update-position shape-id {(first attributes) value}))))
+
+(defn apply-dimensions-token [{:keys [token-id token-type-props selected-shapes]} attributes]
+  (let [token (dt/get-token-data-from-token-id token-id)
+        attributes (set attributes)
+        updated-token-type-props (cond
+                                   (set/superset? #{:x :y} attributes)
+                                   (assoc token-type-props
+                                          :on-update-shape update-shape-position
+                                          :attributes attributes)
+
+                                   (set/superset? #{:stroke-width} attributes)
+                                   (assoc token-type-props
+                                          :on-update-shape update-stroke-width
+                                          :attributes attributes)
+
+                                   :else token-type-props)]
+    (wtc/on-apply-token {:token token
+                         :token-type-props updated-token-type-props
+                         :selected-shapes selected-shapes})))
+
+(defn update-layout-sizing-limits [value shape-ids attributes]
+  (ptk/reify ::update-layout-sizing-limits
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [props (-> {:layout-item-min-w value
+                       :layout-item-min-h value
+                       :layout-item-max-w value
+                       :layout-item-max-h value}
+                      (select-keys attributes))]
+        (dwsl/update-layout-child shape-ids props)))))

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

@@ -11,79 +11,19 @@
    [app.main.data.modal :as modal]
    [app.main.data.tokens :as dt]
    [app.main.data.workspace.shape-layout :as dwsl]
-   [app.main.data.workspace.transforms :as dwt]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
+   [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
    [app.util.timers :as timers]
-   [beicon.v2.core :as rx]
-   [clojure.set :as set]
    [okulary.core :as l]
-   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-;; Events ----------------------------------------------------------------------
-
-(defn update-layout-spacing [value shape-ids attributes]
-  (if-let [layout-gap (cond
-                          (:row-gap attributes) {:row-gap value}
-                          (:column-gap attributes) {:column-gap value})]
-    (dwsl/update-layout shape-ids {:layout-gap layout-gap})
-    (dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))})))
-
-(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attributes]
-  (let [token (dt/get-token-data-from-token-id token-id)
-        attributes (set attributes)
-        updated-token-type-props (assoc token-type-props
-                                        :on-update-shape update-layout-spacing
-                                        :attributes attributes)]
-    (wtc/on-apply-token {:token token
-                         :token-type-props updated-token-type-props
-                         :selected-shapes selected-shapes})))
-
-(defn update-shape-position [value shape-ids attributes]
-  (doseq [shape-id shape-ids]
-    (st/emit! (dwt/update-position shape-id {(first attributes) value}))))
-
-(defn apply-dimensions-token [{:keys [token-id token-type-props selected-shapes]} attributes]
-  (let [token (dt/get-token-data-from-token-id token-id)
-        attributes (set attributes)
-        updated-token-type-props (cond
-                                   (set/superset? #{:x :y} attributes)
-                                   (assoc token-type-props
-                                          :on-update-shape update-shape-position
-                                          :attributes attributes)
-
-                                   (set/superset? #{:stroke-width} attributes)
-                                   (assoc token-type-props
-                                          :on-update-shape wtc/update-stroke-width
-                                          :attributes attributes)
-
-                                   :else token-type-props)]
-    (wtc/on-apply-token {:token token
-                         :token-type-props updated-token-type-props
-                         :selected-shapes selected-shapes})))
-
-(defn update-shape-dimensions [value shape-ids attributes]
-  (ptk/reify ::update-shape-dimensions
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (rx/of
-       (when (:width attributes) (dwt/update-dimensions shape-ids :width value))
-       (when (:height attributes) (dwt/update-dimensions shape-ids :height value))))))
-
-(defn update-layout-sizing-limits [value shape-ids attributes]
-  (let [props (-> {:layout-item-min-w value
-                   :layout-item-min-h value
-                   :layout-item-max-w value
-                   :layout-item-max-h value}
-                  (select-keys attributes))]
-    (dwsl/update-layout-child shape-ids props)))
-
 ;; Actions ---------------------------------------------------------------------
 
 (defn attribute-actions [token selected-shapes attributes]
@@ -94,7 +34,7 @@
      :selected-pred #(seq (% ids-by-attributes))}))
 
 (defn generic-attribute-actions [attributes title {:keys [token selected-shapes]}]
-  (let [{:keys [on-update-shape]} (get wtc/token-types (:type token))
+  (let [{:keys [on-update-shape]} (get wtty/token-types (:type token))
         {:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
     (map (fn [attribute]
            (let [selected? (selected-pred attribute)
@@ -212,7 +152,7 @@
                                                        (st/emit! event))}))))
         gap-items (all-or-sepearate-actions {:attribute-labels {:column-gap "Column Gap"
                                                                 :row-gap "Row Gap"}
-                                             :on-update-shape update-layout-spacing}
+                                             :on-update-shape wtch/update-layout-spacing}
                                             context-data)]
     (concat padding-items
             single-padding-items
@@ -223,17 +163,17 @@
   (concat
    (all-or-sepearate-actions {:attribute-labels {:width "Width"
                                                  :height "Height"}
-                              :on-update-shape update-shape-dimensions}
+                              :on-update-shape wtch/update-shape-dimensions}
                              context-data)
    [:separator]
    (all-or-sepearate-actions {:attribute-labels {:layout-item-min-w "Min Width"
                                                  :layout-item-min-h "Min Height"}
-                              :on-update-shape update-layout-sizing-limits}
+                              :on-update-shape wtch/update-layout-sizing-limits}
                              context-data)
    [:separator]
    (all-or-sepearate-actions {:attribute-labels {:layout-item-max-w "Max Width"
                                                  :layout-item-max-h "Max Height"}
-                              :on-update-shape update-layout-sizing-limits}
+                              :on-update-shape wtch/update-layout-sizing-limits}
                              context-data)))
 
 (def shape-attribute-actions-map
@@ -242,8 +182,8 @@
                                                                           :r2 "Top Right"
                                                                           :r4 "Bottom Left"
                                                                           :r3 "Bottom Right"}
-                                                       :on-update-shape-all wtc/update-shape-radius-all
+                                                       :on-update-shape-all wtch/update-shape-radius-all
-                                                       :on-update-shape wtc/update-shape-radius-single-corner})
+                                                       :on-update-shape wtch/update-shape-radius-single-corner})
      :spacing spacing-attribute-actions
      :sizing sizing-attribute-actions
      :rotation (partial generic-attribute-actions #{:rotation} "Rotation")
@@ -261,7 +201,7 @@
                     (generic-attribute-actions #{:y} "Y" context-data)))}))
 
 (defn default-actions [{:keys [token]}]
-  (let [{:keys [modal]} (get wtc/token-types token)]
+  (let [{:keys [modal]} (get wtty/token-types token)]
     [{:title "Delete Token"
       :action #(st/emit! (dt/delete-token (:id token)))}
      {:title "Duplicate Token"

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

@@ -28,7 +28,7 @@
 
 ;; Helpers ---------------------------------------------------------------------
 
-(defn resolve-token-value [{:keys [value resolved-value] :as token}]
+(defn resolve-token-value [{:keys [value resolved-value] :as _token}]
   (or
    resolved-value
    (d/parse-double value)))
@@ -48,64 +48,6 @@
               (cond-> (assoc item :label name)
                 (wtt/token-applied? item shape (or selected-attributes attributes)) (assoc :selected? true))))))
 
-;; Shape Update Functions ------------------------------------------------------
-
-(defn update-shape-radius-single-corner [value shape-ids attributes]
-  (dch/update-shapes shape-ids
-                     (fn [shape]
-                       (when (ctsr/has-radius? shape)
-                         (cond-> shape
-                           (:rx shape) (ctsr/switch-to-radius-4)
-                           :always (ctsr/set-radius-4 (first attributes) value))))
-                     {:reg-objects? true
-                      :attrs [:rx :ry :r1 :r2 :r3 :r4]}))
-
-(defn update-shape-radius-all [value shape-ids]
-  (dch/update-shapes shape-ids
-                     (fn [shape]
-                       (when (ctsr/has-radius? shape)
-                         (ctsr/set-radius-1 shape value)))
-                     {:reg-objects? true
-                      :attrs ctt/border-radius-keys}))
-
-(defn update-shape-dimensions [value shape-ids]
-  (ptk/reify ::update-shape-dimensions
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (rx/of
-       (dwt/update-dimensions shape-ids :width value)
-       (dwt/update-dimensions shape-ids :height value)))))
-
-(defn update-opacity [value shape-ids]
-  (dch/update-shapes shape-ids #(assoc % :opacity value)))
-
-(defn update-stroke-width
-  [value shape-ids]
-  (dch/update-shapes shape-ids (fn [shape]
-                                 (when (seq (:strokes shape))
-                                   (assoc-in shape [:strokes 0 :stroke-width] value)))))
-
-(defn update-rotation [value shape-ids]
-  (ptk/reify ::update-shape-dimensions
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (rx/of
-       (udw/trigger-bounding-box-cloaking shape-ids)
-       (udw/increase-rotation shape-ids value)))))
-
-(defn update-layout-spacing-column [value shape-ids]
-  (ptk/reify ::update-layout-spacing-column
-    ptk/WatchEvent
-    (watch [_ state _]
-      (rx/concat
-       (for [shape-id shape-ids]
-         (let [shape (dt/get-shape-from-state shape-id state)
-               layout-direction (:layout-flex-dir shape)
-               layout-update (if (or (= layout-direction :row-reverse) (= layout-direction :row))
-                               {:layout-gap {:column-gap value}}
-                               {:layout-gap {:row-gap value}})]
-           (dwsl/update-layout [shape-id] layout-update)))))))
-
 ;; Events ----------------------------------------------------------------------
 
 (defn apply-token
@@ -212,104 +154,3 @@
   (let [all-tokens (deref refs/workspace-tokens)
         transformed-tokens-json (transform-tokens-into-json-format all-tokens)]
     (export-tokens-file transformed-tokens-json)))
-
-;; Token types -----------------------------------------------------------------
-
-(def token-types
-  (ordered-map
-   [:border-radius
-    {:title "Border Radius"
-     :attributes ctt/border-radius-keys
-     :on-update-shape update-shape-radius-all
-     :modal {:key :tokens/border-radius
-             :fields [{:label "Border Radius"
-                       :key :border-radius}]}}]
-   [:stroke-width
-    {:title "Stroke Width"
-     :attributes ctt/stroke-width-keys
-     :on-update-shape update-stroke-width
-     :modal {:key :tokens/stroke-width
-             :fields [{:label "Stroke Width"
-                       :key :stroke-width}]}}]
-
-   [:sizing
-    {:title "Sizing"
-     :attributes #{:width :height}
-     :on-update-shape update-shape-dimensions
-     :modal {:key :tokens/sizing
-             :fields [{:label "Sizing"
-                       :key :sizing}]}}]
-   [:dimensions
-    {:title "Dimensions"
-     :attributes #{:width :height}
-     :on-update-shape update-shape-dimensions
-     :modal {:key :tokens/dimensions
-             :fields [{:label "Dimensions"
-                       :key :dimensions}]}}]
-
-   [:opacity
-    {:title "Opacity"
-     :attributes ctt/opacity-keys
-     :on-update-shape update-opacity
-     :modal {:key :tokens/opacity
-             :fields [{:label "Opacity"
-                       :key :opacity}]}}]
-
-   [:rotation
-    {:title "Rotation"
-     :attributes ctt/rotation-keys
-     :on-update-shape update-rotation
-     :modal {:key :tokens/rotation
-             :fields [{:label "Rotation"
-                       :key :rotation}]}}]
-   [:spacing
-    {:title "Spacing"
-     :attributes ctt/spacing-keys
-     :on-update-shape update-layout-spacing-column
-     :modal {:key :tokens/spacing
-             :fields [{:label "Spacing"
-                       :key :spacing}]}}]
-   (comment
-     [:boolean
-      {:title "Boolean"
-       :modal {:key :tokens/boolean
-               :fields [{:label "Boolean"}]}}]
-
-     [:box-shadow
-      {:title "Box Shadow"
-       :modal {:key :tokens/box-shadow
-               :fields [{:label "Box shadows"
-                         :key :box-shadow
-                         :type :box-shadow}]}}]
-
-     [:numeric
-      {:title "Numeric"
-       :modal {:key :tokens/numeric
-               :fields [{:label "Numeric"
-                         :key :numeric}]}}]
-
-     [:other
-      {:title "Other"
-       :modal {:key :tokens/other
-               :fields [{:label "Other"
-                         :key :other}]}}]
-     [:string
-      {:title "String"
-       :modal {:key :tokens/string
-               :fields [{:label "String"
-                         :key :string}]}}]
-     [:typography
-      {:title "Typography"
-       :modal {:key :tokens/typography
-               :fields [{:label "Font" :key :font-family}
-                        {:label "Weight" :key :weight}
-                        {:label "Font Size" :key :font-size}
-                        {:label "Line Height" :key :line-height}
-                        {:label "Letter Spacing" :key :letter-spacing}
-                        {:label "Paragraph Spacing" :key :paragraph-spacing}
-                        {:label "Paragraph Indent" :key :paragraph-indent}
-                        {:label "Text Decoration" :key :text-decoration}
-                        {:label "Text Case" :key :text-case}]}}])))
-
-(defn token-attributes [token-type]
-  (get-in token-types [token-type :attributes]))

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

@@ -17,6 +17,7 @@
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -131,7 +132,7 @@
   Sort each group alphabetically (by their `:token-key`)."
   [tokens]
   (let [tokens-by-type (wtc/group-tokens-by-type tokens)
-        {:keys [empty filled]} (->> wtc/token-types
+        {:keys [empty filled]} (->> wtty/token-types
                                     (map (fn [[token-key token-type-props]]
                                            {:token-key token-key
                                             :token-type-props token-type-props

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

@@ -1,7 +1,13 @@
 (ns app.main.ui.workspace.tokens.token
   (:require
-   [cuerdas.core :as str]
+   [app.common.data :as d]
-   [clojure.set :as set]))
+   [clojure.set :as set]
+   [cuerdas.core :as str]))
+
+(defn resolve-token-value [{:keys [value resolved-value] :as token}]
+  (or
+   resolved-value
+   (d/parse-double value)))
 
 (defn attributes-map
   "Creats an attributes map using collection of `attributes` for `id`."

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

@@ -0,0 +1,104 @@
+(ns app.main.ui.workspace.tokens.token-types
+  (:require
+   [app.common.types.token :as ctt]
+   [app.main.ui.workspace.tokens.changes :as wtch]
+   [app.common.data :as d :refer [ordered-map]]))
+
+(def token-types
+  (ordered-map
+   [:border-radius
+    {:title "Border Radius"
+     :attributes ctt/border-radius-keys
+     :on-update-shape wtch/update-shape-radius-all
+     :modal {:key :tokens/border-radius
+             :fields [{:label "Border Radius"
+                       :key :border-radius}]}}]
+   [:stroke-width
+    {:title "Stroke Width"
+     :attributes ctt/stroke-width-keys
+     :on-update-shape wtch/update-stroke-width
+     :modal {:key :tokens/stroke-width
+             :fields [{:label "Stroke Width"
+                       :key :stroke-width}]}}]
+
+   [:sizing
+    {:title "Sizing"
+     :attributes #{:width :height}
+     :on-update-shape wtch/update-shape-dimensions
+     :modal {:key :tokens/sizing
+             :fields [{:label "Sizing"
+                       :key :sizing}]}}]
+   [:dimensions
+    {:title "Dimensions"
+     :attributes #{:width :height}
+     :on-update-shape wtch/update-shape-dimensions
+     :modal {:key :tokens/dimensions
+             :fields [{:label "Dimensions"
+                       :key :dimensions}]}}]
+
+   [:opacity
+    {:title "Opacity"
+     :attributes ctt/opacity-keys
+     :on-update-shape wtch/update-opacity
+     :modal {:key :tokens/opacity
+             :fields [{:label "Opacity"
+                       :key :opacity}]}}]
+
+   [:rotation
+    {:title "Rotation"
+     :attributes ctt/rotation-keys
+     :on-update-shape wtch/update-rotation
+     :modal {:key :tokens/rotation
+             :fields [{:label "Rotation"
+                       :key :rotation}]}}]
+   [:spacing
+    {:title "Spacing"
+     :attributes ctt/spacing-keys
+     :on-update-shape wtch/update-layout-spacing-column
+     :modal {:key :tokens/spacing
+             :fields [{:label "Spacing"
+                       :key :spacing}]}}]
+   (comment
+     [:boolean
+      {:title "Boolean"
+       :modal {:key :tokens/boolean
+               :fields [{:label "Boolean"}]}}]
+
+     [:box-shadow
+      {:title "Box Shadow"
+       :modal {:key :tokens/box-shadow
+               :fields [{:label "Box shadows"
+                         :key :box-shadow
+                         :type :box-shadow}]}}]
+
+     [:numeric
+      {:title "Numeric"
+       :modal {:key :tokens/numeric
+               :fields [{:label "Numeric"
+                         :key :numeric}]}}]
+
+     [:other
+      {:title "Other"
+       :modal {:key :tokens/other
+               :fields [{:label "Other"
+                         :key :other}]}}]
+     [:string
+      {:title "String"
+       :modal {:key :tokens/string
+               :fields [{:label "String"
+                         :key :string}]}}]
+     [:typography
+      {:title "Typography"
+       :modal {:key :tokens/typography
+               :fields [{:label "Font" :key :font-family}
+                        {:label "Weight" :key :weight}
+                        {:label "Font Size" :key :font-size}
+                        {:label "Line Height" :key :line-height}
+                        {:label "Letter Spacing" :key :letter-spacing}
+                        {:label "Paragraph Spacing" :key :paragraph-spacing}
+                        {:label "Paragraph Indent" :key :paragraph-indent}
+                        {:label "Text Decoration" :key :text-decoration}
+                        {:label "Text Case" :key :text-case}]}}])))
+
+(defn token-attributes [token-type]
+  (get-in token-types [token-type :attributes]))

frontend/test/token_tests/logic/token_actions_test.cljs

@@ -3,6 +3,7 @@
    [app.common.test-helpers.compositions :as ctho]
    [app.common.test-helpers.files :as cthf]
    [app.common.test-helpers.shapes :as cths]
+   [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.core :as wtc]
    [cljs.test :as t :include-macros true]
    [frontend-tests.helpers.pages :as thp]
@@ -36,11 +37,11 @@
             events [(wtc/apply-token {:shape-ids [(:id rect-1)]
                                       :attributes #{:rx :ry}
                                       :token (toht/get-token file :token-1)
-                                      :on-update-shape wtc/update-shape-radius-all})
+                                      :on-update-shape wtch/update-shape-radius-all})
                     (wtc/apply-token {:shape-ids [(:id rect-1)]
                                       :attributes #{:rx :ry}
                                       :token (toht/get-token file :token-2)
-                                      :on-update-shape wtc/update-shape-radius-all})]]
+                                      :on-update-shape wtch/update-shape-radius-all})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]
@@ -64,7 +65,7 @@
                    (wtc/apply-token {:attributes #{:rx :ry :r1 :r2 :r3 :r4}
                                      :token (toht/get-token file :token-1)
                                      :shape-ids [(:id rect-1)]
-                                     :on-update-shape wtc/update-shape-radius-all})
+                                     :on-update-shape wtch/update-shape-radius-all})
                    ;; Apply single `:r1` attribute to same shape
                    ;; while removing other attributes from the border-radius set
                    ;; but keep `:r4` for testing purposes
@@ -72,7 +73,7 @@
                                      :attributes-to-remove #{:rx :ry :r1 :r2 :r3}
                                      :token (toht/get-token file :token-2)
                                      :shape-ids [(:id rect-1)]
-                                     :on-update-shape wtc/update-shape-radius-all})]]
+                                     :on-update-shape wtch/update-shape-radius-all})]]
        (tohs/run-store-async
         store done events
         (fn [new-state]
@@ -97,7 +98,7 @@
             events [(wtc/apply-token {:shape-ids [(:id rect-1)]
                                       :attributes #{:rx :ry}
                                       :token (toht/get-token file :token-2)
-                                      :on-update-shape wtc/update-shape-radius-all})]]
+                                      :on-update-shape wtch/update-shape-radius-all})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]
@@ -123,7 +124,7 @@
             events [(wtc/apply-token {:shape-ids [(:id rect-1)]
                                       :attributes #{:width :height}
                                       :token (toht/get-token file :token-target)
-                                      :on-update-shape wtc/update-shape-dimensions})]]
+                                      :on-update-shape wtch/update-shape-dimensions})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]
@@ -149,7 +150,7 @@
            events [(wtc/apply-token {:shape-ids [(:id rect-1)]
                                      :attributes #{:width :height}
                                      :token (toht/get-token file :token-target)
-                                     :on-update-shape wtc/update-shape-dimensions})]]
+                                     :on-update-shape wtch/update-shape-dimensions})]]
        (tohs/run-store-async
         store done events
         (fn [new-state]
@@ -175,7 +176,7 @@
             events [(wtc/apply-token {:shape-ids [(:id rect-1)]
                                       :attributes #{:opacity}
                                       :token (toht/get-token file :token-target)
-                                      :on-update-shape wtc/update-opacity})]]
+                                      :on-update-shape wtch/update-opacity})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]
@@ -200,7 +201,7 @@
             events [(wtc/apply-token {:shape-ids [(:id rect-1)]
                                       :attributes #{:rotation}
                                       :token (toht/get-token file :token-target)
-                                      :on-update-shape wtc/update-rotation})]]
+                                      :on-update-shape wtch/update-rotation})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]
@@ -221,7 +222,7 @@
             rect-2 (cths/get-shape file :rect-2)
             events [(wtc/toggle-token {:shapes [rect-1 rect-2]
                                        :token-type-props {:attributes #{:rx :ry}
-                                                          :on-update-shape wtc/update-shape-radius-all}
+                                                          :on-update-shape wtch/update-shape-radius-all}
                                        :token (toht/get-token file :token-2)})]]
         (tohs/run-store-async
          store done events