From dbddd7fb68d2acf2d2db8297983bf7370c80c81d Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 6 Aug 2024 14:26:30 +0200
Subject: [PATCH 01/75] Add token themes & sets schema

---
 common/src/app/common/types/file.cljc        | 15 ++++++++--
 common/src/app/common/types/token_theme.cljc | 31 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 common/src/app/common/types/token_theme.cljc

diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index fefef7b75c..ac14d71b6d 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -27,6 +27,7 @@
    [app.common.types.plugins :as ctpg]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.token :as cto]
+   [app.common.types.token-theme :as ctt]
    [app.common.types.typographies-list :as ctyl]
    [app.common.types.typography :as cty]
    [app.common.uuid :as uuid]
@@ -58,12 +59,20 @@
     [:vector {:gen/max 3} ::ctc/recent-color]]
    [:typographies {:optional true}
     [:map-of {:gen/max 2} ::sm/uuid ::cty/typography]]
-   [:tokens {:optional true}
-    [:map-of {:gen/max 100} ::sm/uuid ::cto/token]]
    [:media {:optional true}
     [:map-of {:gen/max 5} ::sm/uuid ::media-object]]
    [:plugin-data {:optional true}
-    [:map-of {:gen/max 5} :keyword ::ctpg/plugin-data]]])
+    [:map-of {:gen/max 5} :keyword ::ctpg/plugin-data]]
+   [:token-themes [:vector ::sm/uuid]]
+   [:token-themes-index {:optional true}
+    [:map-of {:gen/max 5} ::sm/uuid ::ctt/token-theme]]
+   [:token-set-groups [:vector ::sm/uuid]]
+   [:token-set-groups-index {:optional true}
+    [:map-of {:gen/max 10} ::sm/uuid ::ctt/token-set-group]]
+   [:token-sets-index {:optional true}
+    [:map-of {:gen/max 10} ::sm/uuid ::ctt/token-set]]
+   [:tokens {:optional true}
+    [:map-of {:gen/max 100} ::sm/uuid ::cto/token]]])
 
 (def check-file-data!
   (sm/check-fn ::data))
diff --git a/common/src/app/common/types/token_theme.cljc b/common/src/app/common/types/token_theme.cljc
new file mode 100644
index 0000000000..ebb6f8b266
--- /dev/null
+++ b/common/src/app/common/types/token_theme.cljc
@@ -0,0 +1,31 @@
+;; 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.common.types.token-theme
+  (:require
+   [app.common.schema :as sm]))
+
+(sm/register! ::token-theme
+  [:map {:title "TokenTheme"}
+   [:id ::sm/uuid]
+   [:name :string]
+   [:description {:optional true} :string]
+   [:modified-at {:optional true} ::sm/inst]
+   [:sets [:set {:gen/max 10 :gen/min 1} ::sm/uuid]]])
+
+(sm/register! ::token-set-group
+  [:map {:title "TokenSetGroup"}
+   [:id ::sm/uuid]
+   [:name :string]
+   [:sets [:vector {:gen/max 10 :gen/min 1} ::sm/uuid]]])
+
+(sm/register! ::token-set
+  [:map {:title "TokenSet"}
+   [:id ::sm/uuid]
+   [:name :string]
+   [:description {:optional true} :string]
+   [:modified-at {:optional true} ::sm/inst]
+   [:tokens [:vector {:gen/max 10 :gen/min 1} ::sm/uuid]]])

From 6c3415b92c8eeded625def6707427df09bf6d98b Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 6 Aug 2024 14:56:11 +0200
Subject: [PATCH 02/75] Differentiate groups and sets

---
 common/src/app/common/types/file.cljc        |  6 ++++--
 common/src/app/common/types/token_theme.cljc | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index ac14d71b6d..021d9a09df 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -63,10 +63,12 @@
     [:map-of {:gen/max 5} ::sm/uuid ::media-object]]
    [:plugin-data {:optional true}
     [:map-of {:gen/max 5} :keyword ::ctpg/plugin-data]]
-   [:token-themes [:vector ::sm/uuid]]
+   [:token-themes {:optional true}
+    [:vector ::sm/uuid]]
    [:token-themes-index {:optional true}
     [:map-of {:gen/max 5} ::sm/uuid ::ctt/token-theme]]
-   [:token-set-groups [:vector ::sm/uuid]]
+   [:token-set-groups {:optional true}
+    [:vector ::sm/uuid]]
    [:token-set-groups-index {:optional true}
     [:map-of {:gen/max 10} ::sm/uuid ::ctt/token-set-group]]
    [:token-sets-index {:optional true}
diff --git a/common/src/app/common/types/token_theme.cljc b/common/src/app/common/types/token_theme.cljc
index ebb6f8b266..4b9bf92a05 100644
--- a/common/src/app/common/types/token_theme.cljc
+++ b/common/src/app/common/types/token_theme.cljc
@@ -16,11 +16,22 @@
    [:modified-at {:optional true} ::sm/inst]
    [:sets [:set {:gen/max 10 :gen/min 1} ::sm/uuid]]])
 
+(sm/register! ::token-set-group-ref
+  [:map
+   [:id :sm/uuid]
+   [:type [:= :group]]])
+
+(sm/register! ::token-set-ref
+  [:map
+   [:id :sm/uuid]
+   [:type [:= :set]]])
+
 (sm/register! ::token-set-group
   [:map {:title "TokenSetGroup"}
    [:id ::sm/uuid]
    [:name :string]
-   [:sets [:vector {:gen/max 10 :gen/min 1} ::sm/uuid]]])
+   [:items [:vector {:gen/max 10 :gen/min 1}
+            [:or ::token-set-group-ref ::token-set-ref]]]])
 
 (sm/register! ::token-set
   [:map {:title "TokenSet"}

From 9ff3a135a84ff50377c9cfb72f7d2cf80198171b Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 12 Aug 2024 10:50:47 +0200
Subject: [PATCH 03/75] Cleanup

---
 frontend/src/app/main/data/tokens.cljs | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index a27c7f30cb..4748d70e72 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -50,12 +50,6 @@
   (let [[shape-leftover token-leftover _matching] (data/diff (:applied-tokens shape) token)]
     (merge {} shape-leftover token-leftover)))
 
-(defn get-shape-from-state [shape-id state]
-  (let [current-page-id (get state :current-page-id)
-        shape (-> (workspace-shapes (:workspace-data state) current-page-id #{shape-id})
-                  (first))]
-    shape))
-
 (defn token-from-attributes [token attributes]
   (->> (map (fn [attr] [attr (wtt/token-identifier token)]) attributes)
        (into {})))

From 547358d579c5437c9cdb3f0fbaaff1c49ca4b431 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 11:57:06 +0200
Subject: [PATCH 04/75] Add token set changes

---
 common/src/app/common/files/changes.cljc      | 16 +++++++
 .../src/app/common/files/changes_builder.cljc | 24 ++++++++++
 frontend/src/app/main/data/tokens.cljs        | 45 +++++++++++++++----
 .../ui/workspace/tokens/context_menu.cljs     |  2 +-
 .../app/main/ui/workspace/tokens/form.cljs    |  2 +-
 5 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc
index 9505175cb7..f6b643b39c 100644
--- a/common/src/app/common/files/changes.cljc
+++ b/common/src/app/common/files/changes.cljc
@@ -24,6 +24,7 @@
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.token :as cto]
+   [app.common.types.token-theme :as ctot]
    [app.common.types.tokens-list :as ctol]
    [app.common.types.typographies-list :as ctyl]
    [app.common.types.typography :as ctt]
@@ -247,6 +248,21 @@
       [:type [:= :del-typography]]
       [:id ::sm/uuid]]]
 
+    [:add-token-set
+     [:map {:title "AddTokenSetChange"}
+      [:type [:= :add-token-set]]
+      [:token-set ::ctot/token-set]]]
+
+    [:mod-token-set
+     [:map {:title "ModTokenSetChange"}
+      [:type [:= :mod-token-set]]
+      [:id ::ctot/token-set]]]
+
+    [:del-token-set
+     [:map {:title "DelTokenSetChange"}
+      [:type [:= :del-token-set]]
+      [:id ::sm/uuid]]]
+
     [:add-token
      [:map {:title "AddTokenChange"}
       [:type [:= :add-token]]
diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 35f4a32b70..391703760e 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -695,6 +695,30 @@
         (update :undo-changes conj {:type :add-typography :typography prev-typography})
         (apply-changes-local))))
 
+(defn add-token-set
+  [changes token-set]
+  (-> changes
+      (update :redo-changes conj {:type :add-token-set :token-set token-set})
+      (update :undo-changes conj {:type :del-token-set :id (:id token-set)})
+      (apply-changes-local)))
+
+(defn update-token-set
+  [changes token-set prev-token-set]
+  (-> changes
+      (update :redo-changes conj {:type :mod-token-set :id (:id token-set) :token-set token-set})
+      (update :undo-changes conj {:type :mod-token-set :id (:id token-set) :token-set (or prev-token-set token-set)})
+      (apply-changes-local)))
+
+(defn delete-token-set
+  [changes token-set-id]
+  (assert-library! changes)
+  (let [library-data (::library-data (meta changes))
+        prev-token-set (get-in library-data [:token-set token-set-id])]
+    (-> changes
+        (update :redo-changes conj {:type :del-token-set :id token-set-id})
+        (update :undo-changes conj {:type :add-token-set :token prev-token-set})
+        (apply-changes-local))))
+
 (defn add-token
   [changes token]
   (-> changes
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 4748d70e72..151d48f9cb 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -80,18 +80,45 @@
   (let [workspace-data (deref refs/workspace-data)]
     (get (:tokens workspace-data) id)))
 
+(defn get-workspace-sets [state]
+  (get-in state [:workspace-data :token-sets-index]))
+
+(defn get-token-set [set-id state]
+  (some-> (get-workspace-sets state)
+          (get set-id)))
+
+(def default-token-set-name "Global")
+
+(defn create-global-set [])
+
+(defn add-token-to-token-set [token token-set]
+  (update token-set :items conj (:id token)))
+
 (defn update-create-token
-  [token]
+  [token set-id]
   (let [token (update token :id #(or % (uuid/next)))]
     (ptk/reify ::add-token
       ptk/WatchEvent
-      (watch [it _ _]
+      (watch [it state _]
         (let [prev-token (get-token-data-from-token-id (:id token))
-              changes (if prev-token
-                        (-> (pcb/empty-changes it)
-                            (pcb/update-token token prev-token))
-                        (-> (pcb/empty-changes it)
-                            (pcb/add-token token)))]
+              create-token? (not prev-token)
+              token-changes (if create-token?
+                              (-> (pcb/empty-changes it)
+                                  (pcb/add-token token))
+                              (-> (pcb/empty-changes it)
+                                  (pcb/update-token token prev-token)))
+              token-set (get-token-set state set-id)
+              create-set? (not token-set)
+              changes (cond
+                        create-set? (-> token-changes
+                                        (pcb/add-token-set {:id (uuid/next)
+                                                            :name "Global"
+                                                            :items [(:id token)]}))
+                        :else (let [updated-token-set (if (contains? token-set (:id token))
+                                                        token-set
+                                                        (update token-set :items conj (:id token)))]
+                                  (-> token-changes
+                                      (pcb/update-token-set token-set updated-token-set))))]
           (rx/of (dch/commit-changes changes)))))))
 
 (defn delete-token
@@ -107,11 +134,11 @@
         (rx/of (dch/commit-changes changes))))))
 
 (defn duplicate-token
-  [id]
+  [id set-id]
   (let [new-token (-> (get-token-data-from-token-id id)
                       (dissoc :id)
                       (update :name #(str/concat % "-copy")))]
-    (update-create-token new-token)))
+    (update-create-token new-token set-id)))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; TEMP (Move to test)
diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
index 615f758d41..917cf7e594 100644
--- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
@@ -207,7 +207,7 @@
     [{:title "Delete Token"
       :action #(st/emit! (dt/delete-token (:id token)))}
      {:title "Duplicate Token"
-      :action #(st/emit! (dt/duplicate-token (:id token)))}
+      :action #(st/emit! (dt/duplicate-token (:id token) nil))}
      {:title "Edit Token"
       :action (fn [event]
                 (let [{:keys [key fields]} modal
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 4521906289..53c9a1d7ad 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -246,7 +246,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                                                    :value final-value}
                                                             final-description (assoc :description final-description)
                                                             (:id token) (assoc :id (:id token)))]
-                                            (st/emit! (dt/update-create-token new-token))
+                                            (st/emit! (dt/update-create-token new-token nil))
                                             (st/emit! (wtu/update-workspace-tokens))
                                             (modal/hide!)))))))))]
     [:form

From bcd4b6d9ec082cdd6b28ad9a6f21bad3d4642136 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 13:31:43 +0200
Subject: [PATCH 05/75] Fix schema errors

---
 common/src/app/common/files/changes.cljc      | 16 +++++++-
 .../src/app/common/files/changes_builder.cljc |  2 +-
 .../app/common/types/tokens_theme_list.cljc   | 38 +++++++++++++++++++
 frontend/src/app/main/data/tokens.cljs        |  5 ++-
 4 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 common/src/app/common/types/tokens_theme_list.cljc

diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc
index f6b643b39c..a486fc950a 100644
--- a/common/src/app/common/files/changes.cljc
+++ b/common/src/app/common/files/changes.cljc
@@ -26,6 +26,7 @@
    [app.common.types.token :as cto]
    [app.common.types.token-theme :as ctot]
    [app.common.types.tokens-list :as ctol]
+   [app.common.types.tokens-theme-list :as ctotl]
    [app.common.types.typographies-list :as ctyl]
    [app.common.types.typography :as ctt]
    [clojure.set :as set]))
@@ -256,7 +257,8 @@
     [:mod-token-set
      [:map {:title "ModTokenSetChange"}
       [:type [:= :mod-token-set]]
-      [:id ::ctot/token-set]]]
+      [:id ::sm/uuid]
+      [:token-set ::ctot/token-set]]]
 
     [:del-token-set
      [:map {:title "DelTokenSetChange"}
@@ -758,6 +760,18 @@
   [data {:keys [id]}]
   (ctol/delete-token data id))
 
+(defmethod process-change :add-token-set
+  [data {:keys [token-set]}]
+  (ctotl/add-token-set data token-set))
+
+(defmethod process-change :mod-token-set
+  [data {:keys [id token-set]}]
+  (ctotl/update-token-set data id merge token-set))
+
+(defmethod process-change :del-token-set
+  [data {:keys [id]}]
+  (ctotl/delete-token-set data id))
+
 ;; === Operations
 (defmethod process-operation :set
   [on-changed shape op]
diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 391703760e..34f74c9802 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -716,7 +716,7 @@
         prev-token-set (get-in library-data [:token-set token-set-id])]
     (-> changes
         (update :redo-changes conj {:type :del-token-set :id token-set-id})
-        (update :undo-changes conj {:type :add-token-set :token prev-token-set})
+        (update :undo-changes conj {:type :add-token-set :token-set prev-token-set})
         (apply-changes-local))))
 
 (defn add-token
diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
new file mode 100644
index 0000000000..966016b02f
--- /dev/null
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -0,0 +1,38 @@
+;; 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.common.types.tokens-theme-list
+  (:require
+   [app.common.data :as d]
+   [app.common.exceptions :as ex]
+   [app.common.time :as dt]))
+
+(defn- touch
+  "Updates the `modified-at` timestamp of a token set."
+  [token-set]
+  (assoc token-set :modified-at (dt/now)))
+
+(defn add-token-set
+  [file-data {:keys [index id] :as token-set}]
+  (-> file-data
+      (update :token-set-groups
+              (fn [token-set-groups]
+                (let [exists? (some (partial = id) token-set-groups)]
+                  (cond
+                    exists?      token-set-groups
+                    (nil? index) (conj token-set-groups id)
+                    :else        (d/insert-at-index token-set-groups index [id])))))
+      (update :token-sets-index assoc id token-set)))
+
+(defn update-token-set
+  [file-data token-id f & args]
+  #_(ex/raise :type :not-implemented)
+  file-data)
+
+(defn delete-token-set
+  [file-data token-id]
+  #_(ex/raise :type :not-implemented)
+  file-data)
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 151d48f9cb..d0063518ff 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -113,12 +113,13 @@
                         create-set? (-> token-changes
                                         (pcb/add-token-set {:id (uuid/next)
                                                             :name "Global"
-                                                            :items [(:id token)]}))
+                                                            :tokens [(:id token)]}))
                         :else (let [updated-token-set (if (contains? token-set (:id token))
                                                         token-set
-                                                        (update token-set :items conj (:id token)))]
+                                                        (update token-set :tokens conj (:id token)))]
                                   (-> token-changes
                                       (pcb/update-token-set token-set updated-token-set))))]
+          (js/console.log "changes" changes)
           (rx/of (dch/commit-changes changes)))))))
 
 (defn delete-token

From ec01ce7550c5f73c60dbbad2cb5f31d7bb79e75e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 14:41:18 +0200
Subject: [PATCH 06/75] Ensure vector

---
 common/src/app/common/types/tokens_theme_list.cljc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index 966016b02f..64dab3c049 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -23,7 +23,7 @@
                 (let [exists? (some (partial = id) token-set-groups)]
                   (cond
                     exists?      token-set-groups
-                    (nil? index) (conj token-set-groups id)
+                    (nil? index) (conj (or token-set-groups []) id)
                     :else        (d/insert-at-index token-set-groups index [id])))))
       (update :token-sets-index assoc id token-set)))
 

From c2759236213dc4414dc78baa10340f4e4a40ccae Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 14:41:49 +0200
Subject: [PATCH 07/75] Fix indent

---
 common/src/app/common/files/changes_builder.cljc | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 34f74c9802..b4486a6d4f 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -328,7 +328,7 @@
          (update :redo-changes conj add-change)
          (cond->
           (and (ctk/in-component-copy? parent) (not ignore-touched))
-           (update :undo-changes conj restore-touched-change))
+          (update :undo-changes conj restore-touched-change))
          (update :undo-changes conj del-change)
          (apply-changes-local)))))
 
@@ -389,7 +389,7 @@
          (update :redo-changes conj set-parent-change)
          (cond->
           (ctk/in-component-copy? parent)
-           (update :undo-changes conj restore-touched-change))
+          (update :undo-changes conj restore-touched-change))
          (update :undo-changes #(reduce mk-undo-change % shapes))
          (apply-changes-local)))))
 

From ba31914ca459cf9923890d5db304ff4502314f7e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 14:41:58 +0200
Subject: [PATCH 08/75] Fix typo

---
 common/src/app/common/types/token_theme.cljc | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/src/app/common/types/token_theme.cljc b/common/src/app/common/types/token_theme.cljc
index 4b9bf92a05..aff36dc297 100644
--- a/common/src/app/common/types/token_theme.cljc
+++ b/common/src/app/common/types/token_theme.cljc
@@ -18,12 +18,12 @@
 
 (sm/register! ::token-set-group-ref
   [:map
-   [:id :sm/uuid]
+   [:id ::sm/uuid]
    [:type [:= :group]]])
 
 (sm/register! ::token-set-ref
   [:map
-   [:id :sm/uuid]
+   [:id ::sm/uuid]
    [:type [:= :set]]])
 
 (sm/register! ::token-set-group

From a4865522ccaf7b4bb5772f72c3e9db85008afd18 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 15:25:36 +0200
Subject: [PATCH 09/75] Select token set on create

---
 frontend/src/app/main/data/tokens.cljs        | 39 +++++++++++++------
 .../ui/workspace/tokens/context_menu.cljs     |  2 +-
 .../app/main/ui/workspace/tokens/form.cljs    |  2 +-
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index d0063518ff..7b0e65f3d3 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -94,8 +94,22 @@
 (defn add-token-to-token-set [token token-set]
   (update token-set :items conj (:id token)))
 
+(defn get-selected-token-set [state]
+  (when-let [id (get-in state [:workspace-local :selected-token-set-id])]
+    (get-token-set state id)))
+
+(defn assoc-selected-token-set-id [state id]
+  (assoc-in state [:workspace-local :selected-token-set-id] id))
+
+(defn set-selected-token-set-id
+  [id]
+  (ptk/reify ::set-selected-token-set-id
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-selected-token-set-id state id))))
+
 (defn update-create-token
-  [token set-id]
+  [token]
   (let [token (update token :id #(or % (uuid/next)))]
     (ptk/reify ::add-token
       ptk/WatchEvent
@@ -107,20 +121,22 @@
                                   (pcb/add-token token))
                               (-> (pcb/empty-changes it)
                                   (pcb/update-token token prev-token)))
-              token-set (get-token-set state set-id)
+              token-set (get-selected-token-set state)
               create-set? (not token-set)
+              new-token-set {:id (uuid/next)
+                             :name "Global"
+                             :tokens [(:id token)]}
               changes (cond
                         create-set? (-> token-changes
-                                        (pcb/add-token-set {:id (uuid/next)
-                                                            :name "Global"
-                                                            :tokens [(:id token)]}))
+                                        (pcb/add-token-set new-token-set))
                         :else (let [updated-token-set (if (contains? token-set (:id token))
                                                         token-set
                                                         (update token-set :tokens conj (:id token)))]
-                                  (-> token-changes
-                                      (pcb/update-token-set token-set updated-token-set))))]
-          (js/console.log "changes" changes)
-          (rx/of (dch/commit-changes changes)))))))
+                                (-> token-changes
+                                    (pcb/update-token-set token-set updated-token-set))))]
+          (rx/of
+           (set-selected-token-set-id (:id new-token-set))
+           (dch/commit-changes changes)))))))
 
 (defn delete-token
   [id]
@@ -135,11 +151,12 @@
         (rx/of (dch/commit-changes changes))))))
 
 (defn duplicate-token
-  [id set-id]
+  [id]
   (let [new-token (-> (get-token-data-from-token-id id)
                       (dissoc :id)
                       (update :name #(str/concat % "-copy")))]
-    (update-create-token new-token set-id)))
+    (update-create-token new-token)))
+
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; TEMP (Move to test)
diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
index 917cf7e594..615f758d41 100644
--- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
@@ -207,7 +207,7 @@
     [{:title "Delete Token"
       :action #(st/emit! (dt/delete-token (:id token)))}
      {:title "Duplicate Token"
-      :action #(st/emit! (dt/duplicate-token (:id token) nil))}
+      :action #(st/emit! (dt/duplicate-token (:id token)))}
      {:title "Edit Token"
       :action (fn [event]
                 (let [{:keys [key fields]} modal
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 53c9a1d7ad..4521906289 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -246,7 +246,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                                                    :value final-value}
                                                             final-description (assoc :description final-description)
                                                             (:id token) (assoc :id (:id token)))]
-                                            (st/emit! (dt/update-create-token new-token nil))
+                                            (st/emit! (dt/update-create-token new-token))
                                             (st/emit! (wtu/update-workspace-tokens))
                                             (modal/hide!)))))))))]
     [:form

From 2f2ed0a42f6b601dde4e9f2edfbf3cc3c235799a Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 15:45:38 +0200
Subject: [PATCH 10/75] Cleanup

---
 frontend/src/app/main/data/tokens.cljs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 7b0e65f3d3..2e70ba500a 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -15,7 +15,6 @@
    [app.main.data.changes :as dch]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.refs :as refs]
-   [app.main.ui.workspace.tokens.common :refer [workspace-shapes]]
    [app.main.ui.workspace.tokens.token :as wtt]
    [beicon.v2.core :as rx]
    [clojure.data :as data]

From 9aadb8c72fff97b6b04f21248b124328db9924d9 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 16:18:24 +0200
Subject: [PATCH 11/75] Add test

---
 frontend/src/app/main/data/tokens.cljs        | 10 ++-
 .../token_tests/logic/token_actions_test.cljs | 82 +++++++++++++------
 2 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 2e70ba500a..a82d7480f7 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -93,9 +93,15 @@
 (defn add-token-to-token-set [token token-set]
   (update token-set :items conj (:id token)))
 
+(defn get-selected-token-set-id [state]
+  (get-in state [:workspace-local :selected-token-set-id]))
+
 (defn get-selected-token-set [state]
-  (when-let [id (get-in state [:workspace-local :selected-token-set-id])]
-    (get-token-set state id)))
+  (when-let [id (get-selected-token-set-id state)]
+    (get-token-set id state)))
+
+(defn get-token-set-tokens [{:keys [tokens] :as token-set} file]
+  (map #(get-in file [:data :tokens %]) tokens))
 
 (defn assoc-selected-token-set-id [state id]
   (assoc-in state [:workspace-local :selected-token-set-id] id))
diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs
index e0d3fac38d..790aadda03 100644
--- a/frontend/test/token_tests/logic/token_actions_test.cljs
+++ b/frontend/test/token_tests/logic/token_actions_test.cljs
@@ -5,6 +5,7 @@
    [app.common.test-helpers.files :as cthf]
    [app.common.test-helpers.shapes :as cths]
    [app.main.ui.workspace.tokens.changes :as wtch]
+   [app.main.data.tokens :as wdt]
    [app.main.ui.workspace.tokens.token :as wtt]
    [cljs.test :as t :include-macros true]
    [frontend-tests.helpers.pages :as thp]
@@ -18,24 +19,59 @@
              (log/set-level! "app.main.data.changes" :error)
              (thp/reset-idmap!))})
 
-(defn setup-file
+(defn setup-file []
+  (cthf/sample-file :file-1 :page-label :page-1))
+
+(def border-radius-token
+  {:value "12"
+   :name "borderRadius.sm"
+   :type :border-radius})
+
+(def ^:private reference-border-radius-token
+  {:value "{borderRadius.sm} * 2"
+   :name "borderRadius.md"
+   :type :border-radius})
+
+(defn setup-file-with-tokens
   [& {:keys [rect-1 rect-2 rect-3]}]
-  (-> (cthf/sample-file :file-1 :page-label :page-1)
+  (-> (setup-file)
       (ctho/add-rect :rect-1 rect-1)
       (ctho/add-rect :rect-2 rect-2)
       (ctho/add-rect :rect-3 rect-3)
-      (toht/add-token :token-1 {:value "12"
-                                :name "borderRadius.sm"
-                                :type :border-radius})
-      (toht/add-token :token-2 {:value "{borderRadius.sm} * 2"
-                                :name "borderRadius.md"
-                                :type :border-radius})))
+      (toht/add-token :token-1 border-radius-token)
+      (toht/add-token :token-2 reference-border-radius-token)))
+
+(defonce a (atom nil))
+
+(t/deftest test-create-token
+  (t/testing "creates token in new token set"
+    (t/async
+     done
+     (let [file (setup-file)
+           store (ths/setup-store file)
+           events [(wdt/update-create-token border-radius-token)]]
+       (tohs/run-store-async
+        store done events
+        (fn [new-state]
+          (let [selected-token-set (wdt/get-selected-token-set new-state)
+                file' (ths/get-file-from-store new-state)
+                set-tokens (wdt/get-token-set-tokens selected-token-set file')]
+            (t/testing "selects created workspace set and adds token to it"
+              (t/is (some? selected-token-set))
+              (t/is (= 1 (count (:tokens selected-token-set))))
+              (t/is (= (list border-radius-token) (map #(dissoc % :id :modified-at) set-tokens))))
+            (reset! a new-state))))))))
+
+(comment
+  @a
+  (t/run-tests)
+  nil)
 
 (t/deftest test-apply-token
   (t/testing "applies token to shape and updates shape attributes to resolved value"
     (t/async
      done
-     (let [file (setup-file)
+     (let [file (setup-file-with-tokens)
            store (ths/setup-store file)
            rect-1 (cths/get-shape file :rect-1)
            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
@@ -60,7 +96,7 @@
   (t/testing "applying a token twice with the same attributes will override the previously applied tokens values"
     (t/async
      done
-     (let [file (setup-file)
+     (let [file (setup-file-with-tokens)
            store (ths/setup-store file)
            rect-1 (cths/get-shape file :rect-1)
            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
@@ -89,7 +125,7 @@
   (t/testing "removes old token attributes and applies only single attribute"
     (t/async
      done
-     (let [file (setup-file)
+     (let [file (setup-file-with-tokens)
            store (ths/setup-store file)
            rect-1 (cths/get-shape file :rect-1)
            events [;; Apply `:token-1` to all border radius attributes
@@ -123,7 +159,7 @@
   (t/testing "applies dimensions token and updates the shapes width and height"
     (t/async
      done
-     (let [file (-> (setup-file)
+     (let [file (-> (setup-file-with-tokens)
                     (toht/add-token :token-target {:value "100"
                                                    :name "dimensions.sm"
                                                    :type :dimensions}))
@@ -151,7 +187,7 @@
   (t/testing "applies sizing token and updates the shapes width and height"
     (t/async
      done
-     (let [file (-> (setup-file)
+     (let [file (-> (setup-file-with-tokens)
                     (toht/add-token :token-target {:value "100"
                                                    :name "sizing.sm"
                                                    :type :sizing}))
@@ -179,7 +215,7 @@
   (t/testing "applies opacity token and updates the shapes opacity"
     (t/async
      done
-     (let [file (-> (setup-file)
+     (let [file (-> (setup-file-with-tokens)
                     (toht/add-token :opacity-float {:value "0.3"
                                                     :name "opacity.float"
                                                     :type :opacity})
@@ -229,7 +265,7 @@
   (t/testing "applies rotation token and updates the shapes rotation"
     (t/async
       done
-      (let [file (-> (setup-file)
+      (let [file (-> (setup-file-with-tokens)
                      (toht/add-token :token-target {:value "120"
                                                     :name "rotation.medium"
                                                     :type :rotation}))
@@ -253,11 +289,11 @@
   (t/testing "applies stroke-width token and updates the shapes with stroke"
     (t/async
      done
-     (let [file (-> (setup-file {:rect-1 {:strokes [{:stroke-alignment :inner,
-                                                     :stroke-style :solid,
-                                                     :stroke-color "#000000",
-                                                     :stroke-opacity 1,
-                                                     :stroke-width 5}]}})
+     (let [file (-> (setup-file-with-tokens {:rect-1 {:strokes [{:stroke-alignment :inner,
+                                                                 :stroke-style :solid,
+                                                                 :stroke-color "#000000",
+                                                                 :stroke-opacity 1,
+                                                                 :stroke-width 5}]}})
                     (toht/add-token :token-target {:value "10"
                                                    :name "stroke-width.sm"
                                                    :type :stroke-width}))
@@ -286,7 +322,7 @@
   (t/testing "should apply token to all selected items, where no item has the token applied"
     (t/async
       done
-      (let [file (setup-file)
+      (let [file (setup-file-with-tokens)
             store (ths/setup-store file)
             rect-1 (cths/get-shape file :rect-1)
             rect-2 (cths/get-shape file :rect-2)
@@ -314,7 +350,7 @@
   (t/testing "should unapply given token if one of the selected items has the token applied while keeping other tokens with some attributes"
     (t/async
       done
-      (let [file (-> (setup-file)
+      (let [file (-> (setup-file-with-tokens)
                      (toht/apply-token-to-shape :rect-1 :token-1 #{:rx :ry})
                      (toht/apply-token-to-shape :rect-3 :token-2 #{:rx :ry}))
             store (ths/setup-store file)
@@ -348,7 +384,7 @@
   (t/testing "should apply token to all if none of the shapes has it applied"
     (t/async
       done
-      (let [file (-> (setup-file)
+      (let [file (-> (setup-file-with-tokens)
                      (toht/apply-token-to-shape :rect-1 :token-2 #{:rx :ry})
                      (toht/apply-token-to-shape :rect-3 :token-2 #{:rx :ry}))
             store (ths/setup-store file)

From 1135b7e2dbeb0029a3c0c84ab6fa88518c62241a Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 13 Aug 2024 18:30:00 +0200
Subject: [PATCH 12/75] Update token sets

---
 .../app/common/types/tokens_theme_list.cljc   |  7 ++----
 frontend/src/app/main/data/tokens.cljs        |  7 ++++--
 .../token_tests/logic/token_actions_test.cljs | 22 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index 64dab3c049..f2e6058e24 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -7,7 +7,6 @@
 (ns app.common.types.tokens-theme-list
   (:require
    [app.common.data :as d]
-   [app.common.exceptions :as ex]
    [app.common.time :as dt]))
 
 (defn- touch
@@ -28,11 +27,9 @@
       (update :token-sets-index assoc id token-set)))
 
 (defn update-token-set
-  [file-data token-id f & args]
-  #_(ex/raise :type :not-implemented)
-  file-data)
+  [file-data token-set-id f & args]
+  (d/update-in-when file-data [:token-sets-index token-set-id] #(-> (apply f % args) (touch))))
 
 (defn delete-token-set
   [file-data token-id]
-  #_(ex/raise :type :not-implemented)
   file-data)
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index a82d7480f7..50ae222a4a 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -131,6 +131,9 @@
               new-token-set {:id (uuid/next)
                              :name "Global"
                              :tokens [(:id token)]}
+              selected-token-set-id (if create-set?
+                                      (:id new-token-set)
+                                      (:id token-set))
               changes (cond
                         create-set? (-> token-changes
                                         (pcb/add-token-set new-token-set))
@@ -138,9 +141,9 @@
                                                         token-set
                                                         (update token-set :tokens conj (:id token)))]
                                 (-> token-changes
-                                    (pcb/update-token-set token-set updated-token-set))))]
+                                    (pcb/update-token-set updated-token-set token-set))))]
           (rx/of
-           (set-selected-token-set-id (:id new-token-set))
+           (set-selected-token-set-id selected-token-set-id)
            (dch/commit-changes changes)))))))
 
 (defn delete-token
diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs
index 790aadda03..cd026217f3 100644
--- a/frontend/test/token_tests/logic/token_actions_test.cljs
+++ b/frontend/test/token_tests/logic/token_actions_test.cljs
@@ -59,10 +59,30 @@
             (t/testing "selects created workspace set and adds token to it"
               (t/is (some? selected-token-set))
               (t/is (= 1 (count (:tokens selected-token-set))))
-              (t/is (= (list border-radius-token) (map #(dissoc % :id :modified-at) set-tokens))))
+              (t/is (= (list border-radius-token) (map #(dissoc % :id :modified-at) set-tokens)))))))))))
+
+(t/deftest test-create-multiple-tokens
+  (t/testing "uses selected tokens set when creating multiple tokens"
+    (t/async
+     done
+     (let [file (setup-file)
+           store (ths/setup-store file)
+           events [(wdt/update-create-token border-radius-token)
+                   (wdt/update-create-token reference-border-radius-token)]]
+       (tohs/run-store-async
+        store done events
+        (fn [new-state]
+          (let [selected-token-set (wdt/get-selected-token-set new-state)
+                file' (ths/get-file-from-store new-state)
+                set-tokens (wdt/get-token-set-tokens selected-token-set file')]
+            (t/testing "selects created workspace set and adds token to it"
+              (t/is (some? selected-token-set))
+              (t/is (= 2 (count (:tokens selected-token-set))))
+              (t/is (= (list border-radius-token reference-border-radius-token) (map #(dissoc % :id :modified-at) set-tokens))))
             (reset! a new-state))))))))
 
 (comment
+  (wdt/get-selected-token-set @a)
   @a
   (t/run-tests)
   nil)

From 188e7d220a5a315388e8faa11fc66b8d439cf201 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 14 Aug 2024 09:25:17 +0200
Subject: [PATCH 13/75] Fix name

---
 frontend/src/app/main/data/tokens.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 50ae222a4a..cab0e5c753 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -116,7 +116,7 @@
 (defn update-create-token
   [token]
   (let [token (update token :id #(or % (uuid/next)))]
-    (ptk/reify ::add-token
+    (ptk/reify ::update-create-token
       ptk/WatchEvent
       (watch [it state _]
         (let [prev-token (get-token-data-from-token-id (:id token))

From ead8a983ab4753b840c8aa796309783d05c3f1d8 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 15 Aug 2024 14:26:12 +0200
Subject: [PATCH 14/75] Move to token-set namespace

---
 frontend/src/app/main/data/tokens.cljs        | 34 ++---------------
 .../main/ui/workspace/tokens/token_set.cljs   | 37 +++++++++++++++++++
 2 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/app/main/ui/workspace/tokens/token_set.cljs

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index cab0e5c753..ddd5f55500 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -19,7 +19,8 @@
    [beicon.v2.core :as rx]
    [clojure.data :as data]
    [cuerdas.core :as str]
-   [potok.v2.core :as ptk]))
+   [potok.v2.core :as ptk]
+   [app.main.ui.workspace.tokens.token-set :as wtts]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Helpers
@@ -79,39 +80,12 @@
   (let [workspace-data (deref refs/workspace-data)]
     (get (:tokens workspace-data) id)))
 
-(defn get-workspace-sets [state]
-  (get-in state [:workspace-data :token-sets-index]))
-
-(defn get-token-set [set-id state]
-  (some-> (get-workspace-sets state)
-          (get set-id)))
-
-(def default-token-set-name "Global")
-
-(defn create-global-set [])
-
-(defn add-token-to-token-set [token token-set]
-  (update token-set :items conj (:id token)))
-
-(defn get-selected-token-set-id [state]
-  (get-in state [:workspace-local :selected-token-set-id]))
-
-(defn get-selected-token-set [state]
-  (when-let [id (get-selected-token-set-id state)]
-    (get-token-set id state)))
-
-(defn get-token-set-tokens [{:keys [tokens] :as token-set} file]
-  (map #(get-in file [:data :tokens %]) tokens))
-
-(defn assoc-selected-token-set-id [state id]
-  (assoc-in state [:workspace-local :selected-token-set-id] id))
-
 (defn set-selected-token-set-id
   [id]
   (ptk/reify ::set-selected-token-set-id
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-selected-token-set-id state id))))
+      (wtts/assoc-selected-token-set-id state id))))
 
 (defn update-create-token
   [token]
@@ -126,7 +100,7 @@
                                   (pcb/add-token token))
                               (-> (pcb/empty-changes it)
                                   (pcb/update-token token prev-token)))
-              token-set (get-selected-token-set state)
+              token-set (wtts/get-selected-token-set state)
               create-set? (not token-set)
               new-token-set {:id (uuid/next)
                              :name "Global"
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
new file mode 100644
index 0000000000..c76784c496
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -0,0 +1,37 @@
+(ns app.main.ui.workspace.tokens.token-set)
+
+(defn get-workspace-tokens [state]
+  (get-in state [:workspace-data :tokens]))
+
+(defn get-workspace-sets [state]
+  (get-in state [:workspace-data :token-sets-index]))
+
+(defn get-token-set [set-id state]
+  (some-> (get-workspace-sets state)
+          (get set-id)))
+
+(def default-token-set-name "Global")
+
+(defn create-global-set [])
+
+(defn add-token-to-token-set [token token-set]
+  (update token-set :items conj (:id token)))
+
+(defn get-selected-token-set-id [state]
+  (or (get-in state [:workspace-local :selected-token-set-id])
+      (get-in state [:workspace-data :token-set-groups 0])))
+
+(defn get-selected-token-set [state]
+  (when-let [id (get-selected-token-set-id state)]
+    (get-token-set id state)))
+
+(defn get-selected-token-set-tokens [state]
+  (when-let [token-set (get-selected-token-set state)]
+    (let [tokens (or (get-workspace-tokens state) {})]
+      (select-keys tokens (:tokens token-set)))))
+
+(defn get-token-set-tokens [{:keys [tokens] :as token-set} file]
+  (map #(get-in file [:data :tokens %]) tokens))
+
+(defn assoc-selected-token-set-id [state id]
+  (assoc-in state [:workspace-local :selected-token-set-id] id))

From eaf568f1549e6ed5637340910209e40a297a6f6e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 15 Aug 2024 14:26:22 +0200
Subject: [PATCH 15/75] Get tokens from current or first token set

---
 frontend/src/app/main/refs.cljs | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 65efa9f939..66470e4376 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -14,6 +14,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.store :as st]
+   [app.main.ui.workspace.tokens.token-set :as wtts]
    [okulary.core :as l]))
 
 ;; ---- Global refs
@@ -234,10 +235,11 @@
   (l/derived :workspace-data st/state))
 
 (def workspace-tokens
-  (l/derived (fn [data]
-               (get data :tokens {}))
-             workspace-data
-             =))
+  (l/derived
+   (fn [data]
+     (or (wtts/get-selected-token-set-tokens data) {}))
+   st/state
+   =))
 
 (def workspace-file-colors
   (l/derived (fn [data]

From 73078d802af127b9444a0d21c195706585a3400b Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 15 Aug 2024 18:26:20 +0200
Subject: [PATCH 16/75] Add refs

---
 frontend/src/app/main/refs.cljs | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 66470e4376..306e6c5dc5 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -234,6 +234,19 @@
 (def workspace-data
   (l/derived :workspace-data st/state))
 
+(def workspace-selected-token-set-id
+  (l/derived
+   wtts/get-selected-token-set-id
+   st/state
+   =))
+
+(def workspace-token-sets
+  (l/derived
+   (fn [data]
+     (or (wtts/get-workspace-sets data) {}))
+   st/state
+   =))
+
 (def workspace-tokens
   (l/derived
    (fn [data]

From 587a2936e68009a598254ac626311b02ad747645 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 15 Aug 2024 18:26:37 +0200
Subject: [PATCH 17/75] Add simple UI

---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 7cab3ea9ac..a1995f5a25 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -144,6 +144,29 @@
     {:empty (sort-by :token-key empty)
      :filled (sort-by :token-key filled)}))
 
+(mf/defc token-sets
+  [_props]
+  (let [selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
+        token-sets (mf/deref refs/workspace-token-sets)]
+    (js/console.log "token-sets" token-sets)
+    [:div
+     {:style {:display "flex"
+              :flex-direction "column"
+              :gap "10px"}}
+
+     "Token Sets"
+     [:div
+      {:style {:display "flex" :gap "10px"}}
+      [:button "Create"]
+      [:button "Delete"]]
+     [:ul
+      {:style {:list-style "disk"
+               :margin-left "20px"}}
+      (for [[_ {:keys [id name]}] token-sets]
+        [:li {:style {:font-weight (when (= selected-token-set-id id) "bold")}}
+         name])]
+     [:hr]]))
+
 (mf/defc tokens-explorer
   [_props]
   (let [objects (mf/deref refs/workspace-page-objects)
@@ -156,6 +179,7 @@
         token-groups (mf/with-memo [tokens]
                        (sorted-token-groups tokens))]
     [:article
+     [:& token-sets]
      [:& token-context-menu]
      [:div.assets-bar
       (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups)

From 1f0c1dbbe6cc2e39c1c28abed2980475f9ba4b8c Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 15 Aug 2024 18:52:31 +0200
Subject: [PATCH 18/75] Update shapes on token set switch

---
 .../src/app/main/ui/workspace/tokens/sidebar.cljs   | 13 ++++++++++---
 .../src/app/main/ui/workspace/tokens/update.cljs    |  3 ++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index a1995f5a25..d4534c6db3 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.main.data.modal :as modal]
    [app.main.data.tokens :as dt]
+   [app.main.data.tokens :as wdt]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
@@ -20,6 +21,7 @@
    [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.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -148,7 +150,6 @@
   [_props]
   (let [selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
         token-sets (mf/deref refs/workspace-token-sets)]
-    (js/console.log "token-sets" token-sets)
     [:div
      {:style {:display "flex"
               :flex-direction "column"
@@ -157,13 +158,19 @@
      "Token Sets"
      [:div
       {:style {:display "flex" :gap "10px"}}
-      [:button "Create"]
+      [:button
+       {:on-click #(st/emit! (wdt/create-token-set nil))}
+       "Create"]
       [:button "Delete"]]
      [:ul
       {:style {:list-style "disk"
                :margin-left "20px"}}
       (for [[_ {:keys [id name]}] token-sets]
-        [:li {:style {:font-weight (when (= selected-token-set-id id) "bold")}}
+        [:li {:style {:font-weight (when (= selected-token-set-id id) "bold")}
+              :on-click (fn []
+                          (st/emit!
+                           (wdt/set-selected-token-set-id id)
+                           (wtu/update-workspace-tokens)))}
          name])]
      [:hr]]))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/update.cljs b/frontend/src/app/main/ui/workspace/tokens/update.cljs
index 1543d8d069..ab723fd554 100644
--- a/frontend/src/app/main/ui/workspace/tokens/update.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/update.cljs
@@ -6,6 +6,7 @@
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.style-dictionary :as wtsd]
+   [app.main.ui.workspace.tokens.token-set :as wtts]
    [beicon.v2.core :as rx]
    [clojure.data :as data]
    [clojure.set :as set]
@@ -120,7 +121,7 @@
     ptk/WatchEvent
     (watch [_ state _]
       (->>
-       (rx/from (wtsd/resolve-tokens+ (get-in state [:workspace-data :tokens])))
+       (rx/from (wtsd/resolve-tokens+ (wtts/get-selected-token-set-tokens state)))
        (rx/mapcat
         (fn [sd-tokens]
           (let [undo-id (js/Symbol)]

From f3d4346c0dff3d1586f8d0c3fdf9984610c07e87 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 15 Aug 2024 18:52:42 +0200
Subject: [PATCH 19/75] Add create token-set event

---
 frontend/src/app/main/data/tokens.cljs | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index ddd5f55500..fffd64c653 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -20,6 +20,7 @@
    [clojure.data :as data]
    [cuerdas.core :as str]
    [potok.v2.core :as ptk]
+   [app.main.ui.workspace.tokens.changes :as wdt]
    [app.main.ui.workspace.tokens.token-set :as wtts]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -87,6 +88,20 @@
     (update [_ state]
       (wtts/assoc-selected-token-set-id state id))))
 
+(defn create-token-set [token-set]
+  (let [new-token-set (merge
+                       {:id (uuid/next)
+                        :name "Token Set"
+                        :tokens []}
+                       token-set)]
+    (ptk/reify ::update-create-token
+      ptk/WatchEvent
+      (watch [it _ _]
+        (let [changes (-> (pcb/empty-changes it)
+                          (pcb/add-token-set new-token-set))]
+          (rx/of
+           (dch/commit-changes changes)))))))
+
 (defn update-create-token
   [token]
   (let [token (update token :id #(or % (uuid/next)))]

From cefa498f4d41c838710d0fa1366e14c5ffee5e52 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 06:23:53 +0200
Subject: [PATCH 20/75] Add group and selected properties to theme

---
 common/src/app/common/types/token_theme.cljc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/common/src/app/common/types/token_theme.cljc b/common/src/app/common/types/token_theme.cljc
index aff36dc297..9f898aff7d 100644
--- a/common/src/app/common/types/token_theme.cljc
+++ b/common/src/app/common/types/token_theme.cljc
@@ -11,7 +11,8 @@
 (sm/register! ::token-theme
   [:map {:title "TokenTheme"}
    [:id ::sm/uuid]
-   [:name :string]
+   [:group {:optional true} :string]
+   [:selected [:enum :enabled :disabled #_:source]]
    [:description {:optional true} :string]
    [:modified-at {:optional true} ::sm/inst]
    [:sets [:set {:gen/max 10 :gen/min 1} ::sm/uuid]]])

From f0aaa29d6674e85e400a6242e28bff12c78368c8 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 06:24:03 +0200
Subject: [PATCH 21/75] Add type functions

---
 .../main/ui/workspace/tokens/token_set.cljs   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index c76784c496..db3f3c626c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -1,5 +1,27 @@
 (ns app.main.ui.workspace.tokens.token-set)
 
+;; Themes ----------------------------------------------------------------------
+
+(defn get-theme-group [theme]
+  (:group theme))
+
+(defn get-workspace-themes [state]
+  (get-in state [:workspace-data :token-themes] []))
+
+(defn get-workspace-themes-index [state]
+  (get-in state [:workspace-data :token-themes-index] {}))
+
+(defn get-workspace-ordered-themes [state]
+  (let [themes (get-workspace-themes state)
+        themes-index (get-workspace-themes-index state)]
+    (->> (map #(get themes-index (:id %)) themes)
+         (group-by :group))))
+
+(defn theme-selected? [theme]
+  (= :enabled (:selected theme)))
+
+ ;; Sets ------------------------------------------------------------------------
+
 (defn get-workspace-tokens [state]
   (get-in state [:workspace-data :tokens]))
 

From 35759792a35fa0587d60b182b812eb6d351e8089 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 06:24:15 +0200
Subject: [PATCH 22/75] Render grouped themes ui

---
 frontend/src/app/main/refs.cljs               |  3 ++
 .../app/main/ui/workspace/tokens/sidebar.cljs | 35 +++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 306e6c5dc5..539570c5e2 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -240,6 +240,9 @@
    st/state
    =))
 
+(def workspace-ordered-token-themes
+  (l/derived wtts/get-workspace-ordered-themes st/state))
+
 (def workspace-token-sets
   (l/derived
    (fn [data]
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index d4534c6db3..47346e15c4 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -16,6 +16,7 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.tokens.changes :as wtch]
+   [app.main.ui.workspace.tokens.common :refer [labeled-input]]
    [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
@@ -146,22 +147,50 @@
     {:empty (sort-by :token-key empty)
      :filled (sort-by :token-key filled)}))
 
+(mf/defc tokene-theme-create
+  [_props]
+  (let [group (mf/use-state "")
+        name (mf/use-state "")]
+    [:div {:style {:display "flex"
+                   :flex-direction "column"
+                   :gap "10px"}}
+     [:& labeled-input {:label "Group name"
+                        :input-props {:value @group}}]
+     [:& labeled-input {:label "Theme name"
+                        :input-props {:value @name}}]
+     [:button "Create"]]))
+
 (mf/defc token-sets
   [_props]
-  (let [selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
+  (let [themes (mf/deref refs/workspace-ordered-token-themes)
+        selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
         token-sets (mf/deref refs/workspace-token-sets)]
     [:div
      {:style {:display "flex"
               :flex-direction "column"
               :gap "10px"}}
 
-     "Token Sets"
+     "Themes"
+     [:div
+      [:ul {:style {:list-style "disk"}}
+       [:& tokene-theme-create]
+       (for [[group themes] themes]
+         [:li
+          {:key (str "token-theme-group" group)}
+          group
+          #_[:ul {:style {:list-style "disk"
+                          :margin-left "20px"}}
+             (for [{:keys [id] :as theme} themes]
+               [:li {:key (str "tokene-theme-" id)}
+                [:input {:type "checkbox"
+                         :checked (wtts/theme-selected? theme)}]])]])]]
+     "Sets"
      [:div
       {:style {:display "flex" :gap "10px"}}
       [:button
        {:on-click #(st/emit! (wdt/create-token-set nil))}
        "Create"]
-      [:button "Delete"]]
+      #_[:button "Delete"]]
      [:ul
       {:style {:list-style "disk"
                :margin-left "20px"}}

From 3695ba343824c51470d0fbc714a9741c00bb27a2 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 07:09:07 +0200
Subject: [PATCH 23/75] Add token theme data scaffold

---
 common/src/app/common/files/changes.cljc      | 28 +++++++++++++++++++
 .../src/app/common/files/changes_builder.cljc | 24 ++++++++++++++++
 .../app/common/types/tokens_theme_list.cljc   | 20 +++++++++++++
 frontend/src/app/main/data/tokens.cljs        | 14 ++++++++++
 4 files changed, 86 insertions(+)

diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc
index a486fc950a..0f90faac48 100644
--- a/common/src/app/common/files/changes.cljc
+++ b/common/src/app/common/files/changes.cljc
@@ -249,6 +249,22 @@
       [:type [:= :del-typography]]
       [:id ::sm/uuid]]]
 
+    [:add-token-theme
+     [:map {:title "AddTokenThemeChange"}
+      [:type [:= :add-token-theme]]
+      [:token-theme ::ctot/token-theme]]]
+
+    [:mod-token-theme
+     [:map {:title "ModTokenThemeChange"}
+      [:type [:= :mod-token-theme]]
+      [:id ::sm/uuid]
+      [:token-theme ::ctot/token-theme]]]
+
+    [:del-token-theme
+     [:map {:title "DelTokenThemeChange"}
+      [:type [:= :del-token-theme]]
+      [:id ::sm/uuid]]]
+
     [:add-token-set
      [:map {:title "AddTokenSetChange"}
       [:type [:= :add-token-set]]
@@ -760,6 +776,18 @@
   [data {:keys [id]}]
   (ctol/delete-token data id))
 
+(defmethod process-change :add-token-theme
+  [data {:keys [token-theme]}]
+  (ctotl/add-token-theme data token-theme))
+
+(defmethod process-change :mod-token-theme
+  [data {:keys [id token-theme]}]
+  (ctotl/update-token-theme data id merge token-theme))
+
+(defmethod process-change :del-token-theme
+  [data {:keys [id]}]
+  (ctotl/delete-token-theme data id))
+
 (defmethod process-change :add-token-set
   [data {:keys [token-set]}]
   (ctotl/add-token-set data token-set))
diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index b4486a6d4f..9d1e90a50e 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -695,6 +695,30 @@
         (update :undo-changes conj {:type :add-typography :typography prev-typography})
         (apply-changes-local))))
 
+(defn add-token-theme
+  [changes token-theme]
+  (-> changes
+      (update :redo-changes conj {:type :add-token-theme :token-theme token-theme})
+      (update :undo-changes conj {:type :del-token-theme :id (:id token-theme)})
+      (apply-changes-local)))
+
+(defn update-token-theme
+  [changes token-theme prev-token-theme]
+  (-> changes
+      (update :redo-changes conj {:type :mod-token-theme :id (:id token-theme) :token-theme token-theme})
+      (update :undo-changes conj {:type :mod-token-theme :id (:id token-theme) :token-theme (or prev-token-theme token-theme)})
+      (apply-changes-local)))
+
+(defn delete-token-theme
+  [changes token-theme-id]
+  (assert-library! changes)
+  (let [library-data (::library-data (meta changes))
+        prev-token-theme (get-in library-data [:token-theme token-theme-id])]
+    (-> changes
+        (update :redo-changes conj {:type :del-token-theme :id token-theme-id})
+        (update :undo-changes conj {:type :add-token-theme :token-theme prev-token-theme})
+        (apply-changes-local))))
+
 (defn add-token-set
   [changes token-set]
   (-> changes
diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index f2e6058e24..bcd15bf5a1 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -14,6 +14,26 @@
   [token-set]
   (assoc token-set :modified-at (dt/now)))
 
+(defn add-token-theme
+  [file-data {:keys [index id] :as token-theme}]
+  (-> file-data
+      (update :token-themes
+              (fn [token-themes]
+                (let [exists? (some (partial = id) token-themes)]
+                  (cond
+                    exists?      token-themes
+                    (nil? index) (conj (or token-themes []) id)
+                    :else        (d/insert-at-index token-themes index [id])))))
+      (update :token-themes-index assoc id token-theme)))
+
+(defn update-token-theme
+  [file-data token-theme-id f & args]
+  (d/update-in-when file-data [:token-themes-index token-theme-id] #(-> (apply f % args) (touch))))
+
+(defn delete-token-theme
+  [file-data token-id]
+  file-data)
+
 (defn add-token-set
   [file-data {:keys [index id] :as token-set}]
   (-> file-data
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index fffd64c653..a3608e9346 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -88,6 +88,20 @@
     (update [_ state]
       (wtts/assoc-selected-token-set-id state id))))
 
+(defn create-token-theme [token-theme]
+  (let [new-token-theme (merge
+                         {:id (uuid/next)
+                          :sets #{}
+                          :selected :enabled}
+                         token-theme)]
+    (ptk/reify ::create-token-theme
+      ptk/WatchEvent
+      (watch [it _ _]
+        (let [changes (-> (pcb/empty-changes it)
+                          (pcb/add-token-theme new-token-theme))]
+          (rx/of
+           (dch/commit-changes changes)))))))
+
 (defn create-token-set [token-set]
   (let [new-token-set (merge
                        {:id (uuid/next)

From 8482a128de0f25290767614f2a869094ea1aeb87 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 07:09:17 +0200
Subject: [PATCH 24/75] Fix expeted id instead of set

---
 frontend/src/app/main/ui/workspace/tokens/token_set.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index db3f3c626c..b144c919d0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -14,7 +14,7 @@
 (defn get-workspace-ordered-themes [state]
   (let [themes (get-workspace-themes state)
         themes-index (get-workspace-themes-index state)]
-    (->> (map #(get themes-index (:id %)) themes)
+    (->> (map #(get themes-index %) themes)
          (group-by :group))))
 
 (defn theme-selected? [theme]

From 7406af2e796aa341196974aec5fc259215f12375 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 07:09:59 +0200
Subject: [PATCH 25/75] Add theme creation

---
 frontend/src/app/main/data/tokens.cljs                 |  2 +-
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index a3608e9346..c96f673f30 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -108,7 +108,7 @@
                         :name "Token Set"
                         :tokens []}
                        token-set)]
-    (ptk/reify ::update-create-token
+    (ptk/reify ::create-token-set
       ptk/WatchEvent
       (watch [it _ _]
         (let [changes (-> (pcb/empty-changes it)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 47346e15c4..337781616c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -155,10 +155,14 @@
                    :flex-direction "column"
                    :gap "10px"}}
      [:& labeled-input {:label "Group name"
-                        :input-props {:value @group}}]
+                        :input-props {:value @group
+                                      :on-change #(reset! group (dom/event->value %))}}]
      [:& labeled-input {:label "Theme name"
-                        :input-props {:value @name}}]
-     [:button "Create"]]))
+                        :input-props {:value @name
+                                      :on-change #(reset! name (dom/event->value %))}}]
+     [:button {:on-click #(st/emit! (wdt/create-token-theme {:group @group
+                                                             :name @name}))}
+      "Create"]]))
 
 (mf/defc token-sets
   [_props]

From 4c1bc81b19b8c3c6f7455728ad9dc95fddd71163 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 07:10:08 +0200
Subject: [PATCH 26/75] Add name

---
 common/src/app/common/types/token_theme.cljc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/common/src/app/common/types/token_theme.cljc b/common/src/app/common/types/token_theme.cljc
index 9f898aff7d..9b11dbbc96 100644
--- a/common/src/app/common/types/token_theme.cljc
+++ b/common/src/app/common/types/token_theme.cljc
@@ -11,6 +11,7 @@
 (sm/register! ::token-theme
   [:map {:title "TokenTheme"}
    [:id ::sm/uuid]
+   [:name :string]
    [:group {:optional true} :string]
    [:selected [:enum :enabled :disabled #_:source]]
    [:description {:optional true} :string]

From ae39586d8c6fd8a98600a3a8d9191815571c9bef Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 07:10:15 +0200
Subject: [PATCH 27/75] Add temporary theme

---
 common/src/app/common/types/file.cljc | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index 021d9a09df..0cbf4e8498 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -63,6 +63,8 @@
     [:map-of {:gen/max 5} ::sm/uuid ::media-object]]
    [:plugin-data {:optional true}
     [:map-of {:gen/max 5} :keyword ::ctpg/plugin-data]]
+   [:token-theme-temporary-id {:optional true}
+    ::sm/uuid]
    [:token-themes {:optional true}
     [:vector ::sm/uuid]]
    [:token-themes-index {:optional true}

From 9329513949202ab191212af3a306bd94918158fd Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 08:04:41 +0200
Subject: [PATCH 28/75] Add token set deletion

---
 common/src/app/common/files/changes_builder.cljc   |  2 +-
 common/src/app/common/types/tokens_theme_list.cljc |  7 +++++--
 frontend/src/app/main/data/tokens.cljs             | 10 ++++++++++
 .../src/app/main/ui/workspace/tokens/sidebar.cljs  | 14 ++++++++++++--
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 9d1e90a50e..24fd4d4d25 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -737,7 +737,7 @@
   [changes token-set-id]
   (assert-library! changes)
   (let [library-data (::library-data (meta changes))
-        prev-token-set (get-in library-data [:token-set token-set-id])]
+        prev-token-set (get-in library-data [:token-sets-index token-set-id])]
     (-> changes
         (update :redo-changes conj {:type :del-token-set :id token-set-id})
         (update :undo-changes conj {:type :add-token-set :token-set prev-token-set})
diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index bcd15bf5a1..98c8e5d01f 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -51,5 +51,8 @@
   (d/update-in-when file-data [:token-sets-index token-set-id] #(-> (apply f % args) (touch))))
 
 (defn delete-token-set
-  [file-data token-id]
-  file-data)
+  [file-data token-set-id]
+  (-> file-data
+      (update :token-set-groups (fn [xs] (into [] (remove #(= (:id %) token-set-id) xs))))
+      (update :token-sets-index dissoc token-set-id)
+      (update :token-themes-index (fn [xs] (update-vals xs #(update % :sets disj token-set-id))))))
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index c96f673f30..7b055f73a6 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -116,6 +116,16 @@
           (rx/of
            (dch/commit-changes changes)))))))
 
+(defn delete-token-set [token-set-id]
+  (ptk/reify ::delete-token-set
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [data (get state :workspace-data)
+            changes (-> (pcb/empty-changes it)
+                        (pcb/with-library-data data)
+                        (pcb/delete-token-set token-set-id))]
+        (rx/of (dch/commit-changes changes))))))
+
 (defn update-create-token
   [token]
   (let [token (update token :id #(or % (uuid/next)))]
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 337781616c..976c7f7385 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -197,14 +197,24 @@
       #_[:button "Delete"]]
      [:ul
       {:style {:list-style "disk"
-               :margin-left "20px"}}
+               :margin-left "20px"
+               :display "flex"
+               :flex-direction "column"
+               :gap "10px"}}
       (for [[_ {:keys [id name]}] token-sets]
         [:li {:style {:font-weight (when (= selected-token-set-id id) "bold")}
               :on-click (fn []
                           (st/emit!
                            (wdt/set-selected-token-set-id id)
                            (wtu/update-workspace-tokens)))}
-         name])]
+         [:div {:style {:display "flex"
+                        :justify-content "space-between"}}
+          name
+          [:button {:on-click (fn [e]
+                                (dom/prevent-default e)
+                                (dom/stop-propagation e)
+                                (st/emit! (wdt/delete-token-set id)))}
+           "Delete"]]])]
      [:hr]]))
 
 (mf/defc tokens-explorer

From 879ef1123f18e61d80405143c70681b55dde2a67 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 10:32:59 +0200
Subject: [PATCH 29/75] Create temporary theme when creating set

---
 common/src/app/common/files/changes.cljc      | 18 +++++++++++
 .../src/app/common/files/changes_builder.cljc |  7 ++++
 common/src/app/common/types/file.cljc         |  3 ++
 common/src/app/common/types/token_theme.cljc  |  2 +-
 .../app/common/types/tokens_theme_list.cljc   | 13 ++++++++
 frontend/src/app/main/data/tokens.cljs        | 32 +++++++++++++------
 .../main/ui/workspace/tokens/token_set.cljs   | 22 +++++++++++--
 7 files changed, 85 insertions(+), 12 deletions(-)

diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc
index 0f90faac48..e1023197b1 100644
--- a/common/src/app/common/files/changes.cljc
+++ b/common/src/app/common/files/changes.cljc
@@ -249,6 +249,16 @@
       [:type [:= :del-typography]]
       [:id ::sm/uuid]]]
 
+    [:add-temporary-token-theme
+     [:map {:title "AddTemporaryTokenThemeChange"}
+      [:type [:= :add-temporary-token-theme]]
+      [:token-theme ::ctot/token-theme]]]
+
+    [:delete-temporary-token-theme
+     [:map {:title "DeleteTemporaryTokenThemeChange"}
+      [:type [:= :delete-temporary-token-theme]]
+      [:id ::sm/uuid]]]
+
     [:add-token-theme
      [:map {:title "AddTokenThemeChange"}
       [:type [:= :add-token-theme]]
@@ -776,6 +786,14 @@
   [data {:keys [id]}]
   (ctol/delete-token data id))
 
+(defmethod process-change :add-temporary-token-theme
+  [data {:keys [token-theme]}]
+  (ctotl/add-temporary-token-theme data token-theme))
+
+(defmethod process-change :delete-temporary-token-theme
+  [data {:keys [id]}]
+  (ctotl/delete-temporary-token-theme data id))
+
 (defmethod process-change :add-token-theme
   [data {:keys [token-theme]}]
   (ctotl/add-token-theme data token-theme))
diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 24fd4d4d25..7b7f1fc511 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -695,6 +695,13 @@
         (update :undo-changes conj {:type :add-typography :typography prev-typography})
         (apply-changes-local))))
 
+(defn add-temporary-token-theme
+  [changes token-theme]
+  (-> changes
+      (update :redo-changes conj {:type :add-temporary-token-theme :token-theme token-theme})
+      (update :undo-changes conj {:type :delete-temporary-token-theme :id (:id token-theme)})
+      (apply-changes-local)))
+
 (defn add-token-theme
   [changes token-theme]
   (-> changes
diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index 0cbf4e8498..bd5237af17 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -65,6 +65,9 @@
     [:map-of {:gen/max 5} :keyword ::ctpg/plugin-data]]
    [:token-theme-temporary-id {:optional true}
     ::sm/uuid]
+   [:token-active-themes {:optional true
+                          :default #{}}
+    [:set ::sm/uuid]]
    [:token-themes {:optional true}
     [:vector ::sm/uuid]]
    [:token-themes-index {:optional true}
diff --git a/common/src/app/common/types/token_theme.cljc b/common/src/app/common/types/token_theme.cljc
index 9b11dbbc96..d76f1e277d 100644
--- a/common/src/app/common/types/token_theme.cljc
+++ b/common/src/app/common/types/token_theme.cljc
@@ -13,7 +13,7 @@
    [:id ::sm/uuid]
    [:name :string]
    [:group {:optional true} :string]
-   [:selected [:enum :enabled :disabled #_:source]]
+   [:source? {:optional true} :boolean]
    [:description {:optional true} :string]
    [:modified-at {:optional true} ::sm/inst]
    [:sets [:set {:gen/max 10 :gen/min 1} ::sm/uuid]]])
diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index 98c8e5d01f..aa26ac2076 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -14,6 +14,19 @@
   [token-set]
   (assoc token-set :modified-at (dt/now)))
 
+(defn add-temporary-token-theme
+  [file-data {:keys [id] :as token-theme}]
+  (-> file-data
+      (d/dissoc-in [:token-themes-index (:token-theme-temporary-id file-data)])
+      (assoc :token-theme-temporary-id id)
+      (update :token-themes-index assoc id token-theme)))
+
+(defn delete-temporary-token-theme
+  [file-data token-theme-id]
+  (cond-> file-data
+    (= (:token-theme-temporary-id file-data) token-theme-id) (dissoc :token-theme-temporary-id)
+    :always (d/dissoc-in [:token-themes-index (:token-theme-temporary-id file-data)])))
+
 (defn add-token-theme
   [file-data {:keys [index id] :as token-theme}]
   (-> file-data
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 7b055f73a6..4b6b04f37e 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -147,17 +147,31 @@
               selected-token-set-id (if create-set?
                                       (:id new-token-set)
                                       (:id token-set))
-              changes (cond
-                        create-set? (-> token-changes
-                                        (pcb/add-token-set new-token-set))
-                        :else (let [updated-token-set (if (contains? token-set (:id token))
-                                                        token-set
-                                                        (update token-set :tokens conj (:id token)))]
-                                (-> token-changes
-                                    (pcb/update-token-set updated-token-set token-set))))]
+              set-changes (cond
+                            create-set? (-> token-changes
+                                            (pcb/add-token-set new-token-set))
+                            :else (let [updated-token-set (if (contains? token-set (:id token))
+                                                            token-set
+                                                            (update token-set :tokens conj (:id token)))]
+                                    (-> token-changes
+                                        (pcb/update-token-set updated-token-set token-set))))
+              theme-id (wtts/update-theme-id state)
+              theme (some-> theme-id (wtts/get-workspace-token-theme state))
+              theme-changes (cond
+                              (not theme-id) (-> set-changes
+                                                 (pcb/add-temporary-token-theme
+
+                                                  {:id (uuid/next)
+                                                   :name ""
+                                                   :sets #{selected-token-set-id}}))
+                              create-set? (-> set-changes
+                                              (pcb/update-token-theme
+                                               (wtts/add-token-set-to-token-theme selected-token-set-id theme)
+                                               theme))
+                              :else set-changes)]
           (rx/of
            (set-selected-token-set-id selected-token-set-id)
-           (dch/commit-changes changes)))))))
+           (dch/commit-changes theme-changes)))))))
 
 (defn delete-token
   [id]
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index b144c919d0..0681e078b6 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -17,8 +17,26 @@
     (->> (map #(get themes-index %) themes)
          (group-by :group))))
 
-(defn theme-selected? [theme]
-  (= :enabled (:selected theme)))
+(defn get-active-theme-ids [state]
+  (:token-active-themes state))
+
+(defn get-temp-theme-id [state]
+  (:token-theme-temporary-id state))
+
+(defn update-theme-id
+  [state]
+  (let [active-themes (get-active-theme-ids state)
+        temporary-theme-id (get-temp-theme-id state)]
+    (cond
+      (empty? active-themes) temporary-theme-id
+      (= 1 (count active-themes)) (first active-themes)
+      :else temporary-theme-id)))
+
+(defn get-workspace-token-theme [id state]
+  (get-in state (get-in state [:workspace-data :token-sets-index id])))
+
+(defn add-token-set-to-token-theme [token-set-id token-theme]
+  (update token-theme :sets conj token-set-id))
 
  ;; Sets ------------------------------------------------------------------------
 

From 3e41e7d2343227f5b67c29feb1c98af6d0224121 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 11:32:20 +0200
Subject: [PATCH 30/75] Fix workspace-data key missing

---
 frontend/src/app/main/ui/workspace/tokens/token_set.cljs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 0681e078b6..013fd25860 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -18,10 +18,10 @@
          (group-by :group))))
 
 (defn get-active-theme-ids [state]
-  (:token-active-themes state))
+  (get-in state [:workspace-data :token-active-themes]))
 
 (defn get-temp-theme-id [state]
-  (:token-theme-temporary-id state))
+  (get-in state [:workspace-data :token-theme-temporary-id]))
 
 (defn update-theme-id
   [state]
@@ -33,7 +33,7 @@
       :else temporary-theme-id)))
 
 (defn get-workspace-token-theme [id state]
-  (get-in state (get-in state [:workspace-data :token-sets-index id])))
+  (get-in state [:workspace-data :token-themes-index id]))
 
 (defn add-token-set-to-token-theme [token-set-id token-theme]
   (update token-theme :sets conj token-set-id))

From 0f95ddef8fd5ec8d51b864b5f3ef02a3e106afa5 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 11:32:36 +0200
Subject: [PATCH 31/75] Add new sets to active theme

---
 frontend/src/app/main/data/tokens.cljs | 39 +++++++++++++++-----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 4b6b04f37e..9954bf1834 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -102,6 +102,22 @@
           (rx/of
            (dch/commit-changes changes)))))))
 
+(defn ensure-token-theme-changes [changes state {:keys [id new-set?]}]
+  (let [theme-id (wtts/update-theme-id state)
+        theme (some-> theme-id (wtts/get-workspace-token-theme state))]
+    (cond
+     (not theme-id) (-> changes
+                        (pcb/add-temporary-token-theme
+
+                         {:id (uuid/next)
+                          :name ""
+                          :sets #{id}}))
+     new-set? (-> changes
+                  (pcb/update-token-theme
+                   (wtts/add-token-set-to-token-theme id theme)
+                   theme))
+     :else changes)))
+
 (defn create-token-set [token-set]
   (let [new-token-set (merge
                        {:id (uuid/next)
@@ -110,9 +126,11 @@
                        token-set)]
     (ptk/reify ::create-token-set
       ptk/WatchEvent
-      (watch [it _ _]
+      (watch [it state _]
         (let [changes (-> (pcb/empty-changes it)
-                          (pcb/add-token-set new-token-set))]
+                          (pcb/add-token-set new-token-set)
+                          (ensure-token-theme-changes state {:id (:id new-token-set)
+                                                             :new-set? true}))]
           (rx/of
            (dch/commit-changes changes)))))))
 
@@ -155,20 +173,9 @@
                                                             (update token-set :tokens conj (:id token)))]
                                     (-> token-changes
                                         (pcb/update-token-set updated-token-set token-set))))
-              theme-id (wtts/update-theme-id state)
-              theme (some-> theme-id (wtts/get-workspace-token-theme state))
-              theme-changes (cond
-                              (not theme-id) (-> set-changes
-                                                 (pcb/add-temporary-token-theme
-
-                                                  {:id (uuid/next)
-                                                   :name ""
-                                                   :sets #{selected-token-set-id}}))
-                              create-set? (-> set-changes
-                                              (pcb/update-token-theme
-                                               (wtts/add-token-set-to-token-theme selected-token-set-id theme)
-                                               theme))
-                              :else set-changes)]
+              theme-changes (-> set-changes
+                                (ensure-token-theme-changes state {:new-set? create-set?
+                                                                   :set-id selected-token-set-id}))]
           (rx/of
            (set-selected-token-set-id selected-token-set-id)
            (dch/commit-changes theme-changes)))))))

From c2a045ad5b9227fc124ec9da5185668bd190684f Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 11:44:41 +0200
Subject: [PATCH 32/75] Add selected sets UI

---
 frontend/src/app/main/refs.cljs               |  6 +++++
 .../app/main/ui/workspace/tokens/sidebar.cljs | 25 +++++++++++++------
 .../main/ui/workspace/tokens/token_set.cljs   |  3 +++
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 539570c5e2..2fb8799d11 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -240,6 +240,12 @@
    st/state
    =))
 
+(def workspace-active-theme-id
+  (l/derived wtts/update-theme-id st/state))
+
+(def workspace-token-themes
+  (l/derived wtts/get-workspace-themes-index st/state))
+
 (def workspace-ordered-token-themes
   (l/derived wtts/get-workspace-ordered-themes st/state))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 976c7f7385..c341a0e1a5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -21,6 +21,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-set :as wtts]
    [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
@@ -166,15 +167,19 @@
 
 (mf/defc token-sets
   [_props]
-  (let [themes (mf/deref refs/workspace-ordered-token-themes)
+  (let [selected-theme-id (mf/deref refs/workspace-active-theme-id)
+        themes (mf/deref refs/workspace-ordered-token-themes)
+        themes-index (mf/deref refs/workspace-token-themes)
+        selected-theme (get themes-index selected-theme-id)
         selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
         token-sets (mf/deref refs/workspace-token-sets)]
+    (js/console.log "selected-theme" selected-theme)
     [:div
      {:style {:display "flex"
               :flex-direction "column"
               :gap "10px"}}
 
-     "Themes"
+     (str "Themes (selected: " selected-theme-id ")")
      [:div
       [:ul {:style {:list-style "disk"}}
        [:& tokene-theme-create]
@@ -210,11 +215,17 @@
          [:div {:style {:display "flex"
                         :justify-content "space-between"}}
           name
-          [:button {:on-click (fn [e]
-                                (dom/prevent-default e)
-                                (dom/stop-propagation e)
-                                (st/emit! (wdt/delete-token-set id)))}
-           "Delete"]]])]
+          [:div {:style {:display "flex"
+                         :gap "5px"}}
+           [:button
+            (if (wtts/token-set-enabled-in-theme? id selected-theme)
+              "👁️"
+              " ")]
+           [:button {:on-click (fn [e]
+                                 (dom/prevent-default e)
+                                 (dom/stop-propagation e)
+                                 (st/emit! (wdt/delete-token-set id)))}
+            "🗑️"]]]])]
      [:hr]]))
 
 (mf/defc tokens-explorer
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 013fd25860..1ffb3288e1 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -38,6 +38,9 @@
 (defn add-token-set-to-token-theme [token-set-id token-theme]
   (update token-theme :sets conj token-set-id))
 
+(defn token-set-enabled-in-theme? [set-id theme]
+  (some? (get-in theme [:sets set-id])))
+
  ;; Sets ------------------------------------------------------------------------
 
 (defn get-workspace-tokens [state]

From 636c3b822cca5bf0ebe15c1460452cbaf24a1547 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 12:22:57 +0200
Subject: [PATCH 33/75] Example styling

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c341a0e1a5..6a9f3107a2 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -177,7 +177,11 @@
     [:div
      {:style {:display "flex"
               :flex-direction "column"
-              :gap "10px"}}
+              :gap "10px"
+              :max-height "350px"
+              :overflow "auto"
+              :border-bottom "2px solid grey"
+              :padding "10px"}}
 
      (str "Themes (selected: " selected-theme-id ")")
      [:div

From 6a7ced3204785426f9ba7951d0223d61e4722bf0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 13:36:54 +0200
Subject: [PATCH 34/75] Add token set visibility toggle

---
 frontend/src/app/main/data/tokens.cljs               | 12 ++++++++++++
 .../src/app/main/ui/workspace/tokens/sidebar.cljs    |  9 +++++++--
 .../src/app/main/ui/workspace/tokens/token_set.cljs  |  5 +++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 9954bf1834..6c000e4b33 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -134,6 +134,18 @@
           (rx/of
            (dch/commit-changes changes)))))))
 
+(defn toggle-token-set [token-set-id]
+  (ptk/reify ::toggle-token-set
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [theme (some-> (wtts/update-theme-id state)
+                          (wtts/get-workspace-token-theme state))
+            changes (-> (pcb/empty-changes it)
+                        (pcb/update-token-theme
+                         (wtts/toggle-token-set-to-token-theme token-set-id theme)
+                         theme))]
+        (rx/of (dch/commit-changes changes))))))
+
 (defn delete-token-set [token-set-id]
   (ptk/reify ::delete-token-set
     ptk/WatchEvent
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 6a9f3107a2..0bfd0b4910 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -178,10 +178,11 @@
      {:style {:display "flex"
               :flex-direction "column"
               :gap "10px"
-              :max-height "350px"
+              :max-height "60vh"
               :overflow "auto"
               :border-bottom "2px solid grey"
-              :padding "10px"}}
+              :padding "10px"
+              :margin-bottom "50px"}}
 
      (str "Themes (selected: " selected-theme-id ")")
      [:div
@@ -222,6 +223,10 @@
           [:div {:style {:display "flex"
                          :gap "5px"}}
            [:button
+            {:on-click (fn [e]
+                         (dom/prevent-default e)
+                         (dom/stop-propagation e)
+                         (st/emit! (wdt/toggle-token-set id)))}
             (if (wtts/token-set-enabled-in-theme? id selected-theme)
               "👁️"
               " ")]
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 1ffb3288e1..5a9c737644 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -38,6 +38,11 @@
 (defn add-token-set-to-token-theme [token-set-id token-theme]
   (update token-theme :sets conj token-set-id))
 
+(defn toggle-token-set-to-token-theme [token-set-id token-theme]
+  (update token-theme :sets #(if (get % token-set-id)
+                               (disj % token-set-id)
+                               (conj % token-set-id))))
+
 (defn token-set-enabled-in-theme? [set-id theme]
   (some? (get-in theme [:sets set-id])))
 

From 62712ef8dae6fea768b8e500dd232a4f5850b08c Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 13:59:18 +0200
Subject: [PATCH 35/75] Cleanup styles

---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 98 +++++++++----------
 1 file changed, 45 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 0bfd0b4910..4176b6ad8b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -173,69 +173,61 @@
         selected-theme (get themes-index selected-theme-id)
         selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
         token-sets (mf/deref refs/workspace-token-sets)]
-    (js/console.log "selected-theme" selected-theme)
     [:div
-     {:style {:display "flex"
-              :flex-direction "column"
-              :gap "10px"
-              :max-height "60vh"
-              :overflow "auto"
-              :border-bottom "2px solid grey"
-              :padding "10px"
-              :margin-bottom "50px"}}
+     [:style
+      (str "@scope {"
+           (str/join "\n"
+                     ["ul { list-style-type: disk; margin-left: 20px; }"
+                      ".spaced { display: flex; gap: 10px; justify-content: space-between;  }"
+                      ".spaced-y { display: flex; flex-direction: column; gap: 10px }"
+                      ".selected { font-weight: 600; }"
+                      "b { font-weight: 600; }"])
+           "}")]
+     [:div.spaced-y
+      {:style {:max-height "60vh"
+               :overflow "auto"
+               :border-bottom "2px solid grey"
+               :padding "10px"
+               :margin-bottom "50px"}}
 
-     (str "Themes (selected: " selected-theme-id ")")
-     [:div
-      [:ul {:style {:list-style "disk"}}
+      [:ul
        [:& tokene-theme-create]
        (for [[group themes] themes]
          [:li
           {:key (str "token-theme-group" group)}
           group
-          #_[:ul {:style {:list-style "disk"
-                          :margin-left "20px"}}
+          #_[:ul
              (for [{:keys [id] :as theme} themes]
                [:li {:key (str "tokene-theme-" id)}
                 [:input {:type "checkbox"
-                         :checked (wtts/theme-selected? theme)}]])]])]]
-     "Sets"
-     [:div
-      {:style {:display "flex" :gap "10px"}}
-      [:button
-       {:on-click #(st/emit! (wdt/create-token-set nil))}
-       "Create"]
-      #_[:button "Delete"]]
-     [:ul
-      {:style {:list-style "disk"
-               :margin-left "20px"
-               :display "flex"
-               :flex-direction "column"
-               :gap "10px"}}
-      (for [[_ {:keys [id name]}] token-sets]
-        [:li {:style {:font-weight (when (= selected-token-set-id id) "bold")}
-              :on-click (fn []
-                          (st/emit!
-                           (wdt/set-selected-token-set-id id)
-                           (wtu/update-workspace-tokens)))}
-         [:div {:style {:display "flex"
-                        :justify-content "space-between"}}
-          name
-          [:div {:style {:display "flex"
-                         :gap "5px"}}
-           [:button
-            {:on-click (fn [e]
-                         (dom/prevent-default e)
-                         (dom/stop-propagation e)
-                         (st/emit! (wdt/toggle-token-set id)))}
-            (if (wtts/token-set-enabled-in-theme? id selected-theme)
-              "👁️"
-              " ")]
-           [:button {:on-click (fn [e]
-                                 (dom/prevent-default e)
-                                 (dom/stop-propagation e)
-                                 (st/emit! (wdt/delete-token-set id)))}
-            "🗑️"]]]])]
-     [:hr]]))
+                         :checked (wtts/theme-selected? theme)}]])]])]
+      [:div.spaced
+       [:b "Sets"]
+       [:button {:on-click #(st/emit! (wdt/create-token-set nil))} "Create"]]
+      [:ul.spaced-y
+       (for [[_ {:keys [id name]}] token-sets]
+         [:li {:class [(when (= selected-token-set-id id) "selected")]
+               :on-click (fn []
+                           (st/emit!
+                            (wdt/set-selected-token-set-id id)
+                            (wtu/update-workspace-tokens)))}
+          [:div.spaced
+           name
+           [:div.spaced
+            [:button
+             {:on-click (fn [e]
+                          (dom/prevent-default e)
+                          (dom/stop-propagation e)
+                          (st/emit! (wdt/toggle-token-set id)))}
+             (if (wtts/token-set-enabled-in-theme? id selected-theme)
+               "👁️"
+               "")]
+            [:button {:on-click (fn [e]
+                                  (dom/prevent-default e)
+                                  (dom/stop-propagation e)
+                                  (st/emit! (wdt/delete-token-set id)))}
+             "🗑️"]]]])]
+      [:hr]]]))
 
 (mf/defc tokens-explorer
   [_props]

From e502def7553b03fe4c26db71ec77e743ff95aed9 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 14:21:25 +0200
Subject: [PATCH 36/75] Show themes

---
 frontend/src/app/main/refs.cljs               |  3 ++
 .../app/main/ui/workspace/tokens/sidebar.cljs | 44 ++++++++++++-------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 2fb8799d11..77a5e94903 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -240,6 +240,9 @@
    st/state
    =))
 
+(def workspace-active-theme-ids
+  (l/derived wtts/get-active-theme-ids st/state))
+
 (def workspace-active-theme-id
   (l/derived wtts/update-theme-id st/state))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 4176b6ad8b..c2e98f0e64 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -167,7 +167,8 @@
 
 (mf/defc token-sets
   [_props]
-  (let [selected-theme-id (mf/deref refs/workspace-active-theme-id)
+  (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
+        selected-theme-id (mf/deref refs/workspace-active-theme-id)
         themes (mf/deref refs/workspace-ordered-token-themes)
         themes-index (mf/deref refs/workspace-token-themes)
         selected-theme (get themes-index selected-theme-id)
@@ -177,7 +178,7 @@
      [:style
       (str "@scope {"
            (str/join "\n"
-                     ["ul { list-style-type: disk; margin-left: 20px; }"
+                     ["ul { list-style-type: circle; margin-left: 20px; }"
                       ".spaced { display: flex; gap: 10px; justify-content: space-between;  }"
                       ".spaced-y { display: flex; flex-direction: column; gap: 10px }"
                       ".selected { font-weight: 600; }"
@@ -190,17 +191,30 @@
                :padding "10px"
                :margin-bottom "50px"}}
 
-      [:ul
-       [:& tokene-theme-create]
-       (for [[group themes] themes]
-         [:li
-          {:key (str "token-theme-group" group)}
-          group
-          #_[:ul
-             (for [{:keys [id] :as theme} themes]
-               [:li {:key (str "tokene-theme-" id)}
-                [:input {:type "checkbox"
-                         :checked (wtts/theme-selected? theme)}]])]])]
+      [:& tokene-theme-create]
+      [:div.spaced-y
+       [:b "Themes"]
+       [:ul
+        (for [[group themes] themes]
+          [:li
+           {:key (str "token-theme-group" group)}
+           group
+           [:ul
+            (for [{:keys [id name] :as theme} themes]
+              [:li {:key (str "tokene-theme-" id)}
+               [:div.spaced
+                name
+                [:div.spaced
+                 [:button
+                  {:on-click (fn [e]
+                               (dom/prevent-default e)
+                               (dom/stop-propagation e))}
+                  (if (some-> active-theme-ids (get id)) "✅" "❎")]
+                 [:button {:on-click (fn [e]
+                                       (dom/prevent-default e)
+                                       (dom/stop-propagation e)
+                                       (st/emit! (wdt/delete-token-set id)))}
+                  "🗑️"]]]])]])]]
       [:div.spaced
        [:b "Sets"]
        [:button {:on-click #(st/emit! (wdt/create-token-set nil))} "Create"]]
@@ -219,9 +233,7 @@
                           (dom/prevent-default e)
                           (dom/stop-propagation e)
                           (st/emit! (wdt/toggle-token-set id)))}
-             (if (wtts/token-set-enabled-in-theme? id selected-theme)
-               "👁️"
-               "")]
+             (when (wtts/token-set-enabled-in-theme? id selected-theme) "👁️")]
             [:button {:on-click (fn [e]
                                   (dom/prevent-default e)
                                   (dom/stop-propagation e)

From ae1c30ad562a59a5f23b192b39531d0b60f5293f Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 16 Aug 2024 14:22:56 +0200
Subject: [PATCH 37/75] Allow providing set name

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c2e98f0e64..7a4a477742 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -217,7 +217,7 @@
                   "🗑️"]]]])]])]]
       [:div.spaced
        [:b "Sets"]
-       [:button {:on-click #(st/emit! (wdt/create-token-set nil))} "Create"]]
+       [:button {:on-click #(st/emit! (wdt/create-token-set {:name (js/window.prompt "Set name")}))} "Create"]]
       [:ul.spaced-y
        (for [[_ {:keys [id name]}] token-sets]
          [:li {:class [(when (= selected-token-set-id id) "selected")]

From f0e0e9334e05b65e5fed77ff73b44c3cf7ee79a3 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 07:29:20 +0200
Subject: [PATCH 38/75] Cleanup

---
 frontend/src/app/main/ui/workspace/tokens/update.cljs | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/update.cljs b/frontend/src/app/main/ui/workspace/tokens/update.cljs
index ab723fd554..82decf153f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/update.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/update.cljs
@@ -127,7 +127,5 @@
           (let [undo-id (js/Symbol)]
             (rx/concat
              (rx/of (dwu/start-undo-transaction undo-id))
-             (rx/concat
-              (->> (update-tokens sd-tokens)
-                   (rx/concat)))
+             (update-tokens sd-tokens)
              (rx/of (dwu/commit-undo-transaction undo-id))))))))))

From 9a745ea8bcec458ed7ea65e47d04cbbb09589fe0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 08:05:19 +0200
Subject: [PATCH 39/75] Add active theme toggling

---
 common/src/app/common/files/changes.cljc            |  9 +++++++++
 common/src/app/common/files/changes_builder.cljc    |  7 +++++++
 common/src/app/common/types/file.cljc               |  3 +--
 common/src/app/common/types/tokens_theme_list.cljc  |  4 ++++
 frontend/src/app/main/data/tokens.cljs              | 10 ++++++++++
 .../src/app/main/ui/workspace/tokens/sidebar.cljs   |  5 +++--
 .../src/app/main/ui/workspace/tokens/token_set.cljs | 13 ++++++++++++-
 7 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc
index e1023197b1..d8c05619a7 100644
--- a/common/src/app/common/files/changes.cljc
+++ b/common/src/app/common/files/changes.cljc
@@ -254,6 +254,11 @@
       [:type [:= :add-temporary-token-theme]]
       [:token-theme ::ctot/token-theme]]]
 
+    [:update-active-token-themes
+     [:map {:title "UpdateActiveTokenThemes"}
+      [:type [:= :update-active-token-themes]]
+      [:theme-ids [:set ::sm/uuid]]]]
+
     [:delete-temporary-token-theme
      [:map {:title "DeleteTemporaryTokenThemeChange"}
       [:type [:= :delete-temporary-token-theme]]
@@ -790,6 +795,10 @@
   [data {:keys [token-theme]}]
   (ctotl/add-temporary-token-theme data token-theme))
 
+(defmethod process-change :update-active-token-themes
+  [data {:keys [theme-ids]}]
+  (ctotl/assoc-active-token-themes data theme-ids))
+
 (defmethod process-change :delete-temporary-token-theme
   [data {:keys [id]}]
   (ctotl/delete-temporary-token-theme data id))
diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 7b7f1fc511..49eb98ade4 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -702,6 +702,13 @@
       (update :undo-changes conj {:type :delete-temporary-token-theme :id (:id token-theme)})
       (apply-changes-local)))
 
+(defn update-active-token-themes
+  [changes token-active-theme-ids prev-token-active-theme-ids]
+  (-> changes
+      (update :redo-changes conj {:type :update-active-token-themes :theme-ids token-active-theme-ids})
+      (update :undo-changes conj {:type :update-active-token-themes :theme-ids prev-token-active-theme-ids})
+      (apply-changes-local)))
+
 (defn add-token-theme
   [changes token-theme]
   (-> changes
diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index bd5237af17..593ec5d2da 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -65,8 +65,7 @@
     [:map-of {:gen/max 5} :keyword ::ctpg/plugin-data]]
    [:token-theme-temporary-id {:optional true}
     ::sm/uuid]
-   [:token-active-themes {:optional true
-                          :default #{}}
+   [:token-active-themes {:optional true :default #{}}
     [:set ::sm/uuid]]
    [:token-themes {:optional true}
     [:vector ::sm/uuid]]
diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index aa26ac2076..4cf43d6228 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -14,6 +14,10 @@
   [token-set]
   (assoc token-set :modified-at (dt/now)))
 
+(defn assoc-active-token-themes
+  [file-data theme-ids]
+  (assoc file-data :token-active-themes theme-ids))
+
 (defn add-temporary-token-theme
   [file-data {:keys [id] :as token-theme}]
   (-> file-data
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 6c000e4b33..6a2f972bc6 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -118,6 +118,16 @@
                    theme))
      :else changes)))
 
+(defn toggle-token-theme [token-theme-id]
+  (ptk/reify ::toggle-token-theme
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [themes (wtts/get-active-theme-ids state)
+            new-themes (wtts/toggle-active-theme-id token-theme-id state)
+            changes (-> (pcb/empty-changes it)
+                        (pcb/update-active-token-themes new-themes themes))]
+        (rx/of (dch/commit-changes changes))))))
+
 (defn create-token-set [token-set]
   (let [new-token-set (merge
                        {:id (uuid/next)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 7a4a477742..58e2dfda80 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -208,8 +208,9 @@
                  [:button
                   {:on-click (fn [e]
                                (dom/prevent-default e)
-                               (dom/stop-propagation e))}
-                  (if (some-> active-theme-ids (get id)) "✅" "❎")]
+                               (dom/stop-propagation e)
+                               (st/emit! (wdt/toggle-token-theme id)))}
+                  (if (get active-theme-ids id) "✅" "❎")]
                  [:button {:on-click (fn [e]
                                        (dom/prevent-default e)
                                        (dom/stop-propagation e)
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 5a9c737644..3c47e0ab52 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -18,11 +18,22 @@
          (group-by :group))))
 
 (defn get-active-theme-ids [state]
-  (get-in state [:workspace-data :token-active-themes]))
+  (get-in state [:workspace-data :token-active-themes] #{}))
 
 (defn get-temp-theme-id [state]
   (get-in state [:workspace-data :token-theme-temporary-id]))
 
+(defn toggle-active-theme-id [theme-id state]
+  (let [temp-theme-id (get-temp-theme-id state)
+        themes (get-active-theme-ids state)
+        theme-without-temp (disj themes temp-theme-id)
+        new-themes (if (get theme-without-temp theme-id)
+                     (disj theme-without-temp theme-id)
+                     (conj theme-without-temp theme-id))]
+    (if (empty? new-themes)
+      #{temp-theme-id}
+      new-themes)))
+
 (defn update-theme-id
   [state]
   (let [active-themes (get-active-theme-ids state)

From e8bbb75008a01bf923b4a35c783ba83ef6fafb30 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 08:49:03 +0200
Subject: [PATCH 40/75] Implement group theme switching

---
 .../main/ui/workspace/tokens/token_set.cljs   | 51 ++++++++++++++++---
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 3c47e0ab52..bf1b16574a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -1,4 +1,6 @@
-(ns app.main.ui.workspace.tokens.token-set)
+(ns app.main.ui.workspace.tokens.token-set
+  (:require
+    [clojure.set :as set]))
 
 ;; Themes ----------------------------------------------------------------------
 
@@ -23,17 +25,50 @@
 (defn get-temp-theme-id [state]
   (get-in state [:workspace-data :token-theme-temporary-id]))
 
+(defn theme-ids-with-group [theme-id state]
+  (let [themes (get-workspace-themes-index state)
+        theme-group (get-in themes [theme-id :group])
+        same-group-theme-ids (->> themes
+                                  (eduction
+                                   (map val)
+                                   (filter #(= (:group %) theme-group))
+                                   (map :id))
+                                  (into #{}))]
+    same-group-theme-ids))
+
 (defn toggle-active-theme-id [theme-id state]
-  (let [temp-theme-id (get-temp-theme-id state)
-        themes (get-active-theme-ids state)
-        theme-without-temp (disj themes temp-theme-id)
-        new-themes (if (get theme-without-temp theme-id)
-                     (disj theme-without-temp theme-id)
-                     (conj theme-without-temp theme-id))]
+  (let [temp-theme-id-set (some->> (get-temp-theme-id state) (conj #{}))
+        active-theme-ids (get-active-theme-ids state)
+        add? (not (get active-theme-ids theme-id))
+        ;; Deactivate themes with the same group when activating a theme
+        same-group-ids (when add? (theme-ids-with-group theme-id state))
+        theme-ids-without-same-group (set/difference active-theme-ids
+                                                     same-group-ids
+                                                     temp-theme-id-set)
+        new-themes (if add?
+                     (conj theme-ids-without-same-group theme-id)
+                     (disj theme-ids-without-same-group theme-id))]
     (if (empty? new-themes)
-      #{temp-theme-id}
+      (or temp-theme-id-set #{})
       new-themes)))
 
+(comment
+  (let [state {:workspace-data {:token-themes-index {1 {:id 1}}}}]
+    (toggle-active-theme-id 1 state))
+
+  (let [state {:workspace-data {:token-active-themes #{1}
+                                :token-themes-index {1 {:id 1}}}}]
+    (toggle-active-theme-id 1 state))
+
+  (let [state {:workspace-data {:token-active-themes #{2 3 4}
+                                :token-themes-index {1 {:id 1}
+                                                     2 {:id 2}
+                                                     3 {:id 3}
+                                                     4 {:id 4 :group :different}}}}]
+    (toggle-active-theme-id 1 state))
+  nil)
+
+
 (defn update-theme-id
   [state]
   (let [active-themes (get-active-theme-ids state)

From 93a23c66ecdae67cb4a38a5f0fa0b7bc765fad9e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 09:01:08 +0200
Subject: [PATCH 41/75] Docstrings

---
 .../src/app/main/ui/workspace/tokens/token_set.cljs   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index bf1b16574a..e44c3da6a3 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -25,7 +25,10 @@
 (defn get-temp-theme-id [state]
   (get-in state [:workspace-data :token-theme-temporary-id]))
 
-(defn theme-ids-with-group [theme-id state]
+(defn theme-ids-with-group
+  "Returns set of theme-ids that share the same `:group` property as the theme with `theme-id`.
+  Will also return matching theme-ids without a `:group` property."
+  [theme-id state]
   (let [themes (get-workspace-themes-index state)
         theme-group (get-in themes [theme-id :group])
         same-group-theme-ids (->> themes
@@ -36,7 +39,11 @@
                                   (into #{}))]
     same-group-theme-ids))
 
-(defn toggle-active-theme-id [theme-id state]
+(defn toggle-active-theme-id
+  "Toggle a `theme-id` by checking `:token-active-themes`.
+  De-activate all theme-ids that have the same group as `theme-id` when activating `theme-id`.
+  Ensures that the temporary theme id is selected when the resulting set is empty."
+  [theme-id state]
   (let [temp-theme-id-set (some->> (get-temp-theme-id state) (conj #{}))
         active-theme-ids (get-active-theme-ids state)
         add? (not (get active-theme-ids theme-id))

From 3413d4b42f8dc3c054545cd90d7ffed9fcf4ca91 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 09:09:09 +0200
Subject: [PATCH 42/75] Add tests

---
 .../main/ui/workspace/tokens/token_set.cljs   | 17 ---------
 frontend/test/token_tests/token_set_test.cljs | 37 +++++++++++++++++++
 2 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 frontend/test/token_tests/token_set_test.cljs

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index e44c3da6a3..7d7a432b82 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -59,23 +59,6 @@
       (or temp-theme-id-set #{})
       new-themes)))
 
-(comment
-  (let [state {:workspace-data {:token-themes-index {1 {:id 1}}}}]
-    (toggle-active-theme-id 1 state))
-
-  (let [state {:workspace-data {:token-active-themes #{1}
-                                :token-themes-index {1 {:id 1}}}}]
-    (toggle-active-theme-id 1 state))
-
-  (let [state {:workspace-data {:token-active-themes #{2 3 4}
-                                :token-themes-index {1 {:id 1}
-                                                     2 {:id 2}
-                                                     3 {:id 3}
-                                                     4 {:id 4 :group :different}}}}]
-    (toggle-active-theme-id 1 state))
-  nil)
-
-
 (defn update-theme-id
   [state]
   (let [active-themes (get-active-theme-ids state)
diff --git a/frontend/test/token_tests/token_set_test.cljs b/frontend/test/token_tests/token_set_test.cljs
new file mode 100644
index 0000000000..d199e221cf
--- /dev/null
+++ b/frontend/test/token_tests/token_set_test.cljs
@@ -0,0 +1,37 @@
+(ns token-tests.token-set-test
+  (:require
+   [app.main.ui.workspace.tokens.token-set :as wtts]
+   [cljs.test :as t]))
+
+(t/deftest toggle-active-theme-id-test
+  (t/testing "toggles active theme id"
+    (let [state {:workspace-data {:token-themes-index {1 {:id 1}}}}]
+      (t/testing "activates theme with id")
+      (t/is (= (wtts/toggle-active-theme-id 1 state) #{1})))
+
+    (let [state {:workspace-data {:token-active-themes #{1}
+                                  :token-themes-index {1 {:id 1}}}}]
+      (t/testing "missing temp theme returns empty set"
+        (t/is (= #{} (wtts/toggle-active-theme-id 1 state)))))
+
+    (let [state {:workspace-data {:token-theme-temporary-id :temp
+                                  :token-active-themes #{1}
+                                  :token-themes-index {1 {:id 1}}}}]
+      (t/testing "empty set returns temp theme"
+        (t/is (= #{:temp} (wtts/toggle-active-theme-id 1 state)))))
+
+    (let [state {:workspace-data {:token-active-themes #{2 3 4}
+                                  :token-themes-index {1 {:id 1}
+                                                       2 {:id 2}
+                                                       3 {:id 3}
+                                                       4 {:id 4 :group :different}}}}]
+      (t/testing "removes same group themes and keeps different group themes"
+        (t/is (= #{1 4} (wtts/toggle-active-theme-id 1 state)))))
+
+    (let [state {:workspace-data {:token-active-themes #{1 2 3 4}}
+                 :token-themes-index {1 {:id 1}
+                                      2 {:id 2}
+                                      3 {:id 3}
+                                      4 {:id 4 :group :different}}}]
+      (t/testing "removes theme when active"
+        (t/is (= #{4 3 2} (wtts/toggle-active-theme-id 1 state)))))))

From 8660c372dcef5de1a82a061ee766f49c66db6afd Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 09:41:23 +0200
Subject: [PATCH 43/75] Add theme deletion

---
 common/src/app/common/files/changes_builder.cljc       |  2 +-
 common/src/app/common/types/tokens_theme_list.cljc     |  7 +++++--
 frontend/src/app/main/data/tokens.cljs                 | 10 ++++++++++
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index 49eb98ade4..ed779cb5cc 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -727,7 +727,7 @@
   [changes token-theme-id]
   (assert-library! changes)
   (let [library-data (::library-data (meta changes))
-        prev-token-theme (get-in library-data [:token-theme token-theme-id])]
+        prev-token-theme (get-in library-data [:token-themes-index token-theme-id])]
     (-> changes
         (update :redo-changes conj {:type :del-token-theme :id token-theme-id})
         (update :undo-changes conj {:type :add-token-theme :token-theme prev-token-theme})
diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc
index 4cf43d6228..f9c3857ff2 100644
--- a/common/src/app/common/types/tokens_theme_list.cljc
+++ b/common/src/app/common/types/tokens_theme_list.cljc
@@ -48,8 +48,11 @@
   (d/update-in-when file-data [:token-themes-index token-theme-id] #(-> (apply f % args) (touch))))
 
 (defn delete-token-theme
-  [file-data token-id]
-  file-data)
+  [file-data theme-id]
+  (-> file-data
+      (update :token-themes (fn [ids] (d/removev #(= % theme-id) ids)))
+      (update :token-themes-index dissoc theme-id)
+      (update :token-active-themes disj theme-id)))
 
 (defn add-token-set
   [file-data {:keys [index id] :as token-set}]
diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 6a2f972bc6..db83f9e33e 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -128,6 +128,16 @@
                         (pcb/update-active-token-themes new-themes themes))]
         (rx/of (dch/commit-changes changes))))))
 
+(defn delete-token-theme [token-theme-id]
+  (ptk/reify ::delete-token-theme
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [data (get state :workspace-data)
+            changes (-> (pcb/empty-changes it)
+                        (pcb/with-library-data data)
+                        (pcb/delete-token-theme token-theme-id))]
+        (rx/of (dch/commit-changes changes))))))
+
 (defn create-token-set [token-set]
   (let [new-token-set (merge
                        {:id (uuid/next)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 58e2dfda80..1a3f63754c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -214,7 +214,7 @@
                  [:button {:on-click (fn [e]
                                        (dom/prevent-default e)
                                        (dom/stop-propagation e)
-                                       (st/emit! (wdt/delete-token-set id)))}
+                                       (st/emit! (wdt/delete-token-theme id)))}
                   "🗑️"]]]])]])]]
       [:div.spaced
        [:b "Sets"]

From 97436531d080abc70e035d80e56e49acbfb85e95 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 10:46:48 +0200
Subject: [PATCH 44/75] Showing only active sets

---
 frontend/src/app/main/data/tokens.cljs              |  3 ++-
 frontend/src/app/main/refs.cljs                     |  3 ---
 .../src/app/main/ui/workspace/tokens/sidebar.cljs   | 13 +++++++++----
 .../src/app/main/ui/workspace/tokens/token_set.cljs |  7 +++++++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index db83f9e33e..0fae9ee937 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -163,7 +163,8 @@
             changes (-> (pcb/empty-changes it)
                         (pcb/update-token-theme
                          (wtts/toggle-token-set-to-token-theme token-set-id theme)
-                         theme))]
+                         theme)
+                        (pcb/update-active-token-themes #{(wtts/update-theme-id state)} (wtts/get-active-theme-ids state)))]
         (rx/of (dch/commit-changes changes))))))
 
 (defn delete-token-set [token-set-id]
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 77a5e94903..777592dd29 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -243,9 +243,6 @@
 (def workspace-active-theme-ids
   (l/derived wtts/get-active-theme-ids st/state))
 
-(def workspace-active-theme-id
-  (l/derived wtts/update-theme-id st/state))
-
 (def workspace-token-themes
   (l/derived wtts/get-workspace-themes-index st/state))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 1a3f63754c..709d1fbd18 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -28,7 +28,8 @@
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]
-   [shadow.resource]))
+   [shadow.resource]
+   [clojure.set :as set]))
 
 (def lens:token-type-open-status
   (l/derived (l/in [:workspace-tokens :open-status]) st/state))
@@ -168,10 +169,14 @@
 (mf/defc token-sets
   [_props]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
-        selected-theme-id (mf/deref refs/workspace-active-theme-id)
         themes (mf/deref refs/workspace-ordered-token-themes)
         themes-index (mf/deref refs/workspace-token-themes)
-        selected-theme (get themes-index selected-theme-id)
+        active-set-ids (reduce
+                        (fn [acc cur]
+                          (if-let [sets (get-in themes-index [cur :sets])]
+                            (set/union acc sets)
+                            acc))
+                        #{} active-theme-ids)
         selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
         token-sets (mf/deref refs/workspace-token-sets)]
     [:div
@@ -234,7 +239,7 @@
                           (dom/prevent-default e)
                           (dom/stop-propagation e)
                           (st/emit! (wdt/toggle-token-set id)))}
-             (when (wtts/token-set-enabled-in-theme? id selected-theme) "👁️")]
+             (when (get active-set-ids id) "👁️")]
             [:button {:on-click (fn [e]
                                   (dom/prevent-default e)
                                   (dom/stop-propagation e)
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 7d7a432b82..5d4410d29f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -59,6 +59,13 @@
       (or temp-theme-id-set #{})
       new-themes)))
 
+(defn get-active-theme-ids-or-temp-theme-id
+  [state]
+  (let [active-theme-ids (get-active-theme-ids state)]
+    (if (seq active-theme-ids)
+      active-theme-ids
+      (get-temp-theme-id state))))
+
 (defn update-theme-id
   [state]
   (let [active-themes (get-active-theme-ids state)

From 8e02dced2f420936abe6885e557a540989ac43bd Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 10:49:46 +0200
Subject: [PATCH 45/75] Extract to function

---
 frontend/src/app/main/refs.cljs                       |  3 +++
 .../src/app/main/ui/workspace/tokens/sidebar.cljs     |  8 +-------
 .../src/app/main/ui/workspace/tokens/token_set.cljs   | 11 +++++++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 777592dd29..3772523cc2 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -243,6 +243,9 @@
 (def workspace-active-theme-ids
   (l/derived wtts/get-active-theme-ids st/state))
 
+(def workspace-active-set-ids
+  (l/derived wtts/get-active-set-ids st/state))
+
 (def workspace-token-themes
   (l/derived wtts/get-workspace-themes-index st/state))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 709d1fbd18..f61744058f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -170,14 +170,8 @@
   [_props]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
         themes (mf/deref refs/workspace-ordered-token-themes)
-        themes-index (mf/deref refs/workspace-token-themes)
-        active-set-ids (reduce
-                        (fn [acc cur]
-                          (if-let [sets (get-in themes-index [cur :sets])]
-                            (set/union acc sets)
-                            acc))
-                        #{} active-theme-ids)
         selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
+        active-set-ids (mf/deref refs/workspace-active-set-ids)
         token-sets (mf/deref refs/workspace-token-sets)]
     [:div
      [:style
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 5d4410d29f..d9eec5ff8a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -25,6 +25,17 @@
 (defn get-temp-theme-id [state]
   (get-in state [:workspace-data :token-theme-temporary-id]))
 
+(defn get-active-set-ids [state]
+  (let [active-theme-ids (get-active-theme-ids state)
+        themes-index (get-workspace-themes-index state)
+        active-set-ids (reduce
+                        (fn [acc cur]
+                          (if-let [sets (get-in themes-index [cur :sets])]
+                            (set/union acc sets)
+                            acc))
+                        #{} active-theme-ids)]
+    active-set-ids))
+
 (defn theme-ids-with-group
   "Returns set of theme-ids that share the same `:group` property as the theme with `theme-id`.
   Will also return matching theme-ids without a `:group` property."

From 6049c328390d14f43572ef93b6d680d453004b02 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 19 Aug 2024 15:46:42 +0200
Subject: [PATCH 46/75] Compute tokens from each activated set

---
 frontend/src/app/main/data/tokens.cljs        | 22 ++++++---
 frontend/src/app/main/refs.cljs               |  3 ++
 .../sidebar/options/menus/measures.cljs       |  2 +-
 .../app/main/ui/workspace/tokens/sidebar.cljs | 12 ++---
 .../ui/workspace/tokens/style_dictionary.cljs | 48 +++----------------
 .../app/main/ui/workspace/tokens/token.cljs   |  8 ++++
 .../main/ui/workspace/tokens/token_set.cljs   | 30 ++++++++----
 .../app/main/ui/workspace/tokens/update.cljs  |  5 +-
 8 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 0fae9ee937..26a1259b8f 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -16,12 +16,12 @@
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-set :as wtts]
+   [app.main.ui.workspace.tokens.update :as wtu]
    [beicon.v2.core :as rx]
    [clojure.data :as data]
    [cuerdas.core :as str]
-   [potok.v2.core :as ptk]
-   [app.main.ui.workspace.tokens.changes :as wdt]
-   [app.main.ui.workspace.tokens.token-set :as wtts]))
+   [potok.v2.core :as ptk]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Helpers
@@ -126,7 +126,9 @@
             new-themes (wtts/toggle-active-theme-id token-theme-id state)
             changes (-> (pcb/empty-changes it)
                         (pcb/update-active-token-themes new-themes themes))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn delete-token-theme [token-theme-id]
   (ptk/reify ::delete-token-theme
@@ -136,7 +138,9 @@
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/delete-token-theme token-theme-id))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn create-token-set [token-set]
   (let [new-token-set (merge
@@ -165,7 +169,9 @@
                          (wtts/toggle-token-set-to-token-theme token-set-id theme)
                          theme)
                         (pcb/update-active-token-themes #{(wtts/update-theme-id state)} (wtts/get-active-theme-ids state)))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn delete-token-set [token-set-id]
   (ptk/reify ::delete-token-set
@@ -175,7 +181,9 @@
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/delete-token-set token-set-id))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn update-create-token
   [token]
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 3772523cc2..1daceafc94 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -259,6 +259,9 @@
    st/state
    =))
 
+(def get-active-theme-sets-tokens
+  (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
+
 (def workspace-tokens
   (l/derived
    (fn [data]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index e786b1141f..7f6ba21454 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -101,7 +101,7 @@
         selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
-        tokens (-> (mf/deref refs/workspace-tokens)
+        tokens (-> (mf/deref refs/get-active-theme-sets-tokens)
                    (sd/use-resolved-tokens))
         tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index f61744058f..7e3069493b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -21,15 +21,12 @@
    [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-set :as wtts]
    [app.main.ui.workspace.tokens.token-types :as wtty]
-   [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]
-   [shadow.resource]
-   [clojure.set :as set]))
+   [shadow.resource]))
 
 (def lens:token-type-open-status
   (l/derived (l/in [:workspace-tokens :open-status]) st/state))
@@ -223,8 +220,7 @@
          [:li {:class [(when (= selected-token-set-id id) "selected")]
                :on-click (fn []
                            (st/emit!
-                            (wdt/set-selected-token-set-id id)
-                            (wtu/update-workspace-tokens)))}
+                            (wdt/set-selected-token-set-id id)))}
           [:div.spaced
            name
            [:div.spaced
@@ -248,9 +244,9 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
-        tokens (-> (mf/deref refs/workspace-tokens)
-                   (sd/use-resolved-tokens))
+        tokens (sd/use-resolved-workspace-tokens)
         token-groups (mf/with-memo [tokens]
+                       (js/console.log "tokens" tokens)
                        (sorted-token-groups tokens))]
     [:article
      [:& token-sets]
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 81881d8109..bed8546951 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -2,6 +2,7 @@
   (:require
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
+   [app.common.data :refer [ordered-map]]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.token :as wtt]
    [cuerdas.core :as str]
@@ -79,8 +80,10 @@
                         (resolve-sd-tokens+ config))]
     (let [resolved-tokens (reduce
                            (fn [acc ^js cur]
-                             (let [id (uuid (.-uuid (.-id cur)))
-                                   origin-token (get tokens id)
+                             (let [identifier (if (uuid? (ffirst tokens))
+                                                (uuid (.-uuid (.-id cur)))
+                                                (.. cur -original -name))
+                                   origin-token (get tokens identifier)
                                    parsed-value (wtt/parse-token-value (.-value cur))
                                    resolved-token (if (not parsed-value)
                                                     (assoc origin-token :errors [:style-dictionary/missing-reference])
@@ -93,11 +96,6 @@
         (js/console.log "Resolved tokens" resolved-tokens))
       resolved-tokens)))
 
-(defn resolve-workspace-tokens+
-  [& {:keys [debug?] :as config}]
-  (when-let [workspace-tokens @refs/workspace-tokens]
-    (resolve-tokens+ workspace-tokens)))
-
 ;; Hooks -----------------------------------------------------------------------
 
 (defonce !tokens-cache (atom nil))
@@ -112,7 +110,7 @@
   then the state will be updated with the resolved tokens."
   [tokens & {:keys [cache-atom]
              :or {cache-atom !tokens-cache}}]
-  (let [tokens-state (mf/use-state (get @cache-atom tokens tokens))]
+  (let [tokens-state (mf/use-state (get @cache-atom tokens))]
     (mf/use-effect
      (mf/deps tokens)
      (fn []
@@ -133,37 +131,3 @@
 (defn use-resolved-workspace-tokens [& {:as config}]
   (-> (mf/deref refs/workspace-tokens)
       (use-resolved-tokens config)))
-
-;; Testing ---------------------------------------------------------------------
-
-(comment
-  (defonce !output (atom nil))
-
-  (-> @refs/workspace-tokens
-      (resolve-tokens+ {:debug? false})
-      (.then js/console.log))
-
-  (-> (resolve-workspace-tokens+ {:debug? true})
-      (p/then #(reset! !output %)))
-
-  @!output
-
-  (->> @refs/workspace-tokens
-       (resolve-tokens+)
-       (#(doto % js/console.log)))
-
-  (->
-   (clj->js {"a" {:name "a" :value "5"}
-             "b" {:name "b" :value "{a} * 2"}})
-
-   (#(resolve-sd-tokens+ % {:debug? true})))
-
-  (defonce output (atom nil))
-  (require '[shadow.resource])
-  (let [example (-> (shadow.resource/inline "./data/example-tokens-set.json")
-                    (js/JSON.parse)
-                    .-core)]
-    (.then (resolve-sd-tokens+ example {:debug? true})
-           #(reset! output %)))
-
-  nil)
diff --git a/frontend/src/app/main/ui/workspace/tokens/token.cljs b/frontend/src/app/main/ui/workspace/tokens/token.cljs
index 9c0efd356d..aba9ae9a0a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token.cljs
@@ -4,6 +4,14 @@
    [clojure.set :as set]
    [cuerdas.core :as str]))
 
+(defn get-workspace-tokens
+  [state]
+  (get-in state [:workspace-data :tokens] {}))
+
+(defn get-workspace-token
+  [token-id state]
+  (get-in state [:workspace-data :tokens token-id]))
+
 (def parseable-token-value-regexp
   "Regexp that can be used to parse a number value out of resolved token value.
   This regexp also trims whitespace around the value."
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index d9eec5ff8a..bcfa5f574a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -1,6 +1,8 @@
 (ns app.main.ui.workspace.tokens.token-set
   (:require
-    [clojure.set :as set]))
+   [app.common.data :refer [ordered-map]]
+   [app.main.ui.workspace.tokens.token :as wtt]
+   [clojure.set :as set]))
 
 ;; Themes ----------------------------------------------------------------------
 
@@ -102,9 +104,6 @@
 
  ;; Sets ------------------------------------------------------------------------
 
-(defn get-workspace-tokens [state]
-  (get-in state [:workspace-data :tokens]))
-
 (defn get-workspace-sets [state]
   (get-in state [:workspace-data :token-sets-index]))
 
@@ -112,6 +111,10 @@
   (some-> (get-workspace-sets state)
           (get set-id)))
 
+(defn get-workspace-token-set-tokens [set-id state]
+  (-> (get-token-set set-id state)
+      :tokens))
+
 (def default-token-set-name "Global")
 
 (defn create-global-set [])
@@ -129,11 +132,22 @@
 
 (defn get-selected-token-set-tokens [state]
   (when-let [token-set (get-selected-token-set state)]
-    (let [tokens (or (get-workspace-tokens state) {})]
+    (let [tokens (or (wtt/get-workspace-tokens state) {})]
+      (js/console.log "token-set" token-set (select-keys tokens (:tokens token-set)))
       (select-keys tokens (:tokens token-set)))))
 
-(defn get-token-set-tokens [{:keys [tokens] :as token-set} file]
-  (map #(get-in file [:data :tokens %]) tokens))
-
 (defn assoc-selected-token-set-id [state id]
   (assoc-in state [:workspace-local :selected-token-set-id] id))
+
+(defn get-active-theme-sets-tokens-names-map [state]
+  (let [active-set-ids (get-active-set-ids state)]
+    (reduce
+     (fn [names-map-acc set-id]
+       (let [token-ids (get-workspace-token-set-tokens set-id state)]
+         (reduce
+          (fn [acc token-id]
+            (if-let [token (wtt/get-workspace-token token-id state)]
+              (assoc acc (wtt/token-identifier token) token)
+              acc))
+          names-map-acc token-ids)))
+     (ordered-map) active-set-ids)))
diff --git a/frontend/src/app/main/ui/workspace/tokens/update.cljs b/frontend/src/app/main/ui/workspace/tokens/update.cljs
index 82decf153f..1ae50d2316 100644
--- a/frontend/src/app/main/ui/workspace/tokens/update.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/update.cljs
@@ -121,7 +121,10 @@
     ptk/WatchEvent
     (watch [_ state _]
       (->>
-       (rx/from (wtsd/resolve-tokens+ (wtts/get-selected-token-set-tokens state)))
+       (rx/from
+        (->
+          (wtts/get-active-theme-sets-tokens-names-map state)
+          (wtsd/resolve-tokens+)))
        (rx/mapcat
         (fn [sd-tokens]
           (let [undo-id (js/Symbol)]

From 5358cd1c52130a0ce13c73c93fb7e6e88a40c406 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 20 Aug 2024 16:14:32 +0200
Subject: [PATCH 47/75] Fix tests crashing

---
 .../token_tests/logic/token_actions_test.cljs | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs
index cd026217f3..05e3543602 100644
--- a/frontend/test/token_tests/logic/token_actions_test.cljs
+++ b/frontend/test/token_tests/logic/token_actions_test.cljs
@@ -4,9 +4,10 @@
    [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.data.tokens :as wdt]
+   [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-set :as wtts]
    [cljs.test :as t :include-macros true]
    [frontend-tests.helpers.pages :as thp]
    [frontend-tests.helpers.state :as ths]
@@ -41,8 +42,6 @@
       (toht/add-token :token-1 border-radius-token)
       (toht/add-token :token-2 reference-border-radius-token)))
 
-(defonce a (atom nil))
-
 (t/deftest test-create-token
   (t/testing "creates token in new token set"
     (t/async
@@ -53,9 +52,9 @@
        (tohs/run-store-async
         store done events
         (fn [new-state]
-          (let [selected-token-set (wdt/get-selected-token-set new-state)
+          (let [selected-token-set (wtts/get-selected-token-set-id new-state)
                 file' (ths/get-file-from-store new-state)
-                set-tokens (wdt/get-token-set-tokens selected-token-set file')]
+                set-tokens (wtts/get-workspace-token-set-tokens selected-token-set file')]
             (t/testing "selects created workspace set and adds token to it"
               (t/is (some? selected-token-set))
               (t/is (= 1 (count (:tokens selected-token-set))))
@@ -72,20 +71,13 @@
        (tohs/run-store-async
         store done events
         (fn [new-state]
-          (let [selected-token-set (wdt/get-selected-token-set new-state)
+          (let [selected-token-set (wtts/get-selected-token-set new-state)
                 file' (ths/get-file-from-store new-state)
-                set-tokens (wdt/get-token-set-tokens selected-token-set file')]
+                set-tokens (wtts/get-workspace-token-set-tokens selected-token-set file')]
             (t/testing "selects created workspace set and adds token to it"
               (t/is (some? selected-token-set))
               (t/is (= 2 (count (:tokens selected-token-set))))
-              (t/is (= (list border-radius-token reference-border-radius-token) (map #(dissoc % :id :modified-at) set-tokens))))
-            (reset! a new-state))))))))
-
-(comment
-  (wdt/get-selected-token-set @a)
-  @a
-  (t/run-tests)
-  nil)
+              (t/is (= (list border-radius-token reference-border-radius-token) (map #(dissoc % :id :modified-at) set-tokens)))))))))))
 
 (t/deftest test-apply-token
   (t/testing "applies token to shape and updates shape attributes to resolved value"

From cfefbadb64ce6c8ee603deed346cd0ec02f3af11 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 10:29:14 +0200
Subject: [PATCH 48/75] Fix id

---
 frontend/src/app/main/data/tokens.cljs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs
index 26a1259b8f..d40734f70d 100644
--- a/frontend/src/app/main/data/tokens.cljs
+++ b/frontend/src/app/main/data/tokens.cljs
@@ -108,7 +108,6 @@
     (cond
      (not theme-id) (-> changes
                         (pcb/add-temporary-token-theme
-
                          {:id (uuid/next)
                           :name ""
                           :sets #{id}}))
@@ -216,7 +215,7 @@
                                         (pcb/update-token-set updated-token-set token-set))))
               theme-changes (-> set-changes
                                 (ensure-token-theme-changes state {:new-set? create-set?
-                                                                   :set-id selected-token-set-id}))]
+                                                                   :id selected-token-set-id}))]
           (rx/of
            (set-selected-token-set-id selected-token-set-id)
            (dch/commit-changes theme-changes)))))))

From 74801e72d315364f0331cb7684f39de4aa43808e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 10:54:22 +0200
Subject: [PATCH 49/75] Fix simple token creation / scaffolding test

---
 .../main/ui/workspace/tokens/token_set.cljs   | 15 +++++-
 .../token_tests/logic/token_actions_test.cljs | 49 ++++++++++---------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index bcfa5f574a..13432ab4f9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -27,8 +27,15 @@
 (defn get-temp-theme-id [state]
   (get-in state [:workspace-data :token-theme-temporary-id]))
 
-(defn get-active-set-ids [state]
+(defn get-active-theme-ids-or-fallback [state]
   (let [active-theme-ids (get-active-theme-ids state)
+        temp-theme-id (get-temp-theme-id state)]
+    (cond
+      (seq active-theme-ids) active-theme-ids
+      temp-theme-id #{temp-theme-id})))
+
+(defn get-active-set-ids [state]
+  (let [active-theme-ids (get-active-theme-ids-or-fallback state)
         themes-index (get-workspace-themes-index state)
         active-set-ids (reduce
                         (fn [acc cur]
@@ -130,10 +137,14 @@
   (when-let [id (get-selected-token-set-id state)]
     (get-token-set id state)))
 
+(defn get-token-set-tokens [state]
+  (when-let [token-set (get-selected-token-set state)]
+    (let [tokens (or (wtt/get-workspace-tokens state) {})]
+      (select-keys tokens (:tokens token-set)))))
+
 (defn get-selected-token-set-tokens [state]
   (when-let [token-set (get-selected-token-set state)]
     (let [tokens (or (wtt/get-workspace-tokens state) {})]
-      (js/console.log "token-set" token-set (select-keys tokens (:tokens token-set)))
       (select-keys tokens (:tokens token-set)))))
 
 (defn assoc-selected-token-set-id [state id]
diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs
index 05e3543602..b4d5997b46 100644
--- a/frontend/test/token_tests/logic/token_actions_test.cljs
+++ b/frontend/test/token_tests/logic/token_actions_test.cljs
@@ -52,32 +52,33 @@
        (tohs/run-store-async
         store done events
         (fn [new-state]
-          (let [selected-token-set (wtts/get-selected-token-set-id new-state)
-                file' (ths/get-file-from-store new-state)
-                set-tokens (wtts/get-workspace-token-set-tokens selected-token-set file')]
+          (let [set-id (wtts/get-selected-token-set-id new-state)
+                token-set (wtts/get-token-set set-id new-state)
+                set-tokens (wtts/get-active-theme-sets-tokens-names-map new-state)]
             (t/testing "selects created workspace set and adds token to it"
-              (t/is (some? selected-token-set))
-              (t/is (= 1 (count (:tokens selected-token-set))))
-              (t/is (= (list border-radius-token) (map #(dissoc % :id :modified-at) set-tokens)))))))))))
+              (t/is (some? token-set))
+              (t/is (= 1 (count set-tokens)))
+              (t/is (= (list border-radius-token) (->> (vals set-tokens)
+                                                       (map #(dissoc % :id :modified-at)))))))))))))
 
-(t/deftest test-create-multiple-tokens
-  (t/testing "uses selected tokens set when creating multiple tokens"
-    (t/async
-     done
-     (let [file (setup-file)
-           store (ths/setup-store file)
-           events [(wdt/update-create-token border-radius-token)
-                   (wdt/update-create-token reference-border-radius-token)]]
-       (tohs/run-store-async
-        store done events
-        (fn [new-state]
-          (let [selected-token-set (wtts/get-selected-token-set new-state)
-                file' (ths/get-file-from-store new-state)
-                set-tokens (wtts/get-workspace-token-set-tokens selected-token-set file')]
-            (t/testing "selects created workspace set and adds token to it"
-              (t/is (some? selected-token-set))
-              (t/is (= 2 (count (:tokens selected-token-set))))
-              (t/is (= (list border-radius-token reference-border-radius-token) (map #(dissoc % :id :modified-at) set-tokens)))))))))))
+;; (t/deftest test-create-multiple-tokens
+;;   (t/testing "uses selected tokens set when creating multiple tokens"
+;;     (t/async
+;;      done
+;;      (let [file (setup-file)
+;;            store (ths/setup-store file)
+;;            events [(wdt/update-create-token border-radius-token)
+;;                    (wdt/update-create-token reference-border-radius-token)]]
+;;        (tohs/run-store-async
+;;         store done events
+;;         (fn [new-state]
+;;           (let [selected-token-set (wtts/get-selected-token-set new-state)
+;;                 file' (ths/get-file-from-store new-state)
+;;                 set-tokens (wtts/get-selected-token-set-tokens file')]
+;;             (t/testing "selects created workspace set and adds token to it"
+;;               (t/is (some? selected-token-set))
+;;               (t/is (= 2 (count (:tokens selected-token-set))))
+;;               (t/is (= (list border-radius-token reference-border-radius-token) (map #(dissoc % :id :modified-at) set-tokens)))))))))))
 
 (t/deftest test-apply-token
   (t/testing "applies token to shape and updates shape attributes to resolved value"

From 4f02d8b47d472fc46a2feb085b9df2521d9d5297 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 11:01:23 +0200
Subject: [PATCH 50/75] Fix multi run test

---
 .../token_tests/logic/token_actions_test.cljs | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs
index b4d5997b46..0fb1ea5ecd 100644
--- a/frontend/test/token_tests/logic/token_actions_test.cljs
+++ b/frontend/test/token_tests/logic/token_actions_test.cljs
@@ -61,24 +61,23 @@
               (t/is (= (list border-radius-token) (->> (vals set-tokens)
                                                        (map #(dissoc % :id :modified-at)))))))))))))
 
-;; (t/deftest test-create-multiple-tokens
-;;   (t/testing "uses selected tokens set when creating multiple tokens"
-;;     (t/async
-;;      done
-;;      (let [file (setup-file)
-;;            store (ths/setup-store file)
-;;            events [(wdt/update-create-token border-radius-token)
-;;                    (wdt/update-create-token reference-border-radius-token)]]
-;;        (tohs/run-store-async
-;;         store done events
-;;         (fn [new-state]
-;;           (let [selected-token-set (wtts/get-selected-token-set new-state)
-;;                 file' (ths/get-file-from-store new-state)
-;;                 set-tokens (wtts/get-selected-token-set-tokens file')]
-;;             (t/testing "selects created workspace set and adds token to it"
-;;               (t/is (some? selected-token-set))
-;;               (t/is (= 2 (count (:tokens selected-token-set))))
-;;               (t/is (= (list border-radius-token reference-border-radius-token) (map #(dissoc % :id :modified-at) set-tokens)))))))))))
+(t/deftest test-create-multiple-tokens
+  (t/testing "uses selected tokens set when creating multiple tokens"
+    (t/async
+     done
+     (let [file (setup-file)
+           store (ths/setup-store file)
+           events [(wdt/update-create-token border-radius-token)
+                   (wdt/update-create-token reference-border-radius-token)]]
+       (tohs/run-store-async
+        store done events
+        (fn [new-state]
+          (let [set-tokens (wtts/get-active-theme-sets-tokens-names-map new-state)]
+            (t/testing "selects created workspace set and adds token to it"
+              (t/is (= 2 (count set-tokens)))
+              (t/is (= (list border-radius-token reference-border-radius-token)
+                       (->> (vals set-tokens)
+                            (map #(dissoc % :id :modified-at)))))))))))))
 
 (t/deftest test-apply-token
   (t/testing "applies token to shape and updates shape attributes to resolved value"

From 4e81a94d0fbe4d187ae6ab18f431b5e32baea5ea Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 11:03:39 +0200
Subject: [PATCH 51/75] Remove unused functions

---
 .../main/ui/workspace/tokens/token_set.cljs   | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index 13432ab4f9..f98029f086 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -79,13 +79,6 @@
       (or temp-theme-id-set #{})
       new-themes)))
 
-(defn get-active-theme-ids-or-temp-theme-id
-  [state]
-  (let [active-theme-ids (get-active-theme-ids state)]
-    (if (seq active-theme-ids)
-      active-theme-ids
-      (get-temp-theme-id state))))
-
 (defn update-theme-id
   [state]
   (let [active-themes (get-active-theme-ids state)
@@ -106,9 +99,6 @@
                                (disj % token-set-id)
                                (conj % token-set-id))))
 
-(defn token-set-enabled-in-theme? [set-id theme]
-  (some? (get-in theme [:sets set-id])))
-
  ;; Sets ------------------------------------------------------------------------
 
 (defn get-workspace-sets [state]
@@ -122,13 +112,6 @@
   (-> (get-token-set set-id state)
       :tokens))
 
-(def default-token-set-name "Global")
-
-(defn create-global-set [])
-
-(defn add-token-to-token-set [token token-set]
-  (update token-set :items conj (:id token)))
-
 (defn get-selected-token-set-id [state]
   (or (get-in state [:workspace-local :selected-token-set-id])
       (get-in state [:workspace-data :token-set-groups 0])))
@@ -137,11 +120,6 @@
   (when-let [id (get-selected-token-set-id state)]
     (get-token-set id state)))
 
-(defn get-token-set-tokens [state]
-  (when-let [token-set (get-selected-token-set state)]
-    (let [tokens (or (wtt/get-workspace-tokens state) {})]
-      (select-keys tokens (:tokens token-set)))))
-
 (defn get-selected-token-set-tokens [state]
   (when-let [token-set (get-selected-token-set state)]
     (let [tokens (or (wtt/get-workspace-tokens state) {})]

From 0df89cf60d992856fc284ce32c404bbe40138d08 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 11:17:12 +0200
Subject: [PATCH 52/75] Use storage to toggle themes ui

---
 .../src/app/main/ui/workspace/tokens/sidebar.cljs   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index d8dcfc4076..f72f6d2a02 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -12,6 +12,7 @@
    [app.main.data.tokens :as dt]
    [app.main.data.tokens :as wdt]
    [app.main.refs :as refs]
+   [app.util.storage :refer [storage]]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.icons :as i]
@@ -282,11 +283,21 @@
      (when @open?
        [:& sets-list {:selected-set-id selected-set-id}])]))
 
+(defn temp-use-themes-flag []
+  (let [show? (mf/use-state (get @storage ::show-token-themes-sets? false))]
+    (mf/use-effect
+     (fn []
+       (letfn [(toggle! []
+                 (swap! storage update ::show-token-themes-sets? not)
+                 (reset! show? (get @storage ::show-token-themes-sets?)))]
+         (set! js/window.toggleThemes toggle!))))
+    show?))
+
 (mf/defc tokens-sidebar-tab
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [_props]
-  (let [show-sets-section? false] ;; temporarily added this variable to see/hide the sets section till we have it working end to end
+  (let [show-sets-section? (deref (temp-use-themes-flag))]
     [:div {:class (stl/css :sidebar-tab-wrapper)}
      (when show-sets-section?
        [:div {:class (stl/css :sets-section-wrapper)}

From 98207b02bf6d566006442dbcc05e0300b1f3df79 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 11:18:47 +0200
Subject: [PATCH 53/75] Remove log

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index f72f6d2a02..d463f159d0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -252,7 +252,6 @@
 
         tokens (sd/use-resolved-workspace-tokens)
         token-groups (mf/with-memo [tokens]
-                       (js/console.log "tokens" tokens)
                        (sorted-token-groups tokens))]
     [:article
      [:& token-sets]

From 7c3716a709c5263bc8fed1116b84d9d09d341f05 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 11:18:52 +0200
Subject: [PATCH 54/75] Move temporary ui behind flag

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index d463f159d0..eb02369ba0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -254,7 +254,6 @@
         token-groups (mf/with-memo [tokens]
                        (sorted-token-groups tokens))]
     [:article
-     [:& token-sets]
      [:& token-context-menu]
      [:div.assets-bar
       (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups)
@@ -300,7 +299,8 @@
     [:div {:class (stl/css :sidebar-tab-wrapper)}
      (when show-sets-section?
        [:div {:class (stl/css :sets-section-wrapper)}
-        [:& sets-sidebar]])
+        [:& sets-sidebar]
+        [:& token-sets]])
      [:div {:class (stl/css :tokens-section-wrapper)}
       [:& tokens-explorer]]
      [:button {:class (stl/css :download-json-button)

From 011fc734f63990023bbc47b07025d198f6e952a4 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 14:42:39 +0200
Subject: [PATCH 55/75] Make passing of names-map explicit

---
 .../ui/workspace/tokens/style_dictionary.cljs |  8 +++----
 .../app/main/ui/workspace/tokens/update.cljs  |  2 +-
 .../token_tests/style_dictionary_test.cljs    | 22 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index d309645a7a..08893f57d8 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -74,14 +74,14 @@
        (get errors :style-dictionary/missing-reference)))
 
 (defn resolve-tokens+
-  [tokens & {:keys [debug?] :as config}]
+  [tokens & {:keys [names-map? debug?] :as config}]
   (p/let [sd-tokens (-> (wtt/token-names-tree tokens)
                         (resolve-sd-tokens+ config))]
     (let [resolved-tokens (reduce
                            (fn [acc ^js cur]
-                             (let [identifier (if (uuid? (ffirst tokens))
-                                                (uuid (.-uuid (.-id cur)))
-                                                (.. cur -original -name))
+                             (let [identifier (if names-map?
+                                                (.. cur -original -name)
+                                                (uuid (.-uuid (.-id cur))))
                                    origin-token (get tokens identifier)
                                    parsed-value (wtt/parse-token-value (.-value cur))
                                    resolved-token (if (not parsed-value)
diff --git a/frontend/src/app/main/ui/workspace/tokens/update.cljs b/frontend/src/app/main/ui/workspace/tokens/update.cljs
index 1ae50d2316..2f64aa65b1 100644
--- a/frontend/src/app/main/ui/workspace/tokens/update.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/update.cljs
@@ -124,7 +124,7 @@
        (rx/from
         (->
           (wtts/get-active-theme-sets-tokens-names-map state)
-          (wtsd/resolve-tokens+)))
+          (wtsd/resolve-tokens+ {:names-map? true})))
        (rx/mapcat
         (fn [sd-tokens]
           (let [undo-id (js/Symbol)]
diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs
index cc96abe1b8..354da5c893 100644
--- a/frontend/test/token_tests/style_dictionary_test.cljs
+++ b/frontend/test/token_tests/style_dictionary_test.cljs
@@ -2,7 +2,8 @@
   (:require
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [cljs.test :as t :include-macros true]
-   [promesa.core :as p]))
+   [promesa.core :as p]
+   [app.main.ui.workspace.tokens.token :as wtt]))
 
 (def border-radius-token
   {:id #uuid "8c868278-7c8d-431b-bbc9-7d8f15c8edb9"
@@ -35,3 +36,22 @@
                                                      :resolved-unit "px")}]
                          (t/is (= expected-tokens resolved-tokens))
                          (done))))))))
+
+(t/deftest resolve-tokens-test
+  (t/async
+    done
+    (t/testing "resolves tokens using style-dictionary in a names-map"
+      (-> (vals tokens)
+          (wtt/token-names-map)
+          (sd/resolve-tokens+ {:names-map? true})
+          (p/finally (fn [resolved-tokens]
+                       (let [expected-tokens {"borderRadius.sm"
+                                              (assoc border-radius-token
+                                                     :resolved-value 12
+                                                     :resolved-unit "px")
+                                              "borderRadius.md-with-dashes"
+                                              (assoc reference-border-radius-token
+                                                     :resolved-value 24
+                                                     :resolved-unit "px")}]
+                         (t/is (= expected-tokens resolved-tokens))
+                         (done))))))))

From 6c6be35292c4e292935e138438c1aad6601b89d0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 15:12:13 +0200
Subject: [PATCH 56/75] Fix token updates not taking order

---
 .../src/app/main/ui/workspace/tokens/token_set.cljs    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
index f98029f086..6a6a737c83 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs
@@ -15,6 +15,9 @@
 (defn get-workspace-themes-index [state]
   (get-in state [:workspace-data :token-themes-index] {}))
 
+(defn get-workspace-token-set-groups [state]
+  (get-in state [:workspace-data :token-set-groups]))
+
 (defn get-workspace-ordered-themes [state]
   (let [themes (get-workspace-themes state)
         themes-index (get-workspace-themes-index state)]
@@ -45,6 +48,11 @@
                         #{} active-theme-ids)]
     active-set-ids))
 
+(defn get-ordered-active-set-ids [state]
+  (let [active-set-ids (get-active-set-ids state)
+        token-set-groups (get-workspace-token-set-groups state)]
+    (filter active-set-ids token-set-groups)))
+
 (defn theme-ids-with-group
   "Returns set of theme-ids that share the same `:group` property as the theme with `theme-id`.
   Will also return matching theme-ids without a `:group` property."
@@ -129,7 +137,7 @@
   (assoc-in state [:workspace-local :selected-token-set-id] id))
 
 (defn get-active-theme-sets-tokens-names-map [state]
-  (let [active-set-ids (get-active-set-ids state)]
+  (let [active-set-ids (get-ordered-active-set-ids state)]
     (reduce
      (fn [names-map-acc set-id]
        (let [token-ids (get-workspace-token-set-tokens set-id state)]

From 8264da3a2a48c05544989332b60e0e11f49082b9 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 15:36:40 +0200
Subject: [PATCH 57/75] Use active sets tokens for form

---
 .../src/app/main/ui/workspace/tokens/form.cljs   | 16 ++++++++++------
 .../ui/workspace/tokens/style_dictionary.cljs    |  9 +++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 5e3351940f..2c80a1a8b8 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -99,10 +99,10 @@ Token names should only contain letters and digits separated by . characters.")}
       empty-input? (p/rejected nil)
       direct-self-reference? (p/rejected :error/token-direct-self-reference)
       :else (let [token-id (or (:id token) (random-uuid))
-                  new-tokens (update tokens token-id merge {:id token-id
-                                                            :value input
-                                                            :name token-name})]
-              (-> (sd/resolve-tokens+ new-tokens #_ {:debug? true})
+                  new-tokens (update tokens token-name merge {:id token-id
+                                                              :value input
+                                                              :name token-name})]
+              (-> (sd/resolve-tokens+ new-tokens {:names-map? true})
                   (p/then
                    (fn [resolved-tokens]
                      (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
@@ -139,11 +139,15 @@ Token names should only contain letters and digits separated by . characters.")}
               timeout))))]
     debounced-resolver-callback))
 
+(defonce form-token-cache-atom (atom nil))
+
 (mf/defc form
   {::mf/wrap-props false}
   [{:keys [token token-type] :as _args}]
-  (let [tokens (mf/deref refs/workspace-tokens)
-        resolved-tokens (sd/use-resolved-tokens tokens)
+  (let [tokens (mf/deref refs/get-active-theme-sets-tokens)
+        resolved-tokens (sd/use-resolved-tokens tokens {:names-map? true
+                                                        :cache-atom form-token-cache-atom})
+        _ (js/console.log "resolved-tokens" resolved-tokens)
         token-path (mf/use-memo
                     (mf/deps (:name token))
                     #(wtt/token-name->path (:name token)))
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 08893f57d8..623326140c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -107,11 +107,12 @@
 
   This hook will return the unresolved tokens as state until they are processed,
   then the state will be updated with the resolved tokens."
-  [tokens & {:keys [cache-atom]
-             :or {cache-atom !tokens-cache}}]
+  [tokens & {:keys [cache-atom _names-map?]
+             :or {cache-atom !tokens-cache}
+             :as config}]
   (let [tokens-state (mf/use-state (get @cache-atom tokens))]
     (mf/use-effect
-     (mf/deps tokens)
+     (mf/deps tokens config)
      (fn []
        (let [cached (get @cache-atom tokens)]
          (cond
@@ -120,7 +121,7 @@
            ;; Get the cached entry
            (some? cached) (reset! tokens-state cached)
            ;; No cached entry, start processing
-           :else (let [promise+ (resolve-tokens+ tokens)]
+           :else (let [promise+ (resolve-tokens+ tokens config)]
                    (swap! cache-atom assoc tokens promise+)
                    (p/then promise+ (fn [resolved-tokens]
                                       (swap! cache-atom assoc tokens resolved-tokens)

From c130dc39c394edd973f689ae0f4eb6a46e2c3eeb Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 21 Aug 2024 19:11:53 +0200
Subject: [PATCH 58/75] Resolve tokens from other active sets

---
 frontend/src/app/main/refs.cljs               |  2 +-
 .../options/menus/layout_container.cljs       |  2 +-
 .../ui/workspace/tokens/context_menu.cljs     |  2 +-
 .../app/main/ui/workspace/tokens/core.cljs    |  2 +-
 .../app/main/ui/workspace/tokens/sidebar.cljs | 36 ++++++++++---------
 .../ui/workspace/tokens/style_dictionary.cljs |  9 ++++-
 6 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 1daceafc94..d534dc78da 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -262,7 +262,7 @@
 (def get-active-theme-sets-tokens
   (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
 
-(def workspace-tokens
+(def workspace-selected-token-set-tokens
   (l/derived
    (fn [data]
      (or (wtts/get-selected-token-set-tokens data) {}))
diff --git 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
index 294185fe6f..ef32a4e676 100644
--- 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
@@ -856,7 +856,7 @@
 
         shape (when-not multiple
                 (first (deref (refs/objects-by-id ids))))
-        tokens (mf/deref refs/workspace-tokens)
+        tokens (mf/deref refs/workspace-selected-token-set-tokens)
         spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens)))
 
         spacing-column-options (mf/use-memo
diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
index 57e6311d10..56c392f3c8 100644
--- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
@@ -311,7 +311,7 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
         token-id (:token-id mdata)
-        token (get (mf/deref refs/workspace-tokens) token-id)]
+        token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)]
     (mf/use-effect
      (mf/deps mdata)
      (fn []
diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index a68d7e0468..489d3f0411 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -58,6 +58,6 @@
     {:global global}))
 
 (defn download-tokens-as-json []
-  (let [all-tokens (deref refs/workspace-tokens)
+  (let [all-tokens (deref refs/workspace-selected-token-set-tokens)
         transformed-tokens-json (transform-tokens-into-json-format all-tokens)]
     (export-tokens-file transformed-tokens-json)))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index eb02369ba0..39bb1b4bcf 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -12,7 +12,6 @@
    [app.main.data.tokens :as dt]
    [app.main.data.tokens :as wdt]
    [app.main.refs :as refs]
-   [app.util.storage :refer [storage]]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.icons :as i]
@@ -26,6 +25,7 @@
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
+   [app.util.storage :refer [storage]]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]
@@ -42,9 +42,9 @@
 
 (mf/defc token-pill
   {::mf/wrap-props false}
-  [{:keys [on-click token highlighted? on-context-menu]}]
+  [{:keys [on-click token theme-token highlighted? on-context-menu] :as props}]
   (let [{:keys [name value resolved-value errors]} token
-        errors? (seq errors)]
+        errors? (and (seq errors) (seq (:errors theme-token)))]
     [:button {:class (stl/css-case :token-pill true
                                    :token-pill-highlighted highlighted?
                                    :token-pill-invalid errors?)
@@ -78,7 +78,7 @@
     i/add))
 
 (mf/defc token-component
-  [{:keys [type tokens selected-shapes token-type-props]}]
+  [{:keys [type tokens selected-shapes token-type-props active-theme-tokens]}]
   (let [open? (mf/deref (-> (l/key type)
                             (l/derived lens:token-type-open-status)))
         {:keys [modal attributes all-attributes title]} token-type-props
@@ -130,12 +130,14 @@
         [:& cmm/asset-section-block {:role :content}
          [:div {:class (stl/css :token-pills-wrapper)}
           (for [token (sort-by :modified-at tokens)]
-            [:& token-pill
-             {:key (:id token)
-              :token token
-              :highlighted? (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))
-              :on-click #(on-token-pill-click % token)
-              :on-context-menu #(on-context-menu % token)}])]])]]))
+            (let [theme-token (get active-theme-tokens (wtt/token-identifier token))]
+              [:& token-pill
+               {:key (:id token)
+                :token token
+                :theme-token theme-token
+                :highlighted? (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))
+                :on-click #(on-token-pill-click % token)
+                :on-context-menu #(on-context-menu % token)}]))]])]]))
 
 (defn sorted-token-groups
   "Separate token-types into groups of `:empty` or `:filled` depending if tokens exist for that type.
@@ -187,11 +189,8 @@
                       "b { font-weight: 600; }"])
            "}")]
      [:div.spaced-y
-      {:style {:max-height "60vh"
-               :overflow "auto"
-               :border-bottom "2px solid grey"
-               :padding "10px"
-               :margin-bottom "50px"}}
+      {:style {:border-bottom "2px solid grey"
+               :padding "10px"}}
 
       [:& tokene-theme-create]
       [:div.spaced-y
@@ -240,8 +239,7 @@
                                   (dom/prevent-default e)
                                   (dom/stop-propagation e)
                                   (st/emit! (wdt/delete-token-set id)))}
-             "🗑️"]]]])]
-      [:hr]]]))
+             "🗑️"]]]])]]]))
 
 (mf/defc tokens-explorer
   [_props]
@@ -250,6 +248,9 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
+
+        active-theme-tokens (sd/use-active-theme-sets-tokens)
+
         tokens (sd/use-resolved-workspace-tokens)
         token-groups (mf/with-memo [tokens]
                        (sorted-token-groups tokens))]
@@ -261,6 +262,7 @@
         [:& token-component {:key token-key
                              :type token-key
                              :selected-shapes selected-shapes
+                             :active-theme-tokens active-theme-tokens
                              :tokens tokens
                              :token-type-props token-type-props}])]]))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 623326140c..701a093475 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -99,6 +99,8 @@
 
 (defonce !tokens-cache (atom nil))
 
+(defonce !theme-tokens-cache (atom nil))
+
 (defn get-cached-tokens [tokens]
   (get @!tokens-cache tokens tokens))
 
@@ -129,5 +131,10 @@
     @tokens-state))
 
 (defn use-resolved-workspace-tokens [& {:as config}]
-  (-> (mf/deref refs/workspace-tokens)
+  (-> (mf/deref refs/workspace-selected-token-set-tokens)
       (use-resolved-tokens config)))
+
+(defn use-active-theme-sets-tokens [& {:as config}]
+  (-> (mf/deref refs/get-active-theme-sets-tokens)
+      (use-resolved-tokens {:cache-atom !theme-tokens-cache
+                            :names-map? true})))

From 6c802bc132c29462704240a97864d2f0690d4160 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 09:37:47 +0200
Subject: [PATCH 59/75] Rename

---
 frontend/src/app/main/refs.cljs                                | 2 +-
 .../app/main/ui/workspace/sidebar/options/menus/measures.cljs  | 2 +-
 frontend/src/app/main/ui/workspace/tokens/form.cljs            | 3 +--
 .../src/app/main/ui/workspace/tokens/style_dictionary.cljs     | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index d534dc78da..b1177e8c25 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -259,7 +259,7 @@
    st/state
    =))
 
-(def get-active-theme-sets-tokens
+(def workspace-active-theme-sets-tokens
   (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
 
 (def workspace-selected-token-set-tokens
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 7f6ba21454..2f9dd5a3a9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -101,7 +101,7 @@
         selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
-        tokens (-> (mf/deref refs/get-active-theme-sets-tokens)
+        tokens (-> (mf/deref refs/workspace-active-theme-sets-tokens)
                    (sd/use-resolved-tokens))
         tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 2c80a1a8b8..9f54b9d6f5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -144,10 +144,9 @@ Token names should only contain letters and digits separated by . characters.")}
 (mf/defc form
   {::mf/wrap-props false}
   [{:keys [token token-type] :as _args}]
-  (let [tokens (mf/deref refs/get-active-theme-sets-tokens)
+  (let [tokens (mf/deref refs/workspace-active-theme-sets-tokens)
         resolved-tokens (sd/use-resolved-tokens tokens {:names-map? true
                                                         :cache-atom form-token-cache-atom})
-        _ (js/console.log "resolved-tokens" resolved-tokens)
         token-path (mf/use-memo
                     (mf/deps (:name token))
                     #(wtt/token-name->path (:name token)))
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 701a093475..5ee4a3b9a5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -135,6 +135,6 @@
       (use-resolved-tokens config)))
 
 (defn use-active-theme-sets-tokens [& {:as config}]
-  (-> (mf/deref refs/get-active-theme-sets-tokens)
+  (-> (mf/deref refs/workspace-active-theme-sets-tokens)
       (use-resolved-tokens {:cache-atom !theme-tokens-cache
                             :names-map? true})))

From 7a2a521075f5184a3605c0253b840189333abd8f Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 10:54:41 +0200
Subject: [PATCH 60/75] Allow passing config

---
 .../src/app/main/ui/workspace/tokens/style_dictionary.cljs   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 5ee4a3b9a5..62b068a327 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -136,5 +136,6 @@
 
 (defn use-active-theme-sets-tokens [& {:as config}]
   (-> (mf/deref refs/workspace-active-theme-sets-tokens)
-      (use-resolved-tokens {:cache-atom !theme-tokens-cache
-                            :names-map? true})))
+      (use-resolved-tokens (merge {:cache-atom !theme-tokens-cache
+                                   :names-map? true}
+                                  config))))

From 4b47fa5d7a087662c7ddc10536a15109736e2a2d Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 10:58:31 +0200
Subject: [PATCH 61/75] Fix names clash

---
 frontend/test/token_tests/style_dictionary_test.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs
index 354da5c893..0027a5bd1b 100644
--- a/frontend/test/token_tests/style_dictionary_test.cljs
+++ b/frontend/test/token_tests/style_dictionary_test.cljs
@@ -37,7 +37,7 @@
                          (t/is (= expected-tokens resolved-tokens))
                          (done))))))))
 
-(t/deftest resolve-tokens-test
+(t/deftest resolve-tokens-names-map-test
   (t/async
     done
     (t/testing "resolves tokens using style-dictionary in a names-map"

From 8343a9f3b52024adac19930e9937fa994beacca2 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 10:59:40 +0200
Subject: [PATCH 62/75] Fix description

---
 frontend/test/token_tests/style_dictionary_test.cljs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs
index 0027a5bd1b..638fa7e3c1 100644
--- a/frontend/test/token_tests/style_dictionary_test.cljs
+++ b/frontend/test/token_tests/style_dictionary_test.cljs
@@ -23,7 +23,7 @@
 (t/deftest resolve-tokens-test
   (t/async
     done
-    (t/testing "resolves tokens using style-dictionary"
+    (t/testing "resolves tokens using style-dictionary from a ids map"
       (-> (sd/resolve-tokens+ tokens)
           (p/finally (fn [resolved-tokens]
                        (let [expected-tokens {"borderRadius.sm"
@@ -40,7 +40,7 @@
 (t/deftest resolve-tokens-names-map-test
   (t/async
     done
-    (t/testing "resolves tokens using style-dictionary in a names-map"
+    (t/testing "resolves tokens using style-dictionary from a names map"
       (-> (vals tokens)
           (wtt/token-names-map)
           (sd/resolve-tokens+ {:names-map? true})

From 37a3fbcec26adee76ca0db2c67969f3a7b261b91 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 11:02:01 +0200
Subject: [PATCH 63/75] Fix not possible naming token to same token name in
 other set

---
 .../app/main/ui/workspace/tokens/form.cljs    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 9f54b9d6f5..c02783ac0f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -144,27 +144,28 @@ Token names should only contain letters and digits separated by . characters.")}
 (mf/defc form
   {::mf/wrap-props false}
   [{:keys [token token-type] :as _args}]
-  (let [tokens (mf/deref refs/workspace-active-theme-sets-tokens)
-        resolved-tokens (sd/use-resolved-tokens tokens {:names-map? true
-                                                        :cache-atom form-token-cache-atom})
+  (let [selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
+        active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)
+        resolved-tokens (sd/use-resolved-tokens active-theme-tokens {:names-map? true
+                                                                     :cache-atom form-token-cache-atom})
         token-path (mf/use-memo
                     (mf/deps (:name token))
                     #(wtt/token-name->path (:name token)))
-        tokens-tree (mf/use-memo
-                     (mf/deps token-path resolved-tokens)
-                     (fn []
-                       (-> (wtt/token-names-tree resolved-tokens)
-                           ;; Allow setting editing token to it's own path
-                           (d/dissoc-in token-path))))
+        selected-set-tokens-tree (mf/use-memo
+                                  (mf/deps token-path selected-set-tokens)
+                                  (fn []
+                                    (-> (wtt/token-names-tree selected-set-tokens)
+                                        ;; Allow setting editing token to it's own path
+                                        (d/dissoc-in token-path))))
 
         ;; Name
         name-ref (mf/use-var (:name token))
         name-errors (mf/use-state nil)
         validate-name (mf/use-callback
-                       (mf/deps tokens-tree)
+                       (mf/deps selected-set-tokens-tree)
                        (fn [value]
                          (let [schema (token-name-schema {:token token
-                                                          :tokens-tree tokens-tree})]
+                                                          :tokens-tree selected-set-tokens-tree})]
                            (m/explain schema (finalize-name value)))))
         on-update-name-debounced (mf/use-callback
                                   (debounce (fn [e]
@@ -190,7 +191,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                        (= token-or-err :error/token-missing-reference) token-or-err
                                        (:resolved-value token-or-err) (:resolved-value token-or-err))]
                                (reset! token-resolve-result v))))
-        on-update-value-debounced (use-debonced-resolve-callback name-ref token tokens set-resolve-value)
+        on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
         on-update-value (mf/use-callback
                          (mf/deps on-update-value-debounced)
                          (fn [e]

From 157cc5a994a5ed3d0c03a1bfe358d9bcea890226 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 11:21:53 +0200
Subject: [PATCH 64/75] Automatically show themes and sets on dev and PR
 previews

---
 .../app/main/ui/workspace/tokens/sidebar.cljs    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 39bb1b4bcf..672747a25b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -283,8 +283,22 @@
      (when @open?
        [:& sets-list {:selected-set-id selected-set-id}])]))
 
+
+(defn dev-or-preview-url? [url]
+  (let [host (-> url js/URL. .-host)
+        pure-host (first (str/split host #":"))
+        domain (second (str/split pure-host #"\."))]
+    (or (= domain "penpot.tokens.studio")
+        (= pure-host "localhost"))))
+
+(defn location-url-dev-or-preview-url!? []
+  (dev-or-preview-url? js/window.location.href))
+
 (defn temp-use-themes-flag []
-  (let [show? (mf/use-state (get @storage ::show-token-themes-sets? false))]
+  (let [show? (mf/use-state (or
+                             (location-url-dev-or-preview-url!?)
+                             (get @storage ::show-token-themes-sets?)
+                             false))]
     (mf/use-effect
      (fn []
        (letfn [(toggle! []

From e4f01d1d5ed3a9efbc772cccee7e19dcb64b1952 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 11:59:06 +0200
Subject: [PATCH 65/75] Fix logic

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 672747a25b..c8275290a9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -283,13 +283,11 @@
      (when @open?
        [:& sets-list {:selected-set-id selected-set-id}])]))
 
-
 (defn dev-or-preview-url? [url]
   (let [host (-> url js/URL. .-host)
-        pure-host (first (str/split host #":"))
-        domain (second (str/split pure-host #"\."))]
-    (or (= domain "penpot.tokens.studio")
-        (= pure-host "localhost"))))
+        localhost? (= "localhost" (first (str/split host #":")))
+        pr? (str/ends-with? host "penpot.alpha.tokens.studio")]
+    (or localhost? pr?)))
 
 (defn location-url-dev-or-preview-url!? []
   (dev-or-preview-url? js/window.location.href))

From b1cf641587189085417a78f5c9df269ef2357586 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 22 Aug 2024 14:56:41 +0200
Subject: [PATCH 66/75] Fix cancelling set prompt breaking user state

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c8275290a9..e4af048134 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -219,7 +219,8 @@
                   "🗑️"]]]])]])]]
       [:div.spaced
        [:b "Sets"]
-       [:button {:on-click #(st/emit! (wdt/create-token-set {:name (js/window.prompt "Set name")}))} "Create"]]
+       [:button {:on-click #(when-let [set-name (js/window.prompt "Set name")]
+                              (st/emit! (wdt/create-token-set {:name set-name})))} "Create"]]
       [:ul.spaced-y
        (for [[_ {:keys [id name]}] token-sets]
          [:li {:class [(when (= selected-token-set-id id) "selected")]

From bac16aadd80f5583d6291164a62203466c71694e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 10:14:45 +0200
Subject: [PATCH 67/75] Migrate to official UI

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 142 ++++++++----------
 .../app/main/ui/workspace/tokens/sidebar.cljs |  50 ++----
 2 files changed, 76 insertions(+), 116 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 01a2c212e5..f0a27792b6 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -7,95 +7,77 @@
 (ns app.main.ui.workspace.tokens.sets
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data.macros :as dm]
+   [app.main.data.tokens :as wdt]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [okulary.core :as l]
-   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-(def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
-                   #uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
-
-(def sets-root-order [#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
-                      #uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8"
-                      #uuid "0381446e-1f1d-423f-912c-ab577d61b79b"])
-
-(def sets {#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" {:type :group
-                                                         :name "Group A"
-                                                         :children [#uuid "d1754e56-3510-493f-8287-5ef3417d4141"
-                                                                    #uuid "d608877b-842a-473b-83ca-b5f8305caf83"]}
-           #uuid "d608877b-842a-473b-83ca-b5f8305caf83" {:type :set
-                                                         :name "Set A / 1"}
-           #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
-                                                         :name "Group A / B"
-                                                         :children [#uuid "f608877b-842a-473b-83ca-b5f8305caf83"
-                                                                    #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
-           #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
-                                                         :name "Set A / B / 1"}
-           #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb" {:type :set
-                                                         :name "Set A / B / 2"}
-           #uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" {:type :set
-                                                         :name "Set Root 1"}
-           #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
-                                                         :name "Set Root 2"}})
-
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
-(defn set-selected-set
-  [set-id]
-  (dm/assert! (uuid? set-id))
-  (ptk/reify ::set-selected-set
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc state :selected-set-id set-id))))
+(defn on-toggle-token-set-click [id event]
+  (dom/prevent-default event)
+  (dom/stop-propagation event)
+  (st/emit! (wdt/toggle-token-set id)))
+
+(defn on-select-token-set-click [id event]
+  (dom/prevent-default event)
+  (dom/stop-propagation event)
+  (st/emit! (wdt/set-selected-token-set-id id)))
 
 (mf/defc sets-tree
-  [{:keys [selected-set-id set-id]}]
-  (let [set (get sets set-id)]
-    (when set
-      (let [{:keys [type name children]} set
-            visible? (mf/use-state (contains? active-sets set-id))
-            collapsed? (mf/use-state false)
-            icon (if (= type :set) i/document i/group)
-            selected? (mf/use-state (= set-id selected-set-id))
-
-            on-click
-            (mf/use-fn
-             (mf/deps type set-id)
-             (fn [event]
-               (dom/stop-propagation event)
-               (st/emit! (set-selected-set set-id))))]
-        [:div {:class (stl/css :set-item-container)
-               :on-click on-click}
-         [:div {:class (stl/css-case :set-item-group (= type :group)
-                                     :set-item-set  (= type :set)
-                                     :selected-set  (and (= type :set) @selected?))}
-          (when (= type :group)
-            [:span {:class (stl/css-case
-                            :collapsabled-icon true
-                            :collapsed @collapsed?)
-                    :on-click #(when (= type :group) (swap! collapsed? not))}
-             chevron-icon])
-          [:span {:class (stl/css :icon)} icon]
-          [:div {:class (stl/css :set-name)} name]
-          (when (= type :set)
-            [:span {:class (stl/css :action-btn)
-                    :on-click #(swap! visible? not)}
-             (if @visible?
-               i/shown
-               i/hide)])]
-         (when (and children (not @collapsed?))
-           [:div {:class (stl/css :set-children)}
-            (for [child-id children]
-              [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])]))))
+  [{:keys [token-set token-set-active? token-set-selected?] :as _props}]
+  (let [{:keys [id name _children]} token-set
+        selected? (and set? (token-set-selected? id))
+        visible? (token-set-active? id)
+        collapsed? (mf/use-state false)
+        set? true #_(= type :set)
+        group? false #_ (= type :group)]
+    [:div {:class (stl/css :set-item-container)
+           :on-click #(on-select-token-set-click id %)}
+     [:div {:class (stl/css-case :set-item-group group?
+                                 :set-item-set set?
+                                 :selected-set selected?)}
+      (when group?
+        [:span {:class (stl/css-case :collapsabled-icon true
+                                     :collapsed @collapsed?)
+                :on-click #(swap! collapsed? not)}
+         chevron-icon])
+      [:span {:class (stl/css :icon)}
+       (if set? i/document i/group)]
+      [:div {:class (stl/css :set-name)} name]
+      (when set?
+        [:span {:class (stl/css :action-btn)
+                :on-click #(on-toggle-token-set-click id %)}
+         (if visible? i/shown i/hide)])]
+     #_(when (and children (not @collapsed?))
+         [:div {:class (stl/css :set-children)}
+          (for [child-id children]
+            [:& sets-tree (assoc props :key child-id
+                                 {:key child-id}
+                                 :set-id child-id
+                                 :selected-set-id selected-token-set-id)])])]))
 
 (mf/defc sets-list
-  [{:keys [selected-set-id]}]
-  [:ul {:class (stl/css :sets-list)}
-   (for [set-id sets-root-order]
-     [:& sets-tree {:key set-id
-                    :set-id set-id
-                    :selected-set-id selected-set-id}])])
+  [{:keys []}]
+  (let [token-sets (mf/deref refs/workspace-token-sets)
+        selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
+        token-set-selected? (mf/use-callback
+                             (mf/deps selected-token-set-id)
+                             (fn [id]
+                               (= id selected-token-set-id)))
+        active-token-set-ids (mf/deref refs/workspace-active-set-ids)
+        token-set-active? (mf/use-callback
+                           (mf/deps active-token-set-ids)
+                           (fn [id]
+                             (get active-token-set-ids id)))]
+    [:ul {:class (stl/css :sets-list)}
+     (for [[id token-set] token-sets]
+       [:& sets-tree
+        {:key id
+         :token-set token-set
+         :selected-token-set-id selected-token-set-id
+         :token-set-selected? token-set-selected?
+         :token-set-active? token-set-active?}])]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index e4af048134..249bd3c493 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -40,6 +40,14 @@
 (def selected-set-id
   (l/derived :selected-set-id st/state))
 
+ ;; Event Functions -------------------------------------------------------------
+
+(defn on-set-add-click [_event]
+  (when-let [set-name (js/window.prompt "Set name")]
+    (st/emit! (wdt/create-token-set {:name set-name}))))
+
+;; Components ------------------------------------------------------------------
+
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token theme-token highlighted? on-context-menu] :as props}]
@@ -174,10 +182,7 @@
 (mf/defc token-sets
   [_props]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
-        themes (mf/deref refs/workspace-ordered-token-themes)
-        selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
-        active-set-ids (mf/deref refs/workspace-active-set-ids)
-        token-sets (mf/deref refs/workspace-token-sets)]
+        themes (mf/deref refs/workspace-ordered-token-themes)]
     [:div
      [:style
       (str "@scope {"
@@ -189,9 +194,7 @@
                       "b { font-weight: 600; }"])
            "}")]
      [:div.spaced-y
-      {:style {:border-bottom "2px solid grey"
-               :padding "10px"}}
-
+      {:style {:padding "10px"}}
       [:& tokene-theme-create]
       [:div.spaced-y
        [:b "Themes"]
@@ -216,31 +219,7 @@
                                        (dom/prevent-default e)
                                        (dom/stop-propagation e)
                                        (st/emit! (wdt/delete-token-theme id)))}
-                  "🗑️"]]]])]])]]
-      [:div.spaced
-       [:b "Sets"]
-       [:button {:on-click #(when-let [set-name (js/window.prompt "Set name")]
-                              (st/emit! (wdt/create-token-set {:name set-name})))} "Create"]]
-      [:ul.spaced-y
-       (for [[_ {:keys [id name]}] token-sets]
-         [:li {:class [(when (= selected-token-set-id id) "selected")]
-               :on-click (fn []
-                           (st/emit!
-                            (wdt/set-selected-token-set-id id)))}
-          [:div.spaced
-           name
-           [:div.spaced
-            [:button
-             {:on-click (fn [e]
-                          (dom/prevent-default e)
-                          (dom/stop-propagation e)
-                          (st/emit! (wdt/toggle-token-set id)))}
-             (when (get active-set-ids id) "👁️")]
-            [:button {:on-click (fn [e]
-                                  (dom/prevent-default e)
-                                  (dom/stop-propagation e)
-                                  (st/emit! (wdt/delete-token-set id)))}
-             "🗑️"]]]])]]]))
+                  "🗑️"]]]])]])]]]]))
 
 (mf/defc tokens-explorer
   [_props]
@@ -269,8 +248,7 @@
 
 (mf/defc sets-sidebar
   []
-  (let [selected-set-id (mf/deref selected-set-id)
-        open? (mf/use-state true)]
+  (let [open? (mf/use-state true)]
     [:div {:class (stl/css :sets-sidebar)}
      [:div {:class (stl/css :sidebar-header)}
       [:& title-bar {:collapsable true
@@ -279,10 +257,10 @@
                      :title "SETS"
                      :on-collapsed #(swap! open? not)}]
       [:button {:class (stl/css :add-set)
-                :on-click #(println "Add Set")}
+                :on-click on-set-add-click}
        i/add]]
      (when @open?
-       [:& sets-list {:selected-set-id selected-set-id}])]))
+       [:& sets-list])]))
 
 (defn dev-or-preview-url? [url]
   (let [host (-> url js/URL. .-host)

From a9a5f69c935e423ad046e236aa30aadcd2911d54 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 10:15:37 +0200
Subject: [PATCH 68/75] Cleanup

---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 249bd3c493..f4baf096bb 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -204,7 +204,7 @@
            {:key (str "token-theme-group" group)}
            group
            [:ul
-            (for [{:keys [id name] :as theme} themes]
+            (for [{:keys [id name] :as _theme} themes]
               [:li {:key (str "tokene-theme-" id)}
                [:div.spaced
                 name
@@ -221,6 +221,22 @@
                                        (st/emit! (wdt/delete-token-theme id)))}
                   "🗑️"]]]])]])]]]]))
 
+(mf/defc sets-sidebar
+  []
+  (let [open? (mf/use-state true)]
+    [:div {:class (stl/css :sets-sidebar)}
+     [:div {:class (stl/css :sidebar-header)}
+      [:& title-bar {:collapsable true
+                     :collapsed (not @open?)
+                     :all-clickable true
+                     :title "SETS"
+                     :on-collapsed #(swap! open? not)}]
+      [:button {:class (stl/css :add-set)
+                :on-click on-set-add-click}
+       i/add]]
+     (when @open?
+       [:& sets-list])]))
+
 (mf/defc tokens-explorer
   [_props]
   (let [objects (mf/deref refs/workspace-page-objects)
@@ -246,22 +262,6 @@
                              :tokens tokens
                              :token-type-props token-type-props}])]]))
 
-(mf/defc sets-sidebar
-  []
-  (let [open? (mf/use-state true)]
-    [:div {:class (stl/css :sets-sidebar)}
-     [:div {:class (stl/css :sidebar-header)}
-      [:& title-bar {:collapsable true
-                     :collapsed (not @open?)
-                     :all-clickable true
-                     :title "SETS"
-                     :on-collapsed #(swap! open? not)}]
-      [:button {:class (stl/css :add-set)
-                :on-click on-set-add-click}
-       i/add]]
-     (when @open?
-       [:& sets-list])]))
-
 (defn dev-or-preview-url? [url]
   (let [host (-> url js/URL. .-host)
         localhost? (= "localhost" (first (str/split host #":")))

From 88c899c5c6951b3d9cb0f1cdbbcc4cb564f10364 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 10:17:52 +0200
Subject: [PATCH 69/75] Wrap themes ui in header

---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 91 ++++++++++---------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index f4baf096bb..605bae80d6 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -179,47 +179,56 @@
                                                              :name @name}))}
       "Create"]]))
 
-(mf/defc token-sets
+(mf/defc themes-sidebar
   [_props]
-  (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
+  (let [open? (mf/use-state true)
+        active-theme-ids (mf/deref refs/workspace-active-theme-ids)
         themes (mf/deref refs/workspace-ordered-token-themes)]
-    [:div
-     [:style
-      (str "@scope {"
-           (str/join "\n"
-                     ["ul { list-style-type: circle; margin-left: 20px; }"
-                      ".spaced { display: flex; gap: 10px; justify-content: space-between;  }"
-                      ".spaced-y { display: flex; flex-direction: column; gap: 10px }"
-                      ".selected { font-weight: 600; }"
-                      "b { font-weight: 600; }"])
-           "}")]
-     [:div.spaced-y
-      {:style {:padding "10px"}}
-      [:& tokene-theme-create]
-      [:div.spaced-y
-       [:b "Themes"]
-       [:ul
-        (for [[group themes] themes]
-          [:li
-           {:key (str "token-theme-group" group)}
-           group
-           [:ul
-            (for [{:keys [id name] :as _theme} themes]
-              [:li {:key (str "tokene-theme-" id)}
-               [:div.spaced
-                name
-                [:div.spaced
-                 [:button
-                  {:on-click (fn [e]
-                               (dom/prevent-default e)
-                               (dom/stop-propagation e)
-                               (st/emit! (wdt/toggle-token-theme id)))}
-                  (if (get active-theme-ids id) "✅" "❎")]
-                 [:button {:on-click (fn [e]
-                                       (dom/prevent-default e)
-                                       (dom/stop-propagation e)
-                                       (st/emit! (wdt/delete-token-theme id)))}
-                  "🗑️"]]]])]])]]]]))
+    [:div {:class (stl/css :sets-sidebar)}
+     [:div {:class (stl/css :sidebar-header)}
+      [:& title-bar {:collapsable true
+                     :collapsed (not @open?)
+                     :all-clickable true
+                     :title "THEMES"
+                     :on-collapsed #(swap! open? not)}]]
+     (when @open?
+       [:div
+        [:style
+         (str "@scope {"
+              (str/join "\n"
+                        ["ul { list-style-type: circle; margin-left: 20px; }"
+                         ".spaced { display: flex; gap: 10px; justify-content: space-between;  }"
+                         ".spaced-y { display: flex; flex-direction: column; gap: 10px }"
+                         ".selected { font-weight: 600; }"
+                         "b { font-weight: 600; }"])
+              "}")]
+        [:div.spaced-y
+         {:style {:padding "10px"}}
+         [:& tokene-theme-create]
+         [:div.spaced-y
+          [:b "Themes"]
+          [:ul
+           (for [[group themes] themes]
+             [:li
+              {:key (str "token-theme-group" group)}
+              group
+              [:ul
+               (for [{:keys [id name] :as _theme} themes]
+                 [:li {:key (str "tokene-theme-" id)}
+                  [:div.spaced
+                   name
+                   [:div.spaced
+                    [:button
+                     {:on-click (fn [e]
+                                  (dom/prevent-default e)
+                                  (dom/stop-propagation e)
+                                  (st/emit! (wdt/toggle-token-theme id)))}
+                     (if (get active-theme-ids id) "✅" "❎")]
+                    [:button {:on-click (fn [e]
+                                          (dom/prevent-default e)
+                                          (dom/stop-propagation e)
+                                          (st/emit! (wdt/delete-token-theme id)))}
+                     "🗑️"]]]])]])]]]])]))
 
 (mf/defc sets-sidebar
   []
@@ -292,8 +301,8 @@
     [:div {:class (stl/css :sidebar-tab-wrapper)}
      (when show-sets-section?
        [:div {:class (stl/css :sets-section-wrapper)}
-        [:& sets-sidebar]
-        [:& token-sets]])
+        [:& themes-sidebar]
+        [:& sets-sidebar]])
      [:div {:class (stl/css :tokens-section-wrapper)}
       [:& tokens-explorer]]
      [:button {:class (stl/css :download-json-button)

From 97f119f3da0e1c11e697203b39d0063d29055cbb Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 11:32:54 +0200
Subject: [PATCH 70/75] Add delete set action button

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 12 ++++++---
 .../app/main/ui/workspace/tokens/sets.scss    | 25 +++++++++++++++++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index f0a27792b6..852844bf51 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -18,15 +18,16 @@
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
 (defn on-toggle-token-set-click [id event]
-  (dom/prevent-default event)
   (dom/stop-propagation event)
   (st/emit! (wdt/toggle-token-set id)))
 
 (defn on-select-token-set-click [id event]
-  (dom/prevent-default event)
-  (dom/stop-propagation event)
   (st/emit! (wdt/set-selected-token-set-id id)))
 
+(defn on-delete-token-set-click [id event]
+  (dom/stop-propagation event)
+  (st/emit! (wdt/delete-token-set id)))
+
 (mf/defc sets-tree
   [{:keys [token-set token-set-active? token-set-selected?] :as _props}]
   (let [{:keys [id name _children]} token-set
@@ -34,7 +35,7 @@
         visible? (token-set-active? id)
         collapsed? (mf/use-state false)
         set? true #_(= type :set)
-        group? false #_ (= type :group)]
+        group? false #_(= type :group)]
     [:div {:class (stl/css :set-item-container)
            :on-click #(on-select-token-set-click id %)}
      [:div {:class (stl/css-case :set-item-group group?
@@ -48,6 +49,9 @@
       [:span {:class (stl/css :icon)}
        (if set? i/document i/group)]
       [:div {:class (stl/css :set-name)} name]
+      [:div {:class (stl/css :delete-set)}
+       [:button {:on-click #(on-delete-token-set-click id %)}
+        i/delete]]
       (when set?
         [:span {:class (stl/css :action-btn)
                 :on-click #(on-toggle-token-set-click id %)}
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 5c32bf199b..d4b21746ae 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -56,6 +56,10 @@
     background-color: var(--layer-row-background-color-hover);
     color: var(--layer-row-foreground-color-hover);
     box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
+
+    .delete-set {
+      visibility: visible;
+    }
   }
 }
 
@@ -65,6 +69,27 @@
   box-shadow: -100px 0 0 0 var(--layer-row-background-color-selected);
 }
 
+.delete-set {
+  @extend .button-tertiary;
+  height: $s-28;
+  width: $s-28;
+  visibility: hidden;
+  button {
+    @include buttonStyle;
+    @include flexCenter;
+    width: $s-24;
+    height: 100%;
+    svg {
+      @extend .button-icon-small;
+      height: $s-12;
+      width: $s-12;
+      color: transparent;
+      fill: none;
+      stroke: var(--icon-foreground);
+    }
+  }
+}
+
 .action-btn {
   @extend .button-tertiary;
   height: $s-28;

From acc3606cbb818c7c20732391ef93828b890f81f0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 11:36:54 +0200
Subject: [PATCH 71/75] Align Eye

---
 frontend/src/app/main/ui/workspace/tokens/sets.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index d4b21746ae..af07c6e1d0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -28,6 +28,8 @@
   width: 100%;
   cursor: pointer;
   color: var(--layer-row-foreground-color);
+  padding-right: $s-2;
+
   .set-name {
     @include textEllipsis;
     flex-grow: 1;

From 40846b87c26a8555feb530db68d43bd59cc88cbb Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 11:39:13 +0200
Subject: [PATCH 72/75] Add tokens header

---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 605bae80d6..c0de3321fc 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -248,7 +248,8 @@
 
 (mf/defc tokens-explorer
   [_props]
-  (let [objects (mf/deref refs/workspace-page-objects)
+  (let [open? (mf/use-state true)
+        objects (mf/deref refs/workspace-page-objects)
 
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
@@ -261,15 +262,21 @@
                        (sorted-token-groups tokens))]
     [:article
      [:& token-context-menu]
-     [:div.assets-bar
-      (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups)
-                                                                (:empty token-groups))]
-        [:& token-component {:key token-key
-                             :type token-key
-                             :selected-shapes selected-shapes
-                             :active-theme-tokens active-theme-tokens
-                             :tokens tokens
-                             :token-type-props token-type-props}])]]))
+     [:& title-bar {:collapsable true
+                    :collapsed (not @open?)
+                    :all-clickable true
+                    :title "TOKENS"
+                    :on-collapsed #(swap! open? not)}]
+     (when @open?
+       [:div.assets-bar
+        (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups)
+                                                                  (:empty token-groups))]
+          [:& token-component {:key token-key
+                               :type token-key
+                               :selected-shapes selected-shapes
+                               :active-theme-tokens active-theme-tokens
+                               :tokens tokens
+                               :token-type-props token-type-props}])])]))
 
 (defn dev-or-preview-url? [url]
   (let [host (-> url js/URL. .-host)

From 1cc1d94a27ae05b70e5770e7dd5e4aaa1ef74868 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 11:42:14 +0200
Subject: [PATCH 73/75] Automatically open when adding token

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c0de3321fc..dbf5a1a8dd 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -106,6 +106,7 @@
                                (fn [event]
                                  (let [{:keys [key fields]} modal]
                                    (dom/stop-propagation event)
+                                   (st/emit! (dt/set-token-type-section-open type true))
                                    (modal/show! key {:x (.-clientX ^js event)
                                                      :y (.-clientY ^js event)
                                                      :position :right
@@ -126,7 +127,6 @@
      [:& cmm/asset-section {:icon (mf/fnc icon-wrapper [_]
                                     [:div {:class (stl/css :section-icon)}
                                      [:& token-section-icon {:type type}]])
-
                             :title title
                             :assets-count tokens-count
                             :open? open?}

From b48bfde5c8a6894ef9e279cea76a5b672be717bd Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 11:43:19 +0200
Subject: [PATCH 74/75] Automatically open when creating set

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index dbf5a1a8dd..b9e6c6a87a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -241,7 +241,9 @@
                      :title "SETS"
                      :on-collapsed #(swap! open? not)}]
       [:button {:class (stl/css :add-set)
-                :on-click on-set-add-click}
+                :on-click #(do
+                             (reset! open? true)
+                             (on-set-add-click %))}
        i/add]]
      (when @open?
        [:& sets-list])]))

From 1ed6d92d87d1042220a55ca1c5cc3ca21d98f701 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 13:36:46 +0200
Subject: [PATCH 75/75] Remove margin

---
 frontend/src/app/main/ui/workspace/tokens/sets.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index af07c6e1d0..a2049236e0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -8,7 +8,7 @@
 
 .sets-list {
   width: 100%;
-  margin-bottom: $s-12;
+  margin-bottom: 0;
   overflow-y: auto;
 }