🐛 Fix glich when applying padding

* ✨ Replace border radius numeric input

* ✨ Add border radius token inputs on multiple selection

.github/workflows/build-bundle.yml

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

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

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

.github/workflows/build-docker.yml

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

.github/workflows/tests.yml

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

CHANGES.md

@@ -16,7 +16,7 @@
 
 ### :bug: Bugs fixed
 
-### :bug: Bugs fixed
+- Fix prototype connections lost when switching between variants [Taiga #12812](https://tree.taiga.io/project/penpot/issue/12812)
 
 ## 2.13.0 (Unreleased)
 

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,647 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import {
+  setupEmptyTokensFile,
+  setupTokensFile,
+  setupTypographyTokensFile,
+  unfoldTokenTree,
+} from "./helpers";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
+});
+
+test.describe("Tokens: Apply token", () => {
+  test("User applies color token to a shape", async ({ page }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers
+      .getByTestId("layer-row")
+      .filter({ hasText: "Button" })
+      .click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "color", "colors.black");
+
+    await tokensSidebar
+      .getByRole("button", { name: "black" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Fill").click();
+
+    await expect(
+      workspacePage.page.getByLabel("Name: colors.black"),
+    ).toBeVisible();
+  });
+
+  test("User applies border-radius token to a shape from sidebar", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    // Open tokens sections on left sidebar
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    // Unfold border radius tokens
+    await page.getByRole("button", { name: "Border Radius 3" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "borderRadius" }),
+    ).toBeVisible();
+    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
+    ).toBeVisible();
+
+    // Apply border radius token from token panels
+    await tokensSidebar
+      .getByRole("button", { name: "borderRadius.sm" })
+      .click();
+
+    // Check if border radius sections is visible on right sidebar
+    const borderRadiusSection = page.getByRole("region", {
+      name: "border-radius-section",
+    });
+    await expect(borderRadiusSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const brTokenPillSM = borderRadiusSection.getByRole("button", {
+      name: "borderRadius.sm",
+    });
+    await expect(brTokenPillSM).toBeVisible();
+    await brTokenPillSM.click();
+
+    // Change token from dropdown
+    const brTokenOptionXl = borderRadiusSection.getByLabel("borderRadius.xl");
+    await expect(brTokenOptionXl).toBeVisible();
+    await brTokenOptionXl.click();
+
+    await expect(brTokenPillSM).not.toBeVisible();
+    const brTokenPillXL = borderRadiusSection.getByRole("button", {
+      name: "borderRadius.xl",
+    });
+    await expect(brTokenPillXL).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = borderRadiusSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.click();
+    await expect(brTokenPillXL).not.toBeVisible();
+  });
+
+  test("User applies opacity token to a shape from sidebar", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    // Open tokens sections on left sidebar
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    // Unfold opacity tokens
+    await page.getByRole("button", { name: "Opacity 3" }).click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "opacity", exact: true }),
+    ).toBeVisible();
+    await tokensSidebar
+      .getByRole("button", { name: "opacity", exact: true })
+      .click();
+    await expect(
+      tokensSidebar.getByRole("button", { name: "opacity.high" }),
+    ).toBeVisible();
+
+    // Apply opacity token from token panels
+    await tokensSidebar.getByRole("button", { name: "opacity.high" }).click();
+
+    // Check if opacity sections is visible on right sidebar
+    const layerMenuSection = page.getByRole("region", {
+      name: "layer-menu-section",
+    });
+    await expect(layerMenuSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const opacityHighPill = layerMenuSection.getByRole("button", {
+      name: "opacity.high",
+    });
+    await expect(opacityHighPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = layerMenuSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.click();
+
+    // Open dropdown from input
+    const dropdownBtn = layerMenuSection.getByLabel("Open token list");
+    await expect(dropdownBtn).toBeVisible();
+    await dropdownBtn.click();
+
+    // Change token from dropdown
+    const opacityLowOption = layerMenuSection.getByRole("option", {
+      name: "opacity.low",
+    });
+    await expect(opacityLowOption).toBeVisible();
+    await opacityLowOption.click();
+
+    await expect(opacityHighPill).not.toBeVisible();
+    const opacityLowPill = layerMenuSection.getByRole("button", {
+      name: "opacity.low",
+    });
+    await expect(opacityLowPill).toBeVisible();
+  });
+
+  test("User applies typography token to a text shape", async ({ page }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTypographyTokensFile(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers
+      .getByTestId("layer-row")
+      .filter({ hasText: "Some Text" })
+      .click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    await tokensSidebar
+      .getByRole("button")
+      .filter({ hasText: "Typography" })
+      .click();
+
+    await tokensSidebar.getByRole("button", { name: "Full" }).click();
+
+    const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
+      name: "Font Size",
+    });
+    await expect(fontSizeInput).toBeVisible();
+    await expect(fontSizeInput).toHaveValue("100");
+  });
+
+  test("User adds shadow token with multiple shadows and applies it to shape", async ({
+    page,
+  }) => {
+    const {
+      tokensUpdateCreateModal,
+      tokensSidebar,
+      workspacePage,
+      tokenContextMenuForToken,
+    } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+    await test.step("Stage 1: Basic open", async () => {
+      // User adds shadow via the sidebar
+      await tokensTabPanel
+        .getByRole("button", { name: "Add Token: Shadow" })
+        .click();
+
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      const nameField = tokensUpdateCreateModal.getByLabel("Name");
+      await nameField.fill("primary");
+
+      // User adds first shadow with a color from the color ramp
+      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-0",
+      );
+      await expect(firstShadowFields).toBeVisible();
+
+      // Fill in the shadow values
+      const offsetXInput = firstShadowFields.getByLabel("X");
+      const offsetYInput = firstShadowFields.getByLabel("Y");
+      const blurInput = firstShadowFields.getByRole("textbox", {
+        name: "Blur",
+      });
+      const spreadInput = firstShadowFields.getByRole("textbox", {
+        name: "Spread",
+      });
+
+      await offsetXInput.fill("2");
+      await offsetYInput.fill("2");
+      await blurInput.fill("4");
+      await spreadInput.fill("0");
+
+      // Add color using the color picker
+      const colorBullet = firstShadowFields.getByTestId(
+        "token-form-color-bullet",
+      );
+      await colorBullet.click();
+
+      // Click on the color ramp to select a color
+      const valueSaturationSelector = tokensUpdateCreateModal.getByTestId(
+        "value-saturation-selector",
+      );
+      await expect(valueSaturationSelector).toBeVisible();
+      await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
+
+      // Verify that a color value was set
+      const colorInput = firstShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+      await expect(colorInput).toHaveValue(/^rgb(.*)$/);
+
+      // Wait for validation to complete
+      await expect(
+        tokensUpdateCreateModal.getByText(/Resolved value:/).first(),
+      ).toBeVisible();
+
+      // Save button should be enabled
+      const submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await expect(submitButton).toBeEnabled();
+    });
+
+    await test.step("Stage 2: Shadow adding/removing works", async () => {
+      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-0",
+      );
+      const colorInput = firstShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+      const firstColorValue = await colorInput.inputValue();
+
+      // User adds a second shadow
+      const addButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Add Shadow",
+      });
+      await addButton.click();
+
+      const secondShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-1",
+      );
+      await expect(secondShadowFields).toBeVisible();
+
+      // User adds a third shadow
+      await addButton.click();
+
+      const thirdShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-2",
+      );
+      await expect(thirdShadowFields).toBeVisible();
+
+      // User adds values for the third shadow
+      const thirdOffsetXInput = thirdShadowFields.getByLabel("X");
+      const thirdOffsetYInput = thirdShadowFields.getByLabel("Y");
+      const thirdBlurInput = thirdShadowFields.getByRole("textbox", {
+        name: "Blur",
+      });
+      const thirdSpreadInput = thirdShadowFields.getByRole("textbox", {
+        name: "Spread",
+      });
+      const thirdColorInput = thirdShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+
+      await thirdOffsetXInput.fill("10");
+      await thirdOffsetYInput.fill("10");
+      await thirdBlurInput.fill("20");
+      await thirdSpreadInput.fill("5");
+      await thirdColorInput.fill("#FF0000");
+
+      // User removes the 2nd shadow
+      const removeButton2 = secondShadowFields.getByRole("button", {
+        name: "Remove Shadow",
+      });
+      await removeButton2.click();
+
+      // Verify that we have only two shadow fields
+      await expect(thirdShadowFields).not.toBeVisible();
+
+      // Verify that the first shadow kept its values
+      const firstOffsetXValue = await firstShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const firstOffsetYValue = await firstShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const firstBlurValue = await firstShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const firstSpreadValue = await firstShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const firstColorValueAfter = await firstShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(firstOffsetXValue).toBe("2");
+      await expect(firstOffsetYValue).toBe("2");
+      await expect(firstBlurValue).toBe("4");
+      await expect(firstSpreadValue).toBe("0");
+      await expect(firstColorValueAfter).toBe(firstColorValue);
+
+      // Verify that the second kept its values (after shadow 3)
+      // After removing index 1, the third shadow becomes the second shadow at index 1
+      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-1",
+      );
+      await expect(newSecondShadowFields).toBeVisible();
+
+      const secondOffsetXValue = await newSecondShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const secondOffsetYValue = await newSecondShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const secondBlurValue = await newSecondShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const secondSpreadValue = await newSecondShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const secondColorValue = await newSecondShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(secondOffsetXValue).toBe("10");
+      await expect(secondOffsetYValue).toBe("10");
+      await expect(secondBlurValue).toBe("20");
+      await expect(secondSpreadValue).toBe("5");
+      await expect(secondColorValue).toBe("#FF0000");
+    });
+
+    await test.step("Stage 3: Restore when switching tabs works", async () => {
+      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-0",
+      );
+      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
+        "shadow-input-fields-1",
+      );
+      const colorInput = firstShadowFields.getByRole("textbox", {
+        name: "Color",
+      });
+      const firstColorValue = await colorInput.inputValue();
+
+      // Switch to reference tab
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
+      await referenceTabButton.click();
+
+      // Verify we're in reference mode - the composite fields should not be visible
+      await expect(firstShadowFields).not.toBeVisible();
+
+      // Switch back to composite tab
+      const compositeTabButton =
+        tokensUpdateCreateModal.getByTestId("composite-opt");
+      await compositeTabButton.click();
+
+      // Verify that shadows are restored
+      await expect(firstShadowFields).toBeVisible();
+      await expect(newSecondShadowFields).toBeVisible();
+
+      // Verify first shadow values are still there
+      const restoredFirstOffsetX = await firstShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const restoredFirstOffsetY = await firstShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const restoredFirstBlur = await firstShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const restoredFirstSpread = await firstShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const restoredFirstColor = await firstShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(restoredFirstOffsetX).toBe("2");
+      await expect(restoredFirstOffsetY).toBe("2");
+      await expect(restoredFirstBlur).toBe("4");
+      await expect(restoredFirstSpread).toBe("0");
+      await expect(restoredFirstColor).toBe(firstColorValue);
+
+      // Verify second shadow values are still there
+      const restoredSecondOffsetX = await newSecondShadowFields
+        .getByLabel("X")
+        .inputValue();
+      const restoredSecondOffsetY = await newSecondShadowFields
+        .getByLabel("Y")
+        .inputValue();
+      const restoredSecondBlur = await newSecondShadowFields
+        .getByRole("textbox", { name: "Blur" })
+        .inputValue();
+      const restoredSecondSpread = await newSecondShadowFields
+        .getByRole("textbox", { name: "Spread" })
+        .inputValue();
+      const restoredSecondColor = await newSecondShadowFields
+        .getByRole("textbox", { name: "Color" })
+        .inputValue();
+
+      await expect(restoredSecondOffsetX).toBe("10");
+      await expect(restoredSecondOffsetY).toBe("10");
+      await expect(restoredSecondBlur).toBe("20");
+      await expect(restoredSecondSpread).toBe("5");
+      await expect(restoredSecondColor).toBe("#FF0000");
+    });
+
+    await test.step("Stage 4: Layer application works", async () => {
+      // Save the token
+      const submitButton = tokensUpdateCreateModal.getByRole("button", {
+        name: "Save",
+      });
+      await submitButton.click();
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+      unfoldTokenTree(tokensSidebar, "shadow", "primary");
+
+      // Verify token appears in sidebar
+      const shadowToken = tokensSidebar.getByRole("button", {
+        name: "primary",
+      });
+      await expect(shadowToken).toBeEnabled();
+
+      // Apply the shadow
+      await workspacePage.clickLayers();
+      await workspacePage.clickLeafLayer("Button");
+
+      const shadowSection = workspacePage.rightSidebar.getByText("Drop shadow");
+      await expect(shadowSection).toHaveCount(0);
+
+      await page.getByRole("tab", { name: "Tokens" }).click();
+      await shadowToken.click();
+
+      await expect(shadowSection).toHaveCount(2);
+    });
+  });
+
+  test("User applies dimension token to a shape on width and height", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar.getByRole("button", { name: "dimension.sm" }).click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toHaveCount(2);
+    await dimensionSMTokenPill.nth(1).click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).toHaveCount(1);
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(1).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape on x position", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.sm" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("AxisX").click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toBeVisible();
+    await dimensionSMTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape on y position", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.sm" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Y").click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toBeVisible();
+    await dimensionSMTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+  
+});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -183,6 +183,7 @@
   [:map
    [:id {:optional true} :string]
    [:class {:optional true} :string]
+   [:inner-class {:optional true} :string]
    [:value {:optional true} [:maybe [:or
                                      :int
                                      :float
@@ -209,12 +210,13 @@
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder icon disabled
+  [{:keys [id class value default placeholder
+           icon disabled inner-class
            min max max-length step
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
            on-change on-blur on-focus on-detach
-           property align ref]
+           property align ref name]
     :rest props}]
 
   (let [;; NOTE: we use mfu/bean here for transparently handle
@@ -624,6 +626,7 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
+                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -644,7 +647,7 @@
                                                                    :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
-                                              (mf/html [:> icon-button* {:variant "action"
+                                              (mf/html [:> icon-button* {:variant "ghost"
                                                                          :icon i/tokens
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
@@ -659,7 +662,10 @@
                 label       (get token :name)
                 token-value (or (get token :resolved-value)
                                 (or (mf/ref-val last-value*)
-                                    (fmt/format-number value)))]
+                                    (fmt/format-number value)))
+                token-value (if (= name :opacity)
+                              (* 100 token-value)
+                              token-value)]
             (mf/spread-props props
                              {:id id
                               :label label
@@ -669,6 +675,7 @@
                               :on-token-key-down on-token-key-down
                               :disabled disabled
                               :on-blur on-blur
+                              :class inner-class
                               :slot-start (when icon
                                             (mf/html [:> tooltip*
                                                       {:content property

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,6 +6,7 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
+@use "ds/_utils.scss" as *;
 
 .element-set-content {
   @include sidebar.option-grid-structure;
@@ -43,3 +44,9 @@
     }
   }
 }
+
+.numeric-input-wrapper {
+  grid-column: span 2;
+  --dropdown-width: var(--7-columns-dropdown-width);
+  --dropdown-offset: #{px2rem(-35)};
+}

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

@@ -78,7 +78,7 @@
                                                       (nil? (get values name)))
                                                 (tr "settings.multiple")
                                                 "--")
-                                 :class (stl/css :numeric-input-measures)
+                                 :class (stl/css :numeric-input-layout)
                                  :applied-token (get applied-tokens name)
                                  :tokens tokens
                                  :align align
@@ -369,12 +369,12 @@
            (if (or (string? value) (int? value))
              (on-change :simple attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))
-                     updated-attr (if (= :p1 attr) #{:p1 :p3} #{:p2 :p4})]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs updated-attr
-                                               :shape-ids ids}))
-                 (on-change :simple attr resolved-value event))))))
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= :p1 attr)
+                                                 #{:p1 :p3}
+                                                 #{:p2 :p4})
+                                    :shape-ids ids}))))))
 
         on-detach-token
         (mf/use-fn
@@ -483,11 +483,9 @@
            (if (or (string? value) (int? value))
              (on-change :multiple attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (on-change :multiple attr resolved-value event))))))
+               (st/emit! (dwta/toggle-token {:token (first value)
+                                             :attrs #{attr}
+                                             :shape-ids ids}))))))
 
         on-focus
         (mf/use-fn
@@ -716,11 +714,12 @@
            (if (or (string? value) (int? value))
              (on-change (= "nowrap" wrap-type) attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (on-change (= "nowrap" wrap-type) attr resolved-value event))))))
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= "nowrap" wrap-type)
+                                                 #{:row-gap :colum-gap}
+                                                 #{attr})
+                                    :shape-ids ids}))))))
 
         on-detach-token
         (mf/use-fn

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -223,7 +223,6 @@
             (cond
               (= existing ::not-found) (assoc acc t-attr new-val)
               (= existing new-val)     acc
-              (nil? new-val)           acc
               :else                    (assoc acc t-attr :multiple))))
 
         merge-shape-attr
@@ -237,10 +236,8 @@
         (fn [acc shape-attrs applied-tokens]
           "Merges token values across all shape attributes.
            For each shape attribute, its corresponding token attributes are merged
-           into the accumulator. If applied tokens are empty, the accumulator is returned unchanged."
-          (if (seq applied-tokens)
-            (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs)
-            acc))
+           into the accumulator."
+          (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs))
 
         extract-attrs
         (fn [[ids values token-acc] {:keys [id type applied-tokens] :as shape}]
@@ -385,7 +382,7 @@
                        objects
                        objects)))
 
-        [layer-ids layer-values]
+        [layer-ids layer-values layer-tokens]
         (get-attrs shapes objects :layer)
 
         [text-ids text-values]
@@ -409,7 +406,7 @@
         [exports-ids exports-values]
         (get-attrs shapes objects :exports)
 
-        [layout-container-ids layout-container-values layout-contianer-tokens]
+        [layout-container-ids layout-container-values layout-container-tokens]
         (get-attrs shapes objects :layout-container)
 
         [layout-item-ids layout-item-values {}]
@@ -445,6 +442,7 @@
      (when-not (empty? layer-ids)
        [:> layer-menu* {:type type
                         :ids layer-ids
+                        :applied-tokens layer-tokens
                         :values layer-values}])
 
      (when-not (empty? measure-ids)
@@ -462,7 +460,7 @@
       {:type type
        :ids layout-container-ids
        :values layout-container-values
-       :applied-tokens layout-contianer-tokens
+       :applied-tokens layout-container-tokens
        :multiple true}]
 
      (when (or is-layout-child? has-flex-layout-container?)

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

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

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

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

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

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

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

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

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

@@ -260,7 +260,7 @@
             events [(dwta/apply-token {:shape-ids [(:id rect-1)]
                                        :attributes #{:width :height}
                                        :token (toht/get-token file "dimensions.sm")
-                                       :on-update-shape dwta/update-shape-dimensions})]]
+                                       :on-update-shape dwta/use-dimensions-token})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]
@@ -333,7 +333,7 @@
             events [(dwta/apply-token {:shape-ids [(:id rect-1)]
                                        :attributes #{:width :height}
                                        :token (toht/get-token file "sizing.sm")
-                                       :on-update-shape dwta/update-shape-dimensions})]]
+                                       :on-update-shape dwta/use-dimensions-token})]]
         (tohs/run-store-async
          store done events
          (fn [new-state]