📚 Document better the tokens value in plugins API

🎉 Add tokens to plugins API documentation
And add poc plugin example
2026-01-26 23:32:46 -05:00 · 2026-01-26 12:14:35 +01:00 · 2026-01-26 12:14:35 +01:00
44 changed files with 2351 additions and 897 deletions
--- a/.github/workflows/plugins-deploy-package.yml
+++ b/.github/workflows/plugins-deploy-package.yml
@@ -1,127 +1,11 @@
 name: Plugins/package deployer

 on:
-  # Deploy package from manual action
  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: choice
-        required: true
-        default: 'develop'
-        options:
-          - develop
-          - staging
-          - main
-      plugin_name:
-        description: 'Pluging name (like plugins/apps/<plugin_name>-plugin)'
-        type: string
-        required: true
-  workflow_call:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: string
-        required: true
-        default: 'develop'
-      plugin_name:
-        description: 'Publig name (from plugins/apps/<plugin_name>-plugin)'
-        type: string
-        required: true
-
-permissions:
-  contents: read

 jobs:
-  deploy:
-    runs-on: penpot-runner-01
+  print_text_job:
+    runs-on: ubuntu-latest
    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ inputs.gh_ref }}
-
-      # START: Setup Node and PNPM enabling cache
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable PNPM
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          corepack enable;
-          corepack install;
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        working-directory: ./plugins
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Cache pnpm store
-        uses: actions/cache@v4
-        with:
-          path: ${{ steps.pnpm-store.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('plugins/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-      # END: Setup Node and PNPM enabling cache
-
-      - name: Install deps
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          pnpm install --no-frozen-lockfile;
-          pnpm add -D -w wrangler@latest;
-
-      - name: "Build package for ${{ inputs.plugin_name }}-plugin"
-        working-directory: plugins
-        shell: bash
-        run: npx nx build ${{ inputs.plugin_name }}-plugin
-
-      - name: Select Worker name
-        run: |
-          REF="${{ inputs.gh_ref }}"
-          case "$REF" in
-            main)
-              echo "WORKER_NAME=${{ inputs.plugin_name }}-plugin-pro" >> $GITHUB_ENV
-              echo "WORKER_URI=${{ inputs.plugin_name }}.plugins.penpot.app" >> $GITHUB_ENV ;;
-            staging)
-              echo "WORKER_NAME=${{ inputs.plugin_name }}-plugin-pre" >> $GITHUB_ENV
-              echo "WORKER_URI=${{ inputs.plugin_name }}.plugins.penpot.dev" >> $GITHUB_ENV ;;
-            develop)
-              echo "WORKER_NAME=${{ inputs.plugin_name }}-plugin-hourly" >> $GITHUB_ENV
-              echo "WORKER_URI=${{ inputs.plugin_name }}.plugins.hourly.penpot.dev" >> $GITHUB_ENV ;;
-            *) echo "Unsupported branch ${REF}" && exit 1 ;;
-          esac
-
-      - name: Set the custom url
-        working-directory: plugins
-        shell: bash
-        run: |
-          sed -i "s/WORKER_URI/${{ env.WORKER_URI }}/g" apps/${{ inputs.plugin_name }}-plugin/wrangler.toml
-
-      - name: Deploy to Cloudflare Workers
-        uses: cloudflare/wrangler-action@v3
-        with:
-          workingDirectory: plugins
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: deploy --config apps/${{ inputs.plugin_name }}-plugin/wrangler.toml --name ${{ env.WORKER_NAME }}
-
-      - name: Notify Mattermost
-        if: failure()
-        uses: mattermost/action-mattermost-notify@master
-        with:
-          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
-          MATTERMOST_CHANNEL: bot-alerts-cicd
-          TEXT: |
-            ❌ 🧩📦 *[PENPOT PLUGINS] Error deploying ${{ env.WORKER_NAME }}.*
-            📄 Triggered from ref: `${{ inputs.gh_ref }}`
-               Plugin name: `${{ inputs.plugin_name }}-plugin`
-               Cloudflare worker name: `${{ env.WORKER_NAME }}`
-            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
-            @infra
+      - name: Print Hello World
+        run: echo "Hello, World!"
--- a/.github/workflows/plugins-deploy-packages.yml
+++ b/.github/workflows/plugins-deploy-packages.yml
@@ -1,143 +1,11 @@
 name: Plugins/packages deployer

 on:
-  push:
-    branches:
-      - develop
-      - staging
-      - main
-    paths:
-      - 'plugins/apps/*-plugin/**'
-      - 'libs/plugins-styles/**'
  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: choice
-        required: true
-        default: 'develop'
-        options:
-          - develop
-          - staging
-          - main

 jobs:
-  detect-changes:
+  print_text_job:
    runs-on: ubuntu-latest
-    outputs:
-      colors_to_tokens: ${{ steps.filter.outputs.colors_to_tokens }}
-      create_palette: ${{ steps.filter.outputs.create_palette }}
-      lorem_ipsum: ${{ steps.filter.outputs.lorem_ipsum }}
-      rename_layers: ${{ steps.filter.outputs.rename_layers }}
-      contrast: ${{ steps.filter.outputs.contrast }}
-      icons: ${{ steps.filter.outputs.icons }}
-      poc_state: ${{ steps.filter.outputs.poc_state }}
-      table: ${{ steps.filter.outputs.table }}
-      # [For new plugins]
-      #   Add more outputs here
    steps:
-      - uses: actions/checkout@v4
-      - id: filter
-        uses: dorny/paths-filter@v3
-        with:
-          filters: |
-            colors_to_tokens:
-              - 'plugins/apps/colors-to-tokens-plugin/**'
-              - 'libs/plugins-styles/**'
-            contrast:
-              - 'plugins/apps/contrast-plugin/**'
-              - 'libs/plugins-styles/**'
-            create_palette:
-              - 'plugins/apps/create-palette-plugin/**'
-              - 'libs/plugins-styles/**'
-            icons:
-              - 'plugins/apps/icons-plugin/**'
-              - 'libs/plugins-styles/**'
-            lorem_ipsum:
-              - 'plugins/apps/lorem-ipsum-plugin/**'
-              - 'libs/plugins-styles/**'
-            rename_layers:
-              - 'plugins/apps/rename-layers-plugin/**'
-              - 'libs/plugins-styles/**'
-            table:
-              - 'plugins/apps/table-plugin/**'
-              - 'libs/plugins-styles/**'
-           # [For new plugins]
-           #   Add more plugin filters here
-           #     another_plugin:
-           #       - 'plugins/apps/another-plugin/**'
-           #       - 'libs/plugins-styles/**'
-
-  colors-to-tokens-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.colors_to_tokens == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: colors-to-tokens
-
-  contrast-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.contrast == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: contrast
-
-  create-palette-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.create_palette == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: create-palette
-
-  icons-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.icons == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: icons
-
-  lorem-ipsum-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.lorem_ipsum == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: lorem-ipsum
-
-  rename-layers-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.rename_layers == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: rename-layers
-
-  table-plugin:
-    needs: detect-changes
-    if: needs.detect-changes.outputs.table == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: table
-
-  # [For new plugins]
-  #   Add more jobs for other plugins below, following the same pattern
-  #     another-plugin:
-  #       needs: detect-changes
-  #       if: needs.detect-changes.outputs.another_plugin == 'true'
-  #       uses: ./.github/workflows/plugins-deploy-package.yml
-  #       secrets: inherit
-  #       with:
-  #         gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-  #         plugin_name: another
+      - name: Print Hello World
+        run: echo "Hello, World!"
--- a/backend/scripts/_env
+++ b/backend/scripts/_env
@@ -1,12 +1,7 @@
 #!/usr/bin/env bash

-export PENPOT_NITRATE_SHARED_KEY=super-secret-nitrate-api-key
-export PENPOT_EXPORTER_SHARED_KEY=super-secret-exporter-api-key
-export PENPOT_SECRET_KEY=super-secret-devenv-key
-
-# DEPRECATED: only used for subscriptions
 export PENPOT_MANAGEMENT_API_KEY=super-secret-management-api-key
-
+export PENPOT_SECRET_KEY=super-secret-devenv-key
 export PENPOT_HOST=devenv
 export PENPOT_PUBLIC_URI=https://localhost:3449

--- a/backend/src/app/config.clj
+++ b/backend/src/app/config.clj
@@ -102,8 +102,6 @@
    [:http-server-io-threads {:optional true} ::sm/int]
    [:http-server-max-worker-threads {:optional true} ::sm/int]

-    [:exporter-shared-key {:optional true} :string]
-    [:nitrate-shared-key {:optional true} :string]
    [:management-api-key {:optional true} :string]

    [:telemetry-uri {:optional true} :string]
--- a/backend/src/app/http/management.clj
+++ b/backend/src/app/http/management.clj
@@ -13,13 +13,13 @@
   [app.common.time :as ct]
   [app.config :as cf]
   [app.db :as db]
+   [app.http.middleware :as mw]
   [app.main :as-alias main]
   [app.rpc.commands.profile :as cmd.profile]
   [app.setup :as-alias setup]
   [app.tokens :as tokens]
   [app.worker :as-alias wrk]
   [integrant.core :as ig]
-   [yetti.request :as yreq]
   [yetti.response :as-alias yres]))

 ;; ---- ROUTES
@@ -49,40 +49,28 @@
         (fn [cfg request]
           (db/tx-run! cfg handler request)))))})

-(def ^:private shared-key-auth
-  {:name ::shared-key-auth
-   :compile
-   (fn [_ _]
-     (fn [handler key]
-       (if key
-         (fn [request]
-           (if-let [key' (yreq/get-header request "x-shared-key")]
-             (if (= key key')
-               (handler request)
-               {::yres/status 403})
-             {::yres/status 403}))
-         (fn [_ _]
-           {::yres/status 403}))))})
-
 (defmethod ig/init-key ::routes
-  [_ cfg]
+  [_ {:keys [::setup/props] :as cfg}]

-  ["" {:middleware [[shared-key-auth (cf/get :management-api-key)]
-                    [default-system cfg]
-                    [transaction]]}
-   ["/authenticate"
-    {:handler authenticate
-     :allowed-methods #{:post}}]
+  (let [management-key (or (cf/get :management-api-key)
+                           (get props :management-key))]

-   ["/get-customer"
-    {:handler get-customer
-     :transaction true
-     :allowed-methods #{:post}}]
+    ["" {:middleware [[mw/shared-key-auth management-key]
+                      [default-system cfg]
+                      [transaction]]}
+     ["/authenticate"
+      {:handler authenticate
+       :allowed-methods #{:post}}]

-   ["/update-customer"
-    {:handler update-customer
-     :allowed-methods #{:post}
-     :transaction true}]])
+     ["/get-customer"
+      {:handler get-customer
+       :transaction true
+       :allowed-methods #{:post}}]
+
+     ["/update-customer"
+      {:handler update-customer
+       :allowed-methods #{:post}
+       :transaction true}]]))

 ;; ---- HELPERS

--- a/backend/src/app/http/middleware.clj
+++ b/backend/src/app/http/middleware.clj
@@ -16,6 +16,7 @@
   [app.http.errors :as errors]
   [app.tokens :as tokens]
   [app.util.pointer-map :as pmap]
+   [buddy.core.codecs :as bc]
   [cuerdas.core :as str]
   [yetti.adapter :as yt]
   [yetti.middleware :as ymw]
@@ -300,20 +301,16 @@
   :compile (constantly wrap-auth)})

 (defn- wrap-shared-key-auth
-  [handler keys]
-  (if (seq keys)
-    (fn [request]
-      (if-let [[key-id key] (some-> (yreq/get-header request "x-shared-key")
-                                    (str/split #"\s+" 2))]
-        (let [key-id (str/lower key-id)]
-          (if (and (string? key)
-                   (contains? keys key-id)
-                   (= key (get keys key-id)))
-            (-> request
-                (assoc ::http/auth-key-id key-id)
-                (handler))
-            {::yres/status 403}))
-        {::yres/status 403}))
+  [handler shared-key]
+  (if shared-key
+    (let [shared-key (if (string? shared-key)
+                       shared-key
+                       (bc/bytes->b64-str shared-key true))]
+      (fn [request]
+        (let [key (yreq/get-header request "x-shared-key")]
+          (if (= key shared-key)
+            (handler (assoc request ::http/auth-with-shared-key true))
+            {::yres/status 403}))))
    (fn [_ _]
      {::yres/status 403})))

--- a/backend/src/app/loggers/audit.clj
+++ b/backend/src/app/loggers/audit.clj
@@ -140,14 +140,10 @@
        client-version      (get-client-version request)
        client-user-agent   (get-client-user-agent request)
        session-id          (get-external-session-id request)
-        key-id              (::http/auth-key-id request)
-        token-id            (::actoken/id request)
-        token-type          (::actoken/type request)]
+        token-id       (::actoken/id request)]
    (d/without-nils
     {:external-session-id session-id
-      :initiator (or key-id "app")
      :access-token-id (some-> token-id str)
-      :access-token-type (some-> token-type str)
      :client-event-origin client-event-origin
      :client-user-agent client-user-agent
      :client-version client-version
--- a/backend/src/app/main.clj
+++ b/backend/src/app/main.clj
@@ -275,7 +275,8 @@
    ::email/whitelist    (ig/ref ::email/whitelist)}

   ::mgmt/routes
-   {::db/pool (ig/ref ::db/pool)}
+   {::db/pool            (ig/ref ::db/pool)
+    ::setup/props        (ig/ref ::setup/props)}

   :app.http/router
   {::session/manager    (ig/ref ::session/manager)
@@ -351,13 +352,13 @@
    ::setup/props        (ig/ref ::setup/props)}

   ::rpc/routes
-   {::rpc/methods            (ig/ref :app.rpc/methods)
+   {::rpc/methods        (ig/ref :app.rpc/methods)
    ::rpc/management-methods (ig/ref :app.rpc/management-methods)

    ;; FIXME: revisit if db/pool is necessary here
    ::db/pool                (ig/ref ::db/pool)
    ::session/manager        (ig/ref ::session/manager)
-    ::setup/shared-keys      (ig/ref ::setup/shared-keys)}
+    ::setup/props            (ig/ref ::setup/props)}

   ::wrk/registry
   {::mtx/metrics (ig/ref ::mtx/metrics)
@@ -445,11 +446,6 @@
    ;; module requires the migrations to run before initialize.
    ::migrations (ig/ref :app.migrations/migrations)}

-   ::setup/shared-keys
-   {::setup/props (ig/ref ::setup/props)
-    :nitrate (cf/get :nitrate-shared-key)
-    :exporter (cf/get :exporter-shared-key)}
-
   ::setup/clock
   {}

--- a/backend/src/app/rpc.clj
+++ b/backend/src/app/rpc.clj
@@ -92,11 +92,11 @@
    (fn [{:keys [params path-params method] :as request}]
      (let [handler-name (:type path-params)
            etag         (yreq/get-header request "if-none-match")
-
-            key-id       (get request ::http/auth-key-id)
            profile-id   (or (::session/profile-id request)
                             (::actoken/profile-id request)
-                             (if key-id uuid/zero nil))
+                             (if (::http/auth-with-shared-key request)
+                               uuid/zero
+                               nil))

            ip-addr      (inet/parse-request request)

@@ -345,20 +345,23 @@

 (defmethod ig/assert-key ::routes
  [_ params]
-  (assert (map? (::setup/shared-keys params)))
  (assert (db/pool? (::db/pool params)) "expect valid database pool")
+  (assert (some? (::setup/props params)))
  (assert (session/manager? (::session/manager params)) "expect valid session manager")
  (assert (valid-methods? (::methods params)) "expect valid methods map")
  (assert (valid-methods? (::management-methods params)) "expect valid methods map"))

 (defmethod ig/init-key ::routes
-  [_ {:keys [::methods ::management-methods ::setup/shared-keys] :as cfg}]
+  [_ {:keys [::methods ::management-methods ::setup/props] :as cfg}]
+
+  (let [public-uri     (cf/get :public-uri)
+        management-key (or (cf/get :management-api-key)
+                           (get props :management-key))]

-  (let [public-uri (cf/get :public-uri)]
    ["/api"
     ["/management"
      ["/methods/:type"
-       {:middleware [[mw/shared-key-auth shared-keys]
+       {:middleware [[mw/shared-key-auth management-key]
                     [session/authz cfg]]
        :handler (make-rpc-handler management-methods)}]

--- a/backend/src/app/setup.clj
+++ b/backend/src/app/setup.clj
@@ -17,7 +17,6 @@
   [app.setup.templates]
   [buddy.core.codecs :as bc]
   [buddy.core.nonce :as bn]
-   [cuerdas.core :as str]
   [integrant.core :as ig]))

 (defn- generate-random-key
@@ -89,38 +88,7 @@
                      (-> (get-all-props conn)
                          (assoc :secret-key secret)
                          (assoc :tokens-key (keys/derive secret :salt "tokens"))
+                          (assoc :management-key (keys/derive secret :salt "management"))
                          (update :instance-id handle-instance-id conn (db/read-only? pool)))))))

 (sm/register! ::props [:map-of :keyword ::sm/any])
-
-
-(defmethod ig/init-key ::shared-keys
-  [_ {:keys [::props] :as cfg}]
-  (let [secret (get props :secret-key)]
-    (d/without-nils
-     {"exporter"
-      (let [key (or (get cfg :exporter)
-                    (-> (keys/derive secret :salt "exporter")
-                        (bc/bytes->b64-str true)))]
-        (if (or (str/empty? key)
-                (str/blank? key))
-          (do
-            (l/wrn :hint "exporter key is disabled because empty string found")
-            nil)
-          (do
-            (l/inf :hint "exporter key initialized" :key (d/obfuscate-string key))
-            key)))
-
-      "nitrate"
-      (let [key (or (get cfg :nitrate)
-                    (-> (keys/derive secret :salt "nitrate")
-                        (bc/bytes->b64-str true)))]
-        (if (or (str/empty? key)
-                (str/blank? key))
-          (do
-            (l/wrn :hint "nitrate key is disabled because empty string found")
-            nil)
-          (do
-            (l/inf :hint "nitrate key initialized" :key (d/obfuscate-string key))
-            key)))})))
-
--- a/backend/test/backend_tests/http_middleware_test.clj
+++ b/backend/test/backend_tests/http_middleware_test.clj
@@ -86,7 +86,7 @@
 (t/deftest shared-key-auth
  (let [handler (#'app.http.middleware/wrap-shared-key-auth
                 (fn [req] {::yres/status 200})
-                 {"test1" "secret-key"})]
+                 "secret-key")]

    (let [response (handler (->DummyRequest {} {}))]
      (t/is (= 403 (::yres/status response))))
@@ -95,9 +95,6 @@
      (t/is (= 403 (::yres/status response))))

    (let [response (handler (->DummyRequest {"x-shared-key" "secret-key"} {}))]
-      (t/is (= 403 (::yres/status response))))
-
-    (let [response (handler (->DummyRequest {"x-shared-key" "test1 secret-key"} {}))]
      (t/is (= 200 (::yres/status response))))))

 (t/deftest access-token-authz
--- a/common/src/app/common/types/token.cljc
+++ b/common/src/app/common/types/token.cljc
@@ -488,7 +488,6 @@
   :sided-margins #{:spacing :dimensions}
   :line-height #{:line-height :number}
   :opacity #{:opacity}
-   :stroke-width #{:stroke-width :dimensions}
   :font-size #{:font-size}
   :letter-spacing #{:letter-spacing}
   :fill #{:color}
--- a/exporter/src/app/config.cljs
+++ b/exporter/src/app/config.cljs
@@ -12,14 +12,11 @@
   ["node:process" :as process]
   [app.common.data :as d]
   [app.common.flags :as flags]
-   [app.common.logging :as l]
   [app.common.schema :as sm]
   [app.common.version :as v]
   [cljs.core :as c]
   [cuerdas.core :as str]))

-(l/set-level! :info)
-
 (def ^:private defaults
  {:public-uri "http://localhost:3449"
   :tenant "default"
@@ -33,7 +30,7 @@
  [:map {:title "config"}
   [:secret-key :string]
   [:public-uri {:optional true} ::sm/uri]
-   [:exporter-shared-key {:optional true} :string]
+   [:management-api-key {:optional true} :string]
   [:host {:optional true} :string]
   [:tenant {:optional true} :string]
   [:flags {:optional true} [::sm/set :keyword]]
@@ -101,10 +98,8 @@
   (c/get config key default)))

 (def management-key
-  (let [key (or (c/get config :exporter-shared-key)
-                (let [secret-key  (c/get config :secret-key)
-                      derived-key (crypto/hkdfSync "blake2b512" secret-key, "exporter" "" 32)]
-                  (-> (.from buffer/Buffer derived-key)
-                      (.toString "base64url"))))]
-    (l/inf :hint "exporter key initialized" :key (d/obfuscate-string key))
-    key))
+  (or (c/get config :management-api-key)
+      (let [secret-key  (c/get config :secret-key)
+            derived-key (crypto/hkdfSync "blake2b512" secret-key, "management" "" 32)]
+        (-> (.from buffer/Buffer derived-key)
+            (.toString "base64url")))))
--- a/exporter/src/app/handlers/resources.cljs
+++ b/exporter/src/app/handlers/resources.cljs
@@ -73,7 +73,7 @@
       (p/mcat (fn [blob]
                 (let [fdata  (new http/FormData)
                       agent  (new http/Agent #js {:connect #js {:rejectUnauthorized false}})
-                       headers #js {"X-Shared-Key" (str "exporter " cf/management-key)
+                       headers #js {"X-Shared-Key" cf/management-key
                                    "Authorization" (str "Bearer " auth-token)}

                       request #js {:headers headers
--- a/frontend/playwright/data/workspace/get-file-layout-stroke-token-json
+++ b/frontend/playwright/data/workspace/get-file-layout-stroke-token-json
@@ -1,352 +0,0 @@
-{
-    "~:features": {
-        "~#set": [
-            "fdata/path-data",
-            "plugins/runtime",
-            "design-tokens/v1",
-            "variants/v1",
-            "layout/grid",
-            "styles/v2",
-            "fdata/objects-map",
-            "components/v2",
-            "fdata/shape-data-type"
-        ]
-    },
-    "~:team-id": "~u55ffbd0f-2d3f-8023-8007-6b89af7ca1aa",
-    "~:permissions": {
-        "~:type": "~:membership",
-        "~:is-owner": true,
-        "~:is-admin": true,
-        "~:can-edit": true,
-        "~:can-read": true,
-        "~:is-logged": true
-    },
-    "~:has-media-trimmed": false,
-    "~:comment-thread-seqn": 0,
-    "~:name": "Nuevo Archivo 2",
-    "~:revn": 18,
-    "~:modified-at": "~m1768994999265",
-    "~:vern": 0,
-    "~:id": "~u8bb92298-e24e-805c-8007-6ce64314bfe8",
-    "~:is-shared": false,
-    "~:migrations": {
-        "~#ordered-set": [
-            "legacy-2",
-            "legacy-3",
-            "legacy-5",
-            "legacy-6",
-            "legacy-7",
-            "legacy-8",
-            "legacy-9",
-            "legacy-10",
-            "legacy-11",
-            "legacy-12",
-            "legacy-13",
-            "legacy-14",
-            "legacy-16",
-            "legacy-17",
-            "legacy-18",
-            "legacy-19",
-            "legacy-25",
-            "legacy-26",
-            "legacy-27",
-            "legacy-28",
-            "legacy-29",
-            "legacy-31",
-            "legacy-32",
-            "legacy-33",
-            "legacy-34",
-            "legacy-36",
-            "legacy-37",
-            "legacy-38",
-            "legacy-39",
-            "legacy-40",
-            "legacy-41",
-            "legacy-42",
-            "legacy-43",
-            "legacy-44",
-            "legacy-45",
-            "legacy-46",
-            "legacy-47",
-            "legacy-48",
-            "legacy-49",
-            "legacy-50",
-            "legacy-51",
-            "legacy-52",
-            "legacy-53",
-            "legacy-54",
-            "legacy-55",
-            "legacy-56",
-            "legacy-57",
-            "legacy-59",
-            "legacy-62",
-            "legacy-65",
-            "legacy-66",
-            "legacy-67",
-            "0001-remove-tokens-from-groups",
-            "0002-normalize-bool-content-v2",
-            "0002-clean-shape-interactions",
-            "0003-fix-root-shape",
-            "0003-convert-path-content-v2",
-            "0005-deprecate-image-type",
-            "0006-fix-old-texts-fills",
-            "0008-fix-library-colors-v4",
-            "0009-clean-library-colors",
-            "0009-add-partial-text-touched-flags",
-            "0010-fix-swap-slots-pointing-non-existent-shapes",
-            "0011-fix-invalid-text-touched-flags",
-            "0012-fix-position-data",
-            "0013-fix-component-path",
-            "0013-clear-invalid-strokes-and-fills",
-            "0014-fix-tokens-lib-duplicate-ids",
-            "0014-clear-components-nil-objects",
-            "0015-fix-text-attrs-blank-strings",
-            "0015-clean-shadow-color",
-            "0016-copy-fills-from-position-data-to-text-node"
-        ]
-    },
-    "~:version": 67,
-    "~:project-id": "~u55ffbd0f-2d3f-8023-8007-6b89af7cd5eb",
-    "~:created-at": "~m1768562403410",
-    "~:backend": "legacy-db",
-    "~:data": {
-        "~:pages": [
-            "~u8bb92298-e24e-805c-8007-6ce64314cfc5"
-        ],
-        "~:pages-index": {
-            "~u8bb92298-e24e-805c-8007-6ce64314cfc5": {
-                "~:objects": {
-                    "~#penpot/objects-map/v2": {
-                        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~u8506e3f3-e05b-807c-8007-6ceac380abc1\"]]]",
-                        "~u6c65a5dc-fb40-8072-8007-6ce644905054": "[\"~#shape\",[\"^ \",\"~:y\",159,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",false,\"~:name\",\"Board\",\"~:layout-align-items\",\"~:start\",\"~:width\",389,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",303,\"~:y\",159]],[\"^L\",[\"^ \",\"~:x\",692,\"~:y\",159]],[\"^L\",[\"^ \",\"~:x\",692,\"~:y\",599]],[\"^L\",[\"^ \",\"~:x\",303,\"~:y\",599]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",303,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",303,\"~:y\",159,\"^F\",389,\"~:height\",440,\"~:x1\",303,\"~:y1\",159,\"~:x2\",692,\"~:y2\",599]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^16\",440,\"~:flip-y\",null,\"~:shapes\",[\"~u6c65a5dc-fb40-8072-8007-6ce655b5dbe9\",\"~u6c65a5dc-fb40-8072-8007-6ce65472f217\",\"~u6c65a5dc-fb40-8072-8007-6ce6535e8d62\"]]]",
-                        "~u6c65a5dc-fb40-8072-8007-6ce6535e8d62": "[\"~#shape\",[\"^ \",\"~:y\",159,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",95,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",303,\"~:y\",159]],[\"^<\",[\"^ \",\"~:x\",398,\"~:y\",159]],[\"^<\",[\"^ \",\"~:x\",398,\"~:y\",259]],[\"^<\",[\"^ \",\"~:x\",303,\"~:y\",259]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u6c65a5dc-fb40-8072-8007-6ce6535e8d62\",\"~:parent-id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:frame-id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:strokes\",[],\"~:x\",303,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",303,\"~:y\",159,\"^8\",95,\"~:height\",100,\"~:x1\",303,\"~:y1\",159,\"~:x2\",398,\"~:y2\",259]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",100,\"~:flip-y\",null]]",
-                        "~u6c65a5dc-fb40-8072-8007-6ce65472f217": "[\"~#shape\",[\"^ \",\"~:y\",159,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",140.99999999999994,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",398,\"~:y\",159]],[\"^<\",[\"^ \",\"~:x\",539,\"~:y\",159]],[\"^<\",[\"^ \",\"~:x\",539,\"~:y\",296]],[\"^<\",[\"^ \",\"~:x\",398,\"~:y\",296]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u6c65a5dc-fb40-8072-8007-6ce65472f217\",\"~:parent-id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:frame-id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:strokes\",[],\"~:x\",398.00000000000006,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",398.00000000000006,\"~:y\",159,\"^8\",140.99999999999994,\"~:height\",137,\"~:x1\",398.00000000000006,\"~:y1\",159,\"~:x2\",539,\"~:y2\",296]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",137,\"~:flip-y\",null]]",
-                        "~u6c65a5dc-fb40-8072-8007-6ce655b5dbe9": "[\"~#shape\",[\"^ \",\"~:y\",159,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",82,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",539,\"~:y\",159]],[\"^<\",[\"^ \",\"~:x\",621,\"~:y\",159]],[\"^<\",[\"^ \",\"~:x\",621,\"~:y\",259]],[\"^<\",[\"^ \",\"~:x\",539,\"~:y\",259]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u6c65a5dc-fb40-8072-8007-6ce655b5dbe9\",\"~:parent-id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:frame-id\",\"~u6c65a5dc-fb40-8072-8007-6ce644905054\",\"~:strokes\",[],\"~:x\",539,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",539,\"~:y\",159,\"^8\",82,\"~:height\",100,\"~:x1\",539,\"~:y1\",159,\"~:x2\",621,\"~:y2\",259]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",100,\"~:flip-y\",null]]",
-                        "~u8506e3f3-e05b-807c-8007-6ceac380abc1": "[\"~#shape\",[\"^ \",\"~:y\",405,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",59,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",817,\"~:y\",405]],[\"^<\",[\"^ \",\"~:x\",876,\"~:y\",405]],[\"^<\",[\"^ \",\"~:x\",876,\"~:y\",472]],[\"^<\",[\"^ \",\"~:x\",817,\"~:y\",472]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u8506e3f3-e05b-807c-8007-6ceac380abc1\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",817,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",817,\"~:y\",405,\"^8\",59,\"~:height\",67,\"~:x1\",817,\"~:y1\",405,\"~:x2\",876,\"~:y2\",472]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",67,\"~:flip-y\",null]]"
-                    }
-                },
-                "~:id": "~u8bb92298-e24e-805c-8007-6ce64314cfc5",
-                "~:name": "Page 1"
-            }
-        },
-        "~:id": "~u8bb92298-e24e-805c-8007-6ce64314bfe8",
-        "~:options": {
-            "~:components-v2": true,
-            "~:base-font-size": "16px"
-        },
-        "~:tokens-lib": {
-            "~#penpot/tokens-lib": {
-                "~:sets": {
-                    "~#ordered-map": [
-                        [
-                            "S-Global",
-                            {
-                                "~#penpot/token-set": {
-                                    "~:id": "~u7c1a66f7-5186-8060-8007-6ce67f8f2592",
-                                    "~:name": "Global",
-                                    "~:description": "",
-                                    "~:modified-at": "~m1768994999268",
-                                    "~:tokens": {
-                                        "~#ordered-map": [
-                                            [
-                                                "dim.xs",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce67f8f2591",
-                                                        "~:name": "dim.xs",
-                                                        "~:type": "~:dimensions",
-                                                        "~:value": "20",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562465340"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "dim.md",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce68a2f3c3f",
-                                                        "~:name": "dim.md",
-                                                        "~:type": "~:dimensions",
-                                                        "~:value": "50",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562476220"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "dim.xl",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce694f47726",
-                                                        "~:name": "dim.xl",
-                                                        "~:type": "~:dimensions",
-                                                        "~:value": "100",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562487249"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "sz.sm",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce6d6e519b1",
-                                                        "~:name": "sz.sm",
-                                                        "~:type": "~:sizing",
-                                                        "~:value": "200",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562554772"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "sz.xl",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce6e4165307",
-                                                        "~:name": "sz.xl",
-                                                        "~:type": "~:sizing",
-                                                        "~:value": "500",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562568281"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "sp.mid",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce6f5fb2867",
-                                                        "~:name": "sp.mid",
-                                                        "~:type": "~:spacing",
-                                                        "~:value": "50",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562586604"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "sp.l",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u7c1a66f7-5186-8060-8007-6ce71009cd91",
-                                                        "~:name": "sp.l",
-                                                        "~:type": "~:spacing",
-                                                        "~:value": "{dim.xl}",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768562613287"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "test",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~uc49f25e6-1298-8004-8007-709f660875be",
-                                                        "~:name": "test",
-                                                        "~:type": "~:dimensions",
-                                                        "~:value": "20",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768812262433"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "width-big",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u3b3e4320-53fb-8096-8007-73585edb4dd6",
-                                                        "~:name": "width-big",
-                                                        "~:type": "~:stroke-width",
-                                                        "~:value": "20",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768994969453"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "width-small",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u3b3e4320-53fb-8096-8007-73586a5ec516",
-                                                        "~:name": "width-small",
-                                                        "~:type": "~:stroke-width",
-                                                        "~:value": "5",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768994981243"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "red",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u3b3e4320-53fb-8096-8007-735871dccede",
-                                                        "~:name": "red",
-                                                        "~:type": "~:color",
-                                                        "~:value": "red",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768994988915"
-                                                    }
-                                                }
-                                            ],
-                                            [
-                                                "green",
-                                                {
-                                                    "~#penpot/token": {
-                                                        "~:id": "~u3b3e4320-53fb-8096-8007-735879045aa2",
-                                                        "~:name": "green",
-                                                        "~:type": "~:color",
-                                                        "~:value": "green",
-                                                        "~:description": "",
-                                                        "~:modified-at": "~m1768994996241"
-                                                    }
-                                                }
-                                            ]
-                                        ]
-                                    }
-                                }
-                            }
-                        ]
-                    ]
-                },
-                "~:themes": {
-                    "~#ordered-map": [
-                        [
-                            "",
-                            {
-                                "~#ordered-map": [
-                                    [
-                                        "__PENPOT__HIDDEN__TOKEN__THEME__",
-                                        {
-                                            "~#penpot/token-theme": {
-                                                "~:id": "~u00000000-0000-0000-0000-000000000000",
-                                                "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__",
-                                                "~:group": "",
-                                                "~:description": "",
-                                                "~:is-source": false,
-                                                "~:external-id": "",
-                                                "~:modified-at": "~m1768562468391",
-                                                "~:sets": {
-                                                    "~#set": [
-                                                        "Global"
-                                                    ]
-                                                }
-                                            }
-                                        }
-                                    ]
-                                ]
-                            }
-                        ]
-                    ]
-                },
-                "~:active-themes": {
-                    "~#set": [
-                        "/__PENPOT__HIDDEN__TOKEN__THEME__"
-                    ]
-                }
-            }
-        }
-    }
-}
--- a/frontend/playwright/ui/specs/tokens/apply.spec.js
+++ b/frontend/playwright/ui/specs/tokens/apply.spec.js
@@ -681,8 +681,7 @@ test.describe("Tokens: Apply token", () => {
    await dimensionXSTokenPill.click();

    // Change token from dropdown
-    const dimensionTokenOptionXl =
-      borderRadiusSection.getByLabel("dimension.xl");
+    const dimensionTokenOptionXl = borderRadiusSection.getByLabel("dimension.xl");
    await expect(dimensionTokenOptionXl).toBeVisible();
    await dimensionTokenOptionXl.click();

@@ -699,64 +698,5 @@ test.describe("Tokens: Apply token", () => {
    await detachButton.nth(0).click();
    await expect(dimensionXLTokenPill).not.toBeVisible();
  });
-
-  test("User applies stroke width token to a shape", async ({ page }) => {
-    const workspace = new WorkspacePage(page, {
-      textEditor: true,
-    });
-    // Set up
-    await workspace.mockConfigFlags(["enable-feature-token-input"]);
-    await workspace.setupEmptyFile();
-    await workspace.mockGetFile("workspace/get-file-layout-stroke-token-json");
-    await workspace.goToWorkspace();
-
-    // Select shape apply stroke
-    await workspace.layers.getByTestId("layer-row").nth(0).click();
-    const rightSidebar = page.getByTestId("right-sidebar");
-    await expect(rightSidebar).toBeVisible();
-    await rightSidebar.getByTestId("add-stroke").click();
-
-    // Apply stroke width token from token panel
-    const tokensTab = page.getByRole("tab", { name: "Tokens" });
-    await expect(tokensTab).toBeVisible();
-    await tokensTab.click();
-    await page.getByRole("button", { name: "Stroke Width 2" }).click();
-    const tokensSidebar = workspace.tokensSidebar;
-    await expect(
-      tokensSidebar.getByRole("button", { name: "width-big" }),
-    ).toBeVisible();
-    await tokensSidebar.getByRole("button", { name: "width-big" }).click();
-
-    // Check if token pill is visible on right sidebar
-    const strokeSectionSidebar = rightSidebar.getByRole("region", {
-      name: "stroke-section",
-    });
-    await expect(strokeSectionSidebar).toBeVisible();
-    const firstStrokeRow = strokeSectionSidebar.getByLabel("stroke-row-0");
-    await expect(firstStrokeRow).toBeVisible();
-    const StrokeWidthPill = firstStrokeRow.getByRole("button", {
-      name: "width-big",
-    });
-    await expect(StrokeWidthPill).toBeVisible();
-
-    // Detach token from right sidebar and apply another from dropdown
-    const detachButton = firstStrokeRow.getByRole("button", {
-      name: "Detach token",
-    });
-    await detachButton.click();
-    await expect(StrokeWidthPill).not.toBeVisible();
-
-    const tokenDropdown = firstStrokeRow.getByRole("button", {
-      name: "Open token list",
-    });
-    await tokenDropdown.click();
-
-    const widthOptionSmall = firstStrokeRow.getByLabel("width-small");
-    await expect(widthOptionSmall).toBeVisible();
-    await widthOptionSmall.click();
-    const StrokeWidthPillSmall = firstStrokeRow.getByRole("button", {
-      name: "width-small",
-    });
-    await expect(StrokeWidthPillSmall).toBeVisible();
-  });
+  
 });
--- a/frontend/src/app/main/data/workspace/tokens/application.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/application.cljs
@@ -534,10 +534,10 @@
              (set (filter attributes #{:r1 :r2 :r3 :r4}))
              page-id)))

-    (some attributes #{:stroke-width})
+    (some attributes #{:strole-width})
    (conj #(update-stroke-width
            value shape-ids
-            #{:stroke-width}
+            #{:strole-width}
            page-id))
    (some attributes #{:max-width :max-height})
    (conj #(update-layout-sizing-limits
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -176,8 +176,7 @@
                                          :token token
                                          :shape-ids ids}))))]

-    [:section {:class (stl/css :stroke-section)
-               :aria-label "stroke-section"}
+    [:div {:class (stl/css :stroke-section)}
     [:div {:class (stl/css :stroke-title)}
      [:> title-bar* {:collapsable  has-strokes?
                      :collapsed    (not open?)
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -9,50 +9,18 @@
  (:require
   [app.common.data :as d]
   [app.common.types.color :as ctc]
-   [app.common.types.token :as tk]
   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.features :as features]
   [app.main.store :as st]
-   [app.main.ui.components.numeric-input :as deprecated-input]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
   [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
   [app.main.ui.components.select :refer [select]]
-   [app.main.ui.context :as muc]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
   [app.main.ui.hooks :as h]
   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
   [app.util.i18n :as i18n :refer [tr]]
   [rumext.v2 :as mf]))

-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-
-        on-detach-attr (mf/use-fn
-                        (mf/deps on-detach name)
-                        #(on-detach % name))
-
-        applied-token (get applied-tokens name)
-
-        props  (mf/spread-props props
-                                {:placeholder (if (= :multiple values)
-                                                (tr "settings.multiple")
-                                                "--")
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :name name
-                                 :value values})]
-    [:> numeric-input* props]))
-
 (mf/defc stroke-row*
  [{:keys [index
           stroke
@@ -77,10 +45,7 @@
           select-on-focus
           ids]}]

-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        on-drop
+  (let [on-drop
        (mf/use-fn
         (mf/deps on-reorder index)
         (fn [relative-pos data]
@@ -123,13 +88,7 @@
        on-width-change
        (mf/use-fn
         (mf/deps index on-stroke-width-change)
-         (fn [value]
-           (if (or (string? value) (int? value))
-             (on-stroke-width-change index value)
-             (do
-               (st/emit! (dwta/toggle-token {:token (first value)
-                                             :attrs #{:stroke-width}
-                                             :shape-ids ids}))))))
+         #(on-stroke-width-change index %))

        stroke-alignment (or (:stroke-alignment stroke) :center)

@@ -190,12 +149,6 @@
         (fn [token]
           (on-detach-token token #{:stroke-color})))

-        on-detach-token-width
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (on-detach-token (first token) #{:stroke-width})))
-
        stroke-caps-options
        [{:value nil :label (tr "workspace.options.stroke-cap.none")}
         :separator
@@ -216,8 +169,7 @@
    [:div {:class (stl/css-case
                   :stroke-data true
                   :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))
-           :aria-label (str "stroke-row-" index)}
+                   :dnd-over-bot (= (:over dprops) :bot))}

     (when (some? on-reorder)
       [:> reorder-handler* {:ref dref}])
@@ -243,30 +195,17 @@

     ;; Stroke Width, Alignment & Style
     [:div {:class (stl/css :stroke-options)}
-      (if token-numeric-inputs
-        [:> numeric-input-wrapper* {:on-change on-width-change
-                                    :on-detach on-detach-token-width
-                                    :icon i/stroke-size
-                                    :min 0
-                                    :on-focus on-focus
-                                    :on-blur on-blur
-                                    :name :stroke-width
-                                    :class (stl/css :numeric-input-wrapper)
-                                    :property (tr "workspace.options.stroke-width")
-                                    :applied-tokens applied-tokens
-                                    :values stroke-width}]
-
-        [:div {:class (stl/css :stroke-width-input)
-               :title (tr "workspace.options.stroke-width")}
-         [:> icon* {:icon-id i/stroke-size
-                    :size "s"}]
-         [:> deprecated-input/numeric-input* {:value stroke-width
-                                              :min 0
-                                              :placeholder (tr "settings.multiple")
-                                              :on-change on-width-change
-                                              :on-focus on-focus
-                                              :select-on-focus select-on-focus
-                                              :on-blur on-blur}]])
+      [:div {:class (stl/css :stroke-width-input)
+             :title (tr "workspace.options.stroke-width")}
+       [:> icon* {:icon-id i/stroke-size
+                  :size "s"}]
+       [:> numeric-input* {:value stroke-width
+                           :min 0
+                           :placeholder (tr "settings.multiple")
+                           :on-change on-width-change
+                           :on-focus on-focus
+                           :select-on-focus select-on-focus
+                           :on-blur on-blur}]]

      [:div {:class (stl/css :stroke-alignment-select)
             :data-testid "stroke.alignment"}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
@@ -45,11 +45,6 @@
  padding-inline-start: var(--sp-xs);
 }

-.numeric-input-wrapper {
-  grid-column: span 2;
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
 .stroke-alignment-select {
  grid-column: span 3;
 }
--- a/plugins/README.md
+++ b/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

--- a/plugins/apps/poc-tokens-plugin/eslint.config.js
+++ b/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,
+      },
+    },
+  },
+];
--- a/plugins/apps/poc-tokens-plugin/project.json
+++ b/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"
+      }
+    }
+  }
+}
--- a/plugins/apps/poc-tokens-plugin/src/app/app.component.css
+++ b/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;
+}
--- a/plugins/apps/poc-tokens-plugin/src/app/app.component.html
+++ b/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>
--- a/plugins/apps/poc-tokens-plugin/src/app/app.component.ts
+++ b/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);
+  }
+}
--- a/plugins/apps/poc-tokens-plugin/src/app/app.config.ts
+++ b/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),
+  ],
+};
--- a/plugins/apps/poc-tokens-plugin/src/app/app.routes.ts
+++ b/plugins/apps/poc-tokens-plugin/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
--- a/plugins/apps/poc-tokens-plugin/src/assets/CORS
+++ b/plugins/apps/poc-tokens-plugin/src/assets/CORS
@@ -0,0 +1 @@
+*
--- a/plugins/apps/poc-tokens-plugin/src/assets/_headers
+++ b/plugins/apps/poc-tokens-plugin/src/assets/_headers
@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *
--- a/plugins/apps/poc-tokens-plugin/src/assets/favicon.ico
+++ b/plugins/apps/poc-tokens-plugin/src/assets/favicon.ico
--- a/plugins/apps/poc-tokens-plugin/src/assets/icon.png
+++ b/plugins/apps/poc-tokens-plugin/src/assets/icon.png
--- a/plugins/apps/poc-tokens-plugin/src/assets/manifest.json
+++ b/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"
+  ]
+}
--- a/plugins/apps/poc-tokens-plugin/src/index.html
+++ b/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>
--- a/plugins/apps/poc-tokens-plugin/src/main.ts
+++ b/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),
+);
--- a/plugins/apps/poc-tokens-plugin/src/model.ts
+++ b/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;
--- a/plugins/apps/poc-tokens-plugin/src/plugin.ts
+++ b/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);
+  //   }
+  // }
+}
--- a/plugins/apps/poc-tokens-plugin/src/styles.css
+++ b/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);
+}
--- a/plugins/apps/poc-tokens-plugin/tsconfig.app.json
+++ b/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"]
+}
--- a/plugins/apps/poc-tokens-plugin/tsconfig.editor.json
+++ b/plugins/apps/poc-tokens-plugin/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}
--- a/plugins/apps/poc-tokens-plugin/tsconfig.json
+++ b/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
+  }
+}
--- a/plugins/apps/poc-tokens-plugin/tsconfig.plugin.json
+++ b/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"]
+}
--- a/plugins/libs/plugin-types/index.d.ts
+++ b/plugins/libs/plugin-types/index.d.ts
--- a/plugins/package.json
+++ b/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",
Author	SHA1	Message	Date
Andrés Moya	e493746b77	📚 Document better the tokens value in plugins API	2026-01-26 12:14:35 +01:00
Andrey Antukh	0a396923b8	🎉 Add tokens to plugins API documentation And add poc plugin example	2026-01-26 12:14:35 +01:00