♻️ Replace margin inputs

.github/workflows/build-bundle.yml

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

.github/workflows/plugins-deploy-api-doc.yml

@@ -1,73 +0,0 @@
-name: Plugins/api-doc deployer
-
-on:
-  push:
-    branches:
-      - develop
-      - staging
-      - main
-    paths:
-      - "plugins/**"
-      - ".github/workflows/deploy-plugin-docs.yml"
-      - "wrangle-penpot-plugins-api-doc.toml"
-  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch or ref'
-        type: string
-        required: true
-        default: 'develop'
-
-permissions:
-  contents: read
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: plugins
-    steps:
-      - name: Extract some useful variables
-        id: vars
-        run: |
-          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
-
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ steps.vars.outputs.gh_ref }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: "pnpm"
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          run_install: false
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build docs
-        run: pnpm run build:doc
-
-      - name: Select Worker name
-        run: |
-          REF="${{ steps.vars.outputs.gh_ref }}"
-          case "$REF" in
-            main) echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV ;;
-            staging) echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV ;;
-            develop) echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV ;;
-            *) echo "Unsupported branch ${REF}" && exit 1 ;;
-          esac
-
-      - name: Deploy to Cloudflare Workers
-        uses: cloudflare/wrangler-action@v3
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: deploy --config wrangle-penpot-plugins-api-doc.toml --name ${{ env.WORKER_NAME }}

.gitignore

@@ -21,7 +21,6 @@
 .rebel_readline_history
 .repl
 .shadow-cljs
-.pnpm-store/
 /*.jpg
 /*.md
 /*.png
@@ -73,7 +72,6 @@
 /library/target/
 /library/*.zip
 /external
-/penpot-nitrate
 
 clj-profiler/
 node_modules

.travis.yml

@@ -0,0 +1,40 @@
+dist: xenial
+
+language: generic
+sudo: required
+
+cache:
+  directories:
+    - $HOME/.m2
+
+services:
+  - docker
+
+branches:
+  only:
+    - master
+    - develop
+
+install:
+  - curl -O https://download.clojure.org/install/linux-install-1.10.1.447.sh
+  - chmod +x linux-install-1.10.1.447.sh
+  - sudo ./linux-install-1.10.1.447.sh
+
+before_script:
+  - env | sort
+
+script:
+  - ./manage.sh build-devenv
+  - ./manage.sh run-frontend-tests
+  - ./manage.sh run-backend-tests
+  - ./manage.sh build-images
+  - ./manage.sh run
+
+after_script:
+  - docker images
+
+notifications:
+  email: false
+
+env:
+  - NODE_VERSION=10.16.0

CHANGES.md

@@ -24,7 +24,6 @@
 - Fix wrong register image [Taiga #12955](https://tree.taiga.io/project/penpot/task/12955)
 - Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
 - Fix incorrect default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
-- Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
 
 ## 2.13.0 (Unreleased)
 

backend/scripts/_env

@@ -36,8 +36,7 @@ export PENPOT_FLAGS="\
        enable-file-validation \
        enable-file-schema-validation \
        enable-redis-cache \
-       enable-subscriptions \
-       enable-nitrate";
+       enable-subscriptions";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
@@ -56,8 +55,6 @@ export PENPOT_OBJECTS_STORAGE_BACKEND=s3
 export PENPOT_OBJECTS_STORAGE_S3_ENDPOINT=http://minio:9000
 export PENPOT_OBJECTS_STORAGE_S3_BUCKET=penpot
 
-export PENPOT_NITRATE_BACKEND_URI=http://localhost:3000/control-center
-
 export JAVA_OPTS="\
        -Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
        -Djdk.attach.allowAttachSelf \

backend/src/app/config.clj

@@ -225,8 +225,6 @@
     [:netty-io-threads {:optional true} ::sm/int]
     [:executor-threads {:optional true} ::sm/int]
 
-    [:nitrate-backend-uri {:optional true} ::sm/uri]
-
     ;; DEPRECATED
     [:assets-storage-backend {:optional true} :keyword]
     [:storage-assets-fs-directory {:optional true} :string]

backend/src/app/main.clj

@@ -323,7 +323,6 @@
    {::http.client/client (ig/ref ::http.client/client)
     ::db/pool            (ig/ref ::db/pool)
     ::rds/pool           (ig/ref ::rds/pool)
-    :app.nitrate/client (ig/ref :app.nitrate/client)
     ::wrk/executor       (ig/ref ::wrk/netty-executor)
     ::session/manager    (ig/ref ::session/manager)
     ::ldap/provider      (ig/ref ::ldap/provider)
@@ -340,9 +339,6 @@
     ::email/blacklist    (ig/ref ::email/blacklist)
     ::email/whitelist    (ig/ref ::email/whitelist)}
 
-   :app.nitrate/client
-   {::http.client/client (ig/ref ::http.client/client)}
-
    :app.rpc/management-methods
    {::http.client/client (ig/ref ::http.client/client)
     ::db/pool            (ig/ref ::db/pool)
@@ -352,7 +348,6 @@
     ::sto/storage        (ig/ref ::sto/storage)
     ::mtx/metrics        (ig/ref ::mtx/metrics)
     ::mbus/msgbus        (ig/ref ::mbus/msgbus)
-    :app.nitrate/client (ig/ref :app.nitrate/client)
     ::rds/client         (ig/ref ::rds/client)
     ::setup/props        (ig/ref ::setup/props)}
 

backend/src/app/nitrate.clj

@@ -1,133 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.nitrate
-  "Module that make calls to the external nitrate aplication"
-  (:require
-   [app.common.logging :as l]
-   [app.common.schema :as sm]
-   [app.config :as cf]
-   [app.http.client :as http]
-   [app.rpc :as-alias rpc]
-   [app.setup :as-alias setup]
-   [app.util.json :as json]
-   [clojure.core :as c]
-   [integrant.core :as ig]))
-
-
-(def baseuri (cf/get :nitrate-backend-uri))
-
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn- coercer
-  [schema & {:as opts}]
-  (let [decode-fn (sm/decoder schema sm/json-transformer)
-        check-fn  (sm/check-fn schema opts)]
-    (fn [data]
-      (-> data decode-fn check-fn))))
-
-
-(defn- request-builder
-  [cfg method uri management-key profile-id]
-  (fn []
-    (http/req! cfg {:method method
-                    :headers {"content-type" "application/json"
-                              "accept" "application/json"
-                              "x-shared-key" management-key
-                              "x-profile-id" (str profile-id)}
-                    :uri uri
-                    :version :http1.1})))
-
-
-(defn- with-retries
-  [handler max-retries]
-  (fn []
-    (loop [attempt 1]
-      (let [result (try
-                     (handler)
-                     (catch Exception e
-                       (if (< attempt max-retries)
-                         ::retry
-                         (do
-                           ;; TODO Error handling
-                           (l/error :hint "request fail after multiple retries" :cause e)
-                           nil))))]
-        (if (= result ::retry)
-          (recur (inc attempt))
-          result)))))
-
-
-(defn- with-validate [handler uri schema]
-  (fn []
-    (let [coercer-http   (coercer schema
-                                  :type :validation
-                                  :hint (str "invalid data received calling " uri))]
-      (try
-        (coercer-http (-> (handler) :body json/decode))
-        (catch Exception e
-          ;; TODO Error handling
-          (l/error :hint "error validating json response" :cause e)
-          nil)))))
-
-(defn- request-to-nitrate
-  [{:keys [::management-key] :as cfg} method uri schema {:keys [::rpc/profile-id] :as params}]
-  (let [full-http-call (-> (request-builder cfg method uri management-key profile-id)
-                           (with-retries 3)
-                           (with-validate uri schema))]
-    (full-http-call)))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; API
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn call
-  [cfg method params]
-  (when (contains? cf/flags :nitrate)
-    (let [client (get cfg ::client)
-          method (get client method)]
-      (method params))))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(def ^:private schema:organization
-  [:map
-   [:id ::sm/text]
-   [:name ::sm/text]])
-
-(def ^:private schema:user
-  [:map
-   [:valid ::sm/boolean]])
-
-(defn- get-team-org
-  [cfg {:keys [team-id] :as params}]
-  (request-to-nitrate cfg :get (str baseuri "/api/teams/" (str team-id)) schema:organization params))
-
-(defn- is-valid-user
-  [cfg {:keys [profile-id] :as params}]
-  (request-to-nitrate cfg :get (str baseuri "/api/users/" (str profile-id)) schema:user params))
-
-
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; INITIALIZATION
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defmethod ig/init-key ::client
-  [_ {:keys [::setup/props] :as cfg}]
-  (if (contains? cf/flags :nitrate)
-    (let [management-key (or (cf/get :management-api-key)
-                             (get props :management-key))
-          cfg (assoc cfg ::management-key management-key)]
-      {:get-team-org (partial get-team-org cfg)
-       :is-valid-user (partial is-valid-user cfg)})
-    {}))
-
-(defmethod ig/halt-key! ::client
-  [_ {:keys []}]
-  (do :stuff))

backend/src/app/rpc.clj

@@ -301,7 +301,6 @@
   (let [cfg (assoc cfg ::type "management" ::metrics-id :rpc-management-timing)]
     (->> (sv/scan-ns
           'app.rpc.management.subscription
-          'app.rpc.management.nitrate
           'app.rpc.management.exporter)
          (map (partial process-method cfg "management" wrap-management))
          (into {}))))

backend/src/app/rpc/commands/profile.clj

@@ -21,7 +21,6 @@
    [app.loggers.audit :as audit]
    [app.main :as-alias main]
    [app.media :as media]
-   [app.nitrate :as nitrate]
    [app.rpc :as-alias rpc]
    [app.rpc.climit :as climit]
    [app.rpc.doc :as-alias doc]
@@ -89,17 +88,6 @@
 
 ;; --- QUERY: Get profile (own)
 
-(defn- add-nitrate-licence-to-profile
-  [cfg profile]
-  (try
-    (let [nitrate-licence (nitrate/call cfg :is-valid-user {:profile-id (:id profile)})]
-      (assoc profile :nitrate-licence (:valid nitrate-licence)))
-    (catch Throwable cause
-      (prn :hint "failed to get nitrate licence"
-           :profile-id (:id profile)
-           :cause cause)
-      profile)))
-
 (sv/defmethod ::get-profile
   {::rpc/auth false
    ::doc/added "1.18"
@@ -110,13 +98,9 @@
   ;; no profile-id is in session, and when db call raises not found. In all other
   ;; cases we need to reraise the exception.
   (try
-    (let [profile (-> (get-profile pool profile-id)
-                      (strip-private-attrs)
-                      (update :props filter-props))]
-      (if (contains? cf/flags :nitrate)
-        (add-nitrate-licence-to-profile cfg profile)
-        profile))
-
+    (-> (get-profile pool profile-id)
+        (strip-private-attrs)
+        (update :props filter-props))
     (catch Throwable _
       {:id uuid/zero :fullname "Anonymous User"})))
 

backend/src/app/rpc/commands/teams.clj

@@ -23,7 +23,6 @@
    [app.main :as-alias main]
    [app.media :as media]
    [app.msgbus :as mbus]
-   [app.nitrate :as nitrate]
    [app.rpc :as-alias rpc]
    [app.rpc.commands.profile :as profile]
    [app.rpc.doc :as-alias doc]
@@ -173,12 +172,6 @@
    (map decode-row)
    (map process-permissions)))
 
-(defn- add-org-to-team
-  [cfg team params]
-  (let [params (assoc (or params {}) :team-id (:id team))
-        org (nitrate/call cfg :get-team-org params)]
-    (assoc team :organization-id (:id org) :organization-name (:name org))))
-
 (defn get-teams
   [conn profile-id]
   (let [profile (profile/get-profile conn profile-id)
@@ -197,9 +190,7 @@
    ::sm/params schema:get-teams}
   [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id] :as params}]
   (dm/with-open [conn (db/open pool)]
-    (cond->> (get-teams conn profile-id)
-      (contains? cf/flags :nitrate)
-      (map #(add-org-to-team cfg % params)))))
+    (get-teams conn profile-id)))
 
 (def ^:private sql:get-owned-teams
   "SELECT t.id, t.name,

backend/src/app/rpc/management/nitrate.clj

@@ -1,112 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.rpc.management.nitrate
-  "Internal Nitrate HTTP API.
-       Provides authenticated access to organization management and token validation endpoints.
-       All requests must include a valid shared key token in the `x-shared-key` header, and
-       a cookie `auth-token` with the user token.
-       They will return `401 Unauthorized` if the shared key or user token are invalid."
-  (:require
-   [app.common.schema :as sm]
-   [app.common.uuid :as uuid]
-   [app.config :as cf]
-   [app.db :as db]
-   [app.msgbus :as mbus]
-   [app.rpc :as-alias rpc]
-   [app.rpc.commands.files :as files]
-   [app.rpc.commands.profile :as profile]
-   [app.rpc.doc :as doc]
-   [app.util.services :as sv]))
-
-;; ---- API: authenticate
-(def ^:private schema:profile
-  [:map
-   [:id ::sm/uuid]
-   [:name :string]
-   [:email :string]
-   [:photo-url :string]])
-
-(sv/defmethod ::authenticate
-  "Authenticate an user
-     @api GET /authenticate
-     @returns
-       200 OK: Returns the authenticated user."
-  {::doc/added "2.12"
-   ::sm/result schema:profile}
-  [cfg {:keys [::rpc/profile-id] :as params}]
-  (let [profile    (profile/get-profile cfg profile-id)]
-    {:id (get profile :id)
-     :name (get profile :fullname)
-     :email (get profile :email)
-     :photo-url (files/resolve-public-uri (get profile :photo-id))}))
-
-;; ---- API: get-teams
-
-(def ^:private sql:get-teams
-  "SELECT t.*
-     FROM team AS t
-     JOIN team_profile_rel AS tpr ON t.id = tpr.team_id
-    WHERE tpr.profile_id = ?
-      AND tpr.is_owner = 't'
-      AND t.is_default = 'f'
-      AND t.deleted_at is null;")
-
-(def ^:private schema:team
-  [:map
-   [:id ::sm/uuid]
-   [:name :string]])
-
-(def ^:private schema:get-teams-result
-  [:vector schema:team])
-
-(sv/defmethod ::get-teams
-  "List teams for which current user is owner.
-     @api GET /get-teams
-     @returns
-       200 OK: Returns the list of teams for the user."
-  {::doc/added "2.12"
-   ::sm/result schema:get-teams-result}
-  [cfg {:keys [::rpc/profile-id]}]
-  (when (contains? cf/flags :nitrate)
-    (let [current-user-id (-> (profile/get-profile cfg profile-id) :id)]
-      (->> (db/exec! cfg [sql:get-teams current-user-id])
-           (map #(select-keys % [:id :name]))))))
-
-;; ---- API: notify-team-change
-
-(def ^:private schema:notify-team-change
-  [:map
-   [:id ::sm/uuid]
-   [:organization-id ::sm/text]])
-
-
-(sv/defmethod ::notify-team-change
-  "Notify to Penpot a team change from nitrate
-     @api POST /notify-team-change
-     @returns
-       200 OK"
-  {::doc/added "2.12"
-   ::sm/params schema:notify-team-change
-   ::rpc/auth false}
-  [cfg {:keys [id organization-id organization-name]}]
-  (when (contains? cf/flags :nitrate)
-    (let [msgbus (::mbus/msgbus cfg)]
-      (mbus/pub! msgbus
-                 ;;TODO There is a bug on dashboard with teams notifications.
-                 ;;For now we send it to uuid/zero instead of team-id
-                 :topic uuid/zero
-                 :message {:type :team-org-change
-                           :team-id id
-                           :organization-id organization-id
-                           :organization-name organization-name}))))
-
-
-
-
-
-
-

common/src/app/common/flags.cljc

@@ -145,10 +145,7 @@
 
     ;; A temporal flag, enables backend code use more extensivelly
     ;; redis for caching data
-    :redis-cache
-
-    ;; Activates the nitrate module
-    :nitrate})
+    :redis-cache})
 
 (def all-flags
   (set/union email login varia))

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

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

docker/devenv/files/nginx.conf

@@ -141,14 +141,8 @@ http {
             proxy_pass http://127.0.0.1:5000;
         }
 
-        location /control-center {
-           proxy_pass http://127.0.0.1:3000;
-           proxy_http_version 1.1;
-
-           proxy_set_header Host $host;
-           proxy_set_header X-Real-IP $remote_addr;
-           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-           proxy_set_header X-Forwarded-Proto $scheme;
+        location /nitrate/ {
+            proxy_pass http://127.0.0.1:3000/;
         }
 
         location /wasm-playground {

docker/images/docker-compose.yaml

@@ -152,9 +152,9 @@ services:
 
       # AWS_ACCESS_KEY_ID: <KEY_ID>
       # AWS_SECRET_ACCESS_KEY: <ACCESS_KEY>
-      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
-      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_OBJECTS_STORAGE_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_ASSETS_STORAGE_BACKEND: assets-s3
+      # PENPOT_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
+      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
 
       ## Telemetry. When enabled, a periodical process will send anonymous data about this
       ## instance. Telemetry data will enable us to learn how the application is used,

docker/images/files/nginx-entrypoint.sh

@@ -29,9 +29,8 @@ update_flags /var/www/app/js/config.js
 
 export PENPOT_BACKEND_URI=${PENPOT_BACKEND_URI:-http://penpot-backend:6060}
 export PENPOT_EXPORTER_URI=${PENPOT_EXPORTER_URI:-http://penpot-exporter:6061}
-export PENPOT_NITRATE_URI=${PENPOT_NITRATE_URI:-http://penpot-nitrate:3000}
 export PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE=${PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE:-367001600} # Default to 350MiB
-envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_NITRATE_URI,\$PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
+envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
          < /tmp/nginx.conf.template > /etc/nginx/nginx.conf
 
 PENPOT_DEFAULT_INTERNAL_RESOLVER="$(awk 'BEGIN{ORS=" "} $1=="nameserver" { sub(/%.*$/,"",$2); print ($2 ~ ":")? "["$2"]": $2}' /etc/resolv.conf)"

docker/images/files/nginx.conf.template

@@ -139,14 +139,6 @@ http {
             proxy_pass $PENPOT_BACKEND_URI/ws/notifications;
         }
 
-        location /control-center {
-            proxy_http_version 1.1;
-            proxy_set_header Host $http_host;
-            proxy_set_header X-Real-IP $http_cf_connecting_ip;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_pass $PENPOT_NITRATE_URI$request_uri;
-        }
-
         include /etc/nginx/overrides/server.d/*.conf;
 
         location / {

docs/technical-guide/configuration.md

@@ -114,7 +114,14 @@ configuration.
 The callback has the following format:
 
 ```html
-https://<your_domain>/api/auth/oidc/callback
+https://<your_domain>/api/auth/oauth/<oauth_provider>/callback
+```
+
+You will need to change <your_domain> and <oauth_provider> according to your setup.
+This is how it looks with Gitlab provider:
+
+```html
+https://<your_domain>/api/auth/oauth/gitlab/callback
 ```
 
 #### Google

frontend/package.json

@@ -48,7 +48,7 @@
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
     "watch": "exit 0",
-    "watch:app": "yarn run clear:shadow-cache && yarn run build:wasm && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
     "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {

frontend/playwright/data/workspace/get-file-layout-stroke-token-json

@@ -0,0 +1,352 @@
+{
+    "~: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__"
+                    ]
+                }
+            }
+        }
+    }
+}

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

@@ -149,12 +149,14 @@ test.describe("Tokens: Apply token", () => {
     await detachButton.click();
 
     // Open dropdown from input
-    const dropdownBtn = layerMenuSection.getByLabel('Open token list');
+    const dropdownBtn = layerMenuSection.getByLabel("Open token list");
     await expect(dropdownBtn).toBeVisible();
     await dropdownBtn.click();
 
     // Change token from dropdown
-    const opacityLowOption = layerMenuSection.getByRole('option', { name: 'opacity.low' });
+    const opacityLowOption = layerMenuSection.getByRole("option", {
+      name: "opacity.low",
+    });
     await expect(opacityLowOption).toBeVisible();
     await opacityLowOption.click();
 
@@ -482,4 +484,279 @@ test.describe("Tokens: Apply token", () => {
       await expect(shadowSection).toHaveCount(2);
     });
   });
+
+  test("User applies dimension token to a shape on width and height", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar.getByRole("button", { name: "dimension.sm" }).click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toHaveCount(2);
+    await dimensionSMTokenPill.nth(1).click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).toHaveCount(1);
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(1).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape on x position", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.sm" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("AxisX").click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toBeVisible();
+    await dimensionSMTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape on y position", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.sm" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Y").click();
+
+    // Check if measures sections is visible on right sidebar
+    const measuresSection = page.getByRole("region", {
+      name: "shape-measures-section",
+    });
+    await expect(measuresSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionSMTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.sm",
+    });
+    await expect(dimensionSMTokenPill).toBeVisible();
+    await dimensionSMTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionSMTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = measuresSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = measuresSection.getByRole("button", {
+      name: "Detach token",
+    });
+    await detachButton.nth(0).click();
+    await expect(dimensionXLTokenPill).not.toBeVisible();
+  });
+
+  test("User applies dimension token to a shape border-radius", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    // Unfolds dimensions on token panel
+    await page.getByRole("tab", { name: "Layers" }).click();
+
+    await workspacePage.layers.getByTestId("layer-row").nth(2).click();
+
+    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+    await tokensTabButton.click();
+
+    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.xs");
+
+    // Apply token to width and height token from token panel
+    await tokensSidebar
+      .getByRole("button", { name: "dimension.xs" })
+      .click({ button: "right" });
+    await tokenContextMenuForToken.getByText("Border radius").hover();
+    await tokenContextMenuForToken.getByText("RadiusAll").click();
+
+    // Check if border radius sections is visible on right sidebar
+    const borderRadiusSection = page.getByRole("region", {
+      name: "border-radius-section",
+    });
+    await expect(borderRadiusSection).toBeVisible();
+
+    // Check if token pill is visible on design tab on right sidebar
+    const dimensionXSTokenPill = borderRadiusSection.getByRole("button", {
+      name: "dimension.xs",
+    });
+    await expect(dimensionXSTokenPill).toBeVisible();
+    await dimensionXSTokenPill.click();
+
+    // Change token from dropdown
+    const dimensionTokenOptionXl =
+      borderRadiusSection.getByLabel("dimension.xl");
+    await expect(dimensionTokenOptionXl).toBeVisible();
+    await dimensionTokenOptionXl.click();
+
+    await expect(dimensionXSTokenPill).not.toBeVisible();
+    const dimensionXLTokenPill = borderRadiusSection.getByRole("button", {
+      name: "dimension.xl",
+    });
+    await expect(dimensionXLTokenPill).toBeVisible();
+
+    // Detach token from design tab on right sidebar
+    const detachButton = borderRadiusSection.getByRole("button", {
+      name: "Detach 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();
+  });
 });

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

@@ -216,32 +216,4 @@ test.describe("Tokens: Sets Tab", () => {
     await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "false");
     await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "true");
   });
-
-  test("Display active set and verify if is enabled", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokensSidebar, tokenSetItems } =
-      await setupTokensFile(page);
-
-    // Create set
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-    await changeSetInput(tokenThemesSetsSidebar, "Inactive set");
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "Inactive set" })
-      .click();
-    let activeSetTitle = await tokensSidebar.getByTestId(
-      "active-token-set-title",
-    );
-    await expect(activeSetTitle).toHaveText("TOKENS - Inactive set");
-    const inactiveSetInfo = await tokensSidebar.getByTitle(
-      "This set is not active.",
-    );
-    await expect(inactiveSetInfo).toBeVisible();
-
-    // Switch active set
-
-    await tokenThemesSetsSidebar.getByRole("button", { name: "theme" }).click();
-    await expect(activeSetTitle).toHaveText("TOKENS - theme");
-    await expect(inactiveSetInfo).not.toBeVisible();
-  });
 });

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -17,6 +17,7 @@
 
   --app-background: var(--color-background-primary);
   --loader-background: var(--color-background-primary);
+  --panel-title-background-color: var(--color-background-secondary);
 
   // BUTTONS
   --button-foreground-hover: var(--color-accent-primary);

frontend/resources/templates/index.mustache

@@ -17,18 +17,17 @@
     <meta name="twitter:site" content="@penpotapp">
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
-    <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
+    <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
-    <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
+    <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}
 
-    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
+    <link rel="icon" href="images/favicon.png" />
 
     <script type="importmap">{{& manifest.importmap }}</script>
 
     <script type="module">
       globalThis.penpotVersion = "{{& version}}";
-      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/rasterizer.mustache

@@ -3,11 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <title>Penpot - Rasterizer</title>
-    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
+    <link rel="icon" href="images/favicon.png" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
-      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/render.mustache

@@ -4,12 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Penpot - Render</title>
-
-    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
+    <link rel="icon" href="images/favicon.png" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
-      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
     </script>
 

frontend/scripts/_helpers.js

@@ -27,11 +27,9 @@ export function startWorker() {
   });
 }
 
-export const IS_DEBUG = process.env.NODE_ENV !== "production";
-export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
-export const BUILD_TS = process.env.BUILD_TS || Date.now();
-export const VERSION = process.env.VERSION || "develop";
-export const VERSION_TAG = process.env.VERSION_TAG || VERSION;
+export const isDebug = process.env.NODE_ENV !== "production";
+export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
+export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
 
 async function findFiles(basePath, predicate, options = {}) {
   predicate =
@@ -174,7 +172,6 @@ export async function watch(baseDir, predicate, callback) {
   const watcher = new Watcher(baseDir, {
     persistent: true,
     recursive: true,
-    debounce: 500
   });
 
   watcher.on("change", (path) => {
@@ -182,19 +179,8 @@ export async function watch(baseDir, predicate, callback) {
       callback(path);
     }
   });
-
-
-  watcher.on("error", (cause) => {
-    console.log("WATCHER ERROR", cause);
-  });
 }
 
-export async function ensureDirectories() {
-  await fs.mkdir("./resources/public/js/worker/", { recursive: true });
-  await fs.mkdir("./resources/public/css/", { recursive: true });
-}
-
-
 async function readManifestFile(resource) {
   const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
@@ -207,25 +193,25 @@ async function generateManifest() {
     render_main: "./js/render.js",
     rasterizer_main: "./js/rasterizer.js",
 
-    config: "./js/config.js?version=" + VERSION_TAG,
-    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
-    libs: "./js/libs.js?version=" + VERSION_TAG,
-    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
-    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,
+    config: "./js/config.js?version=" + CURRENT_VERSION,
+    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
+    libs: "./js/libs.js?version=" + CURRENT_VERSION,
+    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
+    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
 
     importmap: JSON.stringify({
       "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
-        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
-        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
+        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
+        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
+        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
       }
     })
   };
@@ -236,12 +222,11 @@ async function generateManifest() {
 async function renderTemplate(path, context = {}, partials = {}) {
   const content = await fs.readFile(path, { encoding: "utf-8" });
 
+  const ts = Math.floor(new Date());
+
   context = Object.assign({}, context, {
-    isDebug: IS_DEBUG,
-    version: VERSION,
-    version_tag: VERSION_TAG,
-    build_date: BUILD_DATE,
-    build_ts: BUILD_TS,
+    ts: ts,
+    isDebug,
   });
 
   return mustache.render(content, context, partials);
@@ -272,9 +257,6 @@ const markedOptions = {
 marked.use(markedOptions);
 
 export async function compileTranslations() {
-  const outputDir = "resources/public/js/";
-  await fs.mkdir(outputDir, { recursive: true });
-
   const langs = [
     "ar",
     "ca",
@@ -356,6 +338,7 @@ export async function compileTranslations() {
     }
 
     const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
+    const outputDir = "resources/public/js/";
     const outputFile = ph.join(outputDir, "translation." + lang + ".js");
     await fs.writeFile(outputFile, esm);
   }
@@ -407,6 +390,7 @@ async function generateSvgSprites() {
 }
 
 async function generateTemplates() {
+  const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
   const manifest = await generateManifest();
@@ -431,7 +415,10 @@ async function generateTemplates() {
   };
 
   const context = {
-    manifest: manifest
+    manifest: manifest,
+    version: CURRENT_VERSION,
+    build_date: BUILD_DATE,
+    isDebug,
   };
 
   content = await renderTemplate(
@@ -500,7 +487,7 @@ export async function compileStyles() {
   await fs.mkdir("./resources/public/css", { recursive: true });
   await fs.writeFile("./resources/public/css/main.css", result);
 
-  if (IS_DEBUG) {
+  if (isDebug) {
     let debugCSS = await compileSassDebug(worker);
     await fs.writeFile("./resources/public/css/debug.css", debugCSS);
   }
@@ -513,43 +500,17 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
   const start = process.hrtime();
   log.info("init: compile svgsprite");
-  let error = false;
-
-  try {
-    await generateSvgSprites();
-  } catch (cause) {
-    error = cause;
-  }
-
+  await generateSvgSprites();
   const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile svgsprite", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile svgsprite", `(${ppt(end)})`);
-  }
+  log.info("done: compile svgsprite", `(${ppt(end)})`);
 }
 
 export async function compileTemplates() {
   const start = process.hrtime();
-  let error = false;
   log.info("init: compile templates");
-
-  try {
-    await generateTemplates();
-  } catch (cause) {
-    error = cause;
-  }
-
+  await generateTemplates();
   const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile templates", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile templates", `(${ppt(end)})`);
-  }
+  log.info("done: compile templates", `(${ppt(end)})`);
 }
 
 export async function compilePolyfills() {

frontend/scripts/_worker.js

@@ -28,12 +28,14 @@ async function compileFile(path) {
         ],
         sourceMap: false,
       });
+      // console.dir(result);
       resolve({
         inputPath: path,
         outputPath: dest,
         css: result.css,
       });
     } catch (cause) {
+      console.error(cause);
       reject(cause);
     }
   });

frontend/scripts/build

@@ -2,26 +2,26 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
-set -ex
-
 export INCLUDE_STORYBOOK=${BUILD_STORYBOOK:-no};
 export INCLUDE_WASM=${BUILD_WASM:-yes};
-export EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS;
-
+export CURRENT_VERSION=$1;
 export BUILD_DATE=$(date -R);
-export BUILD_TS=$(date +%s);
-
-export VERSION=${1:-develop};
-export VERSION_TAG="${VERSION}-${BUILD_TS}";
+export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
+export EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS;
+export TS=$(date +%s);
 
 # Some cljs reacts on this environment variable for define more
 # performant code on macros (example: rumext)
 export NODE_ENV=production;
 
+echo "Current path:"
+echo $PATH
+
+set -ex
 
 corepack enable;
 corepack install;
-yarn install;
+yarn install || exit 1;
 
 rm -rf target/dist;
 rm -rf resources/public;
@@ -37,7 +37,7 @@ yarn run build:app:main $EXTRA_PARAMS;
 yarn run build:app:libs;
 yarn run build:app:assets;
 
-sed -i "s/\.\/render.js/.\/render.js?version=$VERSION_TAG/g" resources/public/js/worker/main*.js
+sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
 
 rsync -avr resources/public/ target/dist/
 

frontend/scripts/build-app-assets.js

@@ -1,6 +1,5 @@
 import * as h from "./_helpers.js";
 
-await h.ensureDirectories();
 await h.compileStyles();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/scripts/build-storybook

@@ -2,16 +2,18 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
-set -ex
-
-export BUILD_TS=$(date +%s);
+export CURRENT_VERSION=$1;
 export BUILD_DATE=$(date -R);
-
-export VERSION=${1:-develop};
-export VERSION_TAG="${VERSION}-${BUILD_TS}";
+export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
+export TS=$(date +%s);
 
 export NODE_ENV=production;
 
+echo "Current path:"
+echo $PATH
+
+set -ex
+
 corepack enable;
 corepack install || exit 1;
 yarn install || exit 1;

frontend/scripts/watch.js

@@ -12,31 +12,19 @@ let sass = null;
 
 async function compileSassAll() {
   const start = process.hrtime();
-  let error = false;
-
   log.info("init: compile styles");
 
-  try {
-    sass = await h.compileSassAll(worker);
-    let output = await h.concatSass(sass);
-    await fs.writeFile("./resources/public/css/main.css", output);
+  sass = await h.compileSassAll(worker);
+  let output = await h.concatSass(sass);
+  await fs.writeFile("./resources/public/css/main.css", output);
 
-    if (isDebug) {
-      let debugCSS = await h.compileSassDebug(worker);
-      await fs.writeFile("./resources/public/css/debug.css", debugCSS);
-    }
-  } catch (cause) {
-    error = cause;
+  if (isDebug) {
+    let debugCSS = await h.compileSassDebug(worker);
+    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
   }
 
   const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile styles", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile styles", `(${ppt(end)})`);
-  }
+  log.info("done: compile styles", `(${ppt(end)})`);
 }
 
 async function compileSass(path) {
@@ -60,7 +48,7 @@ async function compileSass(path) {
   }
 }
 
-await h.ensureDirectories();
+await fs.mkdir("./resources/public/css/", { recursive: true });
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/src/app/config.cljs

@@ -95,7 +95,6 @@
 (def browser              (parse-browser))
 (def platform             (parse-platform))
 
-(def version-tag          (obj/get global "penpotVersionTag"))
 (def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI"))
 (def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI"))
 (def flex-help-uri        (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/"))
@@ -191,8 +190,9 @@
 
 (defn resolve-href
   [resource]
-  (let [href (-> public-uri
-                 (u/ensure-path-slash)
-                 (u/join resource)
-                 (get :path))]
-    (str href "?version=" version-tag)))
+  (let [version (get version :full)
+        href    (-> public-uri
+                    (u/ensure-path-slash)
+                    (u/join resource)
+                    (get :path))]
+    (str href "?version=" version)))

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

@@ -15,7 +15,6 @@
    [app.common.time :as ct]
    [app.common.types.project :refer [valid-project?]]
    [app.common.uuid :as uuid]
-   [app.config :as cf]
    [app.main.constants :as mconst]
    [app.main.data.common :as dcm]
    [app.main.data.event :as ev]
@@ -684,25 +683,12 @@
       (rx/of (dcm/change-team-role params)
              (modal/hide)))))
 
-(defn handle-change-team-org
-  [{:keys [team-id organization-id organization-name] :as message}]
-  (ptk/reify ::handle-change-team-org
-    ptk/UpdateEvent
-    (update [_ state]
-      (if (and (contains? cf/flags :nitrate)
-               (contains? (:teams state) team-id))
-        (-> state
-            (assoc-in [:teams team-id :organization-id] organization-id)
-            (assoc-in [:teams team-id :organization-name] organization-name))
-        state))))
-
 (defn- process-message
   [{:keys [type] :as msg}]
   (case type
     :notification           (dcm/handle-notification msg)
     :team-role-change       (handle-change-team-role msg)
     :team-membership-change (dcm/team-membership-change msg)
-    :team-org-change        (handle-change-team-org msg)
     nil))
 
 

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

@@ -27,10 +27,8 @@
    [app.main.data.workspace.colors :as wdc]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.shapes :as dwsh]
-   [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
-   [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.store :as st]
    [app.util.i18n :refer [tr]]
@@ -193,16 +191,6 @@
         (when (:fill attributes) (update-fill value shape-ids attributes page-id))
         (when (:stroke-color attributes) (update-stroke-color value shape-ids attributes page-id)))))))
 
-(defn update-shape-dimensions
-  ([value shape-ids attributes] (update-shape-dimensions value shape-ids attributes nil))
-  ([value shape-ids attributes page-id]
-   (ptk/reify ::update-shape-dimensions
-     ptk/WatchEvent
-     (watch [_ _ _]
-       (when (number? value)
-         (rx/of
-          (when (:width attributes) (dwtr/update-dimensions shape-ids :width value {:ignore-touched true :page-id page-id}))
-          (when (:height attributes) (dwtr/update-dimensions shape-ids :height value {:ignore-touched true :page-id page-id}))))))))
 
 (defn- attributes->layout-gap [attributes value]
   (let [layout-gap (-> (set/intersection attributes #{:column-gap :row-gap})
@@ -250,21 +238,6 @@
                                 {:ignore-touched true
                                  :page-id page-id}))))))))
 
-(defn update-layout-spacing
-  ([value shape-ids attributes] (update-layout-spacing value shape-ids attributes nil))
-  ([value shape-ids attributes page-id]
-   (ptk/reify ::update-layout-spacing
-     ptk/WatchEvent
-     (watch [_ state _]
-       (when (number? value)
-         (let [ids-with-layout (shape-ids-with-layout state (or page-id (:current-page-id state)) shape-ids)
-               layout-attributes (attributes->layout-gap attributes value)]
-           (rx/of
-            (dwsl/update-layout ids-with-layout
-                                layout-attributes
-                                {:ignore-touched true
-                                 :page-id page-id}))))))))
-
 (defn update-shape-position
   ([value shape-ids attributes] (update-shape-position value shape-ids attributes nil))
   ([value shape-ids attributes page-id]
@@ -278,6 +251,20 @@
                                                {:ignore-touched true
                                                 :page-id page-id})))))))))
 
+(defn update-layout-gap
+  [value shape-ids attributes page-id]
+  (ptk/reify ::update-layout-gao
+    ptk/WatchEvent
+    (watch [_ state _]
+      (when (number? value)
+        (let [ids-with-layout (shape-ids-with-layout state (or page-id (:current-page-id state)) shape-ids)
+              layout-attributes (attributes->layout-gap attributes value)]
+          (rx/of
+           (dwsl/update-layout ids-with-layout
+                               layout-attributes
+                               {:ignore-touched true
+                                :page-id page-id})))))))
+
 (defn update-layout-sizing-limits
   ([value shape-ids attributes] (update-layout-sizing-limits value shape-ids attributes nil))
   ([value shape-ids attributes page-id]
@@ -302,20 +289,11 @@
         update-fn (fn [node _]
                     (-> node
                         (d/txt-merge txt-attrs)
-                        (cty/remove-typography-from-node)))
-        ;; Check if any attribute affects text layout (requires resize)
-        affects-layout? (some #(contains? txt-attrs %) [:font-size :font-family :font-weight :letter-spacing :line-height])]
-    (ptk/reify ::generate-text-shape-update
-      ptk/WatchEvent
-      (watch [_ state _]
-        (cond-> (rx/of (dwsh/update-shapes shape-ids
-                                           #(txt/update-text-content % update-node? update-fn nil)
-                                           {:ignore-touched true
-                                            :page-id page-id}))
-          (and affects-layout?
-               (features/active-feature? state "render-wasm/v1"))
-          (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+                        (cty/remove-typography-from-node)))]
+    (dwsh/update-shapes shape-ids
+                        #(txt/update-text-content % update-node? update-fn nil)
+                        {:ignore-touched true
+                         :page-id page-id})))
 
 (defn update-line-height
   ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -364,17 +342,11 @@
                       (-> node
                           (d/txt-merge txt-attrs)
                           (cty/remove-typography-from-node))))]
-    (ptk/reify ::generate-font-family-text-shape-update
-      ptk/WatchEvent
-      (watch [_ state _]
-        (cond-> (rx/of (dwsh/update-shapes shape-ids
-                                           (fn [shape]
-                                             (txt/update-text-content shape update-node? #(update-fn %1 (ctst/font-weight-applied? shape)) nil))
-                                           {:ignore-touched true
-                                            :page-id page-id}))
-          (features/active-feature? state "render-wasm/v1")
-          (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+    (dwsh/update-shapes shape-ids
+                        (fn [shape]
+                          (txt/update-text-content shape update-node? #(update-fn %1 (ctst/font-weight-applied? shape)) nil))
+                        {:ignore-touched true
+                         :page-id page-id})))
 
 (defn- create-font-family-text-attrs
   [value]
@@ -442,16 +414,10 @@
                       (-> node
                           (d/txt-merge txt-attrs)
                           (cty/remove-typography-from-node))))]
-    (ptk/reify ::generate-font-weight-text-shape-update
-      ptk/WatchEvent
-      (watch [_ state _]
-        (cond-> (rx/of (dwsh/update-shapes shape-ids
-                                           #(txt/update-text-content % update-node? update-fn nil)
-                                           {:ignore-touched true
-                                            :page-id page-id}))
-          (features/active-feature? state "render-wasm/v1")
-          (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+    (dwsh/update-shapes shape-ids
+                        #(txt/update-text-content % update-node? update-fn nil)
+                        {:ignore-touched true
+                         :page-id page-id})))
 
 (defn update-font-weight
   ([value shape-ids attributes] (update-font-weight value shape-ids attributes nil))
@@ -493,20 +459,126 @@
        value
        [shape-ids attributes page-id])))))
 
-(defn update-typography-interactive
-  ([value shape-ids attributes] (update-typography value shape-ids attributes nil))
+(defn update-shape-dimensions
+  ([value shape-ids attributes] (update-shape-dimensions value shape-ids attributes nil))
   ([value shape-ids attributes page-id]
-   (when (map? value)
-     (rx/merge
-      (apply-functions-map
-       {:font-size update-font-size
-        :font-family update-font-family-interactive
-        :font-weight update-font-weight-interactive
-        :letter-spacing update-letter-spacing
-        :text-case update-text-case
-        :text-decoration update-text-decoration-interactive}
-       value
-       [shape-ids attributes page-id])))))
+   (ptk/reify ::update-shape-dimensions
+     ptk/WatchEvent
+     (watch [_ _ _]
+       (when (number? value)
+         (rx/of
+          (when (:width attributes) (dwtr/update-dimensions shape-ids :width value {:ignore-touched true :page-id page-id}))
+          (when (:height attributes) (dwtr/update-dimensions shape-ids :height value {:ignore-touched true :page-id page-id}))))))))
+
+(defn- attributes->actions
+  [{:keys [value shape-ids attributes page-id]}]
+  (cond-> []
+    (some attributes #{:width :height})
+    (conj #(update-shape-dimensions
+            value shape-ids
+            (set (filter attributes #{:width :height}))
+            page-id))
+
+    (some attributes #{:x :y})
+    (conj #(update-shape-position
+            value shape-ids
+            (set (filter attributes #{:x :y}))
+            page-id))
+
+    (some attributes #{:p1 :p2 :p3 :p4})
+    (conj #(update-layout-padding
+            value shape-ids
+            (set (filter attributes #{:p1 :p2 :p3 :p4}))
+            page-id))
+
+    (some attributes #{:m1 :m2 :m3 :m4})
+    (conj #(update-layout-item-margin
+            value shape-ids
+            (set (filter attributes #{:m1 :m2 :m3 :m4}))
+            page-id))
+
+    (some attributes #{:row-gap :column-gap})
+    (conj #(update-layout-gap
+            value shape-ids
+            (set (filter attributes #{:row-gap :column-gap}))
+            page-id))
+
+    (some attributes #{:r1 :r2 :r3 :r4})
+    (conj #(if (= attributes #{:r1 :r2 :r3 :r4})
+             (update-shape-radius-all value shape-ids attributes page-id)
+             (update-shape-radius-for-corners
+              value shape-ids
+              (set (filter attributes #{:r1 :r2 :r3 :r4}))
+              page-id)))
+
+    (some attributes #{:strole-width})
+    (conj #(update-stroke-width
+            value shape-ids
+            #{:strole-width}
+            page-id))
+    (some attributes #{:max-width :max-height})
+    (conj #(update-layout-sizing-limits
+            value shape-ids
+            (set (filter attributes #{:max-width :max-height}))
+            page-id))))
+
+(defn use-dimensions-token
+  ([value shape-ids attributes] (use-dimensions-token value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (ptk/reify ::use-dimensions-token
+     ptk/WatchEvent
+     (watch [_ state _]
+       (when (number? value)
+         (let [actions (attributes->actions
+                        {:value value
+                         :shape-ids shape-ids
+                         :attributes attributes
+                         :page-id page-id
+                         :state state})]
+           (apply rx/of (map #(%) actions))))))))
+
+(defn use-spacing-token
+  ([value shape-ids attributes] (use-spacing-token value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (ptk/reify ::use-spacing-token
+     ptk/WatchEvent
+     (watch [_ state _]
+       (let [spacing-attrs
+             #{:row-gap :column-gap
+               :m1 :m2 :m3 :m4
+               :p1 :p2 :p3 :p4}]
+         (when (and (number? value)
+                    (set? attributes)
+                    (set/subset? attributes spacing-attrs))
+
+           (let [actions (attributes->actions
+                          {:value value
+                           :shape-ids shape-ids
+                           :attributes attributes
+                           :page-id page-id
+                           :state state})]
+             (apply rx/of (map #(%) actions)))))))))
+
+(defn use-sizing-token
+  ([value shape-ids attributes] (use-sizing-token value shape-ids attributes nil))
+  ([value shape-ids attributes page-id]
+   (ptk/reify ::use-sizing-token
+     ptk/WatchEvent
+     (watch [_ state _]
+       (let [sizing-attrs
+             #{:width :height
+               :max-width :max-height}]
+         (when (and (number? value)
+                    (set? attributes)
+                    (set/subset? attributes sizing-attrs))
+
+           (let [actions (attributes->actions
+                          {:value value
+                           :shape-ids shape-ids
+                           :attributes attributes
+                           :page-id page-id
+                           :state state})]
+             (apply rx/of (map #(%) actions)))))))))
 
 ;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
 
@@ -646,54 +718,19 @@
                            :token token
                            :shape-ids shape-ids}))
           (rx/of
-           (case (:type token)
-             :spacing
+           (cond
+             (and (= (:type token) :spacing)
+                  (nil? attrs))
              (apply-spacing-token {:token token
                                    :attr attrs
                                    :shapes shapes})
+
+             :else
              (apply-token {:attributes (if (empty? attrs) attributes attrs)
                            :token token
                            :shape-ids shape-ids
                            :on-update-shape on-update-shape}))))))))
 
-(defn toggle-border-radius-token
-  [{:keys [token attrs shape-ids expand-with-children]}]
-  (ptk/reify ::on-toggle-border-radius-token
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)
-            shapes (into [] (keep (d/getf objects)) shape-ids)
-
-            shapes
-            (if expand-with-children
-              (into []
-                    (mapcat (fn [shape]
-                              (if (= (:type shape) :group)
-                                (keep objects (:shapes shape))
-                                [shape])))
-                    shapes)
-              shapes)
-
-            {:keys [attributes all-attributes]}
-            (get token-properties (:type token))
-
-            unapply-tokens?
-            (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
-
-            shape-ids (map :id shapes)]
-
-        (if unapply-tokens?
-          (rx/of
-           (unapply-token {:attributes (or attrs all-attributes attributes)
-                           :token token
-                           :shape-ids shape-ids}))
-          (rx/of
-           (apply-token {:attributes attrs
-                         :token token
-                         :shape-ids shape-ids
-                         :on-update-shape update-shape-radius-for-corners})))))))
-
-
 (defn apply-token-on-selected
   [color-operations token]
   (ptk/reify ::apply-token-on-selected
@@ -823,7 +860,7 @@
    {:title "Sizing"
     :attributes #{:width :height}
     :all-attributes ctt/sizing-keys
-    :on-update-shape update-shape-dimensions
+    :on-update-shape use-sizing-token
     :modal {:key :tokens/sizing
             :fields [{:label "Sizing"
                       :key :sizing}]}}
@@ -836,7 +873,7 @@
                      ctt/border-radius-keys
                      ctt/axis-keys
                      ctt/stroke-width-keys)
-    :on-update-shape update-shape-dimensions
+    :on-update-shape use-dimensions-token
     :modal {:key :tokens/dimensions
             :fields [{:label "Dimensions"
                       :key :dimensions}]}}
@@ -869,7 +906,7 @@
    {:title "Spacing"
     :attributes #{:column-gap :row-gap}
     :all-attributes ctt/spacing-keys
-    :on-update-shape update-layout-spacing
+    :on-update-shape use-spacing-token
     :modal {:key :tokens/spacing
             :fields [{:label "Spacing"
                       :key :spacing}]}}))

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

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

frontend/src/app/main/refs.cljs

@@ -483,9 +483,6 @@
 (def workspace-active-theme-paths
   (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))
 
-(def workspace-all-tokens-map
-  (l/derived (d/nilf ctob/get-all-tokens-map) tokens-lib))
-
 (defn token-sets-at-path-all-active
   [group-path]
   (l/derived

frontend/src/app/main/ui/dashboard/file_menu.cljs

@@ -193,11 +193,11 @@
         restore-fn
         (fn [_]
           (st/emit! (dd/restore-files-immediately
-                     (with-meta {:team-id current-team-id
+                     (with-meta {:team-id (:id current-team)
                                  :ids (into #{} d/xf:map-id files)}
                        {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
-                                               (dd/fetch-projects current-team-id)
-                                               (dd/fetch-deleted-files current-team-id))
+                                               (dd/fetch-projects (:id current-team))
+                                               (dd/fetch-deleted-files (:id current-team)))
                         :on-error #(st/emit! (ntf/error (tr "dashboard.errors.error-on-restore-file" (:name file))))}))))
 
         on-restore-immediately
@@ -214,7 +214,7 @@
         on-delete-immediately
         (fn []
           (let [accept-fn #(st/emit! (dd/delete-files-immediately
-                                      {:team-id current-team-id
+                                      {:team-id (:id current-team)
                                        :ids (into #{} d/xf:map-id files)}))]
             (st/emit!
              (modal/show {:type :confirm
@@ -244,7 +244,8 @@
            (for [project current-projects]
              {:name (get-project-name project)
               :id (get-project-id project)
-              :handler (on-move current-team-id (:id project))})
+              :handler (on-move (:id current-team)
+                                (:id project))})
            (when (seq other-teams)
              [{:name (tr "dashboard.move-to-other-team")
                :id "move-to-other-team"

frontend/src/app/main/ui/dashboard/nitrate_form.cljs

@@ -1,46 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.dashboard.nitrate-form
-  (:require-macros [app.main.style :as stl])
-  (:require
-
-   [app.main.data.modal :as modal]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.icons :as deprecated-icon]
-   [app.util.dom :as dom]
-   [rumext.v2 :as mf]))
-
-(mf/defc nitrate-form-modal
-  {::mf/register modal/components
-   ::mf/register-as :nitrate-form}
-  []
-  (let [on-click
-        (mf/use-fn
-         (fn []
-           (dom/open-new-window "/control-center/licenses/start")))]
-
-    [:div {:class (stl/css :modal-overlay)}
-     [:div {:class (stl/css :modal-container)}
-      [:div {:class (stl/css :nitrate-form)}
-
-       [:div {:class (stl/css :modal-header)}
-        [:h2 {:class (stl/css :modal-title)}
-         "BUY NITRATE"]
-
-        [:button {:class (stl/css :modal-close-btn)
-                  :on-click modal/hide!} deprecated-icon/close]]
-
-       [:div {:class (stl/css :modal-content)}
-        "Nitrate is so cool! You should buy it!"]
-
-       [:div {:class (stl/css :modal-footer)}
-        [:div {:class (stl/css :action-buttons)}
-         [:> button* {:variant "primary"
-                      :on-click on-click}
-          "BUY NOW!"]]]]]]))
-
-

frontend/src/app/main/ui/dashboard/nitrate_form.scss

@@ -1,52 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend .modal-overlay-base;
-}
-
-.modal-container {
-  @extend .modal-container-base;
-}
-
-.modal-header {
-  margin-bottom: deprecated.$s-24;
-}
-
-.modal-title {
-  @include deprecated.uppercaseTitleTipography;
-  color: var(--modal-title-foreground-color);
-}
-
-.modal-close-btn {
-  @extend .modal-close-btn-base;
-}
-
-.modal-content {
-  margin-bottom: deprecated.$s-24;
-}
-
-.nitrate-form {
-  min-width: deprecated.$s-400;
-}
-
-.action-buttons {
-  @extend .modal-action-btns;
-}
-
-.cancel-button {
-  @extend .modal-cancel-btn;
-}
-
-.accept-btn {
-  @extend .modal-accept-btn;
-
-  &.danger {
-    @extend .modal-danger-btn;
-  }
-}

frontend/src/app/main/ui/dashboard/sidebar.cljs

@@ -26,7 +26,6 @@
    [app.main.ui.components.link :refer [link]]
    [app.main.ui.dashboard.comments :refer [comments-icon* comments-section]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
-   [app.main.ui.dashboard.nitrate-form]
    [app.main.ui.dashboard.project-menu :refer [project-menu*]]
    [app.main.ui.dashboard.subscription :refer [dashboard-cta*
                                                get-subscription-type
@@ -281,8 +280,8 @@
 
 (mf/defc teams-selector-dropdown*
   {::mf/private true}
-  [{:keys [team profile teams show-default-team allow-create-teams allow-create-org] :rest props}]
-  (let [on-create-team-click
+  [{:keys [team profile teams] :rest props}]
+  (let [on-create-click
         (mf/use-fn #(st/emit! (modal/show :team-form {})))
 
         on-team-click
@@ -291,27 +290,18 @@
            (let [team-id (-> (dom/get-current-target event)
                              (dom/get-data "value")
                              (uuid/parse))]
-             (st/emit! (dcm/go-to-dashboard-recent :team-id team-id)))))
-
-        on-create-org-click
-        (mf/use-fn
-         (fn []
-           (if (:nitrate-licence profile)
-             ;; TODO update when org creation route is ready
-             (dom/open-new-window "/control-center/org/create")
-             (st/emit! (modal/show :nitrate-form {})))))]
+             (st/emit! (dcm/go-to-dashboard-recent :team-id team-id)))))]
 
     [:> dropdown-menu* props
 
-     (when show-default-team
-       [:> dropdown-menu-item* {:on-click    on-team-click
-                                :data-value  (:default-team-id profile)
-                                :class       (stl/css :team-dropdown-item)}
-        [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]
+     [:> dropdown-menu-item* {:on-click    on-team-click
+                              :data-value  (:default-team-id profile)
+                              :class       (stl/css :team-dropdown-item)}
+      [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]
 
-        [:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
-        (when (= (:default-team-id profile) (:id team))
-          tick-icon)])
+      [:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
+      (when (= (:default-team-id profile) (:id team))
+        tick-icon)]
 
      (for [team-item (remove :is-default (vals teams))]
        [:> dropdown-menu-item* {:on-click    on-team-click
@@ -332,19 +322,11 @@
         (when (= (:id team-item) (:id team))
           tick-icon)])
 
-     (when allow-create-teams
-       [:hr {:role "separator" :class (stl/css :team-separator)}]
-       [:> dropdown-menu-item* {:on-click    on-create-team-click
-                                :class       (stl/css :team-dropdown-item :action)}
-        [:span {:class (stl/css :icon-wrapper)} add-icon]
-        [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]])
-
-     (when allow-create-org
-       [:hr {:role "separator" :class (stl/css :team-separator)}]
-       [:> dropdown-menu-item* {:on-click    on-create-org-click
-                                :class       (stl/css :team-dropdown-item :action)}
-        [:span {:class (stl/css :icon-wrapper)} add-icon]
-        [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-org")]])]))
+     [:hr {:role "separator" :class (stl/css :team-separator)}]
+     [:> dropdown-menu-item* {:on-click    on-create-click
+                              :class       (stl/css :team-dropdown-item :action)}
+      [:span {:class (stl/css :icon-wrapper)} add-icon]
+      [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]]))
 
 (mf/defc team-options-dropdown*
   {::mf/private true}
@@ -494,80 +476,9 @@
                                 :data-testid "delete-team"}
         (tr "dashboard.delete-team")])]))
 
-
-(mf/defc sidebar-org-switch*
-  [{:keys [team profile]}]
-  (let [teams (->> (mf/deref refs/teams)
-                   vals
-                   (group-by :organization-id)
-                   (map (fn [[_group entries]] (first entries)))
-                   vec
-                   (d/index-by :id))
-
-        teams (update-vals teams
-                           (fn [t]
-                             (assoc t :name (str "ORG: " (:organization-name t)))))
-
-        team (assoc team :name (str "ORG: " (:organization-name team)))
-
-        show-teams-menu*
-        (mf/use-state false)
-
-        show-teams-menu?
-        (deref show-teams-menu*)
-
-        on-show-teams-click
-        (mf/use-fn
-         (fn [event]
-           (dom/stop-propagation event)
-           (swap! show-teams-menu* not)))
-
-        on-show-teams-keydown
-        (mf/use-fn
-         (fn [event]
-           (when (or (kbd/space? event)
-                     (kbd/enter? event))
-             (dom/prevent-default event)
-             (dom/stop-propagation event)
-             (some-> (dom/get-current-target event)
-                     (dom/click!)))))
-        close-teams-menu
-        (mf/use-fn #(reset! show-teams-menu* false))]
-
-    [:div {:class (stl/css :sidebar-team-switch)}
-     [:div {:class (stl/css :switch-content)}
-      [:button {:class (stl/css :current-team)
-                :on-click on-show-teams-click
-                :on-key-down on-show-teams-keydown}
-
-       [:div {:class (stl/css :team-name)}
-        [:img {:src (cf/resolve-team-photo-url team)
-               :class (stl/css :team-picture)
-               :alt (:name team)}]
-        [:span {:class (stl/css :team-text) :title (:name team)} (:name team)]]
-
-       arrow-icon]]
-
-     ;; Teams Dropdown
-
-     [:> teams-selector-dropdown* {:show show-teams-menu?
-                                   :on-close close-teams-menu
-                                   :id "organizations-list"
-                                   :class (stl/css :dropdown :teams-dropdown)
-                                   :team team
-                                   :profile profile
-                                   :teams teams
-                                   :show-default-team false
-                                   :allow-create-teams false
-                                   :allow-create-org true}]]))
-
 (mf/defc sidebar-team-switch*
   [{:keys [team profile]}]
-  (let [nitrate?     (contains? cf/flags :nitrate)
-        org-id (when nitrate? (:organization-id team))
-        teams (cond->> (mf/deref refs/teams)
-                nitrate?
-                (filter #(= (-> % val :organization-id) org-id)))
+  (let [teams (mf/deref refs/teams)
 
         subscription
         (get team :subscription)
@@ -675,10 +586,7 @@
                                    :class (stl/css :dropdown :teams-dropdown)
                                    :team team
                                    :profile profile
-                                   :teams teams
-                                   :show-default-team true
-                                   :allow-create-teams true
-                                   :allow-create-org false}]
+                                   :teams teams}]
 
      [:> team-options-dropdown* {:show show-team-options-menu?
                                  :on-close close-team-options-menu
@@ -795,8 +703,6 @@
     [:*
      [:div {:class (stl/css-case :sidebar-content true)
             :ref container}
-      (when (contains? cf/flags :nitrate)
-        [:> sidebar-org-switch* {:team team :profile profile}])
       [:> sidebar-team-switch* {:team team :profile profile}]
 
       [:> sidebar-search* {:search-term search-term

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

@@ -38,7 +38,6 @@
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.product.milestone :refer [milestone*]]
    [app.main.ui.ds.product.milestone-group :refer [milestone-group*]]
-   [app.main.ui.ds.product.panel-title :refer [panel-title*]]
    [app.main.ui.ds.storybook :as sb]
    [app.main.ui.ds.tooltip.tooltip :refer [tooltip*]]
    [app.main.ui.ds.utilities.date :refer [date*]]
@@ -82,7 +81,6 @@
     :Milestone milestone*
     :MilestoneGroup milestone-group*
     :Date date*
-    :PanelTitle panel-title*
 
     :set-default-translations
     (fn [data]

frontend/src/app/main/ui/ds/product/panel_title.cljs

@@ -1,34 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.ds.product.panel-title
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.util.i18n :refer [tr]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:panel-title
-  [:map
-   [:class {:optional true} :string]
-   [:text :string]
-   [:on-close {:optional true} fn?]])
-
-(mf/defc panel-title*
-  {::mf/schema schema:panel-title}
-  [{:keys [class text on-close] :rest props}]
-  (let [props
-        (mf/spread-props props {:class [class (stl/css :panel-title)]})]
-
-    [:> :div props
-     [:span {:class (stl/css :panel-title-text)} text]
-     (when on-close
-       [:> icon-button* {:variant "ghost"
-                         :aria-label (tr "labels.close")
-                         :on-click on-close
-                         :icon i/close}])]))

frontend/src/app/main/ui/ds/product/panel_title.mdx

@@ -1,26 +0,0 @@
-{ /* This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-  Copyright (c) KALEIDOS INC */ }
-  
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import * as PanelTitle from "./panel_title.stories";
-
-<Meta title="Product/PanelTitle" />
-
-# PanelTitle
-
-The `panel-title*` is used as a header for some sidebar sections.
-
-<Canvas of={PanelTitle.Default} />
-
-## Technical notes
-
-The only mandatory parameter is `text`. Usually you'll want to pass a function property `on-close` that will be called when the user clicks on the close button on the right.
-
-```clj
-[:> panel-title* {:class class
-                  :text text
-                  :on-close on-close}]
-```

frontend/src/app/main/ui/ds/product/panel_title.scss

@@ -1,25 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "ds/_sizes.scss" as *;
-@use "ds/_borders.scss" as *;
-@use "ds/typography.scss" as t;
-
-.panel-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  block-size: $sz-32;
-  border-radius: $br-8;
-  background-color: var(--color-background-secondary);
-}
-
-.panel-title-text {
-  @include t.use-typography("headline-small");
-  flex-grow: 1;
-  text-align: center;
-  color: var(--color-foreground-primary);
-}

frontend/src/app/main/ui/ds/product/panel_title.stories.jsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { PanelTitle } = Components;
-
-export default {
-  title: "Product/PanelTitle",
-  component: PanelTitle,
-  argTypes: {
-    text: {
-      control: { type: "text" },
-    },
-  },
-  args: {
-    text: "Lorem ipsum",
-    onClose: () => null,
-  },
-  render: ({ ...args }) => <PanelTitle {...args} />,
-};
-
-export const Default = {};

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

@@ -23,7 +23,6 @@
 
         touched?   (and (contains? (:data @form) input-name)
                         (get-in @form [:touched input-name]))
-
         error      (get-in @form [:errors input-name])
 
         value      (get-in @form [:data input-name] "")
@@ -53,8 +52,7 @@
   (let [form      (mf/use-ctx context)
         disabled? (or (and (some? form)
                            (or (not (:valid @form))
-                               (seq (:async-errors @form))
-                               (seq (:extra-errors @form))))
+                               (seq (:external-errors @form))))
                       (true? disabled))
         handle-key-down-save
         (mf/use-fn

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

@@ -16,9 +16,9 @@
    [app.main.ui.comments :as cmt]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.product.empty-state :refer [empty-state*]]
-   [app.main.ui.ds.product.panel-title :refer [panel-title*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -121,12 +121,15 @@
              (st/emit! (with-meta (dcmt/open-thread thread) {::ev/origin "viewer"}))
              (st/emit! (dwcm/navigate-to-comment thread)))))]
 
-    [:div {:class (stl/css-case :comments-section true
-                                :from-viewer from-viewer)}
-
-     [:> panel-title* {:class (stl/css :comments-title)
-                       :text (tr "labels.comments")
-                       :on-close close-section}]
+    [:div  {:class (stl/css-case :comments-section true
+                                 :from-viewer  from-viewer)}
+     [:div {:class (stl/css-case :comments-section-title true
+                                 :viewer-title from-viewer)}
+      [:span (tr "labels.comments")]
+      [:> icon-button* {:variant "ghost"
+                        :aria-label (tr "labels.close")
+                        :on-click close-section
+                        :icon i/close}]]
 
      [:button {:class (stl/css :mode-dropdown-wrapper)
                :on-click toggle-mode-selector}

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

@@ -18,8 +18,25 @@
   padding: 0 deprecated.$s-8;
 }
 
-.comments-title {
-  margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
+.comments-section-title {
+  @include deprecated.flexCenter;
+  @include deprecated.uppercaseTitleTipography;
+  position: relative;
+  height: deprecated.$s-32;
+  min-height: deprecated.$s-32;
+  margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
+  background-color: var(--panel-title-background-color);
+  span {
+    @include deprecated.flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+}
+
+.viewer-title {
+  margin: 0;
+  margin-block-start: deprecated.$s-8;
 }
 
 .mode-dropdown-wrapper {

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

@@ -11,11 +11,12 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace :as dw]
    [app.main.store :as st]
-   [app.main.ui.ds.product.panel-title :refer [panel-title*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
-   [app.util.i18n :refer [tr]]
+   [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc debug-panel*
@@ -34,9 +35,12 @@
            (st/emit! (dw/remove-layout-flag :debug-panel))))]
 
     [:div {:class (dm/str class " " (stl/css :debug-panel))}
-     [:> panel-title* {:class (stl/css :debug-panel-title)
-                       :text (tr "workspace.debug.title")
-                       :on-close handle-close}]
+     [:div {:class (stl/css :panel-title)}
+      [:span "Debugging tools"]
+      [:> icon-button* {:variant "ghost"
+                        :aria-label (tr "labels.close")
+                        :on-click handle-close
+                        :icon i/close}]]
 
      [:div {:class (stl/css :debug-panel-inner)}
       (for [option (sort-by d/name dbg/options)]

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

@@ -12,12 +12,21 @@
   background-color: var(--panel-background-color);
 }
 
-.debug-panel-title {
-  margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
-}
+.panel-title {
+  @include deprecated.flexCenter;
+  @include deprecated.uppercaseTitleTipography;
+  position: relative;
+  height: deprecated.$s-32;
+  min-height: deprecated.$s-32;
+  margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
+  background-color: var(--panel-title-background-color);
 
-.debug-panel-inner {
-  padding: deprecated.$s-16 deprecated.$s-8;
+  span {
+    @include deprecated.flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
 }
 
 .checkbox-wrapper {
@@ -30,3 +39,7 @@
   @extend .checkbox-icon;
   cursor: pointer;
 }
+
+.debug-panel-inner {
+  padding: deprecated.$s-16 deprecated.$s-8;
+}

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

@@ -13,7 +13,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.ds.product.panel-title :refer [panel-title*]]
+   [app.main.ui.icons :as deprecated-icon]
    [debug :as dbg]
    [rumext.v2 :as mf]))
 
@@ -125,9 +125,11 @@
                       (map (d/getf objects)))]
 
     [:div {:class (stl/css :shape-info)}
-     [:> panel-title* {:class (stl/css :shape-info-title)
-                       :text "Debug"
-                       :on-close #(dbg/disable! :shape-panel)}]
+     [:div {:class (stl/css :shape-info-title)}
+      [:span "Debug"]
+      [:div {:class (stl/css :close-button)
+             :on-click #(dbg/disable! :shape-panel)}
+       deprecated-icon/close]]
 
      (if (empty? selected)
        [:div {:class (stl/css :attrs-container)} "No shapes selected"]

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

@@ -16,7 +16,34 @@
 }
 
 .shape-info-title {
-  margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
+  @include deprecated.flexCenter;
+  @include deprecated.uppercaseTitleTipography;
+  position: relative;
+  height: deprecated.$s-32;
+  min-height: deprecated.$s-32;
+  margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
+  background-color: var(--panel-title-background-color);
+
+  span {
+    @include deprecated.flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+}
+
+.close-button {
+  @extend .button-tertiary;
+  position: absolute;
+  right: deprecated.$s-2;
+  top: deprecated.$s-2;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
+  border-radius: deprecated.$br-6;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
 }
 
 .attrs-container {

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

@@ -13,6 +13,23 @@
   background-color: var(--panel-background-color);
 }
 
+.history-toolbox-title {
+  @include deprecated.flexCenter;
+  @include deprecated.uppercaseTitleTipography;
+  position: relative;
+  height: deprecated.$s-32;
+  min-height: deprecated.$s-32;
+  margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
+  border-radius: deprecated.$br-8;
+  background-color: var(--panel-title-background-color);
+
+  span {
+    @include deprecated.flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+}
+
 .history-entry-empty {
   display: flex;
   flex-direction: column;

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

@@ -192,11 +192,10 @@
              (st/emit!
               (change-radius (fn [shape]
                                (ctsr/set-radius-to-all-corners shape value))))
-             (doseq [attr [:r1 :r2 :r3 :r4]]
-               (st/emit!
-                (dwta/toggle-token {:token     (first value)
-                                    :attrs     #{attr}
-                                    :shape-ids ids}))))))
+             (st/emit!
+              (dwta/toggle-token {:token     (first value)
+                                  :attrs     #{:r1 :r2 :r3 :r4}
+                                  :shape-ids ids})))))
 
 
         on-single-radius-change
@@ -205,9 +204,10 @@
          (fn [value attr]
            (if (or (string? value) (number? value))
              (st/emit! (change-one-radius #(ctsr/set-radius-to-single-corner % attr value) attr))
-             (st/emit! (dwta/toggle-border-radius-token {:token (first value)
-                                                         :attrs #{attr}
-                                                         :shape-ids ids})))))
+             (st/emit! (st/emit!
+                        (dwta/toggle-token {:token     (first value)
+                                            :attrs     #{attr}
+                                            :shape-ids ids}))))))
 
         on-radius-r1-change #(on-single-radius-change % :r1)
         on-radius-r2-change #(on-single-radius-change % :r2)

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

@@ -369,12 +369,12 @@
            (if (or (string? value) (int? value))
              (on-change :simple attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))
-                     updated-attr (if (= :p1 attr) #{:p1 :p3} #{:p2 :p4})]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs updated-attr
-                                               :shape-ids ids}))
-                 (on-change :simple attr resolved-value event))))))
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= :p1 attr)
+                                                 #{:p1 :p3}
+                                                 #{:p2 :p4})
+                                    :shape-ids ids}))))))
 
         on-detach-token
         (mf/use-fn
@@ -483,11 +483,9 @@
            (if (or (string? value) (int? value))
              (on-change :multiple attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (on-change :multiple attr resolved-value event))))))
+               (st/emit! (dwta/toggle-token {:token (first value)
+                                             :attrs #{attr}
+                                             :shape-ids ids}))))))
 
         on-focus
         (mf/use-fn
@@ -716,11 +714,12 @@
            (if (or (string? value) (int? value))
              (on-change (= "nowrap" wrap-type) attr value event)
              (do
-               (let [resolved-value (:resolved-value (first value))]
-                 (st/emit! (dwta/toggle-token {:token (first value)
-                                               :attrs #{attr}
-                                               :shape-ids ids}))
-                 (on-change (= "nowrap" wrap-type) attr resolved-value event))))))
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= "nowrap" wrap-type)
+                                                 #{:row-gap :colum-gap}
+                                                 #{attr})
+                                    :shape-ids ids}))))))
 
         on-detach-token
         (mf/use-fn

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

@@ -9,13 +9,17 @@
   (:require
    [app.common.data :as d]
    [app.common.types.shape.layout :as ctl]
+   [app.common.types.token :as tk]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.shape-layout :as dwsl]
+   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.title-bar :refer [title-bar*]]
+   [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.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
@@ -24,6 +28,43 @@
    [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)
+        input-type (cond
+                     (some #{:p2 :p4} [name])
+                     :horizontal-padding
+
+                     (some #{:p1 :p3} [name])
+                     :vertical-padding
+                     :else
+                     name)
+
+        tokens (mf/with-memo [tokens input-type]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input input-type))
+                       (not-empty))))
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach name)
+         #(on-detach % name))
+
+        props  (mf/spread-props props
+                                {:placeholder (if (or (= :multiple (:applied-tokens values))
+                                                      (= :multiple (get values name))
+                                                      (nil? (get values name)))
+                                                (tr "settings.multiple")
+                                                "--")
+                                 :class (stl/css :numeric-input-layout)
+                                 :applied-token (get applied-tokens name)
+                                 :tokens tokens
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :value (get values name)})]
+    [:> numeric-input* props]))
+
 (def layout-item-attrs
   [:layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
    :layout-item-margin-type ;; :simple :multiple
@@ -46,8 +87,12 @@
   (select-margins (= prop :m1) (= prop :m2) (= prop :m3) (= prop :m4)))
 
 (mf/defc margin-simple*
-  [{:keys [value on-change on-blur]}]
-  (let [m1 (:m1 value)
+  [{:keys [value on-change on-blur applied-tokens ids]}]
+  (let [token-numeric-inputs
+        (features/use-feature "tokens/numeric-input")
+        _ (prn "applied-tokens" applied-tokens)
+
+        m1 (:m1 value)
         m2 (:m2 value)
         m3 (:m3 value)
         m4 (:m4 value)
@@ -70,6 +115,28 @@
 
              (dom/select-target event))))
 
+        on-detach-token
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
+                                          :attributes #{attr}
+                                          :shape-ids ids}))))
+        
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change ids)
+         (fn [value attr event]
+           (if (or (string? value) (int? value))
+             (on-change :simple attr value)
+             (do
+               (st/emit!
+                (dwta/toggle-token {:token     (first value)
+                                    :attrs     (if (= :p1 attr)
+                                                 #{:p1 :p3}
+                                                 #{:p2 :p4})
+                                    :shape-ids ids}))))))
+
         on-change'
         (mf/use-fn
          (mf/deps on-change)
@@ -77,21 +144,39 @@
            (let [attr (-> (dom/get-current-target event)
                           (dom/get-data "name")
                           (keyword))]
-             (on-change :simple attr value))))]
+             (on-change :simple attr value))))
+        
+        on-change-m1 ()
+        on-change-m2]
 
     [:div {:class (stl/css :margin-simple)}
-     [:div {:class (stl/css :vertical-margin)
-            :title "Vertical margin"}
-      [:span {:class (stl/css :icon)}
-       deprecated-icon/margin-top-bottom]
-      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                           :placeholder m1-placeholder
-                                           :data-name "m1"
-                                           :on-focus on-focus
-                                           :on-change on-change'
-                                           :on-blur on-blur
-                                           :nillable true
-                                           :value m1}]]
+     (if token-numeric-inputs
+
+       [:> numeric-input-wrapper*
+        {:on-change on-change'
+         :on-detach on-detach-token
+         :on-blur on-blur
+         :on-focus on-focus
+         :icon i/padding-top-bottom
+         :min 0
+         :name :m1
+         :property "Vertical margin "
+         :nillable true
+         :applied-tokens {:m1 applied-to-p1}
+         :values {:m1 p1}}]
+
+       [:div {:class (stl/css :vertical-margin)
+              :title "Vertical margin"}
+        [:span {:class (stl/css :icon)}
+         deprecated-icon/margin-top-bottom]
+        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                             :placeholder m1-placeholder
+                                             :data-name "m1"
+                                             :on-focus on-focus
+                                             :on-change on-change'
+                                             :on-blur on-blur
+                                             :nillable true
+                                             :value m1}]])
 
      [:div {:class (stl/css :horizontal-margin)
             :title "Horizontal margin"}
@@ -107,8 +192,11 @@
                                            :value m2}]]]))
 
 (mf/defc margin-multiple*
-  [{:keys [value on-change on-blur]}]
-  (let [m1     (:m1 value)
+  [{:keys [value on-change on-blur applied-tokens]}]
+  (let [token-numeric-inputs
+        (features/use-feature "tokens/numeric-input")
+        _ (prn "applied-tokens" applied-tokens)
+        m1     (:m1 value)
         m2     (:m2 value)
         m3     (:m3 value)
         m4     (:m4 value)
@@ -183,10 +271,9 @@
                                            :nillable true
                                            :value m4}]]]))
 
-
 (mf/defc margin-section*
   {::mf/private true
-   ::mf/expect-props #{:value :type :on-type-change :on-change}}
+   ::mf/expect-props #{:value :type :on-type-change :on-change :applied-tokens :ids}}
   [{:keys [type on-type-change] :as props}]
   (let [type       (d/nilv type :simple)
         on-blur    (mf/use-fn #(select-margins false false false false))
@@ -293,7 +380,7 @@
                                  :value "end"}]}])
 
 (mf/defc layout-item-menu
-  {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent? :is-grid-layout? :is-flex-layout?}
+  {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent? :is-grid-layout? :is-flex-layout? :applied-tokens}
    ::mf/props :obj}
   [{:keys [ids values
            ^boolean is-layout-child?
@@ -301,7 +388,8 @@
            ^boolean is-grid-parent?
            ^boolean is-flex-parent?
            ^boolean is-flex-layout?
-           ^boolean is-grid-layout?]}]
+           ^boolean is-grid-layout?
+           applied-tokens]}]
 
   (let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents  (mf/deref selection-parents*)
@@ -483,6 +571,8 @@
           [:> margin-section* {:value (:layout-item-margin values)
                                :type (:layout-item-margin-type values)
                                :on-type-change on-margin-type-change
+                               :applied-tokens applied-tokens
+                               :ids ids
                                :on-change on-margin-change}])
 
         (when (or (= h-sizing :fill)

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

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

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

@@ -176,7 +176,8 @@
                                           :token token
                                           :shape-ids ids}))))]
 
-    [:div {:class (stl/css :stroke-section)}
+    [:section {:class (stl/css :stroke-section)
+               :aria-label "stroke-section"}
      [:div {:class (stl/css :stroke-title)}
       [:> title-bar* {:collapsable  has-strokes?
                       :collapsed    (not open?)

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

@@ -9,18 +9,50 @@
   (: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 :refer [numeric-input*]]
+   [app.main.ui.components.numeric-input :as deprecated-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
@@ -45,7 +77,10 @@
            select-on-focus
            ids]}]
 
-  (let [on-drop
+  (let [token-numeric-inputs
+        (features/use-feature "tokens/numeric-input")
+
+        on-drop
         (mf/use-fn
          (mf/deps on-reorder index)
          (fn [relative-pos data]
@@ -88,7 +123,13 @@
         on-width-change
         (mf/use-fn
          (mf/deps index on-stroke-width-change)
-         #(on-stroke-width-change index %))
+         (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}))))))
 
         stroke-alignment (or (:stroke-alignment stroke) :center)
 
@@ -149,6 +190,12 @@
          (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
@@ -169,7 +216,8 @@
     [:div {:class (stl/css-case
                    :stroke-data true
                    :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))}
+                   :dnd-over-bot (= (:over dprops) :bot))
+           :aria-label (str "stroke-row-" index)}
 
      (when (some? on-reorder)
        [:> reorder-handler* {:ref dref}])
@@ -195,17 +243,30 @@
 
      ;; Stroke Width, Alignment & Style
      [:div {:class (stl/css :stroke-options)}
-      [: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}]]
+      (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-alignment-select)
              :data-testid "stroke.alignment"}

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss

@@ -45,6 +45,11 @@
   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;
 }

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

@@ -114,6 +114,7 @@
          :is-layout-child? true
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
+         :applied-tokens applied-tokens
          :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -113,6 +113,7 @@
                              :is-layout-container? false
                              :is-flex-parent? is-flex-parent?
                              :is-grid-parent? is-grid-parent?
+                             :applied-tokens applied-tokens
                              :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -135,6 +135,7 @@
          :is-flex-layout? is-flex-layout?
          :is-grid-layout? is-grid-layout?
          :is-layout-child? is-layout-child?
+         :applied-tokens applied-tokens
          :is-layout-container? is-layout-container?
          :shape shape}])
 

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

@@ -139,6 +139,7 @@
          :is-layout-container? false
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
+         :applied-tokens applied-tokens
          :values layout-item-values}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -409,7 +409,7 @@
         [layout-container-ids layout-container-values layout-container-tokens]
         (get-attrs shapes objects :layout-container)
 
-        [layout-item-ids layout-item-values {}]
+        [layout-item-ids layout-item-values layout-item-tokens]
         (get-attrs shapes objects :layout-item)
 
         components
@@ -471,6 +471,7 @@
          :is-layout-container? all-flex-layout-container?
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
+         :applied-tokens layout-item-tokens
          :values layout-item-values}])
 
      (when-not (or (empty? constraint-ids) ^boolean is-layout-child?)

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

@@ -113,6 +113,7 @@
                              :is-layout-container? false
                              :is-flex-parent? is-flex-parent?
                              :is-grid-parent? is-grid-parent?
+                             :applied-tokens applied-tokens
                              :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -112,6 +112,7 @@
          :values layout-item-values
          :is-layout-child? true
          :is-flex-parent? is-flex-parent?
+         :applied-tokens applied-tokens
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 

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

@@ -180,6 +180,7 @@
            :is-layout-child? true
            :is-flex-parent? is-flex-parent?
            :is-grid-parent? is-grid-parent?
+           :applied-tokens applied-tokens
            :shape shape}])
 
        (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -154,6 +154,7 @@
          :is-layout-child? true
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
+         :applied-tokens applied-tokens
          :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -18,8 +18,8 @@
    [app.main.data.workspace.shortcuts]
    [app.main.store :as st]
    [app.main.ui.components.search-bar :refer [search-bar*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
-   [app.main.ui.ds.product.panel-title :refer [panel-title*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.strings :refer [matches-search]]
@@ -487,9 +487,13 @@
       (dom/focus! (dom/get-element "shortcut-search")))
 
     [:div {:class (dm/str class " " (stl/css :shortcuts))}
-     [:> panel-title* {:class (stl/css :shortcuts-title)
-                       :text (tr "shortcuts.title")
-                       :on-close close-fn}]
+     [:div {:class (stl/css :shortcuts-header)}
+      [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
+      [:> icon-button* {:variant "ghost"
+                        :icon i/close
+                        :class (stl/css :shortcuts-close-button)
+                        :on-click close-fn
+                        :aria-label (tr "labels.close")}]]
 
      [:div {:class (stl/css :search-field)}
       [:> search-bar* {:on-change on-search-term-change-2

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

@@ -18,8 +18,27 @@
   margin: deprecated.$s-16 deprecated.$s-12 deprecated.$s-4 deprecated.$s-12;
 }
 
-.shortcuts-title {
-  margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
+.shortcuts-header {
+  @include deprecated.flexCenter;
+  @include deprecated.uppercaseTitleTipography;
+  position: relative;
+  height: deprecated.$s-32;
+  padding: deprecated.$s-2 deprecated.$s-2 deprecated.$s-2 0;
+  margin: deprecated.$s-4 deprecated.$s-4 0 deprecated.$s-4;
+  border-radius: deprecated.$br-6;
+  background-color: var(--panel-title-background-color);
+
+  .shortcuts-title {
+    @include deprecated.flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+
+  .shortcuts-close-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 }
 
 .section {

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

@@ -46,7 +46,7 @@
   {::mf/private true}
   [{:keys [tokens-lib selected-token-set-id]}]
   (let [selected-token-set
-        (mf/with-memo [tokens-lib selected-token-set-id]
+        (mf/with-memo [tokens-lib]
           (when selected-token-set-id
             (some-> tokens-lib (ctob/get-set selected-token-set-id))))
 
@@ -62,20 +62,18 @@
     [:div {:class (stl/css :sets-header-container)}
      [:> text* {:as "span"
                 :typography "headline-small"
-                :class (stl/css :sets-header)
-                :data-testid "active-token-set-title"}
+                :class (stl/css :sets-header)}
       (tr "workspace.tokens.tokens-section-title" (ctob/get-name selected-token-set))]
-     (when (and (some? selected-token-set-id)
-                (not (token-set-active? (ctob/get-name selected-token-set))))
-       [:div {:class (stl/css :sets-header-status) :title (tr "workspace.tokens.inactive-set-description")}
+     [:div {:class (stl/css :sets-header-status) :title (tr "workspace.tokens.inactive-set-description")}
         ;; NOTE: when no set in tokens-lib, the selected-token-set-id
         ;; will be `nil`, so for properly hide the inactive message we
         ;; check that at least `selected-token-set-id` has a value
-
+      (when (and (some? selected-token-set-id)
+                 (not (token-set-active? (ctob/get-name selected-token-set))))
         [:*
          [:> icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}]
          [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)}
-          (tr "workspace.tokens.inactive-set")]]])]))
+          (tr "workspace.tokens.inactive-set")]])]]))
 
 (mf/defc tokens-section*
   {::mf/private true}
@@ -160,7 +158,7 @@
      [:& token-context-menu]
      [:> token-node-context-menu* {:on-delete-node delete-node}]
 
-     [:> selected-set-info* {:tokens-lib tokens-lib
+     [:& selected-set-info* {:tokens-lib tokens-lib
                              :selected-token-set-id selected-token-set-id}]
 
      (for [type filled-group]

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

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

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

@@ -140,9 +140,6 @@
         error
         (get-in @form [:errors input-name])
 
-        extra-error
-        (get-in @form [:extra-errors input-name])
-
         value
         (get-in @form [:data input-name] "")
 
@@ -250,14 +247,9 @@
                                   :hint-type (:type hint)})
 
         props
-        (cond
-          (and error touched?)
+        (if (and error touched?)
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
-          (and extra-error touched?)
-          (mf/spread-props props {:hint-type "error"
-                                  :hint-message (:message extra-error)})
-          :else
           props)]
 
     (mf/with-effect [resolve-stream tokens token input-name]

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

@@ -236,14 +236,12 @@
    (on-composite-input-change form field value false))
   ([form field value trim?]
    (letfn [(clean-errors [errors]
-             (some-> errors
-                     (update :value #(when (map? %) (dissoc % field)))
-                     (update :value #(when (seq %) %))
-                     (not-empty)))]
+             (-> errors
+                 (dissoc field)
+                 (not-empty)))]
      (swap! form (fn [state]
                    (-> state
                        (assoc-in [:data :value field] (if trim? (str/trim value) value))
-                       (assoc-in [:touched :value field] true)
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
@@ -259,9 +257,6 @@
         value
         (get-in @form [:data :value input-name] "")
 
-        touched?
-        (get-in @form [:touched :value input-name])
-
         resolve-stream
         (mf/with-memo [token]
           (if-let [value (get-in token [:value input-name])]
@@ -289,7 +284,7 @@
                                 :hint-message (:message hint)
                                 :hint-type (:type hint)})
         props
-        (if (and touched? error)
+        (if error
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
           props)
@@ -337,7 +332,6 @@
                                  message (tr "workspace.tokens.resolved-value" (or resolved-value value))]
                              (swap! form update :errors dissoc :value)
                              (swap! form update :extra-errors dissoc :value)
-                             (swap! form update :async-errors dissoc :reference)
                              (if (= input-value (str resolved-value))
                                (reset! hint* {})
                                (reset! hint* {:message message :type "hint"})))))))]

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

@@ -23,19 +23,21 @@
   (let [token-type
         (or (:type token) token-type)
 
+        tokens-in-selected-set
+        (mf/deref refs/workspace-all-tokens-in-selected-set)
+
         token-path
         (mf/with-memo [token]
           (cft/token-name->path (:name token)))
 
-        all-tokens (mf/deref refs/workspace-all-tokens-map)
-
-        all-tokens
-        (mf/with-memo [token-path all-tokens]
-          (-> (ctob/tokens-tree all-tokens)
+        tokens-tree-in-selected-set
+        (mf/with-memo [token-path tokens-in-selected-set]
+          (-> (ctob/tokens-tree tokens-in-selected-set)
               (d/dissoc-in token-path)))
         props
         (mf/spread-props props {:token-type token-type
-                                :all-token-tree all-tokens
+                                :tokens-tree-in-selected-set tokens-tree-in-selected-set
+                                :tokens-in-selected-set tokens-in-selected-set
                                 :token token})
         text-case-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")})
         text-decoration-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")})

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

@@ -16,7 +16,6 @@
    [app.main.data.helpers :as dh]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.errors :as wte]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.data.workspace.tokens.propagation :as dwtp]
    [app.main.data.workspace.tokens.remapping :as remap]
@@ -89,13 +88,14 @@
            action
            is-create
            selected-token-set-id
-           all-token-tree
+           tokens-tree-in-selected-set
            token-type
            make-schema
            input-component
            initial
            type
            value-subfield
+           tokens-in-selected-set
            input-value-placeholder] :as props}]
 
   (let [make-schema           (or make-schema default-make-schema)
@@ -105,6 +105,13 @@
         active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
         active-tab (deref active-tab*)
 
+        on-toggle-tab
+        (mf/use-fn
+         (mf/deps)
+         (fn [new-tab]
+           (let [new-tab (keyword new-tab)]
+             (reset! active-tab* new-tab))))
+
         token
         (mf/with-memo [token]
           (or token {:type token-type}))
@@ -117,9 +124,6 @@
         tokens
         (mf/deref refs/workspace-active-theme-sets-tokens)
 
-        tokens-in-selected-set
-        (mf/deref refs/workspace-all-tokens-in-selected-set)
-
         tokens
         (mf/with-memo [tokens tokens-in-selected-set token]
           ;; Ensure that the resolved value uses the currently editing token
@@ -130,8 +134,8 @@
             (assoc (:name token) token)))
 
         schema
-        (mf/with-memo [all-token-tree active-tab]
-          (make-schema all-token-tree active-tab))
+        (mf/with-memo [tokens-tree-in-selected-set active-tab]
+          (make-schema tokens-tree-in-selected-set active-tab))
 
         initial
         (mf/with-memo [token]
@@ -144,17 +148,6 @@
         (fm/use-form :schema schema
                      :initial initial)
 
-        on-toggle-tab
-        (mf/use-fn
-         (mf/deps form)
-         (fn [new-tab]
-           (let [new-tab (keyword new-tab)]
-             (if (= new-tab :reference)
-               (swap! form assoc-in [:async-errors :reference]
-                      {:message "Need valid reference"})
-               (swap! form update :async-errors dissoc :reference))
-             (reset! active-tab* new-tab))))
-
         on-cancel
         (mf/use-fn
          (fn [e]
@@ -231,12 +224,7 @@
                                                 :description description}))
                           (dwtl/toggle-token-path path)
                           (dwtp/propagate-workspace-tokens)
-                          (modal/hide!)))))
-                   ;; WORKAROUND:  display validation errors in the form instead of crashing
-                   (fn [{:keys [errors]}]
-                     (let [error-messages (wte/humanize-errors errors)
-                           error-message (first error-messages)]
-                       (swap! form assoc-in [:extra-errors :value] {:message error-message}))))))))]
+                          (modal/hide!))))))))))]
 
     [:> fc/form* {:class (stl/css :form-wrapper)
                   :form form

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

@@ -291,7 +291,6 @@
           [:color {:optional true} [:maybe :string]]
           [:color-result {:optional true} ::sm/any]
           [:inset {:optional true} [:maybe :boolean]]]]]
-
        (if (= active-tab :reference)
          [:reference {:optional false} ::sm/text]
          [:reference {:optional true} [:maybe :string]])]]

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

@@ -228,7 +228,7 @@
                               :class (stl/css :main-toolbar-options-button)
                               :icon i/bug
                               :aria-pressed (contains? layout :debug-panel)
-                              :aria-label (tr "workspace.toolbar.debug")
+                              :aria-label "Debugging tool"
                               :tooltip-placement "bottom"
                               :on-click toggle-debug-panel}]])]]
 

frontend/src/app/plugins/shape.cljs

@@ -1185,6 +1185,7 @@
                        {:cmd :export-shapes
                         :profile-id (:profile-id @st/state)
                         :wait true
+                        :skip-children (:skip-children value false)
                         :exports [{:file-id   file-id
                                    :page-id   page-id
                                    :object-id id

frontend/src/app/util/i18n.cljs

@@ -114,7 +114,7 @@
 
 (defn- load
   [locale]
-  (let [path (str "./translation." locale ".js?version=" cf/version-tag)]
+  (let [path (str "./translation." locale ".js?version=" (:full cf/version))]
     (->> (mod/import path)
          (p/fmap (fn [result] (unchecked-get result "default")))
          (p/fnly (fn [data cause]

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

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

frontend/translations/en.po

@@ -433,9 +433,6 @@ msgstr "(copy)"
 msgid "dashboard.create-new-team"
 msgstr "Create new team"
 
-msgid "dashboard.create-new-org"
-msgstr "Create new org"
-
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"
 msgstr "Pin this version"
@@ -5479,10 +5476,6 @@ msgstr "Delete row and shapes"
 msgid "workspace.context-menu.grid-track.row.duplicate"
 msgstr "Duplicate row"
 
-#: src/app/main/ui/workspace/sidebar/debug.cljs:37
-msgid "workspace.debug.title"
-msgstr "Debugging tools"
-
 #: src/app/main/ui/workspace/sidebar/layers.cljs:512
 msgid "workspace.focus.focus-mode"
 msgstr "Focus mode"
@@ -8428,10 +8421,6 @@ msgstr "Comments (%s)"
 msgid "workspace.toolbar.curve"
 msgstr "Curve (%s)"
 
-#: src/app/main/ui/workspace/top_toolbar.cljs:231
-msgid "workspace.toolbar.debug"
-msgstr "Debugging tools"
-
 #: src/app/main/ui/workspace/top_toolbar.cljs:172
 msgid "workspace.toolbar.ellipse"
 msgstr "Ellipse (%s)"

frontend/translations/es.po

@@ -442,9 +442,6 @@ msgstr "(copia)"
 msgid "dashboard.create-new-team"
 msgstr "Crear nuevo equipo"
 
-msgid "dashboard.create-new-org"
-msgstr "Crear nueva organización"
-
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"
 msgstr "Guardar esta versión"
@@ -5464,10 +5461,6 @@ msgstr "Borrar fila con el contenido"
 msgid "workspace.context-menu.grid-track.row.duplicate"
 msgstr "Duplicar fila"
 
-#: src/app/main/ui/workspace/sidebar/debug.cljs:37
-msgid "workspace.debug.title"
-msgstr "Herramientas de depuración"
-
 #: src/app/main/ui/workspace/sidebar/layers.cljs:512
 msgid "workspace.focus.focus-mode"
 msgstr "Modo foco"
@@ -7972,7 +7965,7 @@ msgstr "Line height (multiplicador, px o %) o {alias}"
 
 #: src/app/main/data/workspace/tokens/errors.cljs:57
 msgid "workspace.tokens.missing-references"
-msgstr "Referencias de tokens no encontradas: "
+msgstr "Referéncias de tokens no encontradas:"
 
 #: src/app/main/ui/workspace/tokens/management/token_pill.cljs:123
 msgid "workspace.tokens.more-options"
@@ -8289,10 +8282,6 @@ msgstr "Comentarios (%s)"
 msgid "workspace.toolbar.curve"
 msgstr "Curva (%s)"
 
-#: src/app/main/ui/workspace/top_toolbar.cljs:231
-msgid "workspace.toolbar.debug"
-msgstr "Herramientas de depuración"
-
 #: src/app/main/ui/workspace/top_toolbar.cljs:172
 msgid "workspace.toolbar.ellipse"
 msgstr "Elipse (%s)"

plugins/wrangle-penpot-plugins-api-doc.toml

@@ -1,4 +0,0 @@
-name = "penpot-plugins-api-doc"
-compatibility_date = "2025-01-01"
-
-assets = { directory = "dist/doc" }

render-wasm/_build_env

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-export VERSION_TAG=${VERSION:-develop};
+export CURRENT_VERSION=${CURRENT_VERSION:-develop};
 
 if [ "$NODE_ENV" = "production" ];  then
     export BUILD_MODE="release";
@@ -81,7 +81,7 @@ function copy_artifacts {
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js $DEST/$BUILD_NAME.js;
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.wasm $DEST/$BUILD_NAME.wasm;
 
-    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$VERSION_TAG/g" $DEST/$BUILD_NAME.js;
+    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$CURRENT_VERSION/g" $DEST/$BUILD_NAME.js;
 
     yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
         --log-level=error \

render-wasm/src/main.rs

@@ -284,7 +284,6 @@ pub extern "C" fn set_view_end() {
             performance::end_measure!("set_view_end::clear_tile_index");
             performance::end_timed_log!("clear_tile_index", _clear_start);
         }
-        state.render_state.sync_cached_viewbox();
         performance::end_measure!("set_view_end");
         performance::end_timed_log!("set_view_end", _end_start);
         #[cfg(feature = "profile-macros")]

render-wasm/src/render.rs

@@ -1136,7 +1136,6 @@ impl RenderState {
     ) -> Result<(), String> {
         let _start = performance::begin_timed_log!("start_render_loop");
         let scale = self.get_scale();
-
         self.tile_viewbox.update(self.viewbox, scale);
 
         self.focus_mode.reset();
@@ -2293,10 +2292,6 @@ impl RenderState {
         (self.viewbox.zoom - self.cached_viewbox.zoom).abs() > f32::EPSILON
     }
 
-    pub fn sync_cached_viewbox(&mut self) {
-        self.cached_viewbox = self.viewbox;
-    }
-
     pub fn mark_touched(&mut self, uuid: Uuid) {
         self.touched_ids.insert(uuid);
     }

render-wasm/src/shapes.rs

@@ -1529,7 +1529,6 @@ impl Shape {
             || !self.transform.is_identity()
             || !math::is_close_to(self.rotation, 0.0)
             || matches!(self.shape_type, Type::Group(_) | Type::Frame(_))
-            || matches!(self.shape_type, Type::Text(_))
     }
 
     pub fn count_visible_inner_strokes(&self) -> usize {

render-wasm/src/state.rs

@@ -100,16 +100,6 @@ impl<'a> State<'a> {
     }
 
     pub fn start_render_loop(&mut self, timestamp: i32) -> Result<(), String> {
-        // If zoom changed, we MUST rebuild the tile index before using it.
-        // Otherwise, the index will have tiles from the old zoom level, causing visible
-        // tiles to appear empty. This can happen if start_render_loop() is called before
-        // set_view_end() finishes rebuilding the index, or if set_view_end() hasn't been
-        // called yet.
-        let zoom_changed = self.render_state.zoom_changed();
-        if zoom_changed {
-            self.rebuild_tiles_shallow();
-        }
-
         self.render_state
             .start_render_loop(None, &self.shapes, timestamp, false)?;
         Ok(())