🔧 Fix nginx entrypoint

.github/ISSUE_TEMPLATE/new-render-bug-report.md

@@ -1,38 +0,0 @@
----
-name: New Render Bug Report
-about: Create a report about the bugs you have found in the new render
-title: ''
-labels: new render
-assignees: claragvinola
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**Steps to Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots or screen recordings**
-If applicable, add screenshots or screen recording to help illustrate your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.gitignore

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

CHANGES.md

@@ -16,8 +16,7 @@
 
 ### :bug: Bugs fixed
 
-- Fix prototype connections lost when switching between variants [Taiga #12812](https://tree.taiga.io/project/penpot/issue/12812)
-- Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
+### :bug: Bugs fixed
 
 ## 2.13.0 (Unreleased)
 

backend/scripts/_env

@@ -36,7 +36,8 @@ export PENPOT_FLAGS="\
        enable-file-validation \
        enable-file-schema-validation \
        enable-redis-cache \
-       enable-subscriptions";
+       enable-subscriptions \
+       enable-nitrate";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
@@ -55,6 +56,8 @@ 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
+
 export JAVA_OPTS="\
        -Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
        -Djdk.attach.allowAttachSelf \

backend/src/app/config.clj

@@ -225,6 +225,8 @@
     [: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,6 +323,7 @@
    {::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)
@@ -339,6 +340,9 @@
     ::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)
@@ -348,6 +352,7 @@
     ::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

@@ -0,0 +1,123 @@
+;; 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]])
+
+
+(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))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; 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)})
+    {}))
+
+(defmethod ig/halt-key! ::client
+  [_ {:keys []}]
+  (do :stuff))

backend/src/app/rpc.clj

@@ -301,6 +301,7 @@
   (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/teams.clj

@@ -23,6 +23,7 @@
    [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]
@@ -172,6 +173,12 @@
    (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)
@@ -190,7 +197,9 @@
    ::sm/params schema:get-teams}
   [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id] :as params}]
   (dm/with-open [conn (db/open pool)]
-    (get-teams conn profile-id)))
+    (cond->> (get-teams conn profile-id)
+      (contains? cf/flags :nitrate)
+      (map #(add-org-to-team cfg % params)))))
 
 (def ^:private sql:get-owned-teams
   "SELECT t.id, t.name,

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

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

common/src/app/common/logic/libraries.cljc

@@ -2497,7 +2497,7 @@
         (-> changes
             (cls/generate-delete-shapes
              file page objects (d/ordered-set (:id shape))
-             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true :ignore-flows-for #{(:id shape)}}))
+             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true}))
         [new-shape changes]
         (-> changes
             (generate-new-shape-for-swap shape file page libraries id-new-component index target-cell keep-props-values))]

common/src/app/common/logic/shapes.cljc

@@ -124,11 +124,9 @@
                         ;; on the deletion process. It should receive a shape and
                         ;; return a boolean
                         ignore-children-fn
-                        ignore-mask
-                        ignore-flows-for]
+                        ignore-mask]
                  :or {ignore-children-fn (constantly false)
-                      ignore-mask false
-                      ignore-flows-for #{}}}]
+                      ignore-mask false}}]
    (let [objects (pcb/get-objects changes)
          data    (pcb/get-library-data changes)
          page-id (pcb/get-page-id changes)
@@ -196,8 +194,7 @@
          (->> (:flows page)
               (reduce
                (fn [changes [id flow]]
-                 (if (and (id-to-delete? (:starting-frame flow))
-                          (not (contains? ignore-flows-for (:starting-frame flow))))
+                 (if (id-to-delete? (:starting-frame flow))
                    (-> changes
                        (pcb/with-page page)
                        (pcb/set-flow id nil))

common/src/app/common/types/component.cljc

@@ -140,8 +140,7 @@
     :layout-item-min-w
     :layout-item-absolute
     :layout-item-z-index
-    :layout-item-align-self
-    :interactions})
+    :layout-item-align-self})
 
 (defn component-attr?
   "Check if some attribute is one that is involved in component syncrhonization.

docker/devenv/files/start-tmux.sh

@@ -41,4 +41,9 @@ tmux select-window -t penpot:3
 tmux send-keys -t penpot 'cd penpot/backend' enter C-l
 tmux send-keys -t penpot './scripts/start-dev' enter
 
+tmux new-window -t penpot:5 -n 'nitrate'
+tmux select-window -t penpot:5
+tmux send-keys -t penpot 'cd penpot/penpot-nitrate' enter C-l
+tmux send-keys -t penpot 'pnpm dev --host' enter
+
 tmux -2 attach-session -t penpot

docker/images/files/nginx-entrypoint.sh

@@ -29,8 +29,9 @@ 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_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
+envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_NITRATE_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,6 +139,14 @@ 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/scripts/build

@@ -1,10 +1,8 @@
 #!/usr/bin/env bash
 
+source ~/.bashrc
+
 set -ex
-
-corepack enable;
-corepack install;
-
 rm -rf ./_dist
-yarn install
+yarn
 yarn run build

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

@@ -1,604 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
-  unfoldTokenTree,
-} from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens: Apply token", () => {
-  test("User applies color token to a shape", async ({ page }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers
-      .getByTestId("layer-row")
-      .filter({ hasText: "Button" })
-      .click();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    unfoldTokenTree(tokensSidebar, "color", "colors.black");
-
-    await tokensSidebar
-      .getByRole("button", { name: "black" })
-      .click({ button: "right" });
-    await tokenContextMenuForToken.getByText("Fill").click();
-
-    await expect(
-      workspacePage.page.getByLabel("Name: colors.black"),
-    ).toBeVisible();
-  });
-
-  test("User applies border-radius token to a shape from sidebar", async ({
-    page,
-  }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
-
-    // Open tokens sections on left sidebar
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    // Unfold border radius tokens
-    await page.getByRole("button", { name: "Border Radius 3" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius" }),
-    ).toBeVisible();
-    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
-    ).toBeVisible();
-
-    // Apply border radius token from token panels
-    await tokensSidebar
-      .getByRole("button", { name: "borderRadius.sm" })
-      .click();
-
-    // Check if border radius sections is visible on right sidebar
-    const borderRadiusSection = page.getByRole("region", {
-      name: "border-radius-section",
-    });
-    await expect(borderRadiusSection).toBeVisible();
-
-    // Check if token pill is visible on design tab on right sidebar
-    const brTokenPillSM = borderRadiusSection.getByRole("button", {
-      name: "borderRadius.sm",
-    });
-    await expect(brTokenPillSM).toBeVisible();
-    await brTokenPillSM.click();
-
-    // Change token from dropdown
-    const brTokenOptionXl = borderRadiusSection.getByLabel("borderRadius.xl");
-    await expect(brTokenOptionXl).toBeVisible();
-    await brTokenOptionXl.click();
-
-    await expect(brTokenPillSM).not.toBeVisible();
-    const brTokenPillXL = borderRadiusSection.getByRole("button", {
-      name: "borderRadius.xl",
-    });
-    await expect(brTokenPillXL).toBeVisible();
-
-    // Detach token from design tab on right sidebar
-    const detachButton = borderRadiusSection.getByRole("button", {
-      name: "Detach token",
-    });
-    await detachButton.click();
-    await expect(brTokenPillXL).not.toBeVisible();
-  });
-
-  test("User applies typography token to a text shape", async ({ page }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTypographyTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers
-      .getByTestId("layer-row")
-      .filter({ hasText: "Some Text" })
-      .click();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    await tokensSidebar
-      .getByRole("button")
-      .filter({ hasText: "Typography" })
-      .click();
-
-    await tokensSidebar.getByRole("button", { name: "Full" }).click();
-
-    const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
-      name: "Font Size",
-    });
-    await expect(fontSizeInput).toBeVisible();
-    await expect(fontSizeInput).toHaveValue("100");
-  });
-
-  test("User edits typography token and all fields are valid", async ({
-    page,
-  }) => {
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
-
-    await tokensSidebar
-      .getByRole("button")
-      .filter({ hasText: "Typography" })
-      .click();
-
-    // Open edit modal for "Full" typography token
-    const token = tokensSidebar.getByRole("button", { name: "Full" });
-    await token.click({ button: "right" });
-    await page.getByText("Edit token").click();
-
-    // Modal opens
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const saveButton = tokensUpdateCreateModal.getByRole("button", {
-      name: /save/i,
-    });
-
-    // Fill font-family to verify to verify that input value doesn't get split into list of characters
-    const fontFamilyField = tokensUpdateCreateModal
-      .getByLabel("Font family")
-      .first();
-    await fontFamilyField.fill("OneWord");
-
-    // Invalidate incorrect values for font size
-    const fontSizeField = tokensUpdateCreateModal.getByLabel(/Font Size/i);
-    await fontSizeField.fill("invalid");
-    await expect(
-      tokensUpdateCreateModal.getByText(/Invalid token value:/),
-    ).toBeVisible();
-    await expect(saveButton).toBeDisabled();
-
-    // Show error with line-height depending on invalid font-size
-    await fontSizeField.fill("");
-    await expect(saveButton).toBeDisabled();
-
-    // Fill in values for all fields and verify they persist when switching tabs
-    await fontSizeField.fill("16");
-    await expect(saveButton).toBeEnabled();
-
-    const fontWeightField = tokensUpdateCreateModal.getByLabel(/Font Weight/i);
-    const letterSpacingField =
-      tokensUpdateCreateModal.getByLabel(/Letter Spacing/i);
-    const lineHeightField = tokensUpdateCreateModal.getByLabel(/Line Height/i);
-    const textCaseField = tokensUpdateCreateModal.getByLabel(/Text Case/i);
-    const textDecorationField =
-      tokensUpdateCreateModal.getByLabel(/Text Decoration/i);
-
-    // Capture all values before switching tabs
-    const originalValues = {
-      fontSize: await fontSizeField.inputValue(),
-      fontFamily: await fontFamilyField.inputValue(),
-      fontWeight: await fontWeightField.inputValue(),
-      letterSpacing: await letterSpacingField.inputValue(),
-      lineHeight: await lineHeightField.inputValue(),
-      textCase: await textCaseField.inputValue(),
-      textDecoration: await textDecorationField.inputValue(),
-    };
-
-    // Switch to reference tab and back to composite tab
-    const referenceTabButton =
-      tokensUpdateCreateModal.getByTestId("reference-opt");
-    await referenceTabButton.click();
-
-    // Empty reference tab should be disabled
-    await expect(saveButton).toBeDisabled();
-
-    const compositeTabButton =
-      tokensUpdateCreateModal.getByTestId("composite-opt");
-    await compositeTabButton.click();
-
-    // Filled composite tab should be enabled
-    await expect(saveButton).toBeEnabled();
-
-    // Verify all values are preserved after switching tabs
-    await expect(fontSizeField).toHaveValue(originalValues.fontSize);
-    await expect(fontFamilyField).toHaveValue(originalValues.fontFamily);
-    await expect(fontWeightField).toHaveValue(originalValues.fontWeight);
-    await expect(letterSpacingField).toHaveValue(originalValues.letterSpacing);
-    await expect(lineHeightField).toHaveValue(originalValues.lineHeight);
-    await expect(textCaseField).toHaveValue(originalValues.textCase);
-    await expect(textDecorationField).toHaveValue(
-      originalValues.textDecoration,
-    );
-
-    await saveButton.click();
-
-    // Modal should close, token should be visible (with new name) in sidebar
-    await expect(tokensUpdateCreateModal).not.toBeVisible();
-  });
-
-  test("User cant submit empty typography token or reference", async ({
-    page,
-  }) => {
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-    await tokensTabPanel
-      .getByRole("button", { name: "Add Token: Typography" })
-      .click();
-
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const nameField = tokensUpdateCreateModal.getByLabel("Name");
-    await nameField.fill("typography.empty");
-
-    const valueField = tokensUpdateCreateModal.getByLabel("Font Size");
-
-    // Insert a value and then delete it
-    await valueField.fill("1");
-    await valueField.fill("");
-
-    // Submit button should be disabled when field is empty
-    const submitButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Save",
-    });
-    await expect(submitButton).toBeDisabled();
-
-    // Switch to reference tab, should not be submittable either
-    const referenceTabButton =
-      tokensUpdateCreateModal.getByTestId("reference-opt");
-    await referenceTabButton.click();
-    await expect(submitButton).toBeDisabled();
-  });
-
-  test("User adds typography token with reference", async ({ page }) => {
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
-
-    const newTokenTitle = "NewReference";
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-    await tokensTabPanel
-      .getByRole("button", { name: "Add Token: Typography" })
-      .click();
-
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const nameField = tokensUpdateCreateModal.getByLabel("Name");
-    await nameField.fill(newTokenTitle);
-
-    const referenceTabButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Use a reference",
-    });
-    referenceTabButton.click();
-
-    const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-      name: "Reference",
-    });
-    await referenceField.fill("{Full}");
-
-    const submitButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Save",
-    });
-
-    const resolvedValue =
-      await tokensUpdateCreateModal.getByText("Resolved value:");
-    await expect(resolvedValue).toBeVisible();
-    await expect(resolvedValue).toContainText("Font Family: 42dot Sans");
-    await expect(resolvedValue).toContainText("Font Size: 100");
-    await expect(resolvedValue).toContainText("Font Weight: 300");
-    await expect(resolvedValue).toContainText("Letter Spacing: 2");
-    await expect(resolvedValue).toContainText("Text Case: uppercase");
-    await expect(resolvedValue).toContainText("Text Decoration: underline");
-
-    await expect(submitButton).toBeEnabled();
-    await submitButton.click();
-
-    await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-    const newToken = tokensSidebar.getByRole("button", {
-      name: newTokenTitle,
-    });
-
-    await expect(newToken).toBeVisible();
-  });
-
-  test("User adds shadow token with multiple shadows and applies it to shape", async ({
-    page,
-  }) => {
-    const {
-      tokensUpdateCreateModal,
-      tokensSidebar,
-      workspacePage,
-      tokenContextMenuForToken,
-    } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-    await test.step("Stage 1: Basic open", async () => {
-      // User adds shadow via the sidebar
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      const nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary");
-
-      // User adds first shadow with a color from the color ramp
-      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-0",
-      );
-      await expect(firstShadowFields).toBeVisible();
-
-      // Fill in the shadow values
-      const offsetXInput = firstShadowFields.getByLabel("X");
-      const offsetYInput = firstShadowFields.getByLabel("Y");
-      const blurInput = firstShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const spreadInput = firstShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
-
-      await offsetXInput.fill("2");
-      await offsetYInput.fill("2");
-      await blurInput.fill("4");
-      await spreadInput.fill("0");
-
-      // Add color using the color picker
-      const colorBullet = firstShadowFields.getByTestId(
-        "token-form-color-bullet",
-      );
-      await colorBullet.click();
-
-      // Click on the color ramp to select a color
-      const valueSaturationSelector = tokensUpdateCreateModal.getByTestId(
-        "value-saturation-selector",
-      );
-      await expect(valueSaturationSelector).toBeVisible();
-      await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
-
-      // Verify that a color value was set
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      await expect(colorInput).toHaveValue(/^rgb(.*)$/);
-
-      // Wait for validation to complete
-      await expect(
-        tokensUpdateCreateModal.getByText(/Resolved value:/).first(),
-      ).toBeVisible();
-
-      // Save button should be enabled
-      const submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await expect(submitButton).toBeEnabled();
-    });
-
-    await test.step("Stage 2: Shadow adding/removing works", async () => {
-      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-0",
-      );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      const firstColorValue = await colorInput.inputValue();
-
-      // User adds a second shadow
-      const addButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Add Shadow",
-      });
-      await addButton.click();
-
-      const secondShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-1",
-      );
-      await expect(secondShadowFields).toBeVisible();
-
-      // User adds a third shadow
-      await addButton.click();
-
-      const thirdShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-2",
-      );
-      await expect(thirdShadowFields).toBeVisible();
-
-      // User adds values for the third shadow
-      const thirdOffsetXInput = thirdShadowFields.getByLabel("X");
-      const thirdOffsetYInput = thirdShadowFields.getByLabel("Y");
-      const thirdBlurInput = thirdShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const thirdSpreadInput = thirdShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
-      const thirdColorInput = thirdShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-
-      await thirdOffsetXInput.fill("10");
-      await thirdOffsetYInput.fill("10");
-      await thirdBlurInput.fill("20");
-      await thirdSpreadInput.fill("5");
-      await thirdColorInput.fill("#FF0000");
-
-      // User removes the 2nd shadow
-      const removeButton2 = secondShadowFields.getByRole("button", {
-        name: "Remove Shadow",
-      });
-      await removeButton2.click();
-
-      // Verify that we have only two shadow fields
-      await expect(thirdShadowFields).not.toBeVisible();
-
-      // Verify that the first shadow kept its values
-      const firstOffsetXValue = await firstShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const firstOffsetYValue = await firstShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const firstBlurValue = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const firstSpreadValue = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const firstColorValueAfter = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(firstOffsetXValue).toBe("2");
-      await expect(firstOffsetYValue).toBe("2");
-      await expect(firstBlurValue).toBe("4");
-      await expect(firstSpreadValue).toBe("0");
-      await expect(firstColorValueAfter).toBe(firstColorValue);
-
-      // Verify that the second kept its values (after shadow 3)
-      // After removing index 1, the third shadow becomes the second shadow at index 1
-      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-1",
-      );
-      await expect(newSecondShadowFields).toBeVisible();
-
-      const secondOffsetXValue = await newSecondShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const secondOffsetYValue = await newSecondShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const secondBlurValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const secondSpreadValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const secondColorValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(secondOffsetXValue).toBe("10");
-      await expect(secondOffsetYValue).toBe("10");
-      await expect(secondBlurValue).toBe("20");
-      await expect(secondSpreadValue).toBe("5");
-      await expect(secondColorValue).toBe("#FF0000");
-    });
-
-    await test.step("Stage 3: Restore when switching tabs works", async () => {
-      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-0",
-      );
-      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-1",
-      );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      const firstColorValue = await colorInput.inputValue();
-
-      // Switch to reference tab
-      const referenceTabButton =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceTabButton.click();
-
-      // Verify we're in reference mode - the composite fields should not be visible
-      await expect(firstShadowFields).not.toBeVisible();
-
-      // Switch back to composite tab
-      const compositeTabButton =
-        tokensUpdateCreateModal.getByTestId("composite-opt");
-      await compositeTabButton.click();
-
-      // Verify that shadows are restored
-      await expect(firstShadowFields).toBeVisible();
-      await expect(newSecondShadowFields).toBeVisible();
-
-      // Verify first shadow values are still there
-      const restoredFirstOffsetX = await firstShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const restoredFirstOffsetY = await firstShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const restoredFirstBlur = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const restoredFirstSpread = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const restoredFirstColor = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(restoredFirstOffsetX).toBe("2");
-      await expect(restoredFirstOffsetY).toBe("2");
-      await expect(restoredFirstBlur).toBe("4");
-      await expect(restoredFirstSpread).toBe("0");
-      await expect(restoredFirstColor).toBe(firstColorValue);
-
-      // Verify second shadow values are still there
-      const restoredSecondOffsetX = await newSecondShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const restoredSecondOffsetY = await newSecondShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const restoredSecondBlur = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const restoredSecondSpread = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const restoredSecondColor = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(restoredSecondOffsetX).toBe("10");
-      await expect(restoredSecondOffsetY).toBe("10");
-      await expect(restoredSecondBlur).toBe("20");
-      await expect(restoredSecondSpread).toBe("5");
-      await expect(restoredSecondColor).toBe("#FF0000");
-    });
-
-    await test.step("Stage 4: Layer application works", async () => {
-      // Save the token
-      const submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      unfoldTokenTree(tokensSidebar, "shadow", "primary");
-
-      // Verify token appears in sidebar
-      const shadowToken = tokensSidebar.getByRole("button", {
-        name: "primary",
-      });
-      await expect(shadowToken).toBeEnabled();
-
-      // Apply the shadow
-      await workspacePage.clickLayers();
-      await workspacePage.clickLeafLayer("Button");
-
-      const shadowSection = workspacePage.rightSidebar.getByText("Drop shadow");
-      await expect(shadowSection).toHaveCount(0);
-
-      await page.getByRole("tab", { name: "Tokens" }).click();
-      await shadowToken.click();
-
-      await expect(shadowSection).toHaveCount(2);
-    });
-  });
-});

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

@@ -1,22 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { setupEmptyTokensFile } from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens tab - common tests", () => {
-  test("Clicking tokens tab button opens tokens sidebar tab", async ({
-    page,
-  }) => {
-    await setupEmptyTokensFile(page);
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-    await expect(tokensTabPanel).toHaveText(/TOKENS/);
-    await expect(tokensTabPanel).toHaveText(/Themes/);
-  });
-});

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

@@ -1,266 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-
-const setupEmptyTokensFile = async (page, options = {}) => {
-  const { flags = [] } = options;
-
-  const workspacePage = new WorkspacePage(page);
-  if (flags.length > 0) {
-    await workspacePage.mockConfigFlags(flags);
-  }
-
-  await workspacePage.setupEmptyFile();
-  await workspacePage.mockRPC(
-    "get-team?id=*",
-    "workspace/get-team-tokens.json",
-  );
-
-  await workspacePage.mockRPC(
-    "update-file?id=*",
-    "workspace/update-file-create-rect.json",
-  );
-
-  await workspacePage.goToWorkspace({
-    fileId: "c7ce0794-0992-8105-8004-38f280443849",
-    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
-  });
-
-  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-  await tokensTabButton.click();
-
-  return {
-    workspacePage,
-    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
-    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
-    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
-    tokenSetItems: workspacePage.tokenSetItems,
-    tokensSidebar: workspacePage.tokensSidebar,
-    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
-    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
-  };
-};
-
-const setupTokensFile = async (page, options = {}) => {
-  const {
-    file = "workspace/get-file-tokens.json",
-    fileFragment = "workspace/get-file-fragment-tokens.json",
-    flags = ["enable-feature-token-input"],
-  } = options;
-
-  const workspacePage = new WorkspacePage(page);
-  if (flags.length > 0) {
-    await workspacePage.mockConfigFlags(flags);
-  }
-
-  await workspacePage.setupEmptyFile();
-  await workspacePage.mockRPC(
-    "get-team?id=*",
-    "workspace/get-team-tokens.json",
-  );
-  await workspacePage.mockRPC(/get\-file\?/, file);
-  await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment);
-  await workspacePage.mockRPC(
-    "update-file?id=*",
-    "workspace/update-file-create-rect.json",
-  );
-
-  await workspacePage.goToWorkspace({
-    fileId: "c7ce0794-0992-8105-8004-38f280443849",
-    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
-  });
-
-  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-  await tokensTabButton.click();
-
-  return {
-    workspacePage,
-    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
-    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
-    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
-    tokenSetItems: workspacePage.tokenSetItems,
-    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
-    tokensSidebar: workspacePage.tokensSidebar,
-    tokenContextMenuForToken: workspacePage.tokenContextMenuForToken,
-    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
-  };
-};
-
-const setupTypographyTokensFile = async (page, options = {}) => {
-  return setupTokensFile(page, {
-    file: "workspace/get-file-typography-tokens.json",
-    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
-    ...options,
-  });
-};
-
-const testTokenCreationFlow = async (
-  page,
-  {
-    tokenLabel,
-    namePlaceholder,
-    valuePlaceholder,
-    validValue,
-    invalidValue,
-    selfReferenceValue,
-    missingReferenceValue,
-    secondValidValue,
-    resolvedValueText,
-    secondResolvedValueText,
-  },
-) => {
-  const invalidValueError = "Invalid token value";
-  const emptyNameError = "Name should be at least 1 character";
-  const selfReferenceError = "Token has self reference";
-  const missingReferenceError = "Missing token references";
-
-  const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-    await setupEmptyTokensFile(page);
-
-  // Open modal
-  const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-  const addTokenButton = tokensTabPanel.getByRole("button", {
-    name: `Add Token: ${tokenLabel}`,
-  });
-
-  await addTokenButton.click();
-  await expect(tokensUpdateCreateModal).toBeVisible();
-
-  // Placeholder checks
-  await expect(
-    tokensUpdateCreateModal.getByPlaceholder(namePlaceholder),
-  ).toBeVisible();
-  await expect(
-    tokensUpdateCreateModal.getByPlaceholder(valuePlaceholder),
-  ).toBeVisible();
-
-  const nameField = tokensUpdateCreateModal.getByLabel("Name");
-  const valueField = tokensUpdateCreateModal.getByLabel("Value");
-  const submitButton = tokensUpdateCreateModal.getByRole("button", {
-    name: "Save",
-  });
-
-  // 1. Name filled + empty value → disabled
-  await nameField.fill("my-token");
-  await expect(submitButton).toBeDisabled();
-
-  // 2. Invalid value → disabled + error message
-  await valueField.fill(invalidValue);
-
-  const invalidValueErrorNode =
-    tokensUpdateCreateModal.getByText(invalidValueError);
-
-  await expect(invalidValueErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  // 3. Empty name → disabled + error message
-  await nameField.fill("");
-
-  const emptyNameErrorNode = tokensUpdateCreateModal.getByText(emptyNameError);
-
-  await expect(emptyNameErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  // 4. Self reference → disabled + error message
-  await nameField.fill("my-token");
-  await valueField.fill(selfReferenceValue);
-
-  const selfRefErrorNode =
-    tokensUpdateCreateModal.getByText(selfReferenceError);
-
-  await expect(selfRefErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  // 5. Missing reference → disabled + error message
-  await valueField.fill(missingReferenceValue);
-
-  const missingRefErrorNode = tokensUpdateCreateModal.getByText(
-    missingReferenceError,
-  );
-
-  await expect(missingRefErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  //
-  // ------- SUCCESSFUL CREATION -------
-  //
-
-  // 6. Basic valid value → enabled
-  await valueField.fill(validValue);
-  await expect(
-    tokensUpdateCreateModal.getByText(resolvedValueText),
-  ).toBeVisible();
-  await expect(submitButton).toBeEnabled();
-
-  await submitButton.click();
-
-  await expect(
-    tokensTabPanel.getByRole("button", { name: "my-token" }),
-  ).toBeEnabled();
-
-  //
-  // ------- SECOND TOKEN WITH VALID REFERENCE -------
-  //
-
-  await addTokenButton.click();
-
-  await nameField.fill("my-token-2");
-  await valueField.fill(secondValidValue);
-
-  await expect(
-    tokensUpdateCreateModal.getByText(secondResolvedValueText),
-  ).toBeVisible();
-  await expect(submitButton).toBeEnabled();
-
-  await submitButton.click();
-
-  await expect(
-    tokensTabPanel.getByRole("button", { name: "my-token-2" }),
-  ).toBeEnabled();
-};
-
-const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
-  const tokenSegments = tokenName.split(".");
-  const tokenFolderTree = tokenSegments.slice(0, -1);
-  const tokenLeafName = tokenSegments.pop();
-
-  const typeParentWrapper = tokensTabPanel.getByTestId(`section-${type}`);
-  const typeSectionButton = typeParentWrapper
-    .getByRole("button", {
-      name: type,
-    })
-    .first();
-
-  const isSectionExpanded =
-    await typeSectionButton.getAttribute("aria-expanded");
-
-  if (isSectionExpanded === "false") {
-    await typeSectionButton.click();
-  }
-
-  for (const segment of tokenFolderTree) {
-    const segmentButton = typeParentWrapper
-      .getByRole("listitem")
-      .getByRole("button", { name: segment })
-      .first();
-
-    const isExpanded = await segmentButton.getAttribute("aria-expanded");
-    if (isExpanded === "false") {
-      await segmentButton.click();
-    }
-  }
-
-  await expect(
-    typeParentWrapper.getByRole("button", {
-      name: tokenLeafName,
-    }),
-  ).toBeEnabled();
-};
-
-export {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
-  testTokenCreationFlow,
-  unfoldTokenTree,
-};

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

@@ -1,651 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
-} from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens: Remapping Feature", () => {
-  test.describe("Box Shadow Token Remapping", () => {
-    test("User renames box shadow token with alias references", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base shadow token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("base-shadow");
-
-      const colorField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Color",
-      });
-      await colorField.fill("#000000");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived shadow token that references base-shadow
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
-      await nameField.fill("derived-shadow");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{base-shadow}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename base-shadow token
-      const baseToken = tokensSidebar.getByRole("button", {
-        name: "base-shadow",
-      });
-      await baseToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("foundation-shadow");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Check for remapping modal
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-      await expect(remappingModal).toContainText("1");
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "foundation-shadow" }),
-      ).toBeVisible();
-      await expect(
-        tokensSidebar.getByRole("button", { name: "derived-shadow" }),
-      ).toBeVisible();
-    });
-
-    test("User renames and updates shadow token - referenced token and applied shapes update", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-        workspacePage,
-      } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base shadow token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary-shadow");
-
-      let colorField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Color",
-      });
-      await colorField.fill("#000000");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived shadow token that references base
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("card-shadow");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{primary-shadow}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Apply the referenced token to a shape
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Button" })
-        .click();
-
-      await page.getByRole("tab", { name: "Tokens" }).click();
-      const cardShadowToken = tokensSidebar.getByRole("button", {
-        name: "card-shadow",
-      });
-      await cardShadowToken.click();
-
-      // Rename and update value of base token
-      const primaryToken = tokensSidebar.getByRole("button", {
-        name: "primary-shadow",
-      });
-      await primaryToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("main-shadow");
-
-      // Update the color value
-      colorField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Color",
-      });
-      await colorField.fill("#FF0000");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Confirm remapping
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify base token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "main-shadow" }),
-      ).toBeVisible();
-
-      // Verify referenced token still exists
-      await expect(
-        tokensSidebar.getByRole("button", { name: "card-shadow" }),
-      ).toBeVisible();
-
-      // Verify the shape still has the token applied with the NEW name
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Button" })
-        .click();
-
-      // Verify the shape still has the shadow applied with the UPDATED color value
-      // Expand the shadow section to access the color field
-      const shadowSection =
-        workspacePage.rightSidebar.getByTestId("shadow-section");
-      await expect(shadowSection).toBeVisible();
-
-      // Click to expand the shadow options (the menu button)
-      const shadowMenuButton = shadowSection
-        .getByRole("button", { name: "options" })
-        .first();
-      await shadowMenuButton.click();
-
-      // Wait for the advanced options to appear
-      await page.waitForTimeout(500);
-
-      // Verify the color value has updated from #000000 to #FF0000
-      const colorInput = shadowSection.getByRole("textbox", { name: "Color" });
-      expect(colorInput).not.toBeNull();
-      const colorValue = await colorInput.inputValue();
-      expect(colorValue.toUpperCase()).toBe("FF0000");
-    });
-  });
-
-  test.describe("Typography Token Remapping", () => {
-    test("User renames typography token with alias references", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTypographyTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("base-text");
-
-      const fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Font size",
-      });
-      await fontSizeField.fill("16");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
-      await nameField.fill("body-text");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{base-text}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename base token
-      const baseToken = tokensSidebar.getByRole("button", {
-        name: "base-text",
-      });
-      await baseToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("default-text");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Check for remapping modal
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "default-text" }),
-      ).toBeVisible();
-      await expect(
-        tokensSidebar.getByRole("button", { name: "body-text" }),
-      ).toBeVisible();
-    });
-
-    test("User renames and updates typography token - referenced token and applied shapes update", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-        workspacePage,
-      } = await setupTypographyTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("body-style");
-
-      let fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Font size",
-      });
-      await fontSizeField.fill("16");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
-      await nameField.fill("paragraph-style");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{body-style}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Apply the referenced token to a text shape
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Some Text" })
-        .click();
-
-      await page.getByRole("tab", { name: "Tokens" }).click();
-      const paragraphToken = tokensSidebar.getByRole("button", {
-        name: "paragraph-style",
-      });
-      await paragraphToken.click();
-
-      // Rename and update value of base token
-      const bodyToken = tokensSidebar.getByRole("button", {
-        name: "body-style",
-      });
-      await bodyToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("text-base");
-
-      // Update the font size value
-      fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Font size",
-      });
-      await fontSizeField.fill("18");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Confirm remapping
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify base token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "text-base" }),
-      ).toBeVisible();
-
-      // Verify referenced token still exists
-      await expect(
-        tokensSidebar.getByRole("button", { name: "paragraph-style" }),
-      ).toBeVisible();
-
-      // Verify the text shape still has the token applied with NEW name and value
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Some Text" })
-        .click();
-
-      // Verify the shape shows the updated font size value (18)
-      // This proves the remapping worked and the value update propagated through the reference
-      const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
-        name: "Font Size",
-      });
-      await expect(fontSizeInput).toBeVisible();
-      await expect(fontSizeInput).toHaveValue("18");
-    });
-  });
-
-  test.describe("Border Radius Token Remapping", () => {
-    test("User renames border radius token with alias references", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("base-radius");
-
-      const valueField = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField.fill("4");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("card-radius");
-
-      const valueField2 = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField2.fill("{base-radius}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename base token
-      const baseToken = tokensSidebar.getByRole("button", {
-        name: "base-radius",
-      });
-      await baseToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary-radius");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Check for remapping modal
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "primary-radius" }),
-      ).toBeVisible();
-      await expect(
-        tokensSidebar.getByRole("button", { name: "card-radius" }),
-      ).toBeVisible();
-    });
-
-    test("User renames and updates border radius token - referenced token updates", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("radius-sm");
-
-      let valueField = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField.fill("4");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("button-radius");
-
-      const valueField2 = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField2.fill("{radius-sm}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename and update value of base token
-      const radiusToken = tokensSidebar.getByRole("button", {
-        name: "radius-sm",
-      });
-      await radiusToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("radius-base");
-
-      // Update the value
-      valueField = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField.fill("8");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Confirm remapping
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify base token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "radius-base" }),
-      ).toBeVisible();
-
-      // Verify referenced token still exists
-      await expect(
-        tokensSidebar.getByRole("button", { name: "button-radius" }),
-      ).toBeVisible();
-
-      // Verify the referenced token now points to the renamed token
-      // by opening it and checking the reference
-      const buttonRadiusToken = tokensSidebar.getByRole("button", {
-        name: "button-radius",
-      });
-      await buttonRadiusToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      const currentValue = tokensUpdateCreateModal.getByLabel("Value");
-      await expect(currentValue).toHaveValue("{radius-base}");
-    });
-  });
-});

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

@@ -1,219 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens: Sets Tab", () => {
-  const changeSetInput = async (sidebar, setName, finalKey = "Enter") => {
-    const setInput = sidebar.locator("input:focus");
-    await expect(setInput).toBeVisible();
-    await setInput.fill(setName);
-    await setInput.press(finalKey);
-  };
-
-  const createSet = async (sidebar, setName, finalKey = "Enter") => {
-    const tokensTabButton = sidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-
-    await changeSetInput(sidebar, setName, (finalKey = "Enter"));
-  };
-
-  const assertEmptySetsList = async (el) => {
-    const buttons = await el.getByRole("button").allTextContents();
-    const filteredButtons = buttons.filter((text) => text === "Create one.");
-    await expect(filteredButtons.length).toEqual(2); // We assume there are no themes, so we have two "Create one" buttons.
-  };
-
-  const assertSetsList = async (el, sets) => {
-    const buttons = await el.getByRole("button").allTextContents();
-    const filteredButtons = buttons.filter(
-      (text) => text && text !== "Create one.",
-    );
-    await expect(filteredButtons).toEqual(sets);
-  };
-
-  test("User creates sets tree structure by entering a set path", async ({
-    page,
-  }) => {
-    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
-      await setupEmptyTokensFile(page);
-
-    const tokensTabButton = tokenThemesSetsSidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-
-    await createSet(tokenThemesSetsSidebar, "core/colors/light");
-    await createSet(tokenThemesSetsSidebar, "core/colors/dark");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "light",
-      "dark",
-    ]);
-
-    // User renames set
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "light" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Rename").click();
-    await changeSetInput(tokenThemesSetsSidebar, "light-renamed");
-
-    // User cancels during editing
-    await createSet(tokenThemesSetsSidebar, "core/colors/dark", "Escape");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "light-renamed",
-      "dark",
-    ]);
-
-    // Creates nesting by renaming set with double click
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "light-renamed" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Rename").click();
-    await changeSetInput(tokenThemesSetsSidebar, "nested/light");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "nested",
-      "light",
-      "dark",
-    ]);
-
-    // Create set in group
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Add set to this group").click();
-    await changeSetInput(tokenThemesSetsSidebar, "sizes/small");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "nested",
-      "light",
-      "dark",
-      "sizes",
-      "small",
-    ]);
-
-    // User deletes set
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "nested" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Delete").click();
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "dark",
-      "sizes",
-      "small",
-    ]);
-
-    // User deletes all sets
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Delete").click();
-
-    await assertEmptySetsList(tokenThemesSetsSidebar);
-  });
-
-  test("User can create & edit sets and set groups with an identical name", async ({
-    page,
-  }) => {
-    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
-      await setupEmptyTokensFile(page);
-
-    const tokensTabButton = tokenThemesSetsSidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-
-    await createSet(tokenThemesSetsSidebar, "core/colors");
-    await createSet(tokenThemesSetsSidebar, "core");
-    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .nth(0)
-      .dblclick();
-    await changeSetInput(tokenThemesSetsSidebar, "core-group-renamed");
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core-group-renamed",
-      "colors",
-      "core",
-    ]);
-
-    await page.keyboard.press(`ControlOrMeta+z`);
-    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
-
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .nth(1)
-      .dblclick();
-    await changeSetInput(tokenThemesSetsSidebar, "core-set-renamed");
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "core-set-renamed",
-    ]);
-  });
-
-  test("Fold/Unfold set", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenSetGroupItems } =
-      await setupTokensFile(page);
-
-    await expect(tokenThemesSetsSidebar).toBeVisible();
-
-    const darkSet = tokenThemesSetsSidebar.getByRole("button", {
-      name: "dark",
-      exact: true,
-    });
-
-    await expect(darkSet).toBeVisible();
-
-    const setGroup = await tokenSetGroupItems
-      .filter({ hasText: "LightDark" })
-      .first();
-
-    const setCollapsable = await setGroup
-      .getByTestId("tokens-set-group-collapse")
-      .first();
-
-    await setCollapsable.click();
-
-    await expect(darkSet).toHaveCount(0);
-  });
-
-  test("Change current theme", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenSetItems } =
-      await setupTokensFile(page);
-
-    await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "true");
-    await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "false");
-
-    await tokenThemesSetsSidebar.getByTestId("theme-select").click();
-    await page
-      .getByTestId("theme-select-dropdown")
-      .getByRole("option", { name: "Dark", exact: true })
-      .click();
-
-    await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "false");
-    await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "true");
-  });
-});

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

@@ -1,285 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
-
-// THEMES HELPERS
-
-const checkInputFieldWithError = async (
-  tokenThemeUpdateCreateModal,
-  inputLocator,
-) => {
-  await expect(inputLocator).toHaveAttribute("aria-invalid", "true");
-
-  const errorMessageId = await inputLocator.getAttribute("aria-describedby");
-  await expect(
-    tokenThemeUpdateCreateModal.locator(`#${errorMessageId}`),
-  ).toBeVisible();
-};
-
-const checkInputFieldWithoutError = async (inputLocator) => {
-  expect(await inputLocator.getAttribute("aria-invalid")).toBeNull();
-  expect(await inputLocator.getAttribute("aria-describedby")).toBeNull();
-};
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens Themes", () => {
-  test("User edits theme and activates it in the sidebar", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
-      await setupTokensFile(page);
-
-    await expect(tokenThemesSetsSidebar).toBeVisible();
-
-    await tokenThemesSetsSidebar.getByRole("button", { name: "Edit" }).click();
-
-    await expect(tokenThemeUpdateCreateModal).toBeVisible();
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", { name: "sets" })
-      .first()
-      .click();
-
-    await tokenThemeUpdateCreateModal.getByLabel("Theme").fill("Changed");
-
-    const lightDarkSetGroup = tokenThemeUpdateCreateModal.getByTestId(
-      "tokens-set-group-item",
-      {
-        name: "LightDark",
-        exact: true,
-      },
-    );
-    await expect(lightDarkSetGroup).toBeVisible();
-
-    const lightSet = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "light",
-      exact: true,
-    });
-    const darkSet = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "dark",
-      exact: true,
-    });
-
-    // Mixed set group
-    await expect(lightSet.getByRole("checkbox")).toBeChecked();
-    await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
-
-    // Disable all
-    await lightDarkSetGroup.getByRole("checkbox").click();
-    await expect(lightSet.getByRole("checkbox")).not.toBeChecked();
-    await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
-
-    // Enable all
-    await lightDarkSetGroup.getByRole("checkbox").click();
-    await expect(lightSet.getByRole("checkbox")).toBeChecked();
-    await expect(darkSet.getByRole("checkbox")).toBeChecked();
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", {
-        name: "save theme",
-      })
-      .click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("Changed" + "4 active sets"),
-    ).toBeVisible();
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button")
-      .getByText("close")
-      .click();
-    await expect(tokenThemeUpdateCreateModal).not.toBeVisible();
-
-    const themeSelect = tokenThemesSetsSidebar.getByRole("combobox");
-
-    await themeSelect.click();
-    await page
-      .getByTestId("theme-select-dropdown")
-      .getByRole("option", { name: "Changed" })
-      .click();
-
-    const sidebarLightSet = tokenThemesSetsSidebar.getByRole("button", {
-      name: "light",
-      exact: true,
-    });
-    const sidebarDarkSet = tokenThemesSetsSidebar.getByRole("button", {
-      name: "dark",
-      exact: true,
-    });
-
-    await expect(sidebarLightSet.getByRole("checkbox")).toBeChecked();
-    await expect(sidebarDarkSet.getByRole("checkbox")).toBeChecked();
-  });
-});
-
-test.describe("Tokens: Themes modal", () => {
-  test("Delete theme", async ({ page }) => {
-    const { tokenThemeUpdateCreateModal, workspacePage } =
-      await setupTokensFile(page);
-
-    workspacePage.openTokenThemesModal();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByRole("button", { name: "Delete theme" }),
-    ).toHaveCount(2);
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", { name: "Delete theme" })
-      .first()
-      .click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByRole("button", { name: "Delete theme" }),
-    ).toHaveCount(1);
-  });
-
-  test("Add new theme in empty file", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
-      await setupEmptyTokensFile(page);
-
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "Create one." })
-      .first()
-      .click();
-
-    await expect(tokenThemeUpdateCreateModal).toBeVisible();
-
-    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
-    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
-    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "Save theme",
-    });
-
-    await groupInput.fill("New Group name");
-    await nameInput.fill("New Theme name");
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    await saveButton.click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Theme name"),
-    ).toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Group name"),
-    ).toBeVisible();
-  });
-
-  test("Add new theme", async ({ page }) => {
-    const { tokenThemeUpdateCreateModal, workspacePage } =
-      await setupTokensFile(page);
-
-    workspacePage.openTokenThemesModal();
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", {
-        name: "Add new theme",
-      })
-      .click();
-
-    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
-    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
-    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "Save theme",
-    });
-
-    await groupInput.fill("Core"); // Invalid because "Core / Light" theme already exists
-    await nameInput.fill("Light");
-
-    await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
-    await expect(saveButton).toBeDisabled();
-
-    await groupInput.fill("New Group name");
-    await nameInput.fill("New Theme name");
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    await saveButton.click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Theme name"),
-    ).toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Group name"),
-    ).toBeVisible();
-  });
-
-  test("Edit theme", async ({ page }) => {
-    const { tokenThemeUpdateCreateModal, workspacePage } =
-      await setupTokensFile(page);
-
-    workspacePage.openTokenThemesModal();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("no sets"),
-    ).not.toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("3 active sets"),
-    ).toHaveCount(2);
-
-    await tokenThemeUpdateCreateModal
-      .getByText("3 active sets")
-      .first()
-      .click();
-
-    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
-    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
-    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "Save theme",
-    });
-
-    await groupInput.fill("Core"); // Invalid because "Core / Dark" theme already exists
-    await nameInput.fill("Dark");
-
-    await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
-    await expect(saveButton).toBeDisabled();
-
-    await groupInput.fill("Core"); // Valid because "Core / Light" theme already exists
-    await nameInput.fill("Light"); // but it's the same theme we are editing
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    await nameInput.fill("Changed Theme name"); // New names should be also valid
-    await groupInput.fill("Changed Group name");
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    expect(await nameInput.getAttribute("aria-invalid")).toBeNull();
-    expect(await nameInput.getAttribute("aria-describedby")).toBeNull();
-
-    const checkboxes = await tokenThemeUpdateCreateModal
-      .locator('[role="checkbox"]')
-      .all();
-
-    for (const checkbox of checkboxes) {
-      const isChecked = await checkbox.getAttribute("aria-checked");
-
-      if (isChecked === "true") {
-        await checkbox.click();
-      }
-    }
-
-    const firstButton = await tokenThemeUpdateCreateModal
-      .getByTestId("tokens-set-item")
-      .first();
-
-    await firstButton.click();
-
-    await expect(saveButton).not.toBeDisabled();
-
-    await saveButton.click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("Changed Theme name"),
-    ).toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("Changed Group name"),
-    ).toBeVisible();
-  });
-});

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

@@ -1,32 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { setupTokensFile, unfoldTokenTree } from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens - node tree", () => {
-  test("User fold/unfold color tokens", async ({ page }) => {
-    const { tokensSidebar } = await setupTokensFile(page);
-
-    await expect(tokensSidebar).toBeVisible();
-
-    const tokensColorGroup = tokensSidebar.getByRole("button", {
-      name: "Color 92",
-    });
-    await expect(tokensColorGroup).toBeVisible();
-    await tokensColorGroup.click();
-
-    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
-
-    const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
-    });
-    await expect(colorToken).toBeVisible();
-    await tokensColorGroup.click();
-    await expect(colorToken).not.toBeVisible();
-  });
-});

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

@@ -683,12 +683,24 @@
       (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 (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

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

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

@@ -280,8 +280,8 @@
 
 (mf/defc teams-selector-dropdown*
   {::mf/private true}
-  [{:keys [team profile teams] :rest props}]
-  (let [on-create-click
+  [{:keys [team profile teams show-default-team allow-create-teams allow-create-org] :rest props}]
+  (let [on-create-team-click
         (mf/use-fn #(st/emit! (modal/show :team-form {})))
 
         on-team-click
@@ -290,18 +290,25 @@
            (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)))))]
+             (st/emit! (dcm/go-to-dashboard-recent :team-id team-id)))))
+
+        on-create-org-click
+        (mf/use-fn
+         (fn []
+           ;; TODO update when org creation route is ready
+           (dom/open-new-window "localhost:3000/org/create")))]
 
     [:> dropdown-menu* props
 
-     [:> 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]
+     (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]
 
-      [: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
@@ -322,11 +329,19 @@
         (when (= (:id team-item) (:id team))
           tick-icon)])
 
-     [: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")]]]))
+     (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")]])]))
 
 (mf/defc team-options-dropdown*
   {::mf/private true}
@@ -476,9 +491,80 @@
                                 :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 [teams (mf/deref refs/teams)
+  (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)))
 
         subscription
         (get team :subscription)
@@ -586,7 +672,10 @@
                                    :class (stl/css :dropdown :teams-dropdown)
                                    :team team
                                    :profile profile
-                                   :teams teams}]
+                                   :teams teams
+                                   :show-default-team true
+                                   :allow-create-teams true
+                                   :allow-create-org false}]
 
      [:> team-options-dropdown* {:show show-team-options-menu?
                                  :on-close close-team-options-menu
@@ -703,6 +792,8 @@
     [:*
      [: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/controls/numeric_input.cljs

@@ -183,7 +183,6 @@
   [:map
    [:id {:optional true} :string]
    [:class {:optional true} :string]
-   [:inner-class {:optional true} :string]
    [:value {:optional true} [:maybe [:or
                                      :int
                                      :float
@@ -210,8 +209,7 @@
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder
-           icon disabled inner-class
+  [{:keys [id class value default placeholder icon disabled
            min max max-length step
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
@@ -626,7 +624,6 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
-                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -647,7 +644,7 @@
                                                                    :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
-                                              (mf/html [:> icon-button* {:variant "ghost"
+                                              (mf/html [:> icon-button* {:variant "action"
                                                                          :icon i/tokens
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
@@ -672,7 +669,6 @@
                               :on-token-key-down on-token-key-down
                               :disabled disabled
                               :on-blur on-blur
-                              :class inner-class
                               :slot-start (when icon
                                             (mf/html [:> tooltip*
                                                       {:content property

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

@@ -33,17 +33,12 @@
 }
 
 .invisible-button {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 0;
   opacity: var(--opacity-button);
-  background-color: var(--color-background-quaternary);
+
   &:hover {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs

@@ -26,7 +26,7 @@
   [:map
    [:id {:optional true} :string]
    [:resolved-value {:optional true}
-    [:or :int :string :float]]
+    [:or :int :string]]
    [:name {:optional true} :string]
    [:icon {:optional true} schema:icon-list]
    [:label {:optional true} :string]

frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss

@@ -30,11 +30,11 @@
 }
 
 .left-align {
-  left: var(--dropdown-offset, 0);
+  left: 0;
 }
 
 .right-align {
-  right: var(--dropdown-offset, 0);
+  right: 0;
 }
 
 .option-separator {

frontend/src/app/main/ui/ds/controls/shared/token_option.cljs

@@ -18,7 +18,7 @@
   [:map
    [:id {:optiona true} :string]
    [:ref some?]
-   [:resolved {:optional true} [:or :int :string :float]]
+   [:resolved {:optional true} [:or :int :string]]
    [:name {:optional true} :string]
    [:on-click {:optional true} fn?]
    [:selected {:optional true} :boolean]

frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs

@@ -17,7 +17,7 @@
 
 (def ^:private schema:input-field
   [:map
-   [:class {:optional true} [:maybe :string]]
+   [:class {:optional true} :string]
    [:aria-label {:optional true} [:maybe :string]]
    [:id :string]
    [:icon {:optional true}
@@ -44,10 +44,9 @@
         tooltip-id (mf/use-id)
 
         props (mf/spread-props props
-                               {:class [class
-                                        (stl/css-case
-                                         :input true
-                                         :input-with-icon (some? icon))]
+                               {:class (stl/css-case
+                                        :input true
+                                        :input-with-icon (some? icon))
                                 :ref (or ref input-ref)
                                 :aria-invalid (when (and has-hint
                                                          (= hint-type "error"))

frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs

@@ -19,7 +19,6 @@
 
 (def ^:private schema:token-field
   [:map
-   [:class {:optional true} [:maybe :string]]
    [:id {:optional true} [:maybe :string]]
    [:label {:optional true} [:maybe :string]]
    [:value :any]
@@ -33,7 +32,7 @@
 
 (mf/defc token-field*
   {::mf/schema schema:token-field}
-  [{:keys [id label value slot-start disabled class
+  [{:keys [id label value slot-start disabled
            on-click on-token-key-down on-blur detach-token
            token-wrapper-ref token-detach-btn-ref on-focus]}]
   (let [set-active? (some? id)
@@ -49,11 +48,14 @@
          (fn [event]
            (when-not ^boolean disabled
              (dom/prevent-default event)
-             (dom/focus! (mf/ref-val token-wrapper-ref)))))]
+             (dom/focus! (mf/ref-val token-wrapper-ref)))))
 
-    [:div {:class [class (stl/css-case :token-field true
-                                       :with-icon (some? slot-start)
-                                       :token-field-disabled disabled)]
+        class
+        (stl/css-case :token-field true
+                      :with-icon (some? slot-start)
+                      :token-field-disabled disabled)]
+
+    [:div {:class class
            :on-click focus-wrapper
            :disabled disabled
            :on-key-down on-token-key-down
@@ -78,7 +80,7 @@
          [:div {:class (stl/css :pill-dot)}])]]
 
      (when-not ^boolean disabled
-       [:> icon-button* {:variant "ghost"
+       [:> icon-button* {:variant "action"
                          :class (stl/css :invisible-button)
                          :icon i/broken-link
                          :ref token-detach-btn-ref

frontend/src/app/main/ui/ds/controls/utilities/token_field.scss

@@ -8,7 +8,6 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/typography.scss" as t;
 @use "ds/colors.scss" as *;
-@use "ds/mixins.scss" as *;
 
 .token-field {
   --token-field-bg-color: var(--color-background-tertiary);
@@ -17,7 +16,9 @@
   --token-field-outline-color: none;
   --token-field-height: var(--sp-xxxl);
   --token-field-margin: unset;
+
   display: grid;
+  grid-template-columns: 1fr auto;
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;
@@ -26,7 +27,6 @@
   border-radius: $br-8;
   padding: var(--sp-xs);
   outline: $b-1 solid var(--token-field-outline-color);
-  position: relative;
 
   &:hover {
     --token-field-bg-color: var(--color-background-quaternary);
@@ -39,7 +39,7 @@
 }
 
 .with-icon {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto 1fr auto;
 }
 
 .token-field-disabled {
@@ -57,17 +57,14 @@
   --pill-bg-color: var(--color-background-tertiary);
   --pill-fg-color: var(--color-token-foreground);
   @include t.use-typography("code-font");
-  @include textEllipsis;
-  display: block;
-  block-size: var(--sp-xxl);
-  inline-size: fit-content;
+  height: var(--sp-xxl);
+  width: fit-content;
   background: var(--pill-bg-color);
   cursor: pointer;
   border: $b-1 solid var(--pill-border-color);
   color: var(--pill-fg-color);
   border-radius: $br-6;
   padding-inline: $sz-6;
-  max-inline-size: 100%;
   &:hover {
     --pill-bg-color: var(--color-token-background);
     --pill-fg-color: var(--color-foreground-primary);
@@ -106,29 +103,24 @@
 }
 
 .pill-dot {
-  inline-size: $sz-6;
-  block-size: $sz-6;
+  width: $sz-6;
+  height: $sz-6;
   outline: var(--sp-xxs) solid var(--color-background-primary);
   border-radius: 50%;
   background-color: var(--color-foreground-error);
-  margin-inline-start: var(--sp-xs);
+  margin-left: var(--sp-xs);
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 0;
+  right: 0;
+  top: 0;
 }
 
 .invisible-button {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 0;
   opacity: var(--opacity-button);
-  background-color: var(--color-background-quaternary);
+
   &:hover {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

frontend/src/app/main/ui/ds/tooltip/tooltip.scss

@@ -159,6 +159,4 @@ $arrow-side: 12px;
   block-size: fit-content;
   inline-size: fit-content;
   line-height: 0;
-  display: grid;
-  max-width: 100%;
 }

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

@@ -3,15 +3,10 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.types.shape.radius :as ctsr]
-   [app.common.types.token :as tk]
    [app.main.data.workspace.shapes :as dwsh]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
-   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as hooks]
    [app.util.i18n :as i18n :refer [tr]]
@@ -26,17 +21,11 @@
 (defn- check-border-radius-menu-props
   [old-props new-props]
   (let [old-values (unchecked-get old-props "values")
-        new-values (unchecked-get new-props "values")
-        old-applied-tokens (unchecked-get old-props "appliedTokens")
-        new-applied-tokens (unchecked-get new-props "appliedTokens")]
+        new-values (unchecked-get new-props "values")]
     (and (identical? (unchecked-get old-props "class")
                      (unchecked-get new-props "class"))
          (identical? (unchecked-get old-props "ids")
                      (unchecked-get new-props "ids"))
-         (identical? (unchecked-get old-props "shapes")
-                     (unchecked-get new-props "shapes"))
-         (identical? old-applied-tokens
-                     new-applied-tokens)
          (identical? (get old-values :r1)
                      (get new-values :r1))
          (identical? (get old-values :r2)
@@ -46,114 +35,13 @@
          (identical? (get old-values :r4)
                      (get new-values :r4)))))
 
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach radius] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-
-        on-detach-attr
-        (mf/use-fn
-         (mf/deps on-detach name)
-         #(on-detach % name))
-
-        r1-value   (get applied-tokens :r1)
-        all-token-equal? (and (seq applied-tokens) (all-equal? applied-tokens))
-        all-values-equal? (all-equal? values)
-
-        applied-token (cond
-                        (not (seq applied-tokens))
-                        nil
-
-                        (and (= radius :all) (or (not all-values-equal?) (not all-token-equal?)))
-                        :multiple
-
-                        (and all-token-equal? all-values-equal? (= radius :all))
-                        r1-value
-
-                        :else
-                        (get applied-tokens radius))
-
-
-        placeholder (if (= radius :all)
-                      (cond
-                        (or (not all-values-equal?)
-                            (not all-token-equal?))
-                        (tr "settings.multiple")
-                        :else
-                        "--")
-
-                      (cond
-                        (or (= :multiple (:applied-tokens values))
-                            (= :multiple (get values name)))
-                        (tr "settings.multiple")
-                        :else
-                        "--"))
-
-
-        props  (mf/spread-props props
-                                {:placeholder placeholder
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :value values})]
-    [:> numeric-input* props]))
-
 (mf/defc border-radius-menu*
   {::mf/wrap [#(mf/memo' % check-border-radius-menu-props)]}
-  [{:keys [class ids values applied-tokens]}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        all-values-equal? (all-equal? values)
-
+  [{:keys [class ids values]}]
+  (let [all-equal?       (all-equal? values)
         radius-expanded* (mf/use-state false)
         radius-expanded  (deref radius-expanded*)
 
-        ;; DETACH
-        on-detach-token
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
-
-        on-detach-all
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (run! #(on-detach-token token %) [:r1 :r2 :r3 :r4])))
-
-        on-detach-r1
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (on-detach-token token :r1)))
-
-        on-detach-r2
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (on-detach-token token :r2)))
-
-        on-detach-r3
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (on-detach-token token :r3)))
-
-        on-detach-r4
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (on-detach-token token :r4)))
-
         change-radius
         (mf/use-fn
          (mf/deps ids)
@@ -166,54 +54,31 @@
                                {:reg-objects? true
                                 :attrs [:r1 :r2 :r3 :r4]})))
 
-        change-one-radius
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [update-fn attr]
-           (dwsh/update-shapes ids
-                               (fn [shape]
-                                 (if (ctsr/has-radius? shape)
-                                   (update-fn shape)
-                                   shape))
-                               {:reg-objects? true
-                                :attrs [attr]})))
-
         toggle-radius-mode
         (mf/use-fn
          (mf/deps radius-expanded)
          (fn []
            (swap! radius-expanded* not)))
 
-
-        on-all-radius-change
-        (mf/use-fn
-         (mf/deps change-radius ids)
-         (fn [value]
-           (if (or (string? value) (number? value))
-             (st/emit!
-              (change-radius (fn [shape]
-                               (ctsr/set-radius-to-all-corners shape value))))
-             (doseq [attr [:r1 :r2 :r3 :r4]]
-               (st/emit!
-                (dwta/toggle-token {:token     (first value)
-                                    :attrs     #{attr}
-                                    :shape-ids ids}))))))
-
-
         on-single-radius-change
         (mf/use-fn
-         (mf/deps change-one-radius ids)
-         (fn [value attr]
-           (if (or (string? value) (number? value))
-             (st/emit! (change-one-radius #(ctsr/set-radius-to-single-corner % attr value) attr))
-             (st/emit! (dwta/toggle-border-radius-token {:token (first value)
-                                                         :attrs #{attr}
-                                                         :shape-ids ids})))))
+         (mf/deps ids change-radius)
+         (fn [value]
+           (st/emit!
+            (change-radius (fn [shape]
+                             (ctsr/set-radius-to-all-corners shape value))))))
 
-        on-radius-r1-change #(on-single-radius-change % :r1)
-        on-radius-r2-change #(on-single-radius-change % :r2)
-        on-radius-r3-change #(on-single-radius-change % :r3)
-        on-radius-r4-change #(on-single-radius-change % :r4)
+
+        on-radius-4-change
+        (mf/use-fn
+         (mf/deps ids change-radius)
+         (fn [value attr]
+           (st/emit! (change-radius #(ctsr/set-radius-to-single-corner % attr value)))))
+
+        on-radius-r1-change #(on-radius-4-change % :r1)
+        on-radius-r2-change #(on-radius-4-change % :r2)
+        on-radius-r3-change #(on-radius-4-change % :r3)
+        on-radius-r4-change #(on-radius-4-change % :r4)
 
         expand-stream
         (mf/with-memo []
@@ -227,139 +92,58 @@
     (mf/with-effect [ids]
       (reset! radius-expanded* false))
 
-    [:section {:class (dm/str class " " (stl/css :radius))
-               :aria-label "border-radius-section"}
+    [:div {:class (dm/str class " " (stl/css :radius))}
      (if (not radius-expanded)
-       (if token-numeric-inputs
-         [:> numeric-input-wrapper*
-          {:on-change on-all-radius-change
-           :on-detach on-detach-all
-           :icon i/corner-radius
+       [:div {:class (stl/css :radius-1)
+              :title (tr "workspace.options.radius")}
+        [:> icon* {:icon-id i/corner-radius
+                   :size "s"
+                   :class (stl/css :icon)}]
+        [:> deprecated-input/numeric-input*
+         {:placeholder (cond
+                         (not all-equal?)
+                         (tr "settings.multiple")
+                         (= :multiple (:r1 values))
+                         (tr "settings.multiple")
+                         :else
+                         "--")
+          :min 0
+          :nillable true
+          :on-change on-single-radius-change
+          :value (if all-equal? (:r1 values) nil)}]]
+
+       [:div {:class (stl/css :radius-4)}
+        [:div {:class (stl/css :small-input)}
+         [:> deprecated-input/numeric-input*
+          {:placeholder "--"
+           :title (tr "workspace.options.radius-top-left")
            :min 0
-           :name :border-radius
-           :nillable true
-           :property (tr "workspace.options.radius")
-           :class (stl/css :radius-wrapper)
-           :applied-tokens applied-tokens
-           :radius :all
-           :align :right
-           :values (if all-values-equal?
-                     (if (nil? (:r1 values))
-                       0
-                       (:r1 values))
-                     nil)}]
+           :on-change on-radius-r1-change
+           :value (:r1 values)}]]
 
-         [:div {:class (stl/css :radius-1)
-                :title (tr "workspace.options.radius")}
-          [:> icon* {:icon-id i/corner-radius
-                     :size "s"
-                     :class (stl/css :icon)}]
-          [:> deprecated-input/numeric-input*
-           {:placeholder (cond
-                           (not all-values-equal?)
-                           (tr "settings.multiple")
-                           (= :multiple (:r1 values))
-                           (tr "settings.multiple")
-                           :else
-                           "--")
-            :min 0
-            :nillable true
-            :on-change on-all-radius-change
-            :value (if all-values-equal?
-                     (if (nil? (:r1 values))
-                       0
-                       (:r1 values))
-                     nil)}]])
+        [:div {:class (stl/css :small-input)}
+         [:> deprecated-input/numeric-input*
+          {:placeholder "--"
+           :title (tr "workspace.options.radius-top-right")
+           :min 0
+           :on-change on-radius-r2-change
+           :value (:r2 values)}]]
 
-       (if token-numeric-inputs
-         [:div {:class (stl/css :radius-4)}
-          [:> numeric-input-wrapper*
-           {:on-change on-radius-r1-change
-            :on-detach on-detach-r1
-            :min 0
-            :name :border-radius
-            :property (tr "workspace.options.radius-top-left")
-            :applied-tokens applied-tokens
-            :radius :r1
-            :align :right
-            :class (stl/css :radius-wrapper :dropdown-offset)
-            :inner-class (stl/css :no-icon-input)
-            :values  (:r1 values)}]
+        [:div {:class (stl/css :small-input)}
+         [:> deprecated-input/numeric-input*
+          {:placeholder "--"
+           :title (tr "workspace.options.radius-bottom-left")
+           :min 0
+           :on-change on-radius-r4-change
+           :value (:r4 values)}]]
 
-          [:> numeric-input-wrapper*
-           {:on-change on-radius-r2-change
-            :on-detach on-detach-r2
-            :min 0
-            :name :border-radius
-            :nillable true
-            :property (tr "workspace.options.radius-top-right")
-            :applied-tokens applied-tokens
-            :align :right
-            :class (stl/css :radius-wrapper)
-            :inner-class (stl/css :no-icon-input)
-            :radius :r2
-            :values (:r2 values)}]
-
-          [:> numeric-input-wrapper*
-           {:on-change on-radius-r4-change
-            :on-detach on-detach-r4
-            :min 0
-            :name :border-radius
-            :nillable true
-            :property (tr "workspace.options.radius-bottom-left")
-            :applied-tokens applied-tokens
-            :class (stl/css :radius-wrapper :dropdown-offset)
-            :inner-class (stl/css :no-icon-input)
-            :radius :r4
-            :align :right
-            :values (:r4 values)}]
-
-          [:> numeric-input-wrapper*
-           {:on-change on-radius-r3-change
-            :on-detach on-detach-r3
-            :min 0
-            :name :border-radius
-            :nillable true
-            :property (tr "workspace.options.radius-bottom-right")
-            :applied-tokens applied-tokens
-            :radius :r3
-            :align :right
-            :class (stl/css :radius-wrapper)
-            :inner-class (stl/css :no-icon-input)
-            :values (:r3 values)}]]
-
-         [:div {:class (stl/css :radius-4)}
-          [:div {:class (stl/css :small-input)}
-           [:> deprecated-input/numeric-input*
-            {:placeholder "--"
-             :title (tr "workspace.options.radius-top-left")
-             :min 0
-             :on-change on-radius-r1-change
-             :value (:r1 values)}]]
-
-          [:div {:class (stl/css :small-input)}
-           [:> deprecated-input/numeric-input*
-            {:placeholder "--"
-             :title (tr "workspace.options.radius-top-right")
-             :min 0
-             :on-change on-radius-r2-change
-             :value (:r2 values)}]]
-
-          [:div {:class (stl/css :small-input)}
-           [:> deprecated-input/numeric-input*
-            {:placeholder "--"
-             :title (tr "workspace.options.radius-bottom-left")
-             :min 0
-             :on-change on-radius-r4-change
-             :value (:r4 values)}]]
-
-          [:div {:class (stl/css :small-input)}
-           [:> deprecated-input/numeric-input*
-            {:placeholder "--"
-             :title (tr "workspace.options.radius-bottom-right")
-             :min 0
-             :on-change on-radius-r3-change
-             :value (:r3 values)}]]]))
+        [:div {:class (stl/css :small-input)}
+         [:> deprecated-input/numeric-input*
+          {:placeholder "--"
+           :title (tr "workspace.options.radius-bottom-right")
+           :min 0
+           :on-change on-radius-r3-change
+           :value (:r3 values)}]]])
 
      [:> icon-button* {:variant "ghost"
                        :on-click toggle-radius-mode

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

@@ -5,8 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/typography" as t;
-@use "ds/_utils.scss" as *;
 
 .radius {
   display: grid;
@@ -16,7 +14,7 @@
 
 .radius-1 {
   @extend .input-element;
-  @include t.use-typography("body-small");
+  @include deprecated.bodySmallTypography;
 }
 
 .radius-4 {
@@ -27,27 +25,9 @@
 
 .small-input {
   @extend .input-element;
-  @include t.use-typography("body-small");
-}
-
-.selected {
-  border-color: var(--button-icon-border-color-selected);
-  background-color: var(--button-icon-background-color-selected);
-  color: var(--color-accent-primary);
+  @include deprecated.bodySmallTypography;
 }
 
 .icon {
-  margin-inline: var(--sp-xs);
-}
-
-.radius-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
-.no-icon-input {
-  padding-inline-start: px2rem(6);
-}
-
-.dropdown-offset {
-  --dropdown-offset: #{px2rem(-65)};
+  margin-inline: deprecated.$s-4;
 }

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

@@ -507,7 +507,7 @@
 
                    mdata     {:on-error #(do
                                            (reset! key* (uuid/next))
-                                           (st/emit! (ntf/warn error-msg)))}
+                                           (st/emit! (ntf/error error-msg)))}
                    params    {:shapes shapes :pos pos :val val}]
                (st/emit! (dwv/variants-switch (with-meta params mdata)))))))
 

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

@@ -78,7 +78,7 @@
                                                       (nil? (get values name)))
                                                 (tr "settings.multiple")
                                                 "--")
-                                 :class (stl/css :numeric-input-layout)
+                                 :class (stl/css :numeric-input-measures)
                                  :applied-token (get applied-tokens name)
                                  :tokens tokens
                                  :align align

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

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

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

@@ -600,7 +600,10 @@
           [:> border-radius-menu* {:class (stl/css :border-radius)
                                    :ids ids
                                    :values values
-                                   :applied-tokens applied-tokens}])])
+                                   :applied-tokens applied-tokens
+                                   :shapes shapes
+                                   :shape shape}])])
+
      (when (or (options :clip-content)
                (options :show-in-viewer))
        [:div {:class (stl/css :clip-show)}

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

@@ -6,7 +6,6 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
-@use "ds/_utils.scss" as *;
 
 .element-set {
   display: grid;
@@ -157,6 +156,7 @@
   gap: deprecated.$s-4;
 }
 
+// TODO: Add a proper variable to this sizing
 .numeric-input-measures {
   --dropdown-width: var(--7-columns-dropdown-width);
 }

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

@@ -223,6 +223,7 @@
             (cond
               (= existing ::not-found) (assoc acc t-attr new-val)
               (= existing new-val)     acc
+              (nil? new-val)           acc
               :else                    (assoc acc t-attr :multiple))))
 
         merge-shape-attr
@@ -236,8 +237,10 @@
         (fn [acc shape-attrs applied-tokens]
           "Merges token values across all shape attributes.
            For each shape attribute, its corresponding token attributes are merged
-           into the accumulator."
-          (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs))
+           into the accumulator. If applied tokens are empty, the accumulator is returned unchanged."
+          (if (seq applied-tokens)
+            (reduce #(merge-shape-attr %1 applied-tokens %2) acc shape-attrs)
+            acc))
 
         extract-attrs
         (fn [[ids values token-acc] {:keys [id type applied-tokens] :as shape}]

frontend/translations/en.po

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

frontend/translations/es.po

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