🐛 Fix error message on components doesn't close automatically

* ✨ Replace border radius numeric input

* ✨ Add border radius token inputs on multiple selection

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

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

.github/workflows/build-tag.yml

@@ -33,7 +33,7 @@ jobs:
           MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
           MATTERMOST_CHANNEL: bot-alerts-cicd
           TEXT: |
-            🐳 *[PENPOT] Docker image available: {{ github.ref_name }}*
+            🐳 *[PENPOT] Docker image available: ${{ github.ref_name }}*
             🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
             @infra
 

.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).+[^.])$'
+          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).+[^.])$'
           flags: 'gm'
           error: 'Commit should match CONTRIBUTING.md guideline'
           checkAllCommitMessages: 'true' # optional: this checks all commits associated with a pull request

CHANGES.md

@@ -1,5 +1,26 @@
 # CHANGELOG
 
+## 2.14.0 (Unreleased)
+
+### :boom: Breaking changes & Deprecations
+
+### :rocket: Epics and highlights
+
+### :heart: Community contributions (Thank you!)
+
+### :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)
+- Improve usability of lock and hide buttons in the layer panel. [Taiga #12916](https://tree.taiga.io/project/penpot/issue/12916)
+
+### :bug: Bugs fixed
+
+- Fix prototype connections lost when switching between variants [Taiga #12812](https://tree.taiga.io/project/penpot/issue/12812)
+- Fix wrong image in the onboarding invitation block [Taiga #13040](https://tree.taiga.io/project/penpot/issue/13040)
+- Fix wrong register image [Taiga #12955](https://tree.taiga.io/project/penpot/task/12955)
+- Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
+
 ## 2.13.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -23,6 +44,7 @@
 - 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)
@@ -30,7 +52,6 @@
 - 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
 
 ### :bug: Bugs fixed
@@ -39,7 +60,6 @@
 - 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
@@ -51,7 +71,6 @@ 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
@@ -84,7 +103,6 @@ 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

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

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

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

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

common/src/app/common/path_names.cljc

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

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

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

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

@@ -47,6 +47,18 @@
         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
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -558,3 +570,18 @@
   "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,7 +909,8 @@ 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")
+  (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-tokens [_ set-id] "return a map of tokens in the set, indexed by token-name"))
 
 (declare parse-multi-set-dtcg-json)
@@ -1306,6 +1307,10 @@ 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)))))

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.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.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.toggleToolbarButton = page.getByRole("button", {
       name: "Toggle toolbar",
     });

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.getByTitle("Fit content (Horizontal)");
-  const vAuto = await workspacePage.page.getByTitle("Fit content (Vertical)");
+  const hAuto = await workspacePage.page.getByTestId("behaviour-h-auto");
+  const vAuto = await workspacePage.page.getByTestId("behaviour-v-auto");
 
   await expect(vAuto.locator("input")).toBeChecked();
   await expect(hAuto.locator("input")).toBeChecked();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -245,13 +245,6 @@
   --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);
 
@@ -424,13 +417,6 @@
   --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/src/app/main/data/workspace/tokens/application.cljs

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

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

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

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

@@ -11,6 +11,7 @@
    [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]
@@ -22,6 +23,7 @@
    [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)
@@ -460,12 +462,35 @@
 ;; TOKEN UI OPS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn set-token-type-section-open
-  [token-type open?]
-  (ptk/reify ::set-token-type-section-open
+(defn clean-tokens-paths
+  []
+  (ptk/reify ::clean-tokens-paths
     ptk/UpdateEvent
     (update [_ state]
-      (update-in state [:workspace-tokens :open-status-by-type] assoc token-type open?))))
+      (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)))))))))
 
 (defn assign-token-context-menu
   [{:keys [position] :as params}]

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

@@ -22,6 +22,9 @@
    [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

@@ -0,0 +1,177 @@
+;; 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/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] :as props} input-ref]
+  [{:keys [accept multi label-text label-class input-id on-selected data-testid]} input-ref]
   (let [opt-pick-one #(if multi % (first %))
 
         on-files-selected

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

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

frontend/src/app/main/ui/components/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.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

@@ -1,79 +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 "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/dashboard/deleted.scss

@@ -51,10 +51,6 @@
   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/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/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,8 +11,10 @@
    [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]
@@ -97,8 +99,11 @@
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
        [:h2 {:class (stl/css :modal-title)} title]
-       [:button {:class (stl/css :modal-close-btn)
-                 :on-click cancel-fn} deprecated-icon/close]]
+       [:> icon-button* {:variant "ghost"
+                         :class (stl/css :modal-close-btn)
+                         :icon i/close
+                         :aria-label (tr "labels.close")
+                         :on-click cancel-fn}]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? subtitle) (not= subtitle ""))
@@ -124,14 +129,10 @@
       [:div {:class (stl/css :modal-footer)}
        [:div {:class (stl/css :action-buttons)}
         (when-not (= cancel-label :omit)
-          [:input {:class (stl/css :cancel-button)
-                   :type "button"
-                   :value cancel-label
-                   :on-click cancel-fn}])
+          [:> button* {:variant "secondary"
+                       :on-click cancel-fn}
+           cancel-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}]]]]]))
+        [:> button* {:variant (if (= accept-style :danger) "destructive" "primary")
+                     :on-click accept-fn}
+         accept-label]]]]]))

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

@@ -33,7 +33,9 @@
 }
 
 .modal-close-btn {
-  @extend .modal-close-btn-base;
+  position: absolute;
+  top: var(--sp-s);
+  right: var(--sp-s);
 }
 
 .modal-content {
@@ -53,17 +55,6 @@
   @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,6 +12,7 @@
    [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*]]
@@ -63,6 +64,7 @@
     :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,6 +15,7 @@
 
   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
@@ -209,7 +210,8 @@
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder icon disabled
+  [{:keys [id class value default placeholder
+           icon disabled inner-class
            min max max-length step
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
@@ -624,6 +626,7 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
+                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -644,7 +647,7 @@
                                                                    :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
-                                              (mf/html [:> icon-button* {:variant "action"
+                                              (mf/html [:> icon-button* {:variant "ghost"
                                                                          :icon i/tokens
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
@@ -669,6 +672,7 @@
                               :on-token-key-down on-token-key-down
                               :disabled disabled
                               :on-blur on-blur
+                              :class inner-class
                               :slot-start (when icon
                                             (mf/html [:> tooltip*
                                                       {:content property

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

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

frontend/src/app/main/ui/ds/controls/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.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

@@ -0,0 +1,97 @@
+{ /* 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

@@ -0,0 +1,40 @@
+// 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

@@ -0,0 +1,72 @@
+// 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]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/app/main/ui/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/inspect/code.cljs

@@ -19,7 +19,10 @@
    [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.components.radio-buttons :refer [radio-button radio-buttons]]
+   [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.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
@@ -260,8 +263,9 @@
     [:div {:class (stl/css-case :element-options true
                                 :viewer-code-block (= :viewer from))}
      [:div {:class (stl/css :attributes-block)}
-      [:button {:class (stl/css :download-button)
-                :on-click handle-copy-all-code}
+      [:> button* {:variant "secondary"
+                   :class (stl/css :download-button)
+                   :on-click handle-copy-all-code}
        "Copy all code"]]
 
      #_[:div.attributes-block
@@ -288,10 +292,10 @@
        ;;              :options [{:label "CSS" :value "css"}]}]
 
        [:div {:class (stl/css :action-btns)}
-        [:button {:class (stl/css :expand-button)
-                  :on-click on-expand}
-         deprecated-icon/code]
-
+        [:> icon-button* {:variant "ghost"
+                          :aria-label "Expand"
+                          :on-click on-expand
+                          :icon i/code}]
         [:> copy-button* {:data copy-css-fn
                           :class (stl/css :css-copy-btn)
                           :on-copied on-style-copied}]]]
@@ -318,21 +322,21 @@
                         :rotated collapsed-markup?)}
          deprecated-icon/arrow]]
 
-       [:& 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}]]
+       [:> 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"}]}]
 
        [:div {:class (stl/css :action-btns)}
-        [:button {:class (stl/css :expand-button)
-                  :on-click on-expand}
-         deprecated-icon/code]
-
+        [:> icon-button* {:variant "ghost"
+                          :aria-label "Expand"
+                          :on-click on-expand
+                          :icon i/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,16 +17,18 @@
   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 {
-  @extend .button-secondary;
-  @include deprecated.uppercaseTitleTipography;
-  height: deprecated.$s-32;
-  width: 100%;
-  margin: deprecated.$s-8 0;
+  margin: var(--sp-s) 0;
 }
 
 .code-block {
@@ -73,7 +75,6 @@
   gap: deprecated.$s-4;
 }
 
-.expand-button,
 .css-copy-btn,
 .html-copy-btn {
   @extend .button-tertiary;
@@ -85,9 +86,6 @@
   }
 }
 
-.code-lang-options {
-  max-width: deprecated.$s-108;
-}
 .code-lang-select {
   @include deprecated.uppercaseTitleTipography;
   width: deprecated.$s-72;

frontend/src/app/main/ui/settings/profile.cljs

@@ -14,7 +14,7 @@
    [app.main.data.profile :as du]
    [app.main.refs :as refs]
    [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.components.forms :as fm]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -110,11 +110,11 @@
       [:span {:class (stl/css :update-overlay)
               :on-click on-image-click} (tr "labels.update")]
       [:img {:src photo}]
-      [:& file-uploader {:accept "image/jpeg,image/png"
-                         :multi false
-                         :ref input-ref
-                         :on-selected on-file-selected
-                         :data-testid "profile-image-input"}]]]))
+      [:> file-uploader* {:accept "image/jpeg,image/png"
+                          :multi false
+                          :ref input-ref
+                          :on-selected on-file-selected
+                          :data-testid "profile-image-input"}]]]))
 
 ;; --- Profile Page
 

frontend/src/app/main/ui/viewer/comments.cljs

@@ -27,9 +27,8 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(mf/defc comments-menu
-  {::mf/props :obj
-   ::mf/memo true}
+(mf/defc comments-menu*
+  {::mf/memo true}
   []
   (let [state           (mf/deref refs/comments-local)
         cmode           (:mode state)

frontend/src/app/main/ui/viewer/header.cljs

@@ -14,10 +14,13 @@
    [app.main.data.viewer.shortcuts :as sc]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.exports.assets :refer [progress-widget]]
+   [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.exports.assets :refer [progress-widget*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.viewer.comments :refer [comments-menu]]
+   [app.main.ui.viewer.comments :refer [comments-menu*]]
    [app.main.ui.viewer.interactions :refer [flows-menu* interactions-menu*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -33,20 +36,12 @@
   []
   (modal/show! :login-register {}))
 
-(mf/defc zoom-widget
-  {::mf/memo true
-   ::mf/props :obj}
-  [{:keys [zoom
-           on-increase
-           on-decrease
-           on-zoom-reset
-           on-fullscreen
-           on-zoom-fit
-           on-zoom-fill]
-    :as props}]
+(mf/defc zoom-widget*
+  {::mf/memo true}
+  [{:keys [zoom on-increase on-decrease on-zoom-reset on-fullscreen on-zoom-fit on-zoom-fill]}]
+  (let [open* (mf/use-state false)
+        open? (deref open*)
 
-  (let [open*           (mf/use-state false)
-        open?           (deref open*)
         open-dropdown
         (mf/use-fn
          (fn [event]
@@ -75,7 +70,7 @@
 
     [:div {:class (stl/css-case :zoom-widget true
                                 :selected open?)
-           :on-click open-dropdown
+           :on-click (if open? close-dropdown open-dropdown)
            :title (tr "workspace.header.zoom")}
      [:span {:class (stl/css :label)} (fmt/format-percent zoom)]
      [:& dropdown {:show open?
@@ -83,18 +78,18 @@
       [:ul {:class (stl/css :dropdown)}
        [:li  {:class (stl/css :basic-zoom-bar)}
         [:span {:class (stl/css :zoom-btns)}
-         [:button {:class (stl/css :zoom-btn)
-                   :on-click on-decrease}
-          [:span {:class (stl/css :zoom-icon)}
-           deprecated-icon/remove-icon]]
-         [:p  {:class (stl/css :zoom-text)}
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "shortcuts.decrease-zoom")
+                           :on-click on-decrease
+                           :icon i/remove}]
+         [:p {:class (stl/css :zoom-text)}
           (fmt/format-percent zoom)]
-         [:button {:class (stl/css :zoom-btn)
-                   :on-click on-increase}
-          [:span {:class (stl/css :zoom-icon)}
-           deprecated-icon/add]]]
-        [:button {:class (stl/css :reset-btn)
-                  :on-click on-zoom-reset}
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "shortcuts.increase-zoom")
+                           :on-click on-increase
+                           :icon i/add}]]
+        [:> button* {:variant "ghost"
+                     :on-click on-zoom-reset}
          (tr "workspace.header.reset-zoom")]]
 
        [:li {:class (stl/css :zoom-option)
@@ -119,7 +114,7 @@
            [:span {:class (stl/css :shortcut-key)
                    :key (dm/str "zoom-fullscreen-" sc)} sc])]]]]]))
 
-(mf/defc header-options
+(mf/defc header-options*
   [{:keys [section zoom page file index permissions interactions-mode share]}]
   (let [fullscreen?    (mf/deref fullscreen-ref)
 
@@ -159,6 +154,7 @@
         handle-zoom-fit
         (mf/use-fn
          #(st/emit! dv/zoom-to-fit))]
+
     (mf/with-effect [permissions share]
       (when (and
              (:in-team permissions)
@@ -167,7 +163,7 @@
         (open-share-dialog)))
 
     [:div {:class (stl/css :options-zone)}
-     [:& progress-widget]
+     [:> progress-widget*]
 
      (case section
        :interactions [:*
@@ -175,40 +171,41 @@
                         [:> flows-menu* {:page page :index index}])
                       [:> interactions-menu*
                        {:interactions-mode interactions-mode}]]
-       :comments [:& comments-menu]
+       :comments [:> comments-menu*]
        [:div {:class (stl/css :view-options)}])
 
-     [:& zoom-widget
-      {:zoom zoom
-       :on-increase handle-increase
-       :on-decrease handle-decrease
-       :on-zoom-reset handle-zoom-reset
-       :on-zoom-fill handle-zoom-fill
-       :on-zoom-fit  handle-zoom-fit
-       :on-fullscreen toggle-fullscreen}]
+     [:> zoom-widget* {:zoom zoom
+                       :on-increase handle-increase
+                       :on-decrease handle-decrease
+                       :on-zoom-reset handle-zoom-reset
+                       :on-zoom-fill handle-zoom-fill
+                       :on-zoom-fit  handle-zoom-fit
+                       :on-fullscreen toggle-fullscreen}]
 
      (when (:in-team permissions)
-       [:span {:on-click go-to-workspace
-               :class (stl/css :edit-btn)}
-        deprecated-icon/curve])
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "viewer.header.edit-in-workspace")
+                         :on-click go-to-workspace
+                         :icon i/curve}])
 
-     [:span {:title (tr "viewer.header.fullscreen")
-             :class (stl/css-case :fullscreen-btn true
-                                  :selected fullscreen?)
-             :on-click toggle-fullscreen}
-      deprecated-icon/expand]
+     [:> icon-button* {:variant "ghost"
+                       :aria-pressed fullscreen?
+                       :aria-label (tr "viewer.header.fullscreen")
+                       :on-click toggle-fullscreen
+                       :icon i/expand}]
 
      (when (:in-team permissions)
-       [:button {:on-click open-share-dialog
-                 :class (stl/css :share-btn)}
+       [:> button* {:variant "primary"
+                    :class (stl/css :share-btn)
+                    :on-click open-share-dialog}
         (tr "labels.share")])
 
      (when-not (:is-logged permissions)
        [:span {:on-click open-login-dialog
                :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]))
 
-(mf/defc header-sitemap
-  [{:keys [project file page frame toggle-thumbnails] :as props}]
+(mf/defc header-sitemap*
+  [{:keys [project file page frame toggle-thumbnails]}]
   (let [project-name   (:name project)
         file-name      (:name file)
         page-name      (:name page)
@@ -317,44 +314,44 @@
                    :pointer-events (when-not (:in-team permissions) "none")}}
        penpot-logo-icon]
 
-      [:& header-sitemap {:project project
-                          :file file
-                          :page page
-                          :frame frame
-                          :toggle-thumbnails toggle-thumbnails
-                          :index index}]]
+      [:> header-sitemap* {:project project
+                           :file file
+                           :page page
+                           :frame frame
+                           :toggle-thumbnails toggle-thumbnails
+                           :index index}]]
 
      [:div {:class (stl/css :mode-zone)}
-      [:button {:on-click navigate
-                :data-value "interactions"
-                :class (stl/css-case :mode-zone-btn true
-                                     :selected (= section :interactions))
-                :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
-       deprecated-icon/play]
+      [:> icon-button* {:variant "ghost"
+                        :aria-pressed (= section :interactions)
+                        :aria-label (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))
+                        :data-value "interactions"
+                        :on-click navigate
+                        :icon i/play}]
 
       (when (or (:in-team permissions)
                 (= (:who-comment permissions) "all"))
-        [:button {:on-click navigate
-                  :data-value "comments"
-                  :class (stl/css-case :mode-zone-btn true
-                                       :selected (= section :comments))
-                  :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
-         deprecated-icon/comments])
+        [:> icon-button* {:variant "ghost"
+                          :aria-pressed (= section :comments)
+                          :aria-label (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))
+                          :data-value "comments"
+                          :on-click navigate
+                          :icon i/comments}])
 
       (when (or (:in-team permissions)
                 (and (= (:type permissions) :share-link)
                      (= (:who-inspect permissions) "all")))
-        [:button {:on-click go-to-inspect
-                  :class (stl/css-case :mode-zone-btn true
-                                       :selected (= section :inspect))
-                  :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
-         deprecated-icon/code])]
+        [:> icon-button* {:variant "ghost"
+                          :aria-pressed (= section :inspect)
+                          :aria-label (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))
+                          :on-click go-to-inspect
+                          :icon i/code}])]
 
-     [:& header-options {:section section
-                         :permissions permissions
-                         :page page
-                         :file file
-                         :index index
-                         :zoom zoom
-                         :interactions-mode interactions-mode
-                         :share share}]]))
+     [:> header-options* {:section section
+                          :permissions permissions
+                          :page page
+                          :file file
+                          :index index
+                          :zoom zoom
+                          :interactions-mode interactions-mode
+                          :share share}]]))

frontend/src/app/main/ui/viewer/header.scss

@@ -12,7 +12,7 @@
   grid-column: 1 / span 1;
   grid-row: 1 / span 1;
   display: grid;
-  grid-template-columns: 1fr deprecated.$s-92 1fr;
+  grid-template-columns: 1fr auto 1fr;
   justify-content: space-between;
   align-items: center;
   height: deprecated.$s-48;
@@ -130,23 +130,9 @@
 
 // SECTION BUTTONS
 .mode-zone {
-  @include deprecated.flexRow;
-  height: 100%;
-}
-
-.mode-zone-btn {
-  @extend .button-tertiary;
-  @include deprecated.flexCenter;
-  height: deprecated.$s-32;
-  width: deprecated.$s-28;
-  padding: 0;
-  svg {
-    @extend .button-icon;
-  }
-}
-
-.selected {
-  @extend .button-icon-selected;
+  display: flex;
+  flex-direction: row;
+  gap: var(--sp-xs);
 }
 
 // OPTION AREA
@@ -165,33 +151,8 @@
   cursor: pointer;
 }
 
-.fullscreen-btn {
-  @extend .button-tertiary;
-  @include deprecated.flexCenter;
-  height: deprecated.$s-32;
-  width: deprecated.$s-28;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .share-btn {
-  @extend .button-primary;
-  height: deprecated.$s-32;
-  min-width: deprecated.$s-72;
-  margin-left: deprecated.$s-4;
-}
-
-.edit-btn {
-  @extend .button-tertiary;
-  @include deprecated.flexCenter;
-  height: deprecated.$s-32;
-  width: deprecated.$s-28;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
+  margin-left: var(--sp-xs);
 }
 
 .go-log-btn {
@@ -245,43 +206,15 @@
   display: flex;
 }
 
-.zoom-btn {
-  @extend .button-tertiary;
-  height: deprecated.$s-28;
-  width: deprecated.$s-28;
-  border-radius: deprecated.$br-8;
-  .zoom-icon {
-    @include deprecated.flexCenter;
-    width: deprecated.$s-24;
-    height: deprecated.$s-32;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-    }
-  }
-  &:hover {
-    .zoom-icon svg {
-      stroke: var(--button-tertiary-foreground-color-hover);
-    }
-  }
-}
-
 .zoom-text {
   @include deprecated.flexCenter;
   height: 100%;
-  min-width: deprecated.$s-64;
+  min-width: deprecated.$s-48;
   padding: 0;
   margin: 0 deprecated.$s-2;
   color: var(--modal-title-foreground-color);
 }
 
-.reset-btn {
-  @extend .button-tertiary;
-  color: var(--button-tertiary-foreground-color-hover);
-  height: deprecated.$s-28;
-  border-radius: deprecated.$br-8;
-}
-
 .zoom-option {
   @extend .menu-item-base;
   .shortcuts {

frontend/src/app/main/ui/viewer/share_link.cljs

@@ -20,6 +20,9 @@
    [app.main.router :as rt]
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
+   [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.icons :as deprecated-icon]
    [app.util.clipboard :as clipboard]
    [app.util.dom :as dom]
@@ -171,10 +174,11 @@
       [:div {:class (stl/css :share-link-header)}
        [:h2 {:class (stl/css :share-link-title)}
         (tr "common.share-link.title")]
-       [:button {:class (stl/css :modal-close-button)
-                 :on-click on-close
-                 :title (tr "labels.close")}
-        deprecated-icon/close]]
+       [:> icon-button* {:variant "ghost"
+                         :class (stl/css :modal-close-button)
+                         :aria-label (tr "labels.close")
+                         :on-click on-close
+                         :icon i/close}]]
       [:div {:class (stl/css :modal-content)}
        [:div {:class (stl/css :share-link-section)}
         (when (and (not confirm?) (some? current-link))
@@ -185,10 +189,10 @@
                     :placeholder (tr "common.share-link.placeholder")
                     :read-only true}]
 
-           [:button {:class (stl/css :copy-button)
-                     :title (tr "viewer.header.share.copy-link")
-                     :on-click copy-link}
-            deprecated-icon/clipboard]])
+           [:> icon-button* {:variant "ghost"
+                             :aria-label (tr "viewer.header.share.copy-link")
+                             :on-click copy-link
+                             :icon i/clipboard}]])
 
         [:div {:class (stl/css :hint-wrapper)}
          (when (not ^boolean confirm?)
@@ -199,28 +203,22 @@
             [:div {:class (stl/css :description)}
              (tr "common.share-link.confirm-deletion-link-description")]
             [:div {:class (stl/css :actions)}
-             [:input  {:type "button"
-                       :class (stl/css :button-cancel)
-                       :on-click #(reset! confirm* false)
-                       :value (tr "labels.cancel")}]
-             [:input {:type "button"
-                      :class (stl/css :button-danger)
-                      :on-click delete-link
-                      :value (tr "common.share-link.destroy-link")}]]]
+             [:> button* {:variant "secondary"
+                          :on-click #(reset! confirm* false)}
+              (tr "labels.cancel")]
+             [:> button* {:variant "destructive"
+                          :on-click delete-link}
+              (tr "common.share-link.destroy-link")]]]
 
            (some? current-link)
-           [:input
-            {:type "button"
-             :class (stl/css :button-danger)
-             :on-click try-delete-link
-             :value (tr "common.share-link.destroy-link")}]
+           [:> button* {:variant "destructive"
+                        :on-click try-delete-link}
+            (tr "common.share-link.destroy-link")]
 
            :else
-           [:input
-            {:type "button"
-             :class (stl/css :button-active)
-             :on-click create-link
-             :value (tr "common.share-link.get-link")}])]]
+           [:> button* {:variant "primary"
+                        :on-click create-link}
+            (tr "common.share-link.get-link")])]]
 
 
        (when (not ^boolean confirm?)
@@ -305,6 +303,7 @@
                  :options [{:value "team" :label (tr "common.share-link.team-members")}
                            {:value "all" :label (tr "common.share-link.all-users")}]
                  :on-change on-comment-change}]]]
+
              [:div {:class (stl/css :inspect-mode)}
               [:div {:class (stl/css :subtitle)}
                (tr "common.share-link.permissions-can-inspect")]
@@ -315,6 +314,3 @@
                  :options [{:value "team" :label (tr "common.share-link.team-members")}
                            {:value "all" :label (tr "common.share-link.all-users")}]
                  :on-change on-inspect-change}]]]])])]]]))
-
-
-

frontend/src/app/main/ui/viewer/share_link.scss

@@ -30,7 +30,9 @@
 }
 
 .modal-close-button {
-  @extend .modal-close-btn-base;
+  position: absolute;
+  top: var(--sp-s);
+  right: var(--sp-s);
 }
 
 .modal-content {
@@ -74,18 +76,6 @@
   }
 }
 
-.copy-button {
-  @extend .button-secondary;
-  @include deprecated.flexRow;
-  gap: deprecated.$s-8;
-  height: deprecated.$s-32;
-  width: deprecated.$s-28;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground-hover);
-  }
-}
-
 .description {
   @include deprecated.bodySmallTypography;
   color: var(--modal-text-foreground-color);
@@ -97,18 +87,6 @@
   justify-content: flex-end;
 }
 
-.button-active {
-  @extend .modal-accept-btn;
-}
-
-.button-cancel {
-  @extend .modal-cancel-btn;
-}
-
-.button-danger {
-  @extend .modal-danger-btn;
-}
-
 .permissions-section {
   @include deprecated.flexColumn;
   gap: deprecated.$s-8;

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

@@ -36,6 +36,7 @@
    [app.main.ui.workspace.tokens.import]
    [app.main.ui.workspace.tokens.import.modal]
    [app.main.ui.workspace.tokens.management.forms.modals]
+   [app.main.ui.workspace.tokens.remapping-modal]
    [app.main.ui.workspace.tokens.settings]
    [app.main.ui.workspace.tokens.themes.create-modal]
    [app.main.ui.workspace.viewport :refer [viewport*]]

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

@@ -25,10 +25,11 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [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.components.numeric-input :refer [numeric-input*]]
-   [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
    [app.main.ui.components.select :refer [select]]
+   [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.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.hooks :as hooks]
@@ -415,24 +416,25 @@
              :on-change handle-change-mode}]])
 
         (when (and (= origin :sidebar) show-tokens? token-color)
-          [:& radio-buttons {:selected color-style
-                             :on-change toggle-token-color
-                             :name "color-style"}
-           [:& radio-button {:icon i/swatches
-                             :value :direct-color
-                             :title (tr "labels.color")
-                             :id "opt-color"}]
-           [:& radio-button {:icon i/tokens
-                             :value :token-color
-                             :title (tr "workspace.colorpicker.color-tokens")
-                             :id "opt-token-color"}]])]
+          [:> radio-buttons* {:selected color-style
+                              :on-change toggle-token-color
+                              :name "color-style"
+                              :options [{:id "swap-opt-list"
+                                         :icon i/swatches
+                                         :label (tr "labels.color")
+                                         :value :direct-color}
+                                        {:id "swap-opt-grid"
+                                         :icon i/tokens
+                                         :label (tr "workspace.colorpicker.color-tokens")
+                                         :value :token-color}]}])]
 
        (when (and (not= selected-mode :image)
                   (= color-style :direct-color))
-         [:button {:class (stl/css-case :picker-btn true
-                                        :selected picking-color?)
-                   :on-click handle-click-picker}
-          deprecated-icon/picker])
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.colorpicker.get-color")
+                           :aria-pressed picking-color?
+                           :on-click handle-click-picker
+                           :icon i/picker}])
 
        (when (= color-style :token-color)
          [:div {:class (stl/css :token-color-title)}
@@ -483,12 +485,11 @@
                 :aria-label (tr "media.choose-image")
                 :on-click on-fill-image-click}
                (tr "media.choose-image")
-               [:& file-uploader
-                {:input-id "fill-image-upload"
-                 :accept "image/jpeg,image/png"
-                 :multi false
-                 :ref fill-image-ref
-                 :on-selected on-fill-image-selected}]]])
+               [:> file-uploader* {:input-id "fill-image-upload"
+                                   :accept "image/jpeg,image/png"
+                                   :multi false
+                                   :ref fill-image-ref
+                                   :on-selected on-fill-image-selected}]]])
 
            [:*
             [:div {:class (stl/css :colorpicker-tabs)}

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

@@ -46,52 +46,6 @@
   width: px2rem(68);
 }
 
-// TODO: change to DS button component
-.picker-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: $br-8;
-  background-color: transparent;
-  border: $b-1 solid transparent;
-  height: var(--sp-xl);
-  width: var(--sp-xl);
-  border-radius: $br-4;
-  padding: 0;
-  margin-top: var(--sp-xs);
-  svg {
-    @extend .button-icon;
-    stroke: var(--button-tertiary-foreground-color-rest);
-  }
-  &:hover {
-    svg {
-      stroke: var(--button-tertiary-foreground-color-focus);
-    }
-  }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    svg {
-      stroke: var(--button-secondary-foreground-color-hover);
-    }
-  }
-  &:active {
-    outline: none;
-    border: $b-1 solid transparent;
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
-  }
-  &.selected {
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
-  }
-}
-
 .gradient-buttons {
   display: flex;
   align-items: center;

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

@@ -152,7 +152,6 @@
                        (when path-set
                          (ptk/data-event :expand-token-sets {:paths path-set}))
                        (dwtl/set-selected-token-set-id id)
-                       (dwtl/set-token-type-section-open :color true)
                        (let [{:keys [modal title]} (get dwta/token-properties :color)
                              window-size (dom/get-window-size)
                              left-sidebar (dom/get-element "left-sidebar-aside")

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

@@ -30,6 +30,7 @@
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
+   [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.layout.tab-switcher :refer [tab-switcher*]]
@@ -44,12 +45,6 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(def ^:private close-icon
-  (deprecated-icon/icon-xref :close (stl/css :close-icon)))
-
-(def ^:private add-icon
-  (deprecated-icon/icon-xref :add (stl/css :add-icon)))
-
 (defn- get-library-summary
   "Given a library data return a summary representation of this library"
   [data]
@@ -168,12 +163,10 @@
     [:div {:class (stl/css :sample-library-item)
            :key (dm/str id)}
      [:div {:class (stl/css :sample-library-item-name)} (:name library)]
-     [:input {:class (stl/css-case :sample-library-button true
-                                   :sample-library-add (nil? importing?)
-                                   :sample-library-adding (some? importing?))
-              :type "button"
-              :value (if (= importing? id) (tr "labels.adding") (tr "labels.add"))
-              :on-click import-library}]]))
+     [:> button* {:variant "secondary"
+                  :on-click import-library
+                  :disabled (some? importing?)}
+      (if (= importing? id) (tr "labels.adding") (tr "labels.add"))]]))
 
 (defn- empty-library?
   "Check if currentt library summary has elements or not"
@@ -322,14 +315,12 @@
           [:> library-description* {:summary summary}]]]
 
         (if ^boolean is-shared
-          [:input {:class (stl/css :item-unpublish)
-                   :type "button"
-                   :value (tr "common.unpublish")
-                   :on-click unpublish}]
-          [:input {:class (stl/css :item-publish)
-                   :type "button"
-                   :value (tr "common.publish")
-                   :on-click publish}])]
+          [:> button* {:variant "secondary"
+                       :on-click unpublish}
+           (tr "common.unpublish")]
+          [:> button* {:variant "primary"
+                       :on-click publish}
+           (tr "common.publish")])]
 
        (for [{:keys [id name data connected-to connected-to-names] :as library} linked-libraries]
          (let [disabled? (some #(contains? linked-libraries-ids %) connected-to)]
@@ -377,12 +368,11 @@
               (let [summary (-> (:library-summary library)
                                 (adapt-backend-summary))]
                 [:> library-description* {:summary summary}])]]
-
-            [:button {:class (stl/css :item-button-shared)
-                      :data-library-id (dm/str id)
-                      :title (tr "workspace.libraries.shared-library-btn")
-                      :on-click link-library}
-             add-icon]])]
+            [:> icon-button* {:variant "secondary"
+                              :aria-label (tr "workspace.libraries.shared-library-btn")
+                              :icon i/add
+                              :data-library-id (dm/str id)
+                              :on-click link-library}]])]
 
         (when (empty? shared-libraries)
           [:div {:class (stl/css :section-list-empty)}
@@ -647,11 +637,13 @@
            :on-click close-dialog-outside
            :data-testid "libraries-modal"}
      [:div {:class (stl/css :modal-dialog)}
-      [:button {:class (stl/css :close-btn)
-                :on-click close-dialog
-                :aria-label (tr "labels.close")
-                :data-testid "close-libraries"}
-       close-icon]
+      [:> icon-button* {:variant "ghost"
+                        :class (stl/css :close-btn)
+                        :icon i/close
+                        :aria-label (tr "labels.close")
+                        :data-testid "close-libraries"
+                        :on-click close-dialog}]
+
       [:div {:class (stl/css :modal-title)}
        (tr "workspace.libraries.libraries")]
 

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

@@ -33,7 +33,7 @@
   background-color: var(--modal-background-color);
   border: $b-2 solid var(--modal-border-color);
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 0 auto 1fr;
   min-width: $sz-364;
   min-height: $sz-192;
   height: $sz-520;
@@ -42,21 +42,10 @@
   max-width: $sz-712;
 }
 
-// TODO: Remove this extended creating modal component
 .close-btn {
-  @extend .modal-close-btn-base;
-}
-
-.close-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: $sz-16;
-  width: $sz-16;
-  color: transparent;
-  fill: none;
-  stroke-width: $b-1;
-  stroke: var(--icon-foreground);
+  position: absolute;
+  top: var(--sp-s);
+  right: var(--sp-s);
 }
 
 .modal-title {
@@ -120,46 +109,6 @@
   height: fit-content;
 }
 
-.item-publish,
-.item-unpublish {
-  // TODO: remove this extended by using DS button component
-  @extend .button-primary;
-  @include t.use-typography("headline-small");
-  height: $sz-32;
-  min-width: px2rem(92);
-  padding: var(--sp-s) var(--sp-xxl);
-  margin: 0;
-  border-radius: $br-8;
-}
-
-.item-unpublish {
-  // TODO: remove this extended by using DS button component
-  @extend .button-secondary;
-}
-
-.item-button,
-.item-button-shared {
-  // TODO: remove this extended by using DS button component
-  @extend .button-secondary;
-  height: $sz-32;
-  width: $sz-32;
-  margin-inline-start: var(--sp-xxs);
-  padding: var(--sp-s);
-}
-
-.detach-icon,
-.add-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: $sz-16;
-  width: $sz-16;
-  color: transparent;
-  fill: none;
-  stroke-width: $b-1;
-  stroke: var(--icon-foreground);
-}
-
 .section-list-shared {
   max-height: px2rem(272);
 }
@@ -170,26 +119,6 @@
   color: var(--title-foreground-color);
 }
 
-.search-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: px2rem(20);
-  padding: 0 0 0 var(--sp-s);
-
-  svg {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: transparent;
-    fill: none;
-    height: px2rem(12);
-    width: px2rem(12);
-    stroke-width: 1.33px;
-    stroke: var(--icon-foreground);
-  }
-}
-
 // empty state
 .section-list-empty {
   display: grid;
@@ -428,24 +357,3 @@
   text-overflow: ellipsis;
   max-width: px2rem(232);
 }
-
-// TODO: Remove this extended using a DS component
-.sample-library-add {
-  @extend .button-secondary;
-}
-
-// TODO: Remove this extended using a DS component
-.sample-library-adding {
-  @extend .button-disabled;
-}
-
-.sample-library-button {
-  @include t.use-typography("headline-small");
-  height: $sz-32;
-  width: px2rem(80);
-  margin: 0;
-  border-radius: $br-8;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

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

@@ -853,8 +853,9 @@
 
     [:*
      [:> icon-button* {:variant "ghost"
+                       :aria-pressed show-menu?
                        :aria-label (tr "shortcut-subsection.main-menu")
-                       :on-click open-menu
+                       :on-click (if show-menu? close-all-menus open-menu)
                        :icon i/menu}]
 
      [:> dropdown-menu* {:show show-menu?

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

@@ -18,9 +18,10 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.hooks :as h]
    [app.main.ui.hooks.resize :as r]
-   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.color-palette :refer [color-palette*]]
    [app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu*]]
    [app.main.ui.workspace.text-palette :refer [text-palette]]
@@ -178,27 +179,27 @@
         [:ul {:class (dm/str size-classname " " (stl/css-case :palette-btn-list true
                                                               :hidden-bts hide-palettes?))}
          [:li {:class (stl/css :palette-item)}
-          [:button {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
-                    :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
-                    :class (stl/css-case :palette-btn true
-                                         :selected color-palette?)
-                    :on-click on-select-color-palette}
-           deprecated-icon/drop-icon]]
-
+          [:> icon-button* {:variant "ghost"
+                            :aria-pressed (some? color-palette?)
+                            :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
+                            :on-click on-select-color-palette
+                            :icon i/drop}]]
          [:li {:class (stl/css :palette-item)}
-          [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
-                    :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
-                    :class (stl/css-case :palette-btn true
-                                         :selected text-palette?)
-                    :on-click on-select-text-palette}
-           deprecated-icon/text-palette]]]
-
+          [:> icon-button* {:variant "ghost"
+                            :aria-pressed (some? text-palette?)
+                            :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
+                            :on-click on-select-text-palette
+                            :icon i/text-palette}]]]
 
         (if any-palette?
           [:*
-           [:button {:class (stl/css :palette-actions)
-                     :on-click #(swap! state* update :show-menu not)}
-            deprecated-icon/menu]
+           [:div {:class (stl/css :menu-btn)}
+            [:> icon-button* {:variant "ghost"
+                              :aria-pressed show-menu?
+                              :aria-label (tr "labels.options")
+                              :on-click #(swap! state* update :show-menu not)
+                              :icon i/menu}]]
+
            [:div {:class (stl/css :palette)
                   :ref container}
             (when text-palette?

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

@@ -49,7 +49,6 @@
   &.wide {
     width: 100%;
   }
-
   .resize-area {
     grid-area: resize;
     height: deprecated.$s-8;
@@ -72,49 +71,22 @@
     &.small-palette {
       display: flex;
     }
-    .palette-item {
-      @include deprecated.flexCenter;
-      border-radius: deprecated.$br-8;
-      opacity: deprecated.$op-10;
-      transition: opacity 1s ease;
-      .palette-btn {
-        @extend .button-tertiary;
-        height: deprecated.$s-32;
-        width: deprecated.$s-32;
-        border-radius: deprecated.$br-8;
-        background-clip: padding-box;
-        padding: 0;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-        }
-        &.selected {
-          @extend .button-icon-selected;
-        }
-      }
-    }
-  }
-
-  .palette-actions {
-    @extend .button-tertiary;
-    grid-area: actions;
-    height: calc(var(--height) - deprecated.$s-16);
-    width: deprecated.$s-32;
-    padding: 0;
-    margin-left: deprecated.$s-4;
-    border-radius: deprecated.$br-8;
-    background-color: var(--palette-background-color);
-    z-index: deprecated.$z-index-2;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-    }
   }
   .palette {
     grid-area: palette;
     width: 100%;
     min-width: 0;
   }
+  .palette-item {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  margin-left: var(--sp-s);
 }
 
 .handler {

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

@@ -29,7 +29,7 @@
             :style {:background-color color}
             :src (cfg/resolve-profile-photo-url profile)}]]))
 
-(mf/defc active-sessions
+(mf/defc active-sessions*
   {::mf/memo true}
   []
   (let [profiles     (mf/deref refs/profiles)

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

@@ -20,23 +20,19 @@
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
    [app.main.ui.dashboard.team]
+   [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.exports.assets :refer [progress-widget]]
+   [app.main.ui.exports.assets :refer [progress-widget*]]
    [app.main.ui.formats :as fmt]
-   [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.workspace.presence :refer [active-sessions]]
+   [app.main.ui.workspace.presence :refer [active-sessions*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def ref:persistence-status
-  (l/derived :status refs/persistence))
-
 ;; --- Zoom Widget
 
-(mf/defc zoom-widget-workspace
+(mf/defc zoom-widget-workspace*
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}]
@@ -72,11 +68,12 @@
         zoom (fmt/format-percent zoom {:precision 0})]
 
     [:*
-     [:div {:on-click open-dropdown
+     [:div {:on-click (if open? close-dropdown open-dropdown)
             :class (stl/css-case :zoom-widget true
                                  :selected open?)
             :title (tr "workspace.header.zoom")}
       [:span {:class (stl/css :label)} zoom]]
+
      [:& dropdown {:show open? :on-close close-dropdown}
       [:ul {:class (stl/css :dropdown)}
        [:li {:class (stl/css :basic-zoom-bar)}
@@ -90,9 +87,10 @@
                            :aria-label (tr "shortcuts.increase-zoom")
                            :on-click on-increase
                            :icon i/add}]]
-        [:button {:class (stl/css :reset-btn)
-                  :on-click on-zoom-reset}
+        [:> button* {:variant "ghost"
+                     :on-click on-zoom-reset}
          (tr "workspace.header.reset-zoom")]]
+
        [:li {:class (stl/css :zoom-option)
              :on-click on-zoom-fit}
         (tr "workspace.header.zoom-fit-all")
@@ -100,6 +98,7 @@
          (for [sc (scd/split-sc (sc/get-tooltip :fit-all))]
            [:span {:class (stl/css :shortcut-key)
                    :key (str "zoom-fit-" sc)} sc])]]
+
        [:li {:class (stl/css :zoom-option)
              :on-click on-zoom-selected}
         (tr "workspace.header.zoom-selected")
@@ -198,51 +197,43 @@
 
     [:div {:class (stl/css :workspace-header-right)}
      [:div {:class (stl/css :users-section)}
-      [:& active-sessions]]
+      [:> active-sessions*]]
 
-     [:& progress-widget]
+     [:> progress-widget*]
 
      [:div {:class (stl/css :separator)}]
 
      [:div {:class (stl/css :zoom-section)}
-      [:& zoom-widget-workspace
-       {:zoom zoom
-        :on-increase on-increase
-        :on-decrease on-decrease
-        :on-zoom-reset on-zoom-reset
-        :on-zoom-fit on-zoom-fit
-        :on-zoom-selected on-zoom-selected}]]
+      [:> zoom-widget-workspace* {:zoom zoom
+                                  :on-increase on-increase
+                                  :on-decrease on-decrease
+                                  :on-zoom-reset on-zoom-reset
+                                  :on-zoom-fit on-zoom-fit
+                                  :on-zoom-selected on-zoom-selected}]]
 
-     [:div {:class (stl/css :comments-section)}
-      [:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
-                :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
-                :class (stl/css-case :comments-btn true
-                                     :selected (= selected-drawtool :comments))
-                :on-click toggle-comments
-                :data-tool "comments"
-                :style {:position "relative"}}
-       deprecated-icon/comments
-       (when ^boolean has-unread-comments?
-         [:div {:class (stl/css :unread)}])]]
+     [:div {:class (stl/css :comments-button-wrapper)}
+      [:> icon-button* {:variant "ghost"
+                        :aria-pressed (= selected-drawtool :comments)
+                        :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
+                        :on-click toggle-comments
+                        :icon i/comments}]
+      (when ^boolean has-unread-comments?
+        [:div {:class (stl/css :unread)}])]
 
      (when-not ^boolean read-only?
-       [:div {:class (stl/css :history-section)}
-        [:button
-         {:title (tr "workspace.sidebar.history")
-          :aria-label (tr "workspace.sidebar.history")
-          :class (stl/css-case :selected (contains? layout :document-history)
-                               :history-button true)
-          :on-click toggle-history}
-         deprecated-icon/history]])
+       [:> icon-button* {:variant "ghost"
+                         :aria-pressed (contains? layout :document-history)
+                         :aria-label (tr "workspace.sidebar.history")
+                         :on-click toggle-history
+                         :icon i/history}])
 
      (when display-share-button?
-       [:a {:class (stl/css :viewer-btn)
-            :title (tr "workspace.header.share")
-            :on-click open-share-dialog}
-        deprecated-icon/share])
-
-     [:a {:class (stl/css :viewer-btn)
-          :title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
-          :on-click nav-to-viewer}
-      deprecated-icon/play]]))
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "workspace.header.share")
+                         :on-click open-share-dialog
+                         :icon i/to-corner}])
 
+     [:> icon-button* {:variant "ghost"
+                       :aria-label (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
+                       :on-click nav-to-viewer
+                       :icon i/play}]]))

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

@@ -11,8 +11,8 @@
   justify-content: space-between;
   align-items: center;
   min-width: deprecated.$s-256;
-  padding: deprecated.$s-8;
-  gap: deprecated.$s-8;
+  padding: deprecated.$s-8 deprecated.$s-12;
+  gap: deprecated.$s-4;
   background-color: var(--panel-background-color);
 }
 
@@ -28,19 +28,14 @@
 }
 
 .zoom-widget {
-  @include deprecated.buttonStyle;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: deprecated.$s-28;
-  max-width: deprecated.$s-48;
   width: deprecated.$s-48;
-  border-radius: deprecated.$br-8;
+  height: deprecated.$s-32;
 
   .label {
     @include deprecated.bodySmallTypography;
-    height: 100%;
-    padding: deprecated.$s-8 0;
     color: var(--button-tertiary-foreground-color-rest);
   }
 
@@ -84,13 +79,6 @@
   color: var(--modal-title-foreground-color);
 }
 
-.reset-btn {
-  @extend .button-tertiary;
-  color: var(--button-tertiary-foreground-color-hover);
-  height: deprecated.$s-28;
-  border-radius: deprecated.$br-8;
-}
-
 .zoom-option {
   @extend .menu-item-base;
 
@@ -113,127 +101,11 @@
   }
 }
 
-.comments-btn {
-  @extend .button-tertiary;
-  border-radius: deprecated.$br-8;
-  margin: 0;
-  height: deprecated.$s-28;
-  width: deprecated.$s-28;
-  border: none;
-
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-  }
-
-  &:hover {
-    background-color: transparent;
-    border: none;
-  }
-
-  &.selected {
-    background-color: var(--button-tertiary-background-color-selected);
-
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
-  }
+.comments-button-wrapper {
+  position: relative;
 }
 
-.history-button {
-  @extend .button-tertiary;
-  border-radius: deprecated.$br-8;
-  margin: 0;
-  height: deprecated.$s-28;
-  width: deprecated.$s-28;
-  border: none;
-
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-  }
-
-  &:hover {
-    background-color: transparent;
-    border: none;
-  }
-
-  &.selected {
-    background-color: var(--button-tertiary-background-color-selected);
-
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
-  }
-}
-
-.persistence-status-widget {
-  @include deprecated.flexCenter;
-  width: deprecated.$s-28;
-  height: deprecated.$s-28;
-}
-
-.status-icon {
-  @include deprecated.flexCenter;
-  width: deprecated.$s-24;
-  height: deprecated.$s-24;
-  margin: 0;
-  border-radius: deprecated.$br-circle;
-
-  svg {
-    @extend .button-icon;
-    stroke: var(--status-widget-icon-foreground-color);
-  }
-}
-
-.pending-status {
-  background-color: var(--status-widget-background-color-warning);
-}
-
-.saving-status {
-  background-color: var(--status-widget-background-color-pending);
-
-  svg {
-    animation: spin-animation 1s infinite;
-    animation-timing-function: linear;
-  }
-}
-
-.saved-status {
-  background-color: var(--status-widget-background-color-success);
-}
-
-.error-status {
-  background-color: var(--status-widget-background-color-error);
-}
-
-.share-btn,
-.viewer-btn {
-  @extend .button-tertiary;
-  border-radius: deprecated.$br-8;
-  margin: 0;
-  width: deprecated.$s-28;
-  height: deprecated.$s-28;
-  border: none;
-
-  svg {
-    @extend .button-icon;
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-    stroke: var(--icon-foreground);
-  }
-
-  &:hover {
-    background-color: transparent;
-    border: none;
-  }
-}
-
-.unread {
+.comments-button-unread {
   position: absolute;
   width: 8px;
   height: 8px;

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

@@ -17,8 +17,9 @@
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library*]]
    [app.util.dom :as dom]
@@ -161,43 +162,40 @@
             :id      "typographies"
             :handler on-section-filter-change}])]
 
-    [:article  {:class (stl/css :assets-bar)}
+    [:article {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
         (if (and (= num-libs 1) (empty? components))
-          [:button {:class (stl/css :add-library-button)
-                    :on-click show-libraries-dialog
-                    :data-testid "libraries"}
+          [:> button* {:variant "primary"
+                       :on-click show-libraries-dialog
+                       :data-testid "libraries"}
            (tr "workspace.assets.add-library")]
-
-          [:button {:class (stl/css :libraries-button)
-                    :on-click show-libraries-dialog
-                    :data-testid "libraries"}
+          [:> button* {:variant "secondary"
+                       :on-click show-libraries-dialog
+                       :data-testid "libraries"}
            (tr "workspace.assets.manage-library")]))
 
-
       [:div {:class (stl/css :search-wrapper)}
        [:> search-bar* {:on-change on-search-term-change
                         :value term
                         :placeholder (tr "workspace.assets.search")}
-        [:button
-         {:on-click on-open-menu
-          :title (tr "workspace.assets.filter")
-          :class (stl/css-case :section-button true
-                               :opened menu-open?)}
-         deprecated-icon/filter-icon]]
+        [:> icon-button* {:variant "secondary"
+                          :icon i/filter
+                          :class (stl/css :filter-button)
+                          :aria-pressed menu-open?
+                          :aria-label (tr "workspace.assets.filter")
+                          :on-click on-open-menu}]]
 
-       [:> context-menu*
-        {:on-close on-menu-close
-         :selectable true
-         :selected section
-         :show menu-open?
-         :fixed true
-         :min-width true
-         :width size
-         :top 158
-         :left 18
-         :options options}]
+       [:> context-menu* {:on-close on-menu-close
+                          :selectable true
+                          :selected section
+                          :show menu-open?
+                          :fixed true
+                          :min-width true
+                          :width size
+                          :top 158
+                          :left 18
+                          :options options}]
 
        [:> icon-button* {:variant "ghost"
                          :aria-label (tr "workspace.assets.sort")

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

@@ -17,89 +17,14 @@
   padding-top: deprecated.$s-8;
 }
 
-.libraries-button {
-  @extend .button-secondary;
-  @include deprecated.uppercaseTitleTipography;
-  gap: deprecated.$s-2;
-  height: deprecated.$s-32;
-  width: 100%;
-  margin-bottom: deprecated.$s-4;
-  border-radius: deprecated.$s-8;
-
-  &:hover {
-    background-color: var(--button-secondary-background-color-hover);
-    color: var(--button-secondary-foreground-color-hover);
-    border: deprecated.$s-1 solid var(--button-secondary-border-color-hover);
-  }
-
-  &:focus {
-    background-color: var(--button-secondary-background-color-focus);
-    color: var(--button-secondary-foreground-color-focus);
-    border: deprecated.$s-1 solid var(--button-secondary-border-color-focus);
-  }
+.assets-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xxs);
 }
 
-.add-library-button {
-  @extend .button-primary;
-  @include deprecated.uppercaseTitleTipography;
-  gap: deprecated.$s-2;
-  height: deprecated.$s-32;
-  width: 100%;
-  margin-bottom: deprecated.$s-4;
-  border-radius: deprecated.$s-8;
-}
-
-.section-button {
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
-  height: deprecated.$s-32;
-  width: deprecated.$s-32;
-  margin: 0;
-  border: deprecated.$s-1 solid var(--input-border-color-rest);
-  border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
-  background-color: var(--input-background-color-rest);
-
-  svg {
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-    stroke: var(--icon-foreground);
-  }
-
-  &:focus {
-    border: deprecated.$s-1 solid var(--input-border-color-focus);
-    outline: 0;
-    background-color: var(--input-background-color-focus);
-    color: var(--input-foreground-color-focus);
-
-    svg {
-      background-color: var(--input-background-color-focus);
-    }
-  }
-
-  &:hover {
-    border: deprecated.$s-1 solid var(--input-border-color-hover);
-    background-color: var(--input-background-color-hover);
-
-    svg {
-      background-color: var(--input-background-color-hover);
-      stroke: var(--button-foreground-hover);
-    }
-
-    &:focus {
-      border: deprecated.$s-1 solid var(--input-border-color-focus);
-      outline: 0;
-      background-color: var(--input-background-color-focus);
-      color: var(--input-foreground-color-focus);
-
-      svg {
-        background-color: var(--input-background-color-focus);
-      }
-    }
-  }
-
-  &.opened {
-    @extend .button-icon-selected;
-  }
+.filter-button {
+  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
 }
 
 .sections-container {
@@ -125,10 +50,6 @@
   border-radius: deprecated.$br-8;
 }
 
-.section-btn {
-  @include deprecated.buttonStyle;
-}
-
 .assets-header {
   padding: 0 0 deprecated.$s-24 deprecated.$s-12;
 }

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -22,10 +22,10 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-label :refer [editable-label*]]
-   [app.main.ui.components.file-uploader :refer [file-uploader]]
-   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
+   [app.main.ui.components.file-uploader :refer [file-uploader*]]
    [app.main.ui.context :as ctx]
    [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 :refer [icon*] :as i]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -563,27 +563,27 @@
      [:> cmm/asset-section-block* {:role :title-button}
       (when ^boolean is-open
         [:div
-         [:& radio-buttons {:selected (if is-listing-thumbs "grid" "list")
-                            :on-change toggle-list-style
-                            :name "listing-style"}
-          [:& radio-button {:icon i/view-as-list
-                            :value "list"
-                            :title (tr "workspace.assets.list-view")
-                            :id "opt-list"}]
-          [:& radio-button {:icon i/flex-grid
-                            :value "grid"
-                            :title (tr "workspace.assets.grid-view")
-                            :id "opt-grid"}]]])
+         [:> radio-buttons* {:selected (if is-listing-thumbs "grid" "list")
+                             :on-change toggle-list-style
+                             :name "listing-style"
+                             :options [{:id "opt-list"
+                                        :icon i/view-as-list
+                                        :label (tr "workspace.assets.list-view")
+                                        :value "list"}
+                                       {:id "opt-grid"
+                                        :icon i/flex-grid
+                                        :label (tr "workspace.assets.grid-view")
+                                        :value "grid"}]}]])
 
       (when (and (not read-only?) is-local)
         [:> icon-button* {:variant "ghost"
                           :aria-label (tr "workspace.assets.components.add-component")
                           :on-click add-component
                           :icon i/add}
-         [:& file-uploader {:accept dwm/accept-image-types
-                            :multi true
-                            :ref input-ref
-                            :on-selected on-file-selected}]])]
+         [:> file-uploader* {:accept dwm/accept-image-types
+                             :multi true
+                             :ref input-ref
+                             :on-selected on-file-selected}]])]
 
      [:> cmm/asset-section-block* {:role :content}
       (when ^boolean is-open

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs

@@ -23,7 +23,7 @@
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.groups :as grp]
-   [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
+   [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -113,18 +113,17 @@
            :on-drag-over dom/prevent-default
            :on-drop on-drop}
 
-     [:& typography-entry
-      {:file-id file-id
-       :typography typography
-       :local? local?
-       :selected? (contains? selected typography-id)
-       :on-click on-asset-click
-       :on-change handle-change
-       :on-context-menu on-context-menu
-       :editing? editing?
-       :renaming? renaming?
-       :focus-name? rename?
-       :external-open* open*}]
+     [:> typography-entry* {:file-id file-id
+                            :typography typography
+                            :local? local?
+                            :selected? (contains? selected typography-id)
+                            :on-click on-asset-click
+                            :on-change handle-change
+                            :on-context-menu on-context-menu
+                            :editing? editing?
+                            :renaming? renaming?
+                            :focus-name? rename?
+                            :external-open* open*}]
      (when ^boolean dragging?
        [:div {:class (stl/css :dragging)}])]))
 

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

@@ -139,30 +139,29 @@
                         :variant-properties variant-properties
                         :variant-error variant-error
                         :component-id (:id component)
-                        :is-hidden hidden?}]
-
-       (when (not read-only?)
-         [:div {:class (stl/css-case
-                        :element-actions true
-                        :is-parent has-shapes?
-                        :selected hidden?
-                        :selected blocked?)}
-          [:button {:class (stl/css-case
-                            :toggle-element true
-                            :selected hidden?)
-                    :title (if hidden?
-                             (tr "workspace.shape.menu.show")
-                             (tr "workspace.shape.menu.hide"))
-                    :on-click on-toggle-visibility}
-           (if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
-          [:button {:class (stl/css-case
-                            :block-element true
-                            :selected blocked?)
-                    :title (if (:blocked item)
-                             (tr "workspace.shape.menu.unlock")
-                             (tr "workspace.shape.menu.lock"))
-                    :on-click on-toggle-blocking}
-           (if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]]
+                        :is-hidden hidden?}]]
+      (when (not read-only?)
+        [:div {:class (stl/css-case
+                       :element-actions true
+                       :is-parent has-shapes?
+                       :selected hidden?
+                       :selected blocked?)}
+         [:button {:class (stl/css-case
+                           :toggle-element true
+                           :selected hidden?)
+                   :title (if hidden?
+                            (tr "workspace.shape.menu.show")
+                            (tr "workspace.shape.menu.hide"))
+                   :on-click on-toggle-visibility}
+          (if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
+         [:button {:class (stl/css-case
+                           :block-element true
+                           :selected blocked?)
+                   :title (if (:blocked item)
+                            (tr "workspace.shape.menu.unlock")
+                            (tr "workspace.shape.menu.lock"))
+                   :on-click on-toggle-blocking}
+          (if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]
 
      children]))
 

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

@@ -4,79 +4,81 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "ds/_utils.scss" as *;
+@use "ds/borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .layer-row {
-  --layer-indentation-size: calc(#{deprecated.$s-4} * 6);
+  --layer-indentation-size: var(--sp-xxl);
+  --layer-background-color: var(--color-background-primary);
+  --layer-foreground-color: inherit;
+  --shadow-color: transparent;
+  box-shadow: px2rem(16) px2rem(0) px2rem(0) px2rem(0) var(--shadow-color);
+
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
-  background-color: var(--layer-row-background-color);
-  border: deprecated.$s-2 solid transparent;
+  inline-size: 100%;
+  background-color: var(--layer-background-color);
+  border: $b-2 solid transparent;
+  color: var(--layer-foreground-color);
 
   &.highlight,
   &:hover {
+    --layer-background-color: var(--color-background-secondary);
+    --shadow-color: var(--color-background-secondary);
     --context-hover-color: var(--layer-row-foreground-color-hover);
-    --context-hover-opacity: deprecated.$op-10;
-    background-color: var(--layer-row-background-color-hover);
-    color: var(--layer-row-foreground-color-hover);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-hover);
+    --context-hover-opacity: 1;
+    --layer-foreground-color: var(--layer-row-foreground-color-hover);
     &.hidden {
-      opacity: deprecated.$op-10;
+      opacity: 1;
     }
   }
 
   &.selected {
-    background-color: var(--layer-row-background-color-selected);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-selected);
+    --layer-background-color: var(--color-background-quaternary);
+    --shadow-color: var(--color-background-quaternary);
   }
 
   &.selected.highlight,
   &.selected:hover {
-    background-color: var(--layer-row-background-color-selected);
+    --layer-background-color: var(--color-background-quaternary);
   }
 
   .parent-selected & {
-    background-color: var(--layer-child-row-background-color);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-child-row-background-color);
+    --layer-background-color: var(--color-background-tertiary);
+    --shadow-color: var(--color-background-tertiary);
   }
 
   .parent-selected &.highlight,
   .parent-selected &:hover {
-    background-color: var(--layer-row-background-color-hover);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-hover);
+    --layer-background-color: var(--color-background-secondary);
+    --shadow-color: var(--color-background-secondary);
   }
 
   &.dnd-over-bot {
-    border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
+    border-block-end: $b-2 solid var(--color-accent-primary);
   }
   &.dnd-over-top {
-    border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
+    border-block-start: $b-2 solid var(--color-accent-primary);
   }
   &.dnd-over {
-    border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
+    border: $b-2 solid var(--color-accent-primary);
   }
 }
 
 .element-children {
   .layer-row.highlight &,
   .layer-row:hover & {
-    background-color: var(--layer-row-background-color-selected);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-selected);
+    --layer-background-color: var(--color-background-quaternary);
+    --shadow-color: var(--color-background-quaternary);
   }
   .layer-row.type-comp & {
-    color: var(--layer-row-component-foreground-color);
+    --layer-foreground-color: var(--color-accent-secondary);
   }
   .layer-row.selected & {
-    background-color: transparent;
-    color: var(--layer-row-foreground-color-selected);
+    --layer-background-color: transparent;
+    --layer-foreground-color: var(--color-accent-primary);
   }
 }
 
@@ -84,21 +86,22 @@
   align-items: center;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  column-gap: deprecated.$s-4;
-  height: deprecated.$s-32;
-  width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
+  column-gap: var(--sp-xs);
+  block-size: $sz-32;
+  inline-size: calc(100% - (var(--depth) * var(--layer-indentation-size)));
   cursor: pointer;
-  min-width: px2rem(140);
+  min-inline-size: px2rem(140);
   &.filtered {
-    width: calc(100% - deprecated.$s-12);
+    inline-size: calc(100% - $sz-12);
   }
 }
 
 .element-actions {
-  display: none;
-  height: 100%;
   display: flex;
   align-items: end;
+  position: sticky;
+  inset-inline-end: 0;
+  block-size: $sz-32;
 
   &.selected {
     display: flex;
@@ -111,95 +114,107 @@
 
 .button-content {
   display: flex;
-  height: 100%;
+  block-size: 100%;
 }
 
 .icon-shape {
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
   position: relative;
   justify-self: flex-end;
-  width: deprecated.$s-16;
-  height: 100%;
-  width: deprecated.$s-24;
-  padding-inline-start: deprecated.$s-4;
-  color: var(--icon-foreground);
+  block-size: 100%;
+  inline-size: $sz-24;
+  padding-inline-start: var(--sp-xs);
+  color: var(--color-foreground-secondary);
   .layer-row.selected & {
-    color: var(--layer-row-foreground-color-selected);
+    color: var(--color-accent-primary);
   }
   .layer-row.type-comp & {
-    color: var(--layer-row-component-foreground-color);
+    color: var(--color-accent-secondary);
   }
   .inverse & {
     transform: rotate(-90deg);
   }
   .layer-row.hidden & {
-    opacity: deprecated.$op-7;
+    opacity: 0.7;
   }
   .layer-row.highlight &,
   .layer-row:hover & {
-    opacity: deprecated.$op-10;
+    opacity: 1;
     svg {
-      stroke: var(--layer-row-foreground-color-hover);
+      stroke: var(--color-accent-primary);
     }
   }
 }
 
 .absolute {
   position: absolute;
-  background-color: var(--layer-row-foreground-color);
-  opacity: deprecated.$op-4;
-  width: deprecated.$s-12;
-  height: deprecated.$s-12;
-  border-radius: deprecated.$br-2;
+  background-color: var(--color-foreground-secondary);
+  opacity: 0.4;
+  inline-size: $sz-12;
+  block-size: $sz-12;
+  border-radius: px2rem(2);
 
   .layer-row.hidden & {
-    opacity: deprecated.$op-1;
+    opacity: 0.1;
   }
   .layer-row.type-comp & {
-    background-color: var(--layer-row-component-foreground-color);
+    background-color: var(--color-accent-secondary);
   }
   .layer-row.highlight &,
   .layer-row:hover & {
-    opacity: deprecated.$op-4;
-    background-color: var(--layer-row-foreground-color-hover);
+    opacity: 0.4;
+    background-color: var(--color-accent-primary);
   }
   .layer-row.selected & {
-    background-color: var(--layer-row-foreground-color-selected);
+    background-color: var(--color-accent-primary);
   }
 }
 
 .toggle-content {
-  @include deprecated.buttonStyle;
+  border: none;
+  background: none;
+  cursor: pointer;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
-  height: 100%;
-  width: deprecated.$s-24;
-  padding-inline-start: deprecated.$s-8;
+  block-size: 100%;
+  inline-size: $sz-24;
+  padding-inline-start: var(--sp-s);
 
   svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: transparent;
+    fill: none;
+    block-size: $sz-12;
+    inline-size: $sz-12;
+    stroke-width: 1.33px;
+    stroke: var(--color-foreground-secondary);
 
     .layer-row.hidden & {
-      opacity: deprecated.$op-7;
+      opacity: 0.7;
     }
     .layer-row.selected & {
-      stroke: var(--layer-row-foreground-color-selected);
+      stroke: var(--color-accent-primary);
     }
     .layer-row.type-comp & {
-      stroke: var(--layer-row-component-foreground-color);
+      stroke: var(--color-accent-secondary);
     }
     .layer-row.highlight &,
     .layer-row:hover & {
-      opacity: deprecated.$op-10;
-      stroke: var(--layer-row-foreground-color-hover);
+      opacity: 1;
+      stroke: var(--color-accent-primary);
     }
   }
 
   .layer-row.selected & {
-    background-color: var(--layer-row-background-color-selected);
+    background-color: var(--color-background-quaternary);
   }
   &.inverse svg {
     transform: rotate(90deg);
@@ -208,65 +223,78 @@
 
 .toggle-element,
 .block-element {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
-  height: 100%;
-  width: deprecated.$s-24;
+  --layer-row-action-btn-background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: 100%;
+  inline-size: $sz-24;
   margin: 0;
   display: none;
-
+  background: var(--layer-row-action-btn-background);
+  padding-inline-end: px2rem(6);
   svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: transparent;
+    fill: none;
+    block-size: $sz-12;
+    inline-size: $sz-12;
+    stroke-width: 1.33px;
+    stroke: var(--color-foreground-secondary);
 
     .layer-row.hidden & {
-      opacity: deprecated.$op-7;
+      opacity: 0.7;
     }
     .type-comp & {
-      stroke: var(--layer-row-component-foreground-color);
+      stroke: var(--color-accent-secondary);
     }
   }
 
   .element-actions.selected & {
     display: flex;
-    opacity: deprecated.$op-0;
-
+    opacity: 0;
     &.selected {
-      opacity: deprecated.$op-10;
+      opacity: 1;
     }
   }
 
   .layer-row:hover .element-actions.selected & {
-    opacity: deprecated.$op-10;
+    opacity: 1;
   }
 
   .layer-row.highlight &,
   .layer-row:hover & {
     display: flex;
+    --layer-row-action-btn-background: var(--color-background-secondary);
     svg {
-      opacity: deprecated.$op-10;
-      stroke: var(--layer-row-foreground-color-hover);
+      opacity: 1;
+      stroke: var(--color-accent-primary);
     }
   }
   .layer-row.selected & {
     display: flex;
+    --layer-row-action-btn-background: var(--color-background-quaternary);
     svg {
-      stroke: var(--layer-row-foreground-color-selected);
+      stroke: var(--color-accent-primary);
     }
   }
 }
 
 :global(.sticky) {
   position: sticky;
-  top: deprecated.$s-0;
-  z-index: deprecated.$z-index-4;
+  inset-block-start: 0;
+  z-index: 4;
 }
 
 .tab-indentation {
   display: block;
-  height: deprecated.$s-16;
-  min-width: calc(var(--depth) * var(--layer-indentation-size));
+  block-size: $sz-16;
+  min-inline-size: calc(var(--depth) * var(--layer-indentation-size));
 }
 .filtered {
-  min-width: deprecated.$s-12;
+  min-inline-size: $sz-12;
 }

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

@@ -291,13 +291,12 @@
                             :value current-search
                             :on-clear clear-search-text
                             :placeholder (tr "workspace.sidebar.layers.search")}
-            [:button {:on-click on-toggle-filters-click
-                      :class (stl/css-case
-                              :filter-button true
-                              :opened show-menu?
-                              :active active?)}
-             [:> icon* {:icon-id i/filter}]]]
-
+            [:> icon-button* {:variant "secondary"
+                              :class (stl/css :filter-button)
+                              :aria-pressed show-menu?
+                              :aria-label (tr "workspace.sidebar.layers.filter")
+                              :on-click on-toggle-filters-click
+                              :icon i/filter}]]
            [:> icon-button* {:variant "ghost"
                              :aria-label (tr "labels.close")
                              :on-click toggle-search

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

@@ -19,39 +19,7 @@
     padding: 0 deprecated.$s-12 0 deprecated.$s-8;
     gap: deprecated.$s-4;
     .filter-button {
-      @include deprecated.flexCenter;
-      @include deprecated.buttonStyle;
-      height: deprecated.$s-32;
-      width: deprecated.$s-32;
-      margin: 0;
-      border: deprecated.$s-1 solid var(--color-background-tertiary);
-      border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
-      background-color: var(--color-background-tertiary);
-      svg {
-        height: deprecated.$s-16;
-        width: deprecated.$s-16;
-        stroke: var(--icon-foreground);
-      }
-      &:focus {
-        border: deprecated.$s-1 solid var(--input-border-color-focus);
-        outline: 0;
-        background-color: var(--input-background-color-active);
-        color: var(--input-foreground-color-active);
-        svg {
-          background-color: var(--input-background-color-active);
-        }
-      }
-      &:hover {
-        border: deprecated.$s-1 solid var(--input-border-color-hover);
-        background-color: var(--input-background-color-hover);
-        svg {
-          background-color: var(--input-background-color-hover);
-          stroke: var(--button-foreground-hover);
-        }
-      }
-      &.opened {
-        @extend .button-icon-selected;
-      }
+      border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
     }
   }
 }
@@ -143,7 +111,7 @@
 .filters-container {
   @extend .menu-dropdown;
   position: absolute;
-  left: deprecated.$s-20;
+  left: deprecated.$s-16;
   width: deprecated.$s-192;
   .filter-menu-item {
     @include deprecated.bodySmallTypography;
@@ -212,6 +180,8 @@
   overflow-y: overlay;
   scrollbar-gutter: stable;
 }
+
 .element-list {
   display: grid;
+  position: relative;
 }

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

@@ -12,7 +12,7 @@
    [app.main.data.workspace.drawing :as dwd]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
+   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
@@ -95,15 +95,15 @@
                (when preset-match
                  [:span {:class (stl/css :check-icon)} deprecated-icon/tick])])))]]]
 
-     [:& radio-buttons {:selected (or (d/name orientation) "")
-                        :on-change on-orientation-change
-                        :name "frame-orientation"
-                        :wide true
-                        :class (stl/css :radio-buttons)}
-      [:& radio-button {:icon i/size-vertical
-                        :value "vertical"
-                        :id "size-vertical"}]
-      [:& radio-button {:icon i/size-horizontal
-                        :value "horizontal"
-                        :id "size-horizontal"}]]]))
-
+     [:> radio-buttons* {:class (stl/css :radio-buttons)
+                         :selected (or (d/name orientation) "")
+                         :on-change on-orientation-change
+                         :name "frame-orientation"
+                         :options [{:id "size-vertical"
+                                    :icon i/size-vertical
+                                    :label (tr "workspace.options.orientation.vertical")
+                                    :value "vertical"}
+                                   {:id "size-horizontal"
+                                    :icon i/size-horizontal
+                                    :label (tr "workspace.options.orientation.horizontal")
+                                    :value "horizontal"}]}]]))

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

@@ -10,7 +10,8 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.store :as st]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -42,68 +43,59 @@
     (when-not (and disabled-align disabled-distribute)
       [:div {:class (stl/css :align-options)}
        [:div {:class (stl/css :align-group-horizontal)}
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-align)
-                  :disabled disabled-align
-                  :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
-                  :data-value "hleft"
-                  :on-click align-objects}
-         deprecated-icon/align-left]
+        [:> icon-button* {:variant "ghost"
+                          :icon i/align-left
+                          :aria-label (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
+                          :on-click align-objects
+                          :data-value "hleft"
+                          :disabled disabled-align}]
 
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-align)
-                  :disabled disabled-align
-                  :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
-                  :data-value "hcenter"
-                  :on-click align-objects}
-         deprecated-icon/align-horizontal-center]
+        [:> icon-button* {:variant "ghost"
+                          :icon i/align-horizontal-center
+                          :aria-label (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
+                          :on-click align-objects
+                          :data-value "hcenter"
+                          :disabled disabled-align}]
 
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-align)
-                  :disabled disabled-align
-                  :title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
-                  :data-value "hright"
-                  :on-click align-objects}
-         deprecated-icon/align-right]
+        [:> icon-button* {:variant "ghost"
+                          :icon i/align-right
+                          :aria-label (tr "workspace.align.hright" (sc/get-tooltip :align-right))
+                          :on-click align-objects
+                          :data-value "hright"
+                          :disabled disabled-align}]
 
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-distribute)
-                  :disabled disabled-distribute
-                  :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
-                  :data-value "horizontal"
-                  :on-click distribute-objects}
-         deprecated-icon/distribute-horizontally]]
+        [:> icon-button* {:variant "ghost"
+                          :icon i/distribute-horizontally
+                          :aria-label (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
+                          :on-click distribute-objects
+                          :data-value "horizontal"
+                          :disabled disabled-distribute}]]
 
        [:div {:class (stl/css :align-group-vertical)}
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-align)
-                  :disabled disabled-align
-                  :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
-                  :data-value "vtop"
-                  :on-click  align-objects}
-         deprecated-icon/align-top]
+        [:> icon-button* {:variant "ghost"
+                          :icon i/align-top
+                          :aria-label (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
+                          :on-click align-objects
+                          :data-value "vtop"
+                          :disabled disabled-align}]
 
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-align)
-                  :disabled disabled-align
-                  :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
-                  :data-value "vcenter"
-                  :on-click  align-objects}
-         deprecated-icon/align-vertical-center]
+        [:> icon-button* {:variant "ghost"
+                          :icon i/align-vertical-center
+                          :aria-label (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
+                          :on-click align-objects
+                          :data-value "vcenter"
+                          :disabled disabled-align}]
 
-        [:button {:class (stl/css-case :align-button true
-                                       :disabled disabled-align)
-                  :disabled disabled-align
-                  :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
-                  :data-value "vbottom"
-                  :on-click  align-objects}
-         deprecated-icon/align-bottom]
-
-        [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
-                  :class (stl/css-case :align-button true
-                                       :disabled disabled-distribute)
-                  :disabled disabled-distribute
-                  :data-value "vertical"
-                  :on-click distribute-objects}
-         deprecated-icon/distribute-vertical-spacing]]])))
+        [:> icon-button* {:variant "ghost"
+                          :icon i/align-bottom
+                          :aria-label (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
+                          :on-click align-objects
+                          :data-value "vbottom"
+                          :disabled disabled-align}]
 
+        [:> icon-button* {:variant "ghost"
+                          :icon i/distribute-vertical-spacing
+                          :aria-label (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
+                          :on-click distribute-objects
+                          :data-value "vertical"
+                          :disabled disabled-distribute}]]])))

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

@@ -4,12 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .align-options {
   @include sidebar.option-grid-structure;
-  height: deprecated.$s-32;
 }
 .align-group-horizontal,
 .align-group-vertical {
@@ -26,27 +24,3 @@
 .align-group-vertical {
   grid-column: 5 / span 4;
 }
-
-.align-button {
-  @extend .button-tertiary;
-  height: deprecated.$s-32;
-  width: deprecated.$s-32;
-  padding: 0;
-  border-radius: deprecated.$br-8;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-  &.disabled {
-    cursor: default;
-    svg {
-      stroke: var(--button-foreground-color-disabled);
-    }
-    &:hover {
-      background-color: var(--panel-background-color);
-      svg {
-        stroke: var(--button-foreground-color-disabled);
-      }
-    }
-  }
-}

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

@@ -15,7 +15,6 @@
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -103,10 +102,12 @@
         [:div {:class (stl/css-case :first-row true
                                     :hidden hidden?)}
          [:div {:class (stl/css :blur-info)}
-          [:button {:class (stl/css-case :show-more true
-                                         :selected more-options?)
-                    :on-click toggle-more-options}
-           deprecated-icon/menu]
+          [:> icon-button* {:variant "secondary"
+                            :class (stl/css :show-more)
+                            :aria-label (tr "labels.options")
+                            :aria-pressed more-options?
+                            :on-click toggle-more-options
+                            :icon i/menu}]
           [:span {:class (stl/css :label)}
            (tr "workspace.options.blur-options.title")]]
          [:div {:class (stl/css :actions)}

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

@@ -37,21 +37,7 @@
     border-radius: deprecated.$br-8;
     background-color: var(--input-details-color);
     .show-more {
-      @extend .button-secondary;
-      height: deprecated.$s-32;
-      width: deprecated.$s-28;
       border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-      box-sizing: border-box;
-      border: deprecated.$s-1 solid var(--button-secondary-background-color-rest);
-      svg {
-        @extend .button-icon;
-      }
-      &.selected {
-        background-color: var(--button-radio-background-color-active);
-        svg {
-          stroke: var(--button-radio-foreground-color-active);
-        }
-      }
     }
     .label {
       @include deprecated.bodySmallTypography;

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

@@ -15,15 +15,12 @@
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.features :as features]
    [app.main.store :as st]
-   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
+   [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.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(def ^:private flatten-icon
-  (deprecated-icon/icon-xref :boolean-flatten (stl/css :flatten-icon)))
-
 (mf/defc bool-options*
   [{:keys [total-selected shapes shapes-with-children]}]
   (let [head      (first shapes)
@@ -70,41 +67,40 @@
                  (st/emit! (dwb/change-bool-type head-id bool-type)))))))
 
         flatten-objects
-        (mf/use-fn  #(st/emit! (dwps/convert-selected-to-path)))]
+        (mf/use-fn
+         #(st/emit! (dwps/convert-selected-to-path)))]
 
     (when (not (and disabled-bool-btns disabled-flatten))
       [:div {:class (stl/css :boolean-options)}
-       [:div {:class (stl/css :bool-group)}
-        [:& radio-buttons {:selected (d/name head-bool-type)
-                           :class (stl/css :boolean-radio-btn)
-                           :on-change on-change
-                           :name "bool-options"}
-         [:& radio-button {:icon i/boolean-union
-                           :value "union"
-                           :disabled disabled-bool-btns
-                           :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
-                           :id "bool-opt-union"}]
-         [:& radio-button {:icon i/boolean-difference
-                           :value "difference"
-                           :disabled disabled-bool-btns
-                           :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
-                           :id "bool-opt-differente"}]
-         [:& radio-button {:icon i/boolean-intersection
-                           :value "intersection"
-                           :disabled disabled-bool-btns
-                           :title (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")")
-                           :id "bool-opt-intersection"}]
-         [:& radio-button {:icon i/boolean-exclude
-                           :value "exclude"
-                           :disabled disabled-bool-btns
-                           :title (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")
-                           :id "bool-opt-exclude"}]]]
+       [:div {:class (stl/css :boolean-group)}
+        [:> radio-buttons* {:class (stl/css :boolean-radio-btn)
+                            :variant "ghost"
+                            :selected (d/name head-bool-type)
+                            :on-change on-change
+                            :name "bool-options"
+                            :options [{:id "bool-opt-union"
+                                       :icon i/boolean-union
+                                       :label (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
+                                       :value "union"
+                                       :disabled disabled-bool-btns}
+                                      {:id "bool-opt-differente"
+                                       :icon i/boolean-difference
+                                       :label (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
+                                       :value "difference"
+                                       :disabled disabled-bool-btns}
+                                      {:id "bool-opt-intersection"
+                                       :icon i/boolean-intersection
+                                       :label (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")")
+                                       :value "intersection"
+                                       :disabled disabled-bool-btns}
+                                      {:id "bool-opt-exclude"
+                                       :icon i/boolean-exclude
+                                       :label (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")
+                                       :value "exclude"
+                                       :disabled disabled-bool-btns}]}]]
 
-       [:button
-        {:title (tr "workspace.shape.menu.flatten")
-         :class (stl/css-case
-                 :flatten-button true
-                 :disabled disabled-flatten)
-         :disabled disabled-flatten
-         :on-click flatten-objects}
-        flatten-icon]])))
+       [:> icon-button* {:variant "ghost"
+                         :icon i/boolean-flatten
+                         :aria-label (tr "workspace.shape.menu.flatten")
+                         :on-click flatten-objects
+                         :disabled disabled-flatten}]])))

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

@@ -4,45 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .boolean-options {
   @include sidebar.option-grid-structure;
-  height: var(--sp-xxxl);
 }
 
-.bool-group {
+.boolean-group {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / span 4;
 }
 
-.flatten-button {
-  @extend .button-tertiary;
-  height: deprecated.$s-32;
-  width: deprecated.$s-32;
-  border-radius: deprecated.$br-8;
-  grid-column: 5 / span 1;
-  --flatten-icon-foreground-color: var(--icon-foreground);
-
-  &.disabled {
-    cursor: default;
-    --flatten-icon-foreground-color: var(--button-foreground-color-disabled);
-
-    &:hover {
-      background-color: var(--panel-background-color);
-      --flatten-icon-foreground-color: var(--button-foreground-color-disabled);
-    }
-  }
-}
-
-.flatten-icon {
-  @extend .button-icon;
-  stroke: var(--flatten-icon-foreground-color);
-}
-
 .boolean-radio-btn {
   background-color: transparent;
-  gap: var(--sp-xs);
 }

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

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

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

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

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

@@ -13,6 +13,7 @@
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -49,16 +50,16 @@
          • :prop      → the property type (:fill, :stroke, :shadow, etc.)
          • :shape-id  → the UUID of the shape using this color
          • :index     → index of the color in the shape's fill/stroke list
-   
+
    Example of groups:
    {
      {:color \"#9f2929\", :opacity 0.3,  :token-name \"asd2\" :has-token-applied true}
      [{:prop :fill, :shape-id #uuid \"d0231035-25c9-80d5-8006-eae4c3dff32e\", :index 0}]
-   
+
      {:color \"#1b54b6\", :opacity 1}
      [{:prop :fill, :shape-id #uuid \"aab34f9a-98c1-801a-8006-eae5e8236f1b\", :index 0}]
    }
-   
+
    This structure allows fast lookups of all shapes using the same visual color,
    regardless of whether it comes from local fills, strokes or shadow-colors."
 
@@ -217,8 +218,8 @@
                :origin :color-selection
                :on-close on-close}]))
          (when (and (false? @expand-lib-color) (< 3 (count library-colors)))
-           [:button  {:class (stl/css :more-colors-btn)
-                      :on-click #(reset! expand-lib-color true)}
+           [:> button* {:variant "secondary"
+                        :on-click #(reset! expand-lib-color true)}
             (tr "workspace.options.more-lib-colors")])]
 
         [:div {:class (stl/css :selected-color-group)}
@@ -235,8 +236,8 @@
              :on-close on-close}])
 
          (when (and (false? @expand-color) (< 3 (count colors)))
-           [:button  {:class (stl/css :more-colors-btn)
-                      :on-click #(reset! expand-color true)}
+           [:> button* {:variant "secondary"
+                        :on-click #(reset! expand-color true)}
             (tr "workspace.options.more-colors")])]
 
         [:div {:class (stl/css :selected-color-group)}
@@ -259,6 +260,6 @@
 
          (when (and (false? @expand-token-color)
                     (< 3 (count token-colors)))
-           [:button {:class (stl/css :more-colors-btn)
-                     :on-click #(reset! expand-token-color true)}
+           [:> button* {:variant "secondary"
+                        :on-click #(reset! expand-token-color true)}
             (tr "workspace.options.more-token-colors")])]])]))

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

@@ -40,7 +40,5 @@
 }
 
 .more-colors-btn {
-  @extend .button-secondary;
-  @include deprecated.uppercaseTitleTipography;
-  height: deprecated.$s-32;
+  justify-content: center;
 }

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

@@ -28,7 +28,6 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.select :refer [select]]
@@ -37,6 +36,7 @@
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
+   [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.foundations.assets.icon :refer [icon*] :as i]
@@ -507,7 +507,7 @@
 
                    mdata     {:on-error #(do
                                            (reset! key* (uuid/next))
-                                           (st/emit! (ntf/error error-msg)))}
+                                           (st/emit! (ntf/warn error-msg)))}
                    params    {:shapes shapes :pos pos :val val}]
                (st/emit! (dwv/variants-switch (with-meta params mdata)))))))
 
@@ -794,15 +794,17 @@
       [:div  {:class (stl/css :swap-library)}
        [:div {:class (stl/css :swap-library-title)}
         [:div {:class (stl/css :swap-library-name)} current-lib-name]
-        [:& radio-buttons {:selected (if (:listing-thumbs? filters) "grid" "list")
-                           :on-change toggle-list-style
-                           :name "swap-listing-style"}
-         [:& radio-button {:icon i/view-as-list
-                           :value "list"
-                           :id "swap-opt-list"}]
-         [:& radio-button {:icon i/flex-grid
-                           :value "grid"
-                           :id "swap-opt-grid"}]]]
+        [:> radio-buttons* {:selected (if (:listing-thumbs? filters) "grid" "list")
+                            :on-change toggle-list-style
+                            :name "swap-listing-style"
+                            :options [{:id "swap-opt-list"
+                                       :icon i/view-as-list
+                                       :label (tr "workspace.assets.list-view")
+                                       :value "list"}
+                                      {:id "swap-opt-grid"
+                                       :icon i/flex-grid
+                                       :label (tr "workspace.assets.grid-view")
+                                       :value "grid"}]}]]
 
        (when-not (or search? (str/empty? (:path filters)))
          [:button {:class (stl/css :swap-library-back)
@@ -897,11 +899,13 @@
 
      (when menu-entries?
        [:div {:class (stl/css :pill-actions)}
-        [:button {:class (stl/css-case :pill-actions-btn true
-                                       :selected menu-open?)
-                  :on-click on-menu-click}
-         [:> icon* {:icon-id i/menu}]]
-
+        [:> icon-button* {:variant "secondary"
+                          :class (stl/css-case :pill-actions-btn true
+                                               :extended subtext)
+                          :aria-pressed menu-open?
+                          :aria-label (tr "labels.options")
+                          :on-click on-menu-click
+                          :icon i/menu}]
         [:& dropdown {:show menu-open?
                       :on-close on-menu-close}
          [:ul {:class (stl/css-case :pill-actions-dropdown true

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

@@ -587,14 +587,9 @@
 }
 
 .pill-actions-btn {
-  @extend .button-secondary;
-  cursor: unset;
-  block-size: 100%;
-  inline-size: 100%;
   border-radius: 0 $br-8 $br-8 0;
-
-  &.selected {
-    @extend .button-icon-selected;
+  &.extended {
+    block-size: $sz-48;
   }
 }
 

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

@@ -16,7 +16,7 @@
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -61,6 +61,7 @@
         constraints-h (or (get values :constraints-h) (gsh/default-constraints-h values))
         constraints-v (or (get values :constraints-v) (gsh/default-constraints-v values))
 
+        fixed-scroll? (d/nilv (:fixed-scroll values) false)
 
         on-constraint-button-clicked
         (mf/use-fn
@@ -218,16 +219,8 @@
               :options options-v
               :on-change on-constraint-v-select-changed}]]
            (when first-level?
-             [:div {:class (stl/css :checkbox)}
-
-              [:label {:for "fixed-on-scroll"
-                       :class (stl/css-case :checked (:fixed-scroll values))}
-               [:span {:class (stl/css-case :check-mark true
-                                            :checked (:fixed-scroll values))}
-                (when (:fixed-scroll values)
-                  deprecated-icon/status-tick)]
-               (tr "workspace.options.constraints.fix-when-scrolling")
-               [:input {:type "checkbox"
-                        :id "fixed-on-scroll"
-                        :checked (:fixed-scroll values)
-                        :on-change on-fixed-scroll-clicked}]]])]])])))
+             [:> checkbox* {:id "fixed-on-scroll"
+                            :class (stl/css :checkbox)
+                            :label (tr "workspace.options.constraints.fix-when-scrolling")
+                            :checked fixed-scroll?
+                            :on-change on-fixed-scroll-clicked}])]])])))