🎉 Add tokens to plugins API documentation

And add poc plugin example

.github/workflows/build-bundle.yml

@@ -40,7 +40,7 @@ on:
 jobs:
   build-bundle:
     name: Build and Upload Penpot Bundle
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     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: ubuntu-24.04
+    runs-on: self-hosted
 
     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: ubuntu-24.04-arm
+    runs-on: self-hosted
 
     steps:
       - name: Checkout code

.github/workflows/tests.yml

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

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

@@ -487,7 +487,6 @@
    :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.spec.js

@@ -50,7 +50,7 @@ const setupTokensFile = async (page, options = {}) => {
   const {
     file = "workspace/get-file-tokens.json",
     fileFragment = "workspace/get-file-fragment-tokens.json",
-    flags = ["enable-feature-token-input"],
+    flags = [],
   } = options;
 
   const workspacePage = new WorkspacePage(page);
@@ -2242,56 +2242,6 @@ test.describe("Tokens: Apply token", () => {
     ).toBeVisible();
   });
 
-  test("User applies border-radius token to a shape from sidebar", async ({ page }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-
-    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
-    
-    // Open tokens sections on left sidebar
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    // Unfold border radius tokens
-    await page.getByRole("button", { name: "Border Radius 3" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius" }),
-    ).toBeVisible();
-    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
-    ).toBeVisible();
-
-    // Apply border radius token from token panels
-    await tokensSidebar.getByRole("button", { name: "borderRadius.sm" }).click();
-
-    // Check if border radius sections is visible on right sidebar
-    const borderRadiusSection = page.getByRole("region", {name: "border-radius-section"});
-    await expect(borderRadiusSection).toBeVisible();
-
-    // Check if token pill is visible on design tab on right sidebar
-    const brTokenPillSM = borderRadiusSection.getByRole('button', { name: 'borderRadius.sm' });
-    await expect(brTokenPillSM).toBeVisible();
-    await brTokenPillSM.click();
-
-    // Change token from dropdown
-    const brTokenOptionXl = borderRadiusSection.getByLabel('borderRadius.xl')
-    await expect(brTokenOptionXl).toBeVisible();
-    await brTokenOptionXl.click();
-
-    await expect(brTokenPillSM).not.toBeVisible();
-    const brTokenPillXL = borderRadiusSection.getByRole('button', { name: 'borderRadius.xl' });
-    await expect(brTokenPillXL).toBeVisible();
-
-    // Detach token from design tab on right sidebar
-    const detachButton = borderRadiusSection.getByRole('button', { name: 'Detach token' });
-    await detachButton.click();
-    await expect(brTokenPillXL).not.toBeVisible();
-  });
-
   test("User applies typography token to a text shape", async ({ page }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
       await setupTypographyTokensFile(page);
@@ -2467,13 +2417,12 @@ test.describe("Tokens: Apply token", () => {
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
     await nameField.fill(newTokenTitle);
 
-    const referenceTabButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Use a reference",
-    });
+    const referenceTabButton =
+      tokensUpdateCreateModal.getByRole('button', { name: 'Use a reference' });
     referenceTabButton.click();
 
-    const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-      name: "Reference",
+    const referenceField = tokensUpdateCreateModal.getByRole('textbox', {
+      name: 'Reference'
     });
     await referenceField.fill("{Full}");
 
@@ -2833,18 +2782,14 @@ test.describe("Tokens: Remapping Feature", () => {
         .click();
       await expect(tokensUpdateCreateModal).toBeVisible();
 
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
+      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",
-      });
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {name: "Reference"});
       await referenceField.fill("{base-shadow}");
 
       submitButton = tokensUpdateCreateModal.getByRole("button", {
@@ -2933,9 +2878,7 @@ test.describe("Tokens: Remapping Feature", () => {
         tokensUpdateCreateModal.getByTestId("reference-opt");
       await referenceToggle.click();
 
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {name: "Reference"});
       await referenceField.fill("{primary-shadow}");
 
       submitButton = tokensUpdateCreateModal.getByRole("button", {
@@ -3007,8 +2950,7 @@ test.describe("Tokens: Remapping Feature", () => {
 
       // 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");
+      const shadowSection = workspacePage.rightSidebar.getByTestId("shadow-section");
       await expect(shadowSection).toBeVisible();
 
       // Click to expand the shadow options (the menu button)
@@ -3066,18 +3008,14 @@ test.describe("Tokens: Remapping Feature", () => {
         .click();
       await expect(tokensUpdateCreateModal).toBeVisible();
 
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
+      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",
-      });
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {name: "Reference"})
       await referenceField.fill("{base-text}");
 
       submitButton = tokensUpdateCreateModal.getByRole("button", {
@@ -3158,18 +3096,14 @@ test.describe("Tokens: Remapping Feature", () => {
         .click();
       await expect(tokensUpdateCreateModal).toBeVisible();
 
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
+      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",
-      });
+      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {name: "Reference"});
       await referenceField.fill("{body-style}");
 
       submitButton = tokensUpdateCreateModal.getByRole("button", {

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

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

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

@@ -183,7 +183,6 @@
   [:map
    [:id {:optional true} :string]
    [:class {:optional true} :string]
-   [:inner-class {:optional true} :string]
    [:value {:optional true} [:maybe [:or
                                      :int
                                      :float
@@ -210,13 +209,12 @@
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder
-           icon disabled inner-class
+  [{:keys [id class value default placeholder icon disabled
            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 name]
+           property align ref]
     :rest props}]
 
   (let [;; NOTE: we use mfu/bean here for transparently handle
@@ -626,7 +624,6 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
-                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -647,7 +644,7 @@
                                                                    :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
-                                              (mf/html [:> icon-button* {:variant "ghost"
+                                              (mf/html [:> icon-button* {:variant "action"
                                                                          :icon i/tokens
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
@@ -662,10 +659,7 @@
                 label       (get token :name)
                 token-value (or (get token :resolved-value)
                                 (or (mf/ref-val last-value*)
-                                    (fmt/format-number value)))
-                token-value (if (= name :opacity)
-                              (* 100 token-value)
-                              token-value)]
+                                    (fmt/format-number value)))]
             (mf/spread-props props
                              {:id id
                               :label label
@@ -675,7 +669,6 @@
                               :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,17 +33,12 @@
 }
 
 .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 :float]]
+    [:or :int :string]]
    [: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,7 +7,6 @@
 @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);
@@ -16,32 +15,32 @@
   --options-dropdown-border-color: var(--color-background-quaternary);
 
   position: absolute;
-  inset-block-start: $sz-36;
-  inline-size: var(--dropdown-width, 100%);
+  top: $sz-36;
+  width: 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-block-size: $sz-400;
+  max-height: $sz-400;
   overflow-y: auto;
   overflow-x: hidden;
   z-index: var(--z-index-dropdown);
 }
 
 .left-align {
-  inset-inline-start: var(--dropdown-offset, 0);
+  left: 0;
 }
 
 .right-align {
-  inset-inline-end: var(--dropdown-offset, 0);
+  right: 0;
 }
 
 .option-separator {
   border: $b-1 solid var(--options-dropdown-border-color);
-  margin-block-start: var(--sp-xs);
-  margin-block-end: var(--sp-xs);
+  margin-top: var(--sp-xs);
+  margin-bottom: var(--sp-xs);
 }
 
 .group-option,
@@ -52,11 +51,11 @@
   gap: var(--sp-xs);
   color: var(--color-foreground-secondary);
   padding-inline: var(--sp-s);
-  block-size: var(--sp-xxxl);
+  height: var(--sp-xxxl);
 }
 
 .option-empty {
   justify-content: center;
   text-align: center;
-  padding: 0 px2rem(40);
+  padding: 0 40px;
 }

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 :float]]
+   [:resolved {:optional true} [:or :int :string]]
    [: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} [:maybe :string]]
+   [:class {:optional true} :string]
    [:aria-label {:optional true} [:maybe :string]]
    [:id :string]
    [:icon {:optional true}
@@ -44,10 +44,9 @@
         tooltip-id (mf/use-id)
 
         props (mf/spread-props props
-                               {:class [class
-                                        (stl/css-case
-                                         :input true
-                                         :input-with-icon (some? icon))]
+                               {: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,7 +19,6 @@
 
 (def ^:private schema:token-field
   [:map
-   [:class {:optional true} [:maybe :string]]
    [:id {:optional true} [:maybe :string]]
    [:label {:optional true} [:maybe :string]]
    [:value :any]
@@ -33,7 +32,7 @@
 
 (mf/defc token-field*
   {::mf/schema schema:token-field}
-  [{:keys [id label value slot-start disabled class
+  [{:keys [id label value slot-start disabled
            on-click on-token-key-down on-blur detach-token
            token-wrapper-ref token-detach-btn-ref on-focus]}]
   (let [set-active? (some? id)
@@ -49,11 +48,14 @@
          (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)))))
 
-    [:div {:class [class (stl/css-case :token-field true
-                                       :with-icon (some? slot-start)
-                                       :token-field-disabled disabled)]
+        class
+        (stl/css-case :token-field true
+                      :with-icon (some? slot-start)
+                      :token-field-disabled disabled)]
+
+    [:div {:class class
            :on-click focus-wrapper
            :disabled disabled
            :on-key-down on-token-key-down
@@ -78,7 +80,7 @@
          [:div {:class (stl/css :pill-dot)}])]]
 
      (when-not ^boolean disabled
-       [:> icon-button* {:variant "ghost"
+       [:> icon-button* {:variant "action"
                          :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,7 +8,6 @@
 @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);
@@ -17,7 +16,9 @@
   --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;
@@ -26,7 +27,6 @@
   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;
+  grid-template-columns: auto 1fr auto;
 }
 
 .token-field-disabled {
@@ -57,17 +57,14 @@
   --pill-bg-color: var(--color-background-tertiary);
   --pill-fg-color: var(--color-token-foreground);
   @include t.use-typography("code-font");
-  @include textEllipsis;
-  display: block;
-  block-size: var(--sp-xxl);
-  inline-size: fit-content;
+  height: var(--sp-xxl);
+  width: 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);
@@ -106,29 +103,24 @@
 }
 
 .pill-dot {
-  inline-size: $sz-6;
-  block-size: $sz-6;
+  width: $sz-6;
+  height: $sz-6;
   outline: var(--sp-xxs) solid var(--color-background-primary);
   border-radius: 50%;
   background-color: var(--color-foreground-error);
-  margin-inline-start: var(--sp-xs);
+  margin-left: var(--sp-xs);
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 0;
+  right: 0;
+  top: 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,6 +159,4 @@ $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,15 +3,10 @@
   (: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]]
@@ -26,17 +21,11 @@
 (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")
-        old-applied-tokens (unchecked-get old-props "appliedTokens")
-        new-applied-tokens (unchecked-get new-props "appliedTokens")]
+        new-values (unchecked-get new-props "values")]
     (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)
@@ -46,113 +35,13 @@
          (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 applied-tokens]}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        all-values-equal? (all-equal? values)
-
+  [{:keys [class ids values]}]
+  (let [all-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)
@@ -165,54 +54,31 @@
                                {:reg-objects? true
                                 :attrs [:r1 :r2 :r3 :r4]})))
 
-        change-one-radius
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [update-fn attr]
-           (dwsh/update-shapes ids
-                               (fn [shape]
-                                 (if (ctsr/has-radius? shape)
-                                   (update-fn shape)
-                                   shape))
-                               {:reg-objects? true
-                                :attrs [attr]})))
-
         toggle-radius-mode
         (mf/use-fn
          (mf/deps radius-expanded)
          (fn []
            (swap! radius-expanded* not)))
 
-
-        on-all-radius-change
-        (mf/use-fn
-         (mf/deps change-radius ids)
-         (fn [value]
-           (if (or (string? value) (number? value))
-             (st/emit!
-              (change-radius (fn [shape]
-                               (ctsr/set-radius-to-all-corners shape value))))
-             (doseq [attr [:r1 :r2 :r3 :r4]]
-               (st/emit!
-                (dwta/toggle-token {:token     (first value)
-                                    :attrs     #{attr}
-                                    :shape-ids ids}))))))
-
-
         on-single-radius-change
         (mf/use-fn
-         (mf/deps change-one-radius ids)
-         (fn [value attr]
-           (if (or (string? value) (number? value))
-             (st/emit! (change-one-radius #(ctsr/set-radius-to-single-corner % attr value) attr))
-             (st/emit! (dwta/toggle-border-radius-token {:token (first value)
-                                                         :attrs #{attr}
-                                                         :shape-ids ids})))))
+         (mf/deps ids change-radius)
+         (fn [value]
+           (st/emit!
+            (change-radius (fn [shape]
+                             (ctsr/set-radius-to-all-corners shape value))))))
 
-        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)
+
+        on-radius-4-change
+        (mf/use-fn
+         (mf/deps ids change-radius)
+         (fn [value attr]
+           (st/emit! (change-radius #(ctsr/set-radius-to-single-corner % attr value)))))
+
+        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)
 
         expand-stream
         (mf/with-memo []
@@ -226,139 +92,58 @@
     (mf/with-effect [ids]
       (reset! radius-expanded* false))
 
-    [:section {:class (dm/str class " " (stl/css :radius))
-               :aria-label "border-radius-section"}
+    [:div {:class (dm/str class " " (stl/css :radius))}
      (if (not radius-expanded)
-       (if token-numeric-inputs
-         [:> numeric-input-wrapper*
-          {:on-change on-all-radius-change
-           :on-detach on-detach-all
-           :icon i/corner-radius
+       [: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")
            :min 0
-           :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)}]
+           :on-change on-radius-r1-change
+           :value (:r1 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-top-right")
+           :min 0
+           :on-change on-radius-r2-change
+           :value (:r2 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-left")
+           :min 0
+           :on-change on-radius-r4-change
+           :value (:r4 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)}]]]))
+        [: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,8 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/typography" as t;
-@use "ds/_utils.scss" as *;
 
 .radius {
   display: grid;
@@ -16,7 +14,7 @@
 
 .radius-1 {
   @extend .input-element;
-  @include t.use-typography("body-small");
+  @include deprecated.bodySmallTypography;
 }
 
 .radius-4 {
@@ -27,27 +25,9 @@
 
 .small-input {
   @extend .input-element;
-  @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);
+  @include deprecated.bodySmallTypography;
 }
 
 .icon {
-  margin-inline: var(--sp-xs);
+  margin-inline: deprecated.$s-4;
 }
-
-.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,17 +9,13 @@
   (: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 :as deprecated-input]
+   [app.main.ui.components.numeric-input :refer [numeric-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]]
@@ -43,16 +39,11 @@
 (defn- check-layer-menu-props
   [old-props new-props]
   (let [old-values (unchecked-get old-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")]
+        new-values (unchecked-get new-props "values")]
     (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)
@@ -62,54 +53,12 @@
          (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 applied-tokens]}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        hidden?             (get values :hidden)
+  [{:keys [ids values]}]
+  (let [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))
 
@@ -169,17 +118,6 @@
            (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)
@@ -249,34 +187,16 @@
         :class (stl/css-case :hidden-select hidden?)
         :on-pointer-enter-option handle-blend-mode-enter
         :on-pointer-leave-option handle-blend-mode-leave}]]
-
-
-
-     (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 :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)}]]
 
 
      [:div {:class (stl/css :actions)}

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

@@ -6,7 +6,6 @@
 
 @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;
@@ -44,9 +43,3 @@
     }
   }
 }
-
-.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-layout)
+                                 :class (stl/css :numeric-input-measures)
                                  :applied-token (get applied-tokens name)
                                  :tokens tokens
                                  :align align

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

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

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

@@ -600,7 +600,10 @@
           [:> border-radius-menu* {:class (stl/css :border-radius)
                                    :ids ids
                                    :values values
-                                   :applied-tokens applied-tokens}])])
+                                   :applied-tokens applied-tokens
+                                   :shapes shapes
+                                   :shape shape}])])
+
      (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,7 +6,6 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
-@use "ds/_utils.scss" as *;
 
 .element-set {
   display: grid;
@@ -157,6 +156,7 @@
   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,7 +85,6 @@
     [:*
      [:> 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,7 +84,6 @@
     [:*
      [:> 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,7 +100,6 @@
     [:*
      [:> 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,7 +111,6 @@
     [: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,6 +223,7 @@
             (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
@@ -236,8 +237,10 @@
         (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."
-          (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs))
+           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))
 
         extract-attrs
         (fn [[ids values token-acc] {:keys [id type applied-tokens] :as shape}]
@@ -382,7 +385,7 @@
                        objects
                        objects)))
 
-        [layer-ids layer-values layer-tokens]
+        [layer-ids layer-values]
         (get-attrs shapes objects :layer)
 
         [text-ids text-values]
@@ -406,7 +409,7 @@
         [exports-ids exports-values]
         (get-attrs shapes objects :exports)
 
-        [layout-container-ids layout-container-values layout-container-tokens]
+        [layout-container-ids layout-container-values layout-contianer-tokens]
         (get-attrs shapes objects :layout-container)
 
         [layout-item-ids layout-item-values {}]
@@ -442,7 +445,6 @@
      (when-not (empty? layer-ids)
        [:> layer-menu* {:type type
                         :ids layer-ids
-                        :applied-tokens layer-tokens
                         :values layer-values}])
 
      (when-not (empty? measure-ids)
@@ -460,7 +462,7 @@
       {:type type
        :ids layout-container-ids
        :values layout-container-values
-       :applied-tokens layout-container-tokens
+       :applied-tokens layout-contianer-tokens
        :multiple true}]
 
      (when (or is-layout-child? has-flex-layout-container?)

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

@@ -84,7 +84,6 @@
 
     [:*
      [:> 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,7 +85,6 @@
     [:*
      [:> 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,7 +125,6 @@
     [:*
      [:> layer-menu* {:ids ids
                       :type type
-                      :applied-tokens applied-tokens
                       :values layer-values}]
      [:> measures-menu*
       {:ids ids

plugins/README.md

@@ -19,7 +19,7 @@ In the `apps` folder you'll find some examples that use the libraries mentioned
 - example-styles: to run this example you should run
 
 ```
-npm run start:styles-example
+pnpm run start:styles-example
 ```
 
 Open in your browser: `http://localhost:4202/`
@@ -28,8 +28,8 @@ Open in your browser: `http://localhost:4202/`
 
 This guide will help you launch a Penpot plugin from the penpot-plugins repository. Before proceeding, ensure that you have Penpot running locally by following the [setup instructions](https://help.penpot.app/technical-guide/developer/devenv/).
 
-In the terminal, navigate to the **penpot-plugins** repository and run `npm install` to install the required dependencies.
-Then, run `npm start` to launch the plugins wrapper.
+In the terminal, navigate to the **penpot-plugins** repository and run `pnpm install` to install the required dependencies.
+Then, run `pnpm run start` to launch the plugins wrapper.
 
 After installing the dependencies, choose a plugin to launch. You can either run one of the provided examples or create your own (see "Creating a plugin from scratch" below).
 To launch a plugin, Open a new terminal tab and run the appropriate startup script for the chosen plugin.
@@ -38,7 +38,7 @@ For instance, to launch the Contrast plugin, use the following command:
 
 ```
 // for the contrast plugin
-npm run start:plugin:contrast
+pnpm run start:plugin:contrast
 ```
 
 Finally, open in your browser the specific port. In this specific example would be `http://localhost:4302`
@@ -49,21 +49,22 @@ A table listing the available plugins and their corresponding startup commands i
 
 | Plugin                  | Description                                                 | PORT | Start command                         | Manifest URL                               |
 | ----------------------- | ----------------------------------------------------------- | ---- | ------------------------------------- | ------------------------------------------ |
-| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | npm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
-| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | npm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
-| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | npm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
-| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | npm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
-| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | npm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
-| table-plugin            | Create or import table                                      | 4306 | npm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
-| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | npm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
-| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | npm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
+| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | pnpm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
+| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | pnpm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
+| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | pnpm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
+| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | pnpm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
+| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | pnpm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
+| table-plugin            | Create or import table                                      | 4306 | pnpm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
+| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | pnpm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
+| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | pnpm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
+| poc-tokens-plugin       | Sandbox plugin to test tokens functionality                 | 4309 | pnpm run start:plugin:poc-tokens       | http://localhost:4309/assets/manifest.json |
 
 ## Web Apps
 
 | App             | Description                                                       | PORT | Start command                    | URL                    |
 | --------------- | ----------------------------------------------------------------- | ---- | -------------------------------- | ---------------------- |
-| plugins-runtime | Runtime for the plugins subsystem                                 | 4200 | npm run start:app:runtime        |                        |
-| example-styles  | Showcase of some of the Penpot styles that can be used in plugins | 4201 | npm run start:app:styles-example | http://localhost:4201/ |
+| plugins-runtime | Runtime for the plugins subsystem                                 | 4200 | pnpm run start:app:runtime        |                        |
+| example-styles  | Showcase of some of the Penpot styles that can be used in plugins | 4201 | pnpm run start:app:styles-example | http://localhost:4201/ |
 
 ## Creating a plugin from scratch
 

plugins/apps/poc-tokens-plugin/eslint.config.js

@@ -0,0 +1,51 @@
+import baseConfig from '../../eslint.config.js';
+import { compat } from '../../eslint.base.config.js';
+
+export default [
+  ...baseConfig,
+  ...compat
+    .config({
+      extends: [
+        'plugin:@nx/angular',
+        'plugin:@angular-eslint/template/process-inline-templates',
+      ],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts'],
+      rules: {
+        '@angular-eslint/directive-selector': [
+          'error',
+          {
+            type: 'attribute',
+            prefix: 'app',
+            style: 'camelCase',
+          },
+        ],
+        '@angular-eslint/component-selector': [
+          'error',
+          {
+            type: 'element',
+            prefix: 'app',
+            style: 'kebab-case',
+          },
+        ],
+      },
+    })),
+  ...compat
+    .config({ extends: ['plugin:@nx/angular-template'] })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.html'],
+      rules: {},
+    })),
+  { ignores: ['**/assets/*.js'] },
+  {
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.*?.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+];

plugins/apps/poc-tokens-plugin/project.json

@@ -0,0 +1,79 @@
+{
+  "name": "poc-tokens-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/poc-tokens-plugin/src",
+  "tags": ["type:plugin"],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/poc-tokens-plugin",
+        "index": "apps/poc-tokens-plugin/src/index.html",
+        "browser": "apps/poc-tokens-plugin/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/poc-tokens-plugin/tsconfig.app.json",
+        "assets": [
+          "apps/poc-tokens-plugin/src/favicon.ico",
+          "apps/poc-tokens-plugin/src/assets"
+        ],
+        "styles": [
+          "libs/plugins-styles/src/lib/styles.css",
+          "apps/poc-tokens-plugin/src/styles.css"
+        ],
+        "scripts": [],
+        "optimization": {
+          "scripts": true,
+          "styles": true,
+          "fonts": false
+        }
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production",
+      "dependsOn": ["buildPlugin"]
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "poc-tokens-plugin:build:production"
+        },
+        "development": {
+          "buildTarget": "poc-tokens-plugin:build:development",
+          "port": 4309,
+          "host": "0.0.0.0"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "poc-tokens-plugin:build"
+      }
+    }
+  }
+}

plugins/apps/poc-tokens-plugin/src/app/app.component.css

@@ -0,0 +1,127 @@
+/* @import "@penpot/plugin-styles/styles.css"; */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.title-l {
+  margin: var(--spacing-16) 0;
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  flex-grow: 1;
+  margin-block-end: var(--spacing-16);
+}
+
+.panels {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0 var(--spacing-8);
+}
+
+.panel {
+  padding: var(--spacing-8);
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.panel:not(:first-child) {
+  border-block-start: 1px solid var(--df-secondary);
+  padding-block-start: var(--spacing-16);
+}
+
+.panel-heading,
+.token-group {
+  display: flex;
+  flex-direction: row;
+  padding-inline-end: var(--spacing-8);
+}
+
+.panel-heading p,
+.token-group span {
+  flex-grow: 1;
+}
+
+.panel-heading button,
+.token-group button {
+  background: none;
+  padding: var(--spacing-4) calc(var(--spacing-12) / 2);
+}
+
+.panel-heading button:focus,
+.token-group button:focus {
+  padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
+}
+
+.panel-item button {
+  opacity: 0;
+  margin-inline-end: var(--spacing-8);
+  padding: var(--spacing-4) calc(var(--spacing-12) / 2);
+}
+
+.panel-item button:hover {
+  opacity: 1;
+}
+
+.panel-item button:focus {
+  opacity: 1;
+  padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
+}
+
+.panel ul {
+  /* flex-grow: 1; */
+  overflow-y: auto;
+  padding-inline-end: var(--spacing-8);
+}
+
+.panel-item {
+  display: flex;
+  flex-direction: row;
+}
+
+.panel-item span {
+  flex-grow: 1;
+}
+
+.set-item {
+  cursor: pointer;
+}
+
+.set-item.selected {
+  background-color: var(--db-quaternary);
+}
+
+.set-item:hover {
+  color: var(--da-primary);
+  background-color: var(--db-secondary);
+}
+
+.token-group:not(:first-child) {
+  margin-top: var(--spacing-8);
+}
+
+.token-group {
+  border-block-end: 1px solid var(--df-secondary);
+  text-transform: capitalize;
+}
+
+.token-item {
+  cursor: pointer;
+}
+
+.token-item:hover {
+  color: var(--da-primary);
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row-reverse;
+}

plugins/apps/poc-tokens-plugin/src/app/app.component.html

@@ -0,0 +1,144 @@
+<div class="container">
+  <p class="title-l">Design tokens plugin POC</p>
+
+  <div class="columns">
+    <div class="panels">
+      <div class="panel">
+        <div class="panel-heading">
+          <p class="headline-m">THEMES</p>
+          <button
+            type="button"
+            data-appearance="secondary"
+            (click)="addTheme()"
+          >
+            +
+          </button>
+        </div>
+
+        <ul data-handler="themes-list">
+          @for (theme of themes; track theme.id) {
+            <li class="body-m panel-item theme-item">
+              <span>{{ theme.group }} / {{ theme.name }}</span>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="renameTheme(theme.id, theme.name)"
+              >
+                🖊️
+              </button>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="deleteTheme(theme.id)"
+              >
+                ❌
+              </button>
+              <div class="checkbox-container">
+                <input
+                  class="checkbox-input"
+                  type="checkbox"
+                  id="checkbox1"
+                  [checked]="isThemeActive(theme.id)"
+                  (change)="toggleTheme(theme.id)"
+                />
+              </div>
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div class="panel">
+        <div class="panel-heading">
+          <p class="headline-m">SETS</p>
+          <button type="button" data-appearance="secondary" (click)="addSet()">
+            +
+          </button>
+        </div>
+
+        <ul data-handler="sets-list">
+          @for (set of sets; track set.id) {
+            <li
+              class="body-m panel-item set-item"
+              [class.selected]="set.id === currentSetId"
+            >
+              <span (click)="loadTokens(set.id)">
+                {{ set.name }}
+              </span>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="renameSet(set.id, set.name)"
+              >
+                🖊️
+              </button>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="deleteSet(set.id)"
+              >
+                ❌
+              </button>
+              <div class="checkbox-container">
+                <input
+                  class="checkbox-input"
+                  type="checkbox"
+                  id="checkbox1"
+                  [checked]="isSetActive(set.id)"
+                  (change)="toggleSet(set.id)"
+                />
+              </div>
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+    <div class="panels">
+      <div class="panel">
+        <p class="headline-m">TOKENS</p>
+
+        <ul data-handler="tokens-list">
+          @for (group of tokenGroups; track group[0]) {
+            <li class="body-m token-group">
+              <span>{{ group[0] }}</span>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="addToken(group[0])"
+              >
+                +
+              </button>
+            </li>
+            @for (token of group[1]; track token.id) {
+              <li
+                class="body-m panel-item token-item"
+                (click)="applyToken(token.id)"
+              >
+                <span>{{ token.name }}</span>
+                <button
+                  type="button"
+                  data-appearance="secondary"
+                  (click)="renameToken(token.id, token.name)"
+                >
+                  🖊️
+                </button>
+                <button
+                  type="button"
+                  data-appearance="secondary"
+                  (click)="deleteToken(token.id)"
+                >
+                  ❌
+                </button>
+              </li>
+            }
+          }
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="buttons">
+    <button type="button" data-appearance="primary" (click)="loadLibrary()">
+      Load
+    </button>
+  </div>
+</div>

plugins/apps/poc-tokens-plugin/src/app/app.component.ts

@@ -0,0 +1,290 @@
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { fromEvent, map, filter, take, merge } from 'rxjs';
+import { PluginMessageEvent, PluginUIEvent } from '../model';
+
+type TokenTheme = {
+  id: string;
+  name: string;
+  group: string;
+  description: string;
+  active: boolean;
+};
+
+type TokenSet = {
+  id: string;
+  name: string;
+  description: string;
+  active: boolean;
+};
+
+type Token = {
+  id: string;
+  name: string;
+  description: string;
+};
+
+type TokensGroup = [string, Token[]];
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  host: {
+    '[attr.data-theme]': 'theme()',
+  },
+})
+export class AppComponent {
+  public route = inject(ActivatedRoute);
+
+  public messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(
+    window,
+    'message',
+  );
+
+  public initialTheme$ = this.route.queryParamMap.pipe(
+    map((params) => params.get('theme')),
+    filter((theme) => !!theme),
+    take(1),
+  );
+
+  public theme = toSignal(
+    merge(
+      this.initialTheme$,
+      this.messages$.pipe(
+        filter((event) => event.data.type === 'theme'),
+        map((event) => {
+          return event.data.content;
+        }),
+      ),
+    ),
+  );
+
+  public themes: TokenTheme[] = [];
+  public sets: TokenSet[] = [];
+  public tokenGroups: TokensGroup[] = [];
+  public currentSetId: string | undefined = undefined;
+
+  constructor() {
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'set-themes') {
+        this.#setThemes(event.data.themesData);
+      } else if (event.data.type === 'set-sets') {
+        this.#setSets(event.data.setsData);
+      } else if (event.data.type === 'set-tokens') {
+        this.#setTokens(event.data.tokenGroupsData);
+      }
+    });
+  }
+
+  loadLibrary() {
+    this.#sendMessage({ type: 'load-library' });
+  }
+
+  loadTokens(setId: string) {
+    this.currentSetId = setId;
+    this.#sendMessage({ type: 'load-tokens', setId });
+  }
+
+  addTheme() {
+    this.#sendMessage({
+      type: 'add-theme',
+      themeGroup: this.#randomString(),
+      themeName: this.#randomString(),
+    });
+  }
+
+  addSet() {
+    this.#sendMessage({ type: 'add-set', setName: this.#randomString() });
+  }
+
+  addToken(tokenType: string) {
+    let tokenValue;
+    switch (tokenType) {
+      case 'borderRadius':
+        tokenValue = 25;
+        break;
+      case 'shadow':
+        tokenValue = [
+          {
+            color: '#123456',
+            inset: 'false',
+            offsetX: '6',
+            offsetY: '6',
+            spread: '0',
+            blur: '4',
+          },
+        ];
+        break;
+      case 'color':
+        tokenValue = '#fabada';
+        break;
+      case 'dimension':
+        tokenValue = 100;
+        break;
+      case 'fontFamilies':
+        tokenValue = ['Source Sans Pro', 'Sans serif'];
+        break;
+      case 'fontSizes':
+        tokenValue = 24;
+        break;
+      case 'fontWeights':
+        tokenValue = 'bold';
+        break;
+      case 'letterSpacing':
+        tokenValue = 0.5;
+        break;
+      case 'number':
+        tokenValue = 33;
+        break;
+      case 'opacity':
+        tokenValue = 0.6;
+        break;
+      case 'rotation':
+        tokenValue = 45;
+        break;
+      case 'sizing':
+        tokenValue = 200;
+        break;
+      case 'spacing':
+        tokenValue = 16;
+        break;
+      case 'borderWidth':
+        tokenValue = 3;
+        break;
+      case 'textCase':
+        tokenValue = 'lowercase';
+        break;
+      case 'textDecoration':
+        tokenValue = 'underline';
+        break;
+      case 'typography':
+        tokenValue = {
+          fontFamilies: ['Acme', 'Arial', 'Sans Serif'],
+          fontSizes: '36',
+          letterSpacing: '0.8',
+          textCase: 'uppercase',
+          textDecoration: 'none',
+          fontWeights: '600',
+          lineHeight: '1.5',
+        };
+        break;
+    }
+
+    if (this.currentSetId && tokenValue) {
+      this.#sendMessage({
+        type: 'add-token',
+        setId: this.currentSetId,
+        tokenType,
+        tokenName: this.#randomString(),
+        tokenValue,
+      });
+    } else {
+      console.log('Invalid token type');
+    }
+  }
+
+  renameTheme(themeId: string, themeName: string) {
+    const newName = prompt('Rename theme', themeName);
+    if (newName && newName !== '') {
+      this.#sendMessage({ type: 'rename-theme', themeId, newName });
+    }
+  }
+
+  renameSet(setId: string, setName: string) {
+    const newName = prompt('Rename set', setName);
+    if (newName && newName !== '') {
+      this.#sendMessage({ type: 'rename-set', setId, newName });
+    }
+  }
+
+  renameToken(tokenId: string, tokenName: string) {
+    const newName = prompt('Rename token', tokenName);
+    if (this.currentSetId && newName && newName !== '') {
+      this.#sendMessage({
+        type: 'rename-token',
+        setId: this.currentSetId,
+        tokenId,
+        newName,
+      });
+    }
+  }
+
+  deleteTheme(themeId: string) {
+    this.#sendMessage({ type: 'delete-theme', themeId });
+  }
+
+  deleteSet(setId: string) {
+    this.#sendMessage({ type: 'delete-set', setId });
+  }
+
+  deleteToken(tokenId: string) {
+    if (this.currentSetId) {
+      this.#sendMessage({
+        type: 'delete-token',
+        setId: this.currentSetId,
+        tokenId,
+      });
+    }
+  }
+
+  isThemeActive(themeId: string) {
+    for (const theme of this.themes) {
+      if (theme.id === themeId) {
+        return theme.active;
+      }
+    }
+    return false;
+  }
+
+  toggleTheme(themeId: string) {
+    this.#sendMessage({ type: 'toggle-theme', themeId });
+  }
+
+  isSetActive(setId: string) {
+    for (const set of this.sets) {
+      if (set.id === setId) {
+        return set.active;
+      }
+    }
+    return false;
+  }
+
+  toggleSet(setId: string) {
+    this.#sendMessage({ type: 'toggle-set', setId });
+  }
+
+  applyToken(tokenId: string) {
+    if (this.currentSetId) {
+      this.#sendMessage({
+        type: 'apply-token',
+        setId: this.currentSetId,
+        tokenId,
+        // attributes: ['stroke-color']   // Uncomment to choose attribute to apply
+      }); // (incompatible attributes will have no effect)
+    }
+  }
+
+  #sendMessage(message: PluginUIEvent) {
+    parent.postMessage(message, '*');
+  }
+
+  #setThemes(themes: TokenTheme[]) {
+    this.themes = themes;
+  }
+
+  #setSets(sets: TokenSet[]) {
+    this.sets = sets;
+  }
+
+  #setTokens(tokenGroups: TokensGroup[]) {
+    this.tokenGroups = tokenGroups;
+  }
+
+  #randomString() {
+    // Generate a big random number and convert it to string using base 36
+    // (the number of letters in the ascii alphabet)
+    return Math.floor(Math.random() * Date.now()).toString(36);
+  }
+}

plugins/apps/poc-tokens-plugin/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+  ],
+};

plugins/apps/poc-tokens-plugin/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

plugins/apps/poc-tokens-plugin/src/assets/CORS

@@ -0,0 +1 @@
+*

plugins/apps/poc-tokens-plugin/src/assets/_headers

@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *

plugins/apps/poc-tokens-plugin/src/assets/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "Design tokens plugin POC",
+  "description": "This is a plugin to try Design Tokens in Penpot API",
+  "code": "/assets/plugin.js",
+  "permissions": [
+    "page:read",
+    "content:read",
+    "file:read",
+    "selection:read",
+    "content:write",
+    "library:read",
+    "library:write"
+  ]
+}

plugins/apps/poc-tokens-plugin/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular example plugin</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

plugins/apps/poc-tokens-plugin/src/main.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);

plugins/apps/poc-tokens-plugin/src/model.ts

@@ -0,0 +1,112 @@
+import { TokenProperty } from '@penpot/plugin-types';
+
+/**
+ * This file contains the typescript interfaces for the plugin events.
+ */
+
+// Events sent from the ui to the plugin
+
+export interface LoadLibraryEvent {
+  type: 'load-library';
+}
+
+export interface LoadTokensEvent {
+  type: 'load-tokens';
+  setId: string;
+}
+
+export interface AddThemeEvent {
+  type: 'add-theme';
+  themeGroup: string;
+  themeName: string;
+}
+
+export interface AddSetEvent {
+  type: 'add-set';
+  setName: string;
+}
+
+export interface AddTokenEvent {
+  type: 'add-token';
+  setId: string;
+  tokenType: string;
+  tokenName: string;
+  tokenValue: unknown;
+}
+
+export interface RenameThemeEvent {
+  type: 'rename-theme';
+  themeId: string;
+  newName: string;
+}
+
+export interface RenameSetEvent {
+  type: 'rename-set';
+  setId: string;
+  newName: string;
+}
+
+export interface RenameTokenEvent {
+  type: 'rename-token';
+  setId: string;
+  tokenId: string;
+  newName: string;
+}
+
+export interface DeleteThemeEvent {
+  type: 'delete-theme';
+  themeId: string;
+}
+
+export interface DeleteSetEvent {
+  type: 'delete-set';
+  setId: string;
+}
+
+export interface DeleteTokenEvent {
+  type: 'delete-token';
+  setId: string;
+  tokenId: string;
+}
+
+export interface ToggleThemeEvent {
+  type: 'toggle-theme';
+  themeId: string;
+}
+
+export interface ToggleSetEvent {
+  type: 'toggle-set';
+  setId: string;
+}
+
+export interface ApplyTokenEvent {
+  type: 'apply-token';
+  setId: string;
+  tokenId: string;
+  attributes?: TokenProperty[];
+}
+
+export type PluginUIEvent =
+  | LoadLibraryEvent
+  | LoadTokensEvent
+  | AddThemeEvent
+  | AddSetEvent
+  | AddTokenEvent
+  | RenameThemeEvent
+  | RenameSetEvent
+  | RenameTokenEvent
+  | DeleteThemeEvent
+  | DeleteSetEvent
+  | DeleteTokenEvent
+  | ToggleThemeEvent
+  | ToggleSetEvent
+  | ApplyTokenEvent;
+
+// Events sent from the plugin to the ui
+
+export interface ThemePluginEvent {
+  type: 'theme';
+  content: string;
+}
+
+export type PluginMessageEvent = ThemePluginEvent;

plugins/apps/poc-tokens-plugin/src/plugin.ts

@@ -0,0 +1,246 @@
+import type { PluginMessageEvent, PluginUIEvent } from './model.js';
+import { TokenType, TokenProperty } from '@penpot/plugin-types';
+
+penpot.ui.open('Design Tokens test', `?theme=${penpot.theme}`, {
+  width: 1000,
+  height: 800,
+});
+
+penpot.on('themechange', (theme) => {
+  sendMessage({ type: 'theme', content: theme });
+});
+
+penpot.ui.onMessage<PluginUIEvent>(async (message) => {
+  if (message.type === 'load-library') {
+    loadLibrary();
+  } else if (message.type === 'load-tokens') {
+    loadTokens(message.setId);
+  } else if (message.type === 'add-theme') {
+    addTheme(message.themeGroup, message.themeName);
+  } else if (message.type === 'add-set') {
+    addSet(message.setName);
+  } else if (message.type === 'add-token') {
+    addToken(
+      message.setId,
+      message.tokenType,
+      message.tokenName,
+      message.tokenValue,
+    );
+  } else if (message.type === 'rename-theme') {
+    renameTheme(message.themeId, message.newName);
+  } else if (message.type === 'rename-set') {
+    renameSet(message.setId, message.newName);
+  } else if (message.type === 'rename-token') {
+    renameToken(message.setId, message.tokenId, message.newName);
+  } else if (message.type === 'delete-theme') {
+    deleteTheme(message.themeId);
+  } else if (message.type === 'delete-set') {
+    deleteSet(message.setId);
+  } else if (message.type === 'delete-token') {
+    deleteToken(message.setId, message.tokenId);
+  } else if (message.type === 'toggle-theme') {
+    toggleTheme(message.themeId);
+  } else if (message.type === 'toggle-set') {
+    toggleSet(message.setId);
+  } else if (message.type === 'apply-token') {
+    applyToken(message.setId, message.tokenId, message.attributes);
+  }
+});
+
+function sendMessage(message: PluginMessageEvent) {
+  penpot.ui.sendMessage(message);
+}
+
+function loadLibrary() {
+  const tokensCatalog = penpot.library.local.tokens;
+
+  const themes = tokensCatalog.themes;
+
+  const themesData = themes.map((theme) => {
+    return {
+      id: theme.id,
+      group: theme.group,
+      name: theme.name,
+      active: theme.active,
+    };
+  });
+
+  penpot.ui.sendMessage({
+    source: 'penpot',
+    type: 'set-themes',
+    themesData,
+  });
+
+  const sets = tokensCatalog.sets;
+
+  const setsData = sets.map((set) => {
+    return {
+      id: set.id,
+      name: set.name,
+      active: set.active,
+    };
+  });
+
+  penpot.ui.sendMessage({
+    source: 'penpot',
+    type: 'set-sets',
+    setsData,
+  });
+}
+
+function loadTokens(setId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const tokensByType = set?.tokensByType;
+
+  const tokenGroupsData = [];
+  if (tokensByType) {
+    for (const group of tokensByType) {
+      const type = group[0];
+      const tokens = group[1];
+      tokenGroupsData.push([
+        type,
+        tokens.map((token) => {
+          return {
+            id: token.id,
+            name: token.name,
+            description: token.description,
+          };
+        }),
+      ]);
+    }
+
+    penpot.ui.sendMessage({
+      source: 'penpot',
+      type: 'set-tokens',
+      tokenGroupsData,
+    });
+  }
+}
+
+function addTheme(themeGroup: string, themeName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.addTheme(themeGroup, themeName);
+  if (theme) {
+    loadLibrary();
+  }
+}
+
+function addSet(setName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.addSet(setName);
+  if (set) {
+    loadLibrary();
+  }
+}
+
+function addToken(
+  setId: string,
+  tokenType: string,
+  tokenName: string,
+  tokenValue: unknown,
+) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.addToken(tokenType as TokenType, tokenName, tokenValue);
+  if (token) {
+    loadTokens(setId);
+  }
+}
+
+function renameTheme(themeId: string, newName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.getThemeById(themeId);
+  if (theme) {
+    theme.name = newName;
+    loadLibrary();
+  }
+}
+
+function renameSet(setId: string, newName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  if (set) {
+    set.name = newName;
+    loadLibrary();
+  }
+}
+
+function renameToken(setId: string, tokenId: string, newName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.getTokenById(tokenId);
+  if (token) {
+    token.name = newName;
+    loadTokens(setId);
+  }
+}
+
+function deleteTheme(themeId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.getThemeById(themeId);
+  if (theme) {
+    theme.remove();
+    loadLibrary();
+  }
+}
+
+function deleteSet(setId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  if (set) {
+    set.remove();
+    loadLibrary();
+  }
+}
+
+function deleteToken(setId: string, tokenId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.getTokenById(tokenId);
+  if (token) {
+    token.remove();
+    loadTokens(setId);
+  }
+}
+
+function toggleTheme(themeId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.getThemeById(themeId);
+  if (theme) {
+    theme.toggleActive();
+    loadLibrary();
+  }
+}
+
+function toggleSet(setId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  if (set) {
+    set.toggleActive();
+    loadLibrary();
+  }
+}
+
+function applyToken(
+  setId: string,
+  tokenId: string,
+  attributes: TokenProperty[] | undefined,
+) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.getTokenById(tokenId);
+
+  if (token) {
+    token.applyToSelected(attributes);
+  }
+
+  // Alternatve way
+  //
+  // const selection = penpot.selection;
+  // if (token && selection) {
+  //   for (const shape of selection) {
+  //     shape.applyToken(token, attributes);
+  //   }
+  // }
+}

plugins/apps/poc-tokens-plugin/src/styles.css

@@ -0,0 +1,23 @@
+/* @import "@penpot/plugin-styles/styles.css"; */
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  line-height: 1.5;
+  padding: 10px;
+}
+
+ul {
+  margin-block-start: var(--spacing-12);
+}
+
+.title-l {
+  text-align: center;
+}
+
+.headline-l {
+  margin-block-start: var(--spacing-8);
+}

plugins/apps/poc-tokens-plugin/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
+}

plugins/apps/poc-tokens-plugin/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}

plugins/apps/poc-tokens-plugin/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    },
+    {
+      "path": "./tsconfig.plugin.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

plugins/apps/poc-tokens-plugin/tsconfig.plugin.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "files": ["src/plugin.ts"],
+  "include": ["../../libs/plugin-types/index.d.ts"]
+}

plugins/package.json

@@ -16,6 +16,7 @@
     "start:plugin:table": "nx run table-plugin:init",
     "start:plugin:renamelayers": "nx run rename-layers-plugin:init",
     "start:plugin:colors-to-tokens": "nx run colors-to-tokens-plugin:init",
+    "start:plugin:poc-tokens": "nx run poc-tokens-plugin:init",
     "build": "nx build plugins-runtime --emptyOutDir=true",
     "build:plugins": "nx run-many -t build --parallel -p tag:type:plugin --exclude=poc-state-plugin",
     "build:styles-example": "nx run example-styles:build",