📚 Document better the tokens value in plugins API

And add poc plugin example

.nvmrc

@@ -1 +1 @@
-v22.22.0
+v22.21.1

CHANGES.md

@@ -34,7 +34,11 @@
 - Fix viewer can update library [Taiga #13186](https://tree.taiga.io/project/penpot/issue/13186)
 - Fix remove fill affects different element than selected [Taiga #13128](https://tree.taiga.io/project/penpot/issue/13128)
 
-## 2.13.0
+## 2.13.0 (Unreleased)
+
+### :boom: Breaking changes & Deprecations
+
+### :rocket: Epics and highlights
 
 ### :heart: Community contributions (Thank you!)
 

backend/deps.edn

@@ -3,7 +3,7 @@
 
  :deps
  {penpot/common {:local/root "../common"}
-  org.clojure/clojure {:mvn/version "1.12.4"}
+  org.clojure/clojure {:mvn/version "1.12.2"}
   org.clojure/tools.namespace {:mvn/version "1.5.0"}
 
   com.github.luben/zstd-jni {:mvn/version "1.5.7-4"}
@@ -28,8 +28,8 @@
   com.google.guava/guava {:mvn/version "33.4.8-jre"}
 
   funcool/yetti
-  {:git/tag "v11.9"
-   :git/sha "5fad7a9"
+  {:git/tag "v11.8"
+   :git/sha "1d1b33f"
    :git/url "https://github.com/funcool/yetti.git"
    :exclusions [org.slf4j/slf4j-api]}
 
@@ -39,7 +39,7 @@
   metosin/reitit-core {:mvn/version "0.9.1"}
   nrepl/nrepl {:mvn/version "1.4.0"}
 
-  org.postgresql/postgresql {:mvn/version "42.7.9"}
+  org.postgresql/postgresql {:mvn/version "42.7.7"}
   org.xerial/sqlite-jdbc {:mvn/version "3.50.3.0"}
 
   com.zaxxer/HikariCP {:mvn/version "7.0.2"}
@@ -49,7 +49,7 @@
   buddy/buddy-hashers {:mvn/version "2.0.167"}
   buddy/buddy-sign {:mvn/version "3.6.1-359"}
 
-  com.github.ben-manes.caffeine/caffeine {:mvn/version "3.2.3"}
+  com.github.ben-manes.caffeine/caffeine {:mvn/version "3.2.2"}
 
   org.jsoup/jsoup {:mvn/version "1.21.2"}
   org.im4java/im4java
@@ -66,7 +66,7 @@
 
   ;; Pretty Print specs
   pretty-spec/pretty-spec {:mvn/version "0.1.4"}
-  software.amazon.awssdk/s3 {:mvn/version "2.41.21"}}
+  software.amazon.awssdk/s3 {:mvn/version "2.33.10"}}
 
  :paths ["src" "resources" "target/classes"]
  :aliases

backend/src/app/main.clj

@@ -369,7 +369,6 @@
     ;; FIXME: revisit if db/pool is necessary here
     ::db/pool                (ig/ref ::db/pool)
     ::session/manager        (ig/ref ::session/manager)
-    ::setup/props            (ig/ref ::setup/props)
     ::setup/shared-keys      (ig/ref ::setup/shared-keys)}
 
    ::wrk/registry

backend/src/app/migrations/sql/0144-mod-server-error-report-table.sql

@@ -1,11 +1,4 @@
 ALTER TABLE server_error_report DROP CONSTRAINT server_error_report_pkey;
-
-DELETE FROM server_error_report a
-USING server_error_report b
-WHERE a.id = b.id
-  AND a.ctid < b.ctid;
-
 ALTER TABLE server_error_report ADD PRIMARY KEY (id);
-
 CREATE INDEX server_error_report__version__idx
     ON server_error_report ( version );

common/deps.edn

@@ -1,5 +1,5 @@
 {:deps
- {org.clojure/clojure {:mvn/version "1.12.4"}
+ {org.clojure/clojure {:mvn/version "1.12.2"}
   org.clojure/data.json {:mvn/version "2.5.1"}
   org.clojure/tools.cli {:mvn/version "1.1.230"}
   org.clojure/test.check {:mvn/version "1.1.1"}
@@ -9,15 +9,15 @@
   org.apache.commons/commons-pool2 {:mvn/version "2.12.1"}
 
   ;; Logging
-  org.apache.logging.log4j/log4j-api {:mvn/version "2.25.3"}
-  org.apache.logging.log4j/log4j-core {:mvn/version "2.25.3"}
-  org.apache.logging.log4j/log4j-web {:mvn/version "2.25.3"}
-  org.apache.logging.log4j/log4j-jul {:mvn/version "2.25.3"}
-  org.apache.logging.log4j/log4j-slf4j2-impl {:mvn/version "2.25.3"}
+  org.apache.logging.log4j/log4j-api {:mvn/version "2.25.1"}
+  org.apache.logging.log4j/log4j-core {:mvn/version "2.25.1"}
+  org.apache.logging.log4j/log4j-web {:mvn/version "2.25.1"}
+  org.apache.logging.log4j/log4j-jul {:mvn/version "2.25.1"}
+  org.apache.logging.log4j/log4j-slf4j2-impl {:mvn/version "2.25.1"}
   org.slf4j/slf4j-api {:mvn/version "2.0.17"}
-  pl.tkowalcz.tjahzi/log4j2-appender {:mvn/version "0.9.41"}
+  pl.tkowalcz.tjahzi/log4j2-appender {:mvn/version "0.9.40"}
 
-  selmer/selmer {:mvn/version "1.12.70"}
+  selmer/selmer {:mvn/version "1.12.69"}
   criterium/criterium {:mvn/version "0.4.6"}
 
   metosin/jsonista {:mvn/version "0.3.13"}
@@ -27,7 +27,7 @@
   com.cognitect/transit-clj {:mvn/version "1.0.333"}
   com.cognitect/transit-cljs {:mvn/version "0.8.280"}
   java-http-clj/java-http-clj {:mvn/version "0.4.3"}
-  integrant/integrant {:mvn/version "1.0.1"}
+  integrant/integrant {:mvn/version "1.0.0"}
 
   funcool/cuerdas {:mvn/version "2026.415"}
   funcool/promesa

docker/devenv/Dockerfile

@@ -31,7 +31,7 @@ RUN set -ex; \
 
 FROM base AS setup-node
 
-ENV NODE_VERSION=v22.22.0 \
+ENV NODE_VERSION=v22.21.1 \
     PATH=/opt/node/bin:$PATH
 
 RUN set -eux; \
@@ -97,19 +97,18 @@ RUN set -eux; \
 
 FROM base AS setup-jvm
 
-# https://clojure.org/releases/tools
-ENV CLOJURE_VERSION=1.12.4.1602
+ENV CLOJURE_VERSION=1.12.3.1577
 
 RUN set -eux; \
     ARCH="$(dpkg --print-architecture)"; \
     case "${ARCH}" in \
        aarch64|arm64) \
-         ESUM='9903c6b19183a33725ca1dfdae5b72400c9d00995c76fafc4a0d31c5152f33f7'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_aarch64.tar.gz'; \
+         ESUM='8c5321f16d9f1d8149f83e4e9ff8ca5d9e94320b92d205e6db42a604de3d1140'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_aarch64.tar.gz'; \
          ;; \
        amd64|x86_64) \
-         ESUM='946ad9766d98fc6ab495a1a120072197db54997f6925fb96680f1ecd5591db4e'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_x64.tar.gz'; \
+         ESUM='471b3e62bdffaed27e37005d842d8639f10d244ccce1c7cdebf7abce06c8313e'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_x64.tar.gz'; \
          ;; \
        *) \
          echo "Unsupported arch: ${ARCH}"; \
@@ -397,7 +396,7 @@ ENV LANG='C.UTF-8' \
     RUSTUP_HOME="/opt/rustup" \
     PATH="/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
 
-COPY --from=penpotapp/imagemagick:7.1.2-13 /opt/imagick /opt/imagick
+COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
 COPY --from=setup-jvm /opt/jdk /opt/jdk
 COPY --from=setup-jvm /opt/clojure /opt/clojure
 COPY --from=setup-node /opt/node /opt/node

docker/devenv/files/bashrc

@@ -6,8 +6,7 @@ export PATH="/home/penpot/.cargo/bin:/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bi
 export CARGO_HOME="/home/penpot/.cargo"
 
 alias l='ls --color -GFlh'
-alias ll='ls --color -GFlh'
-alias rm='rm -rf'
+alias rm='rm -r'
 alias ls='ls --color -F'
 alias lsd='ls -d *(/)'
 alias lsf='ls -h *(.)'

docker/devenv/files/tmux.conf

@@ -1,4 +1,3 @@
-set -g default-command "${SHELL}"
 set -g mouse off
 set -g history-limit 50000
 setw -g mode-keys emacs

docker/imagemagick/Dockerfile

@@ -6,7 +6,7 @@ ENV LANG='C.UTF-8' \
     DEBIAN_FRONTEND=noninteractive \
     TZ=Etc/UTC
 
-ARG IMAGEMAGICK_VERSION=7.1.2-13
+ARG IMAGEMAGICK_VERSION=7.1.1-47
 
 RUN set -e; \
     apt-get -qq update; \

docker/images/Dockerfile.backend

@@ -5,7 +5,7 @@ ENV LANG='C.UTF-8' \
     LC_ALL='C.UTF-8' \
     JAVA_HOME="/opt/jdk" \
     DEBIAN_FRONTEND=noninteractive \
-    NODE_VERSION=v22.22.0 \
+    NODE_VERSION=v22.21.1 \
     TZ=Etc/UTC
 
 RUN set -ex; \
@@ -46,12 +46,12 @@ RUN set -eux; \
     ARCH="$(dpkg --print-architecture)"; \
     case "${ARCH}" in \
        aarch64|arm64) \
-         ESUM='9903c6b19183a33725ca1dfdae5b72400c9d00995c76fafc4a0d31c5152f33f7'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_aarch64.tar.gz'; \
+         ESUM='8c5321f16d9f1d8149f83e4e9ff8ca5d9e94320b92d205e6db42a604de3d1140'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_aarch64.tar.gz'; \
          ;; \
        amd64|x86_64) \
-         ESUM='946ad9766d98fc6ab495a1a120072197db54997f6925fb96680f1ecd5591db4e'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_x64.tar.gz'; \
+         ESUM='471b3e62bdffaed27e37005d842d8639f10d244ccce1c7cdebf7abce06c8313e'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_x64.tar.gz'; \
          ;; \
        *) \
          echo "Unsupported arch: ${ARCH}"; \

docker/images/Dockerfile.exporter

@@ -3,7 +3,7 @@ LABEL maintainer="Penpot <docker@penpot.app>"
 
 ENV LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8 \
-    NODE_VERSION=v22.22.0 \
+    NODE_VERSION=v22.21.1 \
     DEBIAN_FRONTEND=noninteractive \
     PATH=/opt/node/bin:/opt/imagick/bin:$PATH
 

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

@@ -774,7 +774,7 @@ test.describe("Tokens: Apply token", () => {
     await workspace.layers
       .getByTestId("layer-row")
       .nth(1)
-      .getByTestId('toggle-content')
+      .getByRole("button", { name: "Toggle layer" })
       .click();
 
     await workspace.layers.getByTestId("layer-row").nth(2).click();

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

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+import { WasmWorkspacePage } from "../pages/WorkspacePage";
 import { presenceFixture, joinFixture2, joinFixture3 } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
@@ -43,7 +43,7 @@ test("User receives presence notifications updates in the workspace", async ({
 test("BUG 13058 - Presence list shows up to 3 user avatars", async ({
   page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();
 
   await workspacePage.goToWorkspace();

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

@@ -229,13 +229,13 @@
          :property (tr "workspace.options.opacity")
          :applied-token (get applied-tokens :opacity)
          :placeholder (if (or (= :multiple (get applied-tokens :opacity))
-                              (= :multiple (or (get values :opacity) 1)))
+                              (= :multiple (or (get values name) 1)))
                         (tr "settings.multiple")
                         "--")
          :align :right
          :class (stl/css :numeric-input-wrapper)
          :value (* 100
-                   (or (get values :opacity) 1))}]
+                   (or (get values name) 1))}]
 
        [:div {:class (stl/css :input)
               :title (tr "workspace.options.opacity")}
@@ -248,6 +248,7 @@
           :max 100
           :className (stl/css :numeric-input)}]])
 
+
      [:div {:class (stl/css :actions)}
       (cond
         (or (= :multiple hidden?) (not hidden?))

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

@@ -25,6 +25,7 @@
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as fc]
    [app.main.ui.workspace.tokens.management.forms.controls :as token.controls]
    [app.main.ui.workspace.tokens.management.forms.validators :refer [default-validate-token]]
@@ -142,6 +143,10 @@
         (fm/use-form :schema schema
                      :initial initial)
 
+        warning-name-change?
+        (not= (get-in @form [:data :name])
+              (:name initial))
+
         on-toggle-tab
         (mf/use-fn
          (mf/deps form)
@@ -271,7 +276,12 @@
                            :max-length max-input-length
                            :variant "comfortable"
                            :trim true
-                           :auto-focus true}]]
+                           :auto-focus true}]
+
+       (when (and warning-name-change? (= action "edit"))
+         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
+          [:> context-notification*
+           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
        (case type

manage.sh

@@ -7,7 +7,7 @@ export DEVENV_PNAME="penpotdev";
 export CURRENT_USER_ID=$(id -u);
 export CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD);
 
-export IMAGEMAGICK_VERSION=7.1.2-13
+export IMAGEMAGICK_VERSION=7.1.2-0
 
 # Safe directory to avoid ownership errors with Git
 git config --global --add safe.directory /home/penpot/penpot || true

plugins/README.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

plugins/package.json

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