🐛 Fix error message on components doesn't close automatically

* ✨ Replace border radius numeric input

* ✨ Add border radius token inputs on multiple selection

.github/workflows/build-bundle.yml

@@ -40,7 +40,7 @@ on:
 jobs:
   build-bundle:
     name: Build and Upload Penpot Bundle
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     env:
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

.github/workflows/build-docker-devenv.yml

@@ -7,7 +7,7 @@ jobs:
   build-and-push:
     name: Build and push DevEnv Docker image
     environment: release-admins
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code

.github/workflows/build-docker.yml

@@ -19,7 +19,7 @@ on:
 jobs:
   build-and-push:
     name: Build and Push Penpot Docker Images
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout code

.github/workflows/tests.yml

@@ -21,7 +21,7 @@ concurrency:
 jobs:
   lint:
     name: "Linter"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     steps:
@@ -34,7 +34,7 @@ jobs:
 
   test-common:
     name: "Common Tests"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     steps:
@@ -53,7 +53,7 @@ jobs:
 
   test-plugins:
     name: Plugins Runtime Linter & Tests
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
 
     steps:
       - uses: actions/checkout@v4
@@ -98,7 +98,7 @@ jobs:
 
   test-frontend:
     name: "Frontend Tests"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     steps:
@@ -119,7 +119,7 @@ jobs:
 
   test-render-wasm:
     name: "Render WASM Tests"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     steps:
@@ -143,7 +143,7 @@ jobs:
 
   test-backend:
     name: "Backend Tests"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     services:
@@ -182,7 +182,7 @@ jobs:
 
   test-library:
     name: "Library Tests"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     steps:
@@ -196,7 +196,7 @@ jobs:
 
   build-integration:
     name: "Build Integration Bundle"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
     steps:
@@ -217,7 +217,7 @@ jobs:
 
   test-integration-1:
     name: "Integration Tests 1/4"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
     needs: build-integration
 
@@ -247,7 +247,7 @@ jobs:
 
   test-integration-2:
     name: "Integration Tests 2/4"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
     needs: build-integration
 
@@ -277,7 +277,7 @@ jobs:
 
   test-integration-3:
     name: "Integration Tests 3/4"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
     needs: build-integration
 
@@ -307,7 +307,7 @@ jobs:
 
   test-integration-4:
     name: "Integration Tests 4/4"
-    runs-on: self-hosted
+    runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
     needs: build-integration
 

CHANGES.md

@@ -16,7 +16,8 @@
 
 ### :bug: Bugs fixed
 
-### :bug: Bugs fixed
+- Fix prototype connections lost when switching between variants [Taiga #12812](https://tree.taiga.io/project/penpot/issue/12812)
+- Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
 
 ## 2.13.0 (Unreleased)
 

common/src/app/common/files/changes.cljc

@@ -27,7 +27,6 @@
    [app.common.types.path :as path]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
-   [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.common.types.typographies-list :as ctyl]
    [app.common.types.typography :as ctt]
@@ -379,7 +378,7 @@
      [:type [:= :set-token]]
      [:set-id ::sm/uuid]
      [:token-id ::sm/uuid]
-     [:attrs [:maybe cto/schema:token-attrs]]]]
+     [:attrs [:maybe ctob/schema:token-attrs]]]]
 
    [:set-token-set
     [:map {:title "SetTokenSetChange"}

common/src/app/common/files/tokens.cljc

@@ -8,112 +8,9 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.i18n :refer [tr]]
-   [app.common.schema :as sm]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
    [clojure.set :as set]
    [cuerdas.core :as str]))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HIGH LEVEL SCHEMAS
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-;; Token
-
-(defn make-token-name-schema
-  "Dynamically generates a schema to check a token name, adding translated error messages
-   and two additional validations:
-    - Min and max length.
-    - Checks if other token with a path derived from the name already exists at `tokens-tree`.
-      e.g. it's not allowed to create a token `foo.bar` if a token `foo` already exists."
-  [tokens-tree]
-  [:and
-   (-> cto/schema:token-name
-       (sm/update-properties assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error"))))
-   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-    #(not (ctob/token-name-path-exists? % tokens-tree))]])
-
-(def schema:token-description
-  [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}])
-
-(defn make-token-schema
-  [tokens-tree]
-  (sm/merge
-   cto/schema:token-attrs
-   [:map
-    [:name (make-token-name-schema tokens-tree)]
-    [:description {:optional true} schema:token-description]]))
-
-;; Token set
-
-(defn make-token-set-name-schema
-  "Generates a dynamic schema to check a token set name:
-    - Validate name length.
-    - Checks if other token set with a path derived from the name already exists in the tokens lib."
-  [tokens-lib set-id]
-  [:and
-   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   [:fn {:error/fn #(tr "errors.token-set-already-exists" (:value %))}
-    (fn [name]
-      (let [set (ctob/get-set-by-name tokens-lib name)]
-        (or (nil? set) (= (ctob/get-id set) set-id))))]])
-
-(def schema:token-set-description
-  [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}])
-
-(defn make-token-set-schema
-  [tokens-lib set-id]
-  (sm/merge
-   ctob/schema:token-set-attrs
-   [:map
-    [:name [:and (make-token-set-name-schema tokens-lib set-id)
-            [:fn #(ctob/normalized-set-name? %)]]]
-    [:description {:optional true} schema:token-set-description]]))
-
-;; Token theme
-
-(defn make-token-theme-group-schema
-  "Generates a dynamic schema to check a token theme group:
-    - Validate group length.
-    - Checks if other token theme with the same name already exists in the new group in the tokens lib."
-  [tokens-lib name theme-id]
-  [:and
-   [:string {:min 0 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   [:fn {:error/fn #(tr "errors.token-theme-already-exists" (:value %))}
-    (fn [group]
-      (let [theme (ctob/get-theme-by-name tokens-lib group name)]
-        (or (nil? theme) (= (:id theme) theme-id))))]])
-
-(defn make-token-theme-name-schema
-  "Generates a dynamic schema to check a token theme name:
-    - Validate name length.
-    - Checks if other token theme with the same name already exists in the same group in the tokens lib."
-  [tokens-lib group theme-id]
-  [:and
-   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   [:fn {:error/fn #(tr "errors.token-theme-already-exists" (str group "/" (:value %)))}
-    (fn [name]
-      (let [theme (ctob/get-theme-by-name tokens-lib group name)]
-        (or (nil? theme) (= (:id theme) theme-id))))]])
-
-(def schema:token-theme-description
-  [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}])
-
-(defn make-token-theme-schema
-  [tokens-lib group name theme-id]
-  (sm/merge
-   ctob/schema:token-theme-attrs
-   [:map
-    [:group (make-token-theme-group-schema tokens-lib name theme-id)] ;; TODO how to keep error-fn from here?
-    [:name (make-token-theme-name-schema tokens-lib group theme-id)]
-    [:description {:optional true} schema:token-theme-description]]))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
 (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."
@@ -183,6 +80,56 @@
 (defn shapes-applied-all? [ids-by-attributes shape-ids attributes]
   (every? #(set/superset? (get ids-by-attributes %) shape-ids) attributes))
 
+(defn token-name->path
+  "Splits token-name into a path vector split by `.` characters.
+
+  Will concatenate multiple `.` characters into one."
+  [token-name]
+  (str/split token-name #"\.+"))
+
+(defn token-name->path-selector
+  "Splits token-name into map with `:path` and `:selector` using `token-name->path`.
+
+  `:selector` is the last item of the names path
+  `:path` is everything leading up the the `:selector`."
+  [token-name]
+  (let [path-segments (token-name->path token-name)
+        last-idx (dec (count path-segments))
+        [path [selector]] (split-at last-idx path-segments)]
+    {:path (seq path)
+     :selector selector}))
+
+(defn token-name-path-exists?
+  "Traverses the path from `token-name` down a `token-tree` and checks if a token at that path exists.
+
+  It's not allowed to create a token inside a token. E.g.:
+  Creating a token with
+
+    {:name \"foo.bar\"}
+
+  in the tokens tree:
+
+    {\"foo\" {:name \"other\"}}"
+  [token-name token-names-tree]
+  (let [{:keys [path selector]} (token-name->path-selector token-name)
+        path-target (reduce
+                     (fn [acc cur]
+                       (let [target (get acc cur)]
+                         (cond
+                           ;; Path segment doesn't exist yet
+                           (nil? target) (reduced false)
+                           ;; A token exists at this path
+                           (:name target) (reduced true)
+                           ;; Continue traversing the true
+                           :else target)))
+                     token-names-tree path)]
+    (cond
+      (boolean? path-target) path-target
+      (get path-target :name) true
+      :else (-> (get path-target selector)
+                (seq)
+                (boolean)))))
+
 (defn color-token? [token]
   (= (:type token) :color))
 

common/src/app/common/i18n.cljc

@@ -1,15 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.common.i18n
-  "Dummy i18n functions, to be used by code in common that needs translations.")
-
-(defn tr
-  "This function will be monkeypatched at runtime with the real function in frontend i18n.
-   Here it just returns the key passed as argument. This way the result can be used in
-   unit tests or backend code for logs or error messages."
-  [key & _args]
-  key)

common/src/app/common/logic/libraries.cljc

@@ -2497,7 +2497,7 @@
         (-> changes
             (cls/generate-delete-shapes
              file page objects (d/ordered-set (:id shape))
-             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true}))
+             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true :ignore-flows-for #{(:id shape)}}))
         [new-shape changes]
         (-> changes
             (generate-new-shape-for-swap shape file page libraries id-new-component index target-cell keep-props-values))]

common/src/app/common/logic/shapes.cljc

@@ -58,7 +58,7 @@
                               (cto/shape-attr->token-attrs attr changed-sub-attr))]
 
             (if (some #(contains? tokens %) token-attrs)
-              (pcb/update-shapes changes [shape-id] #(cto/unapply-tokens-from-shape % token-attrs))
+              (pcb/update-shapes changes [shape-id] #(cto/unapply-token-id % token-attrs))
               changes)))
 
         check-shape
@@ -124,9 +124,11 @@
                         ;; on the deletion process. It should receive a shape and
                         ;; return a boolean
                         ignore-children-fn
-                        ignore-mask]
+                        ignore-mask
+                        ignore-flows-for]
                  :or {ignore-children-fn (constantly false)
-                      ignore-mask false}}]
+                      ignore-mask false
+                      ignore-flows-for #{}}}]
    (let [objects (pcb/get-objects changes)
          data    (pcb/get-library-data changes)
          page-id (pcb/get-page-id changes)
@@ -194,7 +196,8 @@
          (->> (:flows page)
               (reduce
                (fn [changes [id flow]]
-                 (if (id-to-delete? (:starting-frame flow))
+                 (if (and (id-to-delete? (:starting-frame flow))
+                          (not (contains? ignore-flows-for (:starting-frame flow))))
                    (-> changes
                        (pcb/with-page page)
                        (pcb/set-flow id nil))

common/src/app/common/schema.cljc

@@ -92,16 +92,6 @@
   [& items]
   (apply mu/merge (map schema items)))
 
-(defn assoc-key
-  "Add a key & value to a schema"
-  [s k v]
-  (mu/assoc (schema s) k v))
-
-(defn dissoc-key
-  "Remove a key from a schema"
-  [s k]
-  (mu/dissoc (schema s) k))
-
 (defn ref?
   [s]
   (m/-ref-schema? s))
@@ -280,13 +270,6 @@
      (let [explain (fn [] (me/with-error-messages explain))]
        ((mdp/prettifier variant message explain default-options)))))
 
-(defn validation-errors
-  "Checks a value against a schema. If valid, returns nil. If not, returns a list
-   of english error messages."
-  [value schema]
-  (let [explainer (explainer schema)]
-    (-> value explainer simplify not-empty)))
-
 (defmacro ignoring
   [expr]
   (if (:ns &env)

common/src/app/common/types/component.cljc

@@ -140,7 +140,8 @@
     :layout-item-min-w
     :layout-item-absolute
     :layout-item-z-index
-    :layout-item-align-self})
+    :layout-item-align-self
+    :interactions})
 
 (defn component-attr?
   "Check if some attribute is one that is involved in component syncrhonization.

common/src/app/common/types/token.cljc

@@ -9,13 +9,13 @@
    [app.common.data :as d]
    [app.common.schema :as sm]
    [app.common.schema.generators :as sg]
-   [app.common.time :as ct]
+   [clojure.data :as data]
    [clojure.set :as set]
    [cuerdas.core :as str]
    [malli.util :as mu]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; GENERAL HELPERS
+;; HELPERS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn- schema-keys
@@ -45,7 +45,7 @@
   [token-name token-value]
   (let [token-references (find-token-value-references token-value)
         self-reference? (get token-references token-name)]
-    (boolean self-reference?)))
+    self-reference?))
 
 (defn references-token?
   "Recursively check if a value references the token name. Handles strings, maps, and sequences."
@@ -59,26 +59,6 @@
     (some true? (map #(references-token? % token-name) value))
     :else false))
 
-(defn composite-token-reference?
-  "Predicate if a composite token is a reference value - a string pointing to another token."
-  [token-value]
-  (string? token-value))
-
-(defn update-token-value-references
-  "Recursively update token references within a token value, supporting complex token values (maps, sequences, strings)."
-  [value old-name new-name]
-  (cond
-    (string? value)
-    (str/replace value
-                 (re-pattern (str "\\{" (str/replace old-name "." "\\.") "\\}"))
-                 (str "{" new-name "}"))
-    (map? value)
-    (d/update-vals value #(update-token-value-references % old-name new-name))
-    (sequential? value)
-    (mapv #(update-token-value-references % old-name new-name) value)
-    :else
-    value))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SCHEMA
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -86,6 +66,7 @@
 (def token-type->dtcg-token-type
   {:boolean         "boolean"
    :border-radius   "borderRadius"
+   :shadow          "shadow"
    :color           "color"
    :dimensions      "dimension"
    :font-family     "fontFamilies"
@@ -96,7 +77,6 @@
    :opacity         "opacity"
    :other           "other"
    :rotation        "rotation"
-   :shadow          "shadow"
    :sizing          "sizing"
    :spacing         "spacing"
    :string          "string"
@@ -114,13 +94,14 @@
              "boxShadow" :shadow)))
 
 (def composite-token-type->dtcg-token-type
-  "When converting the type of one element inside a composite token, an additional type
-   :line-height is available, that is not allowed for a standalone token."
+  "Custom set of conversion keys for composite typography token with `:line-height` available.
+  (Penpot doesn't support `:line-height` token)"
   (assoc token-type->dtcg-token-type
          :line-height "lineHeights"))
 
 (def composite-dtcg-token-type->token-type
-  "Same as above, in the opposite direction."
+  "Custom set of conversion keys for composite typography token with `:line-height` available.
+  (Penpot doesn't support `:line-height` token)"
   (assoc dtcg-token-type->token-type
          "lineHeights" :line-height
          "lineHeight"  :line-height))
@@ -128,111 +109,83 @@
 (def token-types
   (into #{} (keys token-type->dtcg-token-type)))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; SCHEMA: Token
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(def schema:token-name
-  "A token name can contains letters, numbers, underscores the character $ and dots, but
-   not start with $ or end with a dot. The $ character does not have any special meaning,
-   but dots separate token groups (e.g. color.primary.background)."
-  [:re {:title "TokenName"
-        :gen/gen sg/text}
+(def token-name-ref
+  [:re {:title "TokenNameRef" :gen/gen sg/text}
    #"^(?!\$)([a-zA-Z0-9-$_]+\.?)*(?<!\.)$"])
 
-(def schema:token-type
-  [::sm/one-of {:decode/json (fn [type]
-                               (if (string? type)
-                                 (dtcg-token-type->token-type type)
-                                 type))}
-
-   token-types])
-
-(def schema:token-attrs
-  [:map {:title "Token"}
-   [:id ::sm/uuid]
-   [:name schema:token-name]
-   [:type schema:token-type]
-   [:value ::sm/any]
-   [:description {:optional true} :string]
-   [:modified-at {:optional true} ::ct/inst]])
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; SCHEMA: Token application to shape
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-;; All the following schemas define the `:applied-tokens` attribute of a shape.
-;; This attribute is a map <token-attribute> -> <token-name>.
-;; Token attributes approximately match shape attributes, but not always.
-;; For each schema there is a `*keys` set including all the possible token attributes
-;; to which a token of the corresponding type can be applied.
-;; Some token types can be applied to some attributes only if the shape has a
-;; particular condition (i.e. has a layout itself or is a layout item).
-
-(def ^:private schema:border-radius
-  [:map {:title "BorderRadiusTokenAttrs"}
-   [:r1 {:optional true} schema:token-name]
-   [:r2 {:optional true} schema:token-name]
-   [:r3 {:optional true} schema:token-name]
-   [:r4 {:optional true} schema:token-name]])
-
-(def border-radius-keys (schema-keys schema:border-radius))
-
 (def ^:private schema:color
   [:map
-   [:fill {:optional true} schema:token-name]
-   [:stroke-color {:optional true} schema:token-name]])
+   [:fill {:optional true} token-name-ref]
+   [:stroke-color {:optional true} token-name-ref]])
 
 (def color-keys (schema-keys schema:color))
 
+(def ^:private schema:border-radius
+  [:map {:title "BorderRadiusTokenAttrs"}
+   [:r1 {:optional true} token-name-ref]
+   [:r2 {:optional true} token-name-ref]
+   [:r3 {:optional true} token-name-ref]
+   [:r4 {:optional true} token-name-ref]])
+
+(def border-radius-keys (schema-keys schema:border-radius))
+
+(def ^:private schema:shadow
+  [:map {:title "ShadowTokenAttrs"}
+   [:shadow {:optional true} token-name-ref]])
+
+(def shadow-keys (schema-keys schema:shadow))
+
+(def ^:private schema:stroke-width
+  [:map
+   [:stroke-width {:optional true} token-name-ref]])
+
+(def stroke-width-keys (schema-keys schema:stroke-width))
+
 (def ^:private schema:sizing-base
   [:map {:title "SizingBaseTokenAttrs"}
-   [:width {:optional true} schema:token-name]
-   [:height {:optional true} schema:token-name]])
+   [:width {:optional true} token-name-ref]
+   [:height {:optional true} token-name-ref]])
 
 (def ^:private schema:sizing-layout-item
   [:map {:title "SizingLayoutItemTokenAttrs"}
-   [:layout-item-min-w {:optional true} schema:token-name]
-   [:layout-item-max-w {:optional true} schema:token-name]
-   [:layout-item-min-h {:optional true} schema:token-name]
-   [:layout-item-max-h {:optional true} schema:token-name]])
-
-(def sizing-layout-item-keys (schema-keys schema:sizing-layout-item))
+   [:layout-item-min-w {:optional true} token-name-ref]
+   [:layout-item-max-w {:optional true} token-name-ref]
+   [:layout-item-min-h {:optional true} token-name-ref]
+   [:layout-item-max-h {:optional true} token-name-ref]])
 
 (def ^:private schema:sizing
   (-> (reduce mu/union [schema:sizing-base
                         schema:sizing-layout-item])
       (mu/update-properties assoc :title "SizingTokenAttrs")))
 
+(def sizing-layout-item-keys (schema-keys schema:sizing-layout-item))
+
 (def sizing-keys (schema-keys schema:sizing))
 
+(def ^:private schema:opacity
+  [:map {:title "OpacityTokenAttrs"}
+   [:opacity {:optional true} token-name-ref]])
+
+(def opacity-keys (schema-keys schema:opacity))
+
 (def ^:private schema:spacing-gap
   [:map {:title "SpacingGapTokenAttrs"}
-   [:row-gap {:optional true} schema:token-name]
-   [:column-gap {:optional true} schema:token-name]])
+   [:row-gap {:optional true} token-name-ref]
+   [:column-gap {:optional true} token-name-ref]])
 
 (def ^:private schema:spacing-padding
   [:map {:title "SpacingPaddingTokenAttrs"}
-   [:p1 {:optional true} schema:token-name]
-   [:p2 {:optional true} schema:token-name]
-   [:p3 {:optional true} schema:token-name]
-   [:p4 {:optional true} schema:token-name]])
-
-(def ^:private schema:spacing-gap-padding
-  (-> (reduce mu/union [schema:spacing-gap
-                        schema:spacing-padding])
-      (mu/update-properties assoc :title "SpacingGapPaddingTokenAttrs")))
-
-(def spacing-gap-padding-keys (schema-keys schema:spacing-gap-padding))
+   [:p1 {:optional true} token-name-ref]
+   [:p2 {:optional true} token-name-ref]
+   [:p3 {:optional true} token-name-ref]
+   [:p4 {:optional true} token-name-ref]])
 
 (def ^:private schema:spacing-margin
   [:map {:title "SpacingMarginTokenAttrs"}
-   [:m1 {:optional true} schema:token-name]
-   [:m2 {:optional true} schema:token-name]
-   [:m3 {:optional true} schema:token-name]
-   [:m4 {:optional true} schema:token-name]])
-
-(def spacing-margin-keys (schema-keys schema:spacing-margin))
+   [:m1 {:optional true} token-name-ref]
+   [:m2 {:optional true} token-name-ref]
+   [:m3 {:optional true} token-name-ref]
+   [:m4 {:optional true} token-name-ref]])
 
 (def ^:private schema:spacing
   (-> (reduce mu/union [schema:spacing-gap
@@ -240,13 +193,16 @@
                         schema:spacing-margin])
       (mu/update-properties assoc :title "SpacingTokenAttrs")))
 
+(def spacing-margin-keys (schema-keys schema:spacing-margin))
+
 (def spacing-keys (schema-keys schema:spacing))
 
-(def ^:private schema:stroke-width
-  [:map
-   [:stroke-width {:optional true} schema:token-name]])
+(def ^:private schema:spacing-gap-padding
+  (-> (reduce mu/union [schema:spacing-gap
+                        schema:spacing-padding])
+      (mu/update-properties assoc :title "SpacingGapPaddingTokenAttrs")))
 
-(def stroke-width-keys (schema-keys schema:stroke-width))
+(def spacing-gap-padding-keys (schema-keys schema:spacing-gap-padding))
 
 (def ^:private schema:dimensions
   (-> (reduce mu/union [schema:sizing
@@ -257,109 +213,91 @@
 
 (def dimensions-keys (schema-keys schema:dimensions))
 
-(def ^:private schema:font-family
+(def ^:private schema:axis
   [:map
-   [:font-family {:optional true} schema:token-name]])
+   [:x {:optional true} token-name-ref]
+   [:y {:optional true} token-name-ref]])
 
-(def font-family-keys (schema-keys schema:font-family))
-
-(def ^:private schema:font-size
-  [:map {:title "FontSizeTokenAttrs"}
-   [:font-size {:optional true} schema:token-name]])
-
-(def font-size-keys (schema-keys schema:font-size))
-
-(def ^:private schema:font-weight
-  [:map
-   [:font-weight {:optional true} schema:token-name]])
-
-(def font-weight-keys (schema-keys schema:font-weight))
-
-(def ^:private schema:letter-spacing
-  [:map {:title "LetterSpacingTokenAttrs"}
-   [:letter-spacing {:optional true} schema:token-name]])
-
-(def letter-spacing-keys (schema-keys schema:letter-spacing))
-
-(def ^:private schema:line-height        ;; This is not available for standalone tokens, only typography
-  [:map {:title "LineHeightTokenAttrs"}
-   [:line-height {:optional true} schema:token-name]])
-
-(def line-height-keys (schema-keys schema:line-height))
+(def axis-keys (schema-keys schema:axis))
 
 (def ^:private schema:rotation
   [:map {:title "RotationTokenAttrs"}
-   [:rotation {:optional true} schema:token-name]])
+   [:rotation {:optional true} token-name-ref]])
 
 (def rotation-keys (schema-keys schema:rotation))
 
+(def ^:private schema:font-size
+  [:map {:title "FontSizeTokenAttrs"}
+   [:font-size {:optional true} token-name-ref]])
+
+(def font-size-keys (schema-keys schema:font-size))
+
+(def ^:private schema:letter-spacing
+  [:map {:title "LetterSpacingTokenAttrs"}
+   [:letter-spacing {:optional true} token-name-ref]])
+
+(def letter-spacing-keys (schema-keys schema:letter-spacing))
+
+(def ^:private schema:font-family
+  [:map
+   [:font-family {:optional true} token-name-ref]])
+
+(def font-family-keys (schema-keys schema:font-family))
+
+(def ^:private schema:text-case
+  [:map
+   [:text-case {:optional true} token-name-ref]])
+
+(def text-case-keys (schema-keys schema:text-case))
+
+(def ^:private schema:font-weight
+  [:map
+   [:font-weight {:optional true} token-name-ref]])
+
+(def font-weight-keys (schema-keys schema:font-weight))
+
+(def ^:private schema:typography
+  [:map
+   [:typography {:optional true} token-name-ref]])
+
+(def typography-token-keys (schema-keys schema:typography))
+
+(def ^:private schema:text-decoration
+  [:map
+   [:text-decoration {:optional true} token-name-ref]])
+
+(def text-decoration-keys (schema-keys schema:text-decoration))
+
+(def typography-keys (set/union font-size-keys
+                                letter-spacing-keys
+                                font-family-keys
+                                font-weight-keys
+                                text-case-keys
+                                text-decoration-keys
+                                font-weight-keys
+                                typography-token-keys
+                                #{:line-height}))
+
 (def ^:private schema:number
-  (-> (reduce mu/union [schema:line-height
+  (-> (reduce mu/union [[:map [:line-height {:optional true} token-name-ref]]
                         schema:rotation])
       (mu/update-properties assoc :title "NumberTokenAttrs")))
 
 (def number-keys (schema-keys schema:number))
 
-(def ^:private schema:opacity
-  [:map {:title "OpacityTokenAttrs"}
-   [:opacity {:optional true} schema:token-name]])
-
-(def opacity-keys (schema-keys schema:opacity))
-
-(def ^:private schema:shadow
-  [:map {:title "ShadowTokenAttrs"}
-   [:shadow {:optional true} schema:token-name]])
-
-(def shadow-keys (schema-keys schema:shadow))
-
-(def ^:private schema:text-case
-  [:map
-   [:text-case {:optional true} schema:token-name]])
-
-(def text-case-keys (schema-keys schema:text-case))
-
-(def ^:private schema:text-decoration
-  [:map
-   [:text-decoration {:optional true} schema:token-name]])
-
-(def text-decoration-keys (schema-keys schema:text-decoration))
-
-(def ^:private schema:typography
-  [:map
-   [:typography {:optional true} schema:token-name]])
-
-(def typography-token-keys (schema-keys schema:typography))
-
-(def typography-keys (set/union font-family-keys
-                                font-size-keys
-                                font-weight-keys
-                                font-weight-keys
-                                letter-spacing-keys
-                                line-height-keys
-                                text-case-keys
-                                text-decoration-keys
-                                typography-token-keys))
-
-(def ^:private schema:axis
-  [:map
-   [:x {:optional true} schema:token-name]
-   [:y {:optional true} schema:token-name]])
-
-(def axis-keys (schema-keys schema:axis))
-
-(def all-keys (set/union axis-keys
+(def all-keys (set/union color-keys
                          border-radius-keys
-                         color-keys
-                         dimensions-keys
-                         number-keys
-                         opacity-keys
-                         rotation-keys
                          shadow-keys
-                         sizing-keys
-                         spacing-keys
                          stroke-width-keys
+                         sizing-keys
+                         opacity-keys
+                         spacing-keys
+                         dimensions-keys
+                         axis-keys
+                         rotation-keys
                          typography-keys
-                         typography-token-keys))
+                         typography-token-keys
+                         number-keys))
 
 (def ^:private schema:tokens
   [:map {:title "GenericTokenAttrs"}])
@@ -380,28 +318,11 @@
    schema:text-decoration
    schema:dimensions])
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS for conversion between token attrs and shape attrs
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
 (defn token-attr?
   [attr]
   (contains? all-keys attr))
 
-(defn token-attr->shape-attr
-  "Returns the actual shape attribute affected when a token have been applied
-   to a given `token-attr`."
-  [token-attr]
-  (case token-attr
-    :fill :fills
-    :stroke-color :strokes
-    :stroke-width :strokes
-    token-attr))
-
 (defn shape-attr->token-attrs
-  "Returns the token-attr affected when a given attribute in a shape is changed.
-   The sub-attr is for attributes that may have multiple values, like strokes
-   (may be width or color) and layout padding & margin (may have 4 edges)."
   ([shape-attr] (shape-attr->token-attrs shape-attr nil))
   ([shape-attr changed-sub-attr]
    (cond
@@ -443,13 +364,21 @@
      (number-keys shape-attr) #{shape-attr}
      (axis-keys shape-attr) #{shape-attr})))
 
+(defn token-attr->shape-attr
+  [token-attr]
+  (case token-attr
+    :fill :fills
+    :stroke-color :strokes
+    :stroke-width :strokes
+    token-attr))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS for token attributes by shape type
+;; TOKEN SHAPE ATTRIBUTES
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(def ^:private position-attributes #{:x :y})
+(def position-attributes #{:x :y})
 
-(def ^:private generic-attributes
+(def generic-attributes
   (set/union color-keys
              stroke-width-keys
              rotation-keys
@@ -458,22 +387,20 @@
              shadow-keys
              position-attributes))
 
-(def ^:private rect-attributes
+(def rect-attributes
   (set/union generic-attributes
              border-radius-keys))
 
-(def ^:private frame-with-layout-attributes
+(def frame-with-layout-attributes
   (set/union rect-attributes
              spacing-gap-padding-keys))
 
-(def ^:private text-attributes
+(def text-attributes
   (set/union generic-attributes
              typography-keys
              number-keys))
 
 (defn shape-type->attributes
-  "Returns what token attributes may be applied to a shape depending on its type
-   and if it is a frame with a layout."
   [type is-layout]
   (case type
     :bool    generic-attributes
@@ -489,14 +416,12 @@
     nil))
 
 (defn appliable-attrs-for-shape
-  "Returns which ones of the given `attributes` can be applied to a shape
-   of type `shape-type` and `is-layout`."
+  "Returns intersection of shape `attributes` for `shape-type`."
   [attributes shape-type is-layout]
   (set/intersection attributes (shape-type->attributes shape-type is-layout)))
 
 (defn any-appliable-attr-for-shape?
-  "Returns if any of the given `attributes` can be applied to a shape
-   of type `shape-type` and `is-layout`."
+  "Checks if `token-type` supports given shape `attributes`."
   [attributes token-type is-layout]
   (d/not-empty? (appliable-attrs-for-shape attributes token-type is-layout)))
 
@@ -507,6 +432,42 @@
    typography-keys
    #{:fill}))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; TOKENS IN SHAPES
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- toggle-or-apply-token
+  "Remove any shape attributes from token if they exists.
+  Othewise apply token attributes."
+  [shape token]
+  (let [[shape-leftover token-leftover _matching] (data/diff (:applied-tokens shape) token)]
+    (merge {} shape-leftover token-leftover)))
+
+(defn- token-from-attributes [token attributes]
+  (->> (map (fn [attr] [attr (:name token)]) attributes)
+       (into {})))
+
+(defn- apply-token-to-attributes [{:keys [shape token attributes]}]
+  (let [token (token-from-attributes token attributes)]
+    (toggle-or-apply-token shape token)))
+
+(defn apply-token-to-shape
+  [{:keys [shape token attributes] :as _props}]
+  (let [applied-tokens (apply-token-to-attributes {:shape shape
+                                                   :token token
+                                                   :attributes attributes})]
+    (update shape :applied-tokens #(merge % applied-tokens))))
+
+(defn unapply-token-id [shape attributes]
+  (update shape :applied-tokens d/without-keys attributes))
+
+(defn unapply-layout-item-tokens
+  "Unapplies all layout item related tokens from shape."
+  [shape]
+  (let [layout-item-attrs (set/union sizing-layout-item-keys
+                                     spacing-margin-keys)]
+    (unapply-token-id shape layout-item-attrs)))
+
 (def tokens-by-input
   "A map from input name to applicable token for that input."
   {:width #{:sizing :dimensions}
@@ -532,48 +493,7 @@
    :stroke-color #{:color}})
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS for tokens application
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-;; TODO it seems that this function is redundant, maybe?
-;; (defn- toggle-or-apply-token
-;;   "Remove any shape attributes from token if they exists.
-;;   Othewise apply token attributes."
-;;   [shape token]
-;;   (let [[only-in-shape only-in-token _matching] (data/diff (:applied-tokens shape) token)]
-;;     (merge {} only-in-shape only-in-token)))
-
-(defn- generate-attr-map [token attributes]
-  (->> (map (fn [attr] [attr (:name token)]) attributes)
-       (into {})))
-
-(defn apply-token-to-shape
-  "Applies the token to the given attributes in the shape."
-  [{:keys [shape token attributes] :as _props}]
-  (let [map-to-apply (generate-attr-map token attributes)]
-    (update shape :applied-tokens #(merge % map-to-apply))))
-
-;; (defn apply-token-to-shape
-;;   [{:keys [shape token attributes] :as _props}]
-;;   (let [map-to-apply (generate-attr-map token attributes)
-;;         applied-tokens (toggle-or-apply-token shape map-to-apply)]
-;;     (update shape :applied-tokens #(merge % applied-tokens))))
-
-(defn unapply-tokens-from-shape
-  "Removes any token applied to the given attributes in the shape."
-  [shape attributes]
-  (update shape :applied-tokens d/without-keys attributes))
-
-(defn unapply-layout-item-tokens
-  "Unapplies all layout item related tokens from shape."
-  [shape]
-  (let [layout-item-attrs (set/union sizing-layout-item-keys
-                                     spacing-margin-keys)]
-    (unapply-tokens-from-shape shape layout-item-attrs)))
-
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS for typography tokens
+;; TYPOGRAPHY
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn split-font-family
@@ -636,3 +556,32 @@
     (when (font-weight-values weight)
       (cond-> {:weight weight}
         italic? (assoc :style "italic")))))
+
+(defn typography-composite-token-reference?
+  "Predicate if a typography composite token is a reference value - a string pointing to another reference token."
+  [token-value]
+  (string? token-value))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; SHADOW
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn shadow-composite-token-reference?
+  "Predicate if a shadow composite token is a reference value - a string pointing to another reference token."
+  [token-value]
+  (string? token-value))
+
+(defn update-token-value-references
+  "Recursively update token references within a token value, supporting complex token values (maps, sequences, strings)."
+  [value old-name new-name]
+  (cond
+    (string? value)
+    (str/replace value
+                 (re-pattern (str "\\{" (str/replace old-name "." "\\.") "\\}"))
+                 (str "{" new-name "}"))
+    (map? value)
+    (d/update-vals value #(update-token-value-references % old-name new-name))
+    (sequential? value)
+    (mapv #(update-token-value-references % old-name new-name) value)
+    :else
+    value))

common/src/app/common/types/tokens_lib.cljc

@@ -114,19 +114,25 @@
   [o]
   (instance? Token o))
 
+(def schema:token-attrs
+  [:map {:title "Token"}
+   [:id ::sm/uuid]
+   [:name cto/token-name-ref]
+   [:type [::sm/one-of cto/token-types]]
+   [:value ::sm/any]
+   [:description {:optional true} :string]
+   [:modified-at {:optional true} ::ct/inst]])
+
 (declare make-token)
 
 (def schema:token
-  [:and {:gen/gen (->> (sg/generator cto/schema:token-attrs)
+  [:and {:gen/gen (->> (sg/generator schema:token-attrs)
                        (sg/fmap #(make-token %)))}
-   (sm/required-keys cto/schema:token-attrs)
+   (sm/required-keys schema:token-attrs)
    [:fn token?]])
 
 (def ^:private check-token-attrs
-  (sm/check-fn cto/schema:token-attrs :hint "expected valid params for token"))
-
-(def decode-token-attrs
-  (sm/lazy-decoder cto/schema:token-attrs sm/json-transformer))
+  (sm/check-fn schema:token-attrs :hint "expected valid params for token"))
 
 (def check-token
   (sm/check-fn schema:token :hint "expected valid token"))
@@ -311,13 +317,10 @@
   [o]
   (instance? TokenSetLegacy o))
 
-(declare make-token-set)
-(declare normalized-set-name?)
-
 (def schema:token-set-attrs
   [:map {:title "TokenSet"}
    [:id ::sm/uuid]
-   [:name [:and :string [:fn #(normalized-set-name? %)]]]
+   [:name :string]
    [:description {:optional true} :string]
    [:modified-at {:optional true} ::ct/inst]
    [:tokens {:optional true
@@ -339,6 +342,8 @@
       :string schema:token]
      [:fn d/ordered-map?]]]])
 
+(declare make-token-set)
+
 (def schema:token-set
   [:schema {:gen/gen (->> (sg/generator schema:token-set-attrs)
                           (sg/fmap #(make-token-set %)))}
@@ -399,25 +404,12 @@
                (split-set-name name))
        (cpn/join-path :separator set-separator :with-spaces? false))))
 
-(defn normalized-set-name?
-  "Check if a set name is normalized (no extra spaces)."
-  [name]
-  (= name (normalize-set-name name)))
-
 (defn replace-last-path-name
   "Replaces the last element in a `path` vector with `name`."
   [path name]
   (-> (into [] (drop-last path))
       (conj name)))
 
-(defn make-child-name
-  "Generate the name of a set child of `parent-set` adding the name `name`."
-  [parent-set name]
-  (if-let [parent-path (get-set-path parent-set)]
-    (->> (concat parent-path (split-set-name name))
-         (join-set-path))
-    (normalize-set-name name)))
-
 ;; The following functions will be removed after refactoring the internal structure of TokensLib,
 ;; since we'll no longer need group prefixes to differentiate between sets and set-groups.
 
@@ -1378,13 +1370,10 @@ Will return a value that matches this schema:
 (def ^:private check-tokens-lib-map
   (sm/check-fn schema:tokens-lib-map :hint "invalid tokens-lib internal data structure"))
 
-(defn tokens-lib?
-  [o]
-  (instance? TokensLib o))
-
 (defn valid-tokens-lib?
   [o]
-  (and (tokens-lib? o) (valid? o)))
+  (and (instance? TokensLib o)
+       (valid? o)))
 
 (defn- ensure-hidden-theme
   "A helper that is responsible to ensure that the hidden theme always
@@ -1446,50 +1435,6 @@ Will return a value that matches this schema:
           (rename copy-name)
           (reid (uuid/next))))))
 
-(defn- token-name->path-selector
-  "Splits token-name into map with `:path` and `:selector` using `token-name->path`.
-
-  `:selector` is the last item of the names path
-  `:path` is everything leading up the the `:selector`."
-  [token-name]
-  (let [path-segments (get-token-path {:name token-name})
-        last-idx (dec (count path-segments))
-        [path [selector]] (split-at last-idx path-segments)]
-    {:path (seq path)
-     :selector selector}))
-
-(defn token-name-path-exists?
-  "Traverses the path from `token-name` down a `tokens-tree` and checks if a token at that path exists.
-
-  It's not allowed to create a token inside a token. E.g.:
-  Creating a token with
-
-    {:name \"foo.bar\"}
-
-  in the tokens tree:
-
-    {\"foo\" {:name \"other\"}}"
-  [token-name tokens-tree]
-  (let [{:keys [path selector]} (token-name->path-selector token-name)
-        path-target (reduce
-                     (fn [acc cur]
-                       (let [target (get acc cur)]
-                         (cond
-                           ;; Path segment doesn't exist yet
-                           (nil? target) (reduced false)
-                           ;; A token exists at this path
-                           (:name target) (reduced true)
-                           ;; Continue traversing the true
-                           :else target)))
-                     tokens-tree
-                     path)]
-    (cond
-      (boolean? path-target) path-target
-      (get path-target :name) true
-      :else (-> (get path-target selector)
-                (seq)
-                (boolean)))))
-
 ;; === Import / Export from JSON format
 
 ;; Supported formats:

common/test/common_tests/files/tokens_test.cljc

@@ -6,34 +6,34 @@
 
 (ns common-tests.files.tokens-test
   (:require
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [clojure.test :as t]))
 
 (t/deftest test-parse-token-value
   (t/testing "parses double from a token value"
-    (t/is (= {:value 100.1 :unit nil} (cfo/parse-token-value "100.1")))
-    (t/is (= {:value -9.0 :unit nil} (cfo/parse-token-value "-9"))))
+    (t/is (= {:value 100.1 :unit nil} (cft/parse-token-value "100.1")))
+    (t/is (= {:value -9.0 :unit nil} (cft/parse-token-value "-9"))))
   (t/testing "trims white-space"
-    (t/is (= {:value -1.3 :unit nil} (cfo/parse-token-value "     -1.3   "))))
+    (t/is (= {:value -1.3 :unit nil} (cft/parse-token-value "     -1.3   "))))
   (t/testing "parses unit: px"
-    (t/is (= {:value 70.3 :unit "px"} (cfo/parse-token-value "     70.3px   "))))
+    (t/is (= {:value 70.3 :unit "px"} (cft/parse-token-value "     70.3px   "))))
   (t/testing "parses unit: %"
-    (t/is (= {:value -10.0 :unit "%"} (cfo/parse-token-value "-10%"))))
+    (t/is (= {:value -10.0 :unit "%"} (cft/parse-token-value "-10%"))))
   (t/testing "parses unit: px")
   (t/testing "returns nil for any invalid characters"
-    (t/is (nil? (cfo/parse-token-value "     -1.3a   "))))
+    (t/is (nil? (cft/parse-token-value "     -1.3a   "))))
   (t/testing "doesnt accept invalid double"
-    (t/is (nil? (cfo/parse-token-value ".3")))))
+    (t/is (nil? (cft/parse-token-value ".3")))))
 
 (t/deftest token-applied-test
   (t/testing "matches passed token with `:token-attributes`"
-    (t/is (true? (cfo/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (true? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "doesn't match empty token"
-    (t/is (nil? (cfo/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (nil? (cft/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "does't match passed token `:id`"
-    (t/is (nil? (cfo/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (nil? (cft/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "doesn't match passed `:token-attributes`"
-    (t/is (nil? (cfo/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
+    (t/is (nil? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
 
 (t/deftest shapes-ids-by-applied-attributes
   (t/testing "Returns set of matched attributes that fit the applied token"
@@ -54,7 +54,7 @@
                   shape-applied-x-y
                   shape-applied-all
                   shape-applied-none]
-          expected (cfo/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
+          expected (cft/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
       (t/is (= (:x expected) (shape-ids shape-applied-x
                                         shape-applied-x-y
                                         shape-applied-all)))
@@ -62,21 +62,34 @@
                                         shape-applied-x-y
                                         shape-applied-all)))
       (t/is (= (:z expected) (shape-ids shape-applied-all)))
-      (t/is (true? (cfo/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
-      (t/is (false? (cfo/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
+      (t/is (true? (cft/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
+      (t/is (false? (cft/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
       (shape-ids shape-applied-x
                  shape-applied-x-y
                  shape-applied-all))))
 
 (t/deftest tokens-applied-test
   (t/testing "is true when single shape matches the token and attributes"
-    (t/is (true? (cfo/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
+    (t/is (true? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
                                                          {:applied-tokens {:x "b"}}]
                                             #{:x}))))
   (t/testing "is false when no shape matches the token or attributes"
-    (t/is (nil? (cfo/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
+    (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
                                                         {:applied-tokens {:x "b"}}]
                                            #{:x})))
-    (t/is (nil? (cfo/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
+    (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
                                                         {:applied-tokens {:x "a"}}]
                                            #{:y})))))
+
+(t/deftest name->path-test
+  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo.bar.baz")))
+  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz")))
+  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz...."))))
+
+(t/deftest token-name-path-exists?-test
+  (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
+  (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
+  (t/is (true? (cft/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
+  (t/is (true? (cft/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
+  (t/is (false? (cft/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
+  (t/is (false? (cft/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))

common/test/common_tests/logic/token_apply_test.cljc

@@ -255,28 +255,28 @@
                     (cls/generate-update-shapes [(:id frame1)]
                                                 (fn [shape]
                                                   (-> shape
-                                                      (cto/unapply-tokens-from-shape [:r1 :r2 :r3 :r4])
-                                                      (cto/unapply-tokens-from-shape [:rotation])
-                                                      (cto/unapply-tokens-from-shape [:opacity])
-                                                      (cto/unapply-tokens-from-shape [:stroke-width])
-                                                      (cto/unapply-tokens-from-shape [:stroke-color])
-                                                      (cto/unapply-tokens-from-shape [:fill])
-                                                      (cto/unapply-tokens-from-shape [:width :height])))
+                                                      (cto/unapply-token-id [:r1 :r2 :r3 :r4])
+                                                      (cto/unapply-token-id [:rotation])
+                                                      (cto/unapply-token-id [:opacity])
+                                                      (cto/unapply-token-id [:stroke-width])
+                                                      (cto/unapply-token-id [:stroke-color])
+                                                      (cto/unapply-token-id [:fill])
+                                                      (cto/unapply-token-id [:width :height])))
                                                 (:objects page)
                                                 {})
                     (cls/generate-update-shapes [(:id text1)]
                                                 (fn [shape]
                                                   (-> shape
-                                                      (cto/unapply-tokens-from-shape [:font-size])
-                                                      (cto/unapply-tokens-from-shape [:letter-spacing])
-                                                      (cto/unapply-tokens-from-shape [:font-family])))
+                                                      (cto/unapply-token-id [:font-size])
+                                                      (cto/unapply-token-id [:letter-spacing])
+                                                      (cto/unapply-token-id [:font-family])))
                                                 (:objects page)
                                                 {})
                     (cls/generate-update-shapes [(:id circle1)]
                                                 (fn [shape]
                                                   (-> shape
-                                                      (cto/unapply-tokens-from-shape [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w])
-                                                      (cto/unapply-tokens-from-shape [:m1 :m2 :m3 :m4])))
+                                                      (cto/unapply-token-id [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w])
+                                                      (cto/unapply-token-id [:m1 :m2 :m3 :m4])))
                                                 (:objects page)
                                                 {}))
 

common/test/common_tests/types/token_test.cljc

@@ -8,19 +8,20 @@
   (:require
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
+   [app.common.uuid :as uuid]
    [clojure.test :as t]))
 
 (t/deftest test-valid-token-name-schema
   ;; Allow regular namespace token names
-  (t/is (true? (sm/validate cto/schema:token-name "Foo")))
-  (t/is (true? (sm/validate cto/schema:token-name "foo")))
-  (t/is (true? (sm/validate cto/schema:token-name "FOO")))
-  (t/is (true? (sm/validate cto/schema:token-name "Foo.Bar.Baz")))
+  (t/is (true? (sm/validate cto/token-name-ref "Foo")))
+  (t/is (true? (sm/validate cto/token-name-ref "foo")))
+  (t/is (true? (sm/validate cto/token-name-ref "FOO")))
+  (t/is (true? (sm/validate cto/token-name-ref "Foo.Bar.Baz")))
   ;; Disallow trailing tokens
-  (t/is (false? (sm/validate cto/schema:token-name "Foo.Bar.Baz....")))
+  (t/is (false? (sm/validate cto/token-name-ref "Foo.Bar.Baz....")))
   ;; Disallow multiple separator dots
-  (t/is (false? (sm/validate cto/schema:token-name "Foo..Bar.Baz")))
+  (t/is (false? (sm/validate cto/token-name-ref "Foo..Bar.Baz")))
   ;; Disallow any special characters
-  (t/is (false? (sm/validate cto/schema:token-name "Hey Foo.Bar")))
-  (t/is (false? (sm/validate cto/schema:token-name "Hey😈Foo.Bar")))
-  (t/is (false? (sm/validate cto/schema:token-name "Hey%Foo.Bar"))))
+  (t/is (false? (sm/validate cto/token-name-ref "Hey Foo.Bar")))
+  (t/is (false? (sm/validate cto/token-name-ref "Hey😈Foo.Bar")))
+  (t/is (false? (sm/validate cto/token-name-ref "Hey%Foo.Bar"))))

common/test/common_tests/types/tokens_lib_test.cljc

@@ -678,35 +678,35 @@
 
 (t/deftest list-active-themes-tokens-bug-taiga-10617
   (let [tokens-lib (-> (ctob/make-tokens-lib)
-                       (ctob/add-set (ctob/make-token-set :name "Mode/Dark"
+                       (ctob/add-set (ctob/make-token-set :name "Mode / Dark"
                                                           :tokens {"red"
                                                                    (ctob/make-token :name "red"
                                                                                     :type :color
                                                                                     :value "#700000")}))
-                       (ctob/add-set (ctob/make-token-set :name "Mode/Light"
+                       (ctob/add-set (ctob/make-token-set :name "Mode / Light"
                                                           :tokens {"red"
                                                                    (ctob/make-token :name "red"
                                                                                     :type :color
                                                                                     :value "#ff0000")}))
-                       (ctob/add-set (ctob/make-token-set :name "Device/Desktop"
+                       (ctob/add-set (ctob/make-token-set :name "Device / Desktop"
                                                           :tokens {"border1"
                                                                    (ctob/make-token :name "border1"
                                                                                     :type :border-radius
                                                                                     :value 30)}))
-                       (ctob/add-set (ctob/make-token-set :name "Device/Mobile"
+                       (ctob/add-set (ctob/make-token-set :name "Device / Mobile"
                                                           :tokens {"border1"
                                                                    (ctob/make-token :name "border1"
                                                                                     :type :border-radius
                                                                                     :value 50)}))
                        (ctob/add-theme (ctob/make-token-theme :group "App"
                                                               :name "Mobile"
-                                                              :sets #{"Mode/Dark" "Device/Mobile"}))
+                                                              :sets #{"Mode / Dark" "Device / Mobile"}))
                        (ctob/add-theme (ctob/make-token-theme :group "App"
                                                               :name "Web"
-                                                              :sets #{"Mode/Dark" "Mode/Light" "Device/Desktop"}))
+                                                              :sets #{"Mode / Dark" "Mode / Light" "Device / Desktop"}))
                        (ctob/add-theme (ctob/make-token-theme :group "Brand"
                                                               :name "Brand A"
-                                                              :sets #{"Mode/Dark" "Mode/Light" "Device/Desktop" "Device/Mobile"}))
+                                                              :sets #{"Mode / Dark" "Mode / Light" "Device / Desktop" "Device / Mobile"}))
                        (ctob/add-theme (ctob/make-token-theme :group "Brand"
                                                               :name "Brand B"
                                                               :sets #{}))
@@ -2013,11 +2013,3 @@
            (t/is (some? imported-ref))
            (t/is (= (:type original-ref) (:type imported-ref)))
            (t/is (= (:value imported-ref) (:value original-ref))))))))
-
-(t/deftest token-name-path-exists?-test
-  (t/is (true? (ctob/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
-  (t/is (true? (ctob/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
-  (t/is (true? (ctob/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
-  (t/is (true? (ctob/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
-  (t/is (false? (ctob/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
-  (t/is (false? (ctob/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))

frontend/playwright/ui/specs/tokens/apply.spec.js

@@ -0,0 +1,604 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import {
+  setupEmptyTokensFile,
+  setupTokensFile,
+  setupTypographyTokensFile,
+  unfoldTokenTree,
+} from "./helpers";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens: Apply token", () => {
+  test("User applies color token to a shape", async ({ page }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers
+      .getByTestId("layer-row")
+      .filter({ hasText: "Button" })
+      .click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "color", "colors.black");
+
+    await tokensSidebar
+      .getByRole("button", { name: "black" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Fill").click();
+
+    await expect(
+      workspacePage.page.getByLabel("Name: colors.black"),
+    ).toBeVisible();
+  });
+
+  test("User applies border-radius token to a shape from sidebar", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    // Open tokens sections on left sidebar
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    // Unfold border radius tokens
+    await page.getByRole("button", { name: "Border Radius 3" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "borderRadius" }),
+    ).toBeVisible();
+    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
+    ).toBeVisible();
+
+    // Apply border radius token from token panels
+    await tokensSidebar
+      .getByRole("button", { name: "borderRadius.sm" })
+      .click();
+
+    // Check if border radius sections is visible on right sidebar
+    const borderRadiusSection = page.getByRole("region", {
+      name: "border-radius-section",
+    });
+    await expect(borderRadiusSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const brTokenPillSM = borderRadiusSection.getByRole("button", {
+      name: "borderRadius.sm",
+    });
+    await expect(brTokenPillSM).toBeVisible();
+    await brTokenPillSM.click();
+
+    // Change token from dropdown
+    const brTokenOptionXl = borderRadiusSection.getByLabel("borderRadius.xl");
+    await expect(brTokenOptionXl).toBeVisible();
+    await brTokenOptionXl.click();
+
+    await expect(brTokenPillSM).not.toBeVisible();
+    const brTokenPillXL = borderRadiusSection.getByRole("button", {
+      name: "borderRadius.xl",
+    });
+    await expect(brTokenPillXL).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = borderRadiusSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.click();
+    await expect(brTokenPillXL).not.toBeVisible();
+  });
+
+  test("User applies typography token to a text shape", async ({ page }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTypographyTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers
+      .getByTestId("layer-row")
+      .filter({ hasText: "Some Text" })
+      .click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    await tokensSidebar
+      .getByRole("button")
+      .filter({ hasText: "Typography" })
+      .click();
+
+    await tokensSidebar.getByRole("button", { name: "Full" }).click();
+
+    const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
+      name: "Font Size",
+    });
+    await expect(fontSizeInput).toBeVisible();
+    await expect(fontSizeInput).toHaveValue("100");
+  });
+
+  test("User edits typography token and all fields are valid", async ({
+    page,
+  }) => {
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
+      await setupTypographyTokensFile(page);
+
+    await tokensSidebar
+      .getByRole("button")
+      .filter({ hasText: "Typography" })
+      .click();
+
+    // Open edit modal for "Full" typography token
+    const token = tokensSidebar.getByRole("button", { name: "Full" });
+    await token.click({ button: "right" });
+    await page.getByText("Edit token").click();
+
+    // Modal opens
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const saveButton = tokensUpdateCreateModal.getByRole("button", {
+      name: /save/i,
+    });
+
+    // Fill font-family to verify to verify that input value doesn't get split into list of characters
+    const fontFamilyField = tokensUpdateCreateModal
+      .getByLabel("Font family")
+      .first();
+    await fontFamilyField.fill("OneWord");
+
+    // Invalidate incorrect values for font size
+    const fontSizeField = tokensUpdateCreateModal.getByLabel(/Font Size/i);
+    await fontSizeField.fill("invalid");
+    await expect(
+      tokensUpdateCreateModal.getByText(/Invalid token value:/),
+    ).toBeVisible();
+    await expect(saveButton).toBeDisabled();
+
+    // Show error with line-height depending on invalid font-size
+    await fontSizeField.fill("");
+    await expect(saveButton).toBeDisabled();
+
+    // Fill in values for all fields and verify they persist when switching tabs
+    await fontSizeField.fill("16");
+    await expect(saveButton).toBeEnabled();
+
+    const fontWeightField = tokensUpdateCreateModal.getByLabel(/Font Weight/i);
+    const letterSpacingField =
+      tokensUpdateCreateModal.getByLabel(/Letter Spacing/i);
+    const lineHeightField = tokensUpdateCreateModal.getByLabel(/Line Height/i);
+    const textCaseField = tokensUpdateCreateModal.getByLabel(/Text Case/i);
+    const textDecorationField =
+      tokensUpdateCreateModal.getByLabel(/Text Decoration/i);
+
+    // Capture all values before switching tabs
+    const originalValues = {
+      fontSize: await fontSizeField.inputValue(),
+      fontFamily: await fontFamilyField.inputValue(),
+      fontWeight: await fontWeightField.inputValue(),
+      letterSpacing: await letterSpacingField.inputValue(),
+      lineHeight: await lineHeightField.inputValue(),
+      textCase: await textCaseField.inputValue(),
+      textDecoration: await textDecorationField.inputValue(),
+    };
+
+    // Switch to reference tab and back to composite tab
+    const referenceTabButton =
+      tokensUpdateCreateModal.getByTestId("reference-opt");
+    await referenceTabButton.click();
+
+    // Empty reference tab should be disabled
+    await expect(saveButton).toBeDisabled();
+
+    const compositeTabButton =
+      tokensUpdateCreateModal.getByTestId("composite-opt");
+    await compositeTabButton.click();
+
+    // Filled composite tab should be enabled
+    await expect(saveButton).toBeEnabled();
+
+    // Verify all values are preserved after switching tabs
+    await expect(fontSizeField).toHaveValue(originalValues.fontSize);
+    await expect(fontFamilyField).toHaveValue(originalValues.fontFamily);
+    await expect(fontWeightField).toHaveValue(originalValues.fontWeight);
+    await expect(letterSpacingField).toHaveValue(originalValues.letterSpacing);
+    await expect(lineHeightField).toHaveValue(originalValues.lineHeight);
+    await expect(textCaseField).toHaveValue(originalValues.textCase);
+    await expect(textDecorationField).toHaveValue(
+      originalValues.textDecoration,
+    );
+
+    await saveButton.click();
+
+    // Modal should close, token should be visible (with new name) in sidebar
+    await expect(tokensUpdateCreateModal).not.toBeVisible();
+  });
+
+  test("User cant submit empty typography token or reference", async ({
+    page,
+  }) => {
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
+      await setupTypographyTokensFile(page);
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel
+      .getByRole("button", { name: "Add Token: Typography" })
+      .click();
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    await nameField.fill("typography.empty");
+
+    const valueField = tokensUpdateCreateModal.getByLabel("Font Size");
+
+    // Insert a value and then delete it
+    await valueField.fill("1");
+    await valueField.fill("");
+
+    // Submit button should be disabled when field is empty
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+    await expect(submitButton).toBeDisabled();
+
+    // Switch to reference tab, should not be submittable either
+    const referenceTabButton =
+      tokensUpdateCreateModal.getByTestId("reference-opt");
+    await referenceTabButton.click();
+    await expect(submitButton).toBeDisabled();
+  });
+
+  test("User adds typography token with reference", async ({ page }) => {
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
+      await setupTypographyTokensFile(page);
+
+    const newTokenTitle = "NewReference";
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel
+      .getByRole("button", { name: "Add Token: Typography" })
+      .click();
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    await nameField.fill(newTokenTitle);
+
+    const referenceTabButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Use a reference",
+    });
+    referenceTabButton.click();
+
+    const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "Reference",
+    });
+    await referenceField.fill("{Full}");
+
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+
+    const resolvedValue =
+      await tokensUpdateCreateModal.getByText("Resolved value:");
+    await expect(resolvedValue).toBeVisible();
+    await expect(resolvedValue).toContainText("Font Family: 42dot Sans");
+    await expect(resolvedValue).toContainText("Font Size: 100");
+    await expect(resolvedValue).toContainText("Font Weight: 300");
+    await expect(resolvedValue).toContainText("Letter Spacing: 2");
+    await expect(resolvedValue).toContainText("Text Case: uppercase");
+    await expect(resolvedValue).toContainText("Text Decoration: underline");
+
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+
+    await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+    const newToken = tokensSidebar.getByRole("button", {
+      name: newTokenTitle,
+    });
+
+    await expect(newToken).toBeVisible();
+  });
+
+  test("User adds shadow token with multiple shadows and applies it to shape", async ({
+    page,
+  }) => {
+    const {
+      tokensUpdateCreateModal,
+      tokensSidebar,
+      workspacePage,
+      tokenContextMenuForToken,
+    } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+    await test.step("Stage 1: Basic open", async () => {
+      // User adds shadow via the sidebar
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Shadow" })
+        .click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      const nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("primary");
+
+      // User adds first shadow with a color from the color ramp
+      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-0",
+      );
+      await expect(firstShadowFields).toBeVisible();
+
+      // Fill in the shadow values
+      const offsetXInput = firstShadowFields.getByLabel("X");
+      const offsetYInput = firstShadowFields.getByLabel("Y");
+      const blurInput = firstShadowFields.getByRole("textbox", {
+        name: "Blur",
+      });
+      const spreadInput = firstShadowFields.getByRole("textbox", {
+        name: "Spread",
+      });
+
+      await offsetXInput.fill("2");
+      await offsetYInput.fill("2");
+      await blurInput.fill("4");
+      await spreadInput.fill("0");
+
+      // Add color using the color picker
+      const colorBullet = firstShadowFields.getByTestId(
+        "token-form-color-bullet",
+      );
+      await colorBullet.click();
+
+      // Click on the color ramp to select a color
+      const valueSaturationSelector = tokensUpdateCreateModal.getByTestId(
+        "value-saturation-selector",
+      );
+      await expect(valueSaturationSelector).toBeVisible();
+      await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
+
+      // Verify that a color value was set
+      const colorInput = firstShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+      await expect(colorInput).toHaveValue(/^rgb(.*)$/);
+
+      // Wait for validation to complete
+      await expect(
+        tokensUpdateCreateModal.getByText(/Resolved value:/).first(),
+      ).toBeVisible();
+
+      // Save button should be enabled
+      const submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await expect(submitButton).toBeEnabled();
+    });
+
+    await test.step("Stage 2: Shadow adding/removing works", async () => {
+      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-0",
+      );
+      const colorInput = firstShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+      const firstColorValue = await colorInput.inputValue();
+
+      // User adds a second shadow
+      const addButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Add Shadow",
+      });
+      await addButton.click();
+
+      const secondShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-1",
+      );
+      await expect(secondShadowFields).toBeVisible();
+
+      // User adds a third shadow
+      await addButton.click();
+
+      const thirdShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-2",
+      );
+      await expect(thirdShadowFields).toBeVisible();
+
+      // User adds values for the third shadow
+      const thirdOffsetXInput = thirdShadowFields.getByLabel("X");
+      const thirdOffsetYInput = thirdShadowFields.getByLabel("Y");
+      const thirdBlurInput = thirdShadowFields.getByRole("textbox", {
+        name: "Blur",
+      });
+      const thirdSpreadInput = thirdShadowFields.getByRole("textbox", {
+        name: "Spread",
+      });
+      const thirdColorInput = thirdShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+
+      await thirdOffsetXInput.fill("10");
+      await thirdOffsetYInput.fill("10");
+      await thirdBlurInput.fill("20");
+      await thirdSpreadInput.fill("5");
+      await thirdColorInput.fill("#FF0000");
+
+      // User removes the 2nd shadow
+      const removeButton2 = secondShadowFields.getByRole("button", {
+        name: "Remove Shadow",
+      });
+      await removeButton2.click();
+
+      // Verify that we have only two shadow fields
+      await expect(thirdShadowFields).not.toBeVisible();
+
+      // Verify that the first shadow kept its values
+      const firstOffsetXValue = await firstShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const firstOffsetYValue = await firstShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const firstBlurValue = await firstShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const firstSpreadValue = await firstShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const firstColorValueAfter = await firstShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(firstOffsetXValue).toBe("2");
+      await expect(firstOffsetYValue).toBe("2");
+      await expect(firstBlurValue).toBe("4");
+      await expect(firstSpreadValue).toBe("0");
+      await expect(firstColorValueAfter).toBe(firstColorValue);
+
+      // Verify that the second kept its values (after shadow 3)
+      // After removing index 1, the third shadow becomes the second shadow at index 1
+      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-1",
+      );
+      await expect(newSecondShadowFields).toBeVisible();
+
+      const secondOffsetXValue = await newSecondShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const secondOffsetYValue = await newSecondShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const secondBlurValue = await newSecondShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const secondSpreadValue = await newSecondShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const secondColorValue = await newSecondShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(secondOffsetXValue).toBe("10");
+      await expect(secondOffsetYValue).toBe("10");
+      await expect(secondBlurValue).toBe("20");
+      await expect(secondSpreadValue).toBe("5");
+      await expect(secondColorValue).toBe("#FF0000");
+    });
+
+    await test.step("Stage 3: Restore when switching tabs works", async () => {
+      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-0",
+      );
+      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-1",
+      );
+      const colorInput = firstShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+      const firstColorValue = await colorInput.inputValue();
+
+      // Switch to reference tab
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
+      await referenceTabButton.click();
+
+      // Verify we're in reference mode - the composite fields should not be visible
+      await expect(firstShadowFields).not.toBeVisible();
+
+      // Switch back to composite tab
+      const compositeTabButton =
+        tokensUpdateCreateModal.getByTestId("composite-opt");
+      await compositeTabButton.click();
+
+      // Verify that shadows are restored
+      await expect(firstShadowFields).toBeVisible();
+      await expect(newSecondShadowFields).toBeVisible();
+
+      // Verify first shadow values are still there
+      const restoredFirstOffsetX = await firstShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const restoredFirstOffsetY = await firstShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const restoredFirstBlur = await firstShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const restoredFirstSpread = await firstShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const restoredFirstColor = await firstShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(restoredFirstOffsetX).toBe("2");
+      await expect(restoredFirstOffsetY).toBe("2");
+      await expect(restoredFirstBlur).toBe("4");
+      await expect(restoredFirstSpread).toBe("0");
+      await expect(restoredFirstColor).toBe(firstColorValue);
+
+      // Verify second shadow values are still there
+      const restoredSecondOffsetX = await newSecondShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const restoredSecondOffsetY = await newSecondShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const restoredSecondBlur = await newSecondShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const restoredSecondSpread = await newSecondShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const restoredSecondColor = await newSecondShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(restoredSecondOffsetX).toBe("10");
+      await expect(restoredSecondOffsetY).toBe("10");
+      await expect(restoredSecondBlur).toBe("20");
+      await expect(restoredSecondSpread).toBe("5");
+      await expect(restoredSecondColor).toBe("#FF0000");
+    });
+
+    await test.step("Stage 4: Layer application works", async () => {
+      // Save the token
+      const submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      unfoldTokenTree(tokensSidebar, "shadow", "primary");
+
+      // Verify token appears in sidebar
+      const shadowToken = tokensSidebar.getByRole("button", {
+        name: "primary",
+      });
+      await expect(shadowToken).toBeEnabled();
+
+      // Apply the shadow
+      await workspacePage.clickLayers();
+      await workspacePage.clickLeafLayer("Button");
+
+      const shadowSection = workspacePage.rightSidebar.getByText("Drop shadow");
+      await expect(shadowSection).toHaveCount(0);
+
+      await page.getByRole("tab", { name: "Tokens" }).click();
+      await shadowToken.click();
+
+      await expect(shadowSection).toHaveCount(2);
+    });
+  });
+});

frontend/playwright/ui/specs/tokens/general.spec.js

@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import { setupEmptyTokensFile } from "./helpers";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens tab - common tests", () => {
+  test("Clicking tokens tab button opens tokens sidebar tab", async ({
+    page,
+  }) => {
+    await setupEmptyTokensFile(page);
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+    await expect(tokensTabPanel).toHaveText(/TOKENS/);
+    await expect(tokensTabPanel).toHaveText(/Themes/);
+  });
+});

frontend/playwright/ui/specs/tokens/helpers.js

@@ -0,0 +1,266 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+
+const setupEmptyTokensFile = async (page, options = {}) => {
+  const { flags = [] } = options;
+
+  const workspacePage = new WorkspacePage(page);
+  if (flags.length > 0) {
+    await workspacePage.mockConfigFlags(flags);
+  }
+
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );
+
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "c7ce0794-0992-8105-8004-38f280443849",
+    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
+  });
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+
+  return {
+    workspacePage,
+    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
+    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
+    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
+    tokenSetItems: workspacePage.tokenSetItems,
+    tokensSidebar: workspacePage.tokensSidebar,
+    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
+    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
+  };
+};
+
+const setupTokensFile = async (page, options = {}) => {
+  const {
+    file = "workspace/get-file-tokens.json",
+    fileFragment = "workspace/get-file-fragment-tokens.json",
+    flags = ["enable-feature-token-input"],
+  } = options;
+
+  const workspacePage = new WorkspacePage(page);
+  if (flags.length > 0) {
+    await workspacePage.mockConfigFlags(flags);
+  }
+
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );
+  await workspacePage.mockRPC(/get\-file\?/, file);
+  await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment);
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "c7ce0794-0992-8105-8004-38f280443849",
+    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
+  });
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+
+  return {
+    workspacePage,
+    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
+    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
+    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
+    tokenSetItems: workspacePage.tokenSetItems,
+    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
+    tokensSidebar: workspacePage.tokensSidebar,
+    tokenContextMenuForToken: workspacePage.tokenContextMenuForToken,
+    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
+  };
+};
+
+const setupTypographyTokensFile = async (page, options = {}) => {
+  return setupTokensFile(page, {
+    file: "workspace/get-file-typography-tokens.json",
+    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
+    ...options,
+  });
+};
+
+const testTokenCreationFlow = async (
+  page,
+  {
+    tokenLabel,
+    namePlaceholder,
+    valuePlaceholder,
+    validValue,
+    invalidValue,
+    selfReferenceValue,
+    missingReferenceValue,
+    secondValidValue,
+    resolvedValueText,
+    secondResolvedValueText,
+  },
+) => {
+  const invalidValueError = "Invalid token value";
+  const emptyNameError = "Name should be at least 1 character";
+  const selfReferenceError = "Token has self reference";
+  const missingReferenceError = "Missing token references";
+
+  const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+    await setupEmptyTokensFile(page);
+
+  // Open modal
+  const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+  const addTokenButton = tokensTabPanel.getByRole("button", {
+    name: `Add Token: ${tokenLabel}`,
+  });
+
+  await addTokenButton.click();
+  await expect(tokensUpdateCreateModal).toBeVisible();
+
+  // Placeholder checks
+  await expect(
+    tokensUpdateCreateModal.getByPlaceholder(namePlaceholder),
+  ).toBeVisible();
+  await expect(
+    tokensUpdateCreateModal.getByPlaceholder(valuePlaceholder),
+  ).toBeVisible();
+
+  const nameField = tokensUpdateCreateModal.getByLabel("Name");
+  const valueField = tokensUpdateCreateModal.getByLabel("Value");
+  const submitButton = tokensUpdateCreateModal.getByRole("button", {
+    name: "Save",
+  });
+
+  // 1. Name filled + empty value → disabled
+  await nameField.fill("my-token");
+  await expect(submitButton).toBeDisabled();
+
+  // 2. Invalid value → disabled + error message
+  await valueField.fill(invalidValue);
+
+  const invalidValueErrorNode =
+    tokensUpdateCreateModal.getByText(invalidValueError);
+
+  await expect(invalidValueErrorNode).toBeVisible();
+  await expect(submitButton).toBeDisabled();
+
+  // 3. Empty name → disabled + error message
+  await nameField.fill("");
+
+  const emptyNameErrorNode = tokensUpdateCreateModal.getByText(emptyNameError);
+
+  await expect(emptyNameErrorNode).toBeVisible();
+  await expect(submitButton).toBeDisabled();
+
+  // 4. Self reference → disabled + error message
+  await nameField.fill("my-token");
+  await valueField.fill(selfReferenceValue);
+
+  const selfRefErrorNode =
+    tokensUpdateCreateModal.getByText(selfReferenceError);
+
+  await expect(selfRefErrorNode).toBeVisible();
+  await expect(submitButton).toBeDisabled();
+
+  // 5. Missing reference → disabled + error message
+  await valueField.fill(missingReferenceValue);
+
+  const missingRefErrorNode = tokensUpdateCreateModal.getByText(
+    missingReferenceError,
+  );
+
+  await expect(missingRefErrorNode).toBeVisible();
+  await expect(submitButton).toBeDisabled();
+
+  //
+  // ------- SUCCESSFUL CREATION -------
+  //
+
+  // 6. Basic valid value → enabled
+  await valueField.fill(validValue);
+  await expect(
+    tokensUpdateCreateModal.getByText(resolvedValueText),
+  ).toBeVisible();
+  await expect(submitButton).toBeEnabled();
+
+  await submitButton.click();
+
+  await expect(
+    tokensTabPanel.getByRole("button", { name: "my-token" }),
+  ).toBeEnabled();
+
+  //
+  // ------- SECOND TOKEN WITH VALID REFERENCE -------
+  //
+
+  await addTokenButton.click();
+
+  await nameField.fill("my-token-2");
+  await valueField.fill(secondValidValue);
+
+  await expect(
+    tokensUpdateCreateModal.getByText(secondResolvedValueText),
+  ).toBeVisible();
+  await expect(submitButton).toBeEnabled();
+
+  await submitButton.click();
+
+  await expect(
+    tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+  ).toBeEnabled();
+};
+
+const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
+  const tokenSegments = tokenName.split(".");
+  const tokenFolderTree = tokenSegments.slice(0, -1);
+  const tokenLeafName = tokenSegments.pop();
+
+  const typeParentWrapper = tokensTabPanel.getByTestId(`section-${type}`);
+  const typeSectionButton = typeParentWrapper
+    .getByRole("button", {
+      name: type,
+    })
+    .first();
+
+  const isSectionExpanded =
+    await typeSectionButton.getAttribute("aria-expanded");
+
+  if (isSectionExpanded === "false") {
+    await typeSectionButton.click();
+  }
+
+  for (const segment of tokenFolderTree) {
+    const segmentButton = typeParentWrapper
+      .getByRole("listitem")
+      .getByRole("button", { name: segment })
+      .first();
+
+    const isExpanded = await segmentButton.getAttribute("aria-expanded");
+    if (isExpanded === "false") {
+      await segmentButton.click();
+    }
+  }
+
+  await expect(
+    typeParentWrapper.getByRole("button", {
+      name: tokenLeafName,
+    }),
+  ).toBeEnabled();
+};
+
+export {
+  setupEmptyTokensFile,
+  setupTokensFile,
+  setupTypographyTokensFile,
+  testTokenCreationFlow,
+  unfoldTokenTree,
+};

frontend/playwright/ui/specs/tokens/remapping.spec.js

@@ -0,0 +1,651 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import {
+  setupEmptyTokensFile,
+  setupTokensFile,
+  setupTypographyTokensFile,
+} from "./helpers";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens: Remapping Feature", () => {
+  test.describe("Box Shadow Token Remapping", () => {
+    test("User renames box shadow token with alias references", async ({
+      page,
+    }) => {
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+      } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+      // Create base shadow token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Shadow" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      let nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("base-shadow");
+
+      const colorField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Color",
+      });
+      await colorField.fill("#000000");
+
+      let submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Create derived shadow token that references base-shadow
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Shadow" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      nameField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Name",
+      });
+      await nameField.fill("derived-shadow");
+
+      const referenceToggle =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
+      await referenceToggle.click();
+
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Reference",
+      });
+      await referenceField.fill("{base-shadow}");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Rename base-shadow token
+      const baseToken = tokensSidebar.getByRole("button", {
+        name: "base-shadow",
+      });
+      await baseToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("foundation-shadow");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+
+      // Check for remapping modal
+      const remappingModal = page.getByTestId("token-remapping-modal");
+      await expect(remappingModal).toBeVisible({ timeout: 5000 });
+      await expect(remappingModal).toContainText("1");
+
+      const confirmButton = remappingModal.getByRole("button", {
+        name: /remap/i,
+      });
+      await confirmButton.click();
+
+      // Verify token was renamed
+      await expect(
+        tokensSidebar.getByRole("button", { name: "foundation-shadow" }),
+      ).toBeVisible();
+      await expect(
+        tokensSidebar.getByRole("button", { name: "derived-shadow" }),
+      ).toBeVisible();
+    });
+
+    test("User renames and updates shadow token - referenced token and applied shapes update", async ({
+      page,
+    }) => {
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+        workspacePage,
+      } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+      // Create base shadow token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Shadow" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      let nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("primary-shadow");
+
+      let colorField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Color",
+      });
+      await colorField.fill("#000000");
+
+      let submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Create derived shadow token that references base
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Shadow" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("card-shadow");
+
+      const referenceToggle =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
+      await referenceToggle.click();
+
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Reference",
+      });
+      await referenceField.fill("{primary-shadow}");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Apply the referenced token to a shape
+      await page.getByRole("tab", { name: "Layers" }).click();
+      await workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Button" })
+        .click();
+
+      await page.getByRole("tab", { name: "Tokens" }).click();
+      const cardShadowToken = tokensSidebar.getByRole("button", {
+        name: "card-shadow",
+      });
+      await cardShadowToken.click();
+
+      // Rename and update value of base token
+      const primaryToken = tokensSidebar.getByRole("button", {
+        name: "primary-shadow",
+      });
+      await primaryToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("main-shadow");
+
+      // Update the color value
+      colorField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Color",
+      });
+      await colorField.fill("#FF0000");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+
+      // Confirm remapping
+      const remappingModal = page.getByTestId("token-remapping-modal");
+      await expect(remappingModal).toBeVisible({ timeout: 5000 });
+
+      const confirmButton = remappingModal.getByRole("button", {
+        name: /remap/i,
+      });
+      await confirmButton.click();
+
+      // Verify base token was renamed
+      await expect(
+        tokensSidebar.getByRole("button", { name: "main-shadow" }),
+      ).toBeVisible();
+
+      // Verify referenced token still exists
+      await expect(
+        tokensSidebar.getByRole("button", { name: "card-shadow" }),
+      ).toBeVisible();
+
+      // Verify the shape still has the token applied with the NEW name
+      await page.getByRole("tab", { name: "Layers" }).click();
+      await workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Button" })
+        .click();
+
+      // Verify the shape still has the shadow applied with the UPDATED color value
+      // Expand the shadow section to access the color field
+      const shadowSection =
+        workspacePage.rightSidebar.getByTestId("shadow-section");
+      await expect(shadowSection).toBeVisible();
+
+      // Click to expand the shadow options (the menu button)
+      const shadowMenuButton = shadowSection
+        .getByRole("button", { name: "options" })
+        .first();
+      await shadowMenuButton.click();
+
+      // Wait for the advanced options to appear
+      await page.waitForTimeout(500);
+
+      // Verify the color value has updated from #000000 to #FF0000
+      const colorInput = shadowSection.getByRole("textbox", { name: "Color" });
+      expect(colorInput).not.toBeNull();
+      const colorValue = await colorInput.inputValue();
+      expect(colorValue.toUpperCase()).toBe("FF0000");
+    });
+  });
+
+  test.describe("Typography Token Remapping", () => {
+    test("User renames typography token with alias references", async ({
+      page,
+    }) => {
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+      } = await setupTypographyTokensFile(page);
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+      // Create base typography token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Typography" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      let nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("base-text");
+
+      const fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Font size",
+      });
+      await fontSizeField.fill("16");
+
+      let submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Create derived typography token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Typography" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      nameField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Name",
+      });
+      await nameField.fill("body-text");
+
+      const referenceToggle =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
+      await referenceToggle.click();
+
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Reference",
+      });
+      await referenceField.fill("{base-text}");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Rename base token
+      const baseToken = tokensSidebar.getByRole("button", {
+        name: "base-text",
+      });
+      await baseToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("default-text");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+
+      // Check for remapping modal
+      const remappingModal = page.getByTestId("token-remapping-modal");
+      await expect(remappingModal).toBeVisible({ timeout: 5000 });
+
+      const confirmButton = remappingModal.getByRole("button", {
+        name: /remap/i,
+      });
+      await confirmButton.click();
+
+      // Verify token was renamed
+      await expect(
+        tokensSidebar.getByRole("button", { name: "default-text" }),
+      ).toBeVisible();
+      await expect(
+        tokensSidebar.getByRole("button", { name: "body-text" }),
+      ).toBeVisible();
+    });
+
+    test("User renames and updates typography token - referenced token and applied shapes update", async ({
+      page,
+    }) => {
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+        workspacePage,
+      } = await setupTypographyTokensFile(page);
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+      // Create base typography token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Typography" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      let nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("body-style");
+
+      let fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Font size",
+      });
+      await fontSizeField.fill("16");
+
+      let submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Create derived typography token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Typography" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      nameField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Name",
+      });
+      await nameField.fill("paragraph-style");
+
+      const referenceToggle =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
+      await referenceToggle.click();
+
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Reference",
+      });
+      await referenceField.fill("{body-style}");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Apply the referenced token to a text shape
+      await page.getByRole("tab", { name: "Layers" }).click();
+      await workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Some Text" })
+        .click();
+
+      await page.getByRole("tab", { name: "Tokens" }).click();
+      const paragraphToken = tokensSidebar.getByRole("button", {
+        name: "paragraph-style",
+      });
+      await paragraphToken.click();
+
+      // Rename and update value of base token
+      const bodyToken = tokensSidebar.getByRole("button", {
+        name: "body-style",
+      });
+      await bodyToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("text-base");
+
+      // Update the font size value
+      fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
+        name: "Font size",
+      });
+      await fontSizeField.fill("18");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+
+      // Confirm remapping
+      const remappingModal = page.getByTestId("token-remapping-modal");
+      await expect(remappingModal).toBeVisible({ timeout: 5000 });
+
+      const confirmButton = remappingModal.getByRole("button", {
+        name: /remap/i,
+      });
+      await confirmButton.click();
+
+      // Verify base token was renamed
+      await expect(
+        tokensSidebar.getByRole("button", { name: "text-base" }),
+      ).toBeVisible();
+
+      // Verify referenced token still exists
+      await expect(
+        tokensSidebar.getByRole("button", { name: "paragraph-style" }),
+      ).toBeVisible();
+
+      // Verify the text shape still has the token applied with NEW name and value
+      await page.getByRole("tab", { name: "Layers" }).click();
+      await workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Some Text" })
+        .click();
+
+      // Verify the shape shows the updated font size value (18)
+      // This proves the remapping worked and the value update propagated through the reference
+      const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
+        name: "Font Size",
+      });
+      await expect(fontSizeInput).toBeVisible();
+      await expect(fontSizeInput).toHaveValue("18");
+    });
+  });
+
+  test.describe("Border Radius Token Remapping", () => {
+    test("User renames border radius token with alias references", async ({
+      page,
+    }) => {
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+      } = await setupTokensFile(page);
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+      // Create base border radius token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Border Radius" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      let nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("base-radius");
+
+      const valueField = tokensUpdateCreateModal.getByLabel("Value");
+      await valueField.fill("4");
+
+      let submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Create derived border radius token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Border Radius" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("card-radius");
+
+      const valueField2 = tokensUpdateCreateModal.getByLabel("Value");
+      await valueField2.fill("{base-radius}");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Rename base token
+      const baseToken = tokensSidebar.getByRole("button", {
+        name: "base-radius",
+      });
+      await baseToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("primary-radius");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+
+      // Check for remapping modal
+      const remappingModal = page.getByTestId("token-remapping-modal");
+      await expect(remappingModal).toBeVisible({ timeout: 5000 });
+
+      const confirmButton = remappingModal.getByRole("button", {
+        name: /remap/i,
+      });
+      await confirmButton.click();
+
+      // Verify token was renamed
+      await expect(
+        tokensSidebar.getByRole("button", { name: "primary-radius" }),
+      ).toBeVisible();
+      await expect(
+        tokensSidebar.getByRole("button", { name: "card-radius" }),
+      ).toBeVisible();
+    });
+
+    test("User renames and updates border radius token - referenced token updates", async ({
+      page,
+    }) => {
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+      } = await setupTokensFile(page);
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+      // Create base border radius token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Border Radius" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      let nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("radius-sm");
+
+      let valueField = tokensUpdateCreateModal.getByLabel("Value");
+      await valueField.fill("4");
+
+      let submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Create derived border radius token
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Border Radius" })
+        .click();
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("button-radius");
+
+      const valueField2 = tokensUpdateCreateModal.getByLabel("Value");
+      await valueField2.fill("{radius-sm}");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      // Rename and update value of base token
+      const radiusToken = tokensSidebar.getByRole("button", {
+        name: "radius-sm",
+      });
+      await radiusToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("radius-base");
+
+      // Update the value
+      valueField = tokensUpdateCreateModal.getByLabel("Value");
+      await valueField.fill("8");
+
+      submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+
+      // Confirm remapping
+      const remappingModal = page.getByTestId("token-remapping-modal");
+      await expect(remappingModal).toBeVisible({ timeout: 5000 });
+
+      const confirmButton = remappingModal.getByRole("button", {
+        name: /remap/i,
+      });
+      await confirmButton.click();
+
+      // Verify base token was renamed
+      await expect(
+        tokensSidebar.getByRole("button", { name: "radius-base" }),
+      ).toBeVisible();
+
+      // Verify referenced token still exists
+      await expect(
+        tokensSidebar.getByRole("button", { name: "button-radius" }),
+      ).toBeVisible();
+
+      // Verify the referenced token now points to the renamed token
+      // by opening it and checking the reference
+      const buttonRadiusToken = tokensSidebar.getByRole("button", {
+        name: "button-radius",
+      });
+      await buttonRadiusToken.click({ button: "right" });
+      await tokenContextMenuForToken.getByText("Edit token").click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+      const currentValue = tokensUpdateCreateModal.getByLabel("Value");
+      await expect(currentValue).toHaveValue("{radius-base}");
+    });
+  });
+});

frontend/playwright/ui/specs/tokens/sets.spec.js

@@ -0,0 +1,219 @@
+import { test, expect } from "@playwright/test";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens: Sets Tab", () => {
+  const changeSetInput = async (sidebar, setName, finalKey = "Enter") => {
+    const setInput = sidebar.locator("input:focus");
+    await expect(setInput).toBeVisible();
+    await setInput.fill(setName);
+    await setInput.press(finalKey);
+  };
+
+  const createSet = async (sidebar, setName, finalKey = "Enter") => {
+    const tokensTabButton = sidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+
+    await changeSetInput(sidebar, setName, (finalKey = "Enter"));
+  };
+
+  const assertEmptySetsList = async (el) => {
+    const buttons = await el.getByRole("button").allTextContents();
+    const filteredButtons = buttons.filter((text) => text === "Create one.");
+    await expect(filteredButtons.length).toEqual(2); // We assume there are no themes, so we have two "Create one" buttons.
+  };
+
+  const assertSetsList = async (el, sets) => {
+    const buttons = await el.getByRole("button").allTextContents();
+    const filteredButtons = buttons.filter(
+      (text) => text && text !== "Create one.",
+    );
+    await expect(filteredButtons).toEqual(sets);
+  };
+
+  test("User creates sets tree structure by entering a set path", async ({
+    page,
+  }) => {
+    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
+      await setupEmptyTokensFile(page);
+
+    const tokensTabButton = tokenThemesSetsSidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+
+    await createSet(tokenThemesSetsSidebar, "core/colors/light");
+    await createSet(tokenThemesSetsSidebar, "core/colors/dark");
+
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "light",
+      "dark",
+    ]);
+
+    // User renames set
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "light" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Rename").click();
+    await changeSetInput(tokenThemesSetsSidebar, "light-renamed");
+
+    // User cancels during editing
+    await createSet(tokenThemesSetsSidebar, "core/colors/dark", "Escape");
+
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "light-renamed",
+      "dark",
+    ]);
+
+    // Creates nesting by renaming set with double click
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "light-renamed" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Rename").click();
+    await changeSetInput(tokenThemesSetsSidebar, "nested/light");
+
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "nested",
+      "light",
+      "dark",
+    ]);
+
+    // Create set in group
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "core" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Add set to this group").click();
+    await changeSetInput(tokenThemesSetsSidebar, "sizes/small");
+
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "nested",
+      "light",
+      "dark",
+      "sizes",
+      "small",
+    ]);
+
+    // User deletes set
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "nested" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Delete").click();
+
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "dark",
+      "sizes",
+      "small",
+    ]);
+
+    // User deletes all sets
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "core" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Delete").click();
+
+    await assertEmptySetsList(tokenThemesSetsSidebar);
+  });
+
+  test("User can create & edit sets and set groups with an identical name", async ({
+    page,
+  }) => {
+    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
+      await setupEmptyTokensFile(page);
+
+    const tokensTabButton = tokenThemesSetsSidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+
+    await createSet(tokenThemesSetsSidebar, "core/colors");
+    await createSet(tokenThemesSetsSidebar, "core");
+    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "core" })
+      .nth(0)
+      .dblclick();
+    await changeSetInput(tokenThemesSetsSidebar, "core-group-renamed");
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core-group-renamed",
+      "colors",
+      "core",
+    ]);
+
+    await page.keyboard.press(`ControlOrMeta+z`);
+    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
+
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "core" })
+      .nth(1)
+      .dblclick();
+    await changeSetInput(tokenThemesSetsSidebar, "core-set-renamed");
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "core-set-renamed",
+    ]);
+  });
+
+  test("Fold/Unfold set", async ({ page }) => {
+    const { tokenThemesSetsSidebar, tokenSetGroupItems } =
+      await setupTokensFile(page);
+
+    await expect(tokenThemesSetsSidebar).toBeVisible();
+
+    const darkSet = tokenThemesSetsSidebar.getByRole("button", {
+      name: "dark",
+      exact: true,
+    });
+
+    await expect(darkSet).toBeVisible();
+
+    const setGroup = await tokenSetGroupItems
+      .filter({ hasText: "LightDark" })
+      .first();
+
+    const setCollapsable = await setGroup
+      .getByTestId("tokens-set-group-collapse")
+      .first();
+
+    await setCollapsable.click();
+
+    await expect(darkSet).toHaveCount(0);
+  });
+
+  test("Change current theme", async ({ page }) => {
+    const { tokenThemesSetsSidebar, tokenSetItems } =
+      await setupTokensFile(page);
+
+    await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "true");
+    await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "false");
+
+    await tokenThemesSetsSidebar.getByTestId("theme-select").click();
+    await page
+      .getByTestId("theme-select-dropdown")
+      .getByRole("option", { name: "Dark", exact: true })
+      .click();
+
+    await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "false");
+    await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "true");
+  });
+});

frontend/playwright/ui/specs/tokens/themes.spec.js

@@ -0,0 +1,285 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
+
+// THEMES HELPERS
+
+const checkInputFieldWithError = async (
+  tokenThemeUpdateCreateModal,
+  inputLocator,
+) => {
+  await expect(inputLocator).toHaveAttribute("aria-invalid", "true");
+
+  const errorMessageId = await inputLocator.getAttribute("aria-describedby");
+  await expect(
+    tokenThemeUpdateCreateModal.locator(`#${errorMessageId}`),
+  ).toBeVisible();
+};
+
+const checkInputFieldWithoutError = async (inputLocator) => {
+  expect(await inputLocator.getAttribute("aria-invalid")).toBeNull();
+  expect(await inputLocator.getAttribute("aria-describedby")).toBeNull();
+};
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens Themes", () => {
+  test("User edits theme and activates it in the sidebar", async ({ page }) => {
+    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
+      await setupTokensFile(page);
+
+    await expect(tokenThemesSetsSidebar).toBeVisible();
+
+    await tokenThemesSetsSidebar.getByRole("button", { name: "Edit" }).click();
+
+    await expect(tokenThemeUpdateCreateModal).toBeVisible();
+    await tokenThemeUpdateCreateModal
+      .getByRole("button", { name: "sets" })
+      .first()
+      .click();
+
+    await tokenThemeUpdateCreateModal.getByLabel("Theme").fill("Changed");
+
+    const lightDarkSetGroup = tokenThemeUpdateCreateModal.getByTestId(
+      "tokens-set-group-item",
+      {
+        name: "LightDark",
+        exact: true,
+      },
+    );
+    await expect(lightDarkSetGroup).toBeVisible();
+
+    const lightSet = tokenThemeUpdateCreateModal.getByRole("button", {
+      name: "light",
+      exact: true,
+    });
+    const darkSet = tokenThemeUpdateCreateModal.getByRole("button", {
+      name: "dark",
+      exact: true,
+    });
+
+    // Mixed set group
+    await expect(lightSet.getByRole("checkbox")).toBeChecked();
+    await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
+
+    // Disable all
+    await lightDarkSetGroup.getByRole("checkbox").click();
+    await expect(lightSet.getByRole("checkbox")).not.toBeChecked();
+    await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
+
+    // Enable all
+    await lightDarkSetGroup.getByRole("checkbox").click();
+    await expect(lightSet.getByRole("checkbox")).toBeChecked();
+    await expect(darkSet.getByRole("checkbox")).toBeChecked();
+
+    await tokenThemeUpdateCreateModal
+      .getByRole("button", {
+        name: "save theme",
+      })
+      .click();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("Changed" + "4 active sets"),
+    ).toBeVisible();
+
+    await tokenThemeUpdateCreateModal
+      .getByRole("button")
+      .getByText("close")
+      .click();
+    await expect(tokenThemeUpdateCreateModal).not.toBeVisible();
+
+    const themeSelect = tokenThemesSetsSidebar.getByRole("combobox");
+
+    await themeSelect.click();
+    await page
+      .getByTestId("theme-select-dropdown")
+      .getByRole("option", { name: "Changed" })
+      .click();
+
+    const sidebarLightSet = tokenThemesSetsSidebar.getByRole("button", {
+      name: "light",
+      exact: true,
+    });
+    const sidebarDarkSet = tokenThemesSetsSidebar.getByRole("button", {
+      name: "dark",
+      exact: true,
+    });
+
+    await expect(sidebarLightSet.getByRole("checkbox")).toBeChecked();
+    await expect(sidebarDarkSet.getByRole("checkbox")).toBeChecked();
+  });
+});
+
+test.describe("Tokens: Themes modal", () => {
+  test("Delete theme", async ({ page }) => {
+    const { tokenThemeUpdateCreateModal, workspacePage } =
+      await setupTokensFile(page);
+
+    workspacePage.openTokenThemesModal();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByRole("button", { name: "Delete theme" }),
+    ).toHaveCount(2);
+
+    await tokenThemeUpdateCreateModal
+      .getByRole("button", { name: "Delete theme" })
+      .first()
+      .click();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByRole("button", { name: "Delete theme" }),
+    ).toHaveCount(1);
+  });
+
+  test("Add new theme in empty file", async ({ page }) => {
+    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
+      await setupEmptyTokensFile(page);
+
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "Create one." })
+      .first()
+      .click();
+
+    await expect(tokenThemeUpdateCreateModal).toBeVisible();
+
+    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
+    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
+    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
+      name: "Save theme",
+    });
+
+    await groupInput.fill("New Group name");
+    await nameInput.fill("New Theme name");
+
+    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
+    await expect(saveButton).not.toBeDisabled();
+
+    await saveButton.click();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("New Theme name"),
+    ).toBeVisible();
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("New Group name"),
+    ).toBeVisible();
+  });
+
+  test("Add new theme", async ({ page }) => {
+    const { tokenThemeUpdateCreateModal, workspacePage } =
+      await setupTokensFile(page);
+
+    workspacePage.openTokenThemesModal();
+
+    await tokenThemeUpdateCreateModal
+      .getByRole("button", {
+        name: "Add new theme",
+      })
+      .click();
+
+    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
+    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
+    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
+      name: "Save theme",
+    });
+
+    await groupInput.fill("Core"); // Invalid because "Core / Light" theme already exists
+    await nameInput.fill("Light");
+
+    await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
+    await expect(saveButton).toBeDisabled();
+
+    await groupInput.fill("New Group name");
+    await nameInput.fill("New Theme name");
+
+    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
+    await expect(saveButton).not.toBeDisabled();
+
+    await saveButton.click();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("New Theme name"),
+    ).toBeVisible();
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("New Group name"),
+    ).toBeVisible();
+  });
+
+  test("Edit theme", async ({ page }) => {
+    const { tokenThemeUpdateCreateModal, workspacePage } =
+      await setupTokensFile(page);
+
+    workspacePage.openTokenThemesModal();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("no sets"),
+    ).not.toBeVisible();
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("3 active sets"),
+    ).toHaveCount(2);
+
+    await tokenThemeUpdateCreateModal
+      .getByText("3 active sets")
+      .first()
+      .click();
+
+    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
+    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
+    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
+      name: "Save theme",
+    });
+
+    await groupInput.fill("Core"); // Invalid because "Core / Dark" theme already exists
+    await nameInput.fill("Dark");
+
+    await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
+    await expect(saveButton).toBeDisabled();
+
+    await groupInput.fill("Core"); // Valid because "Core / Light" theme already exists
+    await nameInput.fill("Light"); // but it's the same theme we are editing
+
+    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
+    await expect(saveButton).not.toBeDisabled();
+
+    await nameInput.fill("Changed Theme name"); // New names should be also valid
+    await groupInput.fill("Changed Group name");
+
+    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
+    await expect(saveButton).not.toBeDisabled();
+
+    expect(await nameInput.getAttribute("aria-invalid")).toBeNull();
+    expect(await nameInput.getAttribute("aria-describedby")).toBeNull();
+
+    const checkboxes = await tokenThemeUpdateCreateModal
+      .locator('[role="checkbox"]')
+      .all();
+
+    for (const checkbox of checkboxes) {
+      const isChecked = await checkbox.getAttribute("aria-checked");
+
+      if (isChecked === "true") {
+        await checkbox.click();
+      }
+    }
+
+    const firstButton = await tokenThemeUpdateCreateModal
+      .getByTestId("tokens-set-item")
+      .first();
+
+    await firstButton.click();
+
+    await expect(saveButton).not.toBeDisabled();
+
+    await saveButton.click();
+
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("Changed Theme name"),
+    ).toBeVisible();
+    await expect(
+      tokenThemeUpdateCreateModal.getByText("Changed Group name"),
+    ).toBeVisible();
+  });
+});

frontend/playwright/ui/specs/tokens/tree.spec.js

@@ -0,0 +1,32 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import { setupTokensFile, unfoldTokenTree } from "./helpers";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens - node tree", () => {
+  test("User fold/unfold color tokens", async ({ page }) => {
+    const { tokensSidebar } = await setupTokensFile(page);
+
+    await expect(tokensSidebar).toBeVisible();
+
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+    await expect(tokensColorGroup).toBeVisible();
+    await tokensColorGroup.click();
+
+    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+
+    const colorToken = tokensSidebar.getByRole("button", {
+      name: "100",
+    });
+    await expect(colorToken).toBeVisible();
+    await tokensColorGroup.click();
+    await expect(colorToken).not.toBeVisible();
+  });
+});

frontend/src/app/main/data/style_dictionary.cljs

@@ -8,7 +8,7 @@
   (:require
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.common.logging :as l]
    [app.common.schema :as sm]
    [app.common.time :as ct]
@@ -83,7 +83,7 @@
   [value]
   (let [number? (or (number? value)
                     (numeric-string? value))
-        parsed-value  (cfo/parse-token-value value)
+        parsed-value  (cft/parse-token-value value)
         out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
                           (<= (:value parsed-value) sm/min-safe-int))]
 
@@ -109,7 +109,7 @@
   "Parses `value` of a number `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the `value` is not parseable and/or has missing references returns a map with `:errors`."
   [value]
-  (let [parsed-value  (cfo/parse-token-value value)
+  (let [parsed-value  (cft/parse-token-value value)
         out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
                           (<= (:value parsed-value) sm/min-safe-int))]
     (if (and parsed-value (not out-of-bounds))
@@ -127,7 +127,7 @@
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value]
   (let [missing-references? (seq (seq (cto/find-token-value-references value)))
-        parsed-value (cfo/parse-token-value value)
+        parsed-value (cft/parse-token-value value)
         out-of-scope (not (<= 0 (:value parsed-value) 1))
         references (seq (cto/find-token-value-references value))]
     (cond (and parsed-value (not out-of-scope))
@@ -151,7 +151,7 @@
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value]
   (let [missing-references? (seq (cto/find-token-value-references value))
-        parsed-value (cfo/parse-token-value value)
+        parsed-value (cft/parse-token-value value)
         out-of-scope (< (:value parsed-value) 0)
         references (seq (cto/find-token-value-references value))]
     (cond
@@ -250,7 +250,7 @@
            :font-size-value font-size-value})]
     (or error
         (try
-          (when-let [{:keys [unit value]} (cfo/parse-token-value line-height-value)]
+          (when-let [{:keys [unit value]} (cft/parse-token-value line-height-value)]
             (case unit
               "%" (/ value 100)
               "px" (/ value font-size-value)

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

@@ -7,7 +7,7 @@
 (ns app.main.data.workspace.tokens.application
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.common.types.component :as ctk]
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.shape.radius :as ctsr]
@@ -525,8 +525,8 @@
                           shape-ids (d/nilv (keys shapes)  [])
                           any-variant? (->> shapes vals (some ctk/is-variant?) boolean)
 
-                          resolved-value (get-in resolved-tokens [(cfo/token-identifier token) :resolved-value])
-                          tokenized-attributes (cfo/attributes-map attributes token)
+                          resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
+                          tokenized-attributes (cft/attributes-map attributes token)
                           type (:type token)]
                       (rx/concat
                        (rx/of
@@ -585,7 +585,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of
-       (let [remove-token #(when % (cfo/remove-attributes-for-token attributes token %))]
+       (let [remove-token #(when % (cft/remove-attributes-for-token attributes token %))]
          (dwsh/update-shapes
           shape-ids
           (fn [shape]
@@ -613,7 +613,7 @@
             (get token-properties (:type token))
 
             unapply-tokens?
-            (cfo/shapes-token-applied? token shapes (or attrs all-attributes attributes))
+            (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
 
             shape-ids (map :id shapes)]
 
@@ -633,6 +633,43 @@
                            :shape-ids shape-ids
                            :on-update-shape on-update-shape}))))))))
 
+(defn toggle-border-radius-token
+  [{:keys [token attrs shape-ids expand-with-children]}]
+  (ptk/reify ::on-toggle-border-radius-token
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects (dsh/lookup-page-objects state)
+            shapes (into [] (keep (d/getf objects)) shape-ids)
+
+            shapes
+            (if expand-with-children
+              (into []
+                    (mapcat (fn [shape]
+                              (if (= (:type shape) :group)
+                                (keep objects (:shapes shape))
+                                [shape])))
+                    shapes)
+              shapes)
+
+            {:keys [attributes all-attributes]}
+            (get token-properties (:type token))
+
+            unapply-tokens?
+            (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
+
+            shape-ids (map :id shapes)]
+
+        (if unapply-tokens?
+          (rx/of
+           (unapply-token {:attributes (or attrs all-attributes attributes)
+                           :token token
+                           :shape-ids shape-ids}))
+          (rx/of
+           (apply-token {:attributes attrs
+                         :token token
+                         :shape-ids shape-ids
+                         :on-update-shape update-shape-radius-for-corners})))))))
+
 
 (defn apply-token-on-selected
   [color-operations token]

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

@@ -6,7 +6,7 @@
 
 (ns app.main.data.workspace.tokens.color
   (:require
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.main.data.tinycolor :as tinycolor]))
 
 (defn color-bullet-color [token-color-value]
@@ -17,5 +17,5 @@
       (tinycolor/->hex-string tc))))
 
 (defn resolved-token-bullet-color [{:keys [resolved-value] :as token}]
-  (when (and resolved-value (cfo/color-token? token))
+  (when (and resolved-value (cft/color-token? token))
     (color-bullet-color resolved-value)))

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

@@ -149,30 +149,27 @@
 
 (defn create-token-set
   [token-set]
-  (assert (ctob/token-set? token-set) "a token set is required") ;; TODO should check token-set-schema?
   (ptk/reify ::create-token-set
-    ptk/WatchEvent
-    (watch [it state _]
-      (let [data    (dsh/lookup-file-data state)
-            changes (-> (pcb/empty-changes it)
-                        (pcb/with-library-data data)
-                        (pcb/set-token-set (ctob/get-id token-set) token-set))]
-        (rx/of (set-selected-token-set-id (ctob/get-id token-set))
-               (dch/commit-changes changes))))))
+    ptk/UpdateEvent
+    (update [_ state]
+      ;; Clear possible local state
+      (update state :workspace-tokens dissoc :token-set-new-path))
 
-(defn rename-token-set
-  [token-set new-name]
-  (assert (ctob/token-set? token-set) "a token set is required") ;; TODO should check token-set-schema after renaming?
-  (assert (string? new-name) "a new name is required") ;; TODO should assert normalized-set-name?
-  (ptk/reify ::update-token-set
     ptk/WatchEvent
     (watch [it state _]
-      (let [data    (dsh/lookup-file-data state)
-            changes (-> (pcb/empty-changes it)
-                        (pcb/with-library-data data)
-                        (pcb/rename-token-set (ctob/get-id token-set) new-name))]
-        (rx/of (set-selected-token-set-id (ctob/get-id token-set))
-               (dch/commit-changes changes))))))
+      (let [data       (dsh/lookup-file-data state)
+            tokens-lib (get data :tokens-lib)
+            token-set  (ctob/rename token-set (ctob/normalize-set-name (ctob/get-name token-set)))]
+        (if (and tokens-lib (ctob/get-set-by-name tokens-lib (ctob/get-name token-set)))
+          (rx/of (ntf/show {:content (tr "errors.token-set-already-exists")
+                            :type :toast
+                            :level :error
+                            :timeout 9000}))
+          (let [changes (-> (pcb/empty-changes it)
+                            (pcb/with-library-data data)
+                            (pcb/set-token-set (ctob/get-id token-set) token-set))]
+            (rx/of (set-selected-token-set-id (ctob/get-id token-set))
+                   (dch/commit-changes changes))))))))
 
 (defn rename-token-set-group
   [set-group-path set-group-fname]
@@ -184,6 +181,26 @@
         (rx/of
          (dch/commit-changes changes))))))
 
+(defn update-token-set
+  [token-set name]
+  (ptk/reify ::update-token-set
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [data       (dsh/lookup-file-data state)
+            name       (ctob/normalize-set-name name (ctob/get-name token-set))
+            tokens-lib (get data :tokens-lib)]
+
+        (if (ctob/get-set-by-name tokens-lib name)
+          (rx/of (ntf/show {:content (tr "errors.token-set-already-exists")
+                            :type :toast
+                            :level :error
+                            :timeout 9000}))
+          (let [changes (-> (pcb/empty-changes it)
+                            (pcb/with-library-data data)
+                            (pcb/rename-token-set (ctob/get-id token-set) name))]
+            (rx/of (set-selected-token-set-id (ctob/get-id token-set))
+                   (dch/commit-changes changes))))))))
+
 (defn duplicate-token-set
   [id]
   (ptk/reify ::duplicate-token-set
@@ -433,7 +450,7 @@
                                            (ctob/get-id token-set)
                                            token-id)]
             (let [tokens (vals (ctob/get-tokens tokens-lib (ctob/get-id token-set)))
-                  unames (map :name tokens)     ;; TODO: add function duplicate-token in tokens-lib
+                  unames (map :name tokens)
                   suffix (tr "workspace.tokens.duplicate-suffix")
                   copy-name (cfh/generate-unique-name (:name token) unames :suffix suffix)
                   new-token (-> token

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

@@ -183,6 +183,7 @@
   [:map
    [:id {:optional true} :string]
    [:class {:optional true} :string]
+   [:inner-class {:optional true} :string]
    [:value {:optional true} [:maybe [:or
                                      :int
                                      :float
@@ -209,7 +210,8 @@
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder icon disabled
+  [{:keys [id class value default placeholder
+           icon disabled inner-class
            min max max-length step
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
@@ -624,6 +626,7 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
+                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -644,7 +647,7 @@
                                                                    :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
-                                              (mf/html [:> icon-button* {:variant "action"
+                                              (mf/html [:> icon-button* {:variant "ghost"
                                                                          :icon i/tokens
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
@@ -669,6 +672,7 @@
                               :on-token-key-down on-token-key-down
                               :disabled disabled
                               :on-blur on-blur
+                              :class inner-class
                               :slot-start (when icon
                                             (mf/html [:> tooltip*
                                                       {:content property

frontend/src/app/main/ui/ds/controls/numeric_input.scss

@@ -33,12 +33,17 @@
 }
 
 .invisible-button {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 0;
   opacity: var(--opacity-button);
-
+  background-color: var(--color-background-quaternary);
   &:hover {
+    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
+    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs

@@ -26,7 +26,7 @@
   [:map
    [:id {:optional true} :string]
    [:resolved-value {:optional true}
-    [:or :int :string]]
+    [:or :int :string :float]]
    [:name {:optional true} :string]
    [:icon {:optional true} schema:icon-list]
    [:label {:optional true} :string]

frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss

@@ -30,11 +30,11 @@
 }
 
 .left-align {
-  left: 0;
+  left: var(--dropdown-offset, 0);
 }
 
 .right-align {
-  right: 0;
+  right: var(--dropdown-offset, 0);
 }
 
 .option-separator {

frontend/src/app/main/ui/ds/controls/shared/token_option.cljs

@@ -18,7 +18,7 @@
   [:map
    [:id {:optiona true} :string]
    [:ref some?]
-   [:resolved {:optional true} [:or :int :string]]
+   [:resolved {:optional true} [:or :int :string :float]]
    [:name {:optional true} :string]
    [:on-click {:optional true} fn?]
    [:selected {:optional true} :boolean]

frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs

@@ -17,7 +17,7 @@
 
 (def ^:private schema:input-field
   [:map
-   [:class {:optional true} :string]
+   [:class {:optional true} [:maybe :string]]
    [:aria-label {:optional true} [:maybe :string]]
    [:id :string]
    [:icon {:optional true}
@@ -44,9 +44,10 @@
         tooltip-id (mf/use-id)
 
         props (mf/spread-props props
-                               {:class (stl/css-case
-                                        :input true
-                                        :input-with-icon (some? icon))
+                               {:class [class
+                                        (stl/css-case
+                                         :input true
+                                         :input-with-icon (some? icon))]
                                 :ref (or ref input-ref)
                                 :aria-invalid (when (and has-hint
                                                          (= hint-type "error"))

frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs

@@ -19,6 +19,7 @@
 
 (def ^:private schema:token-field
   [:map
+   [:class {:optional true} [:maybe :string]]
    [:id {:optional true} [:maybe :string]]
    [:label {:optional true} [:maybe :string]]
    [:value :any]
@@ -32,7 +33,7 @@
 
 (mf/defc token-field*
   {::mf/schema schema:token-field}
-  [{:keys [id label value slot-start disabled
+  [{:keys [id label value slot-start disabled class
            on-click on-token-key-down on-blur detach-token
            token-wrapper-ref token-detach-btn-ref on-focus]}]
   (let [set-active? (some? id)
@@ -48,14 +49,11 @@
          (fn [event]
            (when-not ^boolean disabled
              (dom/prevent-default event)
-             (dom/focus! (mf/ref-val token-wrapper-ref)))))
+             (dom/focus! (mf/ref-val token-wrapper-ref)))))]
 
-        class
-        (stl/css-case :token-field true
-                      :with-icon (some? slot-start)
-                      :token-field-disabled disabled)]
-
-    [:div {:class class
+    [:div {:class [class (stl/css-case :token-field true
+                                       :with-icon (some? slot-start)
+                                       :token-field-disabled disabled)]
            :on-click focus-wrapper
            :disabled disabled
            :on-key-down on-token-key-down
@@ -80,7 +78,7 @@
          [:div {:class (stl/css :pill-dot)}])]]
 
      (when-not ^boolean disabled
-       [:> icon-button* {:variant "action"
+       [:> icon-button* {:variant "ghost"
                          :class (stl/css :invisible-button)
                          :icon i/broken-link
                          :ref token-detach-btn-ref

frontend/src/app/main/ui/ds/controls/utilities/token_field.scss

@@ -8,6 +8,7 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/typography.scss" as t;
 @use "ds/colors.scss" as *;
+@use "ds/mixins.scss" as *;
 
 .token-field {
   --token-field-bg-color: var(--color-background-tertiary);
@@ -16,9 +17,7 @@
   --token-field-outline-color: none;
   --token-field-height: var(--sp-xxxl);
   --token-field-margin: unset;
-
   display: grid;
-  grid-template-columns: 1fr auto;
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;
@@ -27,6 +26,7 @@
   border-radius: $br-8;
   padding: var(--sp-xs);
   outline: $b-1 solid var(--token-field-outline-color);
+  position: relative;
 
   &:hover {
     --token-field-bg-color: var(--color-background-quaternary);
@@ -39,7 +39,7 @@
 }
 
 .with-icon {
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto 1fr;
 }
 
 .token-field-disabled {
@@ -57,14 +57,17 @@
   --pill-bg-color: var(--color-background-tertiary);
   --pill-fg-color: var(--color-token-foreground);
   @include t.use-typography("code-font");
-  height: var(--sp-xxl);
-  width: fit-content;
+  @include textEllipsis;
+  display: block;
+  block-size: var(--sp-xxl);
+  inline-size: fit-content;
   background: var(--pill-bg-color);
   cursor: pointer;
   border: $b-1 solid var(--pill-border-color);
   color: var(--pill-fg-color);
   border-radius: $br-6;
   padding-inline: $sz-6;
+  max-inline-size: 100%;
   &:hover {
     --pill-bg-color: var(--color-token-background);
     --pill-fg-color: var(--color-foreground-primary);
@@ -103,24 +106,29 @@
 }
 
 .pill-dot {
-  width: $sz-6;
-  height: $sz-6;
+  inline-size: $sz-6;
+  block-size: $sz-6;
   outline: var(--sp-xxs) solid var(--color-background-primary);
   border-radius: 50%;
   background-color: var(--color-foreground-error);
-  margin-left: var(--sp-xs);
+  margin-inline-start: var(--sp-xs);
   position: absolute;
-  right: 0;
-  top: 0;
+  inset-inline-end: 0;
+  inset-block-start: 0;
 }
 
 .invisible-button {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 0;
   opacity: var(--opacity-button);
-
+  background-color: var(--color-background-quaternary);
   &:hover {
+    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
+    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

frontend/src/app/main/ui/ds/tooltip/tooltip.scss

@@ -159,4 +159,6 @@ $arrow-side: 12px;
   block-size: fit-content;
   inline-size: fit-content;
   line-height: 0;
+  display: grid;
+  max-width: 100%;
 }

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

@@ -3,10 +3,15 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.types.shape.radius :as ctsr]
+   [app.common.types.token :as tk]
    [app.main.data.workspace.shapes :as dwsh]
+   [app.main.data.workspace.tokens.application :as dwta]
+   [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
+   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as hooks]
    [app.util.i18n :as i18n :refer [tr]]
@@ -21,11 +26,17 @@
 (defn- check-border-radius-menu-props
   [old-props new-props]
   (let [old-values (unchecked-get old-props "values")
-        new-values (unchecked-get new-props "values")]
+        new-values (unchecked-get new-props "values")
+        old-applied-tokens (unchecked-get old-props "appliedTokens")
+        new-applied-tokens (unchecked-get new-props "appliedTokens")]
     (and (identical? (unchecked-get old-props "class")
                      (unchecked-get new-props "class"))
          (identical? (unchecked-get old-props "ids")
                      (unchecked-get new-props "ids"))
+         (identical? (unchecked-get old-props "shapes")
+                     (unchecked-get new-props "shapes"))
+         (identical? old-applied-tokens
+                     new-applied-tokens)
          (identical? (get old-values :r1)
                      (get new-values :r1))
          (identical? (get old-values :r2)
@@ -35,13 +46,114 @@
          (identical? (get old-values :r4)
                      (get new-values :r4)))))
 
+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach radius] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach name)
+         #(on-detach % name))
+
+        r1-value   (get applied-tokens :r1)
+        all-token-equal? (and (seq applied-tokens) (all-equal? applied-tokens))
+        all-values-equal? (all-equal? values)
+
+        applied-token (cond
+                        (not (seq applied-tokens))
+                        nil
+
+                        (and (= radius :all) (or (not all-values-equal?) (not all-token-equal?)))
+                        :multiple
+
+                        (and all-token-equal? all-values-equal? (= radius :all))
+                        r1-value
+
+                        :else
+                        (get applied-tokens radius))
+
+
+        placeholder (if (= radius :all)
+                      (cond
+                        (or (not all-values-equal?)
+                            (not all-token-equal?))
+                        (tr "settings.multiple")
+                        :else
+                        "--")
+
+                      (cond
+                        (or (= :multiple (:applied-tokens values))
+                            (= :multiple (get values name)))
+                        (tr "settings.multiple")
+                        :else
+                        "--"))
+
+
+        props  (mf/spread-props props
+                                {:placeholder placeholder
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :value values})]
+    [:> numeric-input* props]))
+
 (mf/defc border-radius-menu*
   {::mf/wrap [#(mf/memo' % check-border-radius-menu-props)]}
-  [{:keys [class ids values]}]
-  (let [all-equal?       (all-equal? values)
+  [{:keys [class ids values applied-tokens]}]
+  (let [token-numeric-inputs
+        (features/use-feature "tokens/numeric-input")
+
+        all-values-equal? (all-equal? values)
+
         radius-expanded* (mf/use-state false)
         radius-expanded  (deref radius-expanded*)
 
+        ;; DETACH
+        on-detach-token
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
+                                          :attributes #{attr}
+                                          :shape-ids ids}))))
+
+        on-detach-all
+        (mf/use-fn
+         (mf/deps on-detach-token)
+         (fn [token]
+           (run! #(on-detach-token token %) [:r1 :r2 :r3 :r4])))
+
+        on-detach-r1
+        (mf/use-fn
+         (mf/deps on-detach-token)
+         (fn [token]
+           (on-detach-token token :r1)))
+
+        on-detach-r2
+        (mf/use-fn
+         (mf/deps on-detach-token)
+         (fn [token]
+           (on-detach-token token :r2)))
+
+        on-detach-r3
+        (mf/use-fn
+         (mf/deps on-detach-token)
+         (fn [token]
+           (on-detach-token token :r3)))
+
+        on-detach-r4
+        (mf/use-fn
+         (mf/deps on-detach-token)
+         (fn [token]
+           (on-detach-token token :r4)))
+
         change-radius
         (mf/use-fn
          (mf/deps ids)
@@ -54,31 +166,54 @@
                                {:reg-objects? true
                                 :attrs [:r1 :r2 :r3 :r4]})))
 
+        change-one-radius
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [update-fn attr]
+           (dwsh/update-shapes ids
+                               (fn [shape]
+                                 (if (ctsr/has-radius? shape)
+                                   (update-fn shape)
+                                   shape))
+                               {:reg-objects? true
+                                :attrs [attr]})))
+
         toggle-radius-mode
         (mf/use-fn
          (mf/deps radius-expanded)
          (fn []
            (swap! radius-expanded* not)))
 
+
+        on-all-radius-change
+        (mf/use-fn
+         (mf/deps change-radius ids)
+         (fn [value]
+           (if (or (string? value) (number? value))
+             (st/emit!
+              (change-radius (fn [shape]
+                               (ctsr/set-radius-to-all-corners shape value))))
+             (doseq [attr [:r1 :r2 :r3 :r4]]
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     #{attr}
+                                    :shape-ids ids}))))))
+
+
         on-single-radius-change
         (mf/use-fn
-         (mf/deps ids change-radius)
-         (fn [value]
-           (st/emit!
-            (change-radius (fn [shape]
-                             (ctsr/set-radius-to-all-corners shape value))))))
-
-
-        on-radius-4-change
-        (mf/use-fn
-         (mf/deps ids change-radius)
+         (mf/deps change-one-radius ids)
          (fn [value attr]
-           (st/emit! (change-radius #(ctsr/set-radius-to-single-corner % attr value)))))
+           (if (or (string? value) (number? value))
+             (st/emit! (change-one-radius #(ctsr/set-radius-to-single-corner % attr value) attr))
+             (st/emit! (dwta/toggle-border-radius-token {:token (first value)
+                                                         :attrs #{attr}
+                                                         :shape-ids ids})))))
 
-        on-radius-r1-change #(on-radius-4-change % :r1)
-        on-radius-r2-change #(on-radius-4-change % :r2)
-        on-radius-r3-change #(on-radius-4-change % :r3)
-        on-radius-r4-change #(on-radius-4-change % :r4)
+        on-radius-r1-change #(on-single-radius-change % :r1)
+        on-radius-r2-change #(on-single-radius-change % :r2)
+        on-radius-r3-change #(on-single-radius-change % :r3)
+        on-radius-r4-change #(on-single-radius-change % :r4)
 
         expand-stream
         (mf/with-memo []
@@ -92,58 +227,139 @@
     (mf/with-effect [ids]
       (reset! radius-expanded* false))
 
-    [:div {:class (dm/str class " " (stl/css :radius))}
+    [:section {:class (dm/str class " " (stl/css :radius))
+               :aria-label "border-radius-section"}
      (if (not radius-expanded)
-       [:div {:class (stl/css :radius-1)
-              :title (tr "workspace.options.radius")}
-        [:> icon* {:icon-id i/corner-radius
-                   :size "s"
-                   :class (stl/css :icon)}]
-        [:> deprecated-input/numeric-input*
-         {:placeholder (cond
-                         (not all-equal?)
-                         (tr "settings.multiple")
-                         (= :multiple (:r1 values))
-                         (tr "settings.multiple")
-                         :else
-                         "--")
-          :min 0
-          :nillable true
-          :on-change on-single-radius-change
-          :value (if all-equal? (:r1 values) nil)}]]
-
-       [:div {:class (stl/css :radius-4)}
-        [:div {:class (stl/css :small-input)}
-         [:> deprecated-input/numeric-input*
-          {:placeholder "--"
-           :title (tr "workspace.options.radius-top-left")
+       (if token-numeric-inputs
+         [:> numeric-input-wrapper*
+          {:on-change on-all-radius-change
+           :on-detach on-detach-all
+           :icon i/corner-radius
            :min 0
-           :on-change on-radius-r1-change
-           :value (:r1 values)}]]
+           :name :border-radius
+           :nillable true
+           :property (tr "workspace.options.radius")
+           :class (stl/css :radius-wrapper)
+           :applied-tokens applied-tokens
+           :radius :all
+           :align :right
+           :values (if all-values-equal?
+                     (if (nil? (:r1 values))
+                       0
+                       (:r1 values))
+                     nil)}]
 
-        [:div {:class (stl/css :small-input)}
-         [:> deprecated-input/numeric-input*
-          {:placeholder "--"
-           :title (tr "workspace.options.radius-top-right")
-           :min 0
-           :on-change on-radius-r2-change
-           :value (:r2 values)}]]
+         [:div {:class (stl/css :radius-1)
+                :title (tr "workspace.options.radius")}
+          [:> icon* {:icon-id i/corner-radius
+                     :size "s"
+                     :class (stl/css :icon)}]
+          [:> deprecated-input/numeric-input*
+           {:placeholder (cond
+                           (not all-values-equal?)
+                           (tr "settings.multiple")
+                           (= :multiple (:r1 values))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
+            :min 0
+            :nillable true
+            :on-change on-all-radius-change
+            :value (if all-values-equal?
+                     (if (nil? (:r1 values))
+                       0
+                       (:r1 values))
+                     nil)}]])
 
-        [:div {:class (stl/css :small-input)}
-         [:> deprecated-input/numeric-input*
-          {:placeholder "--"
-           :title (tr "workspace.options.radius-bottom-left")
-           :min 0
-           :on-change on-radius-r4-change
-           :value (:r4 values)}]]
+       (if token-numeric-inputs
+         [:div {:class (stl/css :radius-4)}
+          [:> numeric-input-wrapper*
+           {:on-change on-radius-r1-change
+            :on-detach on-detach-r1
+            :min 0
+            :name :border-radius
+            :property (tr "workspace.options.radius-top-left")
+            :applied-tokens applied-tokens
+            :radius :r1
+            :align :right
+            :class (stl/css :radius-wrapper :dropdown-offset)
+            :inner-class (stl/css :no-icon-input)
+            :values  (:r1 values)}]
 
-        [:div {:class (stl/css :small-input)}
-         [:> deprecated-input/numeric-input*
-          {:placeholder "--"
-           :title (tr "workspace.options.radius-bottom-right")
-           :min 0
-           :on-change on-radius-r3-change
-           :value (:r3 values)}]]])
+          [:> numeric-input-wrapper*
+           {:on-change on-radius-r2-change
+            :on-detach on-detach-r2
+            :min 0
+            :name :border-radius
+            :nillable true
+            :property (tr "workspace.options.radius-top-right")
+            :applied-tokens applied-tokens
+            :align :right
+            :class (stl/css :radius-wrapper)
+            :inner-class (stl/css :no-icon-input)
+            :radius :r2
+            :values (:r2 values)}]
+
+          [:> numeric-input-wrapper*
+           {:on-change on-radius-r4-change
+            :on-detach on-detach-r4
+            :min 0
+            :name :border-radius
+            :nillable true
+            :property (tr "workspace.options.radius-bottom-left")
+            :applied-tokens applied-tokens
+            :class (stl/css :radius-wrapper :dropdown-offset)
+            :inner-class (stl/css :no-icon-input)
+            :radius :r4
+            :align :right
+            :values (:r4 values)}]
+
+          [:> numeric-input-wrapper*
+           {:on-change on-radius-r3-change
+            :on-detach on-detach-r3
+            :min 0
+            :name :border-radius
+            :nillable true
+            :property (tr "workspace.options.radius-bottom-right")
+            :applied-tokens applied-tokens
+            :radius :r3
+            :align :right
+            :class (stl/css :radius-wrapper)
+            :inner-class (stl/css :no-icon-input)
+            :values (:r3 values)}]]
+
+         [:div {:class (stl/css :radius-4)}
+          [:div {:class (stl/css :small-input)}
+           [:> deprecated-input/numeric-input*
+            {:placeholder "--"
+             :title (tr "workspace.options.radius-top-left")
+             :min 0
+             :on-change on-radius-r1-change
+             :value (:r1 values)}]]
+
+          [:div {:class (stl/css :small-input)}
+           [:> deprecated-input/numeric-input*
+            {:placeholder "--"
+             :title (tr "workspace.options.radius-top-right")
+             :min 0
+             :on-change on-radius-r2-change
+             :value (:r2 values)}]]
+
+          [:div {:class (stl/css :small-input)}
+           [:> deprecated-input/numeric-input*
+            {:placeholder "--"
+             :title (tr "workspace.options.radius-bottom-left")
+             :min 0
+             :on-change on-radius-r4-change
+             :value (:r4 values)}]]
+
+          [:div {:class (stl/css :small-input)}
+           [:> deprecated-input/numeric-input*
+            {:placeholder "--"
+             :title (tr "workspace.options.radius-bottom-right")
+             :min 0
+             :on-change on-radius-r3-change
+             :value (:r3 values)}]]]))
 
      [:> icon-button* {:variant "ghost"
                        :on-click toggle-radius-mode

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

@@ -5,6 +5,8 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/typography" as t;
+@use "ds/_utils.scss" as *;
 
 .radius {
   display: grid;
@@ -14,7 +16,7 @@
 
 .radius-1 {
   @extend .input-element;
-  @include deprecated.bodySmallTypography;
+  @include t.use-typography("body-small");
 }
 
 .radius-4 {
@@ -25,9 +27,27 @@
 
 .small-input {
   @extend .input-element;
-  @include deprecated.bodySmallTypography;
+  @include t.use-typography("body-small");
+}
+
+.selected {
+  border-color: var(--button-icon-border-color-selected);
+  background-color: var(--button-icon-background-color-selected);
+  color: var(--color-accent-primary);
 }
 
 .icon {
-  margin-inline: deprecated.$s-4;
+  margin-inline: var(--sp-xs);
+}
+
+.radius-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
+}
+
+.no-icon-input {
+  padding-inline-start: px2rem(6);
+}
+
+.dropdown-offset {
+  --dropdown-offset: #{px2rem(-65)};
 }

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

@@ -507,7 +507,7 @@
 
                    mdata     {:on-error #(do
                                            (reset! key* (uuid/next))
-                                           (st/emit! (ntf/error error-msg)))}
+                                           (st/emit! (ntf/warn error-msg)))}
                    params    {:shapes shapes :pos pos :val val}]
                (st/emit! (dwv/variants-switch (with-meta params mdata)))))))
 

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

@@ -78,7 +78,7 @@
                                                       (nil? (get values name)))
                                                 (tr "settings.multiple")
                                                 "--")
-                                 :class (stl/css :numeric-input-measures)
+                                 :class (stl/css :numeric-input-layout)
                                  :applied-token (get applied-tokens name)
                                  :tokens tokens
                                  :align align

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

@@ -358,6 +358,6 @@
   align-items: center;
 }
 
-.numeric-input-measures {
+.numeric-input-layout {
   --dropdown-width: var(--7-columns-dropdown-width);
 }

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

@@ -600,10 +600,7 @@
           [:> border-radius-menu* {:class (stl/css :border-radius)
                                    :ids ids
                                    :values values
-                                   :applied-tokens applied-tokens
-                                   :shapes shapes
-                                   :shape shape}])])
-
+                                   :applied-tokens applied-tokens}])])
      (when (or (options :clip-content)
                (options :show-in-viewer))
        [:div {:class (stl/css :clip-show)}

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

@@ -6,6 +6,7 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
+@use "ds/_utils.scss" as *;
 
 .element-set {
   display: grid;
@@ -156,7 +157,6 @@
   gap: deprecated.$s-4;
 }
 
-// TODO: Add a proper variable to this sizing
 .numeric-input-measures {
   --dropdown-width: var(--7-columns-dropdown-width);
 }

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -223,7 +223,6 @@
             (cond
               (= existing ::not-found) (assoc acc t-attr new-val)
               (= existing new-val)     acc
-              (nil? new-val)           acc
               :else                    (assoc acc t-attr :multiple))))
 
         merge-shape-attr
@@ -237,10 +236,8 @@
         (fn [acc shape-attrs applied-tokens]
           "Merges token values across all shape attributes.
            For each shape attribute, its corresponding token attributes are merged
-           into the accumulator. If applied tokens are empty, the accumulator is returned unchanged."
-          (if (seq applied-tokens)
-            (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs)
-            acc))
+           into the accumulator."
+          (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs))
 
         extract-attrs
         (fn [[ids values token-acc] {:keys [id type applied-tokens] :as shape}]

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

@@ -9,7 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.token :as ctt]
    [app.main.data.modal :as modal]
@@ -47,9 +47,9 @@
 ;; Actions ---------------------------------------------------------------------
 
 (defn attribute-actions [token selected-shapes attributes]
-  (let [ids-by-attributes (cfo/shapes-ids-by-applied-attributes token selected-shapes attributes)
+  (let [ids-by-attributes (cft/shapes-ids-by-applied-attributes token selected-shapes attributes)
         shape-ids (into #{} (map :id selected-shapes))]
-    {:all-selected? (cfo/shapes-applied-all? ids-by-attributes shape-ids attributes)
+    {:all-selected? (cft/shapes-applied-all? ids-by-attributes shape-ids attributes)
      :shape-ids shape-ids
      :selected-pred #(seq (% ids-by-attributes))}))
 

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

@@ -1,223 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.management.create.color
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.schema :as sm]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.constants :refer [max-input-length]]
-   [app.main.data.modal :as modal]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.library-edit :as dwtl]
-   [app.main.data.workspace.tokens.propagation :as dwtp]
-   [app.main.refs :as refs]
-   [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
-   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-color-input-token :refer [form-color-input-token*]]
-   [app.util.dom :as dom]
-   [app.util.forms :as fm]
-   [app.util.i18n :refer [tr]]
-   [app.util.keyboard :as k]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(defn- token-value-error-fn
-  [{:keys [value]}]
-  (when (or (str/empty? value)
-            (str/blank? value))
-    (tr "workspace.tokens.empty-input")))
-
-(defn- make-schema
-  [tokens-tree]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
-
-     [:value [::sm/text {:error/fn token-value-error-fn}]]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field :value
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (when (and name value)
-         (not (cto/token-value-self-reference? name value))))]]))
-
-(mf/defc form*
-  [{:keys [token validate-token action is-create selected-token-set-id tokens-tree-in-selected-set] :as props}]
-
-  (let [token
-        (mf/with-memo [token]
-          (or token {:type :color}))
-
-        token-type
-        (get token :type)
-
-        token-properties
-        (dwta/get-token-properties token)
-
-        token-title (str/lower (:title token-properties))
-
-        tokens
-        (mf/deref refs/workspace-active-theme-sets-tokens)
-
-        tokens
-        (mf/with-memo [tokens token]
-          ;; Ensure that the resolved value uses the currently editing token
-          ;; even if the name has been overriden by a token with the same name
-          ;; in another set below.
-          (cond-> tokens
-            (and (:name token) (:value token))
-            (assoc (:name token) token)))
-
-        schema
-        (mf/with-memo [tokens-tree-in-selected-set]
-          (make-schema tokens-tree-in-selected-set))
-
-        initial
-        (mf/with-memo [token]
-          {:name (:name token "")
-           :value (:value token "")
-           :description (:description token "")})
-
-        form
-        (fm/use-form :schema schema
-                     :initial initial)
-
-        warning-name-change?
-        (not= (get-in @form [:data :name])
-              (:name initial))
-
-        on-cancel
-        (mf/use-fn
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)))
-
-        on-delete-token
-        (mf/use-fn
-         (mf/deps selected-token-set-id token)
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)
-           (st/emit! (dwtl/delete-token selected-token-set-id (:id token)))))
-
-        handle-key-down-delete
-        (mf/use-fn
-         (mf/deps on-delete-token)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-delete-token e))))
-
-        handle-key-down-cancel
-        (mf/use-fn
-         (mf/deps on-cancel)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-cancel e))))
-
-        on-submit
-        (mf/use-fn
-         (mf/deps validate-token token tokens token-type)
-         (fn [form _event]
-           (let [name (get-in @form [:clean-data :name])
-                 description (get-in @form [:clean-data :description])
-                 value (get-in @form [:clean-data :value])]
-             (->> (validate-token {:token-value value
-                                   :token-name name
-                                   :token-description description
-                                   :prev-token token
-                                   :tokens tokens})
-                  (rx/subs!
-                   (fn [valid-token]
-                     (st/emit!
-                      (if is-create
-                        (dwtl/create-token (ctob/make-token {:name name
-                                                             :type token-type
-                                                             :value (:value valid-token)
-                                                             :description description}))
-
-                        (dwtl/update-token (:id token)
-                                           {:name name
-                                            :value (:value valid-token)
-                                            :description description}))
-                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
-
-    [:> fc/form* {:class (stl/css :form-wrapper)
-                  :form form
-                  :on-submit on-submit}
-     [:div {:class (stl/css :token-rows)}
-
-      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
-       (tr "workspace.tokens.create-token" token-type)]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-name"
-                           :name :name
-                           :label (tr "workspace.tokens.token-name")
-                           :placeholder (tr "workspace.tokens.enter-token-name" token-title)
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :auto-focus true}]
-
-       (when (and warning-name-change? (= action "edit"))
-         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
-          [:> context-notification*
-           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
-
-      [:div {:class (stl/css :input-row)}
-       [:> form-color-input-token*
-        {:placeholder (tr "workspace.tokens.token-value-enter")
-         :label (tr "workspace.tokens.token-value")
-         :name :value
-         :token token
-         :tokens tokens}]]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-description"
-                           :name :description
-                           :label (tr "workspace.tokens.token-description")
-                           :placeholder (tr "workspace.tokens.token-description")
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :is-optional true}]]
-
-      [:div {:class (stl/css-case :button-row true
-                                  :with-delete (= action "edit"))}
-       (when (= action "edit")
-         [:> button* {:on-click on-delete-token
-                      :on-key-down handle-key-down-delete
-                      :class (stl/css :delete-btn)
-                      :type "button"
-                      :icon i/delete
-                      :variant "secondary"}
-          (tr "labels.delete")])
-
-       [:> button* {:on-click on-cancel
-                    :on-key-down handle-key-down-cancel
-                    :type "button"
-                    :id "token-modal-cancel"
-                    :variant "secondary"}
-        (tr "labels.cancel")]
-
-       [:> fc/form-submit* {:variant "primary"
-                            :on-submit on-submit}
-        (tr "labels.save")]]]]))

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

@@ -1,222 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.management.create.dimensions
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.schema :as sm]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.constants :refer [max-input-length]]
-   [app.main.data.modal :as modal]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.library-edit :as dwtl]
-   [app.main.data.workspace.tokens.propagation :as dwtp]
-   [app.main.refs :as refs]
-   [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
-   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]]
-   [app.util.dom :as dom]
-   [app.util.forms :as fm]
-   [app.util.i18n :refer [tr]]
-   [app.util.keyboard :as k]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(defn- token-value-error-fn
-  [{:keys [value]}]
-  (when (or (str/empty? value)
-            (str/blank? value))
-    (tr "workspace.tokens.empty-input")))
-
-(defn- make-schema
-  [tokens-tree]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
-
-     [:value [::sm/text {:error/fn token-value-error-fn}]]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field :value
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (when (and name value)
-         (not (cto/token-value-self-reference? name value))))]]))
-
-(mf/defc form*
-  [{:keys [token validate-token action is-create selected-token-set-id tokens-tree-in-selected-set] :as props}]
-
-  (let [token
-        (mf/with-memo [token]
-          (or token {:type :dimensions}))
-
-        token-type
-        (get token :type)
-
-        token-properties
-        (dwta/get-token-properties token)
-
-        token-title (str/lower (:title token-properties))
-
-        tokens
-        (mf/deref refs/workspace-active-theme-sets-tokens)
-
-        tokens
-        (mf/with-memo [tokens token]
-          ;; Ensure that the resolved value uses the currently editing token
-          ;; even if the name has been overriden by a token with the same name
-          ;; in another set below.
-          (cond-> tokens
-            (and (:name token) (:value token))
-            (assoc (:name token) token)))
-
-        schema
-        (mf/with-memo [tokens-tree-in-selected-set]
-          (make-schema tokens-tree-in-selected-set))
-
-        initial
-        (mf/with-memo [token]
-          {:name (:name token "")
-           :value (:value token "")
-           :description (:description token "")})
-
-        form
-        (fm/use-form :schema schema
-                     :initial initial)
-
-        warning-name-change?
-        (not= (get-in @form [:data :name])
-              (:name initial))
-
-        on-cancel
-        (mf/use-fn
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)))
-
-        on-delete-token
-        (mf/use-fn
-         (mf/deps selected-token-set-id token)
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)
-           (st/emit! (dwtl/delete-token selected-token-set-id (:id token)))))
-
-        handle-key-down-delete
-        (mf/use-fn
-         (mf/deps on-delete-token)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-delete-token e))))
-
-        handle-key-down-cancel
-        (mf/use-fn
-         (mf/deps on-cancel)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-cancel e))))
-
-        on-submit
-        (mf/use-fn
-         (mf/deps validate-token token tokens token-type)
-         (fn [form _event]
-           (let [name (get-in @form [:clean-data :name])
-                 description (get-in @form [:clean-data :description])
-                 value (get-in @form [:clean-data :value])]
-             (->> (validate-token {:token-value value
-                                   :token-name name
-                                   :token-description description
-                                   :prev-token token
-                                   :tokens tokens})
-                  (rx/subs!
-                   (fn [valid-token]
-                     (st/emit!
-                      (if is-create
-                        (dwtl/create-token (ctob/make-token {:name name
-                                                             :type token-type
-                                                             :value (:value valid-token)
-                                                             :description description}))
-
-                        (dwtl/update-token (:id token)
-                                           {:name name
-                                            :value (:value valid-token)
-                                            :description description}))
-                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
-
-    [:> fc/form* {:class (stl/css :form-wrapper)
-                  :form form
-                  :on-submit on-submit}
-     [:div {:class (stl/css :token-rows)}
-      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
-       (tr "workspace.tokens.create-token" token-type)]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-name"
-                           :name :name
-                           :label (tr "workspace.tokens.token-name")
-                           :placeholder (tr "workspace.tokens.enter-token-name" token-title)
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :auto-focus true}]
-
-       (when (and warning-name-change? (= action "edit"))
-         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
-          [:> context-notification*
-           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
-
-      [:div {:class (stl/css :input-row)}
-       [:> form-input-token*
-        {:placeholder (tr "workspace.tokens.token-value-enter")
-         :label (tr "workspace.tokens.token-value")
-         :name :value
-         :token token
-         :tokens tokens}]]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-description"
-                           :name :description
-                           :label (tr "workspace.tokens.token-description")
-                           :placeholder (tr "workspace.tokens.token-description")
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :is-optional true}]]
-
-      [:div {:class (stl/css-case :button-row true
-                                  :with-delete (= action "edit"))}
-       (when (= action "edit")
-         [:> button* {:on-click on-delete-token
-                      :on-key-down handle-key-down-delete
-                      :class (stl/css :delete-btn)
-                      :type "button"
-                      :icon i/delete
-                      :variant "secondary"}
-          (tr "labels.delete")])
-
-       [:> button* {:on-click on-cancel
-                    :on-key-down handle-key-down-cancel
-                    :type "button"
-                    :id "token-modal-cancel"
-                    :variant "secondary"}
-        (tr "labels.cancel")]
-
-       [:> fc/form-submit* {:variant "primary"
-                            :on-submit on-submit}
-        (tr "labels.save")]]]]))

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

@@ -1,220 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.management.create.font-family
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.schema :as sm]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.constants :refer [max-input-length]]
-   [app.main.data.modal :as modal]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.library-edit :as dwtl]
-   [app.main.data.workspace.tokens.propagation :as dwtp]
-   [app.main.refs :as refs]
-   [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
-   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.combobox-token-fonts :refer [font-picker-combobox*]]
-   [app.util.dom :as dom]
-   [app.util.forms :as fm]
-   [app.util.i18n :refer [tr]]
-   [app.util.keyboard :as k]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(defn- make-schema
-  [tokens-tree]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
-
-     [:value ::sm/text]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field :value
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (when (and name value)
-         (not (cto/token-value-self-reference? name value))))]]))
-
-
-(mf/defc form*
-  [{:keys [token validate-token action is-create selected-token-set-id tokens-tree-in-selected-set] :as props}]
-
-  (let [token
-        (mf/with-memo [token]
-          (if token
-            (update token :value cto/join-font-family)
-            {:type :font-family}))
-
-        token-type
-        (get token :type)
-
-        token-properties
-        (dwta/get-token-properties token)
-
-        token-title (str/lower (:title token-properties))
-
-        tokens
-        (mf/deref refs/workspace-active-theme-sets-tokens)
-
-        tokens
-        (mf/with-memo [tokens token]
-          ;; Ensure that the resolved value uses the currently editing token
-          ;; even if the name has been overriden by a token with the same name
-          ;; in another set below.
-          (cond-> tokens
-            (and (:name token) (:value token))
-            (assoc (:name token) token)))
-
-        schema
-        (mf/with-memo [tokens-tree-in-selected-set]
-          (make-schema tokens-tree-in-selected-set))
-
-        initial
-        (mf/with-memo [token]
-          {:name (:name token "")
-           :value (:value token "")
-           :description (:description token "")})
-
-        form
-        (fm/use-form :schema schema
-                     :initial initial)
-
-        warning-name-change?
-        (not= (get-in @form [:data :name])
-              (:name initial))
-
-        on-cancel
-        (mf/use-fn
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)))
-
-        on-delete-token
-        (mf/use-fn
-         (mf/deps selected-token-set-id token)
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)
-           (st/emit! (dwtl/delete-token selected-token-set-id (:id token)))))
-
-        handle-key-down-delete
-        (mf/use-fn
-         (mf/deps on-delete-token)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-delete-token e))))
-
-        handle-key-down-cancel
-        (mf/use-fn
-         (mf/deps on-cancel)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-cancel e))))
-
-        on-submit
-        (mf/use-fn
-         (mf/deps validate-token token tokens token-type)
-         (fn [form _event]
-           (let [name (get-in @form [:clean-data :name])
-                 description (get-in @form [:clean-data :description])
-                 value (get-in @form [:clean-data :value])]
-             (->> (validate-token {:token-value value
-                                   :token-name name
-                                   :token-description description
-                                   :prev-token token
-                                   :tokens tokens})
-                  (rx/subs!
-                   (fn [valid-token]
-                     (st/emit!
-                      (if is-create
-                        (dwtl/create-token (ctob/make-token {:name name
-                                                             :type token-type
-                                                             :value (:value valid-token)
-                                                             :description description}))
-
-                        (dwtl/update-token (:id token)
-                                           {:name name
-                                            :value (:value valid-token)
-                                            :description description}))
-                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
-
-    [:> fc/form* {:class (stl/css :form-wrapper)
-                  :form form
-                  :on-submit on-submit}
-     [:div {:class (stl/css :token-rows)}
-
-      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
-       (tr "workspace.tokens.create-token" token-type)]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-name"
-                           :name :name
-                           :label (tr "workspace.tokens.token-name")
-                           :placeholder (tr "workspace.tokens.enter-token-name" token-title)
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :auto-focus true}]
-
-       (when (and warning-name-change? (= action "edit"))
-         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
-          [:> context-notification*
-           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
-
-      [:div {:class (stl/css :input-row)}
-       [:> font-picker-combobox*
-        {:placeholder (tr "workspace.tokens.token-value-enter")
-         :label (tr "workspace.tokens.token-value")
-         :name :value
-         :token token
-         :tokens tokens}]]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-description"
-                           :name :description
-                           :label (tr "workspace.tokens.token-description")
-                           :placeholder (tr "workspace.tokens.token-description")
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :is-optional true}]]
-
-      [:div {:class (stl/css-case :button-row true
-                                  :with-delete (= action "edit"))}
-       (when (= action "edit")
-         [:> button* {:on-click on-delete-token
-                      :on-key-down handle-key-down-delete
-                      :class (stl/css :delete-btn)
-                      :type "button"
-                      :icon i/delete
-                      :variant "secondary"}
-          (tr "labels.delete")])
-
-       [:> button* {:on-click on-cancel
-                    :on-key-down handle-key-down-cancel
-                    :type "button"
-                    :id "token-modal-cancel"
-                    :variant "secondary"}
-        (tr "labels.cancel")]
-
-       [:> fc/form-submit* {:variant "primary"
-                            :on-submit on-submit}
-        (tr "labels.save")]]]]))

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

@@ -1,223 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.management.create.text-case
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.schema :as sm]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.constants :refer [max-input-length]]
-   [app.main.data.modal :as modal]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.library-edit :as dwtl]
-   [app.main.data.workspace.tokens.propagation :as dwtp]
-   [app.main.refs :as refs]
-   [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
-   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]]
-   [app.util.dom :as dom]
-   [app.util.forms :as fm]
-   [app.util.i18n :refer [tr]]
-   [app.util.keyboard :as k]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(defn- token-value-error-fn
-  [{:keys [value]}]
-  (when (or (str/empty? value)
-            (str/blank? value))
-    (tr "workspace.tokens.empty-input")))
-
-(defn- make-schema
-  [tokens-tree]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
-
-     [:value [::sm/text {:error/fn token-value-error-fn}]]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field :value
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (when (and name value)
-         (not (cto/token-value-self-reference? name value))))]]))
-
-(mf/defc form*
-  [{:keys [token validate-token action is-create selected-token-set-id tokens-tree-in-selected-set] :as props}]
-
-  (let [token
-        (mf/with-memo [token]
-          (or token {:type :text-case}))
-
-        token-type
-        (get token :type)
-
-        token-properties
-        (dwta/get-token-properties token)
-
-        token-title (str/lower (:title token-properties))
-
-        tokens
-        (mf/deref refs/workspace-active-theme-sets-tokens)
-
-        tokens
-        (mf/with-memo [tokens token]
-          ;; Ensure that the resolved value uses the currently editing token
-          ;; even if the name has been overriden by a token with the same name
-          ;; in another set below.
-          (cond-> tokens
-            (and (:name token) (:value token))
-            (assoc (:name token) token)))
-
-        schema
-        (mf/with-memo [tokens-tree-in-selected-set]
-          (make-schema tokens-tree-in-selected-set))
-
-        initial
-        (mf/with-memo [token]
-          {:name (:name token "")
-           :value (:value token "")
-           :description (:description token "")})
-
-        form
-        (fm/use-form :schema schema
-                     :initial initial)
-
-        warning-name-change?
-        (not= (get-in @form [:data :name])
-              (:name initial))
-
-        on-cancel
-        (mf/use-fn
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)))
-
-        on-delete-token
-        (mf/use-fn
-         (mf/deps selected-token-set-id token)
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)
-           (st/emit! (dwtl/delete-token selected-token-set-id (:id token)))))
-
-        handle-key-down-delete
-        (mf/use-fn
-         (mf/deps on-delete-token)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-delete-token e))))
-
-        handle-key-down-cancel
-        (mf/use-fn
-         (mf/deps on-cancel)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-cancel e))))
-
-        on-submit
-        (mf/use-fn
-         (mf/deps validate-token token tokens token-type)
-         (fn [form _event]
-           (let [name (get-in @form [:clean-data :name])
-                 description (get-in @form [:clean-data :description])
-                 value (get-in @form [:clean-data :value])]
-             (->> (validate-token {:token-value value
-                                   :token-name name
-                                   :token-description description
-                                   :prev-token token
-                                   :tokens tokens})
-                  (rx/subs!
-                   (fn [valid-token]
-                     (st/emit!
-                      (if is-create
-                        (dwtl/create-token (ctob/make-token {:name name
-                                                             :type token-type
-                                                             :value (:value valid-token)
-                                                             :description description}))
-
-                        (dwtl/update-token (:id token)
-                                           {:name name
-                                            :value (:value valid-token)
-                                            :description description}))
-                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
-
-    [:> fc/form* {:class (stl/css :form-wrapper)
-                  :form form
-                  :on-submit on-submit}
-     [:div {:class (stl/css :token-rows)}
-
-      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
-       (tr "workspace.tokens.create-token" token-type)]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-name"
-                           :name :name
-                           :label (tr "workspace.tokens.token-name")
-                           :placeholder (tr "workspace.tokens.enter-token-name" token-title)
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :auto-focus true}]
-
-       (when (and warning-name-change? (= action "edit"))
-         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
-          [:> context-notification*
-           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
-
-      [:div {:class (stl/css :input-row)}
-       [:> form-input-token*
-        {:placeholder (tr "workspace.tokens.text-case-value-enter")
-         :label (tr "workspace.tokens.token-value")
-         :name :value
-         :token token
-         :tokens tokens}]]
-
-      [:div {:class (stl/css :input-row)}
-       [:> fc/form-input* {:id "token-description"
-                           :name :description
-                           :label (tr "workspace.tokens.token-description")
-                           :placeholder (tr "workspace.tokens.token-description")
-                           :max-length max-input-length
-                           :variant "comfortable"
-                           :is-optional true}]]
-
-      [:div {:class (stl/css-case :button-row true
-                                  :with-delete (= action "edit"))}
-       (when (= action "edit")
-         [:> button* {:on-click on-delete-token
-                      :on-key-down handle-key-down-delete
-                      :class (stl/css :delete-btn)
-                      :type "button"
-                      :icon i/delete
-                      :variant "secondary"}
-          (tr "labels.delete")])
-
-       [:> button* {:on-click on-cancel
-                    :on-key-down handle-key-down-cancel
-                    :type "button"
-                    :id "token-modal-cancel"
-                    :variant "secondary"}
-        (tr "labels.cancel")]
-
-       [:> fc/form-submit* {:variant "primary"
-                            :on-submit on-submit}
-        (tr "labels.save")]]]]))

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

@@ -1,427 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.management.create.typography
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.data :as d]
-   [app.common.files.tokens :as cfo]
-   [app.common.schema :as sm]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.constants :refer [max-input-length]]
-   [app.main.data.modal :as modal]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.library-edit :as dwtl]
-   [app.main.data.workspace.tokens.propagation :as dwtp]
-   [app.main.refs :as refs]
-   [app.main.store :as st]
-   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
-   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.forms :as forms]
-   [app.main.ui.workspace.tokens.management.create.combobox-token-fonts :refer [font-picker-composite-combobox*]]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [token-composite-value-input*]]
-   [app.util.dom :as dom]
-   [app.util.forms :as fm]
-   [app.util.i18n :refer [tr]]
-   [app.util.keyboard :as k]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(mf/defc composite-form*
-  [{:keys [token tokens] :as props}]
-  (let [letter-spacing-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :letter-spacing
-             :value (cto/join-font-family (get value :letter-spacing))}
-            {:type :letter-spacing}))
-
-        font-family-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :font-family
-             :value (get value :font-family)}
-            {:type :font-family}))
-
-        font-size-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :font-size
-             :value (get value :font-size)}
-            {:type :font-size}))
-
-        font-weight-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :font-weight
-             :value (get value :font-weight)}
-            {:type :font-weight}))
-
-        ;; TODO: Review this type
-        line-height-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :number
-             :value (get value :line-height)}
-            {:type :number}))
-
-        text-case-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :text-case
-             :value (get value :text-case)}
-            {:type :text-case}))
-
-        text-decoration-sub-token
-        (mf/with-memo [token]
-          (if-let [value (get token :value)]
-            {:type :text-decoration
-             :value (get value :text-decoration)}
-            {:type :text-decoration}))]
-
-    [:*
-     [:div {:class (stl/css :input-row)}
-      [:> font-picker-composite-combobox*
-       {:icon i/text-font-family
-        :placeholder (tr "workspace.tokens.token-font-family-value-enter")
-        :aria-label  (tr "workspace.tokens.token-font-family-value")
-        :name :font-family
-        :token font-family-sub-token
-        :tokens tokens}]]
-     [:div {:class (stl/css :input-row)}
-      [:> token-composite-value-input*
-       {:aria-label "Font Size"
-        :icon i/text-font-size
-        :placeholder (tr "workspace.tokens.font-size-value-enter")
-        :name :font-size
-        :token font-size-sub-token
-        :tokens tokens}]]
-     [:div {:class (stl/css :input-row)}
-      [:> token-composite-value-input*
-       {:aria-label "Font Weight"
-        :icon i/text-font-weight
-        :placeholder (tr "workspace.tokens.font-weight-value-enter")
-        :name :font-weight
-        :token font-weight-sub-token
-        :tokens tokens}]]
-     [:div {:class (stl/css :input-row)}
-      [:> token-composite-value-input*
-       {:aria-label "Line Height"
-        :icon i/text-lineheight
-        :placeholder (tr "workspace.tokens.line-height-value-enter")
-        :name :line-height
-        :token line-height-sub-token
-        :tokens tokens}]]
-     [:div {:class (stl/css :input-row)}
-      [:> token-composite-value-input*
-       {:aria-label "Letter Spacing"
-        :icon i/text-letterspacing
-        :placeholder (tr "workspace.tokens.letter-spacing-value-enter-composite")
-        :name :letter-spacing
-        :token letter-spacing-sub-token
-        :tokens tokens}]]
-     [:div {:class (stl/css :input-row)}
-      [:> token-composite-value-input*
-       {:aria-label "Text Case"
-        :icon i/text-mixed
-        :placeholder (tr "workspace.tokens.text-case-value-enter")
-        :name :text-case
-        :token text-case-sub-token
-        :tokens tokens}]]
-     [:div {:class (stl/css :input-row)}
-      [:> token-composite-value-input*
-       {:aria-label "Text Decoration"
-        :icon i/text-underlined
-        :placeholder (tr "workspace.tokens.text-decoration-value-enter")
-        :name :text-decoration
-        :token text-decoration-sub-token
-        :tokens tokens}]]]))
-
-(mf/defc reference-form*
-  [{:keys [token tokens] :as props}]
-  [:div {:class (stl/css :input-row)}
-   [:> token-composite-value-input*
-    {:placeholder (tr "workspace.tokens.reference-composite")
-     :aria-label (tr "labels.reference")
-     :icon i/text-typography
-     :name :reference
-     :token token
-     :tokens tokens}]])
-
-(defn- make-schema
-  [tokens-tree active-tab]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255
-                 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc
-                             :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
-
-     [:value
-      [:map
-       [:font-family {:optional true} [:maybe :string]]
-       [:font-size {:optional true} [:maybe :string]]
-       [:font-weight {:optional true} [:maybe :string]]
-       [:line-height {:optional true} [:maybe :string]]
-       [:letter-spacing {:optional true} [:maybe :string]]
-       [:text-case {:optional true} [:maybe :string]]
-       [:text-decoration {:optional true} [:maybe :string]]
-       (if (= active-tab :reference)
-         [:reference {:optional false} ::sm/text]
-         [:reference {:optional true} [:maybe :string]])]]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field [:value :reference]
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (let [reference (get value :reference)]
-         (if (and reference name)
-           (not (cto/token-value-self-reference? name reference))
-           true)))]
-
-    [:fn {:error/field [:value :line-height]
-          :error/fn #(tr "workspace.tokens.composite-line-height-needs-font-size")}
-     (fn [{:keys [value]}]
-       (let [line-heigh (get value :line-height)
-             font-size (get value :font-size)]
-         (if (and line-heigh (not font-size))
-           false
-           true)))]
-
-    ;; This error does not shown on interface, it's just to avoid saving empty composite tokens
-    ;; We don't need to translate it.
-    [:fn {:error/fn (fn [_] "At least one composite field must be set")
-          :error/field :value}
-     (fn [attrs]
-       (let [result (reduce-kv (fn [_ _ v]
-                                 (if (str/empty? v)
-                                   false
-                                   (reduced true)))
-                               false
-                               (get attrs :value))]
-         result))]]))
-
-(mf/defc form*
-  [{:keys [token validate-token action is-create selected-token-set-id tokens-tree-in-selected-set] :as props}]
-
-  (let [token
-        (mf/with-memo [token]
-          (or token {:type :typography}))
-
-        active-tab* (mf/use-state #(if (cfo/is-reference? token) :reference :composite))
-        active-tab (deref active-tab*)
-
-        token-type
-        (get token :type)
-
-        token-properties
-        (dwta/get-token-properties token)
-
-        token-title (str/lower (:title token-properties))
-
-        tokens
-        (mf/deref refs/workspace-active-theme-sets-tokens)
-
-        tokens
-        (mf/with-memo [tokens token]
-          ;; Ensure that the resolved value uses the currently editing token
-          ;; even if the name has been overriden by a token with the same name
-          ;; in another set below.
-          (cond-> tokens
-            (and (:name token) (:value token))
-            (assoc (:name token) token)))
-
-        schema
-        (mf/with-memo [tokens-tree-in-selected-set active-tab]
-          (make-schema tokens-tree-in-selected-set active-tab))
-
-        initial
-        (mf/with-memo [token]
-          (let [value (:value token)
-                processed-value
-                (cond
-                  (string? value)
-                  {:reference value}
-
-                  (map? value)
-                  (let [value (cond-> value
-                                (:font-family value)
-                                (update :font-family cto/join-font-family))]
-                    (select-keys value
-                                 [:font-family
-                                  :font-size
-                                  :font-weight
-                                  :line-height
-                                  :letter-spacing
-                                  :text-case
-                                  :text-decoration]))
-                  :else
-                  {})]
-
-            {:name        (:name token "")
-             :value       processed-value
-             :description (:description token "")}))
-
-        form
-        (fm/use-form :schema schema
-                     :initial initial)
-
-        warning-name-change?
-        (not= (get-in @form [:data :name])
-              (:name initial))
-
-        on-toggle-tab
-        (mf/use-fn
-         (mf/deps)
-         (fn [new-tab]
-           (let [new-tab (keyword new-tab)]
-             (reset! active-tab* new-tab))))
-
-        on-cancel
-        (mf/use-fn
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)))
-
-        on-delete-token
-        (mf/use-fn
-         (mf/deps selected-token-set-id token)
-         (fn [e]
-           (dom/prevent-default e)
-           (modal/hide!)
-           (st/emit! (dwtl/delete-token selected-token-set-id (:id token)))))
-
-        handle-key-down-delete
-        (mf/use-fn
-         (mf/deps on-delete-token)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-delete-token e))))
-
-        handle-key-down-cancel
-        (mf/use-fn
-         (mf/deps on-cancel)
-         (fn [e]
-           (when (or (k/enter? e) (k/space? e))
-             (on-cancel e))))
-
-        on-submit
-        (mf/use-fn
-         (mf/deps validate-token token tokens token-type)
-         (fn [form _event]
-           (let [name (get-in @form [:clean-data :name])
-                 description (get-in @form [:clean-data :description])
-                 value       (get-in @form [:clean-data :value])]
-
-             (->> (validate-token {:token-value (if (contains? value :reference)
-                                                  (get value :reference)
-                                                  value)
-                                   :token-name name
-                                   :token-description description
-                                   :prev-token token
-                                   :tokens tokens})
-                  (rx/subs!
-                   (fn [valid-token]
-                     (st/emit!
-                      (if is-create
-                        (dwtl/create-token (ctob/make-token {:name name
-                                                             :type token-type
-                                                             :value (:value valid-token)
-                                                             :description description}))
-
-                        (dwtl/update-token (:id token)
-                                           {:name name
-                                            :value (:value valid-token)
-                                            :description description}))
-                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
-
-    [:> forms/form* {:class (stl/css :form-wrapper)
-                     :form form
-                     :on-submit on-submit}
-     [:div {:class (stl/css :token-rows)}
-
-      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
-       (tr "workspace.tokens.create-token" token-type)]
-
-      [:div {:class (stl/css :input-row)}
-       [:> forms/form-input* {:id "token-name"
-                              :name :name
-                              :label (tr "workspace.tokens.token-name")
-                              :placeholder (tr "workspace.tokens.enter-token-name" token-title)
-                              :max-length max-input-length
-                              :variant "comfortable"
-                              :auto-focus true}]
-
-       (when (and warning-name-change? (= action "edit"))
-         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
-          [:> context-notification*
-           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
-
-      [:div {:class (stl/css :title-bar)}
-       [:div {:class (stl/css :title)} (tr "labels.typography")]
-       [:& radio-buttons {:class (stl/css :listing-options)
-                          :selected (d/name active-tab)
-                          :on-change on-toggle-tab
-                          :name "reference-composite-tab"}
-        [:& radio-button {:icon i/layers
-                          :value "composite"
-                          :title (tr "workspace.tokens.individual-tokens")
-                          :id "composite-opt"}]
-        [:& radio-button {:icon i/tokens
-                          :value "reference"
-                          :title (tr "workspace.tokens.use-reference")
-                          :id "reference-opt"}]]]
-      [:div {:class (stl/css :inputs-wrapper)}
-       (if (= active-tab :composite)
-         [:> composite-form* {:token token
-                              :tokens tokens}]
-
-         [:> reference-form* {:token token
-                              :tokens tokens}])]
-
-      [:div {:class (stl/css :input-row)}
-       [:> forms/form-input* {:id "token-description"
-                              :name :description
-                              :label (tr "workspace.tokens.token-description")
-                              :placeholder (tr "workspace.tokens.token-description")
-                              :max-length max-input-length
-                              :variant "comfortable"
-                              :is-optional true}]]
-
-      [:div {:class (stl/css-case :button-row true
-                                  :with-delete (= action "edit"))}
-       (when (= action "edit")
-         [:> button* {:on-click on-delete-token
-                      :on-key-down handle-key-down-delete
-                      :class (stl/css :delete-btn)
-                      :type "button"
-                      :icon i/delete
-                      :variant "secondary"}
-          (tr "labels.delete")])
-
-       [:> button* {:on-click on-cancel
-                    :on-key-down handle-key-down-cancel
-                    :type "button"
-                    :id "token-modal-cancel"
-                    :variant "secondary"}
-        (tr "labels.cancel")]
-
-       [:> forms/form-submit* {:variant "primary"
-                               :on-submit on-submit}
-        (tr "labels.save")]]]]))

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

@@ -6,9 +6,9 @@
 
 (ns app.main.ui.workspace.tokens.management.forms.color
   (:require
+   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
    [app.main.ui.workspace.tokens.management.forms.controls :as token.controls]
    [app.main.ui.workspace.tokens.management.forms.generic-form :as generic]
    [app.util.i18n :refer [tr]]
@@ -29,9 +29,9 @@
      [:name
       [:and
        [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
+       (sm/update-properties cto/token-name-ref assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
        [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
+        #(not (cft/token-name-path-exists? % tokens-tree))]]]
 
      [:value [::sm/text {:error/fn token-value-error-fn}]]
 

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

@@ -28,7 +28,7 @@
 
         token-path
         (mf/with-memo [token]
-          (ctob/get-token-path token))
+          (cft/token-name->path (:name token)))
 
         tokens-tree-in-selected-set
         (mf/with-memo [token-path tokens-in-selected-set]

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

@@ -8,7 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
@@ -42,6 +42,7 @@
             (str/blank? value))
     (tr "workspace.tokens.empty-input")))
 
+
 (defn get-value-for-validator
   [active-tab value value-subfield form-type]
 
@@ -66,9 +67,9 @@
      [:name
       [:and
        [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
+       (sm/update-properties cto/token-name-ref assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
        [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
+        #(not (cft/token-name-path-exists? % tokens-tree))]]]
 
      [:value [::sm/text {:error/fn token-value-error-fn}]]
 
@@ -79,7 +80,7 @@
           :error/fn #(tr "workspace.tokens.self-reference")}
      (fn [{:keys [name value]}]
        (when (and name value)
-         (not (cto/token-value-self-reference? name value))))]]))
+         (nil? (cto/token-value-self-reference? name value))))]]))
 
 (mf/defc form*
   [{:keys [token
@@ -101,7 +102,7 @@
         input-component (or input-component token.controls/input*)
         validate-token (or validator default-validate-token)
 
-        active-tab* (mf/use-state #(if (cfo/is-reference? token) :reference :composite))
+        active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
         active-tab (deref active-tab*)
 
         on-toggle-tab

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

@@ -8,9 +8,9 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
@@ -51,7 +51,7 @@
     ;; Entering form without a value - show no error just resolve nil
     (nil? token-value) (rx/of nil)
     ;; Validate refrence string
-    (cto/composite-token-reference? token-value) (default-validate-token params)
+    (cto/shadow-composite-token-reference? token-value) (default-validate-token params)
     ;; Validate composite token
     :else
     (let [params (-> params
@@ -262,10 +262,10 @@
       [:and
        [:string {:min 1 :max 255
                  :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc
+       (sm/update-properties cto/token-name-ref assoc
                              :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
        [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
+        #(not (cft/token-name-path-exists? % tokens-tree))]]]
 
      [:value
       [:map

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

@@ -8,9 +8,9 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
@@ -48,7 +48,7 @@
     ;; Entering form without a value - show no error just resolve nil
     (nil? token-value) (rx/of nil)
     ;; Validate refrence string
-    (cto/composite-token-reference? token-value) (default-validate-token props)
+    (cto/typography-composite-token-reference? token-value) (default-validate-token props)
     ;; Validate composite token
     :else
     (-> props
@@ -217,10 +217,10 @@
       [:and
        [:string {:min 1 :max 255
                  :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/schema:token-name assoc
+       (sm/update-properties cto/token-name-ref assoc
                              :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
        [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
+        #(not (cft/token-name-path-exists? % tokens-tree))]]]
 
      [:value
       [:map

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

@@ -1,6 +1,7 @@
 (ns app.main.ui.workspace.tokens.management.forms.validators
   (:require
    [app.common.data :as d]
+   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
@@ -28,7 +29,7 @@
                 ;; When creating a new token we dont have a name yet or invalid name,
                 ;; but we still want to resolve the value to show in the form.
                 ;; So we use a temporary token name that hopefully doesn't clash with any of the users token names
-                (not (sm/valid? cto/schema:token-name (:name token))) (assoc :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"))
+                (not (sm/valid? cto/token-name-ref (:name token))) (assoc :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"))
         tokens' (cond-> tokens
                   ;; Remove previous token when renaming a token
                   (not= (:name token) (:name prev-token))
@@ -88,3 +89,23 @@
   [token-name token-vals]
   (when (some #(cto/token-value-self-reference? token-name %) token-vals)
     (wte/get-error-code :error.token/direct-self-reference)))
+
+
+
+;; This is used in plugins
+
+(defn- make-token-name-schema
+  "Generate a dynamic schema validation to check if a token path derived
+  from the name already exists at `tokens-tree`."
+  [tokens-tree]
+  [:and
+   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
+   (sm/update-properties cto/token-name-ref assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
+   [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
+    #(not (cft/token-name-path-exists? % tokens-tree))]])
+
+(defn validate-token-name
+  [tokens-tree name]
+  (let [schema    (make-token-name-schema tokens-tree)
+        explainer (sm/explainer schema)]
+    (-> name explainer sm/simplify not-empty)))

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

@@ -10,7 +10,7 @@
    [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.common.path-names :as cpn]
    [app.common.types.token :as ctt]
    [app.main.data.workspace.tokens.application :as dwta]
@@ -156,9 +156,9 @@
 
 (defn- applied-all-attributes?
   [token selected-shapes attributes]
-  (let [ids-by-attributes (cfo/shapes-ids-by-applied-attributes token selected-shapes attributes)
+  (let [ids-by-attributes (cft/shapes-ids-by-applied-attributes token selected-shapes attributes)
         shape-ids         (into #{} xf:map-id selected-shapes)]
-    (cfo/shapes-applied-all? ids-by-attributes shape-ids attributes)))
+    (cft/shapes-applied-all? ids-by-attributes shape-ids attributes)))
 
 (defn attributes-match-selection?
   [selected-shapes attrs & {:keys [selected-inside-layout?]}]
@@ -178,7 +178,7 @@
   (let [{:keys [name value errors type]} token
 
         has-selected?  (pos? (count selected-shapes))
-        is-reference?  (cfo/is-reference? token)
+        is-reference?  (cft/is-reference? token)
         contains-path? (str/includes? name ".")
 
         attributes (as-> (get dwta/token-properties type) $
@@ -191,7 +191,7 @@
 
         applied?
         (if has-selected?
-          (cfo/shapes-token-applied? token selected-shapes attributes)
+          (cft/shapes-token-applied? token selected-shapes attributes)
           false)
 
         half-applied?
@@ -219,7 +219,7 @@
             no-valid-value)
 
         color
-        (when (cfo/color-token? token)
+        (when (cft/color-token? token)
           (let [theme-token (get active-theme-tokens name)]
             (or (dwtc/resolved-token-bullet-color theme-token)
                 (dwtc/resolved-token-bullet-color token))))

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

@@ -62,8 +62,7 @@
              (st/emit! (dwtl/start-token-set-edition id)))))]
 
     [:> controlled-sets-list*
-     {:tokens-lib tokens-lib
-      :token-sets token-sets
+     {:token-sets token-sets
 
       :is-token-set-active token-set-active?
       :is-token-set-group-active token-set-group-active?
@@ -80,6 +79,6 @@
 
       :on-toggle-token-set on-toggle-token-set-click
       :on-toggle-token-set-group on-toggle-token-set-group-click
-      :on-update-token-set (partial sets-helpers/on-update-token-set tokens-lib)
+      :on-update-token-set sets-helpers/on-update-token-set
       :on-update-token-set-group sets-helpers/on-update-token-set-group
       :on-create-token-set sets-helpers/on-create-token-set}]))

frontend/src/app/main/ui/workspace/tokens/sets/helpers.cljs

@@ -1,13 +1,9 @@
 (ns app.main.ui.workspace.tokens.sets.helpers
   (:require
-   [app.common.files.tokens :as cfo]
-   [app.common.schema :as sm]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.event :as ev]
-   [app.main.data.notifications :as ntf]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
-   [app.util.i18n :refer [tr]]
    [potok.v2.core :as ptk]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -15,18 +11,9 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn on-update-token-set
-  [tokens-lib token-set name]
-  (let [name   (ctob/normalize-set-name name)
-        errors (sm/validation-errors name (cfo/make-token-set-name-schema
-                                           tokens-lib
-                                           (ctob/get-id token-set)))]
-    (st/emit! (dwtl/clear-token-set-edition))
-    (if (empty? errors)
-      (st/emit! (dwtl/rename-token-set token-set name))
-      (st/emit! (ntf/show {:content (tr "errors.token-set-already-exists")
-                           :type :toast
-                           :level :error
-                           :timeout 9000})))))
+  [token-set name]
+  (st/emit! (dwtl/clear-token-set-edition)
+            (dwtl/update-token-set token-set name)))
 
 (defn on-update-token-set-group
   [path name]
@@ -34,15 +21,15 @@
             (dwtl/rename-token-set-group path name)))
 
 (defn on-create-token-set
-  [tokens-lib parent-set name]
-  (let [name   (ctob/make-child-name parent-set name)
-        errors (sm/validation-errors name (cfo/make-token-set-name-schema tokens-lib nil))]
+  [parent-set name]
+  (let [;; FIXME: this code should be reusable under helper under
+        ;; common types namespace
+        name
+        (if-let [parent-path (ctob/get-set-path parent-set)]
+          (->> (concat parent-path (ctob/split-set-name name))
+               (ctob/join-set-path))
+          (ctob/normalize-set-name name))
+        token-set (ctob/make-token-set :name name)]
+
     (st/emit! (ptk/data-event ::ev/event {::ev/name "create-token-set" :name name})
-              (dwtl/clear-token-set-creation))
-    (if (empty? errors)
-      (let [token-set (ctob/make-token-set :name name)]
-        (st/emit! (dwtl/create-token-set token-set)))
-      (st/emit! (ntf/show {:content (tr "errors.token-set-already-exists")
-                           :type :toast
-                           :level :error
-                           :timeout 9000})))))
+              (dwtl/create-token-set token-set))))

frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs

@@ -321,7 +321,6 @@
            on-select
            on-toggle-set
            on-toggle-set-group
-           tokens-lib
            token-sets
            new-path
            edition-id]}]
@@ -409,7 +408,7 @@
 
             :on-drop on-drop
             :on-reset-edition on-reset-edition
-            :on-edit-submit (partial sets-helpers/on-create-token-set tokens-lib)}]
+            :on-edit-submit sets-helpers/on-create-token-set}]
 
           :else
           [:> sets-tree-set*
@@ -435,8 +434,7 @@
             :on-edit-submit on-edit-submit-set}])))))
 
 (mf/defc controlled-sets-list*
-  [{:keys [tokens-lib
-           token-sets
+  [{:keys [token-sets
            selected
            on-update-token-set
            on-update-token-set-group
@@ -488,7 +486,6 @@
         {:is-draggable draggable?
          :new-path new-path
          :edition-id edition-id
-         :tokens-lib tokens-lib
          :token-sets token-sets
          :selected selected
          :on-select on-select

frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs

@@ -7,11 +7,8 @@
 (ns app.main.ui.workspace.tokens.themes.create-modal
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.files.tokens :as cfo]
    [app.common.logic.tokens :as clt]
-   [app.common.schema :as sm]
    [app.common.types.tokens-lib :as ctob]
    [app.main.constants :refer [max-input-length]]
    [app.main.data.event :as ev]
@@ -33,9 +30,32 @@
    [app.util.i18n :refer [tr]]
    [app.util.keyboard :as k]
    [cuerdas.core :as str]
+   [malli.core :as m]
+   [malli.error :as me]
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
+;; Schemas ---------------------------------------------------------------------
+
+(defn- theme-name-schema
+  "Generate a dynamic schema validation to check if a theme path derived from the name already exists at `tokens-tree`."
+  [{:keys [group theme-id tokens-lib]}]
+  (m/-simple-schema
+   {:type :token/name-exists
+    :pred (fn [name]
+            (if tokens-lib
+              (let [theme (ctob/get-theme-by-name tokens-lib group name)]
+                (or (nil? theme)
+                    (= (ctob/get-id theme) theme-id)))
+              true))  ;; if still no library exists, cannot be duplicate
+    :type-properties {:error/fn #(tr "workspace.tokens.theme-name-already-exists")}}))
+
+(defn validate-theme-name
+  [tokens-lib group theme-id name]
+  (let [schema     (theme-name-schema {:tokens-lib tokens-lib :theme-id theme-id :group group})
+        validation (m/explain schema (str/trim name))]
+    (me/humanize validation)))
+
 ;; Form Component --------------------------------------------------------------
 
 (mf/defc empty-themes
@@ -179,43 +199,26 @@
                             theme-groups)
         current-group* (mf/use-state (:group theme))
         current-group  (deref current-group*)
-        current-name*  (mf/use-state (:name theme))
-        current-name   (deref current-name*)
-        group-errors*  (mf/use-state nil)
-        group-errors   (deref group-errors*)
         name-errors*   (mf/use-state nil)
         name-errors    (deref name-errors*)
 
         on-update-group
         (mf/use-fn
-         (mf/deps on-change-field tokens-lib current-name)
+         (mf/deps on-change-field)
          (fn [value]
-           (let [errors (sm/validation-errors value (cfo/make-token-theme-group-schema
-                                                     tokens-lib
-                                                     current-name
-                                                     (ctob/get-id theme)))]
-             (reset! group-errors* errors)
-             (if (empty? errors)
-               (do
-                 (reset! current-group* value)
-                 (on-change-field :group value))
-               (on-change-field :group "")))))
+           (reset! current-group* value)
+           (on-change-field :group value)))
 
         on-update-name
         (mf/use-fn
          (mf/deps on-change-field tokens-lib current-group)
          (fn [event]
            (let [value  (-> event dom/get-target dom/get-value)
-                 errors (sm/validation-errors value (cfo/make-token-theme-name-schema
-                                                     tokens-lib
-                                                     current-group
-                                                     (ctob/get-id theme)))]
+                 errors (validate-theme-name tokens-lib current-group (ctob/get-id theme) value)]
              (reset! name-errors* errors)
              (mf/set-ref-val! theme-name-ref value)
              (if (empty? errors)
-               (do
-                 (reset! current-name* value)
-                 (on-change-field :name value))
+               (on-change-field :name value)
                (on-change-field :name "")))))]
 
     [:div {:class (stl/css :edit-theme-inputs-wrapper)}
@@ -225,7 +228,6 @@
                      :placeholder (tr "workspace.tokens.label.group-placeholder")
                      :default-selected (:group theme)
                      :options (clj->js options)
-                     :has-error (d/not-empty? group-errors)
                      :on-change on-update-group}]]
 
      [:div {:class (stl/css :group-input-wrapper)}
@@ -278,7 +280,6 @@
 (mf/defc edit-create-theme*
   [{:keys [change-view theme on-save is-editing has-prev-view]}]
   (let [ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
-        tokens-lib (mf/deref refs/tokens-lib)
         token-sets (mf/deref refs/workspace-token-sets-tree)
 
         current-theme* (mf/use-state theme)
@@ -380,8 +381,7 @@
        [:div {:class (stl/css :sets-list-wrapper)}
 
         [:> wts/controlled-sets-list*
-         {:tokens-lib tokens-lib
-          :token-sets token-sets
+         {:token-sets token-sets
           :is-token-set-active token-set-active?
           :is-token-set-group-active token-set-group-active?
           :on-select on-click-token-set

frontend/src/app/plugins/tokens.cljs

@@ -7,20 +7,18 @@
 (ns app.plugins.tokens
   (:require
    [app.common.data.macros :as dm]
-   [app.common.files.tokens :as cfo]
-   [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.common.uuid :as uuid]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
+   [app.main.ui.workspace.tokens.management.forms.validators :as form-validator]
+   [app.main.ui.workspace.tokens.themes.create-modal :as theme-form]
    [app.plugins.utils :as u]
    [app.util.object :as obj]
    [clojure.datafy :refer [datafy]]))
 
-;; === Token
-
 (defn- apply-token-to-shapes
   [file-id set-id id shape-ids attrs]
   (let [token (u/locate-token file-id set-id id)
@@ -52,13 +50,15 @@
          (ctob/get-name token)))
      :set
      (fn [_ value]
-       (let [name (u/coerce-1 value
-                              (cfo/make-token-name-schema
-                               (-> (u/locate-tokens-lib file-id)
-                                   (ctob/get-tokens set-id)))
-                              :name
-                              "Invalid token name")]
-         (when name
+       (let [tokens-lib (u/locate-tokens-lib file-id)
+             errors     (form-validator/validate-token-name
+                         (ctob/get-tokens tokens-lib set-id)
+                         value)]
+         (cond
+           (some? errors)
+           (u/display-not-valid :name (first errors))
+
+           :else
            (st/emit! (dwtl/update-token set-id id {:name value})))))}
 
     :type
@@ -84,11 +84,6 @@
 
     :duplicate
     (fn []
-      ;; TODO:
-      ;;  - add function duplicate-token in tokens-lib, that allows to specify the new id
-      ;;  - use this function in dwtl/duplicate-token
-      ;;  - return the new token proxy using the locally forced id
-      ;;  - do the same with sets and themes
       (let [token  (u/locate-token file-id set-id id)
             token' (ctob/make-token (-> (datafy token)
                                         (dissoc :id
@@ -109,13 +104,9 @@
       (let [selected (get-in @st/state [:workspace-local :selected])]
         (apply-token-to-shapes file-id set-id id selected attrs)))))
 
-
-;; === Token Set
-
 (defn token-set-proxy
   [plugin-id file-id id]
-  (obj/reify {:name "TokenSetProxy"
-              :wrap u/wrap-errors}
+  (obj/reify {:name "TokenSetProxy"}
     :$plugin {:enumerable false :get (constantly plugin-id)}
     :$file-id {:enumerable false :get (constantly file-id)}
     :$id {:enumerable false :get (constantly id)}
@@ -131,15 +122,13 @@
          (ctob/get-name set)))
      :set
      (fn [_ value]
-       (let [set (u/locate-token-set file-id id)
-             name (u/coerce-1 value
-                              (cfo/make-token-set-name-schema
-                               (u/locate-tokens-lib file-id)
-                               id)
-                              :setTokenSet
-                              "Invalid token set name")]
-         (when name
-           (st/emit! (dwtl/rename-token-set set name)))))}
+       (let [set (u/locate-token-set file-id id)]
+         (cond
+           (not (string? value))
+           (u/display-not-valid :name value)
+
+           :else
+           (st/emit! (dwtl/update-token-set set value)))))}
 
     :active
     {:this true
@@ -151,13 +140,8 @@
          (ctob/token-set-active? tokens-lib (ctob/get-name set))))
      :set
      (fn [_ value]
-       (let [value (u/coerce-1 value
-                               (sm/schema [:boolean])
-                               :setActiveSet
-                               value)]
-         (when (some? value)
-           (let [set (u/locate-token-set file-id id)]
-             (st/emit! (dwtl/set-enabled-token-set (ctob/get-name set) value))))))}
+       (let [set (u/locate-token-set file-id id)]
+         (st/emit! (dwtl/set-enabled-token-set (ctob/get-name set) value))))}
 
     :toggleActive
     (fn [_]
@@ -169,7 +153,8 @@
      :enumerable false
      :get
      (fn [_]
-       (let [tokens-lib (u/locate-tokens-lib file-id)]
+       (let [file (u/locate-file file-id)
+             tokens-lib (->> file :data :tokens-lib)]
          (->> (ctob/get-tokens tokens-lib id)
               (vals)
               (map #(token-proxy plugin-id file-id id (:id %)))
@@ -180,7 +165,8 @@
      :enumerable false
      :get
      (fn [_]
-       (let [tokens-lib (u/locate-tokens-lib file-id)
+       (let [file (u/locate-file file-id)
+             tokens-lib (->> file :data :tokens-lib)
              tokens (ctob/get-tokens tokens-lib id)]
          (->> tokens
               (vals)
@@ -207,24 +193,35 @@
             (token-proxy plugin-id file-id id token-id)))))
 
     :addToken
-    {:schema [:tuple (-> (cfo/make-token-schema
-                          (-> (u/locate-tokens-lib file-id)
-                              (ctob/get-tokens id)))
-                         (sm/dissoc-key :id))] ;; We don't allow plugins to set the id
-     :fn (fn [attrs]
-           (let [attrs (update attrs :value
-                               #(case (:type attrs)
-                                  :font-family (ctob/convert-dtcg-font-family %)
-                                  :typography (ctob/convert-dtcg-typography-composite %)
-                                  :shadow (ctob/convert-dtcg-shadow-composite %)
-                                  (vec %)))
-                 token (ctob/make-token attrs)]
-             (st/emit! (dwtl/create-token id token))
-             (token-proxy plugin-id file-id (:id set) (:id token))))}
+    (fn [type-str name value]
+      (let [type (cto/dtcg-token-type->token-type type-str)
+            value (case type
+                    :font-family (ctob/convert-dtcg-font-family (js->clj value))
+                    :typography (ctob/convert-dtcg-typography-composite (js->clj value))
+                    :shadow (ctob/convert-dtcg-shadow-composite (js->clj value))
+                    (js->clj value))]
+        (cond
+          (nil? type)
+          (u/display-not-valid :addTokenType type-str)
+
+          (not (string? name))
+          (u/display-not-valid :addTokenName name)
+
+          :else
+          (let [token (ctob/make-token {:type type
+                                        :name name
+                                        :value value})]
+            (st/emit! (dwtl/create-token id token))
+            (token-proxy plugin-id file-id (:id set) (:id token))))))
 
     :duplicate
     (fn []
-      (st/emit! (dwtl/duplicate-token-set id)))
+      (let [set  (u/locate-token-set file-id id)
+            set' (ctob/make-token-set (-> (datafy set)
+                                          (dissoc :id
+                                                  :modified-at)))]
+        (st/emit! (dwtl/create-token-set set'))
+        (token-set-proxy plugin-id file-id (:id set'))))
 
     :remove
     (fn []
@@ -255,15 +252,12 @@
          (:group theme)))
      :set
      (fn [_ value]
-       (let [theme (u/locate-token-theme file-id id)
-             group (u/coerce-1 value
-                               (cfo/make-token-theme-group-schema
-                                (u/locate-tokens-lib file-id)
-                                (:name theme)
-                                (:id theme))
-                               :group
-                               "Invalid token theme group")]
-         (when group
+       (let [theme (u/locate-token-theme file-id id)]
+         (cond
+           (not (string? value))
+           (u/display-not-valid :group value)
+
+           :else
            (st/emit! (dwtl/update-token-theme id (assoc theme :group value))))))}
 
     :name
@@ -275,14 +269,16 @@
      :set
      (fn [_ value]
        (let [theme (u/locate-token-theme file-id id)
-             name  (u/coerce-1 value
-                               (cfo/make-token-theme-name-schema
-                                (u/locate-tokens-lib file-id)
-                                (:id theme)
-                                (:group theme))
-                               :name
-                               "Invalid token theme name")]
-         (when name
+             errors (theme-form/validate-theme-name
+                     (u/locate-tokens-lib file-id)
+                     (:group theme)
+                     id
+                     value)]
+         (cond
+           (some? errors)
+           (u/display-not-valid :name (first errors))
+
+           :else
            (st/emit! (dwtl/update-token-theme id (assoc theme :name value))))))}
 
     :active
@@ -337,7 +333,8 @@
      :enumerable false
      :get
      (fn [_]
-       (let [tokens-lib (u/locate-tokens-lib file-id)
+       (let [file (u/locate-file file-id)
+             tokens-lib (->> file :data :tokens-lib)
              themes (->> (ctob/get-themes tokens-lib)
                          (remove #(= (:id %) uuid/zero)))]
          (apply array (map #(token-theme-proxy plugin-id file-id (ctob/get-id %)) themes))))}
@@ -347,36 +344,36 @@
      :enumerable false
      :get
      (fn [_]
-       (let [tokens-lib (u/locate-tokens-lib file-id)
+       (let [file (u/locate-file file-id)
+             tokens-lib (->> file :data :tokens-lib)
              sets (ctob/get-sets tokens-lib)]
          (apply array (map #(token-set-proxy plugin-id file-id (ctob/get-id %)) sets))))}
 
     :addTheme
-    (fn [attrs]
-      (let [schema (-> (sm/schema (cfo/make-token-theme-schema
-                                   (u/locate-tokens-lib file-id)
-                                   (or (obj/get attrs "group") "")
-                                   (or (obj/get attrs "name") "")
-                                   nil))
-                       (sm/dissoc-key :id)) ;; We don't allow plugins to set the id
-            attrs  (u/coerce attrs schema :addTheme "invalid theme attrs")]
-        (when attrs
-          (let [theme (ctob/make-token-theme attrs)]
-            (st/emit! (dwtl/create-token-theme theme))
-            (token-theme-proxy plugin-id file-id (:id theme))))))
+    (fn [group name]
+      (cond
+        (not (string? group))
+        (u/display-not-valid :addThemeGroup group)
+
+        (not (string? name))
+        (u/display-not-valid :addThemeName name)
+
+        :else
+        (let [theme (ctob/make-token-theme {:group group
+                                            :name name})]
+          (st/emit! (dwtl/create-token-theme theme))
+          (token-theme-proxy plugin-id file-id (:id theme)))))
 
     :addSet
-    (fn [attrs]
-      (obj/update! attrs "name" ctob/normalize-set-name)  ;; TODO: seems a quite weird way of doing this
-      (let [schema (-> (sm/schema (cfo/make-token-set-schema
-                                   (u/locate-tokens-lib file-id)
-                                   nil))
-                       (sm/dissoc-key :id)) ;; We don't allow plugins to set the id
-            attrs  (u/coerce attrs schema :addSet "invalid set attrs")]
-        (when attrs
-          (let [set (ctob/make-token-set attrs)]
-            (st/emit! (dwtl/create-token-set set))
-            (token-set-proxy plugin-id file-id (ctob/get-id set))))))
+    (fn [name]
+      (cond
+        (not (string? name))
+        (u/display-not-valid :addSetName name)
+
+        :else
+        (let [set (ctob/make-token-set {:name name})]
+          (st/emit! (dwtl/create-token-set set))
+          (token-set-proxy plugin-id file-id (:id set)))))
 
     :getThemeById
     (fn [theme-id]

frontend/src/app/plugins/utils.cljs

@@ -9,15 +9,12 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.json :as json]
-   [app.common.schema :as sm]
    [app.common.types.container :as ctn]
    [app.common.types.file :as ctf]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.helpers :as dsh]
    [app.main.store :as st]
-   [app.util.object :as obj]
-   [cuerdas.core :as str]))
+   [app.util.object :as obj]))
 
 (defn locate-file
   [id]
@@ -221,8 +218,7 @@
 
 (defn display-not-valid
   [code value]
-  (.error js/console (dm/str "[PENPOT PLUGIN] Value not valid: " value ". Code: " code))
-  nil)
+  (.error js/console (dm/str "[PENPOT PLUGIN] Value not valid: " value ". Code: " code)))
 
 (defn reject-not-valid
   [reject code value]
@@ -230,43 +226,7 @@
     (.error js/console msg)
     (reject msg)))
 
-(defn coerce
-  "Decodes a javascript object into clj and check against schema. If schema validation fails,
-   displays a not-valid message with the code and hint provided and returns nil."
-  [attrs schema code hint]
-  (let [decoder   (sm/decoder schema sm/json-transformer)
-        explainer (sm/explainer schema)
-        attrs     (-> attrs json/->clj decoder)]
-    (if-let [explain (explainer attrs)]
-      (display-not-valid code (str hint " " (sm/humanize-explain explain)))
-      attrs)))
-
-(defn coerce-1
-  "Checks a single javascript value against schema. If schema validation fails,
-   displays a not-valid message with the code and hint provided and returns nil."
-  [value schema code hint]
-  (let [errors (sm/validation-errors value schema)]
-    (if (d/not-empty? errors)
-      (display-not-valid code (str hint " " (str/join ", " errors)))
-      value)))
-
 (defn mixed-value
   [values]
   (let [s (set values)]
     (if (= (count s) 1) (first s) "mixed")))
-
-(defn wrap-errors
-  "Function wrapper to be used in plugin proxies methods to handle errors.
-   When an exception is thrown, a readable error message is output to the console
-   and the exception is captured."
-  [f]
-  (fn []
-    (let [args (js-arguments)]
-      (try
-        (.apply f nil args)
-        (catch :default cause
-          (display-not-valid (ex-message cause) (obj/stringify args))
-          (if-let [explain (-> cause ex-data ::sm/explain)]
-            (println (sm/humanize-explain explain))
-            (js/console.log (ex-data cause)))
-          nil)))))

frontend/src/app/util/i18n.cljs

@@ -8,7 +8,6 @@
   "A i18n foundation."
   (:require
    [app.common.data :as d]
-   [app.common.i18n]
    [app.common.logging :as log]
    [app.common.time :as ct]
    [app.config :as cf]
@@ -211,7 +210,3 @@
            (fn [_ _ pv cv]
              (when (not= pv cv)
                (ct/set-default-locale cv))))
-
-;; We set the real translation function in the common i18n namespace,
-;; so that when common code calls (tr ...) it uses this function.
-(set! app.common.i18n/tr tr)

frontend/src/app/util/object.cljc

@@ -106,11 +106,6 @@
           (identical? (.getPrototypeOf js/Object o)
                       (.-prototype js/Object)))))
 
-#?(:cljs
-   (defn stringify
-     [obj]
-     (js/JSON.stringify obj)))
-
 ;; EXPERIMENTAL: unsafe, does not checks and not validates the input,
 ;; should be improved over time, for now it works for define a class
 ;; extending js/Error that is more than enought for a first, quick and

frontend/test/frontend_tests/tokens/helpers/tokens.cljs

@@ -6,7 +6,7 @@
 
 (ns frontend-tests.tokens.helpers.tokens
   (:require
-   [app.common.files.tokens :as cfo]
+   [app.common.files.tokens :as cft]
    [app.common.test-helpers.ids-map :as thi]
    [app.common.types.tokens-lib :as ctob]))
 
@@ -20,7 +20,7 @@
   (let [first-page-id (get-in file [:data :pages 0])
         shape-id (thi/id shape-label)
         token (get-token file token-label)
-        applied-attributes (cfo/attributes-map attributes token)]
+        applied-attributes (cft/attributes-map attributes token)]
     (update-in file [:data
                      :pages-index first-page-id
                      :objects shape-id

frontend/test/frontend_tests/tokens/logic/token_data_test.cljs

@@ -57,7 +57,8 @@
           store      (ths/setup-store file)
           tokens-lib (toht/get-tokens-lib file)
           set-a      (ctob/get-set-by-name tokens-lib "Set A")
-          events     [(dwtl/rename-token-set set-a "Set A updated")]]
+          events     [(dwtl/update-token-set (ctob/rename set-a "Set A updated")
+                                             "Set A updated")]]
 
       (tohs/run-store-async
        store done events

plugins/README.md

@@ -19,7 +19,7 @@ In the `apps` folder you'll find some examples that use the libraries mentioned
 - example-styles: to run this example you should run
 
 ```
-pnpm run start:styles-example
+npm run start:styles-example
 ```
 
 Open in your browser: `http://localhost:4202/`
@@ -28,8 +28,8 @@ Open in your browser: `http://localhost:4202/`
 
 This guide will help you launch a Penpot plugin from the penpot-plugins repository. Before proceeding, ensure that you have Penpot running locally by following the [setup instructions](https://help.penpot.app/technical-guide/developer/devenv/).
 
-In the terminal, navigate to the **penpot-plugins** repository and run `pnpm install` to install the required dependencies.
-Then, run `pnpm run start` to launch the plugins wrapper.
+In the terminal, navigate to the **penpot-plugins** repository and run `npm install` to install the required dependencies.
+Then, run `npm start` to launch the plugins wrapper.
 
 After installing the dependencies, choose a plugin to launch. You can either run one of the provided examples or create your own (see "Creating a plugin from scratch" below).
 To launch a plugin, Open a new terminal tab and run the appropriate startup script for the chosen plugin.
@@ -38,7 +38,7 @@ For instance, to launch the Contrast plugin, use the following command:
 
 ```
 // for the contrast plugin
-pnpm run start:plugin:contrast
+npm run start:plugin:contrast
 ```
 
 Finally, open in your browser the specific port. In this specific example would be `http://localhost:4302`
@@ -49,22 +49,21 @@ A table listing the available plugins and their corresponding startup commands i
 
 | Plugin                  | Description                                                 | PORT | Start command                         | Manifest URL                               |
 | ----------------------- | ----------------------------------------------------------- | ---- | ------------------------------------- | ------------------------------------------ |
-| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | pnpm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
-| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | pnpm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
-| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | pnpm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
-| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | pnpm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
-| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | pnpm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
-| table-plugin            | Create or import table                                      | 4306 | pnpm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
-| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | pnpm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
-| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | pnpm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
-| poc-tokens-plugin       | Sandbox plugin to test tokens functionality                 | 4309 | pnpm run start:plugin:poc-tokens       | http://localhost:4309/assets/manifest.json |
+| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | npm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
+| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | npm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
+| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | npm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
+| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | npm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
+| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | npm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
+| table-plugin            | Create or import table                                      | 4306 | npm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
+| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | npm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
+| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | npm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
 
 ## Web Apps
 
 | App             | Description                                                       | PORT | Start command                    | URL                    |
 | --------------- | ----------------------------------------------------------------- | ---- | -------------------------------- | ---------------------- |
-| plugins-runtime | Runtime for the plugins subsystem                                 | 4200 | pnpm run start:app:runtime        |                        |
-| example-styles  | Showcase of some of the Penpot styles that can be used in plugins | 4201 | pnpm run start:app:styles-example | http://localhost:4201/ |
+| plugins-runtime | Runtime for the plugins subsystem                                 | 4200 | npm run start:app:runtime        |                        |
+| example-styles  | Showcase of some of the Penpot styles that can be used in plugins | 4201 | npm run start:app:styles-example | http://localhost:4201/ |
 
 ## Creating a plugin from scratch
 

plugins/apps/poc-tokens-plugin/eslint.config.js

@@ -1,51 +0,0 @@
-import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
-
-export default [
-  ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
-  {
-    languageOptions: {
-      parserOptions: {
-        project: './tsconfig.*?.json',
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  },
-];

plugins/apps/poc-tokens-plugin/project.json

@@ -1,79 +0,0 @@
-{
-  "name": "poc-tokens-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/poc-tokens-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/poc-tokens-plugin",
-        "index": "apps/poc-tokens-plugin/src/index.html",
-        "browser": "apps/poc-tokens-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/poc-tokens-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/poc-tokens-plugin/src/favicon.ico",
-          "apps/poc-tokens-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/poc-tokens-plugin/src/styles.css"
-        ],
-        "scripts": [],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        }
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "poc-tokens-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "poc-tokens-plugin:build:development",
-          "port": 4309,
-          "host": "0.0.0.0"
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "poc-tokens-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/poc-tokens-plugin/src/app/app.component.css

@@ -1,127 +0,0 @@
-/* @import "@penpot/plugin-styles/styles.css"; */
-
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.title-l {
-  margin: var(--spacing-16) 0;
-}
-
-.columns {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  flex-grow: 1;
-  margin-block-end: var(--spacing-16);
-}
-
-.panels {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0 var(--spacing-8);
-}
-
-.panel {
-  padding: var(--spacing-8);
-  display: flex;
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow: auto;
-}
-
-.panel:not(:first-child) {
-  border-block-start: 1px solid var(--df-secondary);
-  padding-block-start: var(--spacing-16);
-}
-
-.panel-heading,
-.token-group {
-  display: flex;
-  flex-direction: row;
-  padding-inline-end: var(--spacing-8);
-}
-
-.panel-heading p,
-.token-group span {
-  flex-grow: 1;
-}
-
-.panel-heading button,
-.token-group button {
-  background: none;
-  padding: var(--spacing-4) calc(var(--spacing-12) / 2);
-}
-
-.panel-heading button:focus,
-.token-group button:focus {
-  padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
-}
-
-.panel-item button {
-  opacity: 0;
-  margin-inline-end: var(--spacing-8);
-  padding: var(--spacing-4) calc(var(--spacing-12) / 2);
-}
-
-.panel-item button:hover {
-  opacity: 1;
-}
-
-.panel-item button:focus {
-  opacity: 1;
-  padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
-}
-
-.panel ul {
-  /* flex-grow: 1; */
-  overflow-y: auto;
-  padding-inline-end: var(--spacing-8);
-}
-
-.panel-item {
-  display: flex;
-  flex-direction: row;
-}
-
-.panel-item span {
-  flex-grow: 1;
-}
-
-.set-item {
-  cursor: pointer;
-}
-
-.set-item.selected {
-  background-color: var(--db-quaternary);
-}
-
-.set-item:hover {
-  color: var(--da-primary);
-  background-color: var(--db-secondary);
-}
-
-.token-group:not(:first-child) {
-  margin-top: var(--spacing-8);
-}
-
-.token-group {
-  border-block-end: 1px solid var(--df-secondary);
-  text-transform: capitalize;
-}
-
-.token-item {
-  cursor: pointer;
-}
-
-.token-item:hover {
-  color: var(--da-primary);
-}
-
-.buttons {
-  display: flex;
-  flex-direction: row-reverse;
-}

plugins/apps/poc-tokens-plugin/src/app/app.component.html

@@ -1,144 +0,0 @@
-<div class="container">
-  <p class="title-l">Design tokens plugin POC</p>
-
-  <div class="columns">
-    <div class="panels">
-      <div class="panel">
-        <div class="panel-heading">
-          <p class="headline-m">THEMES</p>
-          <button
-            type="button"
-            data-appearance="secondary"
-            (click)="addTheme()"
-          >
-            +
-          </button>
-        </div>
-
-        <ul data-handler="themes-list">
-          @for (theme of themes; track theme.id) {
-            <li class="body-m panel-item theme-item">
-              <span>{{ theme.group }} / {{ theme.name }}</span>
-              <button
-                type="button"
-                data-appearance="secondary"
-                (click)="renameTheme(theme.id, theme.name)"
-              >
-                🖊️
-              </button>
-              <button
-                type="button"
-                data-appearance="secondary"
-                (click)="deleteTheme(theme.id)"
-              >
-                ❌
-              </button>
-              <div class="checkbox-container">
-                <input
-                  class="checkbox-input"
-                  type="checkbox"
-                  id="checkbox1"
-                  [checked]="isThemeActive(theme.id)"
-                  (change)="toggleTheme(theme.id)"
-                />
-              </div>
-            </li>
-          }
-        </ul>
-      </div>
-
-      <div class="panel">
-        <div class="panel-heading">
-          <p class="headline-m">SETS</p>
-          <button type="button" data-appearance="secondary" (click)="addSet()">
-            +
-          </button>
-        </div>
-
-        <ul data-handler="sets-list">
-          @for (set of sets; track set.id) {
-            <li
-              class="body-m panel-item set-item"
-              [class.selected]="set.id === currentSetId"
-            >
-              <span (click)="loadTokens(set.id)">
-                {{ set.name }}
-              </span>
-              <button
-                type="button"
-                data-appearance="secondary"
-                (click)="renameSet(set.id, set.name)"
-              >
-                🖊️
-              </button>
-              <button
-                type="button"
-                data-appearance="secondary"
-                (click)="deleteSet(set.id)"
-              >
-                ❌
-              </button>
-              <div class="checkbox-container">
-                <input
-                  class="checkbox-input"
-                  type="checkbox"
-                  id="checkbox1"
-                  [checked]="isSetActive(set.id)"
-                  (change)="toggleSet(set.id)"
-                />
-              </div>
-            </li>
-          }
-        </ul>
-      </div>
-    </div>
-    <div class="panels">
-      <div class="panel">
-        <p class="headline-m">TOKENS</p>
-
-        <ul data-handler="tokens-list">
-          @for (group of tokenGroups; track group[0]) {
-            <li class="body-m token-group">
-              <span>{{ group[0] }}</span>
-              <button
-                type="button"
-                data-appearance="secondary"
-                (click)="addToken(group[0])"
-              >
-                +
-              </button>
-            </li>
-            @for (token of group[1]; track token.id) {
-              <li
-                class="body-m panel-item token-item"
-                (click)="applyToken(token.id)"
-              >
-                <span>{{ token.name }}</span>
-                <button
-                  type="button"
-                  data-appearance="secondary"
-                  (click)="renameToken(token.id, token.name)"
-                >
-                  🖊️
-                </button>
-                <button
-                  type="button"
-                  data-appearance="secondary"
-                  (click)="deleteToken(token.id)"
-                >
-                  ❌
-                </button>
-              </li>
-            }
-          }
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div class="buttons">
-    <button type="button" data-appearance="primary" (click)="loadLibrary()">
-      Load
-    </button>
-  </div>
-</div>

plugins/apps/poc-tokens-plugin/src/app/app.component.ts

@@ -1,290 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
-import { fromEvent, map, filter, take, merge } from 'rxjs';
-import { PluginMessageEvent, PluginUIEvent } from '../model';
-
-type TokenTheme = {
-  id: string;
-  name: string;
-  group: string;
-  description: string;
-  active: boolean;
-};
-
-type TokenSet = {
-  id: string;
-  name: string;
-  description: string;
-  active: boolean;
-};
-
-type Token = {
-  id: string;
-  name: string;
-  description: string;
-};
-
-type TokensGroup = [string, Token[]];
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-  host: {
-    '[attr.data-theme]': 'theme()',
-  },
-})
-export class AppComponent {
-  public route = inject(ActivatedRoute);
-
-  public messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(
-    window,
-    'message',
-  );
-
-  public initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
-
-  public theme = toSignal(
-    merge(
-      this.initialTheme$,
-      this.messages$.pipe(
-        filter((event) => event.data.type === 'theme'),
-        map((event) => {
-          return event.data.content;
-        }),
-      ),
-    ),
-  );
-
-  public themes: TokenTheme[] = [];
-  public sets: TokenSet[] = [];
-  public tokenGroups: TokensGroup[] = [];
-  public currentSetId: string | undefined = undefined;
-
-  constructor() {
-    window.addEventListener('message', (event) => {
-      if (event.data.type === 'set-themes') {
-        this.#setThemes(event.data.themesData);
-      } else if (event.data.type === 'set-sets') {
-        this.#setSets(event.data.setsData);
-      } else if (event.data.type === 'set-tokens') {
-        this.#setTokens(event.data.tokenGroupsData);
-      }
-    });
-  }
-
-  loadLibrary() {
-    this.#sendMessage({ type: 'load-library' });
-  }
-
-  loadTokens(setId: string) {
-    this.currentSetId = setId;
-    this.#sendMessage({ type: 'load-tokens', setId });
-  }
-
-  addTheme() {
-    this.#sendMessage({
-      type: 'add-theme',
-      themeGroup: this.#randomString(),
-      themeName: this.#randomString(),
-    });
-  }
-
-  addSet() {
-    this.#sendMessage({ type: 'add-set', setName: this.#randomString() });
-  }
-
-  addToken(tokenType: string) {
-    let tokenValue;
-    switch (tokenType) {
-      case 'borderRadius':
-        tokenValue = 25;
-        break;
-      case 'shadow':
-        tokenValue = [
-          {
-            color: '#123456',
-            inset: 'false',
-            offsetX: '6',
-            offsetY: '6',
-            spread: '0',
-            blur: '4',
-          },
-        ];
-        break;
-      case 'color':
-        tokenValue = '#fabada';
-        break;
-      case 'dimension':
-        tokenValue = 100;
-        break;
-      case 'fontFamilies':
-        tokenValue = ['Source Sans Pro', 'Sans serif'];
-        break;
-      case 'fontSizes':
-        tokenValue = 24;
-        break;
-      case 'fontWeights':
-        tokenValue = 'bold';
-        break;
-      case 'letterSpacing':
-        tokenValue = 0.5;
-        break;
-      case 'number':
-        tokenValue = 33;
-        break;
-      case 'opacity':
-        tokenValue = 0.6;
-        break;
-      case 'rotation':
-        tokenValue = 45;
-        break;
-      case 'sizing':
-        tokenValue = 200;
-        break;
-      case 'spacing':
-        tokenValue = 16;
-        break;
-      case 'borderWidth':
-        tokenValue = 3;
-        break;
-      case 'textCase':
-        tokenValue = 'lowercase';
-        break;
-      case 'textDecoration':
-        tokenValue = 'underline';
-        break;
-      case 'typography':
-        tokenValue = {
-          fontFamilies: ['Acme', 'Arial', 'Sans Serif'],
-          fontSizes: '36',
-          letterSpacing: '0.8',
-          textCase: 'uppercase',
-          textDecoration: 'none',
-          fontWeights: '600',
-          lineHeight: '1.5',
-        };
-        break;
-    }
-
-    if (this.currentSetId && tokenValue) {
-      this.#sendMessage({
-        type: 'add-token',
-        setId: this.currentSetId,
-        tokenType,
-        tokenName: this.#randomString(),
-        tokenValue,
-      });
-    } else {
-      console.log('Invalid token type');
-    }
-  }
-
-  renameTheme(themeId: string, themeName: string) {
-    const newName = prompt('Rename theme', themeName);
-    if (newName && newName !== '') {
-      this.#sendMessage({ type: 'rename-theme', themeId, newName });
-    }
-  }
-
-  renameSet(setId: string, setName: string) {
-    const newName = prompt('Rename set', setName);
-    if (newName && newName !== '') {
-      this.#sendMessage({ type: 'rename-set', setId, newName });
-    }
-  }
-
-  renameToken(tokenId: string, tokenName: string) {
-    const newName = prompt('Rename token', tokenName);
-    if (this.currentSetId && newName && newName !== '') {
-      this.#sendMessage({
-        type: 'rename-token',
-        setId: this.currentSetId,
-        tokenId,
-        newName,
-      });
-    }
-  }
-
-  deleteTheme(themeId: string) {
-    this.#sendMessage({ type: 'delete-theme', themeId });
-  }
-
-  deleteSet(setId: string) {
-    this.#sendMessage({ type: 'delete-set', setId });
-  }
-
-  deleteToken(tokenId: string) {
-    if (this.currentSetId) {
-      this.#sendMessage({
-        type: 'delete-token',
-        setId: this.currentSetId,
-        tokenId,
-      });
-    }
-  }
-
-  isThemeActive(themeId: string) {
-    for (const theme of this.themes) {
-      if (theme.id === themeId) {
-        return theme.active;
-      }
-    }
-    return false;
-  }
-
-  toggleTheme(themeId: string) {
-    this.#sendMessage({ type: 'toggle-theme', themeId });
-  }
-
-  isSetActive(setId: string) {
-    for (const set of this.sets) {
-      if (set.id === setId) {
-        return set.active;
-      }
-    }
-    return false;
-  }
-
-  toggleSet(setId: string) {
-    this.#sendMessage({ type: 'toggle-set', setId });
-  }
-
-  applyToken(tokenId: string) {
-    if (this.currentSetId) {
-      this.#sendMessage({
-        type: 'apply-token',
-        setId: this.currentSetId,
-        tokenId,
-        // attributes: ['stroke-color']   // Uncomment to choose attribute to apply
-      }); // (incompatible attributes will have no effect)
-    }
-  }
-
-  #sendMessage(message: PluginUIEvent) {
-    parent.postMessage(message, '*');
-  }
-
-  #setThemes(themes: TokenTheme[]) {
-    this.themes = themes;
-  }
-
-  #setSets(sets: TokenSet[]) {
-    this.sets = sets;
-  }
-
-  #setTokens(tokenGroups: TokensGroup[]) {
-    this.tokenGroups = tokenGroups;
-  }
-
-  #randomString() {
-    // Generate a big random number and convert it to string using base 36
-    // (the number of letters in the ascii alphabet)
-    return Math.floor(Math.random() * Date.now()).toString(36);
-  }
-}

plugins/apps/poc-tokens-plugin/src/app/app.config.ts

@@ -1,11 +0,0 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
-  ],
-};

plugins/apps/poc-tokens-plugin/src/app/app.routes.ts

@@ -1,3 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];

plugins/apps/poc-tokens-plugin/src/assets/CORS

@@ -1 +0,0 @@
-*

plugins/apps/poc-tokens-plugin/src/assets/_headers

@@ -1,2 +0,0 @@
-/*
-  Access-Control-Allow-Origin: *

plugins/apps/poc-tokens-plugin/src/assets/manifest.json

@@ -1,14 +0,0 @@
-{
-  "name": "Design tokens plugin POC",
-  "description": "This is a plugin to try Design Tokens in Penpot API",
-  "code": "/assets/plugin.js",
-  "permissions": [
-    "page:read",
-    "content:read",
-    "file:read",
-    "selection:read",
-    "content:write",
-    "library:read",
-    "library:write"
-  ]
-}

plugins/apps/poc-tokens-plugin/src/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Angular example plugin</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

plugins/apps/poc-tokens-plugin/src/main.ts

@@ -1,7 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
-
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);

plugins/apps/poc-tokens-plugin/src/model.ts

@@ -1,112 +0,0 @@
-import { TokenProperty } from '@penpot/plugin-types';
-
-/**
- * This file contains the typescript interfaces for the plugin events.
- */
-
-// Events sent from the ui to the plugin
-
-export interface LoadLibraryEvent {
-  type: 'load-library';
-}
-
-export interface LoadTokensEvent {
-  type: 'load-tokens';
-  setId: string;
-}
-
-export interface AddThemeEvent {
-  type: 'add-theme';
-  themeGroup: string;
-  themeName: string;
-}
-
-export interface AddSetEvent {
-  type: 'add-set';
-  setName: string;
-}
-
-export interface AddTokenEvent {
-  type: 'add-token';
-  setId: string;
-  tokenType: string;
-  tokenName: string;
-  tokenValue: unknown;
-}
-
-export interface RenameThemeEvent {
-  type: 'rename-theme';
-  themeId: string;
-  newName: string;
-}
-
-export interface RenameSetEvent {
-  type: 'rename-set';
-  setId: string;
-  newName: string;
-}
-
-export interface RenameTokenEvent {
-  type: 'rename-token';
-  setId: string;
-  tokenId: string;
-  newName: string;
-}
-
-export interface DeleteThemeEvent {
-  type: 'delete-theme';
-  themeId: string;
-}
-
-export interface DeleteSetEvent {
-  type: 'delete-set';
-  setId: string;
-}
-
-export interface DeleteTokenEvent {
-  type: 'delete-token';
-  setId: string;
-  tokenId: string;
-}
-
-export interface ToggleThemeEvent {
-  type: 'toggle-theme';
-  themeId: string;
-}
-
-export interface ToggleSetEvent {
-  type: 'toggle-set';
-  setId: string;
-}
-
-export interface ApplyTokenEvent {
-  type: 'apply-token';
-  setId: string;
-  tokenId: string;
-  attributes?: TokenProperty[];
-}
-
-export type PluginUIEvent =
-  | LoadLibraryEvent
-  | LoadTokensEvent
-  | AddThemeEvent
-  | AddSetEvent
-  | AddTokenEvent
-  | RenameThemeEvent
-  | RenameSetEvent
-  | RenameTokenEvent
-  | DeleteThemeEvent
-  | DeleteSetEvent
-  | DeleteTokenEvent
-  | ToggleThemeEvent
-  | ToggleSetEvent
-  | ApplyTokenEvent;
-
-// Events sent from the plugin to the ui
-
-export interface ThemePluginEvent {
-  type: 'theme';
-  content: string;
-}
-
-export type PluginMessageEvent = ThemePluginEvent;

plugins/apps/poc-tokens-plugin/src/plugin.ts

@@ -1,249 +0,0 @@
-import type { PluginMessageEvent, PluginUIEvent } from './model.js';
-import { TokenType, TokenProperty } from '@penpot/plugin-types';
-
-penpot.ui.open('Design Tokens test', `?theme=${penpot.theme}`, {
-  width: 1000,
-  height: 800,
-});
-
-penpot.on('themechange', (theme) => {
-  sendMessage({ type: 'theme', content: theme });
-});
-
-penpot.ui.onMessage<PluginUIEvent>(async (message) => {
-  if (message.type === 'load-library') {
-    loadLibrary();
-  } else if (message.type === 'load-tokens') {
-    loadTokens(message.setId);
-  } else if (message.type === 'add-theme') {
-    addTheme(message.themeGroup, message.themeName);
-  } else if (message.type === 'add-set') {
-    addSet(message.setName);
-  } else if (message.type === 'add-token') {
-    addToken(
-      message.setId,
-      message.tokenType,
-      message.tokenName,
-      message.tokenValue,
-    );
-  } else if (message.type === 'rename-theme') {
-    renameTheme(message.themeId, message.newName);
-  } else if (message.type === 'rename-set') {
-    renameSet(message.setId, message.newName);
-  } else if (message.type === 'rename-token') {
-    renameToken(message.setId, message.tokenId, message.newName);
-  } else if (message.type === 'delete-theme') {
-    deleteTheme(message.themeId);
-  } else if (message.type === 'delete-set') {
-    deleteSet(message.setId);
-  } else if (message.type === 'delete-token') {
-    deleteToken(message.setId, message.tokenId);
-  } else if (message.type === 'toggle-theme') {
-    toggleTheme(message.themeId);
-  } else if (message.type === 'toggle-set') {
-    toggleSet(message.setId);
-  } else if (message.type === 'apply-token') {
-    applyToken(message.setId, message.tokenId, message.attributes);
-  }
-});
-
-function sendMessage(message: PluginMessageEvent) {
-  penpot.ui.sendMessage(message);
-}
-
-function loadLibrary() {
-  const tokensCatalog = penpot.library.local.tokens;
-
-  const themes = tokensCatalog.themes;
-
-  const themesData = themes.map((theme) => {
-    return {
-      id: theme.id,
-      group: theme.group,
-      name: theme.name,
-      active: theme.active,
-    };
-  });
-
-  penpot.ui.sendMessage({
-    source: 'penpot',
-    type: 'set-themes',
-    themesData,
-  });
-
-  const sets = tokensCatalog.sets;
-
-  const setsData = sets.map((set) => {
-    return {
-      id: set.id,
-      name: set.name,
-      active: set.active,
-    };
-  });
-
-  penpot.ui.sendMessage({
-    source: 'penpot',
-    type: 'set-sets',
-    setsData,
-  });
-}
-
-function loadTokens(setId: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  const tokensByType = set?.tokensByType;
-
-  const tokenGroupsData = [];
-  if (tokensByType) {
-    for (const group of tokensByType) {
-      const type = group[0];
-      const tokens = group[1];
-      tokenGroupsData.push([
-        type,
-        tokens.map((token) => {
-          return {
-            id: token.id,
-            name: token.name,
-            description: token.description,
-          };
-        }),
-      ]);
-    }
-
-    penpot.ui.sendMessage({
-      source: 'penpot',
-      type: 'set-tokens',
-      tokenGroupsData,
-    });
-  }
-}
-
-function addTheme(themeGroup: string, themeName: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const theme = tokensCatalog?.addTheme({group: themeGroup,
-                                         name: themeName });
-  if (theme) {
-    loadLibrary();
-  }
-}
-
-function addSet(setName: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.addSet({name: setName});
-  if (set) {
-    loadLibrary();
-  }
-}
-
-function addToken(
-  setId: string,
-  tokenType: string,
-  tokenName: string,
-  tokenValue: unknown,
-) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  const token = set?.addToken({type: tokenType as TokenType,
-                               name: tokenName,
-                               value: tokenValue});
-  if (token) {
-    loadTokens(setId);
-  }
-}
-
-function renameTheme(themeId: string, newName: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const theme = tokensCatalog?.getThemeById(themeId);
-  if (theme) {
-    theme.name = newName;
-    loadLibrary();
-  }
-}
-
-function renameSet(setId: string, newName: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  if (set) {
-    set.name = newName;
-    loadLibrary();
-  }
-}
-
-function renameToken(setId: string, tokenId: string, newName: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  const token = set?.getTokenById(tokenId);
-  if (token) {
-    token.name = newName;
-    loadTokens(setId);
-  }
-}
-
-function deleteTheme(themeId: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const theme = tokensCatalog?.getThemeById(themeId);
-  if (theme) {
-    theme.remove();
-    loadLibrary();
-  }
-}
-
-function deleteSet(setId: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  if (set) {
-    set.remove();
-    loadLibrary();
-  }
-}
-
-function deleteToken(setId: string, tokenId: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  const token = set?.getTokenById(tokenId);
-  if (token) {
-    token.remove();
-    loadTokens(setId);
-  }
-}
-
-function toggleTheme(themeId: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const theme = tokensCatalog?.getThemeById(themeId);
-  if (theme) {
-    theme.toggleActive();
-    loadLibrary();
-  }
-}
-
-function toggleSet(setId: string) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  if (set) {
-    set.toggleActive();
-    loadLibrary();
-  }
-}
-
-function applyToken(
-  setId: string,
-  tokenId: string,
-  attributes: TokenProperty[] | undefined,
-) {
-  const tokensCatalog = penpot.library.local.tokens;
-  const set = tokensCatalog?.getSetById(setId);
-  const token = set?.getTokenById(tokenId);
-
-  if (token) {
-    token.applyToSelected(attributes);
-  }
-
-  // Alternatve way
-  //
-  // const selection = penpot.selection;
-  // if (token && selection) {
-  //   for (const shape of selection) {
-  //     shape.applyToken(token, attributes);
-  //   }
-  // }
-}

plugins/apps/poc-tokens-plugin/src/styles.css

@@ -1,23 +0,0 @@
-/* @import "@penpot/plugin-styles/styles.css"; */
-
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  line-height: 1.5;
-  padding: 10px;
-}
-
-ul {
-  margin-block-start: var(--spacing-12);
-}
-
-.title-l {
-  text-align: center;
-}
-
-.headline-l {
-  margin-block-start: var(--spacing-8);
-}

plugins/apps/poc-tokens-plugin/tsconfig.app.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": []
-  },
-  "files": ["src/main.ts"],
-  "include": ["src/**/*.d.ts"],
-  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
-}

plugins/apps/poc-tokens-plugin/tsconfig.editor.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src/**/*.ts"],
-  "compilerOptions": {
-    "types": ["node"]
-  }
-}

plugins/apps/poc-tokens-plugin/tsconfig.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": false,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.editor.json"
-    },
-    {
-      "path": "./tsconfig.plugin.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json",
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

plugins/apps/poc-tokens-plugin/tsconfig.plugin.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "types": []
-  },
-  "files": ["src/plugin.ts"],
-  "include": ["../../libs/plugin-types/index.d.ts"]
-}

plugins/package.json

@@ -16,7 +16,6 @@
     "start:plugin:table": "nx run table-plugin:init",
     "start:plugin:renamelayers": "nx run rename-layers-plugin:init",
     "start:plugin:colors-to-tokens": "nx run colors-to-tokens-plugin:init",
-    "start:plugin:poc-tokens": "nx run poc-tokens-plugin:init",
     "build": "nx build plugins-runtime --emptyOutDir=true",
     "build:plugins": "nx run-many -t build --parallel -p tag:type:plugin --exclude=poc-state-plugin",
     "build:styles-example": "nx run example-styles:build",