♻️ Replace stroke width numeric input

* ✨ Replace opacity numeric input

* ✨ Add test

.github/ISSUE_TEMPLATE/new-render-bug-report.md

@@ -0,0 +1,38 @@
+---
+name: New Render Bug Report
+about: Create a report about the bugs you have found in the new render
+title: ''
+labels: new render
+assignees: claragvinola
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Steps to Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots or screen recordings**
+If applicable, add screenshots or screen recording to help illustrate your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

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

@@ -7,9 +7,14 @@ jobs:
   build-and-push:
     name: Build and push DevEnv Docker image
     environment: release-admins
-    runs-on: ubuntu-24.04
+    runs-on: penpot-runner-02
 
     steps:
+      - name: Set common environment variables
+        run: |
+          # Each job execution will use its own docker configuration.
+          echo "DOCKER_CONFIG=${{ runner.temp }}/.docker-${{ github.run_id }}-${{ github.job }}" >> $GITHUB_ENV
+
       - name: Checkout code
         uses: actions/checkout@v4
 

.github/workflows/build-docker.yml

@@ -19,9 +19,14 @@ on:
 jobs:
   build-and-push:
     name: Build and Push Penpot Docker Images
-    runs-on: ubuntu-24.04-arm
+    runs-on: penpot-runner-02
 
     steps:
+      - name: Set common environment variables
+        run: |
+          # Each job execution will use its own docker configuration.
+          echo "DOCKER_CONFIG=${{ runner.temp }}/.docker-${{ github.run_id }}-${{ github.job }}" >> $GITHUB_ENV
+
       - name: Checkout code
         uses: actions/checkout@v4
         with:
@@ -66,6 +71,15 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      # To avoid the “429 Too Many Requests” error when downloading
+      # images from DockerHub for unregistered users.
+      # https://docs.docker.com/docker-hub/usage/
+      - name: Login to DockerHub Registry
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.PUB_DOCKER_USERNAME }}
+          password: ${{ secrets.PUB_DOCKER_PASSWORD }}
+
       - name: Extract metadata (tags, labels)
         id: meta
         uses: docker/metadata-action@v5

.github/workflows/tests.yml

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

CHANGES.md

@@ -13,10 +13,17 @@
 - Remap references when renaming tokens [Taiga #10202](https://tree.taiga.io/project/penpot/us/10202)
 - Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
 - Improve usability of lock and hide buttons in the layer panel. [Taiga #12916](https://tree.taiga.io/project/penpot/issue/12916)
+- Optimize sidebar performance for deeply nested shapes [Taiga #13017](https://tree.taiga.io/project/penpot/task/13017)
+- Remove tokens path node and bulk remove tokens [Taiga #13007](https://tree.taiga.io/project/penpot/us/13007)
+- Replace themes management modal radio buttons for switches [Taiga #9215](https://tree.taiga.io/project/penpot/us/9215)
 
 ### :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 wrong image in the onboarding invitation block [Taiga #13040](https://tree.taiga.io/project/penpot/issue/13040)
+- Fix wrong register image [Taiga #12955](https://tree.taiga.io/project/penpot/task/12955)
+- Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
+- Fix incorrect default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
 
 ## 2.13.0 (Unreleased)
 
@@ -48,6 +55,7 @@
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
+- Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
 
 ## 2.12.1
 
@@ -163,7 +171,6 @@ example. It's still usable as before, we just removed the example.
 
 - Deprecated configuration variables with the prefix `PENPOT_ASSETS_*`, and will be
   removed in future versions:
-
   - The `PENPOT_ASSETS_STORAGE_BACKEND` becomes `PENPOT_OBJECTS_STORAGE_BACKEND` and its
     values passes from (`assets-fs` or `assets-s3`) to (`fs` or `s3`)
   - The `PENPOT_STORAGE_ASSETS_FS_DIRECTORY` becomes `PENPOT_OBJECTS_STORAGE_FS_DIRECTORY`

common/src/app/common/files/helpers.cljc

@@ -526,20 +526,25 @@
           ids))
 
 (defn clean-loops
-  "Clean a list of ids from circular references."
+  "Clean a list of ids from circular references. Optimized fast-path for single selections."
   [objects ids]
-  (let [parent-selected?
-        (fn [id]
-          (let [parents (get-parent-ids objects id)]
-            (some ids parents)))
+  (if (<= (count ids) 1)
+    ;; For single selection, there can't be circularity; return as ordered-set.
+    (into (d/ordered-set) ids)
+    (let [ids-set (if (set? ids) ids (set ids))
+          parent-selected?
+          (fn [id]
+            ;; Stop early as soon as we find any selected parent
+            (let [parents (get-parent-ids objects id)]
+              (some #(contains? ids-set %) parents)))
 
-        add-element
-        (fn [result id]
-          (cond-> result
-            (not (parent-selected? id))
-            (conj id)))]
+          add-element
+          (fn [result id]
+            (cond-> result
+              (not (parent-selected? id))
+              (conj id)))]
 
-    (reduce add-element (d/ordered-set) ids)))
+      (reduce add-element (d/ordered-set) ids))))
 
 (defn- indexed-shapes
   "Retrieves a vector with the indexes for each element in the layer

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

@@ -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/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

@@ -474,8 +474,8 @@
    :height #{:sizing :dimensions}
    :max-width #{:sizing :dimensions}
    :max-height #{:sizing :dimensions}
-   :x #{:spacing :dimensions}
-   :y #{:spacing :dimensions}
+   :x #{:dimensions}
+   :y #{:dimensions}
    :rotation #{:number :rotation}
    :border-radius #{:border-radius :dimensions}
    :row-gap #{:spacing :dimensions}
@@ -487,6 +487,8 @@
    :vertical-margin #{:spacing :dimensions}
    :sided-margins #{:spacing :dimensions}
    :line-height #{:line-height :number}
+   :opacity #{:opacity}
+   :stroke-width #{:stroke-width}
    :font-size #{:font-size}
    :letter-spacing #{:letter-spacing}
    :fill #{:color}

docker/devenv/files/nginx.conf

@@ -223,7 +223,7 @@ http {
                 add_header X-Cache-Status $upstream_cache_status;
             }
 
-            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
+            location ~* \.(jpg|png|svg|ttf|woff|woff2|gif)$ {
                 add_header Cache-Control "public, max-age=604800" always; # 7 days
             }
 

docker/images/docker-compose.yaml

@@ -130,12 +130,6 @@ services:
     environment:
       << : [*penpot-flags, *penpot-public-uri, *penpot-http-body-size, *penpot-secret-key]
 
-      ## The PREPL host. Mainly used for external programatic access to penpot backend
-      ## (example: admin). By default it will listen on `localhost` but if you are going to use
-      ## the `admin`, you will need to uncomment this and set the host to `0.0.0.0`.
-
-      # PENPOT_PREPL_HOST: 0.0.0.0
-
       ## Database connection parameters. Don't touch them unless you are using custom
       ## postgresql connection parameters.
 
@@ -151,8 +145,8 @@ services:
       ## Default configuration for assets storage: using filesystem based with all files
       ## stored in a docker volume.
 
-      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
-      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
+      PENPOT_OBJECTS_STORAGE_BACKEND: fs
+      PENPOT_OBJECTS_STORAGE_FS_DIRECTORY: /opt/data/assets
 
       ## Also can be configured to to use a S3 compatible storage.
 

docker/images/files/nginx.conf.template

@@ -144,7 +144,7 @@ http {
         location / {
             include /etc/nginx/overrides/location.d/*.conf;
 
-            location ~* \.(js|css|jpg|png|svg|ttf|woff|woff2|wasm)$ {
+            location ~* \.(js|css|jpg|png|svg|gif|ttf|woff|woff2|wasm|map)$ {
                 add_header Cache-Control "public, max-age=604800" always; # 7 days
             }
 
@@ -152,8 +152,10 @@ http {
                 return 301 " /404";
             }
 
+            add_header X-Frame-Options SAMEORIGIN always;
             add_header Cache-Control "no-store, no-cache, max-age=0" always;
             try_files $uri /index.html$is_args$args /index.html =404;
+
         }
     }
 }

docs/user-guide/account-teams/index.njk

@@ -19,6 +19,12 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
       <p>Create and manage your teams</p>
     </a>
   </li>
+  <li>
+    <a href="/user-guide/account-teams/projects-files">
+      <h2>Projects and Files →</h2>
+      <p>Organize your work with projects and files</p>
+    </a>
+  </li>
   <li>
     <a href="/user-guide/account-teams/comments/">
       <h2>Comments →</h2>

docs/user-guide/account-teams/projects-files.njk

@@ -0,0 +1,107 @@
+---
+title: Projects and Files
+order: 3
+desc: Learn how to organize your work in Penpot. Create, manage and organize projects and files, work with drafts, and handle deleted items.
+---
+
+<h1 id="projects-files">Projects and Files</h1>
+<p class="main-paragraph">Projects and files are the core organizational structure in Penpot. Projects work like folders that contain multiple design files, helping you organize your work efficiently. Files are your actual design documents where you create boards, pages, and all your design elements.</p>
+<p class="main-paragraph">Understanding how to manage projects and files will help you keep your workspace organized and make it easier to collaborate with your team.</p>
+
+<h2 id="projects-management">Projects</h2>
+<p>Projects are containers that help you organize and group related design files together. Think of them as folders in a file system. You can create as many projects as you need to organize your work by client, product, feature, or any other structure that fits your workflow.</p>
+<p>If you're working with others, projects should be created inside a team so that team members can collaborate on the files within them. Projects created in your personal space ("Your Penpot") remain private to you.</p>
+<figure>
+  <img src="/img/files-projects/01-projects.webp" alt="Projects view in dashboard" />
+</figure>
+
+<h3 id="create-project">Create a project</h3>
+<p>To create a new project, use the <strong>+ New project</strong> button in the dashboard. You can also use the keyboard shortcut <kbd>+</kbd> when you're on the dashboard. A dialog will appear where you can enter the project name. Once created, the project will appear in your projects list.</p>
+<p>When you create a project, you can immediately start adding files to it, or create files first and move them into the project later.</p>
+
+<h3 id="edit-project">Edit a project</h3>
+<p>To edit a project's name, right-click on the project in the sidebar or click the three-dot menu next to the project name. Select <strong>Edit</strong> or <strong>Rename</strong> to change the project name. You can also update the project's profile picture from the same menu.</p>
+
+<h3 id="pin-project">Pin a project</h3>
+<p>Projects can be pinned to the sidebar for quick access. Right-click on a project and select <strong>Pin</strong> to keep it visible in the sidebar even when you have many projects. Pinned projects appear at the top of your projects list for easy access.</p>
+<p>To unpin a project, right-click on it and select <strong>Unpin</strong>. The project will remain in your list but won't be pinned to the sidebar anymore.</p>
+<figure>
+  <img src="/img/files-projects/04-pin-project.webp" alt="Pin project option" />
+</figure>
+
+<h3 id="move-project">Move a project</h3>
+<p>Projects can be moved between teams. To move a project, right-click on it and select <strong>Move to</strong> from the context menu. A dialog will appear showing all available teams where you can move the project. Select the destination team and confirm the move.</p>
+<figure>
+  <img src="/img/files-projects/06-move-project.webp" alt="Move project to another team" />
+</figure>
+<p>When you move a project to another team, all files within the project are moved along with it. Team members of the destination team will gain access to the project and its files according to their permissions.</p>
+<p class="advice">Moving a project to another team changes its ownership and access permissions. Make sure the destination team has the appropriate members and permissions for the work contained in the project.</p>
+
+<h3 id="delete-project">Delete a project</h3>
+<p>To delete a project, right-click on it and select <strong>Delete</strong> from the menu. You'll be asked to confirm the deletion. Keep in mind that deleting a project will also delete all files within it. Make sure you have backed up any important files before deleting a project.</p>
+<p class="advice">Deleted projects and their files are moved to the trash area where they can be restored or permanently deleted.</p>
+
+<h2 id="files-management">Files</h2>
+<p>Files are your design documents in Penpot. Each file contains pages, boards, and all the design elements you create. Files can be created within a project or in the drafts section, and you can move them between projects as needed.</p>
+
+<h3 id="create-file">Create a file</h3>
+<p>To create a new file, you have several options:</p>
+<ul>
+  <li>Click the <strong>+</strong> button in a project to create a file inside that project</li>
+  <li>Use the keyboard shortcut <kbd>+</kbd> when you have a project selected</li>
+  <li>Create a file directly in the drafts section if you're not ready to organize it into a project yet</li>
+</ul>
+<figure>
+  <img src="/img/files-projects/05-create-file.webp" alt="Create a new file" />
+</figure>
+<p>When creating a file, you'll be asked to give it a name. The file will open in the workspace where you can start designing immediately.</p>
+
+<h3 id="edit-file">Edit a file</h3>
+<p>To rename a file, right-click on the file card in the dashboard and select <strong>Rename</strong>, or click on the three-dot menu on the file card. Enter the new name and confirm the change. You can also access file settings and other options from the file's context menu.</p>
+
+<h3 id="move-file">Move a file</h3>
+<p>Files can be moved between projects, from drafts to a project, or even to projects in other teams. To move a file, right-click on the file card and select <strong>Move to</strong> from the context menu. A dialog will appear showing all available projects across your teams where you can choose the destination. Select the project where you want to move the file and confirm.</p>
+<p>You can also drag and drop files between projects in the dashboard for a quick way to reorganize your files within the same team.</p>
+<p>When moving a file to a project in another team, the file becomes accessible to members of that team according to their permissions. Moving a file doesn't affect its content or any shared libraries it might be using. Only its location in your project structure changes.</p>
+<p class="advice">When moving files between teams, be aware that this changes who has access to the file. Make sure the destination team has the appropriate members and permissions for the work contained in the file.</p>
+
+<h3 id="duplicate-file">Duplicate a file</h3>
+<p>To create a copy of an existing file, right-click on the file card and select <strong>Duplicate</strong>. The duplicated file will be created in the same location (project or drafts) with the same name plus "Copy" added to it. You can then rename or move it as needed.</p>
+<p>Duplicating a file creates a complete copy including all pages, boards, and design elements. This is useful when you want to create variations of a design or use a file as a starting point for a new project.</p>
+
+<h3 id="delete-file">Delete a file</h3>
+<p>To delete a file, right-click on the file card and select <strong>Delete</strong>. You'll be asked to confirm the deletion. The file will be moved to the trash area where it can be restored or permanently deleted later.</p>
+<p class="advice">Deleting a file doesn't immediately remove it permanently. You can recover deleted files from the trash area within a certain time period.</p>
+
+<h2 id="drafts">Drafts</h2>
+<p>The drafts section is a fixed, non-deletable space in your dashboard where you can create and store files that aren't part of any specific project yet. This is useful for quick sketches, experimental designs, or files you're not ready to organize into projects.</p>
+<figure>
+  <img src="/img/files-projects/02-drafts.webp" alt="Drafts section" />
+</figure>
+<p>Drafts appear in a dedicated section in the dashboard sidebar, separate from your projects. All team members can see and access files in the drafts section, depending on their permissions.</p>
+<p>You can create files directly in drafts, or move existing files from projects into drafts if you want to temporarily remove them from a project's organization. Files in drafts work exactly like files in projects - they have the same functionality and features.</p>
+<p>When you're ready to organize a file from drafts, you can move it into an appropriate project using the move option in the file's context menu.</p>
+
+<h2 id="trash-area">Trash area</h2>
+<p>When you delete projects or files, they are not removed permanently. Instead, they are moved to a trash area, a dedicated space for deleted content. This allows you to recover mistakenly deleted content or permanently remove items when you're sure you don't need them anymore.</p>
+<p>The trash applies to both files and projects. Items in the trash remain there for a certain period depending on your Penpot subscription plan before being automatically deleted permanently.</p>
+
+<h3 id="access-trash">Access the trash</h3>
+<p>A <strong>Trash</strong> section is accessible from the dashboard navigation. When you access it, you'll see all your deleted files and projects, each clearly labeled so you can easily identify what you want to restore or permanently delete.</p>
+<figure>
+  <img src="/img/files-projects/03-trash.webp" alt="Trash area" />
+</figure>
+
+<h3 id="trash-permissions">Trash permissions</h3>
+<p>Access to the trash and the actions you can perform depend on your role in the team:</p>
+<ul>
+  <li><strong>Owner, Admin, and Editor:</strong> Can view the trash, restore deleted items, and permanently delete items from the trash.</li>
+  <li><strong>Viewer:</strong> Cannot access the trash or manage deleted content.</li>
+</ul>
+
+<h3 id="restore-items">Restore items</h3>
+<p>To restore a deleted file or project, access the trash area and find the item you want to recover. Select the item and choose <strong>Restore</strong>. The item will be restored to its original location (the project it belonged to, or the drafts section if it wasn't in a project).</p>
+
+<h3 id="permanently-delete">Permanently delete items</h3>
+<p>If you're sure you don't need an item anymore, you can permanently delete it from the trash. Select the item and choose <strong>Permanently delete</strong>. This action cannot be undone, so make sure you really want to remove the item permanently.</p>
+<p class="advice">Items in the trash are automatically deleted after a certain period depending on your subscription plan. If you want to keep something, restore it before the auto-deletion period expires.</p>

docs/user-guide/design-systems/design-tokens.njk

@@ -455,6 +455,43 @@ ExtraBold Italic
 <p>A <strong>Typography composite token</strong> can be applied to a full text layer to set all typography properties at once. This lets you manage complete text styles using a single token instead of combining multiple individual ones.</p>
 <p>When applying a Typography composite token to a layer, any previously applied <em>Typography composite token</em> or <em>style</em> will be detached. The same happens in reverse. Only one of them can be active at a time.</p>
 
+<h3 id="design-tokens-shadow">Shadow</h3>
+<p>Shadow tokens are composite entities that encapsulate the properties of one or more shadows into a single token definition. This token can contain a single shadow or an array of multiple shadows that can be reordered.</p>
+<p>Shadow tokens support both <strong>Drop Shadow</strong> and <strong>Inner Shadow</strong> types. When creating or editing a shadow token, you can select the type of shadow you want to use. The default selection is Drop Shadow.</p>
+<figure>
+  <img src="/img/design-tokens/37-tokens-shadow-individual.webp" alt="Shadow token creation with individual values" />
+</figure>
+
+<h4 id="design-tokens-shadow-properties">Shadow properties</h4>
+<p>Each shadow within a shadow token contains a set of properties that define how the shadow appears:</p>
+<ul>
+  <li><strong>Color:</strong> The color of the shadow. Accepts the same values as <a href="#design-tokens-color">color tokens</a> (Hex, RGB, RGBA, ARGB, HSL, HSLA), and you can reference existing color tokens. The color picker is available when defining the value.</li>
+  <li><strong>X offset:</strong> The horizontal offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Y offset:</strong> The vertical offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Blur:</strong> The blur radius of the shadow. Can be unit or unitless. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Spread:</strong> The spread radius of the shadow. Can be unit or unitless. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Type:</strong> Whether the shadow is a drop shadow or an inner shadow. Selected via a dropdown menu, with Drop Shadow as the default.</li>
+</ul>
+<p>Each property within a shadow token can reference existing tokens or be assigned hardcoded values. Shadows can also reference other shadow tokens (the type of shadow must match when using references).</p>
+<p class="advice">Not all properties are mandatory to save a shadow token. Some can be empty (and will be computed as 0). Only the color property is mandatory. In an array of shadows, if any shadow does not have the color set, the form cannot be saved.</p>
+
+<h4 id="design-tokens-shadow-create">Creating shadow tokens</h4>
+<p>To create a shadow token, click on the <strong>+</strong> next to <strong>Shadow</strong> in the Tokens panel. Shadow tokens can be created in two ways:</p>
+<ul>
+  <li><strong>Individual values:</strong> You can create one shadow or multiple shadows with individual property values. Click the <strong>+</strong> button to add more shadows to the array. New shadows are added at the top of the list.</li>
+  <li><strong>Single reference:</strong> You can reference another existing shadow token. When using a single reference, you cannot add more than one shadow. The resolved value will display the shadow or list of shadows that the referenced token contains.</li>
+</ul>
+<figure>
+  <img src="/img/design-tokens/38-tokens-shadow-reference.webp" alt="Shadow token creation with reference" />
+</figure>
+<p>When creating a shadow with individual values, the color value starts empty, but the other inputs have default values (X: 4, Y: 4, Blur: 4, Spread: 0). You can reorder shadows by hovering over a shadow form and using the reorder button to drag it to a different position.</p>
+<p>You can also reference another existing shadow token instead of defining each property manually. When doing so, Penpot resolves all shadow properties from the referenced token.</p>
+
+<h4 id="design-tokens-shadow-apply">Applying shadow tokens</h4>
+<p>Shadow tokens can be applied to any layer type. Clicking on a shadow token will apply it to the selected layer. Right-clicking on a shadow token shows the context menu with the <strong>Shadow</strong> option to apply it.</p>
+<p class="advice">Text elements in CSS do not support inner shadows, but Penpot does, since it uses the filter property internally instead of the box-shadow property.</p>
+<p>When applying a shadow token, any existing shadow on the layer will be overridden (whether it's a raw shadow or an applied token shadow). If the token contains an array of shadows, each shadow will be added in the same order as in the creation form.</p>
+<p class="advice">In Penpot, an element can have multiple shadows, but only one token of the same type can be applied. This means that applying a second shadow token would override the first one, regardless of how many shadows the shape currently has.</p>
 
 
 

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

@@ -0,0 +1,702 @@
+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 opacity 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 opacity tokens
+    await page.getByRole("button", { name: "Opacity 3" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "opacity", exact: true }),
+    ).toBeVisible();
+    await tokensSidebar
+      .getByRole("button", { name: "opacity", exact: true })
+      .click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "opacity.high" }),
+    ).toBeVisible();
+
+    // Apply opacity token from token panels
+    await tokensSidebar.getByRole("button", { name: "opacity.high" }).click();
+
+    // Check if opacity sections is visible on right sidebar
+    const layerMenuSection = page.getByRole("region", {
+      name: "layer-menu-section",
+    });
+    await expect(layerMenuSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const opacityHighPill = layerMenuSection.getByRole("button", {
+      name: "opacity.high",
+    });
+    await expect(opacityHighPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = layerMenuSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.click();
+
+    // Open dropdown from input
+    const dropdownBtn = layerMenuSection.getByLabel("Open token list");
+    await expect(dropdownBtn).toBeVisible();
+    await dropdownBtn.click();
+
+    // Change token from dropdown
+    const opacityLowOption = layerMenuSection.getByRole("option", {
+      name: "opacity.low",
+    });
+    await expect(opacityLowOption).toBeVisible();
+    await opacityLowOption.click();
+
+    await expect(opacityHighPill).not.toBeVisible();
+    const opacityLowPill = layerMenuSection.getByRole("button", {
+      name: "opacity.low",
+    });
+    await expect(opacityLowPill).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 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);
+    });
+  });
+
+  test("User applies dimension token to a shape on width and height", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar.getByRole("button", { name: "dimension.sm" }).click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toHaveCount(2);
+    await dimensionSMTokenPill.nth(1).click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).toHaveCount(1);
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(1).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape on x position", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.sm" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("AxisX").click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toBeVisible();
+    await dimensionSMTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape on y position", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.sm" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Y").click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toBeVisible();
+    await dimensionSMTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape border-radius", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(2).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.xs");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.xs" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Border radius").hover();
+    await tokenContextMenuForToken.getByText("RadiusAll").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 dimensionXSTokenPill = borderRadiusSection.getByRole("button", {
+      name: "dimension.xs",
+    });
+    await expect(dimensionXSTokenPill).toBeVisible();
+    await dimensionXSTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = borderRadiusSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionXSTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = borderRadiusSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = borderRadiusSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+  
+});

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/resources/wasm-playground/clips.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill,

frontend/resources/wasm-playground/masks.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent

frontend/resources/wasm-playground/paths.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, draw_star,

frontend/resources/wasm-playground/plus.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, allocBytes,

frontend/resources/wasm-playground/rects.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill

frontend/resources/wasm-playground/texts.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, assignCanvas, setupInteraction, useShape, setShapeChildren, addTextShape, hexToU32ARGB,getRandomInt, getRandomColor, getRandomFloat, addShapeSolidFill, addShapeSolidStrokeFill
     } from './js/lib.js';
@@ -102,4 +102,4 @@
     });
   </script>
 </body>
-</html>
+</html>

frontend/shadow-cljs.edn

@@ -75,6 +75,7 @@
     {:fn-invoke-direct true
      :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
      :source-map true
+     :pseudo-names true
      :elide-asserts true
      :anon-fn-naming-policy :off
      :cross-chunk-method-motion false

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

@@ -61,6 +61,11 @@
 ;; Def micro-benchmark iterations
 (def micro-benchmark-iterations 1e6)
 
+;; Performance logs
+(defonce ^:private longtask-observer* (atom nil))
+(defonce ^:private stall-timer* (atom nil))
+(defonce ^:private current-op* (atom nil))
+
 ;; --- CONTEXT
 
 (defn- collect-context
@@ -464,3 +469,72 @@
 (defn event
   [props]
   (ptk/data-event ::event props))
+
+;; --- DEVTOOLS PERF LOGGING
+
+(defn install-long-task-observer! []
+  (when (and (some? (.-PerformanceObserver js/window)) (nil? @longtask-observer*))
+    (let [observer (js/PerformanceObserver.
+                    (fn [list _]
+                      (doseq [entry (.getEntries list)]
+                        (let [dur (.-duration entry)
+                              start (.-startTime entry)
+                              attrib (.-attribution entry)
+                              attrib-count (when attrib (.-length attrib))
+                              first-attrib (when (and attrib-count (> attrib-count 0)) (aget attrib 0))
+                              attrib-name (when first-attrib (.-name first-attrib))
+                              attrib-ctype (when first-attrib (.-containerType first-attrib))
+                              attrib-cid (when first-attrib (.-containerId first-attrib))
+                              attrib-csrc (when first-attrib (.-containerSrc first-attrib))]
+
+                          (.warn js/console (str "[perf] long task " (Math/round dur) "ms at " (Math/round start) "ms"
+                                                 (when first-attrib
+                                                   (str " attrib:name=" attrib-name
+                                                        " ctype=" attrib-ctype
+                                                        " cid=" attrib-cid
+                                                        " csrc=" attrib-csrc))))))))]
+      (.observe observer #js{:entryTypes #js["longtask"]})
+      (reset! longtask-observer* observer))))
+
+(defn start-event-loop-stall-logger!
+  "Log event loop stalls by measuring setInterval drift.
+  interval-ms: base interval
+  threshold-ms: drift over which we report"
+  [interval-ms threshold-ms]
+  (when (nil? @stall-timer*)
+    (let [last (atom (.now js/performance))
+          id (js/setInterval
+              (fn []
+                (let [now (.now js/performance)
+                      expected (+ @last interval-ms)
+                      drift (- now expected)
+                      current-op @current-op*
+                      measures (.getEntriesByType js/performance "measure")
+                      mlen (.-length measures)
+                      last-measure (when (> mlen 0) (aget measures (dec mlen)))
+                      meas-name (when last-measure (.-name last-measure))
+                      meas-detail (when last-measure (.-detail last-measure))
+                      meas-count (when meas-detail (unchecked-get meas-detail "count"))]
+                  (reset! last now)
+                  (when (> drift threshold-ms)
+                    (.warn js/console
+                           (str "[perf] event loop stall: " (Math/round drift) "ms"
+                                (when current-op (str " op=" current-op))
+                                (when meas-name (str " last=" meas-name))
+                                (when meas-count (str " count=" meas-count)))))))
+              interval-ms)]
+      (reset! stall-timer* id))))
+
+(defn init!
+  "Install perf observers in dev builds. Safe to call multiple times."
+  []
+  (when ^boolean js/goog.DEBUG
+    (install-long-task-observer!)
+    (start-event-loop-stall-logger! 50 100)
+    ;; Expose simple API on window for manual control in devtools
+    (let [api #js {:reset (fn []
+                            (try
+                              (.clearMarks js/performance)
+                              (.clearMeasures js/performance)
+                              (catch :default _ nil)))}]
+      (aset js/window "PenpotPerf" api))))

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

@@ -173,7 +173,8 @@
             params  (assoc params :team-id team-id)]
         (->> (rp/cmd! :delete-team-member params)
              (rx/mapcat (fn [_]
-                          (rx/of (fetch-members team-id)
+                          (rx/of (dp/refresh-profile)
+                                 (fetch-members team-id)
                                  (fetch-teams)
                                  (ptk/data-event ::ev/event
                                                  {::ev/name "delete-team-member"

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

@@ -347,6 +347,12 @@
                                  (with-meta {:team-id team-id
                                              :file-id file-id}))))))
 
+              ;; Install dev perf observers once the workspace is ready
+              (->> stream
+                   (rx/filter (ptk/type? ::workspace-initialized))
+                   (rx/take 1)
+                   (rx/map (fn [_] (ev/init!))))
+
               (->> stream
                    (rx/filter (ptk/type? ::dps/persistence-notification))
                    (rx/take 1)

frontend/src/app/main/data/workspace/collapse.cljs

@@ -18,13 +18,13 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [expand-fn (fn [expanded]
-                        (merge expanded
-                               (->> ids
-                                    (map #(cfh/get-parent-ids objects %))
-                                    flatten
-                                    (remove #(= % uuid/zero))
-                                    (map (fn [id] {id true}))
-                                    (into {}))))]
+                        (let [parents-seqs (map (fn [x] (cfh/get-parent-ids objects x)) ids)
+                              flat-parents (apply concat parents-seqs)
+                              non-root-parents (remove #(= % uuid/zero) flat-parents)
+                              distinct-parents (into #{} non-root-parents)]
+                          (merge expanded
+                                 (into {}
+                                       (map (fn [id] {id true}) distinct-parents)))))]
         (update-in state [:workspace-local :expanded] expand-fn)))))
 
 

frontend/src/app/main/data/workspace/selection.cljs

@@ -264,10 +264,13 @@
 
     ptk/WatchEvent
     (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)]
-        (rx/of
-         (dwc/expand-all-parents ids objects)
-         ::dwsp/interrupt)))))
+      (let [objects (dsh/lookup-page-objects state)
+            ;; Schedule expanding parents asynchronously to avoid blocking
+            ;; the event loop
+            expand-s (->> (rx/of (dwc/expand-all-parents ids objects))
+                          (rx/observe-on :async))
+            interrupt-s (rx/of ::dwsp/interrupt)]
+        (rx/merge expand-s interrupt-s)))))
 
 (defn select-all
   []

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

@@ -191,16 +191,6 @@
         (when (:fill attributes) (update-fill value shape-ids attributes page-id))
         (when (:stroke-color attributes) (update-stroke-color value shape-ids attributes page-id)))))))
 
-(defn update-shape-dimensions
-  ([value shape-ids attributes] (update-shape-dimensions value shape-ids attributes nil))
-  ([value shape-ids attributes page-id]
-   (ptk/reify ::update-shape-dimensions
-     ptk/WatchEvent
-     (watch [_ _ _]
-       (when (number? value)
-         (rx/of
-          (when (:width attributes) (dwtr/update-dimensions shape-ids :width value {:ignore-touched true :page-id page-id}))
-          (when (:height attributes) (dwtr/update-dimensions shape-ids :height value {:ignore-touched true :page-id page-id}))))))))
 
 (defn- attributes->layout-gap [attributes value]
   (let [layout-gap (-> (set/intersection attributes #{:column-gap :row-gap})
@@ -248,21 +238,6 @@
                                 {:ignore-touched true
                                  :page-id page-id}))))))))
 
-(defn update-layout-spacing
-  ([value shape-ids attributes] (update-layout-spacing value shape-ids attributes nil))
-  ([value shape-ids attributes page-id]
-   (ptk/reify ::update-layout-spacing
-     ptk/WatchEvent
-     (watch [_ state _]
-       (when (number? value)
-         (let [ids-with-layout (shape-ids-with-layout state (or page-id (:current-page-id state)) shape-ids)
-               layout-attributes (attributes->layout-gap attributes value)]
-           (rx/of
-            (dwsl/update-layout ids-with-layout
-                                layout-attributes
-                                {:ignore-touched true
-                                 :page-id page-id}))))))))
-
 (defn update-shape-position
   ([value shape-ids attributes] (update-shape-position value shape-ids attributes nil))
   ([value shape-ids attributes page-id]
@@ -276,6 +251,20 @@
                                                {:ignore-touched true
                                                 :page-id page-id})))))))))
 
+(defn update-layout-gap
+  [value shape-ids attributes page-id]
+  (ptk/reify ::update-layout-gao
+    ptk/WatchEvent
+    (watch [_ state _]
+      (when (number? value)
+        (let [ids-with-layout (shape-ids-with-layout state (or page-id (:current-page-id state)) shape-ids)
+              layout-attributes (attributes->layout-gap attributes value)]
+          (rx/of
+           (dwsl/update-layout ids-with-layout
+                               layout-attributes
+                               {:ignore-touched true
+                                :page-id page-id})))))))
+
 (defn update-layout-sizing-limits
   ([value shape-ids attributes] (update-layout-sizing-limits value shape-ids attributes nil))
   ([value shape-ids attributes page-id]
@@ -470,20 +459,126 @@
        value
        [shape-ids attributes page-id])))))
 
-(defn update-typography-interactive
-  ([value shape-ids attributes] (update-typography value shape-ids attributes nil))
+(defn update-shape-dimensions
+  ([value shape-ids attributes] (update-shape-dimensions value shape-ids attributes nil))
   ([value shape-ids attributes page-id]
-   (when (map? value)
-     (rx/merge
-      (apply-functions-map
-       {:font-size update-font-size
-        :font-family update-font-family-interactive
-        :font-weight update-font-weight-interactive
-        :letter-spacing update-letter-spacing
-        :text-case update-text-case
-        :text-decoration update-text-decoration-interactive}
-       value
-       [shape-ids attributes page-id])))))
+   (ptk/reify ::update-shape-dimensions
+     ptk/WatchEvent
+     (watch [_ _ _]
+       (when (number? value)
+         (rx/of
+          (when (:width attributes) (dwtr/update-dimensions shape-ids :width value {:ignore-touched true :page-id page-id}))
+          (when (:height attributes) (dwtr/update-dimensions shape-ids :height value {:ignore-touched true :page-id page-id}))))))))
+
+(defn- attributes->actions
+  [{:keys [value shape-ids attributes page-id]}]
+  (cond-> []
+    (some attributes #{:width :height})
+    (conj #(update-shape-dimensions
+            value shape-ids
+            (set (filter attributes #{:width :height}))
+            page-id))
+
+    (some attributes #{:x :y})
+    (conj #(update-shape-position
+            value shape-ids
+            (set (filter attributes #{:x :y}))
+            page-id))
+
+    (some attributes #{:p1 :p2 :p3 :p4})
+    (conj #(update-layout-padding
+            value shape-ids
+            (set (filter attributes #{:p1 :p2 :p3 :p4}))
+            page-id))
+
+    (some attributes #{:m1 :m2 :m3 :m4})
+    (conj #(update-layout-item-margin
+            value shape-ids
+            (set (filter attributes #{:m1 :m2 :m3 :m4}))
+            page-id))
+
+    (some attributes #{:row-gap :column-gap})
+    (conj #(update-layout-gap
+            value shape-ids
+            (set (filter attributes #{:row-gap :column-gap}))
+            page-id))
+
+    (some attributes #{:r1 :r2 :r3 :r4})
+    (conj #(if (= attributes #{:r1 :r2 :r3 :r4})
+             (update-shape-radius-all value shape-ids attributes page-id)
+             (update-shape-radius-for-corners
+              value shape-ids
+              (set (filter attributes #{:r1 :r2 :r3 :r4}))
+              page-id)))
+
+    (some attributes #{:strole-width})
+    (conj #(update-stroke-width
+            value shape-ids
+            #{:strole-width}
+            page-id))
+    (some attributes #{:max-width :max-height})
+    (conj #(update-layout-sizing-limits
+            value shape-ids
+            (set (filter attributes #{:max-width :max-height}))
+            page-id))))
+
+(defn use-dimensions-token
+  ([value shape-ids attributes] (use-dimensions-token value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (ptk/reify ::use-dimensions-token
+     ptk/WatchEvent
+     (watch [_ state _]
+       (when (number? value)
+         (let [actions (attributes->actions
+                        {:value value
+                         :shape-ids shape-ids
+                         :attributes attributes
+                         :page-id page-id
+                         :state state})]
+           (apply rx/of (map #(%) actions))))))))
+
+(defn use-spacing-token
+  ([value shape-ids attributes] (use-spacing-token value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (ptk/reify ::use-spacing-token
+     ptk/WatchEvent
+     (watch [_ state _]
+       (let [spacing-attrs
+             #{:row-gap :column-gap
+               :m1 :m2 :m3 :m4
+               :p1 :p2 :p3 :p4}]
+         (when (and (number? value)
+                    (set? attributes)
+                    (set/subset? attributes spacing-attrs))
+
+           (let [actions (attributes->actions
+                          {:value value
+                           :shape-ids shape-ids
+                           :attributes attributes
+                           :page-id page-id
+                           :state state})]
+             (apply rx/of (map #(%) actions)))))))))
+
+(defn use-sizing-token
+  ([value shape-ids attributes] (use-sizing-token value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (ptk/reify ::use-sizing-token
+     ptk/WatchEvent
+     (watch [_ state _]
+       (let [sizing-attrs
+             #{:width :height
+               :max-width :max-height}]
+         (when (and (number? value)
+                    (set? attributes)
+                    (set/subset? attributes sizing-attrs))
+
+           (let [actions (attributes->actions
+                          {:value value
+                           :shape-ids shape-ids
+                           :attributes attributes
+                           :page-id page-id
+                           :state state})]
+             (apply rx/of (map #(%) actions)))))))))
 
 ;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
 
@@ -623,17 +718,19 @@
                            :token token
                            :shape-ids shape-ids}))
           (rx/of
-           (case (:type token)
-             :spacing
+           (cond
+             (and (= (:type token) :spacing)
+                  (nil? attrs))
              (apply-spacing-token {:token token
                                    :attr attrs
                                    :shapes shapes})
+
+             :else
              (apply-token {:attributes (if (empty? attrs) attributes attrs)
                            :token token
                            :shape-ids shape-ids
                            :on-update-shape on-update-shape}))))))))
 
-
 (defn apply-token-on-selected
   [color-operations token]
   (ptk/reify ::apply-token-on-selected
@@ -763,7 +860,7 @@
    {:title "Sizing"
     :attributes #{:width :height}
     :all-attributes ctt/sizing-keys
-    :on-update-shape update-shape-dimensions
+    :on-update-shape use-sizing-token
     :modal {:key :tokens/sizing
             :fields [{:label "Sizing"
                       :key :sizing}]}}
@@ -776,7 +873,7 @@
                      ctt/border-radius-keys
                      ctt/axis-keys
                      ctt/stroke-width-keys)
-    :on-update-shape update-shape-dimensions
+    :on-update-shape use-dimensions-token
     :modal {:key :tokens/dimensions
             :fields [{:label "Dimensions"
                       :key :dimensions}]}}
@@ -809,7 +906,7 @@
    {:title "Spacing"
     :attributes #{:column-gap :row-gap}
     :all-attributes ctt/spacing-keys
-    :on-update-shape update-layout-spacing
+    :on-update-shape use-spacing-token
     :modal {:key :tokens/spacing
             :fields [{:label "Spacing"
                       :key :spacing}]}}))

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

@@ -433,11 +433,22 @@
     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-id token-id nil))]
         (rx/of (dch/commit-changes changes))))))
 
+(defn bulk-delete-tokens
+  [set-id token-ids]
+  (dm/assert! (uuid? set-id))
+  (dm/assert! (every? uuid? token-ids))
+  (ptk/reify ::bulk-delete-tokens
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (apply rx/of
+             (map #(delete-token set-id %) token-ids)))))
+
 (defn duplicate-token
   [token-id]
   (dm/assert! (uuid? token-id))
@@ -505,6 +516,19 @@
         (update state :workspace-tokens assoc :token-context-menu params)
         (update state :workspace-tokens dissoc :token-context-menu)))))
 
+(defn assign-token-node-context-menu
+  [{:keys [position] :as params}]
+
+  (when params
+    (assert (gpt/point? position) "expected a point instance for `position` param"))
+
+  (ptk/reify ::show-token-node-context-menu
+    ptk/UpdateEvent
+    (update [_ state]
+      (if params
+        (update state :workspace-tokens assoc :token-node-context-menu params)
+        (update state :workspace-tokens dissoc :token-node-context-menu)))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; TOKEN-SET UI OPS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

@@ -54,7 +54,7 @@
   {ctt/border-radius-keys dwta/update-shape-radius-for-corners
    ctt/color-keys dwta/update-fill-stroke
    ctt/stroke-width-keys dwta/update-stroke-width
-   ctt/sizing-keys dwta/update-shape-dimensions
+   ctt/sizing-keys dwta/use-dimensions-token
    ctt/opacity-keys dwta/update-opacity
    ctt/rotation-keys dwta/update-rotation
 
@@ -73,8 +73,8 @@
    #{:x :y} dwta/update-shape-position
    #{:p1 :p2 :p3 :p4} dwta/update-layout-padding
    #{:m1 :m2 :m3 :m4} dwta/update-layout-item-margin
-   #{:column-gap :row-gap} dwta/update-layout-spacing
-   #{:width :height} dwta/update-shape-dimensions
+   #{:column-gap :row-gap} dwta/update-layout-gap
+   #{:width :height} dwta/use-dimensions-token
    #{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} dwta/update-layout-sizing-limits})
 
 (def ^:private attribute-actions-map

frontend/src/app/main/refs.cljs

@@ -305,7 +305,7 @@
   (l/derived #(dsh/lookup-shape % page-id shape-id) st/state =))
 
 (def workspace-page-objects
-  (l/derived dsh/lookup-page-objects st/state))
+  (l/derived dsh/lookup-page-objects st/state identical?))
 
 (def workspace-read-only?
   (l/derived :read-only? workspace-global))

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,12 +210,13 @@
 
 (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
            on-change on-blur on-focus on-detach
-           property align ref]
+           property align ref name]
     :rest props}]
 
   (let [;; NOTE: we use mfu/bean here for transparently handle
@@ -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")
@@ -659,7 +662,10 @@
                 label       (get token :name)
                 token-value (or (get token :resolved-value)
                                 (or (mf/ref-val last-value*)
-                                    (fmt/format-number value)))]
+                                    (fmt/format-number value)))
+                token-value (if (= name :opacity)
+                              (* 100 token-value)
+                              token-value)]
             (mf/spread-props props
                              {:id id
                               :label label
@@ -669,6 +675,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

@@ -7,6 +7,7 @@
 @use "ds/_borders.scss" as *;
 @use "ds/_sizes.scss" as *;
 @use "ds/typography.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .option-list {
   --options-dropdown-icon-fg-color: var(--color-foreground-secondary);
@@ -15,32 +16,32 @@
   --options-dropdown-border-color: var(--color-background-quaternary);
 
   position: absolute;
-  top: $sz-36;
-  width: var(--dropdown-width, 100%);
+  inset-block-start: $sz-36;
+  inline-size: var(--dropdown-width, 100%);
   transform: translateX(var(--dropdown-translate-distance, 0));
   background-color: var(--options-dropdown-bg-color);
   border-radius: $br-8;
   border: $b-1 solid var(--options-dropdown-border-color);
   padding-block: var(--sp-xs);
   margin-block-end: 0;
-  max-height: $sz-400;
+  max-block-size: $sz-400;
   overflow-y: auto;
   overflow-x: hidden;
   z-index: var(--z-index-dropdown);
 }
 
 .left-align {
-  left: 0;
+  inset-inline-start: var(--dropdown-offset, 0);
 }
 
 .right-align {
-  right: 0;
+  inset-inline-end: var(--dropdown-offset, 0);
 }
 
 .option-separator {
   border: $b-1 solid var(--options-dropdown-border-color);
-  margin-top: var(--sp-xs);
-  margin-bottom: var(--sp-xs);
+  margin-block-start: var(--sp-xs);
+  margin-block-end: var(--sp-xs);
 }
 
 .group-option,
@@ -51,11 +52,11 @@
   gap: var(--sp-xs);
   color: var(--color-foreground-secondary);
   padding-inline: var(--sp-s);
-  height: var(--sp-xxxl);
+  block-size: var(--sp-xxxl);
 }
 
 .option-empty {
   justify-content: center;
   text-align: center;
-  padding: 0 40px;
+  padding: 0 px2rem(40);
 }

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/layers/layer_button.cljs

@@ -19,17 +19,19 @@
    [:expandable {:optional true} :boolean]
    [:expanded {:optional true} :boolean]
    [:icon {:optional true} :string]
-   [:on-toggle-expand fn?]])
+   [:on-toggle-expand {:optional true} fn?]
+   [:on-context-menu {:optional true} fn?]])
 
 (mf/defc layer-button*
   {::mf/schema schema:layer-button}
-  [{:keys [label description class is-expandable expanded icon on-toggle-expand children] :rest props}]
+  [{:keys [label description class is-expandable expanded icon on-toggle-expand on-context-menu children] :rest props}]
   (let [button-props (mf/spread-props props
                                       {:class [class (stl/css-case :layer-button true
                                                                    :layer-button--expandable is-expandable
                                                                    :layer-button--expanded expanded)]
                                        :type "button"
-                                       :on-click on-toggle-expand})]
+                                       :on-click on-toggle-expand
+                                       :on-context-menu on-context-menu})]
     [:div {:class (stl/css :layer-button-wrapper)}
      [:> "button" button-props
       [:div {:class (stl/css :layer-button-content)}

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/ds/z-index.scss

@@ -10,6 +10,7 @@ $z-index-200: 200;
 $z-index-300: 300;
 $z-index-400: 400;
 $z-index-500: 500;
+$z-index-600: 600;
 
 :global(:root) {
   --z-index-auto: #{$z-index-auto}; // Index for elements such as workspace, rulers ...
@@ -18,4 +19,5 @@ $z-index-500: 500;
   --z-index-set: #{$z-index-300}; // Index for configuration elements like modals, color picker, grid edition elements
   --z-index-dropdown: #{$z-index-400}; // Index for dropdown like elements, selects, menus, dropdowns
   --z-index-notifications: #{$z-index-500}; // Index for notification
+  --z-index-loaders: #{$z-index-600}; // Index for loaders
 }

frontend/src/app/main/ui/releases.cljs

@@ -31,6 +31,7 @@
    [app.main.ui.releases.v2-10]
    [app.main.ui.releases.v2-11]
    [app.main.ui.releases.v2-12]
+   [app.main.ui.releases.v2-13]
    [app.main.ui.releases.v2-2]
    [app.main.ui.releases.v2-3]
    [app.main.ui.releases.v2-4]
@@ -103,4 +104,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "2.12")))
+  (rc/render-release-notes (assoc params :version "2.13")))

frontend/src/app/main/ui/releases/v2_13.cljs

@@ -0,0 +1,118 @@
+;; 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.releases.v2-13
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+(defmethod c/render-release-notes "2.13"
+  [{:keys [slide klass next finish navigate version]}]
+  (mf/html
+   (case slide
+     :start
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.13-slide-0.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Penpot 2.13 is here!"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "What’s new in Penpot?"]
+
+          [:div {:class (stl/css :version-tag)}
+           (dm/str "Version " version)]]
+
+         [:div {:class (stl/css :features-block)}
+          [:span {:class (stl/css :feature-title)}
+           "The first release of the year, and we’re just getting started 🚀"]
+
+          [:p  {:class (stl/css :feature-content)}
+           "This is our first release of the year, and it sets the tone for what’s coming next. We’re kicking off an exciting year where we’ll take Penpot to a whole new level, with improved performance, stronger design system foundations, long-requested features, and new capabilities that unlock better workflows for teams."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "This release brings two highlights the community has been asking for, along with solid improvements under the hood to keep everything fast and smooth."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "Let’s dive in!"]]
+
+         [:div {:class (stl/css :navigation)}
+          [:button {:class (stl/css :next-btn)
+                    :on-click next} "Continue"]]]]]]
+
+     0
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.13-trash.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "The Trash"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "The Trash"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Deleting a file no longer means it’s gone forever. Introducing The Trash, a dedicated space in the dashboard where deleted files and projects live before being permanently removed."]
+
+          [:p {:class (stl/css :feature-content)}
+           "From here, you can recover content deleted by mistake or clean things up for good when you’re sure you don’t need them anymore. The Trash works for both files and projects, and items are automatically removed after a period of time depending on your Penpot plan."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Highly requested, long overdue, and now officially here."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     1
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.13-shadow-tokens.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Shadow tokens: Reusable shadows, at last!"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Shadow tokens: Reusable shadows, at last!"]]
+         [:div {:class (stl/css :feature)}
+
+          [:p {:class (stl/css :feature-content)}
+           "With Shadow tokens, we’re introducing our second composite token, right after Typography tokens. This is a big step forward for design systems in Penpot."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Until now, shadows couldn’t be defined as reusable styles the way colors could before color tokens existed. Shadow tokens change that. You can now create reusable, consistent shadows, made of one or multiple layers, fully tokenized and ready to scale across your designs."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Each shadow can reference existing tokens or use custom values, supports both Drop Shadow and Inner Shadow, and even allows shadow tokens to reference other shadow tokens. A brand-new capability, unlocked."]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 2}]
+
+          [:button {:on-click finish
+                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
+

frontend/src/app/main/ui/releases/v2_13.scss

@@ -0,0 +1,102 @@
+// 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
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-container {
+  display: grid;
+  grid-template-columns: deprecated.$s-324 1fr;
+  height: deprecated.$s-500;
+  width: deprecated.$s-888;
+  border-radius: deprecated.$br-8;
+  background-color: var(--modal-background-color);
+  border: deprecated.$s-2 solid var(--modal-border-color);
+}
+
+.start-image {
+  width: deprecated.$s-324;
+  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+}
+
+.modal-content {
+  padding: deprecated.$s-40;
+  display: grid;
+  grid-template-rows: auto 1fr deprecated.$s-32;
+  gap: deprecated.$s-24;
+
+  a {
+    color: var(--button-primary-background-color-rest);
+  }
+}
+
+.modal-header {
+  display: grid;
+  gap: deprecated.$s-8;
+}
+
+.version-tag {
+  @include deprecated.flexCenter;
+  @include deprecated.headlineSmallTypography;
+  height: deprecated.$s-32;
+  width: deprecated.$s-96;
+  background-color: var(--communication-tag-background-color);
+  color: var(--communication-tag-foreground-color);
+  border-radius: deprecated.$br-8;
+}
+
+.modal-title {
+  @include deprecated.headlineLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.features-block {
+  display: flex;
+  flex-direction: column;
+  gap: deprecated.$s-16;
+  width: deprecated.$s-440;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: deprecated.$s-8;
+}
+
+.feature-title {
+  @include deprecated.bodyLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.feature-content {
+  @include deprecated.bodyMediumTypography;
+  margin: 0;
+  color: var(--modal-text-foreground-color);
+}
+
+.feature-list {
+  @include deprecated.bodyMediumTypography;
+  color: var(--modal-text-foreground-color);
+  list-style: disc;
+  display: grid;
+  gap: deprecated.$s-8;
+}
+
+.navigation {
+  width: 100%;
+  display: grid;
+  grid-template-areas: "bullets button";
+}
+
+.next-btn {
+  @extend .button-primary;
+  width: deprecated.$s-100;
+  justify-self: flex-end;
+  grid-area: button;
+}

frontend/src/app/main/ui/static.cljs

@@ -308,6 +308,16 @@
      [:div {:class (stl/css :sign-info)}
       [:button {:on-click on-click} (tr "labels.retry")]]]))
 
+(mf/defc webgl-context-lost*
+  []
+  (let [on-reload (mf/use-fn #(js/location.reload))]
+    [:> error-container* {}
+     [:div {:class (stl/css :main-message)} (tr "errors.webgl-context-lost.main-message")]
+     [:div {:class (stl/css :desc-message)} (tr "errors.webgl-context-lost.desc-message")]
+     [:div {:class (stl/css :buttons-container)}
+      [:> button* {:variant "primary" :on-click on-reload}
+       (tr "labels.reload-page")]]]))
+
 (defn- generate-report
   [data]
   (try
@@ -437,6 +447,7 @@
                        (rx/of default)
                        (rx/throw cause)))))))
 
+
 (mf/defc exception-section*
   {::mf/private true}
   [{:keys [data route] :as props}]
@@ -469,6 +480,9 @@
       :service-unavailable
       [:> service-unavailable*]
 
+      :webgl-context-lost
+      [:> webgl-context-lost*]
+
       [:> internal-error* props])))
 
 (mf/defc context-wrapper*

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

@@ -218,6 +218,10 @@
 
         design-tokens?   (features/use-feature "design-tokens/v1")
 
+        wasm-renderer-enabled? (features/use-feature "render-wasm/v1")
+
+        first-frame-rendered?  (mf/use-state false)
+
         background-color (:background-color wglobal)]
 
     (mf/with-effect []
@@ -242,6 +246,17 @@
       (when (and file-loaded? (not page-id))
         (st/emit! (dcm/go-to-workspace :file-id file-id ::rt/replace true))))
 
+    (mf/with-effect [file-id page-id]
+      (reset! first-frame-rendered? false))
+
+    (mf/with-effect []
+      (let [handle-wasm-render
+            (fn [_]
+              (reset! first-frame-rendered? true))
+            listener-key (events/listen globals/document "penpot:wasm:render" handle-wasm-render)]
+        (fn []
+          (events/unlistenByKey listener-key))))
+
     [:> (mf/provider ctx/current-project-id) {:value project-id}
      [:> (mf/provider ctx/current-file-id) {:value file-id}
       [:> (mf/provider ctx/current-page-id) {:value page-id}
@@ -250,15 +265,22 @@
          [:> modal-container*]
          [:section {:class (stl/css :workspace)
                     :style {:background-color background-color
-                            :touch-action "none"}}
+                            :touch-action "none"
+                            :position "relative"}}
           [:> context-menu*]
-          (if (and file-loaded? page-id)
+          (when (and file-loaded? page-id)
             [:> workspace-inner*
              {:page-id page-id
               :file-id file-id
               :file file
               :wglobal wglobal
-              :layout layout}]
+              :layout layout}])
+          (when (or (not (and file-loaded? page-id))
+                    ;; in wasm renderer, extend the pixel loader until the first frame is rendered
+                    ;; but do not apply it when switching pages
+                    (and wasm-renderer-enabled?
+                         (not file-loaded?)
+                         (not @first-frame-rendered?)))
             [:> workspace-loader*])]]]]]]))
 
 (mf/defc workspace-page*

frontend/src/app/main/ui/workspace.scss

@@ -20,7 +20,13 @@
 }
 
 .workspace-loader {
-  grid-area: viewport;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-loaders);
+  background-color: var(--color-background-primary);
 }
 
 .workspace-content {

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

@@ -33,9 +33,24 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+;; Coalesce sidebar hover highlights to 1 frame to avoid long tasks
+(defonce ^:private sidebar-hover-queue (atom {:enter #{} :leave #{}}))
+(defonce ^:private sidebar-hover-pending? (atom false))
+
+(defn- schedule-sidebar-hover-flush []
+  (when (compare-and-set! sidebar-hover-pending? false true)
+    (ts/raf
+     (fn []
+       (let [{:keys [enter leave]} (swap! sidebar-hover-queue (constantly {:enter #{} :leave #{}}))]
+         (reset! sidebar-hover-pending? false)
+         (when (seq leave)
+           (apply st/emit! (map dw/dehighlight-shape leave)))
+         (when (seq enter)
+           (apply st/emit! (map dw/highlight-shape enter))))))))
+
 (mf/defc layer-item-inner
   {::mf/wrap-props false}
-  [{:keys [item depth parent-size name-ref children ref
+  [{:keys [item depth parent-size name-ref children ref style
            ;; Flags
            read-only? highlighted? selected? component-tree?
            filtered? expanded? dnd-over? dnd-over-top? dnd-over-bot? hide-toggle?
@@ -82,7 +97,8 @@
                     :dnd-over dnd-over?
                     :dnd-over-top dnd-over-top?
                     :dnd-over-bot dnd-over-bot?
-                    :root-board parent-board?)}
+                    :root-board parent-board?)
+            :style style}
       [:span {:class (stl/css-case
                       :tab-indentation true
                       :filtered filtered?)
@@ -165,10 +181,12 @@
 
      children]))
 
+;; Memoized for performance
 (mf/defc layer-item
   {::mf/props :obj
-   ::mf/memo true}
-  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
+   ::mf/wrap [mf/memo]}
+  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted style render-children?]
+    :or {render-children? true}}]
   (let [id                (:id item)
         blocked?          (:blocked item)
         hidden?           (:hidden item)
@@ -245,13 +263,21 @@
         (mf/use-fn
          (mf/deps id)
          (fn [_]
-           (st/emit! (dw/highlight-shape id))))
+           (swap! sidebar-hover-queue (fn [{:keys [enter leave] :as q}]
+                                        (-> q
+                                            (assoc :enter (conj enter id))
+                                            (assoc :leave (disj leave id)))))
+           (schedule-sidebar-hover-flush)))
 
         on-pointer-leave
         (mf/use-fn
          (mf/deps id)
          (fn [_]
-           (st/emit! (dw/dehighlight-shape id))))
+           (swap! sidebar-hover-queue (fn [{:keys [enter leave] :as q}]
+                                        (-> q
+                                            (assoc :enter (disj enter id))
+                                            (assoc :leave (conj leave id)))))
+           (schedule-sidebar-hover-flush)))
 
         on-context-menu
         (mf/use-fn
@@ -337,14 +363,18 @@
         component-tree? (or component-child? (ctk/instance-root? item) (ctk/instance-head? item))
 
         enable-drag      (mf/use-fn #(reset! drag-disabled* false))
-        disable-drag     (mf/use-fn #(reset! drag-disabled* true))]
+        disable-drag     (mf/use-fn #(reset! drag-disabled* true))
+
+        ;; Lazy loading of child elements via IntersectionObserver
+        children-count*  (mf/use-state 0)
+        children-count   (deref children-count*)
+        lazy-ref         (mf/use-ref nil)
+        observer-var     (mf/use-var nil)
+        chunk-size       50]
 
     (mf/with-effect [selected? selected]
       (let [single? (= (count selected) 1)
             node (mf/ref-val ref)
-            ;; NOTE: Neither get-parent-at nor get-parent-with-selector
-            ;; work if the component template changes, so we need to
-            ;; seek for an alternate solution. Maybe use-context?
             scroll-node (dom/get-parent-with-data node "scroll-container")
             parent-node (dom/get-parent-at node 2)
             first-child-node (dom/get-first-child parent-node)
@@ -362,6 +392,61 @@
         #(when (some? subid)
            (rx/dispose! subid))))
 
+    ;; Setup scroll-driven lazy loading when expanded
+    ;; and ensures selected children are loaded immediately
+    (mf/with-effect [expanded? (:shapes item) selected]
+      (let [shapes-vec (:shapes item)
+            total (count shapes-vec)]
+        (if expanded?
+          (let [;; Children are rendered in reverse order, so index 0 in render = last in shapes-vec
+                ;; Find if any selected id is a direct child and get its render index
+                selected-child-render-idx
+                (when (and (> total chunk-size) (seq selected))
+                  (let [shapes-reversed (vec (reverse shapes-vec))]
+                    (some (fn [sel-id]
+                            (let [idx (.indexOf shapes-reversed sel-id)]
+                              (when (>= idx 0) idx)))
+                          selected)))
+                ;; Load at least enough to include the selected child plus extra
+                ;; for context (so it can be centered in the scroll view)
+                min-count (if selected-child-render-idx
+                            (+ selected-child-render-idx chunk-size)
+                            chunk-size)
+                current @children-count*
+                new-count (min total (max current chunk-size min-count))]
+            (reset! children-count* new-count))
+          (reset! children-count* 0)))
+      (fn []
+        (when-let [obs ^js @observer-var]
+          (.disconnect obs)
+          (reset! observer-var nil))))
+
+    ;; Re-observe sentinel whenever children-count changes (sentinel moves)
+    (mf/with-effect [children-count expanded?]
+      (let [total (count (:shapes item))
+            node (mf/ref-val ref)
+            scroll-node (dom/get-parent-with-data node "scroll-container")
+            lazy-node (mf/ref-val lazy-ref)]
+        ;; Disconnect previous observer
+        (when-let [obs ^js @observer-var]
+          (.disconnect obs)
+          (reset! observer-var nil))
+        ;; Setup new observer if there are more children to load
+        (when (and expanded?
+                   (< children-count total)
+                   scroll-node
+                   lazy-node)
+          (let [cb (fn [entries]
+                     (when (and (seq entries)
+                                (.-isIntersecting (first entries)))
+                       ;; Load next chunk when sentinel intersects
+                       (let [current @children-count*
+                             next-count (min total (+ current chunk-size))]
+                         (reset! children-count* next-count))))
+                observer (js/IntersectionObserver. cb #js {:root scroll-node})]
+            (.observe observer lazy-node)
+            (reset! observer-var observer)))))
+
     [:& layer-item-inner
      {:ref dref
       :item item
@@ -386,24 +471,32 @@
       :on-enable-drag enable-drag
       :on-disable-drag disable-drag
       :on-toggle-visibility toggle-visibility
-      :on-toggle-blocking toggle-blocking}
+      :on-toggle-blocking toggle-blocking
+      :style style}
 
-     (when (and (:shapes item) expanded?)
+     (when (and render-children?
+                (:shapes item)
+                expanded?)
        [:div {:class (stl/css-case
                       :element-children true
                       :parent-selected selected?
                       :sticky-children parent-board?)
               :data-testid (dm/str "children-" id)}
-        (for [[index id] (reverse (d/enumerate (:shapes item)))]
-          (when-let [item (get objects id)]
-            [:& layer-item
-             {:item item
-              :highlighted highlighted
-              :selected selected
-              :index index
-              :objects objects
-              :key (dm/str id)
-              :sortable? sortable?
-              :depth depth
-              :parent-size parent-size
-              :component-child? component-tree?}]))])]))
+        (let [all-children (reverse (d/enumerate (:shapes item)))
+              visible      (take children-count all-children)]
+          (for [[index id] visible]
+            (when-let [item (get objects id)]
+              [:& layer-item
+               {:item item
+                :highlighted highlighted
+                :selected selected
+                :index index
+                :objects objects
+                :key (dm/str id)
+                :sortable? sortable?
+                :depth depth
+                :parent-size parent-size
+                :component-child? component-tree?}])))
+        (when (< children-count (count (:shapes item)))
+          [:div {:ref lazy-ref
+                 :style {:min-height 1}}])])]))

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

@@ -116,13 +116,29 @@
         (->> (dm/get-in grid-edition [edition :selected])
              (map #(dm/get-in objects [edition :layout-grid-cells %])))
 
-        shapes-with-children
-        (mf/with-memo [selected objects shapes]
-          (let [xform    (comp (remove nil?)
-                               (mapcat #(cfh/get-children-ids objects %)))
-                selected (into selected xform selected)]
-            (sequence (keep (d/getf objects)) selected)))
+        shapes-with-children*
+        (mf/use-state nil)
 
+        _ (mf/use-effect
+           (mf/deps selected objects shapes)
+           (fn []
+             (reset! shapes-with-children* nil)
+             (let [result
+                   (loop [queue   (into #queue [] selected)
+                          visited selected]
+                     (if-let [id (peek queue)]
+                       (let [shape    (get objects id)
+                             children (:shapes shape)]
+                         (if (seq children)
+                           (let [new-children (remove visited children)]
+                             (recur (into (pop queue) new-children)
+                                    (into visited new-children)))
+                           (recur (pop queue) visited)))
+                       (sequence (keep (d/getf objects)) visited)))]
+               (reset! shapes-with-children* result))))
+
+        shapes-with-children
+        (deref shapes-with-children*)
 
         total-selected
         (count selected)]

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,113 @@
          (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 +165,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))))
+             (st/emit!
+              (dwta/toggle-token {:token     (first value)
+                                  :attrs     #{:r1 :r2 :r3 :r4}
+                                  :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! (st/emit!
+                        (dwta/toggle-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 +226,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/layer.cljs

@@ -9,13 +9,17 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.types.token :as tk]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.shapes :as dwsh]
+   [app.main.data.workspace.tokens.application :as dwta]
    [app.main.features :as features]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.select :refer [select]]
+   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.render-wasm.api :as wasm.api]
    [app.util.i18n :as i18n :refer [tr]]
@@ -39,11 +43,16 @@
 (defn- check-layer-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? old-applied-tokens
+                     new-applied-tokens)
          (identical? (get old-values :opacity)
                      (get new-values :opacity))
          (identical? (get old-values :blend-mode)
@@ -53,12 +62,53 @@
          (identical? (get old-values :hidden)
                      (get new-values :hidden)))))
 
+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+
+        on-detach-attr (mf/use-fn
+                        (mf/deps on-detach name)
+                        #(on-detach % name))
+
+        applied-token (get applied-tokens name)
+        opacity-value (or (get values name) 1)
+
+        props  (mf/spread-props props
+                                {:placeholder (if (or (= :multiple (:applied-tokens values))
+                                                      (= :multiple opacity-value))
+                                                (tr "settings.multiple")
+                                                "--")
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :name name
+                                 :value (* 100 opacity-value)})]
+    [:> numeric-input* props]))
+
 (mf/defc layer-menu*
   {::mf/wrap [#(mf/memo' % check-layer-menu-props)]}
-  [{:keys [ids values]}]
-  (let [hidden?             (get values :hidden)
+  [{:keys [ids values applied-tokens]}]
+  (let [token-numeric-inputs
+        (features/use-feature "tokens/numeric-input")
+
+        hidden?             (get values :hidden)
         blocked?            (get values :blocked)
 
+        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}))))
+
         current-blend-mode  (or (get values :blend-mode) :normal)
         current-opacity     (opacity->string (:opacity values))
 
@@ -118,6 +168,17 @@
            (let [value (/ value 100)]
              (on-change ids :opacity value))))
 
+        on-opacity-change
+        (mf/use-fn
+         (mf/deps on-change handle-opacity-change)
+         (fn [value]
+           (if (or (string? value) (int? value))
+             (handle-opacity-change value)
+             (do
+               (st/emit! (dwta/toggle-token {:token (first value)
+                                             :attrs #{:opacity}
+                                             :shape-ids ids}))))))
+
         handle-set-hidden
         (mf/use-fn
          (mf/deps ids)
@@ -176,8 +237,9 @@
                      preview-complete?))
         (swap! state* assoc :selected-blend-mode current-blend-mode)))
 
-    [:div {:class (stl/css-case :element-set-content true
-                                :hidden hidden?)}
+    [:section {:class (stl/css-case :element-set-content true
+                                    :hidden hidden?)
+               :aria-label "layer-menu-section"}
      [:div {:class (stl/css :select)}
       [:& select
        {:default-value selected-blend-mode
@@ -187,16 +249,34 @@
         :class (stl/css-case :hidden-select hidden?)
         :on-pointer-enter-option handle-blend-mode-enter
         :on-pointer-leave-option handle-blend-mode-leave}]]
-     [:div {:class (stl/css :input)
-            :title (tr "workspace.options.opacity")}
-      [:span {:class (stl/css :icon)} "%"]
-      [:> numeric-input*
-       {:value current-opacity
-        :placeholder "--"
-        :on-change handle-opacity-change
-        :min 0
-        :max 100
-        :className (stl/css :numeric-input)}]]
+
+
+
+     (if token-numeric-inputs
+
+       [:> numeric-input-wrapper*
+        {:on-change on-opacity-change
+         :on-detach on-detach-token
+         :icon i/percentage
+         :min 0
+         :max 100
+         :name :opacity
+         :property (tr "workspace.options.opacity")
+         :applied-tokens applied-tokens
+         :align :right
+         :class (stl/css :numeric-input-wrapper)
+         :values values}]
+
+       [:div {:class (stl/css :input)
+              :title (tr "workspace.options.opacity")}
+        [:span {:class (stl/css :icon)} "%"]
+        [:> deprecated-input/numeric-input*
+         {:value current-opacity
+          :placeholder "--"
+          :on-change handle-opacity-change
+          :min 0
+          :max 100
+          :className (stl/css :numeric-input)}]])
 
 
      [:div {:class (stl/css :actions)}

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.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-content {
   @include sidebar.option-grid-structure;
@@ -43,3 +44,9 @@
     }
   }
 }
+
+.numeric-input-wrapper {
+  grid-column: span 2;
+  --dropdown-width: var(--7-columns-dropdown-width);
+  --dropdown-offset: #{px2rem(-35)};
+}

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

@@ -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
@@ -369,12 +369,12 @@
            (if (or (string? value) (int? value))
              (on-change :simple attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))
-                     updated-attr (if (= :p1 attr) #{:p1 :p3} #{:p2 :p4})]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs updated-attr
-                                               :shape-ids ids}))
-                 (on-change :simple attr resolved-value event))))))
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= :p1 attr)
+                                                 #{:p1 :p3}
+                                                 #{:p2 :p4})
+                                    :shape-ids ids}))))))
 
         on-detach-token
         (mf/use-fn
@@ -483,11 +483,9 @@
            (if (or (string? value) (int? value))
              (on-change :multiple attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (on-change :multiple attr resolved-value event))))))
+               (st/emit! (dwta/toggle-token {:token (first value)
+                                             :attrs #{attr}
+                                             :shape-ids ids}))))))
 
         on-focus
         (mf/use-fn
@@ -716,11 +714,12 @@
            (if (or (string? value) (int? value))
              (on-change (= "nowrap" wrap-type) attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (on-change (= "nowrap" wrap-type) attr resolved-value event))))))
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= "nowrap" wrap-type)
+                                                 #{:row-gap :colum-gap}
+                                                 #{attr})
+                                    :shape-ids ids}))))))
 
         on-detach-token
         (mf/use-fn

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

@@ -284,28 +284,17 @@
            (st/emit! (udw/change-orientation ids (keyword orientation)))))
 
         ;; SIZE AND PROPORTION LOCK
-        do-size-change
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [value attr]
-           (st/emit! (udw/trigger-bounding-box-cloaking ids)
-                     (udw/update-dimensions ids attr value))))
-
         on-size-change
         (mf/use-fn
          (mf/deps ids shapes)
          (fn [value attr]
            (if (or (string? value) (number? value))
-             (do
-               (st/emit! (udw/trigger-bounding-box-cloaking ids))
-               (run! #(do-size-change value attr) shapes))
-             (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (udw/trigger-bounding-box-cloaking ids)
-                           (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (run! #(do-size-change resolved-value attr) shapes))))))
+             (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                       (udw/update-dimensions ids attr value))
+             (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                       (dwta/toggle-token {:token (first value)
+                                           :attrs #{attr}
+                                           :shape-ids ids})))))
 
         on-proportion-lock-change
         (mf/use-fn
@@ -315,11 +304,6 @@
              (run! #(st/emit! (udw/set-shape-proportion-lock % new-lock)) ids))))
 
         ;; POSITION
-        do-position-change
-        (mf/use-fn
-         (fn [shape' value attr]
-           (st/emit! (udw/update-position (:id shape') {attr value}))))
-
         on-position-change
         (mf/use-fn
          (mf/deps ids)
@@ -327,21 +311,11 @@
            (if (or (string? value) (number? value))
              (do
                (st/emit! (udw/trigger-bounding-box-cloaking ids))
-               (run! #(do-position-change %1 value attr) shapes))
-             (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (udw/trigger-bounding-box-cloaking ids)
-                           (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (run! #(do-position-change %1 resolved-value attr) shapes))))))
-
-        ;; ROTATION
-        do-rotation-change
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [value]
-           (st/emit! (udw/increase-rotation ids value))))
+               (st/emit! (udw/update-position ids {attr value})))
+             (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                       (dwta/toggle-token {:token (first value)
+                                           :attrs #{attr}
+                                           :shape-ids ids})))))
 
         on-rotation-change
         (mf/use-fn
@@ -350,14 +324,11 @@
            (if (or (string? value) (number? value))
              (do
                (st/emit! (udw/trigger-bounding-box-cloaking ids))
-               (run! #(do-rotation-change value) shapes))
-             (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (udw/trigger-bounding-box-cloaking ids)
-                           (dwta/toggle-token {:token (first value)
-                                               :attrs #{:rotation}
-                                               :shape-ids ids}))
-                 (run! #(do-rotation-change resolved-value) shapes))))))
+               (st/emit! (udw/increase-rotation ids value)))
+             (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                       (dwta/toggle-token {:token (first value)
+                                           :attrs #{:rotation}
+                                           :shape-ids ids})))))
 
         on-width-change
         (mf/use-fn (mf/deps on-size-change) #(on-size-change % :width))
@@ -410,7 +381,8 @@
          (fn []
            (st/emit! (dwt/selected-fit-content))))]
 
-    [:div {:class (stl/css :element-set)}
+    [:section {:class (stl/css :element-set)
+               :aria-label "shape-measures-section"}
      (when (and (options :presets)
                 (or (nil? all-types) (= (count all-types) 1)))
        [:div {:class (stl/css :presets)}
@@ -600,10 +572,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/rows/stroke_row.cljs

@@ -9,18 +9,50 @@
   (:require
    [app.common.data :as d]
    [app.common.types.color :as ctc]
+   [app.common.types.token :as tk]
    [app.main.data.workspace.tokens.application :as dwta]
+   [app.main.features :as features]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.components.select :refer [select]]
+   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+(mf/defc numeric-input-wrapper*
+  {::mf/private true}
+  [{:keys [values name applied-tokens align on-detach] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+        tokens (mf/with-memo [tokens name]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input name))
+                       (not-empty))))
+
+        on-detach-attr (mf/use-fn
+                        (mf/deps on-detach name)
+                        #(on-detach % name))
+
+        applied-token (get applied-tokens name)
+
+        props  (mf/spread-props props
+                                {:placeholder (if (= :multiple values)
+                                                (tr "settings.multiple")
+                                                "--")
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :name name
+                                 :value values})]
+    [:> numeric-input* props]))
+
 (mf/defc stroke-row*
   [{:keys [index
            stroke
@@ -45,7 +77,10 @@
            select-on-focus
            ids]}]
 
-  (let [on-drop
+  (let [token-numeric-inputs
+        (features/use-feature "tokens/numeric-input")
+
+        on-drop
         (mf/use-fn
          (mf/deps on-reorder index)
          (fn [relative-pos data]
@@ -88,7 +123,13 @@
         on-width-change
         (mf/use-fn
          (mf/deps index on-stroke-width-change)
-         #(on-stroke-width-change index %))
+         (fn [value]
+           (if (or (string? value) (int? value))
+             (on-stroke-width-change index value)
+             (do
+               (st/emit! (dwta/toggle-token {:token (first value)
+                                             :attrs #{:stroke-width}
+                                             :shape-ids ids}))))))
 
         stroke-alignment (or (:stroke-alignment stroke) :center)
 
@@ -149,6 +190,12 @@
          (fn [token]
            (on-detach-token token #{:stroke-color})))
 
+        on-detach-token-width
+        (mf/use-fn
+         (mf/deps on-detach-token)
+         (fn [token]
+           (on-detach-token (first token) #{:stroke-width})))
+
         stroke-caps-options
         [{:value nil :label (tr "workspace.options.stroke-cap.none")}
          :separator
@@ -195,17 +242,30 @@
 
      ;; Stroke Width, Alignment & Style
      [:div {:class (stl/css :stroke-options)}
-      [:div {:class (stl/css :stroke-width-input)
-             :title (tr "workspace.options.stroke-width")}
-       [:> icon* {:icon-id i/stroke-size
-                  :size "s"}]
-       [:> numeric-input* {:value stroke-width
-                           :min 0
-                           :placeholder (tr "settings.multiple")
-                           :on-change on-width-change
-                           :on-focus on-focus
-                           :select-on-focus select-on-focus
-                           :on-blur on-blur}]]
+      (if token-numeric-inputs
+        [:> numeric-input-wrapper* {:on-change on-width-change
+                                    :on-detach on-detach-token-width
+                                    :icon i/stroke-size
+                                    :min 0
+                                    :on-focus on-focus
+                                    :on-blur on-blur
+                                    :name :stroke-width
+                                    :class (stl/css :numeric-input-wrapper)
+                                    :property (tr "workspace.options.stroke-width")
+                                    :applied-tokens applied-tokens
+                                    :values stroke-width}]
+
+        [:div {:class (stl/css :stroke-width-input)
+               :title (tr "workspace.options.stroke-width")}
+         [:> icon* {:icon-id i/stroke-size
+                    :size "s"}]
+         [:> deprecated-input/numeric-input* {:value stroke-width
+                                              :min 0
+                                              :placeholder (tr "settings.multiple")
+                                              :on-change on-width-change
+                                              :on-focus on-focus
+                                              :select-on-focus select-on-focus
+                                              :on-blur on-blur}]])
 
       [:div {:class (stl/css :stroke-alignment-select)
              :data-testid "stroke.alignment"}

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

@@ -45,6 +45,11 @@
   padding-inline-start: var(--sp-xs);
 }
 
+.numeric-input-wrapper {
+  grid-column: span 2;
+  --dropdown-width: var(--7-columns-dropdown-width);
+}
+
 .stroke-alignment-select {
   grid-column: span 3;
 }

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

@@ -85,6 +85,7 @@
     [:*
      [:> layer-menu* {:ids ids
                       :type type
+                      :applied-tokens applied-tokens
                       :values layer-values}]
 
      [:> measures-menu* {:ids ids

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

@@ -84,6 +84,7 @@
     [:*
      [:> layer-menu* {:ids ids
                       :type type
+                      :applied-tokens applied-tokens
                       :values layer-values}]
 
      [:> measures-menu* {:ids ids

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

@@ -100,6 +100,7 @@
     [:*
      [:> layer-menu* {:ids ids
                       :type shape-type
+                      :applied-tokens applied-tokens
                       :values layer-values}]
      [:> measures-menu* {:ids ids
                          :applied-tokens applied-tokens

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

@@ -111,6 +111,7 @@
     [:div {:class (stl/css :options)}
      [:> layer-menu* {:type type
                       :ids layer-ids
+                      :applied-tokens applied-tokens
                       :values layer-values}]
      [:> measures-menu* {:type type
                          :ids measure-ids

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}]
@@ -385,7 +382,7 @@
                        objects
                        objects)))
 
-        [layer-ids layer-values]
+        [layer-ids layer-values layer-tokens]
         (get-attrs shapes objects :layer)
 
         [text-ids text-values]
@@ -409,7 +406,7 @@
         [exports-ids exports-values]
         (get-attrs shapes objects :exports)
 
-        [layout-container-ids layout-container-values layout-contianer-tokens]
+        [layout-container-ids layout-container-values layout-container-tokens]
         (get-attrs shapes objects :layout-container)
 
         [layout-item-ids layout-item-values {}]
@@ -445,6 +442,7 @@
      (when-not (empty? layer-ids)
        [:> layer-menu* {:type type
                         :ids layer-ids
+                        :applied-tokens layer-tokens
                         :values layer-values}])
 
      (when-not (empty? measure-ids)
@@ -462,7 +460,7 @@
       {:type type
        :ids layout-container-ids
        :values layout-container-values
-       :applied-tokens layout-contianer-tokens
+       :applied-tokens layout-container-tokens
        :multiple true}]
 
      (when (or is-layout-child? has-flex-layout-container?)

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

@@ -84,6 +84,7 @@
 
     [:*
      [:> layer-menu* {:ids ids
+                      :applied-tokens applied-tokens
                       :type type
                       :values layer-values}]
      [:> measures-menu* {:ids ids

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

@@ -85,6 +85,7 @@
     [:*
      [:> layer-menu* {:ids ids
                       :type type
+                      :applied-tokens applied-tokens
                       :values layer-values}]
      [:> measures-menu* {:ids ids
                          :type type

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

@@ -125,6 +125,7 @@
     [:*
      [:> layer-menu* {:ids ids
                       :type type
+                      :applied-tokens applied-tokens
                       :values layer-values}]
      [:> measures-menu*
       {:ids ids

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

@@ -13,6 +13,7 @@
    [app.main.data.helpers :as dsh]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
+   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar*]]
@@ -22,9 +23,11 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.badge :refer [badge-notification]]
+   [app.render-wasm.api :as wasm.api]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
+   [app.util.timers :as timers]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -52,6 +55,8 @@
              refs/workspace-data
              =))
 
+
+
 ;; --- Page Item
 
 (mf/defc page-item
@@ -63,6 +68,22 @@
         navigate-fn  (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dcm/go-to-workspace :page-id id)))
         read-only?   (mf/use-ctx ctx/workspace-read-only?)
 
+        on-click
+        (mf/use-fn
+         (mf/deps id)
+         (fn []
+           ;; when using the wasm renderer, apply a blur effect to the viewport canvas
+           (if (features/active-feature? @st/state "render-wasm/v1")
+             (do
+               (wasm.api/capture-canvas-pixels)
+               (wasm.api/apply-canvas-blur)
+               ;; NOTE: it seems we need two RAF so the blur is actually applied and visible
+               ;;       in the canvas :(
+               (timers/raf
+                (fn []
+                  (timers/raf navigate-fn))))
+             (navigate-fn))))
+
         on-delete
         (mf/use-fn
          (mf/deps id)
@@ -155,7 +176,7 @@
                     :selected selected?)
             :data-testid (dm/str "page-" id)
             :tab-index "0"
-            :on-click navigate-fn
+            :on-click on-click
             :on-double-click on-double-click
             :on-context-menu on-context-menu}
       [:div {:class (stl/css :page-icon)}

frontend/src/app/main/ui/workspace/tokens/import/modal.cljs

@@ -273,4 +273,4 @@
                   {:label (tr "workspace.tokens.import-menu-folder-option") :value :folder}]
         :on-click handle-import-action
         :text-render render-button-text
-        :default :zip}]]]))
+        :default :file}]]]))

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

@@ -14,8 +14,10 @@
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.workspace.tokens.management.context-menu :refer [token-context-menu]]
    [app.main.ui.workspace.tokens.management.group :refer [token-group*]]
+   [app.main.ui.workspace.tokens.management.node-context-menu :refer [token-node-context-menu*]]
    [app.util.array :as array]
    [app.util.i18n :refer [tr]]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (defn- get-sorted-token-groups
@@ -120,7 +122,27 @@
 
         [empty-group filled-group]
         (mf/with-memo [tokens-by-type]
-          (get-sorted-token-groups tokens-by-type))]
+          (get-sorted-token-groups tokens-by-type))
+
+        ;; Filter tokens by their path and return their ids
+        filter-tokens-by-path-ids
+        (mf/use-fn
+         (mf/deps tokens)
+         (fn [type path]
+           (->> tokens
+                (filter (fn [token]
+                          (let [[_ token-value] token]
+                            (and (= (:type token-value) type) (str/starts-with? (:name token-value) path)))))
+                (mapv (fn [token]
+                        (let [[_ token-value] token]
+                          (:id token-value)))))))
+
+        delete-node
+        (mf/with-memo [tokens selected-token-set-id]
+          (fn [node type]
+            (let [path (:path node)
+                  tokens-in-path-ids (filter-tokens-by-path-ids type path)]
+              (st/emit! (dwtl/bulk-delete-tokens selected-token-set-id tokens-in-path-ids)))))]
 
     (mf/with-effect [tokens-lib selected-token-set-id]
       (when (and tokens-lib
@@ -134,6 +156,7 @@
 
     [:*
      [:& token-context-menu]
+     [:> token-node-context-menu* {:on-delete-node delete-node}]
 
      [:& selected-set-info* {:tokens-lib tokens-lib
                              :selected-token-set-id selected-token-set-id}]

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

@@ -223,7 +223,7 @@
         gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap"
                                                                :row-gap "Row Gap"}
                                             :hint (tr "workspace.tokens.gaps")
-                                            :on-update-shape dwta/update-layout-spacing}
+                                            :on-update-shape dwta/update-layout-gap}
                                            context-data)]
     (->> (concat
           gap-items
@@ -239,7 +239,7 @@
     (all-or-separate-actions {:attribute-labels {:width "Width"
                                                  :height "Height"}
                               :hint (tr "workspace.tokens.size")
-                              :on-update-shape dwta/update-shape-dimensions}
+                              :on-update-shape dwta/use-dimensions-token}
                              context-data)
     [:separator]
     (all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width"

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

@@ -88,7 +88,7 @@
 
         expandable? (d/nilv (seq tokens) false)
 
-        on-context-menu
+        on-pill-context-menu
         (mf/use-fn
          (fn [event token]
            (dom/prevent-default event)
@@ -98,6 +98,15 @@
                        :errors (:errors token)
                        :token-id (:id token)}))))
 
+        on-node-context-menu
+        (mf/use-fn
+         (fn [event node]
+           (dom/prevent-default event)
+           (st/emit! (dwtl/assign-token-node-context-menu
+                      {:node node
+                       :type type
+                       :position (dom/get-client-position event)}))))
+
         on-toggle-open-click
         (mf/use-fn
          (mf/deps type expandable?)
@@ -159,4 +168,5 @@
                         :selected-token-set-id selected-token-set-id
                         :is-selected-inside-layout is-selected-inside-layout
                         :on-token-pill-click on-token-pill-click
-                        :on-context-menu on-context-menu}])]))
+                        :on-pill-context-menu on-pill-context-menu
+                        :on-node-context-menu on-node-context-menu}])]))