✨ Add border radius token inputs on multiple selection

.github/workflows/build-bundle.yml

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

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

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

.github/workflows/build-docker.yml

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

.github/workflows/commit-checker.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Check Commit Type
         uses: gsactions/commit-message-checker@v2
         with:
-          pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert|Reapply).+[^.])$'
+          pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert).+[^.])$'
           flags: 'gm'
           error: 'Commit should match CONTRIBUTING.md guideline'
           checkAllCommitMessages: 'true' # optional: this checks all commits associated with a pull request

.github/workflows/tests.yml

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

.gitignore

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

CHANGES.md

@@ -10,11 +10,9 @@
 
 ### :sparkles: New features & Enhancements
 
-- Remap references when renaming tokens [Taiga #10202](https://tree.taiga.io/project/penpot/us/10202)
-- Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
-
 ### :bug: Bugs fixed
 
+
 ## 2.13.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -37,14 +35,7 @@
 - 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 problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
-- 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
 
@@ -54,6 +45,7 @@
 - Fix problem with style in fonts input [Taiga #12935](https://tree.taiga.io/project/penpot/issue/12935)
 - Fix problem with path editor and right click [Github #7917](https://github.com/penpot/penpot/issues/7917)
 
+
 ## 2.12.0
 
 ### :boom: Breaking changes & Deprecations
@@ -65,6 +57,7 @@ The backend RPC API URLS are changed from `/api/rpc/command/<name>` to
 compatibility; however, if you are a user of this API, it is strongly
 recommended that you adapt your code to use the new PATH.
 
+
 #### Updated SSO Callback URL
 
 The OAuth / Single Sign-On (SSO) callback endpoint has changed to
@@ -97,6 +90,7 @@ This update standardizes all authentication flows under the single URL
 and makis it more modular, enabling the ability to configure SSO auth
 provider dinamically.
 
+
 #### Changes on default docker compose
 
 We have updated the `docker/images/docker-compose.yaml` with a small

backend/deps.edn

@@ -97,8 +97,8 @@
 
   :jmx-remote
   {:jvm-opts ["-Dcom.sun.management.jmxremote"
-              "-Dcom.sun.management.jmxremote.port=9000"
-              "-Dcom.sun.management.jmxremote.rmi.port=9000"
+              "-Dcom.sun.management.jmxremote.port=9090"
+              "-Dcom.sun.management.jmxremote.rmi.port=9090"
               "-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,6 +36,17 @@
    [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)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -166,7 +177,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (d/obfuscate-string (:client-secret provider)))
+               :client-secret (obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -211,7 +222,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (d/obfuscate-string (:client-secret provider)))
+               :client-secret (obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -288,7 +299,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (d/obfuscate-string (:client-secret provider)))
+               :client-secret (obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -330,7 +341,7 @@
              :provider "gitlab"
              :base-uri (:base-uri provider)
              :client-id (:client-id provider)
-             :client-secret (d/obfuscate-string (:client-secret provider)))
+             :client-secret (obfuscate-string (:client-secret provider)))
       provider)
     (catch Throwable cause
       (ex/raise :type ::internal
@@ -350,7 +361,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (d/obfuscate-string (:client-secret provider)))
+               :client-secret (obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -448,7 +459,7 @@
     (l/trc :hint "fetch access token"
            :provider (:id provider)
            :client-id (:client-id provider)
-           :client-secret (d/obfuscate-string (:client-secret provider))
+           :client-secret (obfuscate-string (:client-secret provider))
            :grant-type (:grant_type params)
            :redirect-uri (:redirect_uri params))
 
@@ -501,7 +512,7 @@
   [cfg provider tdata]
   (l/trc :hint "fetch user info"
          :uri (:user-uri provider)
-         :token (d/obfuscate-string (:token/access tdata)))
+         :token (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)
+        and (p.deleted_at is null or p.deleted_at > now())
         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)
+        and (p.deleted_at is null or p.deleted_at > now())
         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)
+      and (f.deleted_at is null or f.deleted_at > now())
     order by f.created_at asc")
 
 (defn search-files

common/src/app/common/data.cljc

@@ -1024,26 +1024,6 @@
       :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,7 +10,6 @@
   (: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]
@@ -20,10 +19,6 @@
      (: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)
@@ -115,25 +110,7 @@
     (explain (:explain data) opts)
 
     (contains? data ::sm/explain)
-    (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))))
+    (sm/humanize-explain (::sm/explain data) opts)))
 
 #?(:clj
    (defn format-throwable

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

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

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

@@ -47,18 +47,6 @@
         self-reference? (get token-references token-name)]
     self-reference?))
 
-(defn references-token?
-  "Recursively check if a value references the token name. Handles strings, maps, and sequences."
-  [value token-name]
-  (cond
-    (string? value)
-    (boolean (some #(= % token-name) (find-token-value-references value)))
-    (map? value)
-    (some true? (map #(references-token? % token-name) (vals value)))
-    (sequential? value)
-    (some true? (map #(references-token? % token-name) value))
-    :else false))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SCHEMA
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -570,18 +558,3 @@
   "Predicate if a shadow composite token is a reference value - a string pointing to another reference token."
   [token-value]
   (string? token-value))
-
-(defn update-token-value-references
-  "Recursively update token references within a token value, supporting complex token values (maps, sequences, strings)."
-  [value old-name new-name]
-  (cond
-    (string? value)
-    (str/replace value
-                 (re-pattern (str "\\{" (str/replace old-name "." "\\.") "\\}"))
-                 (str "{" new-name "}"))
-    (map? value)
-    (d/update-vals value #(update-token-value-references % old-name new-name))
-    (sequential? value)
-    (mapv #(update-token-value-references % old-name new-name) value)
-    :else
-    value))

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

@@ -909,8 +909,7 @@ Will return a value that matches this schema:
 `:all`     All of the nested sets are active
 `:partial` Mixed active state of nested sets")
   (get-tokens-in-active-sets [_] "set of set names that are active in the the active themes")
-  (get-all-tokens [_] "all tokens in the lib, as a sequence")
-  (get-all-tokens-map [_] "all tokens in the lib, as a map name -> token")
+  (get-all-tokens [_] "all tokens in the lib")
   (get-tokens [_ set-id] "return a map of tokens in the set, indexed by token-name"))
 
 (declare parse-multi-set-dtcg-json)
@@ -1307,10 +1306,6 @@ Will return a value that matches this schema:
       tokens))
 
   (get-all-tokens [this]
-    (mapcat #(vals (get-tokens- %))
-            (get-sets this)))
-
-  (get-all-tokens-map [this]
     (reduce
      (fn [tokens' set]
        (into tokens' (map (fn [x] [(:name x) x]) (vals (get-tokens- set)))))

docker/devenv/docker-compose.yaml

@@ -41,10 +41,7 @@ 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 /wasm-playground {
-            alias /home/penpot/penpot/frontend/resources/public/wasm-playground/;
+        location /playground {
+            alias /home/penpot/penpot/experiments/;
             add_header Cache-Control "no-cache, max-age=0";
             autoindex on;
         }

docker/devenv/files/start-tmux.sh

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

exporter/scripts/setup

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

frontend/playwright/ui/pages/WorkspacePage.js

@@ -198,10 +198,10 @@ export class WorkspacePage extends BaseWebSocketPage {
       `[id="shape-00000000-0000-0000-0000-000000000000"]`,
     );
     this.toolbarOptions = page.getByTestId("toolbar-options");
-    this.rectShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Rectangle" });
-    this.ellipseShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Ellipse" });
-    this.moveButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Move" });
-    this.boardButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Board" });
+    this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.ellipseShapeButton = page.getByRole("button", { name: "Ellipse (E)" });
+    this.moveButton = page.getByRole("button", { name: "Move (V)" });
+    this.boardButton = page.getByRole("button", { name: "Board (B)" });
     this.toggleToolbarButton = page.getByRole("button", {
       name: "Toggle toolbar",
     });

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

@@ -20,7 +20,12 @@ test.describe("Dashboard Deleted Page", () => {
     // Navigate directly to deleted page
     await dashboardPage.goToDeleted();
 
-    // Check for the delete-page-section element
-    await expect(page.getByTestId("deleted-page-section")).toBeVisible();
+    // 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();
   });
 });

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

@@ -189,8 +189,8 @@ test("BUG 7760 - Layout losing properties when changing parents", async ({
   await workspacePage.clickLeafLayer("Flex Board");
 
   // Move the first board into the second
-  const hAuto = await workspacePage.page.getByTestId("behaviour-h-auto");
-  const vAuto = await workspacePage.page.getByTestId("behaviour-v-auto");
+  const hAuto = await workspacePage.page.getByTitle("Fit content (Horizontal)");
+  const vAuto = await workspacePage.page.getByTitle("Fit content (Vertical)");
 
   await expect(vAuto.locator("input")).toBeChecked();
   await expect(hAuto.locator("input")).toBeChecked();

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 and position");
+      const panel = await getPanelByTitle(workspacePage, "Size & 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 and position");
+      const panel = await getPanelByTitle(workspacePage, "Size & 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 and position");
+      const panel = await getPanelByTitle(workspacePage, "Size & position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");

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

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

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

@@ -332,33 +332,24 @@ test("Copy/paste properties", async ({ page, context }) => {
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Rectangle")
-    .first()
-    .click({ button: "right" });
+  await page.getByText("Rectangle").first().click({ button: "right" });
+  await page.getByText("Copy/Paste as").hover();
+  await page.getByText("Paste properties").click();
+
+  await page.getByText("Board").nth(2).click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
   await page
     .getByTestId("layer-item")
-    .getByText("Board")
+    .locator("div")
+    .filter({ hasText: "Path" })
     .nth(1)
     .click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Path")
-    .click({ button: "right" });
-  await page.getByText("Copy/Paste as").hover();
-  await page.getByText("Paste properties").click();
-
-  await page
-    .getByTestId("layer-item")
-    .getByText("Ellipse")
-    .click({ button: "right" });
+  await page.getByText("Ellipse").click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 });

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

@@ -667,9 +667,6 @@
 }
 
 // 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/resources/styles/common/refactor/design-tokens.scss

@@ -245,6 +245,13 @@
   --assets-component-second-border-selected: var(--color-background-primary);
   --assets-component-hightlight: var(--color-accent-secondary);
 
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-quaternary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-quaternary);
+
   --library-name-foreground-color: var(--color-foreground-primary);
   --library-content-foreground-color: var(--color-foreground-secondary);
 
@@ -417,6 +424,13 @@
   --tab-border-color: var(--color-background-tertiary);
   --tab-border-color-selected: var(--color-background-secondary);
 
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-primary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-secondary);
+
   --button-icon-background-color-selected: var(--color-background-primary);
   --button-icon-border-color-selected: var(--color-background-secondary);
 

frontend/scripts/setup

@@ -1,6 +0,0 @@
-#!/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
 
-SCRIPT_DIR=$(dirname $0);
-
 set -ex
+corepack enable;
+corepack install;
+yarn install;
 
-$SCRIPT_DIR/setup;
-
+yarn run playwright install chromium --with-deps;
 yarn run build:storybook
 yarn run test:storybook

frontend/scripts/test-e2e

@@ -1,9 +1,8 @@
 #!/usr/bin/env bash
 
-SCRIPT_DIR=$(dirname $0);
-
 set -ex
-
-$SCRIPT_DIR/setup;
-
+corepack enable;
+corepack install;
+yarn install;
+yarn run playwright install chromium --with-deps;
 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 (cto/find-token-value-references line-height-value))
+  (let [missing-references (seq (some 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-file)
+                       (get ref-id)
                        (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-file)
+                     (get ref-id)
                      (get :data)
                      (ctl/get-colors))
         shared?  (contains? colors ref-id)
@@ -1180,20 +1180,19 @@
      :index (:index shadow)}))
 
 (defn- text->color-att
-  [fill file-id libraries & {:keys [has-token-applied token-name]}]
+  [fill file-id libraries]
   (let [ref-file (:fill-color-ref-file fill)
         ref-id   (:fill-color-ref-id fill)
         colors   (-> libraries
-                     (get ref-file)
+                     (get ref-id)
                      (get :data)
                      (ctl/get-colors))
+
         shared?  (contains? colors 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    (cond-> (types.fills/fill->color fill)
+                   (not (or shared? (= ref-file file-id)))
+                   (dissoc :ref-file :ref-id))]
+
     {:attrs attrs
      :prop :content
      :shape-id (:shape-id fill)
@@ -1201,18 +1200,13 @@
 
 (defn- extract-text-colors
   [text file-id libraries]
-  (let [applied-fill-token (get-in text [:applied-tokens :fill])
-        treat-node
+  (let [treat-node
         (fn [node shape-id]
-          (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))]
+          (map-indexed #(assoc %2 :shape-id shape-id :index %1) node))]
     (->> (txt/node-seq txt/is-text-node? (:content text))
          (map :fills)
-         (mapcat #(treat-node % (:id text))))))
+         (mapcat #(treat-node % (:id text)))
+         (map #(text->color-att % file-id libraries)))))
 
 (defn- fill->color-att
   "Given a fill map enriched with :shape-id, :index, and optionally
@@ -1238,7 +1232,7 @@
         ref-id     (:fill-color-ref-id fill)
 
         colors     (-> libraries
-                       (get ref-file)
+                       (get ref-id)
                        (get :data)
                        (ctl/get-colors))
         shared?    (contains? colors ref-id)

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

@@ -47,31 +47,32 @@
   (ptk/reify ::apply-content-modifiers
     ptk/WatchEvent
     (watch [it state _]
-      (let [id    (st/get-path-id state)
-            shape (st/get-path 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)
 
             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)
+            (dm/get-in state [:workspace-local :edit-path id :content-modifiers])
 
-                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/data/workspace/tokens/application.cljs

@@ -633,6 +633,43 @@
                            :shape-ids shape-ids
                            :on-update-shape on-update-shape}))))))))
 
+(defn toggle-br-token
+  [{:keys [token attrs shape-ids expand-with-children]}]
+  (ptk/reify ::on-toggle-token
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects (dsh/lookup-page-objects state)
+            shapes (into [] (keep (d/getf objects)) shape-ids)
+
+            shapes
+            (if expand-with-children
+              (into []
+                    (mapcat (fn [shape]
+                              (if (= (:type shape) :group)
+                                (keep objects (:shapes shape))
+                                [shape])))
+                    shapes)
+              shapes)
+
+            {:keys [attributes all-attributes]}
+            (get token-properties (:type token))
+
+            unapply-tokens?
+            (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
+
+            shape-ids (map :id shapes)]
+
+        (if unapply-tokens?
+          (rx/of
+           (unapply-token {:attributes (or attrs all-attributes attributes)
+                           :token token
+                           :shape-ids shape-ids}))
+          (rx/of
+           (apply-token {:attributes attrs
+                         :token token
+                         :shape-ids shape-ids
+                         :on-update-shape update-shape-radius-for-corners})))))))
+
 
 (defn apply-token-on-selected
   [color-operations token]

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

@@ -74,7 +74,7 @@
   (when unknown-tokens
     (st/emit! (show-unknown-types-warning unknown-tokens)))
   (try
-    (->> (ctob/get-all-tokens-map tokens-lib)
+    (->> (ctob/get-all-tokens tokens-lib)
          (sd/resolve-tokens-with-verbose-errors)
          (rx/map (fn [_]
                    tokens-lib))

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

@@ -11,7 +11,6 @@
    [app.common.files.helpers :as cfh]
    [app.common.geom.point :as gpt]
    [app.common.logic.tokens :as clt]
-   [app.common.path-names :as cpn]
    [app.common.types.shape :as cts]
    [app.common.types.tokens-lib :as ctob]
    [app.common.uuid :as uuid]
@@ -23,7 +22,6 @@
    [app.main.data.workspace.tokens.propagation :as dwtp]
    [app.util.i18n :refer [tr]]
    [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
    [potok.v2.core :as ptk]))
 
 (declare set-selected-token-set-id)
@@ -462,35 +460,12 @@
 ;; TOKEN UI OPS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn clean-tokens-paths
-  []
-  (ptk/reify ::clean-tokens-paths
+(defn set-token-type-section-open
+  [token-type open?]
+  (ptk/reify ::set-token-type-section-open
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:workspace-tokens :unfolded-token-paths] []))))
-
-(defn toggle-token-path
-  [path]
-  (ptk/reify ::toggle-token-path
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:workspace-tokens :unfolded-token-paths]
-                 (fn [paths]
-                   (let [paths (or paths [])]
-                     (if (some #(= % path) paths)
-                       (vec (remove #(or (= % path)
-                                         (str/starts-with? % (str path ".")))
-                                    paths))
-                       (let [split-path (cpn/split-path path :separator ".")
-                             partial-paths (reduce
-                                            (fn [acc segment]
-                                              (let [new-acc (if (empty? acc)
-                                                              segment
-                                                              (str (last acc) "." segment))]
-                                                (conj acc new-acc)))
-                                            []
-                                            split-path)]
-                         (into paths partial-paths)))))))))
+      (update-in state [:workspace-tokens :open-status-by-type] assoc token-type open?))))
 
 (defn assign-token-context-menu
   [{:keys [position] :as params}]

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

@@ -22,9 +22,6 @@
    [clojure.set :as set]
    [potok.v2.core :as ptk]))
 
-;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
-(l/set-level! :warn)
-
 ;; Helpers ---------------------------------------------------------------------
 
 ;; TODO: see if this can be replaced by more standard functions

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

@@ -1,177 +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.data.workspace.tokens.remapping
-  "Core logic for token remapping functionality"
-  (:require
-   [app.common.files.changes-builder :as pcb]
-   [app.common.files.tokens :as cft]
-   [app.common.logging :as log]
-   [app.common.types.container :refer [shapes-seq]]
-   [app.common.types.file :refer [object-containers-seq]]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.data.changes :as dch]
-   [app.main.data.helpers :as dh]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [potok.v2.core :as ptk]))
-
-;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
-(log/set-level! :warn)
-
-;; Token Reference Scanning
-;; ========================
-
-(defn scan-shape-applied-tokens
-  "Scan a shape for applied token references to a specific token name"
-  [shape token-name container]
-  (when-let [applied-tokens (:applied-tokens shape)]
-    (for [[attribute applied-token-name] applied-tokens
-          :when (= applied-token-name token-name)]
-      {:type :applied-token
-       :shape-id (:id shape)
-       :attribute attribute
-       :token-name applied-token-name
-       :container container})))
-
-(defn scan-token-value-references
-  "Scan a token value for references to a specific token name (alias), supporting complex token values."
-  [token token-name]
-  (letfn [(find-all-token-value-references [token-value]
-            (cond
-              (string? token-value)
-              (filter #(= % token-name) (cto/find-token-value-references token-value))
-
-              (map? token-value)
-              (mapcat find-all-token-value-references (vals token-value))
-
-              (sequential? token-value)
-              (mapcat find-all-token-value-references token-value)
-
-              :else
-              []))]
-    (when-let [value (:value token)]
-      (for [referenced-token-name (find-all-token-value-references value)]
-        {:type :token-alias
-         :source-token-id (:id token)
-         :referenced-token-name referenced-token-name}))))
-
-(defn scan-workspace-token-references
-  "Scan entire workspace for all token references to a specific token"
-  [file-data old-token-name]
-  (let [tokens-lib (:tokens-lib file-data)
-        containers (object-containers-seq file-data)
-
-        ;; Scan all shapes for applied token references to the specific token
-        matching-applied (mapcat (fn [container]
-                                   (let [shapes (shapes-seq container)]
-                                     (mapcat #(scan-shape-applied-tokens % old-token-name container) shapes)))
-                                 containers)
-
-        ;; Scan tokens library for alias references to the specific token
-        matching-aliases (if tokens-lib
-                           (let [all-tokens (ctob/get-all-tokens tokens-lib)]
-                             (mapcat #(scan-token-value-references % old-token-name) all-tokens))
-                           [])]
-    (log/info :hint "token-scan-details"
-              :token-name old-token-name
-              :containers-count (count containers)
-              :total-applied-refs (count matching-applied)
-              :matching-applied (count matching-applied)
-              :total-alias-refs (count matching-aliases)
-              :matching-aliases (count matching-aliases))
-
-    {:applied-tokens matching-applied
-     :token-aliases matching-aliases
-     :total-references (+ (count matching-applied) (count matching-aliases))}))
-
-;; Token Remapping Core Logic
-;; ==========================
-
-(defn remap-tokens
-  "Main function to remap all token references when a token name changes"
-  [old-token-name new-token-name]
-  (ptk/reify ::remap-tokens
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [file-data (dh/lookup-file-data state)
-            scan-results (scan-workspace-token-references file-data old-token-name)
-            tokens-lib (:tokens-lib file-data)
-            sets (ctob/get-sets tokens-lib)
-            tokens-with-sets (mapcat (fn [set]
-                                       (map (fn [token]
-                                              {:token token :set set})
-                                            (vals (ctob/get-tokens tokens-lib (ctob/get-id set)))))
-                                     sets)
-
-            ;; Group applied token references by container
-            refs-by-container (group-by :container (:applied-tokens scan-results))
-
-            ;; Use apply-token logic to update shapes for both direct and alias references
-            shape-changes (reduce-kv
-                           (fn [changes container refs]
-                             (let [shape-ids (map :shape-id refs)
-                                   ;; Find the correct token to apply (new or alias)
-                                   token (or (some #(when (= (:name (:token %)) new-token-name) %) tokens-with-sets)
-                                             (some #(when (= (:name (:token %)) old-token-name) %) tokens-with-sets))
-                                   attributes (set (map :attribute refs))]
-                               (if token
-                                 (-> (pcb/with-container changes container)
-                                     (pcb/update-shapes shape-ids
-                                                        (fn [shape]
-                                                          (update shape :applied-tokens
-                                                                  #(merge % (cft/attributes-map attributes (:token token)))))))
-                                 changes)))
-                           (-> (pcb/empty-changes)
-                               (pcb/with-file-data file-data)
-                               (pcb/with-library-data file-data))
-                           refs-by-container)
-
-            ;; Create changes for updating token alias references
-            token-changes (reduce
-                           (fn [changes ref]
-                             (let [source-token-id (:source-token-id ref)]
-                               (when-let [{:keys [token set]} (some #(when (= (:id (:token %)) source-token-id) %) tokens-with-sets)]
-                                 (let [old-value (:value token)
-                                       new-value (cto/update-token-value-references old-value old-token-name new-token-name)]
-                                   (pcb/set-token changes (ctob/get-id set) (:id token)
-                                                  (assoc token :value new-value))))))
-                           shape-changes
-                           (:token-aliases scan-results))]
-
-        (log/info :hint "token-remapping"
-                  :old-name old-token-name
-                  :new-name new-token-name
-                  :references-count (:total-references scan-results))
-
-        (rx/of (dch/commit-changes token-changes))))))
-
-(defn validate-token-remapping
-  "Validate that a token remapping operation is safe to perform"
-  [old-name new-name]
-  (cond
-    (str/blank? new-name)
-    {:valid? false
-     :error :invalid-name
-     :message "Token name cannot be empty"}
-    (= old-name new-name)
-    {:valid? false
-     :error :no-change
-     :message "New name is the same as current name"}
-    :else
-    {:valid? true}))
-
-(defn count-token-references
-  "Count the number of references to a token in the workspace"
-  [file-data token-name]
-  (let [scan-results (scan-workspace-token-references file-data token-name)]
-    (log/info :hint "token-reference-scan"
-              :token-name token-name
-              :applied-refs (count (:applied-tokens scan-results))
-              :alias-refs (count (:token-aliases scan-results))
-              :total (:total-references scan-results))
-    (:total-references scan-results)))

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

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

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

@@ -10,9 +10,9 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(mf/defc file-uploader*
+(mf/defc file-uploader
   {::mf/forward-ref true}
-  [{:keys [accept multi label-text label-class input-id on-selected data-testid]} input-ref]
+  [{:keys [accept multi label-text label-class input-id on-selected data-testid] :as props} input-ref]
   (let [opt-pick-one #(if multi % (first %))
 
         on-files-selected

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

@@ -315,8 +315,7 @@
     gap: deprecated.$s-4;
     max-height: deprecated.$s-136;
     padding: deprecated.$s-4 0;
-    overflow-y: auto;
-
+    overflow-y: scroll;
     .selected-item {
       .around {
         @include deprecated.flexRow;

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

@@ -0,0 +1,107 @@
+;; 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.components.radio-buttons
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.main.ui.formats :as fmt]
+   [app.util.dom :as dom]
+   [rumext.v2 :as mf]))
+
+(def context
+  (mf/create-context nil))
+
+(mf/defc radio-button
+  {::mf/props :obj}
+  [{:keys [icon id value disabled title icon-class type]}]
+  (let [context     (mf/use-ctx context)
+        allow-empty (unchecked-get context "allow-empty")
+        type        (if ^boolean type
+                      type
+                      (if ^boolean allow-empty
+                        "checkbox"
+                        "radio"))
+
+        on-change   (unchecked-get context "on-change")
+        selected    (unchecked-get context "selected")
+        name        (unchecked-get context "name")
+
+        encode-fn   (unchecked-get context "encode-fn")
+        checked?    (= selected value)
+
+        value       (encode-fn value)]
+
+
+    [:label {:html-for id
+             :data-testid id
+             :title title
+             :class (stl/css-case
+                     :radio-icon true
+                     :checked checked?
+                     :disabled disabled)}
+
+     (if (some? icon)
+       [:> icon* {:icon-id icon :class icon-class :aria-hidden true}]
+       [:span {:class (stl/css :title-name)} value])
+
+     [:input {:id id
+              :on-change on-change
+              :type type
+              :name name
+              :disabled disabled
+              :value value
+              :default-checked checked?}]]))
+
+(mf/defc radio-buttons
+  {::mf/props :obj}
+  [{:keys [name children on-change selected class wide encode-fn decode-fn allow-empty] :as props}]
+  (let [encode-fn (d/nilv encode-fn identity)
+        decode-fn (d/nilv decode-fn identity)
+        nitems    (if (array? children)
+                    (count (keep identity children))
+                    1)
+        ;; FIXME: we should handle this with CSS
+        width     (mf/with-memo [nitems]
+                    (if (= wide true)
+                      "unset"
+                      (fmt/format-pixels
+                       (+ (* 4 (- nitems 1))
+                          (* 32 nitems)))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps selected on-change)
+         (fn [event]
+           (let [input (dom/get-target event)
+                 value (dom/get-target-val event)
+
+                 ;; Only allow null values when the "allow-empty" prop is true
+                 value (when (or (not allow-empty)
+                                 (not= value selected)) value)]
+             (when (fn? on-change)
+               (on-change (decode-fn value) event))
+             (dom/blur! input))))
+
+        context-value
+        (mf/spread-object props
+                          ;; We pass a special metadata for disable
+                          ;; key casing transformation in this
+                          ;; concrete case, because this component
+                          ;; uses legacy mode and props are in
+                          ;; kebab-case style
+                          ^{::mf/transform false}
+                          {:on-change on-change'
+                           :encode-fn encode-fn
+                           :decode-fn decode-fn})]
+
+    [:& (mf/provider context) {:value context-value}
+     [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
+            :style {:width  width}
+            :key (dm/str name "-" selected)}
+      children]]))

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

@@ -0,0 +1,79 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.radio-btn-wrapper {
+  @include deprecated.flexCenter;
+  border-radius: deprecated.$br-8;
+  height: deprecated.$s-32;
+  background-color: var(--input-background-color);
+  gap: deprecated.$s-4;
+}
+
+.radio-icon {
+  --radio-icon-border-color: var(--radio-btn-border-color);
+
+  @include deprecated.buttonStyle;
+  @include deprecated.flexCenter;
+  @include deprecated.focusRadio;
+  height: deprecated.$s-32;
+  flex-grow: 1;
+  border-radius: deprecated.$s-8;
+  box-sizing: border-box;
+  border: deprecated.$br-2 solid var(--radio-icon-border-color);
+
+  input {
+    display: none;
+  }
+  svg {
+    @extend .button-icon;
+    stroke: var(--radio-btn-foreground-color);
+  }
+  .title-name {
+    @include deprecated.uppercaseTitleTipography;
+    color: var(--radio-btn-foreground-color);
+  }
+  &:hover {
+    svg {
+      stroke: var(--radio-btn-foreground-color-selected);
+    }
+  }
+}
+
+.checked {
+  --radio-icon-border-color: var(--radio-btn-border-color-selected);
+
+  background-color: var(--radio-btn-background-color-selected);
+  svg {
+    stroke: var(--radio-btn-foreground-color-selected);
+  }
+  .title-name {
+    color: var(--radio-btn-foreground-color-selected);
+  }
+}
+
+.disabled {
+  cursor: default;
+  background-color: transparent;
+  border: deprecated.$s-2 solid transparent;
+  svg {
+    stroke: var(--button-foreground-color-disabled);
+  }
+  .title-name {
+    color: var(--button-foreground-color-disabled);
+  }
+  &:hover {
+    background-color: transparent;
+    border: deprecated.$s-2 solid transparent;
+    svg {
+      stroke: var(--button-foreground-color-disabled);
+    }
+    .title-name {
+      color: var(--button-foreground-color-disabled);
+    }
+  }
+}

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

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

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

@@ -32,27 +32,6 @@
 (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}
@@ -61,8 +40,7 @@
    [:div#dashboard-deleted-title {:class (stl/css :dashboard-title)}
     [:h1 (tr "dashboard.projects-title")]]])
 
-(mf/defc project-context-menu*
-  {::mf/private true}
+(mf/defc deleted-project-menu*
   [{:keys [project  show on-close top left]}]
   (let [top  (d/nilv top 0)
         left (d/nilv left 0)
@@ -70,13 +48,25 @@
         on-restore-project
         (mf/use-fn
          (mf/deps project)
-         (partial on-restore-project 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})))))
 
         on-delete-project
         (mf/use-fn
          (mf/deps project)
-         (partial on-delete-project 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})))))
         options
         (mf/with-memo [on-restore-project on-delete-project]
           [{:name   (tr "dashboard.restore-project-button")
@@ -161,7 +151,7 @@
             menu-icon]]
 
           (when (:menu-open @local)
-            [:> project-context-menu*
+            [:> deleted-project-menu*
              {:project project
               :show (:menu-open @local)
               :left (+ 24 (:x (:menu-pos @local)))
@@ -184,8 +174,8 @@
           :limit limit
           :selected-files selected-files}])]]))
 
+
 (mf/defc menu*
-  {::mf/private true}
   [{:keys [team-id section]}]
   (let [on-recent-click
         (mf/use-fn
@@ -232,8 +222,7 @@
                            (some #(= (:id project) (:project-id %))
                                  (vals deleted-map)))))
                (sort-by :modified-at)
-               (reverse)
-               (not-empty)))
+               (reverse)))
 
         team-id
         (get team :id)
@@ -284,44 +273,37 @@
 
     [:*
      [:> header* {:team team}]
-     [:section {:class (stl/css :dashboard-container :no-bg)
-                :data-testid "deleted-page-section"}
+     [:section {:class (stl/css :dashboard-container :no-bg)}
       [:*
        [:div {:class (stl/css :no-bg)}
 
         [:> menu* {:team-id team-id :section :dashboard-deleted}]
 
-        (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")]]]
+        [: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")]]]
 
-           (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.deleted.empty-state-description")]])]]]]))
+        (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}])))]]]]))

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

@@ -51,6 +51,10 @@
   padding: var(--sp-xxl) var(--sp-xxl) var(--sp-s) var(--sp-xxl);
   position: sticky;
   top: 0;
+
+  // We need to use the the deprecated z-index so it won't clash with the dashboard
+  // onboarding modals
+  z-index: deprecated.$z-index-3;
 }
 
 .nav-inside {

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

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.dashboard.file-menu
   (:require
-   [app.common.data :as d]
    [app.main.data.common :as dcm]
    [app.main.data.dashboard :as dd]
    [app.main.data.event :as-alias ev]
@@ -90,12 +89,12 @@
         on-duplicate
         (fn [_]
           (apply st/emit! (map dd/duplicate-file files))
-          (st/emit! (ntf/success (tr "dashboard.success-duplicate-file" (i18n/c file-count)))))
+          (st/emit! (ntf/success (tr "dashboard.success-duplicate-file" (i18n/c (count files))))))
 
         on-delete-accept
         (fn [_]
           (apply st/emit! (map dd/delete-file files))
-          (st/emit! (ntf/success (tr "dashboard.success-delete-file" (i18n/c file-count)))
+          (st/emit! (ntf/success (tr "dashboard.success-delete-file" (i18n/c (count files))))
                     (dd/clear-selected-files)))
 
         on-delete
@@ -194,7 +193,7 @@
         (fn [_]
           (st/emit! (dd/restore-files-immediately
                      (with-meta {:team-id (:id current-team)
-                                 :ids (into #{} d/xf:map-id files)}
+                                 :ids #{(:id file)}}
                        {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
                                                (dd/fetch-projects (:id current-team))
                                                (dd/fetch-deleted-files (:id current-team)))
@@ -202,7 +201,6 @@
 
         on-restore-immediately
         (fn []
-          (prn files)
           (st/emit!
            (modal/show {:type :confirm
                         :title (tr "dashboard-restore-file-confirmation.title")
@@ -215,7 +213,7 @@
         (fn []
           (let [accept-fn #(st/emit! (dd/delete-files-immediately
                                       {:team-id (:id current-team)
-                                       :ids (into #{} d/xf:map-id files)}))]
+                                       :ids #{(:id file)}}))]
             (st/emit!
              (modal/show {:type :confirm
                           :title (tr "dashboard.delete-forever-confirmation.title")
@@ -262,12 +260,14 @@
 
           options
           (if can-restore
-            [{:name    (tr "dashboard.file-menu.restore-files-option" (i18n/c file-count))
-              :id      "restore-file"
-              :handler on-restore-immediately}
-             {:name    (tr "dashboard.file-menu.delete-files-permanently-option" (i18n/c file-count))
-              :id      "delete-file"
-              :handler on-delete-immediately}]
+            [(when can-restore
+               {:name    (tr "dashboard.restore-file-button")
+                :id      "restore-file"
+                :handler on-restore-immediately})
+             (when can-restore
+               {:name    (tr "dashboard.delete-file-button")
+                :id      "delete-file"
+                :handler on-delete-immediately})]
             (if multi?
               [(when can-edit
                  {:name    (tr "dashboard.duplicate-multi" file-count)

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

@@ -17,7 +17,7 @@
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
@@ -184,11 +184,11 @@
                  :on-click on-click
                  :tab-index "0"}
         [:span (tr "labels.add-custom-font")]
-        [:> file-uploader* {:input-id "font-upload"
-                            :accept accept-font-types
-                            :multi true
-                            :ref input-ref
-                            :on-selected on-selected}]]
+        [:& file-uploader {:input-id "font-upload"
+                           :accept accept-font-types
+                           :multi true
+                           :ref input-ref
+                           :on-selected on-selected}]]
 
        (when-let [url cf/terms-of-service-uri]
          [:& context-notification {:content (tr "dashboard.fonts.hero-text2" url)

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

@@ -16,7 +16,7 @@
    [app.main.data.notifications :as ntf]
    [app.main.errors :as errors]
    [app.main.store :as st]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
@@ -58,10 +58,10 @@
   [{:keys [project-id on-finish-import]} external-ref]
   (let [on-file-selected (use-import-file project-id on-finish-import)]
     [:form.import-file {:aria-hidden "true"}
-     [:> file-uploader* {:accept ".penpot,.zip"
-                         :multi true
-                         :ref external-ref
-                         :on-selected on-file-selected}]]))
+     [:& file-uploader {:accept ".penpot,.zip"
+                        :multi true
+                        :ref external-ref
+                        :on-selected on-file-selected}]]))
 
 (defn- update-entry-name
   [entries file-id new-name]

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

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

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

@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.dashboard.change-owner]
    [app.main.ui.dashboard.subscription :refer [members-cta*
@@ -1315,10 +1315,10 @@
          [:img {:class (stl/css :team-image)
                 :src (cfg/resolve-team-photo-url team)}]
          (when can-edit
-           [:> file-uploader* {:accept "image/jpeg,image/png"
-                               :multi false
-                               :ref finput
-                               :on-selected on-file-selected}])]
+           [:& file-uploader {:accept "image/jpeg,image/png"
+                              :multi false
+                              :ref finput
+                              :on-selected on-file-selected}])]
         [:div {:class (stl/css :block-label)}
          (tr "dashboard.team-info")]
         [:div {:class (stl/css :block-text)}

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

@@ -11,10 +11,8 @@
    [app.main.data.modal :as modal]
    [app.main.repo :as rp]
    [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
+   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as k]
@@ -99,11 +97,8 @@
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
        [:h2 {:class (stl/css :modal-title)} title]
-       [:> icon-button* {:variant "ghost"
-                         :class (stl/css :modal-close-btn)
-                         :icon i/close
-                         :aria-label (tr "labels.close")
-                         :on-click cancel-fn}]]
+       [:button {:class (stl/css :modal-close-btn)
+                 :on-click cancel-fn} deprecated-icon/close]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? subtitle) (not= subtitle ""))
@@ -129,10 +124,14 @@
       [:div {:class (stl/css :modal-footer)}
        [:div {:class (stl/css :action-buttons)}
         (when-not (= cancel-label :omit)
-          [:> button* {:variant "secondary"
-                       :on-click cancel-fn}
-           cancel-label])
+          [:input {:class (stl/css :cancel-button)
+                   :type "button"
+                   :value cancel-label
+                   :on-click cancel-fn}])
 
-        [:> button* {:variant (if (= accept-style :danger) "destructive" "primary")
-                     :on-click accept-fn}
-         accept-label]]]]]))
+        [:input {:class (stl/css-case :accept-btn true
+                                      :danger (= accept-style :danger)
+                                      :primary (= accept-style :primary))
+                 :type "button"
+                 :value accept-label
+                 :on-click accept-fn}]]]]]))

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

@@ -33,9 +33,7 @@
 }
 
 .modal-close-btn {
-  position: absolute;
-  top: var(--sp-s);
-  right: var(--sp-s);
+  @extend .modal-close-btn-base;
 }
 
 .modal-content {
@@ -55,6 +53,17 @@
   @extend .modal-action-btns;
 }
 
+.cancel-button {
+  @extend .modal-cancel-btn;
+}
+
+.accept-btn {
+  @extend .modal-accept-btn;
+  &.danger {
+    @extend .modal-danger-btn;
+  }
+}
+
 .modal-scd-msg {
   margin-block: 0;
 }

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

@@ -12,7 +12,6 @@
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.ds.controls.switch :refer [switch*]]
    [app.main.ui.ds.controls.utilities.hint-message :refer [hint-message*]]
@@ -64,7 +63,6 @@
     :Select select*
     :Switch switch*
     :Checkbox checkbox*
-    :RadioButtons radio-buttons*
     :Combobox combobox*
     :Text text*
     :TabSwitcher tab-switcher*

frontend/src/app/main/ui/ds/buttons/button.scss

@@ -15,7 +15,6 @@
 
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   column-gap: var(--sp-xs);
 }
 

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

@@ -183,6 +183,7 @@
   [:map
    [:id {:optional true} :string]
    [:class {:optional true} :string]
+   [:inner-class {:optional true} :string]
    [:value {:optional true} [:maybe [:or
                                      :int
                                      :float
@@ -205,11 +206,12 @@
    [:on-focus {:optional true} fn?]
    [:on-detach {:optional true} fn?]
    [:property {:optional true} :string]
-   [:align {:optional true} [:maybe [:enum :left :right]]]])
+   [:align {:optional true} [:maybe [:enum :left :right :right-adjust]]]])
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder icon disabled
+  [{:keys [id class value default placeholder 
+           icon disabled inner-class
            min max max-length step
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
@@ -624,6 +626,7 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
+                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -669,6 +672,7 @@
                               :on-token-key-down on-token-key-down
                               :disabled disabled
                               :on-blur on-blur
+                              :class inner-class
                               :slot-start (when icon
                                             (mf/html [:> tooltip*
                                                       {:content property

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

@@ -32,13 +32,19 @@
   min-width: var(--sp-l);
 }
 
+// TODO: Review if we need other type of button, so we don't need important here
 .invisible-button {
+  position: absolute;
+  right: 4px;
+  top: 4px;
   opacity: var(--opacity-button);
-
+  background-color: var(--color-background-quaternary) !important;
   &:hover {
+    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
+    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

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

@@ -1,107 +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.controls.radio-buttons
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon-list]]
-   [app.util.dom :as dom]
-   [rumext.v2 :as mf]
-   [rumext.v2.util :as mfu]))
-
-(def ^:private schema:radio-button
-  [:map
-   [:id :string]
-   [:icon {:optional true}
-    [:and :string [:fn #(contains? icon-list %)]]]
-   [:label :string]
-   [:value [:or :keyword :string]]
-   [:disabled {:optional true} :boolean]])
-
-(def ^:private schema:radio-buttons
-  [:map
-   [:class {:optional true} :string]
-   [:variant {:optional true}
-    [:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]
-   [:extended {:optional true} :boolean]
-   [:name {:optional true} :string]
-   [:selected {:optional true}
-    [:maybe [:or :keyword :string]]]
-   [:allow-empty {:optional true} :boolean]
-   [:options [:vector {:min 1} schema:radio-button]]
-   [:on-change {:optional true} fn?]])
-
-(mf/defc radio-buttons*
-  {::mf/schema schema:radio-buttons}
-  [{:keys [class variant extended name selected allow-empty options on-change] :rest props}]
-  (let [options (if (array? options)
-                  (mfu/bean options)
-                  options)
-        type    (if allow-empty "checkbox" "radio")
-        variant (d/nilv variant "secondary")
-
-        handle-click
-        (mf/use-fn
-         (fn [event]
-           (let [target (dom/get-target event)
-                 label  (dom/get-parent-with-data target "label")]
-             (dom/prevent-default event)
-             (dom/stop-propagation event)
-             (dom/click label))))
-
-        handle-change
-        (mf/use-fn
-         (mf/deps selected on-change)
-         (fn [event]
-           (let [input (dom/get-target event)
-                 value (dom/get-target-val event)]
-             (when (fn? on-change)
-               (on-change value event))
-             (dom/blur! input))))
-
-        props
-        (mf/spread-props props {:key (dm/str name "-" selected)
-                                :class [class (stl/css-case :wrapper true
-                                                            :extended extended)]})]
-
-    [:> :div props
-     (for [[idx {:keys [id class value label icon disabled]}] (d/enumerate options)]
-       (let [checked? (= selected value)]
-         [:label {:key idx
-                  :html-for id
-                  :data-label true
-                  :data-testid id
-                  :class [class (stl/css-case :label true
-                                              :extended extended)]}
-
-          (if (some? icon)
-            [:> icon-button* {:variant variant
-                              :on-click handle-click
-                              :aria-pressed checked?
-                              :aria-label label
-                              :icon icon
-                              :disabled disabled}]
-            [:> button* {:variant variant
-                         :on-click handle-click
-                         :aria-pressed checked?
-                         :class (stl/css-case :button true
-                                              :extended extended)
-                         :disabled disabled}
-             label])
-
-          [:input {:id id
-                   :class (stl/css :input)
-                   :on-change handle-change
-                   :type type
-                   :name name
-                   :disabled disabled
-                   :value value
-                   :default-checked checked?}]]))]))

frontend/src/app/main/ui/ds/controls/radio_buttons.mdx

@@ -1,97 +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 */ }
-
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import * as RadioButtons from "./radio_buttons.stories";
-
-<Meta title="Controls/Radio Buttons" />
-
-# Radio Buttons
-
-The `radio-buttons*` component allows users to switch between two or more options that are mutually exclusive.
-
-## Variants
-
-Radio buttons with text only. The label will be the text of the button.
-
-<Canvas of={RadioButtons.Default} />
-
-```clj
-[:> radio-buttons* {:selected "left"
-                    :on-change handle-change
-                    :name "alignment"
-                    :extended false
-                    :allow-empty false
-                    :options [{:id "align-left"
-                               :label "Left"
-                               :value "left"}
-                              {:id "align-center"
-                               :label "Center"
-                               :value "center"}
-                              {:id "align-right"
-                               :label "Right"
-                               :value "right"}]}]
-```
-
-Radio buttons with icons only. In this case, the label will act as the tooltip of each button.
-
-<Canvas of={RadioButtons.WithIcons} />
-
-```clj
-(ns app.main.ui.foo
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :as i]))
-
-[:> radio-buttons* {:selected "left"
-                    :on-change handle-change
-                    :name "alignment"
-                    :extended false
-                    :allow-empty false
-                    :options [{:id "align-left"
-                               :icon i/text-align-left
-                               :label "Left align"
-                               :value "left"}
-                              {:id "align-center"
-                               :icon i/text-align-center
-                               :label "Center align"
-                               :value "center"}
-                              {:id "align-right"
-                               :icon i/text-align-right
-                               :label "Right align"
-                               :value "right"}]}]
-```
-
-## Anatomy
-
-Under the hood, each option is represented by
-- a button, which is the visible and clickable element. It may be either an icon button or a text button.
-- a radio input, which is not visible but retains the current state of the option.
-
-A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established,
-selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.
-
-The `selected` parameter should be set to the value of the option that is to be active. Otherwise, no option will be selected.
-
-If the parameter `allow-empty` is enabled, then the component will work with checkboxes instead of radio buttons,
-and therefore the selected option can be deselected. However, it will still only be possible to select one option.
-
-The `extended` parameter allows the component to use all the available space from the parent and distribute it equally
-among all elements.
-
-Any option can be individually disabled using the `disabled` parameter.
-
-## Usage Guidelines
-
-### When to Use
-
-- For multiple choice settings that take effect immediately.
-- In preference panels and configuration screens.
-
-### When Not to Use
-
-- For boolean settings (use switch or checkbox instead).
-- For actions that require confirmation (use buttons instead).
-- For temporary states that need explicit "Apply" action.

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

@@ -1,40 +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/spacing.scss" as *;
-
-.wrapper {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: fit-content;
-  border-radius: $br-8;
-  background-color: var(--color-background-tertiary);
-  gap: var(--sp-xs);
-
-  &.extended {
-    width: 100%;
-    display: flex;
-  }
-}
-
-.label {
-  &.extended {
-    display: flex;
-    flex: 1 1 0;
-  }
-}
-
-.button {
-  &.extended {
-    flex-grow: 1;
-  }
-}
-
-.input {
-  display: none;
-}

frontend/src/app/main/ui/ds/controls/radio_buttons.stories.jsx

@@ -1,72 +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
-
-import * as React from "react";
-import Components from "@target/components";
-
-const { RadioButtons } = Components;
-
-const options = [
-  {id: "left", label: "Left", value: "left" },
-  {id: "center", label: "Center", value: "center" },
-  {id: "right", label: "Right", value: "right" },
-];
-
-const optionsIcon = [
-  {id: "left", label: "Left align", value: "left", icon: "text-align-left" },
-  {id: "center", label: "Center align", value: "center", icon: "text-align-center" },
-  {id: "right", label: "Right align", value: "right", icon: "text-align-right" },
-];
-
-export default {
-  title: "Controls/Radio Buttons",
-  component: RadioButtons,
-  argTypes: {
-    name: {
-      control: { type: "text" },
-      description: "Whether the checkbox is checked",
-    },
-    selected: {
-      control: { type: "select" },
-      options: ["", "left", "center", "right"],
-      description: "Whether the checkbox is checked",
-    },
-    extended: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    allowEmpty: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is disabled",
-    },
-  },
-  args: {
-    name: "alignment",
-    selected: "left",
-    extended: false,
-    allowEmpty: false,
-    options: options,
-    disabled: false,
-  },
-  parameters: {
-    controls: {
-      exclude: ["options", "on-change"],
-    },
-  },
-  render: ({ ...args }) => <RadioButtons {...args} />,
-};
-
-export const Default = {};
-
-export const WithIcons = {
-  args: {
-    options: optionsIcon,
-  },
-};

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

@@ -26,7 +26,7 @@
   [:map
    [:id {:optional true} :string]
    [:resolved-value {:optional true}
-    [:or :int :string]]
+    [:or :int :string :float]]
    [:name {:optional true} :string]
    [:icon {:optional true} schema:icon-list]
    [:label {:optional true} :string]
@@ -40,7 +40,7 @@
    [:selected {:optional true} :any]
    [:focused {:optional true} :any]
    [:empty-to-end {:optional true} [:maybe :boolean]]
-   [:align {:optional true} [:maybe [:enum :left :right]]]])
+   [:align {:optional true} [:maybe [:enum :left :right :right-adjust]]]])
 
 (def ^:private
   xf:filter-blank-id
@@ -109,7 +109,8 @@
         (mf/spread-props props
                          {:class (stl/css-case :option-list true
                                                :left-align (= align :left)
-                                               :right-align (= align :right))
+                                               :right-align (= align :right)
+                                               :adjust-align (= align :right-adjust))
                           :tab-index "-1"
                           :role "listbox"})
 

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

@@ -37,6 +37,10 @@
   right: 0;
 }
 
+.adjust-align {
+  right: var(--dropdown-adjustment);
+}
+
 .option-separator {
   border: $b-1 solid var(--options-dropdown-border-color);
   margin-top: var(--sp-xs);

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

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

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

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

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

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

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

@@ -8,6 +8,7 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/typography.scss" as t;
 @use "ds/colors.scss" as *;
+@use "ds/mixins.scss" as *;
 
 .token-field {
   --token-field-bg-color: var(--color-background-tertiary);
@@ -16,9 +17,8 @@
   --token-field-outline-color: none;
   --token-field-height: var(--sp-xxxl);
   --token-field-margin: unset;
-
   display: grid;
-  grid-template-columns: 1fr auto;
+  width: inherit;
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;
@@ -27,6 +27,7 @@
   border-radius: $br-8;
   padding: var(--sp-xs);
   outline: $b-1 solid var(--token-field-outline-color);
+  position: relative;
 
   &:hover {
     --token-field-bg-color: var(--color-background-quaternary);
@@ -39,7 +40,7 @@
 }
 
 .with-icon {
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto 1fr;
 }
 
 .token-field-disabled {
@@ -57,6 +58,8 @@
   --pill-bg-color: var(--color-background-tertiary);
   --pill-fg-color: var(--color-token-foreground);
   @include t.use-typography("code-font");
+  @include textEllipsis;
+  display: block;
   height: var(--sp-xxl);
   width: fit-content;
   background: var(--pill-bg-color);
@@ -65,6 +68,7 @@
   color: var(--pill-fg-color);
   border-radius: $br-6;
   padding-inline: $sz-6;
+  max-width: 100%;
   &:hover {
     --pill-bg-color: var(--color-token-background);
     --pill-fg-color: var(--color-foreground-primary);
@@ -115,6 +119,9 @@
 }
 
 .invisible-button {
+  position: absolute;
+  right: 0;
+  top: 0;
   opacity: var(--opacity-button);
 
   &:hover {

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

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

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

@@ -208,7 +208,7 @@
 ;; FIXME: deprecated, should be refactored in two components and use
 ;; the generic progress reporter
 
-(mf/defc progress-widget*
+(mf/defc progress-widget
   {::mf/wrap [mf/memo]}
   []
   (let [state             (mf/deref refs/export)

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 "files-download-modal.title")]
+        (tr "dashboard.export.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 "files-download-modal.description-1")]
-          [:p {:class (stl/css :modal-scd-msg)} (tr "files-download-modal.description-2")]
+          [:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")]
+          [:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")]
 
           (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 "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")
+              ;;   (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")
               [: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 "files-download-modal.options." (d/name type) ".title"))]
+                (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
                [:p  {:class (stl/css :modal-msg)}
-                (tr (dm/str "files-download-modal.options." (d/name type) ".message"))]]
+                (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]
 
               [:input {:type "radio"
                        :class (stl/css :option-input)

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

@@ -12,17 +12,14 @@
   flex-direction: column;
   gap: var(--sp-l);
   width: 100%;
-  max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
+  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 {
-  max-height: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
+  height: calc(100vh - px2rem(200)); // 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,8 +24,7 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.blur")
-         :class (stl/css :title-wrapper)
-         :title-class (stl/css :blur-attr-title)}
+         :class (stl/css :title-spacing-blur)}
         (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,28 +5,17 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  --box-border-color: var(--color-background-primary);
-  display: flex;
-  flex-direction: column;
-  border-block-end: $b-2 solid var(--box-border-color);
+  @include deprecated.flexColumn;
 }
 
-.title-wrapper {
-  margin-inline-start: 0;
-}
-
-.blur-attr-title {
-  color: var(--entry-foreground-color-hover);
-  padding-block: var(--sp-s);
+.title-spacing-blur {
+  @extend .attr-title;
 }
 
 .blur-row {
   @extend .attr-row;
-  block-size: $sz-36;
 }
 
 .button-children {
@@ -34,5 +23,5 @@
 }
 
 .copy-btn-title {
-  max-inline-size: $sz-28;
+  max-width: deprecated.$s-28;
 }

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

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

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

@@ -5,30 +5,16 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  --box-border-color: var(--color-background-primary);
-  display: flex;
-  flex-direction: column;
-  border-block-end: $b-2 solid var(--box-border-color);
+  @include deprecated.flexColumn;
 }
 
-.title-wrapper {
-  margin-inline-start: 0;
-}
-
-.fill-attr-title {
-  color: var(--entry-foreground-color-hover);
-  padding-block: var(--sp-s);
+.title-spacing-fill {
+  @extend .attr-title;
 }
 
 .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,8 +44,7 @@
   [:div {:class (stl/css :attributes-block)}
    [:> inspect-title-bar*
     {:title (tr "inspect.attributes.size")
-     :class (stl/css :title-wrapper)
-     :title-class (stl/css :geometry-attr-title)}
+     :class (stl/css :title-spacing-geometry)}
 
     (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,28 +5,17 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  --box-border-color: var(--color-background-primary);
-  display: flex;
-  flex-direction: column;
-  border-block-end: $b-2 solid var(--box-border-color);
+  @include deprecated.flexColumn;
 }
 
-.title-wrapper {
-  margin-inline-start: 0;
-}
-
-.geometry-attr-title {
-  color: var(--entry-foreground-color-hover);
-  padding-block: var(--sp-s);
+.title-spacing-geometry {
+  @extend .attr-title;
 }
 
 .geometry-row {
   @extend .attr-row;
-  block-size: $sz-36;
 }
 
 .button-children {
@@ -34,5 +23,5 @@
 }
 
 .copy-btn-title {
-  max-inline-size: $sz-28;
+  max-width: deprecated.$s-28;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,37 +5,23 @@
 // 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 {
-  --box-border-color: var(--color-background-primary);
-  display: flex;
-  flex-direction: column;
-  border-block-end: $b-2 solid var(--box-border-color);
+  @include deprecated.flexColumn;
 }
 
-.title-wrapper {
-  margin-inline-start: 0;
-}
-
-.text-attr-title {
-  color: var(--entry-foreground-color-hover);
-  padding-block: var(--sp-s);
+.title-spacing-text {
+  @extend .attr-title;
 }
 
 .attributes-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-xs);
+  @include deprecated.flexColumn;
 }
 
 .text-row {
   @extend .attr-row;
-  block-size: unset;
-  min-block-size: $sz-36;
+  height: unset;
+  min-height: deprecated.$s-32;
   :global(.attr-value) {
     align-items: center;
   }
@@ -46,20 +32,20 @@
 }
 
 .attributes-content-row {
-  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);
+  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;
   .content {
-    @include use-typography("body-small");
+    @include deprecated.bodySmallTypography;
     width: 100%;
-    padding: var(--sp-xs) 0;
+    padding: deprecated.$s-4 0;
     color: var(--color-foreground-secondary);
   }
 
   &:hover {
-    border: $b-1 solid var(--color-background-tertiary);
+    border: deprecated.$s-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,8 +42,7 @@
     [: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-wrapper)
-       :title-class (stl/css :variant-attr-title)}]
+       :class (stl/css :title-spacing-variant)}]
 
      (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,29 +5,18 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  --box-border-color: var(--color-background-primary);
-  display: flex;
-  flex-direction: column;
-  border-block-end: $b-2 solid var(--box-border-color);
+  @include deprecated.flexColumn;
 }
 
-.title-wrapper {
-  margin-inline-start: 0;
-}
-
-.variant-attr-title {
-  color: var(--entry-foreground-color-hover);
-  padding-block: var(--sp-s);
+.title-spacing-variant {
+  @extend .attr-title;
 }
 
 .variant-row {
   @extend .attr-row;
-  block-size: fit-content;
-  min-block-size: $sz-36;
+  height: fit-content;
 }
 
 .button-children {

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

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

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

@@ -19,10 +19,7 @@
    [app.main.store :as st]
    [app.main.ui.components.code-block :refer [code-block]]
    [app.main.ui.components.copy-button :refer [copy-button*]]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
@@ -263,9 +260,8 @@
     [:div {:class (stl/css-case :element-options true
                                 :viewer-code-block (= :viewer from))}
      [:div {:class (stl/css :attributes-block)}
-      [:> button* {:variant "secondary"
-                   :class (stl/css :download-button)
-                   :on-click handle-copy-all-code}
+      [:button {:class (stl/css :download-button)
+                :on-click handle-copy-all-code}
        "Copy all code"]]
 
      #_[:div.attributes-block
@@ -292,10 +288,10 @@
        ;;              :options [{:label "CSS" :value "css"}]}]
 
        [:div {:class (stl/css :action-btns)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label "Expand"
-                          :on-click on-expand
-                          :icon i/code}]
+        [:button {:class (stl/css :expand-button)
+                  :on-click on-expand}
+         deprecated-icon/code]
+
         [:> copy-button* {:data copy-css-fn
                           :class (stl/css :css-copy-btn)
                           :on-copied on-style-copied}]]]
@@ -322,21 +318,21 @@
                         :rotated collapsed-markup?)}
          deprecated-icon/arrow]]
 
-       [:> radio-buttons* {:selected markup-type
-                           :on-change set-markup
-                           :name "listing-style"
-                           :options [{:id "html"
-                                      :label "HTML"
-                                      :value "html"}
-                                     {:id "svg"
-                                      :label "SVG"
-                                      :value "svg"}]}]
+       [:& radio-buttons {:selected markup-type
+                          :on-change set-markup
+                          :class (stl/css :code-lang-options)
+                          :wide true
+                          :name "listing-style"}
+        [:& radio-button {:value "html"
+                          :id :html}]
+        [:& radio-button {:value "svg"
+                          :id :svg}]]
 
        [:div {:class (stl/css :action-btns)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label "Expand"
-                          :on-click on-expand
-                          :icon i/code}]
+        [:button {:class (stl/css :expand-button)
+                  :on-click on-expand}
+         deprecated-icon/code]
+
         [:> copy-button* {:data copy-html-fn
                           :class (stl/css :html-copy-btn)
                           :on-copied on-markup-copied}]]]

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

@@ -17,18 +17,16 @@
   padding-inline: var(--sp-m);
 }
 
-.attributes-block {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-}
-
 .viewer-code-block {
   height: calc(100vh - #{deprecated.$s-108}); // TODO: Fix this hardcoded value
 }
 
 .download-button {
-  margin: var(--sp-s) 0;
+  @extend .button-secondary;
+  @include deprecated.uppercaseTitleTipography;
+  height: deprecated.$s-32;
+  width: 100%;
+  margin: deprecated.$s-8 0;
 }
 
 .code-block {
@@ -75,6 +73,7 @@
   gap: deprecated.$s-4;
 }
 
+.expand-button,
 .css-copy-btn,
 .html-copy-btn {
   @extend .button-tertiary;
@@ -86,6 +85,9 @@
   }
 }
 
+.code-lang-options {
+  max-width: deprecated.$s-108;
+}
 .code-lang-select {
   @include deprecated.uppercaseTitleTipography;
   width: deprecated.$s-72;

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

@@ -186,7 +186,6 @@
               [:> 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,6 +24,10 @@
   }
 }
 
+.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 from]}]
+  [{:keys [color-space shapes libraries objects file-id]}]
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
         first-component    (ctkl/get-component data (:component-id first-shape))
@@ -131,8 +131,7 @@
          (mf/deps shorthands*)
          (fn [shorthand]
            (swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
-    [:ol {:class (stl/css-case :styles-tab true
-                               :styles-tab-workspace (= from :workspace)) :aria-label (tr "labels.styles")}
+    [:ol {:class (stl/css :styles-tab) :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,9 +7,5 @@
 @use "ds/_utils.scss" as *;
 
 .styles-tab {
-  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
+  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
 }

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

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