📎 Update test

* 🐛 Do not show deleted files on search

* 💄 Add cosmetic changes to dashboard deleted files page

.gitignore

@@ -5,6 +5,7 @@
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.pnpm-store
 *-init.clj
 *.css.json
 *.jar

CHANGES.md

@@ -22,6 +22,13 @@
 - Fix problem when pasting elements in reverse flex layout [Taiga #12460](https://tree.taiga.io/project/penpot/issue/12460)
 - Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339)
 - Fix problem with grid layout components and auto sizing [Github #7797](https://github.com/penpot/penpot/issues/7797)
+- Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
+- Fix color assets from shared libraries not appearing as assets in Selected colors panel [Taiga #12957](https://tree.taiga.io/project/penpot/issue/12957)
+- Fix CSS generated box-shadow property [Taiga #12997](https://tree.taiga.io/project/penpot/issue/12997)
+- Fix inner shadow selector on shadow token [Taiga #12951](https://tree.taiga.io/project/penpot/issue/12951)
+- 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)
 
 
 ## 2.12.1

backend/deps.edn

@@ -97,8 +97,8 @@
 
   :jmx-remote
   {:jvm-opts ["-Dcom.sun.management.jmxremote"
-              "-Dcom.sun.management.jmxremote.port=9090"
-              "-Dcom.sun.management.jmxremote.rmi.port=9090"
+              "-Dcom.sun.management.jmxremote.port=9000"
+              "-Dcom.sun.management.jmxremote.rmi.port=9000"
               "-Dcom.sun.management.jmxremote.local.only=false"
               "-Dcom.sun.management.jmxremote.authenticate=false"
               "-Dcom.sun.management.jmxremote.ssl=false"

backend/src/app/auth/oidc.clj

@@ -36,17 +36,6 @@
    [integrant.core :as ig]
    [yetti.response :as-alias yres]))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn obfuscate-string
-  [s]
-  (if (< (count s) 10)
-    (apply str (take (count s) (repeat "*")))
-    (str (subs s 0 5)
-         (apply str (take (- (count s) 5) (repeat "*"))))))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; OIDC PROVIDER (GENERIC)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -177,7 +166,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -222,7 +211,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -299,7 +288,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -341,7 +330,7 @@
              :provider "gitlab"
              :base-uri (:base-uri provider)
              :client-id (:client-id provider)
-             :client-secret (obfuscate-string (:client-secret provider)))
+             :client-secret (d/obfuscate-string (:client-secret provider)))
       provider)
     (catch Throwable cause
       (ex/raise :type ::internal
@@ -361,7 +350,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -459,7 +448,7 @@
     (l/trc :hint "fetch access token"
            :provider (:id provider)
            :client-id (:client-id provider)
-           :client-secret (obfuscate-string (:client-secret provider))
+           :client-secret (d/obfuscate-string (:client-secret provider))
            :grant-type (:grant_type params)
            :redirect-uri (:redirect_uri params))
 
@@ -512,7 +501,7 @@
   [cfg provider tdata]
   (l/trc :hint "fetch user info"
          :uri (:user-uri provider)
-         :token (obfuscate-string (:token/access tdata)))
+         :token (d/obfuscate-string (:token/access tdata)))
 
   (let [params   {:uri (:user-uri provider)
                   :headers {"Authorization" (str (:token/type tdata) " " (:token/access tdata))}

backend/src/app/rpc/commands/search.clj

@@ -19,7 +19,7 @@
       inner join team_profile_rel as tpr on (tpr.team_id = p.team_id)
       where tpr.profile_id = ?
         and p.team_id = ?
-        and (p.deleted_at is null or p.deleted_at > now())
+        and (p.deleted_at is null)
         and (tpr.is_admin = true or
              tpr.is_owner = true or
              tpr.can_edit = true)
@@ -29,7 +29,7 @@
       inner join project_profile_rel as ppr on (ppr.project_id = p.id)
       where ppr.profile_id = ?
         and p.team_id = ?
-        and (p.deleted_at is null or p.deleted_at > now())
+        and (p.deleted_at is null)
         and (ppr.is_admin = true or
              ppr.is_owner = true or
              ppr.can_edit = true)
@@ -47,7 +47,7 @@
      left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn)
     inner join projects as pr on (f.project_id = pr.id)
     where f.name ilike ('%' || ? || '%')
-      and (f.deleted_at is null or f.deleted_at > now())
+      and (f.deleted_at is null)
     order by f.created_at asc")
 
 (defn search-files

common/src/app/common/data.cljc

@@ -1024,6 +1024,26 @@
       :clj
       (sort comp-fn items))))
 
+(defn obfuscate-string
+  "Obfuscates potentially sensitive values.
+
+  - One-arg arity:
+    * For strings shorter than 10 characters, all characters are replaced by `*`.
+    * For longer strings, the first 5 characters are preserved and the rest obfuscated.
+  - Two-arg arity accepts a boolean `full?` that, when true, replaces the whole value
+    by `*`, preserving only the length."
+  ([v]
+   (obfuscate-string v false))
+  ([v full?]
+   (let [s (str v)
+         n (count s)]
+     (cond
+       (zero? n) s
+       full? (apply str (repeat n "*"))
+       (< n 10) (apply str (repeat n "*"))
+       :else (str (subs s 0 5)
+                  (apply str (repeat (- n 5) "*")))))))
+
 (defn reorder
   "Reorder a vector by moving one of their items from some position to some space between positions.
    It clamps the position numbers to a valid range."

common/src/app/common/exceptions.cljc

@@ -10,6 +10,7 @@
   (:refer-clojure :exclude [instance?])
   (:require
    #?(:clj [clojure.stacktrace :as strace])
+   [app.common.data :refer [obfuscate-string]]
    [app.common.pprint :as pp]
    [app.common.schema :as sm]
    [clojure.core :as c]
@@ -19,6 +20,10 @@
      (:import
       clojure.lang.IPersistentMap)))
 
+(def ^:private sensitive-fields
+  "Keys whose values must be obfuscated in validation explains."
+  #{:password :old-password :token :invitation-token})
+
 #?(:clj (set! *warn-on-reflection* true))
 
 (def ^:dynamic *data-length* 8)
@@ -110,7 +115,25 @@
     (explain (:explain data) opts)
 
     (contains? data ::sm/explain)
-    (sm/humanize-explain (::sm/explain data) opts)))
+    (let [exp (::sm/explain data)
+          sanitize-map (fn sanitize-map [m]
+                         (reduce-kv
+                          (fn [acc k v]
+                            (let [k* (if (string? k) (keyword k) k)]
+                              (cond
+                                (contains? sensitive-fields k*)
+                                (assoc acc k (if (map? v)
+                                               (sanitize-map v)
+                                               (obfuscate-string v true)))
+
+                                (map? v) (assoc acc k (sanitize-map v))
+                                :else (assoc acc k v))))
+                          {}
+                          m))
+          sanitize-explain (fn [exp]
+                             (cond-> exp
+                               (:value exp) (update :value sanitize-map)))]
+      (sm/humanize-explain (sanitize-explain exp) opts))))
 
 #?(:clj
    (defn format-throwable

common/src/app/common/path_names.cljc

@@ -132,94 +132,3 @@ Some naming conventions:
   (if-let [last-period (str/last-index-of s ".")]
     [(subs s 0 (inc last-period)) (subs s (inc last-period))]
     [s ""]))
-
-;; Tree building functions --------------------------------------------------
-
-"Build tree structure from flat list of paths"
-
-"`build-tree-root` is the main function to build the tree."
-
-"Receives a list of segments with 'name' properties representing paths,
-   and a separator string."
-"E.g segments = [{... :name 'one/two/three'} {... :name 'one/two/four'} {... :name 'one/five'}]"
-
-"Transforms into a tree structure like:
-   [{:name 'one'
-     :path 'one'
-     :depth 0
-     :leaf nil
-     :children-fn (fn [] [{:name 'two'
-                           :path 'one.two'
-                           :depth 1
-                           :leaf nil
-                           :children-fn (fn [] [{... :name 'three'} {... :name 'four'}])}
-                          {:name 'five'
-                           :path 'one.five'
-                           :depth 1
-                           :leaf {... :name 'five'}
-                           ...}])}]"
-
-(defn- sort-by-children
-  "Sorts segments so that those with children come first."
-  [segments separator]
-  (sort-by (fn [segment]
-             (let [path (split-path (:name segment) :separator separator)
-                   path-length (count path)]
-               (if (= path-length 1)
-                 1
-                 0)))
-           segments))
-
-(defn- group-by-first-segment
-  "Groups segments by their first path segment and update segment name."
-  [segments separator]
-  (reduce (fn [acc segment]
-            (let [[first-segment & remaining-segments] (split-path (:name segment) :separator separator)
-                  rest-path (when (seq remaining-segments) (join-path remaining-segments :separator separator :with-spaces? false))]
-              (update acc first-segment (fnil conj [])
-                      (if rest-path
-                        (assoc segment :name rest-path)
-                        segment))))
-          {}
-          segments))
-
-(defn- sort-and-group-segments
-  "Sorts elements and groups them by their first path segment."
-  [segments separator]
-  (let [sorted  (sort-by-children segments separator)
-        grouped (group-by-first-segment sorted separator)]
-    grouped))
-
-(defn- build-tree-node
-  "Builds a single tree node with lazy children."
-  [segment-name remaining-segments separator parent-path depth]
-  (let [current-path (if parent-path
-                       (str parent-path "." segment-name)
-                       segment-name)
-
-        is-leaf? (and (seq remaining-segments)
-                      (every? (fn [segment]
-                                (let [remaining-segment-name (first (split-path (:name segment) :separator separator))]
-                                  (= segment-name remaining-segment-name)))
-                              remaining-segments))
-
-        leaf-segment (when is-leaf? (first remaining-segments))
-        node {:name segment-name
-              :path current-path
-              :depth depth
-              :leaf leaf-segment
-              :children-fn (when-not is-leaf?
-                             (fn []
-                               (let [grouped-elements (sort-and-group-segments remaining-segments separator)]
-                                 (mapv (fn [[child-segment-name remaining-child-segments]]
-                                         (build-tree-node child-segment-name remaining-child-segments separator current-path (inc depth)))
-                                       grouped-elements))))}]
-    node))
-
-(defn build-tree-root
-  "Builds the root level of the tree."
-  [segments separator]
-  (let [grouped-elements (sort-and-group-segments segments separator)]
-    (mapv (fn [[segment-name remaining-segments]]
-            (build-tree-node segment-name remaining-segments separator nil 0))
-          grouped-elements)))

common/src/app/common/types/path.cljc

@@ -112,8 +112,10 @@
                 (:c2y params) (update-in [index :params :c2y] + (:c2y params)))
               content))]
 
-    (impl/path-data
-     (reduce apply-to-index (vec content) modifiers))))
+    (if (some? modifiers)
+      (impl/path-data
+       (reduce apply-to-index (vec content) modifiers))
+      content)))
 
 (defn transform-content
   "Applies a transformation matrix over content and returns a new

docker/devenv/docker-compose.yaml

@@ -41,7 +41,10 @@ services:
       - 6062:6062
       - 6063:6063
       - 6064:6064
+      - 9000:9000
+      - 9001:9001
       - 9090:9090
+      - 9091:9091
 
     environment:
       - EXTERNAL_UID=${CURRENT_USER_ID}

docker/devenv/files/nginx.conf

@@ -145,8 +145,8 @@ http {
             proxy_pass http://127.0.0.1:3000/;
         }
 
-        location /playground {
-            alias /home/penpot/penpot/experiments/;
+        location /wasm-playground {
+            alias /home/penpot/penpot/frontend/resources/public/wasm-playground/;
             add_header Cache-Control "no-cache, max-age=0";
             autoindex on;
         }

docker/devenv/files/start-tmux.sh

@@ -8,14 +8,10 @@ source ~/.bashrc
 
 echo "[start-tmux.sh] Installing node dependencies"
 pushd ~/penpot/frontend/
-corepack install;
-yarn install;
-yarn playwright install chromium
+./scripts/setup;
 popd
 pushd ~/penpot/exporter/
-corepack install;
-yarn install
-yarn playwright install chromium
+./scripts/setup;
 popd
 
 tmux -2 new-session -d -s penpot

exporter/scripts/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -e;
+
+corepack enable;
+corepack install;
+yarn install;
+yarn playwright install chromium

frontend/playwright/ui/specs/dashboard-deleted.spec.js

@@ -20,12 +20,7 @@ test.describe("Dashboard Deleted Page", () => {
     // Navigate directly to deleted page
     await dashboardPage.goToDeleted();
 
-    // Check for the restore all and clear trash buttons
-    await expect(
-      page.getByRole("button", { name: "Restore All" }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole("button", { name: "Clear trash" }),
-    ).toBeVisible();
+    // Check for the delete-page-section element
+    await expect(page.getByTestId("deleted-page-section")).toBeVisible();
   });
 });

frontend/playwright/ui/specs/inspect-tab.spec.js

@@ -305,7 +305,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");
@@ -335,7 +335,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");
@@ -375,7 +375,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");

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

@@ -40,7 +40,6 @@ const setupEmptyTokensFile = async (page, options = {}) => {
     tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
     tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
     tokenSetItems: workspacePage.tokenSetItems,
-    tokensSidebar: workspacePage.tokensSidebar,
     tokenSetGroupItems: workspacePage.tokenSetGroupItems,
     tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
   };
@@ -111,12 +110,15 @@ const checkInputFieldWithError = async (
   ).toBeVisible();
 };
 
-const checkInputFieldWithoutError = async (inputLocator) => {
+const checkInputFieldWithoutError = async (
+  tokenThemeUpdateCreateModal,
+  inputLocator,
+) => {
   expect(await inputLocator.getAttribute("aria-invalid")).toBeNull();
   expect(await inputLocator.getAttribute("aria-describedby")).toBeNull();
 };
 
-const testTokenCreationFlow = async (
+async function testTokenCreationFlow(
   page,
   {
     tokenLabel,
@@ -130,7 +132,7 @@ const testTokenCreationFlow = async (
     resolvedValueText,
     secondResolvedValueText,
   },
-) => {
+) {
   const invalidValueError = "Invalid token value";
   const emptyNameError = "Name should be at least 1 character";
   const selfReferenceError = "Token has self reference";
@@ -240,45 +242,7 @@ const testTokenCreationFlow = async (
   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();
-};
+}
 
 test.describe("Tokens: Tokens Tab", () => {
   test("Clicking tokens tab button opens tokens sidebar tab", async ({
@@ -434,12 +398,15 @@ test.describe("Tokens: Tokens Tab", () => {
     const emptyNameError = "Name should be at least 1 character";
     const selfReferenceError = "Token has self reference";
     const missingReferenceError = "Missing token references";
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
       await setupEmptyTokensFile(page);
 
-    await tokensSidebar
-      .getByRole("button", { name: "Add Token: Color" })
-      .click();
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    const addTokenButton = tokensTabPanel.getByRole("button", {
+      name: `Add Token: Color`,
+    });
+
+    await addTokenButton.click();
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     // Placeholder checks
@@ -504,34 +471,38 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
 
-    await unfoldTokenTree(tokensSidebar, "color", "color.primary");
+    await expect(
+      tokensTabPanel.getByRole("button", {
+        name: "color.primary",
+      }),
+    ).toBeEnabled();
 
     // Create token referencing the previous one with keyboard
 
-    await tokensSidebar
+    await tokensTabPanel
       .getByRole("button", { name: "Add Token: Color" })
       .click();
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     await nameField.click();
-    await nameField.fill("secondary");
+    await nameField.fill("color.secondary");
     await nameField.press("Tab");
 
     await valueField.click();
     await valueField.fill("{color.primary}");
 
     await expect(submitButton).toBeEnabled();
-    await submitButton.press("Enter");
+    await nameField.press("Enter");
 
     await expect(
-      tokensSidebar.getByRole("button", {
-        name: "secondary",
+      tokensTabPanel.getByRole("button", {
+        name: "color.secondary",
       }),
     ).toBeEnabled();
 
     // Tokens tab panel should have two tokens with the color red / #ff0000
     await expect(
-      tokensSidebar.getByRole("button", { name: "#ff0000" }),
+      tokensTabPanel.getByRole("button", { name: "#ff0000" }),
     ).toHaveCount(2);
 
     // Global set has been auto created and is active
@@ -547,7 +518,7 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toHaveAttribute("aria-checked", "true");
 
     // Check color picker
-    await tokensSidebar
+    await tokensTabPanel
       .getByRole("button", { name: "Add Token: Color" })
       .click();
     await expect(tokensUpdateCreateModal).toBeVisible();
@@ -1108,7 +1079,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const emptyNameError = "Name should be at least 1 character";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] });
+      await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]});
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1536,15 +1507,24 @@ test.describe("Tokens: Tokens Tab", () => {
   test("User edits token and auto created set show up in the sidebar", async ({
     page,
   }) => {
-    const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+    const {
+      workspacePage,
+      tokensUpdateCreateModal,
+      tokenThemesSetsSidebar,
+      tokensSidebar,
+      tokenContextMenuForToken,
+    } = await setupTokensFile(page);
 
     await expect(tokensSidebar).toBeVisible();
 
-    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+    await expect(tokensColorGroup).toBeVisible();
+    await tokensColorGroup.click();
 
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
     await colorToken.click({ button: "right" });
@@ -1561,10 +1541,8 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensUpdateCreateModal).not.toBeVisible();
 
-    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100.changed");
-
     const colorTokenChanged = tokensSidebar.getByRole("button", {
-      name: "changed",
+      name: "colors.blue.100.changed",
     });
     await expect(colorTokenChanged).toBeVisible();
   });
@@ -1655,10 +1633,11 @@ test.describe("Tokens: Tokens Tab", () => {
   });
 
   test("User creates grouped color token", async ({ page }) => {
-    const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
+    const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
       await setupEmptyTokensFile(page);
 
-    await tokensSidebar
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel
       .getByRole("button", { name: "Add Token: Color" })
       .click();
 
@@ -1670,7 +1649,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const valueField = tokensUpdateCreateModal.getByLabel("Value");
 
     await nameField.click();
-    await nameField.fill("dark.primary");
+    await nameField.fill("color.dark.primary");
 
     await valueField.click();
     await valueField.fill("red");
@@ -1681,9 +1660,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
 
-    await unfoldTokenTree(tokensSidebar, "color", "dark.primary");
-
-    await expect(tokensSidebar.getByLabel("primary")).toBeEnabled();
+    await expect(tokensTabPanel.getByLabel("color.dark.primary")).toBeEnabled();
   });
 
   test("User cant create regular token with value missing", async ({
@@ -1699,6 +1676,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const valueField = tokensUpdateCreateModal.getByLabel("Value");
     const submitButton = tokensUpdateCreateModal.getByRole("button", {
       name: "Save",
     });
@@ -1708,7 +1686,7 @@ test.describe("Tokens: Tokens Tab", () => {
 
     // Fill in name but leave value empty
     await nameField.click();
-    await nameField.fill("primary");
+    await nameField.fill("color.primary");
 
     // Submit button should remain disabled when value is empty
     await expect(submitButton).toBeDisabled();
@@ -1726,6 +1704,7 @@ test.describe("Tokens: Tokens Tab", () => {
       .click();
 
     await expect(tokensUpdateCreateModal).toBeVisible();
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
     const valueField = tokensUpdateCreateModal.getByLabel("Value");
 
     await valueField.click();
@@ -1775,10 +1754,15 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensSidebar).toBeVisible();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+
+    await expect(tokensColorGroup).toBeVisible();
+    await tokensColorGroup.click();
 
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
 
     await colorToken.click({ button: "right" });
@@ -1798,10 +1782,15 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensSidebar).toBeVisible();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+    await expect(tokensColorGroup).toBeVisible();
+
+    await tokensColorGroup.click();
 
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
     await colorToken.click({ button: "right" });
@@ -1814,7 +1803,8 @@ test.describe("Tokens: Tokens Tab", () => {
   });
 
   test("User fold/unfold color tokens", async ({ page }) => {
-    const { tokensSidebar } = await setupTokensFile(page);
+    const { tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
 
     await expect(tokensSidebar).toBeVisible();
 
@@ -1824,10 +1814,8 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensColorGroup).toBeVisible();
     await tokensColorGroup.click();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
-
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
     await tokensColorGroup.click();
@@ -2230,10 +2218,13 @@ test.describe("Tokens: Apply token", () => {
     const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
     await tokensTabButton.click();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.black");
+    await tokensSidebar
+      .getByRole("button")
+      .filter({ hasText: "Color" })
+      .click();
 
     await tokensSidebar
-      .getByRole("button", { name: "black" })
+      .getByRole("button", { name: "colors.black" })
       .click({ button: "right" });
     await tokenContextMenuForToken.getByText("Fill").click();
 
@@ -2471,7 +2462,7 @@ test.describe("Tokens: Apply token", () => {
       await expect(tokensUpdateCreateModal).toBeVisible();
 
       const nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary");
+      await nameField.fill("shadow.primary");
 
       // User adds first shadow with a color from the color ramp
       const firstShadowFields = tokensUpdateCreateModal.getByTestId(
@@ -2718,11 +2709,9 @@ test.describe("Tokens: Apply token", () => {
       await submitButton.click();
       await expect(tokensUpdateCreateModal).not.toBeVisible();
 
-      unfoldTokenTree(tokensSidebar, "shadow", "primary");
-
       // Verify token appears in sidebar
       const shadowToken = tokensSidebar.getByRole("button", {
-        name: "primary",
+        name: "shadow.primary",
       });
       await expect(shadowToken).toBeEnabled();
 

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -667,6 +667,9 @@
 }
 
 // UI ELEMENTS
+
+// FIXME: This is used multiple times accross the app. We should design this in
+// the DS and create a proper component for it.
 .asset-element {
   @include bodySmallTypography;
   display: flex;

frontend/scripts/setup

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+corepack enable;
+corepack install;
+yarn install;
+yarn playwright install chromium;

frontend/scripts/test-components

@@ -1,10 +1,10 @@
 #!/usr/bin/env bash
 
-set -ex
-corepack enable;
-corepack install;
-yarn install;
+SCRIPT_DIR=$(dirname $0);
+
+set -ex
+
+$SCRIPT_DIR/setup;
 
-yarn run playwright install chromium --with-deps;
 yarn run build:storybook
 yarn run test:storybook

frontend/scripts/test-e2e

@@ -1,8 +1,9 @@
 #!/usr/bin/env bash
 
+SCRIPT_DIR=$(dirname $0);
+
 set -ex
-corepack enable;
-corepack install;
-yarn install;
-yarn run playwright install chromium --with-deps;
+
+$SCRIPT_DIR/setup;
+
 yarn run test:e2e -x --workers=2 --reporter=list "$@";

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

@@ -236,7 +236,7 @@
   Uses `font-size-value` to calculate the relative line-height value.
   Returns an error for an invalid font-size value."
   [line-height-value font-size-value font-size-errors]
-  (let [missing-references (seq (some cto/find-token-value-references line-height-value))
+  (let [missing-references (seq (cto/find-token-value-references line-height-value))
         error
         (cond
           missing-references

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

@@ -1122,7 +1122,7 @@
         ref-id     (:stroke-color-ref-id stroke)
 
         colors     (-> libraries
-                       (get ref-id)
+                       (get ref-file)
                        (get :data)
                        (ctl/get-colors))
         shared?    (contains? colors ref-id)
@@ -1167,7 +1167,7 @@
         ref-file (get color :ref-file)
         ref-id   (get color :ref-id)
         colors   (-> libraries
-                     (get ref-id)
+                     (get ref-file)
                      (get :data)
                      (ctl/get-colors))
         shared?  (contains? colors ref-id)
@@ -1180,19 +1180,20 @@
      :index (:index shadow)}))
 
 (defn- text->color-att
-  [fill file-id libraries]
+  [fill file-id libraries & {:keys [has-token-applied token-name]}]
   (let [ref-file (:fill-color-ref-file fill)
         ref-id   (:fill-color-ref-id fill)
         colors   (-> libraries
-                     (get ref-id)
+                     (get ref-file)
                      (get :data)
                      (ctl/get-colors))
-
         shared?  (contains? colors ref-id)
-        attrs    (cond-> (types.fills/fill->color fill)
-                   (not (or shared? (= ref-file file-id)))
-                   (dissoc :ref-file :ref-id))]
-
+        base-attrs (cond-> (types.fills/fill->color fill)
+                     (not (or shared? (= ref-file file-id)))
+                     (dissoc :ref-file :ref-id))
+        attrs (cond-> base-attrs
+                has-token-applied (assoc :has-token-applied true)
+                token-name (assoc :token-name token-name))]
     {:attrs attrs
      :prop :content
      :shape-id (:shape-id fill)
@@ -1200,13 +1201,18 @@
 
 (defn- extract-text-colors
   [text file-id libraries]
-  (let [treat-node
+  (let [applied-fill-token (get-in text [:applied-tokens :fill])
+        treat-node
         (fn [node shape-id]
-          (map-indexed #(assoc %2 :shape-id shape-id :index %1) node))]
+          (map-indexed (fn [idx fill]
+                         (let [args (cond-> []
+                                      (and (= idx 0) applied-fill-token)
+                                      (conj :has-token-applied true :token-name applied-fill-token))]
+                           (apply text->color-att (assoc fill :shape-id shape-id :index idx) file-id libraries args)))
+                       node))]
     (->> (txt/node-seq txt/is-text-node? (:content text))
          (map :fills)
-         (mapcat #(treat-node % (:id text)))
-         (map #(text->color-att % file-id libraries)))))
+         (mapcat #(treat-node % (:id text))))))
 
 (defn- fill->color-att
   "Given a fill map enriched with :shape-id, :index, and optionally
@@ -1232,7 +1238,7 @@
         ref-id     (:fill-color-ref-id fill)
 
         colors     (-> libraries
-                       (get ref-id)
+                       (get ref-file)
                        (get :data)
                        (ctl/get-colors))
         shared?    (contains? colors ref-id)

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

@@ -47,32 +47,31 @@
   (ptk/reify ::apply-content-modifiers
     ptk/WatchEvent
     (watch [it state _]
-      (let [page-id (get state :current-page-id state)
-            objects (dsh/lookup-page-objects state)
-
-            id (st/get-path-id state)
-
-            shape
-            (st/get-path state)
+      (let [id    (st/get-path-id state)
+            shape (st/get-path state)
 
             content-modifiers
-            (dm/get-in state [:workspace-local :edit-path id :content-modifiers])
+            (dm/get-in state [:workspace-local :edit-path id :content-modifiers])]
+        (if (or (nil? shape) (nil? content-modifiers))
+          (rx/of (dwe/clear-edition-mode))
+          (let [page-id      (get state :current-page-id state)
+                objects      (dsh/lookup-page-objects state)
 
-            content      (get shape :content)
-            new-content  (path/apply-content-modifiers content content-modifiers)
+                content      (get shape :content)
+                new-content  (path/apply-content-modifiers content content-modifiers)
 
-            old-points   (path.segment/get-points content)
-            new-points   (path.segment/get-points new-content)
-            point-change (->> (map hash-map old-points new-points) (reduce merge))]
+                old-points   (path.segment/get-points content)
+                new-points   (path.segment/get-points new-content)
+                point-change (->> (map hash-map old-points new-points) (reduce merge))]
 
-        (when (and (some? new-content) (some? shape))
-          (let [changes (changes/generate-path-changes it objects page-id shape (:content shape) new-content)]
-            (if (empty? new-content)
-              (rx/of (dch/commit-changes changes)
-                     (dwe/clear-edition-mode))
-              (rx/of (dch/commit-changes changes)
-                     (selection/update-selection point-change)
-                     (fn [state] (update-in state [:workspace-local :edit-path id] dissoc :content-modifiers :moving-nodes :moving-handler))))))))))
+            (when (and (some? new-content) (some? shape))
+              (let [changes (changes/generate-path-changes it objects page-id shape (:content shape) new-content)]
+                (if (empty? new-content)
+                  (rx/of (dch/commit-changes changes)
+                         (dwe/clear-edition-mode))
+                  (rx/of (dch/commit-changes changes)
+                         (selection/update-selection point-change)
+                         (fn [state] (update-in state [:workspace-local :edit-path id] dissoc :content-modifiers :moving-nodes :moving-handler))))))))))))
 
 (defn modify-content-point
   [content {dx :x dy :y} modifiers point]

frontend/src/app/main/ui/components/editable_select.scss

@@ -4,22 +4,29 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+// FIXME: we need this import for .asset-element
+@use "refactor/basic-rules.scss" as deprecated;
+
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/spacing.scss" as *;
 
 .editable-select {
   @extend .asset-element;
   margin: 0;
   padding: 0;
-  border: deprecated.$s-1 solid var(--input-border-color);
+  border: $b-1 solid var(--input-border-color);
   position: relative;
   display: flex;
-  height: deprecated.$s-32;
+  height: $sz-32;
   width: 100%;
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$br-8;
+  padding: var(--sp-s);
+  border-radius: $br-8;
   cursor: pointer;
   .dropdown-button {
-    @include deprecated.flexCenter;
+    display: flex;
+    place-content: center;
     svg {
       @extend .button-icon-small;
       transform: rotate(90deg);
@@ -29,10 +36,11 @@
 
   .custom-select-dropdown {
     @extend .dropdown-wrapper;
-    max-height: deprecated.$s-320;
+    width: fit-content;
+    max-height: px2rem(320); // TODO: when this gets addressed in the DS, use a token
     .separator {
       margin: 0;
-      height: deprecated.$s-12;
+      height: $sz-12;
     }
     .dropdown-element {
       @extend .dropdown-element-base;
@@ -43,7 +51,8 @@
       }
 
       .check-icon {
-        @include deprecated.flexCenter;
+        display: flex;
+        place-content: center;
         svg {
           @extend .button-icon-small;
           visibility: hidden;

frontend/src/app/main/ui/components/title_bar.cljs

@@ -53,6 +53,6 @@
 
 
 (mf/defc inspect-title-bar*
-  [{:keys [class title]}]
+  [{:keys [class title title-class]}]
   [:div {:class [(stl/css :title-bar) class]}
-   [:div {:class (stl/css :title-only :inspect-title)} title]])
+   [:div {:class [title-class (stl/css :title-only :inspect-title)]} title]])

frontend/src/app/main/ui/dashboard/deleted.cljs

@@ -32,6 +32,27 @@
 (def ^:private menu-icon
   (deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
 
+(defn- on-restore-project
+  [project]
+  (let [on-accept #(st/emit! (dd/restore-project-immediately project))]
+    (st/emit! (modal/show
+               {:type :confirm
+                :title (tr "dashboard.restore-project-confirmation.title")
+                :message (tr "dashboard.restore-project-confirmation.description" (:name project))
+                :accept-style :primary
+                :accept-label (tr "labels.continue")
+                :on-accept on-accept}))))
+
+(defn- on-delete-project
+  [project]
+  (let [accept-fn #(st/emit! (dd/delete-project-immediately project))]
+    (st/emit! (modal/show
+               {:type :confirm
+                :title (tr "dashboard.delete-forever-confirmation.title")
+                :message (tr "dashboard.delete-project-forever-confirmation.description" (:name project))
+                :accept-label (tr "dashboard.delete-forever-confirmation.title")
+                :on-accept accept-fn}))))
+
 (mf/defc header*
   {::mf/props :obj
    ::mf/private true}
@@ -41,6 +62,7 @@
     [:h1 (tr "dashboard.projects-title")]]])
 
 (mf/defc deleted-project-menu*
+  {::mf/private true}
   [{:keys [project  show on-close top left]}]
   (let [top  (d/nilv top 0)
         left (d/nilv left 0)
@@ -48,25 +70,13 @@
         on-restore-project
         (mf/use-fn
          (mf/deps project)
-         (fn []
-           (let [on-accept #(st/emit! (dd/restore-project-immediately project))]
-             (st/emit! (modal/show {:type :confirm
-                                    :title (tr "dashboard.restore-project-confirmation.title")
-                                    :message (tr "dashboard.restore-project-confirmation.description" (:name project))
-                                    :accept-style :primary
-                                    :accept-label (tr "labels.continue")
-                                    :on-accept on-accept})))))
+         (partial on-restore-project project))
 
         on-delete-project
         (mf/use-fn
          (mf/deps project)
-         (fn []
-           (let [accept-fn #(st/emit! (dd/delete-project-immediately project))]
-             (st/emit! (modal/show {:type :confirm
-                                    :title (tr "dashboard.delete-forever-confirmation.title")
-                                    :message (tr "dashboard.delete-project-forever-confirmation.description" (:name project))
-                                    :accept-label (tr "dashboard.delete-forever-confirmation.title")
-                                    :on-accept accept-fn})))))
+         (partial on-delete-project project))
+
         options
         (mf/with-memo [on-restore-project on-delete-project]
           [{:name   (tr "dashboard.restore-project-button")
@@ -174,8 +184,8 @@
           :limit limit
           :selected-files selected-files}])]]))
 
-
 (mf/defc menu*
+  {::mf/private true}
   [{:keys [team-id section]}]
   (let [on-recent-click
         (mf/use-fn
@@ -222,7 +232,8 @@
                            (some #(= (:id project) (:project-id %))
                                  (vals deleted-map)))))
                (sort-by :modified-at)
-               (reverse)))
+               (reverse)
+               (not-empty)))
 
         team-id
         (get team :id)
@@ -273,37 +284,44 @@
 
     [:*
      [:> header* {:team team}]
-     [:section {:class (stl/css :dashboard-container :no-bg)}
+     [:section {:class (stl/css :dashboard-container :no-bg)
+                :data-testid "deleted-page-section"}
       [:*
        [:div {:class (stl/css :no-bg)}
 
         [:> menu* {:team-id team-id :section :dashboard-deleted}]
 
-        [:div {:class (stl/css :deleted-info-content)}
-         [:p {:class (stl/css :deleted-info)}
-          (tr "dashboard.trash-info-text-part1")
-          [:span {:class (stl/css :info-text-highlight)}
-           (tr "dashboard.trash-info-text-part2" deletion-days)]
-          (tr "dashboard.trash-info-text-part3")
-          [:br]
-          (tr "dashboard.trash-info-text-part4")]
-         [:div {:class (stl/css :deleted-options)}
-          [:> button* {:variant "ghost"
-                       :type "button"
-                       :on-click on-restore-all}
-           (tr "dashboard.restore-all-deleted-button")]
-          [:> button* {:variant "destructive"
-                       :type "button"
-                       :icon "delete"
-                       :on-click on-delete-all}
-           (tr "dashboard.clear-trash-button")]]]
+        (if (seq projects)
+          [:*
+           [:div {:class (stl/css :deleted-info-content)}
+            [:p {:class (stl/css :deleted-info)}
+             (tr "dashboard.trash-info-text-part1")
+             [:span {:class (stl/css :info-text-highlight)}
+              (tr "dashboard.trash-info-text-part2" deletion-days)]
+             (tr "dashboard.trash-info-text-part3")
+             [:br]
+             (tr "dashboard.trash-info-text-part4")]
+            [:div {:class (stl/css :deleted-options)}
+             [:> button* {:variant "ghost"
+                          :type "button"
+                          :on-click on-restore-all}
+              (tr "dashboard.restore-all-deleted-button")]
+             [:> button* {:variant "destructive"
+                          :type "button"
+                          :icon "delete"
+                          :on-click on-delete-all}
+              (tr "dashboard.clear-trash-button")]]]
 
-        (when (seq projects)
-          (for [{:keys [id] :as project} projects]
-            (let [files (when deleted-map
-                          (->> (vals deleted-map)
-                               (filterv #(= id (:project-id %)))
-                               (sort-by :modified-at #(compare %2 %1))))]
-              [:> deleted-project-item* {:project project
-                                         :files files
-                                         :key id}])))]]]]))
+           (for [{:keys [id] :as project} projects]
+             (let [files (when deleted-map
+                           (->> (vals deleted-map)
+                                (filterv #(= id (:project-id %)))
+                                (sort-by :modified-at #(compare %2 %1))))]
+               [:> deleted-project-item* {:project project
+                                          :files files
+                                          :key id}]))]
+
+          ;; when no deleted projects
+          [:div {:class (stl/css :deleted-info-content)}
+           [:p {:class (stl/css :deleted-info)}
+            (tr "dashboard.trash-info-text-no-projects")]])]]]]))

frontend/src/app/main/ui/dashboard/projects.scss

@@ -4,35 +4,36 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "common/refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
-@use "../ds/typography.scss" as t;
-@use "../ds/_borders.scss" as *;
-@use "../ds/spacing.scss" as *;
-@use "../ds/_sizes.scss" as *;
-@use "../ds/z-index.scss" as *;
+@use "ds/typography.scss" as t;
+@use "ds/_borders.scss" as *;
+@use "ds/spacing.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/z-index.scss" as *;
+@use "ds/mixins.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .dashboard-container {
   flex: 1 0 0;
-  width: 100%;
+  inline-size: 100%;
   margin-inline-end: var(--sp-l);
-  border-top: $b-1 solid var(--panel-border-color);
+  border-block-start: $b-1 solid var(--panel-border-color);
   overflow-y: auto;
-  padding-bottom: var(--sp-xxxl);
+  padding-block-end: var(--sp-xxxl);
 }
 
 .dashboard-projects {
   user-select: none;
-  height: calc(100vh - deprecated.$s-64);
+  block-size: calc(100vh - px2rem(64));
 }
 
 .with-team-hero {
-  height: calc(100vh - deprecated.$s-280);
+  block-size: calc(100vh - px2rem(280));
 }
 
 .dashboard-shared {
-  width: calc(100vw - deprecated.$s-320);
-  margin-inline-end: deprecated.$s-52;
+  inline-size: calc(100vw - px2rem(320));
+  margin-inline-end: px2rem(52);
 }
 
 .search {
@@ -66,8 +67,8 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-s);
-  width: 99%;
-  max-height: $sz-40;
+  inline-size: 99%;
+  max-block-size: $sz-40;
   padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
   margin-block-start: var(--sp-l);
   border-radius: $br-4;
@@ -77,19 +78,19 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  width: 100%;
-  min-height: var(--sp-xxxl);
+  inline-size: 100%;
+  min-block-size: $sz-32;
   margin-inline-start: var(--sp-s);
 }
 
 .project-name {
+  @include textEllipsis;
   @include t.use-typography("body-large");
-  width: fit-content;
-  margin-inline-end: var(--sp-m);
-  line-height: 0.8;
   color: var(--title-foreground-color-hover);
   cursor: pointer;
-  height: var(--sp-l);
+  block-size: $sz-16;
+  line-height: 0.8;
+  margin-inline-end: var(--sp-m);
 }
 
 .info-wrapper {
@@ -116,8 +117,8 @@
 .add-file-btn,
 .options-btn {
   @extend .button-tertiary;
-  height: var(--sp-xxxl);
-  width: var(--sp-xxxl);
+  block-size: $sz-32;
+  inline-size: $sz-32;
   margin: 0 var(--sp-s);
   padding: var(--sp-s);
 }
@@ -129,7 +130,7 @@
 }
 
 .grid-container {
-  width: 100%;
+  inline-size: 100%;
   padding: 0 var(--sp-xs);
 }
 
@@ -139,11 +140,13 @@
 
 .show-more {
   --show-more-color: var(--button-secondary-foreground-color-rest);
-  @include deprecated.buttonStyle;
   @include t.use-typography("body-medium");
+  border: none;
+  background: none;
+  cursor: pointer;
   position: absolute;
-  top: var(--sp-s);
-  right: deprecated.$s-52;
+  inset-block-start: var(--sp-s);
+  inset-inline-end: px2rem(52);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -156,8 +159,8 @@
 }
 
 .show-more-icon {
-  height: var(--sp-l);
-  width: var(--sp-l);
+  block-size: $sz-16;
+  inline-size: $sz-16;
   fill: none;
   stroke: var(--show-more-color);
 }
@@ -165,7 +168,7 @@
 // Team hero
 .team-hero {
   background-color: var(--color-background-tertiary);
-  border-radius: deprecated.$br-8;
+  border-radius: $br-8;
   border: none;
   display: flex;
   margin: var(--sp-l);
@@ -174,12 +177,11 @@
 
   img {
     border-radius: $br-4;
-    height: var(--sp-xl) 0;
-    width: auto;
+    inline-size: auto;
 
     @media (max-width: 1200px) {
       display: none;
-      width: 0;
+      inline-size: 0;
     }
   }
 }
@@ -193,9 +195,8 @@
 }
 
 .title {
-  font-size: $sz-24;
   color: var(--color-foreground-primary);
-  font-weight: deprecated.$fw400;
+  font-size: px2rem(24);
 }
 
 .info {
@@ -215,8 +216,8 @@
   --close-icon-foreground-color: var(--icon-foreground);
   position: absolute;
   top: var(--sp-xl);
-  right: var(--sp-xxl);
-  width: var(--sp-xxl);
+  inset-inline-end: var(--sp-xxl);
+  inline-size: var(--sp-xxl);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -231,20 +232,20 @@
 }
 
 .invite {
-  height: var(--sp-xxxl);
-  width: deprecated.$s-180;
+  block-size: $sz-32;
+  inline-size: px2rem(180);
 }
 
 .img-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--sp-xl) 0;
-  height: var(--sp-xl) 0;
+  inline-size: var(--sp-xl) 0;
+  block-size: var(--sp-xl) 0;
   overflow: hidden;
-  border-radius: deprecated.$br-4;
+  border-radius: $br-4;
   @media (max-width: 1200px) {
     display: none;
-    width: 0;
+    inline-size: 0;
   }
 }

frontend/src/app/main/ui/ds/layers/layer_button.cljs

@@ -1,49 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.ds.layers.layer-button
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:layer-button
-  [:map
-   [:label :string]
-   [:description {:optional true} [:maybe :string]]
-   [:class {:optional true} :string]
-   [:expandable {:optional true} :boolean]
-   [:expanded {:optional true} :boolean]
-   [:icon {:optional true} :string]
-   [:on-toggle-expand fn?]])
-
-(mf/defc layer-button*
-  {::mf/schema schema:layer-button}
-  [{:keys [label description class is-expandable expanded icon on-toggle-expand 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})]
-    [:div {:class (stl/css :layer-button-wrapper)}
-     [:> "button" button-props
-      [:div {:class (stl/css :layer-button-content)}
-       (when is-expandable
-         (if expanded
-           [:> icon* {:icon-id i/arrow-down :class (stl/css :folder-node-icon)}]
-           [:> icon* {:icon-id i/arrow-right :class (stl/css :folder-node-icon)}]))
-       (when icon
-         [:> icon* {:icon-id icon :class (stl/css :layer-button-icon)}])
-       [:span {:class (stl/css :layer-button-name)}
-        label]
-       (when description
-         [:span {:class (stl/css :layer-button-description)}
-          description])
-       [:span {:class (stl/css :layer-button-quantity)}]]]
-     [:div {:class (stl/css :layer-button-actions)}
-      children]]))

frontend/src/app/main/ui/ds/layers/layer_button.scss

@@ -1,56 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
-@use "ds/typography.scss" as *;
-@use "ds/colors.scss" as *;
-
-.layer-button-wrapper {
-  --layer-button-block-size: #{$sz-32};
-  --layer-button-background: var(--color-background-primary);
-  --layer-button-text: var(--color-foreground-secondary);
-
-  display: flex;
-  justify-content: space-between;
-
-  block-size: var(--layer-button-block-size);
-
-  background: var(--layer-button-background);
-  color: var(--layer-button-text);
-}
-
-.layer-button {
-  @include use-typography("body-small");
-
-  appearance: none;
-
-  flex: 1;
-  display: flex;
-  align-items: center;
-
-  border: none;
-  background: none;
-  color: inherit;
-}
-
-.layer-button--expanded {
-  & .layer-button-name {
-    color: var(--color-foreground-primary);
-  }
-}
-
-.layer-button-content {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-xs);
-}
-
-.layer-button-description {
-  padding: var(--sp-xs);
-  background-color: var(--color-background-tertiary);
-  border-radius: $br-6;
-}

frontend/src/app/main/ui/exports/files.cljs

@@ -121,7 +121,7 @@
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
        [:h2 {:class (stl/css :modal-title)}
-        (tr "dashboard.export.title")]
+        (tr "files-download-modal.title")]
        [:button {:class (stl/css :modal-close-btn)
                  :on-click on-cancel} deprecated-icon/close]]
 
@@ -129,8 +129,8 @@
         (= status :prepare)
         [:*
          [:div {:class (stl/css :modal-content)}
-          [:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")]
-          [:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")]
+          [:p {:class (stl/css :modal-msg)} (tr "files-download-modal.description-1")]
+          [:p {:class (stl/css :modal-scd-msg)} (tr "files-download-modal.description-2")]
 
           (for [type fexp/valid-types]
             [:div {:class (stl/css :export-option true)
@@ -138,20 +138,20 @@
              [:label {:for (str "export-" type)
                       :class (stl/css-case :global/checked (= selected type))}
               ;; Execution time translation strings:
-              ;;   (tr "dashboard.export.options.all.message")
-              ;;   (tr "dashboard.export.options.all.title")
-              ;;   (tr "dashboard.export.options.detach.message")
-              ;;   (tr "dashboard.export.options.detach.title")
-              ;;   (tr "dashboard.export.options.merge.message")
-              ;;   (tr "dashboard.export.options.merge.title")
+              ;;   (tr "files-download-modal.options.all.message")
+              ;;   (tr "files-download-modal.options.all.title")
+              ;;   (tr "files-download-modal.options.detach.message")
+              ;;   (tr "files-download-modal.options.detach.title")
+              ;;   (tr "files-download-modal.options.merge.message")
+              ;;   (tr "files-download-modal.options.merge.title")
               [:span {:class (stl/css-case :global/checked (= selected type))}
                (when (= selected type)
                  deprecated-icon/status-tick)]
               [:div {:class (stl/css :option-content)}
                [:h3 {:class (stl/css :modal-subtitle)}
-                (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
+                (tr (dm/str "files-download-modal.options." (d/name type) ".title"))]
                [:p  {:class (stl/css :modal-msg)}
-                (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]
+                (tr (dm/str "files-download-modal.options." (d/name type) ".message"))]]
 
               [:input {:type "radio"
                        :class (stl/css :option-input)

frontend/src/app/main/ui/inspect/attributes.scss

@@ -12,14 +12,17 @@
   flex-direction: column;
   gap: var(--sp-l);
   width: 100%;
-  height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
+  max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
   padding-top: var(--sp-s);
+  padding-inline: var(--sp-m);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  background-color: var(--low-emphasis-background);
 }
 
 .workspace-element-options {
-  height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  max-height: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
   padding-inline: var(--sp-m);
+  background-color: var(--low-emphasis-background);
 }

frontend/src/app/main/ui/inspect/attributes/blur.cljs

@@ -24,7 +24,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.blur")
-         :class (stl/css :title-spacing-blur)}
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :blur-attr-title)}
         (when (= (count shapes) 1)
           [:> copy-button* {:data  (css/get-css-property objects (first shapes) :filter)
                             :class (stl/css :copy-btn-title)}])]

frontend/src/app/main/ui/inspect/attributes/blur.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-blur {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.blur-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .blur-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/fill.cljs

@@ -68,7 +68,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.fill")
-         :class (stl/css :title-spacing-fill)}]
+         :class (stl/css :title-wrapper)
+         :class-title (stl/css :fill-attr-title)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/inspect/attributes/fill.scss

@@ -5,16 +5,30 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-fill {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.fill-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .attributes-content {
   display: grid;
   gap: deprecated.$s-4;
 }
+
+.attributes-fill-block {
+  block-size: $sz-36;
+}

frontend/src/app/main/ui/inspect/attributes/geometry.cljs

@@ -44,7 +44,8 @@
   [:div {:class (stl/css :attributes-block)}
    [:> inspect-title-bar*
     {:title (tr "inspect.attributes.size")
-     :class (stl/css :title-spacing-geometry)}
+     :class (stl/css :title-wrapper)
+     :title-class (stl/css :geometry-attr-title)}
 
     (when (= (count shapes) 1)
       [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/inspect/attributes/geometry.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-geometry {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.geometry-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .geometry-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/layout.cljs

@@ -57,7 +57,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title "Layout"
-         :class (stl/css :title-spacing-layout)}
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :layout-attr-title)}
 
         (when (= (count shapes) 1)
           [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/inspect/attributes/layout.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-layout {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.layout-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .layout-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/layout_element.cljs

@@ -69,7 +69,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> title-bar* {:collapsable false
                        :title       menu-title
-                       :class       (stl/css :title-spacing-layout-element)}
+                       :class       (stl/css :title-wrapper)
+                       :title-class (stl/css :layout-element-attr-title)}
         (when (= (count shapes) 1)
           [:> copy-button* {:data  (css/get-shape-properties-css objects (first shapes) properties)
                             :class (stl/css :copy-btn-title)}])]

frontend/src/app/main/ui/inspect/attributes/layout_element.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-layout-element {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.layout-element-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .layout-element-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,6 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/shadow.cljs

@@ -63,7 +63,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.shadow")
-         :class (stl/css :title-spacing-shadow)}]
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :shadow-attr-title)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/inspect/attributes/shadow.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-shadow {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.shadow-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .shadow-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {

frontend/src/app/main/ui/inspect/attributes/stroke.cljs

@@ -88,7 +88,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.stroke")
-         :class (stl/css :title-spacing-stroke)}]
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :stroke-attr-title)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/inspect/attributes/stroke.scss

@@ -5,21 +5,34 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-stroke {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.stroke-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .attributes-stroke-block {
-  @include deprecated.flexColumn;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
 }
 
 .stroke-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -28,5 +41,5 @@
 
 .attributes-content {
   display: grid;
-  gap: deprecated.$s-4;
+  gap: var(--sp-xs);
 }

frontend/src/app/main/ui/inspect/attributes/svg.cljs

@@ -54,5 +54,6 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "workspace.sidebar.options.svg-attrs.title")
-         :class (stl/css :title-spacing-svg)}]
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :svg-attr-title)}]
        [:& svg-block {:shape shape}]])))

frontend/src/app/main/ui/inspect/attributes/svg.scss

@@ -5,17 +5,29 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-svg {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.svg-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .svg-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,12 +35,12 @@
 }
 
 .attributes-subtitle {
-  @include deprecated.uppercaseTitleTipography;
+  @include use-typography("headline-small");
   display: flex;
   justify-content: space-between;
-  height: deprecated.$s-32;
+  block-size: $sz-32;
   span {
-    height: deprecated.$s-32;
+    block-size: $sz-32;
     display: flex;
     align-items: center;
   }

frontend/src/app/main/ui/inspect/attributes/text.cljs

@@ -157,7 +157,8 @@
     [:div {:class (stl/css :attributes-block)}
      [:> inspect-title-bar*
       {:title (tr "inspect.attributes.typography")
-       :class (stl/css :title-spacing-text)}]
+       :class (stl/css :title-wrapper)
+       :title-class (stl/css :text-atrr-title)}]
 
      (for [shape shapes]
        [:& text-block {:shape shape

frontend/src/app/main/ui/inspect/attributes/text.scss

@@ -5,23 +5,37 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-text {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.text-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .attributes-content {
-  @include deprecated.flexColumn;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
 }
 
 .text-row {
   @extend .attr-row;
-  height: unset;
-  min-height: deprecated.$s-32;
+  block-size: unset;
+  min-block-size: $sz-36;
   :global(.attr-value) {
     align-items: center;
   }
@@ -32,20 +46,20 @@
 }
 
 .attributes-content-row {
-  max-width: deprecated.$s-240;
-  min-height: calc(deprecated.$s-2 + deprecated.$s-32);
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-1 solid var(--menu-border-color-disabled);
-  margin-top: deprecated.$s-4;
+  max-inline-size: px2rem(240);
+  min-block-size: px2rem(34);
+  border-radius: $br-8;
+  border: $b-1 solid var(--menu-border-color-disabled);
+  margin-block-start: var(--sp-xs);
   .content {
-    @include deprecated.bodySmallTypography;
+    @include use-typography("body-small");
     width: 100%;
-    padding: deprecated.$s-4 0;
+    padding: var(--sp-xs) 0;
     color: var(--color-foreground-secondary);
   }
 
   &:hover {
-    border: deprecated.$s-1 solid var(--color-background-tertiary);
+    border: $b-1 solid var(--color-background-tertiary);
     background-color: var(--menu-background-color);
     .content {
       color: var(--menu-foreground-color-hover);

frontend/src/app/main/ui/inspect/attributes/variant.cljs

@@ -42,7 +42,8 @@
     [:div {:class (stl/css :attributes-block)}
      [:> inspect-title-bar*
       {:title (if is-container? (tr "inspect.attributes.variants") (tr "inspect.attributes.variant"))
-       :class (stl/css :title-spacing-variant)}]
+       :class (stl/css :title-wrapper)
+       :title-class (stl/css :variant-attr-title)}]
 
      (for [[pos property] (map-indexed vector properties)]
        [:> variant-block* {:key (dm/str "variant-property-" pos) :name (:name property) :value (:value property)}])]))

frontend/src/app/main/ui/inspect/attributes/variant.scss

@@ -5,18 +5,29 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-variant {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.variant-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .variant-row {
   @extend .attr-row;
-  height: fit-content;
+  block-size: fit-content;
+  min-block-size: $sz-36;
 }
 
 .button-children {

frontend/src/app/main/ui/inspect/attributes/visibility.cljs

@@ -51,7 +51,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title "Visibility"
-         :class (stl/css :title-spacing-visibility)}
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :visibility-attr-title)}
 
         (when (= (count shapes) 1)
           [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/inspect/attributes/visibility.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-visibility {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.visibility-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .visibility-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -186,6 +186,7 @@
               [:> styles-tab* {:color-space color-space
                                :objects objects
                                :shapes shapes
+                               :from from
                                :libraries libraries
                                :file-id file-id}]
               :computed

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -24,10 +24,6 @@
   }
 }
 
-.viewer-code {
-  padding-inline-start: var(--sp-s);
-}
-
 .tool-windows {
   block-size: 100%;
   display: grid;

frontend/src/app/main/ui/inspect/styles.cljs

@@ -90,7 +90,7 @@
     :multiple))
 
 (mf/defc styles-tab*
-  [{:keys [color-space shapes libraries objects file-id]}]
+  [{:keys [color-space shapes libraries objects file-id from]}]
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
         first-component    (ctkl/get-component data (:component-id first-shape))
@@ -131,7 +131,8 @@
          (mf/deps shorthands*)
          (fn [shorthand]
            (swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
-    [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
+    [:ol {:class (stl/css-case :styles-tab true
+                               :styles-tab-workspace (= from :workspace)) :aria-label (tr "labels.styles")}
      ;;  TOKENS PANEL
      (when (or (seq active-themes) (seq active-sets))
        [:li

frontend/src/app/main/ui/inspect/styles.scss

@@ -7,5 +7,9 @@
 @use "ds/_utils.scss" as *;
 
 .styles-tab {
-  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  block-size: calc(100vh - px2rem(140)); // TODO: Fix this hardcoded value
+}
+
+.styles-tab-workspace {
+  block-size: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
 }

frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss

@@ -60,6 +60,7 @@
 }
 
 .property-detail-text {
+  @include use-typography("body-small");
   color: var(--detail-color);
 }
 

frontend/src/app/main/ui/inspect/styles/style_box.cljs

@@ -19,7 +19,7 @@
   (case type
     :variant    (tr "inspect.tabs.styles.variants-panel")
     :token      (tr "inspect.tabs.styles.token-panel")
-    :geometry   (tr "inspect.tabs.styles.geometry-panel")
+    :geometry   (tr "inspect.attributes.size")
     :fill       (tr "labels.fill")
     :stroke     (tr "labels.stroke")
     :text       (tr "labels.text")

frontend/src/app/main/ui/inspect/styles/style_box.scss

@@ -33,7 +33,6 @@
   display: flex;
   align-items: center;
   gap: var(--title-gap);
-  padding-block: var(--title-padding);
 }
 
 .disclosure-button {
@@ -52,4 +51,5 @@
   @include use-typography("headline-small");
   flex: 1;
   color: var(--title-color);
+  padding-block: var(--title-padding);
 }

frontend/src/app/main/ui/workspace/shapes/path/editor.cljs

@@ -148,11 +148,12 @@
         (mf/use-fn
          (mf/deps index prefix is-move)
          (fn [event]
-           (dom/stop-propagation event)
-           (dom/prevent-default event)
+           (when (dom/left-mouse? event)
+             (dom/stop-propagation event)
+             (dom/prevent-default event)
 
-           (when ^boolean is-move
-             (st/emit! (drp/start-move-handler index prefix)))))]
+             (when ^boolean is-move
+               (st/emit! (drp/start-move-handler index prefix))))))]
 
     [:g.handler {:pointer-events (if ^boolean is-draw "none" "visible")}
      [:line

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

@@ -54,7 +54,7 @@
         modifiers  (dm/get-in modifiers [shape-id :modifiers])
 
         shape      (gsh/transform-shape shape modifiers)
-        props      (mf/spread-props props {:shape shape :file-id file-id :page-id page-id})]
+        props      (mf/spread-props props {:shape shape :file-id file-id :page-id page-id :libraries libraries})]
 
     (case shape-type
       :frame   [:> frame/options* props]

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

@@ -44,39 +44,6 @@
         [(seq (array/sort! empty))
          (seq (array/sort! filled))]))))
 
-(mf/defc selected-set-info*
-  {::mf/private true}
-  [{:keys [tokens-lib selected-token-set-id]}]
-  (let [selected-token-set
-        (mf/with-memo [tokens-lib]
-          (when selected-token-set-id
-            (some-> tokens-lib (ctob/get-set selected-token-set-id))))
-
-        active-token-sets-names
-        (mf/with-memo [tokens-lib]
-          (some-> tokens-lib (ctob/get-active-themes-set-names)))
-
-        token-set-active?
-        (mf/use-fn
-         (mf/deps active-token-sets-names)
-         (fn [name]
-           (contains? active-token-sets-names name)))]
-    [:div {:class (stl/css :sets-header-container)}
-     [:> text* {:as "span"
-                :typography "headline-small"
-                :class (stl/css :sets-header)}
-      (tr "workspace.tokens.tokens-section-title" (ctob/get-name selected-token-set))]
-     [:div {:class (stl/css :sets-header-status) :title (tr "workspace.tokens.inactive-set-description")}
-        ;; NOTE: when no set in tokens-lib, the selected-token-set-id
-        ;; will be `nil`, so for properly hide the inactive message we
-        ;; check that at least `selected-token-set-id` has a value
-      (when (and (some? selected-token-set-id)
-                 (not (token-set-active? (ctob/get-name selected-token-set))))
-        [:*
-         [:> icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}]
-         [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)}
-          (tr "workspace.tokens.inactive-set")]])]]))
-
 (mf/defc tokens-section*
   {::mf/private true}
   [{:keys [tokens-lib active-tokens resolved-active-tokens]}]
@@ -98,7 +65,9 @@
         selected-token-set-id
         (mf/deref refs/selected-token-set-id)
 
-
+        selected-token-set
+        (when selected-token-set-id
+          (some-> tokens-lib (ctob/get-set selected-token-set-id)))
 
         ;; If we have not selected any set explicitly we just
         ;; select the first one from the list of sets
@@ -123,9 +92,15 @@
                                   tokens)]
             (ctob/group-by-type tokens)))
 
+        active-token-sets-names
+        (mf/with-memo [tokens-lib]
+          (some-> tokens-lib (ctob/get-active-themes-set-names)))
 
-
-
+        token-set-active?
+        (mf/use-fn
+         (mf/deps active-token-sets-names)
+         (fn [name]
+           (contains? active-token-sets-names name)))
 
         [empty-group filled-group]
         (mf/with-memo [tokens-by-type]
@@ -143,27 +118,34 @@
 
     [:*
      [:& token-context-menu]
-
-     [:& selected-set-info* {:tokens-lib tokens-lib
-                             :selected-token-set-id selected-token-set-id}]
+     [:div {:class (stl/css :sets-header-container)}
+      [:> text* {:as "span" :typography "headline-small" :class (stl/css :sets-header)} (tr "workspace.tokens.tokens-section-title" (ctob/get-name selected-token-set))]
+      [:div {:class (stl/css :sets-header-status) :title (tr "workspace.tokens.inactive-set-description")}
+       ;; NOTE: when no set in tokens-lib, the selected-token-set-id
+       ;; will be `nil`, so for properly hide the inactive message we
+       ;; check that at least `selected-token-set-id` has a value
+       (when (and (some? selected-token-set-id)
+                  (not (token-set-active? (ctob/get-name selected-token-set))))
+         [:*
+          [:> icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}]
+          [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)}
+           (tr "workspace.tokens.inactive-set")]])]]
 
      (for [type filled-group]
        (let [tokens (get tokens-by-type type)]
          [:> token-group* {:key (name type)
-                           :tokens tokens
-                           :is-expanded (get open-status type false)
+                           :is-open (get open-status type false)
                            :type type
                            :selected-ids selected
                            :selected-shapes selected-shapes
                            :is-selected-inside-layout is-selected-inside-layout
                            :active-theme-tokens resolved-active-tokens
-                           :tokens-lib tokens-lib
-                           :selected-token-set-id selected-token-set-id}]))
+                           :tokens tokens}]))
 
      (for [type empty-group]
        [:> token-group* {:key (name type)
-                         :tokens []
                          :type type
                          :selected-shapes selected-shapes
-                         :is-selected-inside-layout is-selected-inside-layout
-                         :active-theme-tokens resolved-active-tokens}])]))
+                         :is-selected-inside-layout :is-selected-inside-layout
+                         :active-theme-tokens resolved-active-tokens
+                         :tokens []}])]))

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

@@ -349,6 +349,7 @@
   (let [form       (mf/use-ctx fc/context)
         input-name name
 
+
         error
         (get-in @form [:errors :value value-subfield index input-name])
 

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

@@ -35,8 +35,8 @@
         on-change
         (mf/use-fn
          (mf/deps input-name)
-         (fn [type]
-           (let [is-inner? (= type "inner")]
+         (fn [id]
+           (let [is-inner? (= id "inner")]
              (swap! form assoc-in [:data :value indexed-type index input-name] is-inner?))))
 
         props (mf/spread-props props {:default-selected (if value "inner" "drop")

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

@@ -76,7 +76,7 @@
   [token index prop value-subfield]
   (let [value (get-in token [:value value-subfield index prop])]
     (d/without-nils
-     {:type  (if (= prop :color) :color :number)
+     {:type  (if (= prop :color) :color :dimensions)
       :value value})))
 
 (mf/defc shadow-formset*
@@ -114,7 +114,7 @@
                                           :token inset-token
                                           :tokens tokens
                                           :index index
-                                          :value-subfield value-subfield
+                                          :indexed-type value-subfield
                                           :name :inset}]
       (when show-button
         [:> icon-button* {:variant "ghost"
@@ -269,13 +269,25 @@
 
      [:value
       [:map
-       [:shadow {:optinal true}
+       [:shadow {:optional true}
         [:vector
          [:map
           [:offset-x {:optional true} [:maybe :string]]
           [:offset-y {:optional true} [:maybe :string]]
-          [:blur {:optional true} [:maybe :string]]
-          [:spread {:optional true} [:maybe :string]]
+          [:blur {:optional true}
+           [:and
+            [:maybe :string]
+            [:fn {:error/fn #(tr "workspace.tokens.shadow-token-blur-value-error")}
+             (fn [blur]
+               (let [n (d/parse-double blur)]
+                 (or (nil? n) (not (< n 0)))))]]]
+          [:spread {:optional true}
+           [:and
+            [:maybe :string]
+            [:fn {:error/fn #(tr "workspace.tokens.shadow-token-spread-value-error")}
+             (fn [spread]
+               (let [n (d/parse-double spread)]
+                 (or (nil? n) (not (< n 0)))))]]]
           [:color {:optional true} [:maybe :string]]
           [:color-result {:optional true} ::sm/any]
           [:inset {:optional true} [:maybe :boolean]]]]]

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

@@ -8,9 +8,6 @@
 (ns app.main.ui.workspace.tokens.management.group
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.common.types.tokens-lib :as ctob]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
@@ -19,70 +16,51 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.layers.layer-button :refer [layer-button*]]
-   [app.main.ui.workspace.tokens.management.token-tree :refer [token-tree*]]
+   [app.main.ui.workspace.sidebar.assets.common :as cmm]
+   [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-
 (defn token-section-icon
   [type]
   (case type
-    :border-radius i/corner-radius
-    :color i/drop
-    :boolean i/boolean-difference
-    :font-family i/text-font-family
-    :font-size i/text-font-size
-    :letter-spacing i/text-letterspacing
-    :text-case i/text-mixed
-    :text-decoration i/text-underlined
-    :font-weight i/text-font-weight
-    :typography i/text-typography
-    :opacity i/percentage
-    :number i/number
-    :rotation i/rotation
-    :spacing i/padding-extended
-    :string i/text-mixed
-    :stroke-width i/stroke-size
-    :dimensions i/expand
-    :sizing i/expand
-    :shadow i/drop-shadow
+    :border-radius "corner-radius"
+    :color "drop"
+    :boolean "boolean-difference"
+    :font-family "text-font-family"
+    :font-size "text-font-size"
+    :letter-spacing "text-letterspacing"
+    :text-case "text-mixed"
+    :text-decoration "text-underlined"
+    :font-weight "text-font-weight"
+    :typography "text-typography"
+    :opacity "percentage"
+    :number "number"
+    :rotation "rotation"
+    :spacing "padding-extended"
+    :string "text-mixed"
+    :stroke-width "stroke-size"
+    :dimensions "expand"
+    :sizing "expand"
+    :shadow "drop-shadow"
     "add"))
 
-(def ^:private schema:token-group
-  [:map
-   [:type :keyword]
-   [:tokens :any]
-   [:selected-shapes :any]
-   [:is-selected-inside-layout {:optional true} [:maybe :boolean]]
-   [:active-theme-tokens {:optional true} :any]
-   [:selected-token-set-id {:optional true} :any]
-   [:tokens-lib {:optional true} :any]
-   [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
-
 (mf/defc token-group*
-  {::mf/schema schema:token-group}
-  [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib is-expanded selected-ids]}]
+  {::mf/private true}
+  [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens is-open selected-ids]}]
   (let [{:keys [modal title]}
         (get dwta/token-properties type)
         editing-ref  (mf/deref refs/workspace-editor-state)
         not-editing? (empty? editing-ref)
 
-        is-expanded (d/nilv is-expanded false)
-
         can-edit?
         (mf/use-ctx ctx/can-edit?)
 
-        is-selected-inside-layout (d/nilv is-selected-inside-layout false)
-
         tokens
         (mf/with-memo [tokens]
           (vec (sort-by :name tokens)))
 
-        expandable? (d/nilv (seq tokens) false)
-
         on-context-menu
         (mf/use-fn
          (fn [event token]
@@ -95,8 +73,8 @@
 
         on-toggle-open-click
         (mf/use-fn
-         (mf/deps is-expanded type)
-         #(st/emit! (dwtl/set-token-type-section-open type (not is-expanded))))
+         (mf/deps is-open type)
+         #(st/emit! (dwtl/set-token-type-section-open type (not is-open))))
 
         on-popover-open-click
         (mf/use-fn
@@ -118,36 +96,33 @@
         (mf/use-fn
          (mf/deps not-editing? selected-ids)
          (fn [event token]
-           (let [token (ctob/get-token tokens-lib selected-token-set-id (:id token))]
-             (dom/stop-propagation event)
-             (when (and not-editing? (seq selected-shapes) (not= (:type token) :number))
-               (st/emit! (dwta/toggle-token {:token token
-                                             :shape-ids selected-ids}))))))]
+           (dom/stop-propagation event)
+           (when (and not-editing? (seq selected-shapes) (not= (:type token) :number))
+             (st/emit! (dwta/toggle-token {:token token
+                                           :shape-ids selected-ids})))))]
 
-    [:div {:class (stl/css :token-section-wrapper)
-           :data-testid (dm/str "section-" (name type))}
-     [:> layer-button* {:label title
-                        :expanded is-expanded
-                        :description (when expandable? (dm/str (count tokens)))
-                        :is-expandable expandable?
-                        :aria-expanded is-expanded
-                        :aria-controls (dm/str "token-tree-" (name type))
-                        :on-toggle-expand on-toggle-open-click
-                        :icon (token-section-icon type)}
-      (when can-edit?
-        [:> icon-button* {:id (str "add-token-button-" title)
-                          :icon "add"
-                          :aria-label (tr "workspace.tokens.add-token" title)
-                          :variant "ghost"
-                          :on-click on-popover-open-click
-                          :class (stl/css :token-section-icon)}])]
-     (when is-expanded
-       [:> token-tree* {:tokens tokens
-                        :id (dm/str "token-tree-" (name type))
-                        :tokens-lib tokens-lib
-                        :selected-shapes selected-shapes
-                        :active-theme-tokens active-theme-tokens
-                        :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}])]))
+    [:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
+     [:> cmm/asset-section* {:icon (token-section-icon type)
+                             :title title
+                             :section :tokens
+                             :assets-count (count tokens)
+                             :is-open is-open}
+      [:> cmm/asset-section-block* {:role :title-button}
+       (when can-edit?
+         [:> icon-button* {:on-click on-popover-open-click
+                           :variant "ghost"
+                           :icon i/add
+                           :id (str "add-token-button-" title)
+                           :aria-label (tr "workspace.tokens.add-token" title)}])]
+      (when is-open
+        [:> cmm/asset-section-block* {:role :content}
+         [:div {:class (stl/css :token-pills-wrapper)}
+          (for [token tokens]
+            [:> token-pill*
+             {:key (:name token)
+              :token token
+              :selected-shapes selected-shapes
+              :is-selected-inside-layout is-selected-inside-layout
+              :active-theme-tokens active-theme-tokens
+              :on-click on-token-pill-click
+              :on-context-menu on-context-menu}])]])]]))

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

@@ -0,0 +1,11 @@
+// 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
+
+.token-pills-wrapper {
+  display: flex;
+  gap: var(--sp-xs);
+  flex-wrap: wrap;
+}

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

@@ -307,9 +307,10 @@
          :class (stl/css :token-pill-icon)}])
 
      (if contains-path?
-       (let [[_ last-part] (cpn/split-by-last-period name)]
+       (let [[first-part last-part] (cpn/split-by-last-period name)]
          [:span {:class (stl/css :divided-name-wrapper)
                  :aria-label name}
+          [:span {:class (stl/css :first-name-wrapper)} first-part]
           [:span {:class (stl/css :last-name-wrapper)} last-part]])
        [:span {:class (stl/css :name-wrapper)
                :aria-label name}

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

@@ -1,110 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.management.token-tree
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.path-names :as cpn]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.ui.ds.layers.layer-button :refer [layer-button*]]
-   [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:folder-node
-  [:map
-   [:node :any]
-   [:selected-shapes :any]
-   [:is-selected-inside-layout {:optional true} :boolean]
-   [:active-theme-tokens {:optional true} :any]
-   [:selected-token-set-id {:optional true} :any]
-   [:tokens-lib {:optional true} :any]
-   [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
-
-(mf/defc folder-node*
-  {::mf/schema schema:folder-node}
-  [{:keys [node selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib on-token-pill-click on-context-menu]}]
-  (let [expanded* (mf/use-state false)
-        expanded (deref expanded*)
-        swap-folder-expanded #(swap! expanded* not)]
-    [:li {:class (stl/css :folder-node)}
-     [:> layer-button* {:label (:name node)
-                        :expanded expanded
-                        :aria-expanded expanded
-                        :aria-controls (str "folder-children-" (:path node))
-                        :is-expandable (not (:leaf node))
-                        :on-toggle-expand swap-folder-expanded}]
-     (when expanded
-       (let [children-fn (:children-fn node)]
-         [:div {:class (stl/css :folder-children-wrapper)
-                :id (str "folder-children-" (:path node))}
-          (when children-fn
-            (let [children (children-fn)]
-              (for [child children]
-                (if (not (:leaf child))
-                  [:ul {:class (stl/css :node-parent)}
-                   [:> folder-node* {:key (:path child)
-                                     :node child
-                                     :selected-shapes selected-shapes
-                                     :is-selected-inside-layout is-selected-inside-layout
-                                     :active-theme-tokens active-theme-tokens
-                                     :on-token-pill-click on-token-pill-click
-                                     :on-context-menu on-context-menu
-                                     :tokens-lib tokens-lib
-                                     :selected-token-set-id selected-token-set-id}]]
-                  (let [id (:id (:leaf child))
-                        token (ctob/get-token tokens-lib selected-token-set-id id)]
-                    [:> token-pill*
-                     {:key id
-                      :token token
-                      :selected-shapes selected-shapes
-                      :is-selected-inside-layout is-selected-inside-layout
-                      :active-theme-tokens active-theme-tokens
-                      :on-click on-token-pill-click
-                      :on-context-menu on-context-menu}])))))]))]))
-
-(def ^:private schema:token-tree
-  [:map
-   [:tokens :any]
-   [:selected-shapes :any]
-   [:is-selected-inside-layout {:optional true} :boolean]
-   [:active-theme-tokens {:optional true} :any]
-   [:selected-token-set-id {:optional true} :any]
-   [:tokens-lib {:optional true} :any]
-   [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
-
-(mf/defc token-tree*
-  {::mf/schema schema:token-tree}
-  [{:keys [tokens selected-shapes is-selected-inside-layout active-theme-tokens tokens-lib selected-token-set-id on-token-pill-click on-context-menu]}]
-  (let [separator "."
-        tree (mf/use-memo
-              (mf/deps tokens)
-              (fn []
-                (cpn/build-tree-root tokens separator)))]
-    [:div {:class (stl/css :token-tree-wrapper)}
-     (for [node tree]
-       [:ul {:class (stl/css :node-parent)
-             :key (:path node)
-             :style {:--node-depth (inc (:depth node))}}
-        (if (:leaf node)
-          (let [token (ctob/get-token tokens-lib selected-token-set-id (get-in node [:leaf :id]))]
-            [:> token-pill*
-             {:token token
-              :selected-shapes selected-shapes
-              :is-selected-inside-layout is-selected-inside-layout
-              :active-theme-tokens active-theme-tokens
-              :on-click on-token-pill-click
-              :on-context-menu on-context-menu}])
-          ;; Render segment folder
-          [:> folder-node* {:node node
-                            :selected-shapes selected-shapes
-                            :is-selected-inside-layout is-selected-inside-layout
-                            :active-theme-tokens active-theme-tokens
-                            :on-token-pill-click on-token-pill-click
-                            :on-context-menu on-context-menu
-                            :tokens-lib tokens-lib
-                            :selected-token-set-id selected-token-set-id}])])]))

frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss

@@ -1,39 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "ds/_borders.scss" as *;
-
-.token-tree-wrapper {
-  padding-block-end: var(--sp-s);
-}
-
-.node-parent {
-  --node-spacing: var(--sp-l);
-  --node-depth: 0;
-
-  margin-block-end: 0;
-  padding-inline-start: calc(var(--node-spacing) * var(--node-depth));
-}
-
-.folder-children-wrapper:has(> button) {
-  margin-inline-start: var(--sp-s);
-  padding-inline-start: var(--sp-s);
-  border-inline-start: $b-2 solid var(--color-background-quaternary);
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: var(--sp-xs);
-
-  & .node-parent {
-    flex: 1 0 100%;
-
-    &:last-of-type {
-      margin-block-end: var(--sp-s);
-    }
-  }
-  & .token-pill {
-    flex: 0 0 auto;
-  }
-}

frontend/src/app/util/code_gen/style_css_formats.cljs

@@ -199,7 +199,7 @@
       :string-or-size-array (format-string-or-size-array value)
       :keyword (format-keyword value)
       :tracks (format-tracks value)
-      :shadow (format-shadow value options)
+      :shadows (format-shadow value options)
       :blur (format-blur value)
       :matrix (format-matrix value)
       (if (keyword? value) (d/name value) value))))

frontend/src/app/util/forms.cljs

@@ -47,17 +47,18 @@
   [acc {:keys [schema in value type] :as problem}]
   (let [props  (m/properties schema)
         tprops (m/type-properties schema)
-        field  (or (first in)
-                   (:error/field props))
-
+        field  (or (:error/field props)
+                   in)
         field  (if (vector? field)
                  field
                  [field])]
 
-    (if (contains? acc field)
+    (if (and (= 1 (count field))
+             (contains? acc (first field)))
       acc
       (cond
-        (nil? field)
+        (or (nil? field)
+            (empty? field))
         acc
 
         (or (= type :malli.core/missing-key)

frontend/text-editor/README.md

@@ -37,7 +37,7 @@ This command is going to search for the file located in `frontend/src/app/main/u
 
 ## How it works?
 
-The text editor divides the content in three elements: `root`, `paragraph` and `inline`. An `inline` in terms of content is a styled element that it is displayed in a line inside a block and an `inline` only can have one child (a Text node). A `paragraph` is a **block** element that can contain multiple `inline`s (**inline** elements).
+The text editor divides the content in three elements: `root`, `paragraph` and `textSpan`. In terms of content, a `textSpan` is a styled element displayed on a line within a block. A `textSpan` can only have one child (a Text node). A `paragraph` is a **block** element that can contain multiple `textSpan`s (**textSpan** elements).
 
 ```html
 <div data-itype="root">
@@ -53,10 +53,10 @@ This way we only need to deal with a structure like this, where circular nodes a
 ```mermaid
 flowchart TB
   root((root)) --> paragraph((paragraph))
-  paragraph --> inline_1((inline))
-  paragraph --> inline_2((inline))
-  inline_1 --> text_1[Hello, ]
-  inline_2 --> text_2[World!]
+  paragraph --> text_span_1((textSpan))
+  paragraph --> text_span_2((textSpan))
+  text_span_1 --> text_1[Hello, ]
+  text_span_2 --> text_2[World!]
 ```
 
 This is compatible with the way Penpot stores text content.
@@ -68,6 +68,26 @@ flowchart TB
   paragraph --> text((text))
 ```
 
+## How the TextEditor works?
+
+```mermaid
+flowchart TB
+  TextEditor -->|handles `selectionchange` events| SelectionController
+  TextEditor -->|handles how the editor dispatches changes| ChangeController
+```
+
+The `TextEditor` contains a series of references to DOM elements, one of them is a `contenteditable` element that keeps the sub-elements explained before (root, paragraphs and textspans).
+
+`SelectionController` listens to the `document` event called `selectionchange`. This event is triggered everytime the focus/selection of the browser changes.
+
+`ChangeController` is called by the `TextEditor` instance everytime a change is performed on the content of the `contenteditable` element.
+
+### Events
+
+- `change`: This event is dispatched every time a change is made in the editor. All changes are debounced to prevent dispatching too many change events. This event is also dispatched when there are pending change events and the user blurs the textarea element.
+
+- `stylechange`: This event is dispatched every time the `currentStyle` changes. This normally happens when the user changes the caret position or the selection and the `currentStyle` is re-computed.
+
 ## How the code is organized?
 
 - `editor`: contains everything related to the TextEditor. Where `TextEditor.js` is the main file where all the basic code of the editor is handled. This has been designed so that in the future, when the Web Components API is more stable and has features such as handling selection events within shadow roots we will be able to update this class with little effort.

frontend/translations/ar.po

@@ -392,7 +392,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "تحميل %s ملفات أساسية (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* ربما يحتوي على مكوّنات، رسوميات والوان و/أو خطوط."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -403,30 +403,30 @@ msgstr ""
 
 #: src/app/main/ui/exports/files.cljs:164
 #, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "سيتم ادراج الملفات التي لها مكتبات مشتركة في التصدير، مع الحفاظ على روابطهم."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "صدّر المكتبات المشتركة"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "لن يتم تضمين المكتبات المشتركة في التصدير ولن يتم إضافة أي أصول إلى "
 "المكتبة. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "عامل أصول المكتبة المشتركة كعناصر بسيطة"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr "سيتم تصدير ملفك مع دمج جميع الأصول الخارجية في مكتبة الملفات."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "تضمين أصول المكتبة المشتركة في مكتبات الملفات"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/ca.po

@@ -380,7 +380,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Baixa %s fitxers estàndard (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Pot incloure components, gràfics, colors i/o tipografies."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -390,33 +390,33 @@ msgstr ""
 "voleu fer amb els seus recursos*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Els fitxers amb biblioteques compartides s’inclouran a l’exportació, "
 "mantenint la vinculació."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Exporta les biblioteques compartides"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Les biblioteques compartides no s'inclouran en l'exportació i no s'afegiran "
 "recursos a la biblioteca. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Tracta els recursos de la biblioteca compartida com a objectes bàsics"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "El fitxer s'exportarà amb tots els recursos externs fusionats a la "
 "biblioteca de fitxers."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr ""
 "Inclou els recursos de la biblioteca compartida a les biblioteques del "
 "fitxer"

frontend/translations/cs.po

@@ -530,7 +530,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Stáhnout %s soubory (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Může obsahovat komponenty, grafiku, barvy a/nebo typografii."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -540,33 +540,33 @@ msgstr ""
 "Co chcete dělat s jejich položkami*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Soubory se sdílenými knihovnami budou zahrnuty do exportu, čímž se zachová "
 "jejich propojení."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Exportovat sdílené knihovny"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Sdílené knihovny nebudou zahrnuty do exportu a do knihovny nebudou přidány "
 "žádné položky. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Zacházet s položkami sdílené knihovny jako se základními objekty"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Váš soubor bude exportován se všemi externími položkami sloučenými do "
 "knihovny souborů."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Zahrnout sdílené položky knihovny do knihoven souborů"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -6456,10 +6456,6 @@ msgstr "Nástroje"
 msgid "workspace.tokens.value-not-valid"
 msgstr "Hodnota není platná"
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "Přejmenováním tohoto tokenu se přeruší jakýkoli odkaz na jeho starý název."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Položky"

frontend/translations/de.po

@@ -573,7 +573,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "%s Standarddateien herunterladen (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* kann Komponenten, Grafiken, Farben und/oder Textstile enthalten."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -585,33 +585,33 @@ msgstr ""
 
 #: src/app/main/ui/exports/files.cljs:164
 #, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Dateien mit geteilten Bibliotheken werden exportiert, und ihre Verknüpfungen "
 "bleiben erhalten."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Geteilte Bibliotheken exportieren"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Geteilte Bibliotheken werden nicht exportiert und der Bibliothek werden "
 "keine Assets hinzugefügt. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Assets aus geteilten Bibliotheken als gewöhnliche Objekte behandeln"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Ihre Datei wird exportiert, und alle externen Assets werden der "
 "Dateibibliothek hinzugefügt."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Assets aus geteilten Bibliotheken in die Dateibibliothek aufnehmen"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -7175,12 +7175,6 @@ msgstr "Der Wert ist nicht gültig"
 msgid "workspace.tokens.value-with-percent"
 msgstr "Ungültiger Wert: % ist nicht zulässig."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr ""
-"Die Umbenennung dieses Tokens macht jeden Verweis auf seinen alten Namen "
-"kaputt."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Assets"

frontend/translations/en.po

@@ -564,48 +564,48 @@ msgid "dashboard.export-standard-multi"
 msgstr "Download %s standard files (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Might include components, graphics, colors and/or typographies."
 
 #: src/app/main/ui/exports/files.cljs:155
 msgid "dashboard.export.explain"
 msgstr ""
-"One or more files that you want to export are using shared libraries. What "
+"One or more files that you want to download are using shared libraries. What "
 "do you want to do with their assets*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Files with shared libraries will be included in the export, maintaining "
 "their linkage."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Export shared libraries"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Shared libraries will not be included in the export and no assets will be "
 "added to the library. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Treat shared library assets as basic objects"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Your file will be exported with all external assets merged into the file "
 "library."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Include shared library assets in file libraries"
 
 #: src/app/main/ui/exports/files.cljs:147
-msgid "dashboard.export.title"
-msgstr "Export files"
+msgid "files-download-modal.title"
+msgstr "Download files"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:317
 msgid "dashboard.fonts.deleted-placeholder"
@@ -7543,6 +7543,42 @@ msgstr "Color"
 msgid "workspace.tokens.composite-line-height-needs-font-size"
 msgstr "Line Height depends on Font Size. Add a Font Size to get the resolved value."
 
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remap-token-references"
+msgstr "Remap Token References"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.renaming-token-from-to"
+msgstr "Renaming token from '%s' to '%s'"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.references-found"
+msgstr "%s references found in your design"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remap-explanation"
+msgstr "All references to this token will be automatically updated to use the new name."
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.no-references-found"
+msgstr "No references found"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.no-remap-needed"
+msgstr "This token is not currently used in your design, so no remapping is needed."
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remapping-in-progress"
+msgstr "Remapping token references..."
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remap-and-rename"
+msgstr "Remap & Rename"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.rename-only"
+msgstr "Rename"
+
 #: src/app/main/ui/workspace/tokens/themes/create_modal.cljs:78
 msgid "workspace.tokens.create-new-theme"
 msgstr "Create your first theme now."
@@ -8032,6 +8068,14 @@ msgstr "Name"
 msgid "workspace.tokens.token-name-duplication-validation-error"
 msgstr "A token already exists at the path: %s"
 
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-blur-value-error"
+msgstr "Blur value cannot be negative"
+
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-spread-value-error"
+msgstr "Spread value cannot be negative"
+
 #: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:42, src/app/main/ui/workspace/tokens/management/create/form.cljs:68
 msgid "workspace.tokens.token-name-length-validation-error"
 msgstr "Name should be at least 1 character"
@@ -8076,7 +8120,7 @@ msgstr "Type '%s' is not supported (%s)\n"
 msgid "workspace.tokens.use-reference"
 msgstr "Use a reference"
 
-#: src/app/main/ui/workspace/tokens/management/token_pill.cljs:131
+#: src/app/main/ui/workspace/tokens/management/token_pill.cljs:133
 msgid "workspace.tokens.value-not-valid"
 msgstr "The value is not valid"
 
@@ -8088,10 +8132,6 @@ msgstr "Invalid value: % is not allowed."
 msgid "workspace.tokens.value-with-units"
 msgstr "Invalid value: Units are not allowed."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "Renaming this token will break any reference to its old name."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Assets"
@@ -8449,6 +8489,9 @@ msgstr "Restore project"
 msgid "dashboard.delete-project-button"
 msgstr "Delete project"
 
+msgid "dashboard.trash-info-text-no-projects"
+msgstr "Your trash is empty. Deleted files and projects will appear here."
+
 msgid "dashboard.trash-info-text-part1"
 msgstr "Deleted files will remain in the trash for"
 

frontend/translations/es.po

@@ -573,48 +573,48 @@ msgid "dashboard.export-standard-multi"
 msgstr "Descargar %s archivos estándar (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Pueden incluir components, gráficos, colores y/o tipografias."
 
 #: src/app/main/ui/exports/files.cljs:155
 msgid "dashboard.export.explain"
 msgstr ""
-"Uno o mas ficheros que quieres exportar usan librerias compartidas. ¿Qué "
+"Uno o mas ficheros que quieres descargar usan librerias compartidas. ¿Qué "
 "quieres hacer con los recursos*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Ficheros con librerias compartidas se inclurán en el paquete de exportación "
 "y mantendrán los enlaces."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Exportar librerias compartidas"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Las biblioteca compartidas no se incluirán en la exportación y ningún "
 "recurso será incluido en la biblioteca. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Usar los recursos como objetos básicos"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Tu fichero será exportado con todos los recursos dentro de la libreria del "
 "propio fichero."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Incluir librerias compartidas dentro de las librerias del fichero"
 
 #: src/app/main/ui/exports/files.cljs:147
-msgid "dashboard.export.title"
-msgstr "Exportar ficheros"
+msgid "files-download-modal.title"
+msgstr "Descargar ficheros"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:317
 msgid "dashboard.fonts.deleted-placeholder"
@@ -4420,6 +4420,42 @@ msgstr "Mostrar/ocultar recursos"
 msgid "shortcuts.toggle-colorpalette"
 msgstr "Mostrar/ocultar paleta de colores"
 
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remap-token-references"
+msgstr "Actualizar referencias de token"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.renaming-token-from-to"
+msgstr "Renombrando el token de '%s' a '%s'"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.references-found"
+msgstr "%s referencias encontradas en tu diseño"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remap-explanation"
+msgstr "Todas las referencias a este token se actualizarán automáticamente para usar el nuevo nombre."
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.no-references-found"
+msgstr "No se encontraron referencias"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.no-remap-needed"
+msgstr "Este token no se utiliza actualmente en tu diseño, por lo que no es necesario actualizar referencias."
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remapping-in-progress"
+msgstr "Actualizando referencias de token..."
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.remap-and-rename"
+msgstr "Actualizar referencias y renombrar"
+
+#: src/app/main/ui/workspace/tokens/remapping_modal.cljs
+msgid "workspace.tokens.rename-only"
+msgstr "Renombrar"
+
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:185
 msgid "shortcuts.toggle-focus-mode"
 msgstr "Mostrar/ocultar focus mode"
@@ -7908,6 +7944,14 @@ msgstr "Nombre"
 msgid "workspace.tokens.token-name-duplication-validation-error"
 msgstr "Ya existe un token en la ruta: %s"
 
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-blur-value-error"
+msgstr "El valor de blur no puede ser negativo"
+
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-spread-value-error"
+msgstr "El valor de spread no puede ser negativo"
+
 #: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:42, src/app/main/ui/workspace/tokens/management/create/form.cljs:68
 msgid "workspace.tokens.token-name-length-validation-error"
 msgstr "El nombre debería ser de al menos 1 caracter"
@@ -7958,10 +8002,6 @@ msgstr "El valor no es válido"
 msgid "workspace.tokens.value-with-units"
 msgstr "Valor no válido: No se permiten unidades."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "Al renombrar este token se romperán las referencias al nombre anterior"
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Recursos"
@@ -8302,6 +8342,9 @@ msgstr "Restaurar proyecto"
 msgid "dashboard.delete-project-button"
 msgstr "Eliminar proyecto"
 
+msgid "dashboard.trash-info-text-no-projects"
+msgstr "Tu papelera está vacía. Los archivos y proyectos eliminados aparecerán aquí."
+
 msgid "dashboard.trash-info-text-part1"
 msgstr "Los archivos eliminados permanecerán en la papelera durante"
 
@@ -8314,9 +8357,6 @@ msgstr "Después de eso, serán eliminados permanentemente."
 msgid "dashboard.trash-info-text-part4"
 msgstr "Si cambias de opinión, puedes restaurarlos o eliminarlos permanentemente desde el menú de cada archivo."
 
-msgid "dashboard.deleted.delete-forever"
-msgstr "Eliminar para siempre"
-
 msgid "dashboard.restore-all-confirmation.title"
 msgstr "Restaurar todos los proyectos y archivos"
 
@@ -8365,9 +8405,6 @@ msgstr "Hubo un error al restaurar los archivos."
 msgid "dashboard.errors.error-on-restore-file"
 msgstr "Hubo un error al restaurar el archivo %s."
 
-msgid "dashboard.errors.error-on-restoring-files"
-msgstr "Hubo un error al restaurar archivos."
-
 msgid "dashboard.errors.error-on-delete-files"
 msgstr "Hubo un error al eliminar archivos."
 

frontend/translations/es_419.po

@@ -444,7 +444,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Descargar %s archivos estándar (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Puede incluir componentes, gráficos, colores y/o tipografías."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -455,33 +455,33 @@ msgstr ""
 
 #: src/app/main/ui/exports/files.cljs:164
 #, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Los archivos con bibliotecas compartidas se incluirán en la exportación, "
 "manteniendo su vinculación."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Exportar bibliotecas compartidas"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Las bibliotecas compartidas no se incluirán en la exportación y no se "
 "agregarán activos a la biblioteca. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Trate los activos de biblioteca compartidos como objetos básicos"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Su archivo se exportará con todos los activos externos combinados en la "
 "biblioteca de archivos."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Incluir recursos de biblioteca compartidos en bibliotecas de archivos"
 
 #: src/app/main/ui/dashboard/import.cljs:131

frontend/translations/eu.po

@@ -358,7 +358,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Deskargatu %s fitxategi estandar (.svn + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Osagaiak, grafikoak, koloreak edo/eta tipografiak izan ditzakete."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -368,31 +368,31 @@ msgstr ""
 "darabiltzate. Zer egin nahi duzu baliabideekin*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Partekatutako liburutegiak dituzten fitxategiak esportazio paketean sartuko "
 "dira eta loturak mantenduko dituzte."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Esportatu partekatutako liburutegiak"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Partekatutako liburutegiak ez dira esportazioan sartuko eta baliabide bat "
 "ere ez da liburutegian sartuko. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Erabili baliabideak oinarrizko objektu bezala"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr "Zure fitxategia baliabide guztiak bere baitan dituela esportatuko da."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Sartu partekatutako liburutegiak fitxategiaren liburutegietan"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/fa.po

@@ -491,7 +491,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "دانلود %s عدد فایل های استاندارد (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* ممکن است شامل کامپوننت‌ها، گرافیک، رنگ‌ها و/یا تایپوگرافی باشد."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -502,33 +502,33 @@ msgstr ""
 
 #: src/app/main/ui/exports/files.cljs:164
 #, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "فایل‌های دارای کتابخانه‌های مشترک در اکسپورت گنجانده می‌شوند و پیوند خود را حفظ "
 "می‌کنند."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "اکسپورت کتابخانه‌های مشترک"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "کتابخانه‌های مشترک در صادرات گنجانده نخواهند شد و هیچ دارایی به کتابخانه "
 "اضافه نخواهد شد. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "دارایی‌های کتابخانه مشترک را به عنوان اشیاء اساسی در نظر بگیرید"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "فایل شما با تمام دارایی‌های خارجی که در کتابخانه فایل ادغام شده‌اند اکسپورت "
 "می‌شود."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "دارایی‌های کتابخانه مشترک را در کتابخانه‌های فایل قرار دهید"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/fo.po

@@ -381,7 +381,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Heinta %s standarafílur (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Útflyt deild søvn"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/fr.po

@@ -573,7 +573,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Télécharger %s fichiers standard (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr ""
 "* Peut inclure les composants, les éléments graphiques, les couleurs et/ou "
 "les polices de caractère."
@@ -586,35 +586,35 @@ msgstr ""
 
 #: src/app/main/ui/exports/files.cljs:164
 #, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Les fichiers avec des bibliothèques partagées seront inclus dans "
 "l'exportation, en maintenant leur liaison."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Exporter les bibliothèques partagées"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Les bibliothèques partagées ne seront pas incluses dans l'exportation et "
 "aucune ressource ne sera ajoutée à la bibliothèque. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr ""
 "Considérer les ressources des bibliothèques partagées comme des objets "
 "basiques"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Votre fichier sera exporté avec toutes les ressources externes fusionnées "
 "dans la bibliothèque de fichiers."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr ""
 "Inclure les ressources des bibliothèques partagées dans les bibliothèques "
 "de fichiers"
@@ -7893,10 +7893,6 @@ msgstr "Valeur non valide : % n'est pas autorisé."
 msgid "workspace.tokens.value-with-units"
 msgstr "Valeur non valide : les unités ne sont pas autorisées."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "Si vous renommez ce token, toute référence à son ancien nom sera incorrecte."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Ressources"

frontend/translations/gl.po

@@ -356,7 +356,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Descargar %s ficheiros estándar (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Pode incluir compoñentes, gráficos, cores e/ou fontes."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -366,33 +366,33 @@ msgstr ""
 "Que queres facer cos recursos?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Os ficheiros con bibliotecas compartidas incluiranse na exportación "
 "mantendo os vínculos."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Exportar bibliotecas compartidas"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "As bibliotecas compartidas non se incluirán na exportación e non se "
 "engadirán recursos á biblioteca. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Tratar os recursos da biblioteca compartida coma obxetos básicos"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "O teu ficheiro exportarase con todos os recursos externos metidos na "
 "biblioteca do ficheiro."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Incluir os recursos de bibliotecas compartidas na biblioteca do ficheiro"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/ha.po

@@ -421,7 +421,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Sauke %s cikakken kundi (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "*akwai sassan,hotuna,launuka,da/kozane-zane."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -429,29 +429,29 @@ msgid "dashboard.export.explain"
 msgstr "za ka iya fitar da kundi daya ko fiye ta hanyar tura taska. \"me \"*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr "Manhajar tura kundi ta kunshi fitarwa, tattali mahaxarsu."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "fitar da manhajar tura kundi"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr "manhajar tura kundi ba ta shiga cikin fitarwa, wani amfaniqarawa a taska. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "lura da bayanan da ke cikin manhajar tura kundi"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "za ka iya fitar da kundi tare da haxe muhimman abubuwa, na waje a "
 "kunditaskira."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "tura taska ya qunshi bayanan da ke cikin kundin taskoki"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/he.po

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"PO-Revision-Date: 2025-12-22 15:34+0000\n"
+"PO-Revision-Date: 2026-01-03 20:01+0000\n"
 "Last-Translator: Yaron Shahrabani <sh.yaron@gmail.com>\n"
 "Language-Team: Hebrew <https://hosted.weblate.org/projects/penpot/frontend/"
 "he/>\n"
@@ -554,7 +554,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "הורדת %s קבצים תקניים (‎.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* עשוי לכלול רכיבים, גרפיקה, צבעים ו/או טיפוגרפיות."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -564,28 +564,27 @@ msgstr ""
 "המשאבים שלהן*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-#, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr "קבצים עם ספריות משותפות יצורפו לייצוא, תוך שימור הקישוריות שלהם."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "ייצוא ספריות משותפות"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr "ספריות משותפות לא יצורפו לייצוא ואף משאב לא יתווסף לספריה. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "להתייחס למשאבים בספריות משותפות כעצמים בסיסיים"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr "הקובץ שלך ייוצא כשכל המשאבים החיצוניים ממוזגים לספריית הקבצים."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "לכלול משאבי ספריה משותפת בספריות הקבצים"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -1775,9 +1774,8 @@ msgid "inspect.empty.select"
 msgstr "ניתן לבחור צורה, לוח או קבוצה ולראות את המאפיינים והקוד שלהם"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:166
-#, fuzzy
 msgid "inspect.layer-info"
-msgstr "בחירת לשונית חקירה"
+msgstr "פרטי שכבה"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:137
 msgid "inspect.multiple-selected"
@@ -7810,10 +7808,6 @@ msgstr "ערך שגוי: אסור %."
 msgid "workspace.tokens.value-with-units"
 msgstr "ערך שגוי: אסור יחידות."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "שינוי שם האסימון הזה יפגע בכל הפניה לשם הישן שלו."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "משאבים"
@@ -8352,3 +8346,25 @@ msgstr "אורך השם חייב להיות תו אחד לפחות"
 #: src/app/main/data/workspace/tokens/errors.cljs:85
 msgid "workspace.tokens.invalid-text-decoration-token-value"
 msgstr "ערך אסימון שגוי: מותר רק none,‏ underline ו־strike-through"
+
+#: src/app/main/ui/inspect/right_sidebar.cljs:240
+msgid "inspect.empty.more"
+msgstr "פרטים נוספים"
+
+msgid "subscription.settings.management-dialog.step-2-description"
+msgstr ""
+"אפשר להוסיף את פרטי התשלום שלך היית כדי להשאיר את המינוי שלך פעיל ונטול "
+"תקלות גם אחרי תקופת הניסיון וגם כדי להמשיך לתמוך במיזם הקוד הפתוח שלנו. לא "
+"יתבצע שום חיוב עדיין."
+
+#: src/app/main/data/workspace/tokens/errors.cljs:93
+msgid "workspace.tokens.invalid-font-family-token-value"
+msgstr "ערך אסימון שגוי: אפשר להפנות לאסימון font-family (משפחת גופנים) בלבד"
+
+#: src/app/main/data/workspace/tokens/errors.cljs
+msgid "workspace.tokens.invalid-token-value-shadow"
+msgstr "ערך שגוי: יש להפנות לאסימון הצללה מורכבת."
+
+#: src/app/main/ui/workspace/tokens/management/create/form.cljs:775
+msgid "workspace.tokens.reference-composite-shadow"
+msgstr "נא למלא כינוי הצללת אסימון"

frontend/translations/hi.po

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"PO-Revision-Date: 2025-12-22 15:34+0000\n"
+"PO-Revision-Date: 2025-12-27 05:00+0000\n"
 "Last-Translator: VKing9 <vaibhavrathod2282@gmail.com>\n"
 "Language-Team: Hindi <https://hosted.weblate.org/projects/penpot/frontend/"
 "hi/>\n"
@@ -559,7 +559,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "%s मानक फ़ाइलें डाउनलोड करें (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* इसमें कॉम्पोनेंट्स, ग्राफिक्स, रंग और/या टाइपोग्राफ़ी शामिल हो सकते हैं।"
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -569,34 +569,33 @@ msgstr ""
 "लाइब्रेरीज़ का उपयोग कर रही हैं। आप उनके एसेट्स के साथ क्या करना चाहते हैं?"
 
 #: src/app/main/ui/exports/files.cljs:164
-#, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "साझा की गई लाइब्रेरीज़ वाली फ़ाइलें निर्यात में शामिल की जाएँगी, और उनका लिंक बनाए रखा "
 "जाएगा।"
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "साझा लाइब्रेरीज़ निर्यात करें"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "साझा की गई लाइब्रेरीज़ निर्यात में शामिल नहीं की जाएँगी और लाइब्रेरी में "
 "कोई एसेट्स नहीं जोड़े जाएँगे। "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "साझा की गई लाइब्रेरी के एसेट्स को बुनियादी ऑब्जेक्ट्स के रूप में मानें"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "आपकी फ़ाइल निर्यात की जाएगी और सभी बाहरी एसेट्स(assets) फ़ाइल लाइब्रेरी में "
 "विलय कर दिए जाएँगे।"
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "साझा की गई लाइब्रेरी के एसेट्स को फ़ाइल लाइब्रेरी में शामिल करें"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -7300,10 +7299,6 @@ msgstr "मान मान्य नहीं है"
 msgid "workspace.tokens.value-with-units"
 msgstr "अमान्य मान: इकाइयाँ अनुमति नहीं हैं।"
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "इस टोकन का नाम बदलने से इसके पुराने नाम के किसी भी संदर्भ टूट जाएंगे।"
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "एसेट्स"
@@ -7752,9 +7747,8 @@ msgid "inspect.color-space-label"
 msgstr "रंग स्थान चुनें"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:166
-#, fuzzy
 msgid "inspect.layer-info"
-msgstr "निरीक्षण टैब चुनें"
+msgstr "परत जानकारी"
 
 #: src/app/main/ui/inspect/styles/panels/tokens_panel.cljs:26
 msgid "inspect.tabs.styles.active-sets"
@@ -8444,3 +8438,19 @@ msgstr "यह संस्करण आपके द्वारा लॉक
 #, unused
 msgid "workspace.versions.tooltip.locked-version"
 msgstr "लॉक किया गया संस्करण - केवल निर्माता ही इसे संशोधित कर सकता है"
+
+#: src/app/main/ui/inspect/right_sidebar.cljs:240
+msgid "inspect.empty.more"
+msgstr "और जानकारी"
+
+#: src/app/main/data/workspace/tokens/errors.cljs:93
+msgid "workspace.tokens.invalid-font-family-token-value"
+msgstr "Invalid token value: आप केवल फ़ॉन्ट-परिवार token का संदर्भ ले सकते हैं"
+
+#: src/app/main/data/workspace/tokens/errors.cljs
+msgid "workspace.tokens.invalid-token-value-shadow"
+msgstr "अमान्य मूल्य: एक समग्र छाया टोकन का संदर्भ देना चाहिए।।"
+
+#: src/app/main/ui/workspace/tokens/management/create/form.cljs:775
+msgid "workspace.tokens.reference-composite-shadow"
+msgstr "एक token छाया आलिया दर्ज करें"

frontend/translations/hr.po

@@ -529,7 +529,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Preuzmi %s standardne datoteke (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Može uključivati komponente, grafike, boje i/ili tipografije."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -539,33 +539,33 @@ msgstr ""
 "Što želiš učiniti s njihovim stavkama*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Datoteke sa zajedničkim bibliotekama bit će uključene u izvoz, održavajući "
 "njihovu poveznicu."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Izvezi zajedničke biblioteke"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Zajedničke biblioteke neće biti uključene u izvoz i nikakve stavke neće "
 "biti dodani u biblioteku. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Tretiraj stavke zajedničke biblioteke kao osnovne objekte"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Tvoja će datoteka biti izvezena sa svim vanjskim stavkama spojenim u "
 "biblioteku datoteka."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Uključi stavke zajedničke biblioteke u biblioteke datoteka"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -6477,10 +6477,6 @@ msgstr "Alati"
 msgid "workspace.tokens.value-not-valid"
 msgstr "Vrijednost nije važeća"
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "Preimenovanje ovog tokena prekinut će sve reference na njegov stari naziv."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Stavke"

frontend/translations/id.po

@@ -562,7 +562,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Unduh %s berkas standar (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Dapat mencakup komponen, grafik, warna dan/atau tipografi."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -572,31 +572,31 @@ msgstr ""
 "Apa yang ingin Anda lakukan dengan asetnya*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr "Berkas dengan pustaka bersama akan dimasukkan dalam hasil ekspor."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Ekspor pustaka bersama"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Pustaka bersama tidak akan dimasukkan dalam hasil ekspor dan tidak ada aset "
 "yang akan ditambahkan ke pustaka. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Perlakukan aset pustaka terbagi sebagai objek dasar"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Berkas Anda akan diekspor dengan semua aset eksternal tergabung dalam "
 "pustaka berkas."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Termasuk aset pustaka terbagi dalam pustaka berkas"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -6855,10 +6855,6 @@ msgstr "Peralatan"
 msgid "workspace.tokens.value-not-valid"
 msgstr "Nilai tidak valid"
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr "Mengubah nama token ini akan merusak referensi nama lamanya."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Aset"

frontend/translations/ig.po

@@ -398,28 +398,28 @@ msgid "dashboard.export-standard-multi"
 msgstr "Buto %s ederede tozuru etozu (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Nwere Ike ịgụnye ngwa , esereese gasị, agwụgwara na/ma ọ bụ akara nkụpụta."
 
 #: src/app/main/ui/exports/files.cljs:164
 #, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "A ga-atinye ederede nwere ọba ederede nkekọrịta ma gụnyere mbupu  , ma "
 "jidekwa ụkpụrụ njikọ ha"
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Bupu ọba ederede nkekọrịta"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Agaghị a tinye ọba ederede nkekọrịta na mbupu ma o nweghị ihe nnwe a ga a "
 "tinye ọ a ederede . "
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Tinye ihe nnwe ọba ederede nkekọrịta n'ime ọ a ederede."
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/it.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
-"PO-Revision-Date: 2025-12-22 15:34+0000\n"
-"Last-Translator: Anonymous <noreply@weblate.org>\n"
+"PO-Revision-Date: 2025-12-31 22:01+0000\n"
+"Last-Translator: Nicola Bortoletto <nicola.bortoletto@live.com>\n"
 "Language-Team: Italian <https://hosted.weblate.org/projects/penpot/frontend/"
 "it/>\n"
 "Language: it\n"
@@ -570,7 +570,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Scarica %s file standard (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr ""
 "* Può includere componenti, elementi grafici, colori e/o elementi "
 "tipografici."
@@ -582,34 +582,33 @@ msgstr ""
 "cosa desideri fare con le loro risorse*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-#, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "I file con librerie condivise verranno inclusi nell'esportazione, mantenendo "
 "il loro collegamento."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Esporta le librerie condivise"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Le librerie condivise non saranno incluse nell'esportazione e nessuna "
 "risorsa verrà aggiunta alla libreria. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Considera le risorse delle librerie condivise come oggetti di base"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Il tuo file verrà esportato con tutte le risorse esterne riunite nella "
 "libreria dei file."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Includi le risorse delle librerie condivise nelle librerie del file"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -1832,7 +1831,6 @@ msgstr ""
 "loro proprietà e il loro codice"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:166
-#, fuzzy
 msgid "inspect.layer-info"
 msgstr "Informazioni livello"
 
@@ -7940,12 +7938,6 @@ msgstr "Valore non valido: % non è consentito."
 msgid "workspace.tokens.value-with-units"
 msgstr "Valore non valido: le unità non sono consentite."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr ""
-"Rinominare questo token interromperà qualsiasi riferimento al suo vecchio "
-"nome."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Risorse"
@@ -8506,3 +8498,13 @@ msgstr "Il nome deve essere di almeno 1 carattere"
 
 msgid "subscription.settings.management-dialog.step-2-skip-button"
 msgstr "Salta per ora e inizia la prova"
+
+#: src/app/main/ui/inspect/right_sidebar.cljs:240
+msgid "inspect.empty.more"
+msgstr "Maggiori informazioni"
+
+#: src/app/main/data/workspace/tokens/errors.cljs:93
+msgid "workspace.tokens.invalid-font-family-token-value"
+msgstr ""
+"Valore del token non valido: puoi fare riferimento solo a un token font-"
+"family"

frontend/translations/jpn_JP.po

@@ -299,7 +299,7 @@ msgid "dashboard.export-shapes.title"
 msgstr "エクスポートの選択"
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "共有ライブラリとしてエクスポート"
 
 #: src/app/main/ui/dashboard/fonts.cljs:206

frontend/translations/lt.po

@@ -334,7 +334,7 @@ msgid "dashboard.export-shapes.title"
 msgstr "Eksportuoti pažymėtą sritį"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Gali apimti komponentus, grafiką, spalvas ir (arba) tipografiją."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -344,35 +344,35 @@ msgstr ""
 "bendros bibliotekos. Ką norite daryti su jų komponentais*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Failai su bendromis bibliotekomis bus įtraukti į eksportą, išlaikant jų "
 "susiejimą."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Eksportuoti bendrai naudojamas bibliotekas"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Bendrai naudojamos bibliotekos nebus įtrauktos į eksportą ir į biblioteką "
 "nebus pridėta jokių išteklių. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr ""
 "Bendrai naudojamus bibliotekos komponentus traktuokite kaip pagrindinius "
 "objektus"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Jūsų failas bus eksportuotas su visais išoriniais komponentais, sujungtais "
 "į failų biblioteką."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Įtraukti bendrai naudojamus bibliotekos komponentus į failų bibliotekas"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/lv.po

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"PO-Revision-Date: 2025-11-25 16:51+0000\n"
+"PO-Revision-Date: 2025-12-29 14:34+0000\n"
 "Last-Translator: Edgars Andersons <Edgars+Weblate@gaitenis.id.lv>\n"
 "Language-Team: Latvian <https://hosted.weblate.org/projects/penpot/frontend/"
 "lv/>\n"
@@ -8,10 +8,9 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=3; plural="
-"(n % 10 == 0 || n % 100 >= 11 && n % 100 <= 19) ? 0 : "
-"((n % 10 == 1 && n % 100 != 11) ? 1 : 2);\n"
-"X-Generator: Weblate 5.15-dev\n"
+"Plural-Forms: nplurals=3; plural=(n % 10 == 0 || n % 100 >= 11 && n % 100 <= "
+"19) ? 0 : ((n % 10 == 1 && n % 100 != 11) ? 1 : 2);\n"
+"X-Generator: Weblate 5.15.1\n"
 
 #: src/app/main/ui/auth/register.cljs:215, src/app/main/ui/static.cljs:159, src/app/main/ui/viewer/login.cljs:100
 msgid "auth.already-have-account"
@@ -572,7 +571,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Lejupielādēt %s standarta datnes (. svg +. json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* var ietvert sastāvdaļas, attēlus, krāsas un/vai burtu stilus un veidus."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -582,33 +581,33 @@ msgstr ""
 "iesākt ar to līdzekļiem*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Izguvē tiks iekļautas datnes ar koplietojamām bibliotēkām, saglabājot to "
 "sasaisti."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Izgūt koplietojamās bibliotēkas"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Koplietojamās bibliotēkas netiks iekļautas izguvē, un bibliotēkai netiks "
 "pievienoti līdzekļi. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Attiekties pret koplietojamo bibliotēku līdzekļiem kā pret pamatobjektiem"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Datne tiks izgūta ar visiem ārējiem līdzekļiem, kas tiks apvienoti datnes "
 "bibliotēkā."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Iekļaut koplietojamos bibliotēkas līdzekļus datņu bibliotēkās"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -7582,12 +7581,6 @@ msgstr "Vērtība nav derīga"
 msgid "workspace.tokens.value-with-units"
 msgstr "Nederīga vērtība: mērvienības nav atļautas."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr ""
-"Šīs tekstvienības pārdēvēšana salauzīs visas atsauces uz tās iepriekšējo "
-"nosaukumu."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Līdzekļi"
@@ -7971,3 +7964,7 @@ msgstr "Pagaidām izlaist un uzsākt izmēģinājumu"
 
 msgid "subscription.settings.management-dialog.step-2-add-payment-button"
 msgstr "Pievienot maksājumu informāciju"
+
+#: src/app/main/ui/inspect/right_sidebar.cljs:240
+msgid "inspect.empty.more"
+msgstr "Vairāk informācijas"

frontend/translations/ml.po

@@ -226,7 +226,7 @@ msgid "dashboard.export-shapes"
 msgstr "എക്സ്പോർട്ട്"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* ഘടകങ്ങൾ, ഗ്രാഫിക്സ്, നിറങ്ങൾ അല്ലെങ്കിൽ മുദ്രണകലകൾ എന്നിവ ഉൾപ്പെടാം."
 
 #: src/app/main/ui/auth/recovery.cljs:32

frontend/translations/ms.po

@@ -426,7 +426,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "Muat turun %s fail standard (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Mungkin termasuk komponen, grafik, warna dan/atau tipografi."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -436,33 +436,33 @@ msgstr ""
 "kongsi. Apa yang anda mahu lakukan dengan aset mereka*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
 "Fail dengan perpustakaan kongsi akan disertakan dalam eksport, mengekalkan "
 "hubungannya."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Eksport perpustakaan kongsi"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Perpustakaan kongsi tidak akan disertakan dalam eksport dan tiada aset akan "
 "ditambahkan ke perpustakaan. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Anggap aset perpustakaan kongsi sebagai objek asas"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Fail anda akan dieksport dengan semua aset luaran digabungkan ke dalam "
 "pustaka fail."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Sertakan aset perpustakaan kongsi dalam pustaka fail"
 
 #: src/app/main/ui/exports/files.cljs:147

frontend/translations/nl.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
-"PO-Revision-Date: 2025-12-22 15:34+0000\n"
-"Last-Translator: Anonymous <noreply@weblate.org>\n"
+"PO-Revision-Date: 2025-12-23 17:00+0000\n"
+"Last-Translator: Stephan Paternotte <stephan@paternottes.net>\n"
 "Language-Team: Dutch <https://hosted.weblate.org/projects/penpot/frontend/"
 "nl/>\n"
 "Language: nl\n"
@@ -570,7 +570,7 @@ msgid "dashboard.export-standard-multi"
 msgstr "%s standaardbestanden downloaden (.svg + .json)"
 
 #: src/app/main/ui/exports/files.cljs:156
-msgid "dashboard.export.detail"
+msgid "files-download-modal.description-2"
 msgstr "* Kan componenten, afbeeldingen, kleuren en/of typografie bevatten."
 
 #: src/app/main/ui/exports/files.cljs:155
@@ -580,34 +580,33 @@ msgstr ""
 "bibliotheken. Wat wil je doen met hun assets*?"
 
 #: src/app/main/ui/exports/files.cljs:164
-#, fuzzy
-msgid "dashboard.export.options.all.message"
+msgid "files-download-modal.options.all.message"
 msgstr ""
-"Bestanden met gedeelde bibliotheken worden opgenomen in de export en hun "
-"koppelingen worden behouden."
+"Bestanden met gedeelde bibliotheken worden meegenomen in de export, incl. "
+"behoud van hun koppelingen."
 
 #: src/app/main/ui/exports/files.cljs:165
-msgid "dashboard.export.options.all.title"
+msgid "files-download-modal.options.all.title"
 msgstr "Gedeelde bibliotheken exporteren"
 
 #: src/app/main/ui/exports/files.cljs:166
-msgid "dashboard.export.options.detach.message"
+msgid "files-download-modal.options.detach.message"
 msgstr ""
 "Gedeelde bibliotheken worden niet opgenomen in de export en er worden geen "
 "assets aan de bibliotheek toegevoegd. "
 
 #: src/app/main/ui/exports/files.cljs:167
-msgid "dashboard.export.options.detach.title"
+msgid "files-download-modal.options.detach.title"
 msgstr "Gedeelde bibliotheek-assets als basisobjecten behandelen"
 
 #: src/app/main/ui/exports/files.cljs:168
-msgid "dashboard.export.options.merge.message"
+msgid "files-download-modal.options.merge.message"
 msgstr ""
 "Je bestand wordt geëxporteerd met alle externe assets samengevoegd in de "
 "bestandsbibliotheek."
 
 #: src/app/main/ui/exports/files.cljs:169
-msgid "dashboard.export.options.merge.title"
+msgid "files-download-modal.options.merge.title"
 msgstr "Inclusief gedeelde bibliotheek-assets in bestandsbibliotheken"
 
 #: src/app/main/ui/exports/files.cljs:147
@@ -1833,7 +1832,6 @@ msgstr ""
 "inspecteren"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:166
-#, fuzzy
 msgid "inspect.layer-info"
 msgstr "Laaginfo"
 
@@ -7968,12 +7966,6 @@ msgstr "Ongeldige waarde: % is niet toegestaan."
 msgid "workspace.tokens.value-with-units"
 msgstr "Ongeldige waarde: Eenheden zijn niet toegestaan."
 
-#: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:181, src/app/main/ui/workspace/tokens/management/create/form.cljs:602
-msgid "workspace.tokens.warning-name-change"
-msgstr ""
-"Met het wijzigen van de naam van dit token, worden alle verwijzingen naar "
-"de oude naam verbroken."
-
 #: src/app/main/ui/workspace/sidebar.cljs:139, src/app/main/ui/workspace/sidebar.cljs:146
 msgid "workspace.toolbar.assets"
 msgstr "Assets"
@@ -8487,3 +8479,20 @@ msgstr "Nu overslaan en proefperiode starten"
 
 msgid "subscription.settings.management-dialog.step-2-add-payment-button"
 msgstr "Betalingsgegevens toevoegen"
+
+#: src/app/main/ui/inspect/right_sidebar.cljs:240
+msgid "inspect.empty.more"
+msgstr "Meer info"
+
+#: src/app/main/data/workspace/tokens/errors.cljs:93
+msgid "workspace.tokens.invalid-font-family-token-value"
+msgstr ""
+"Ongeldige tokenwaarde: je kunt alleen verwijzen naar een font-family-token"
+
+#: src/app/main/data/workspace/tokens/errors.cljs
+msgid "workspace.tokens.invalid-token-value-shadow"
+msgstr "Ongeldige waarde: moet verwijzen naar een samengesteld schaduwtoken."
+
+#: src/app/main/ui/workspace/tokens/management/create/form.cljs:775
+msgid "workspace.tokens.reference-composite-shadow"
+msgstr "Voer een alias voor een schaduwtoken in"