Merge pull request #8040 from penpot/ladybenko-12856-render-loader

🎉 Make workspace loader to wait for first render

.github/workflows/build-tag.yml

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

.github/workflows/commit-checker.yml

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

CHANGES.md

@@ -1,18 +1,5 @@
 # CHANGELOG
 
-## 2.14.0 (Unreleased)
-
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
-
-### :heart: Community contributions (Thank you!)
-
-### :sparkles: New features & Enhancements
-
-### :bug: Bugs fixed
-
-
 ## 2.13.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -36,6 +23,12 @@
 - Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339)
 - Fix problem with grid layout components and auto sizing [Github #7797](https://github.com/penpot/penpot/issues/7797)
 - Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
+- Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
+- Fix color assets from shared libraries not appearing as assets in Selected colors panel [Taiga #12957](https://tree.taiga.io/project/penpot/issue/12957)
+- Fix CSS generated box-shadow property [Taiga #12997](https://tree.taiga.io/project/penpot/issue/12997)
+- Fix inner shadow selector on shadow token [Taiga #12951](https://tree.taiga.io/project/penpot/issue/12951)
+- Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
+- Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 
 
 ## 2.12.1

backend/deps.edn

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

common/src/app/common/path_names.cljc

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

docker/devenv/docker-compose.yaml

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

docker/devenv/files/nginx.conf

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/app/main/ui/ds/z-index.scss

@@ -10,6 +10,7 @@ $z-index-200: 200;
 $z-index-300: 300;
 $z-index-400: 400;
 $z-index-500: 500;
+$z-index-600: 600;
 
 :global(:root) {
   --z-index-auto: #{$z-index-auto}; // Index for elements such as workspace, rulers ...
@@ -18,4 +19,5 @@ $z-index-500: 500;
   --z-index-set: #{$z-index-300}; // Index for configuration elements like modals, color picker, grid edition elements
   --z-index-dropdown: #{$z-index-400}; // Index for dropdown like elements, selects, menus, dropdowns
   --z-index-notifications: #{$z-index-500}; // Index for notification
+  --z-index-loaders: #{$z-index-600}; // Index for loaders
 }

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

@@ -217,6 +217,10 @@
 
         design-tokens?   (features/use-feature "design-tokens/v1")
 
+        wasm-renderer-enabled? (features/use-feature "render-wasm/v1")
+
+        first-frame-rendered?  (mf/use-state false)
+
         background-color (:background-color wglobal)]
 
     (mf/with-effect []
@@ -241,6 +245,17 @@
       (when (and file-loaded? (not page-id))
         (st/emit! (dcm/go-to-workspace :file-id file-id ::rt/replace true))))
 
+    (mf/with-effect [file-id page-id]
+      (reset! first-frame-rendered? false))
+
+    (mf/with-effect []
+      (let [handle-wasm-render
+            (fn [_]
+              (reset! first-frame-rendered? true))
+            listener-key (events/listen globals/document "penpot:wasm:render" handle-wasm-render)]
+        (fn []
+          (events/unlistenByKey listener-key))))
+
     [:> (mf/provider ctx/current-project-id) {:value project-id}
      [:> (mf/provider ctx/current-file-id) {:value file-id}
       [:> (mf/provider ctx/current-page-id) {:value page-id}
@@ -249,15 +264,18 @@
          [:> modal-container*]
          [:section {:class (stl/css :workspace)
                     :style {:background-color background-color
-                            :touch-action "none"}}
+                            :touch-action "none"
+                            :position "relative"}}
           [:> context-menu*]
-          (if (and file-loaded? page-id)
+          (when (and file-loaded? page-id)
             [:> workspace-inner*
              {:page-id page-id
               :file-id file-id
               :file file
               :wglobal wglobal
-              :layout layout}]
+              :layout layout}])
+          (when (or (not (and file-loaded? page-id))
+                    (and wasm-renderer-enabled? (not @first-frame-rendered?)))
             [:> workspace-loader*])]]]]]]))
 
 (mf/defc workspace-page*

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

@@ -20,7 +20,13 @@
 }
 
 .workspace-loader {
-  grid-area: viewport;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-loaders);
+  background-color: var(--color-background-primary);
 }
 
 .workspace-content {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+.token-pills-wrapper {
+  display: flex;
+  gap: var(--sp-xs);
+  flex-wrap: wrap;
+}

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

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

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

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

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

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

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

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

frontend/src/app/util/forms.cljs

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

frontend/text-editor/src/editor/controllers/SelectionController.js

@@ -242,7 +242,6 @@ export class SelectionController extends EventTarget {
         continue;
       }
       let styleValue = element.style.getPropertyValue(styleName);
-
       if (styleName === "font-family") {
         styleValue = sanitizeFontFamily(styleValue);
       }
@@ -277,22 +276,29 @@ export class SelectionController extends EventTarget {
     this.#applyDefaultStylesToCurrentStyle();
     const root = startNode.parentElement.parentElement.parentElement;
     this.#applyStylesFromElementToCurrentStyle(root);
-    // FIXME: I don't like this approximation. Having to iterate nodes twice
-    // is bad for performance. I think we need another way of "computing"
-    // the cascade.
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const paragraph = textNode.parentElement.parentElement;
+    if (startNode === endNode) {
+      const paragraph = startNode.parentElement.parentElement;
       this.#applyStylesFromElementToCurrentStyle(paragraph);
-    }
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const textSpan = textNode.parentElement;
-      this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      const textSpan = startNode.parentElement;
+      this.#applyStylesFromElementToCurrentStyle(textSpan);
+    } else {
+      // FIXME: I don't like this approximation. Having to iterate nodes twice
+      // is bad for performance. I think we need another way of "computing"
+      // the cascade.
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const paragraph = textNode.parentElement.parentElement;
+        this.#applyStylesFromElementToCurrentStyle(paragraph);
+      }
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const textSpan = textNode.parentElement;
+        this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      }
     }
     return this;
   }

frontend/translations/en.po

@@ -8032,6 +8032,14 @@ msgstr "Name"
 msgid "workspace.tokens.token-name-duplication-validation-error"
 msgstr "A token already exists at the path: %s"
 
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-blur-value-error"
+msgstr "Blur value cannot be negative"
+
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-spread-value-error"
+msgstr "Spread value cannot be negative"
+
 #: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:42, src/app/main/ui/workspace/tokens/management/create/form.cljs:68
 msgid "workspace.tokens.token-name-length-validation-error"
 msgstr "Name should be at least 1 character"

frontend/translations/es.po

@@ -7908,6 +7908,14 @@ msgstr "Nombre"
 msgid "workspace.tokens.token-name-duplication-validation-error"
 msgstr "Ya existe un token en la ruta: %s"
 
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-blur-value-error"
+msgstr "El valor de blur no puede ser negativo"
+
+#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+msgid "workspace.tokens.shadow-token-spread-value-error"
+msgstr "El valor de spread no puede ser negativo"
+
 #: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:42, src/app/main/ui/workspace/tokens/management/create/form.cljs:68
 msgid "workspace.tokens.token-name-length-validation-error"
 msgstr "El nombre debería ser de al menos 1 caracter"

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
 
 ```
-pnpm run start:styles-example
+npm 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 `pnpm install` to install the required dependencies.
-Then, run `pnpm run start` to launch the plugins wrapper.
+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.
 
 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
-pnpm run start:plugin:contrast
+npm run start:plugin:contrast
 ```
 
 Finally, open in your browser the specific port. In this specific example would be `http://localhost:4302`
@@ -49,22 +49,21 @@ 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 | 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 |
+| 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 |
 
 ## Web Apps
 
 | App             | Description                                                       | PORT | Start command                    | URL                    |
 | --------------- | ----------------------------------------------------------------- | ---- | -------------------------------- | ---------------------- |
-| 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/ |
+| 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/ |
 
 ## Creating a plugin from scratch
 

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

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

@@ -1,79 +0,0 @@
-{
-  "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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,13 +0,0 @@
-<!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

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

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

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

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

@@ -1,10 +0,0 @@
-{
-  "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

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

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

@@ -1,33 +0,0 @@
-{
-  "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

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

plugins/package.json

@@ -16,7 +16,6 @@
     "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",