Revert "✨ Add regression test for token highlight bug (13302) (#8573)"

This reverts commit d8249cc3db.
2026-03-25 04:40:40 +01:00 · 2026-03-13 11:14:06 +01:00
parent 6d30989a2d
commit fc64dfe9d6
12 changed files with 198 additions and 699 deletions
--- a/frontend/playwright/data/get-teams-tokens.json
+++ b/frontend/playwright/data/get-teams-tokens.json
@@ -0,0 +1,26 @@
+[
+  {
+    "~:features": {
+      "~#set": [
+        "design-tokens/v1",
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Default",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f7920a",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": true
+  }
+]
--- a/frontend/playwright/data/tokens/get-file-13302.json
+++ b/frontend/playwright/data/tokens/get-file-13302.json
@@ -1,206 +0,0 @@
-{
-  "~:features": {
-    "~#set": [
-      "fdata/path-data",
-      "plugins/runtime",
-      "design-tokens/v1",
-      "variants/v1",
-      "layout/grid",
-      "styles/v2",
-      "fdata/objects-map",
-      "render-wasm/v1",
-      "components/v2",
-      "fdata/shape-data-type"
-    ]
-  },
-  "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
-  "~:permissions": {
-    "~:type": "~:membership",
-    "~:is-owner": true,
-    "~:is-admin": true,
-    "~:can-edit": true,
-    "~:can-read": true,
-    "~:is-logged": true
-  },
-  "~:has-media-trimmed": false,
-  "~:comment-thread-seqn": 0,
-  "~:name": "BUG 13302 - Token highlight",
-  "~:revn": 13,
-  "~:modified-at": "~m1770721633482",
-  "~:vern": 0,
-  "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
-  "~:is-shared": false,
-  "~:migrations": {
-    "~#ordered-set": [
-      "legacy-2",
-      "legacy-3",
-      "legacy-5",
-      "legacy-6",
-      "legacy-7",
-      "legacy-8",
-      "legacy-9",
-      "legacy-10",
-      "legacy-11",
-      "legacy-12",
-      "legacy-13",
-      "legacy-14",
-      "legacy-16",
-      "legacy-17",
-      "legacy-18",
-      "legacy-19",
-      "legacy-25",
-      "legacy-26",
-      "legacy-27",
-      "legacy-28",
-      "legacy-29",
-      "legacy-31",
-      "legacy-32",
-      "legacy-33",
-      "legacy-34",
-      "legacy-36",
-      "legacy-37",
-      "legacy-38",
-      "legacy-39",
-      "legacy-40",
-      "legacy-41",
-      "legacy-42",
-      "legacy-43",
-      "legacy-44",
-      "legacy-45",
-      "legacy-46",
-      "legacy-47",
-      "legacy-48",
-      "legacy-49",
-      "legacy-50",
-      "legacy-51",
-      "legacy-52",
-      "legacy-53",
-      "legacy-54",
-      "legacy-55",
-      "legacy-56",
-      "legacy-57",
-      "legacy-59",
-      "legacy-62",
-      "legacy-65",
-      "legacy-66",
-      "legacy-67",
-      "0001-remove-tokens-from-groups",
-      "0002-normalize-bool-content-v2",
-      "0002-clean-shape-interactions",
-      "0003-fix-root-shape",
-      "0003-convert-path-content-v2",
-      "0005-deprecate-image-type",
-      "0006-fix-old-texts-fills",
-      "0008-fix-library-colors-v4",
-      "0009-clean-library-colors",
-      "0009-add-partial-text-touched-flags",
-      "0010-fix-swap-slots-pointing-non-existent-shapes",
-      "0011-fix-invalid-text-touched-flags",
-      "0012-fix-position-data",
-      "0013-fix-component-path",
-      "0013-clear-invalid-strokes-and-fills",
-      "0014-fix-tokens-lib-duplicate-ids",
-      "0014-clear-components-nil-objects",
-      "0015-fix-text-attrs-blank-strings",
-      "0015-clean-shadow-color",
-      "0016-copy-fills-from-position-data-to-text-node"
-    ]
-  },
-  "~:version": 67,
-  "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
-  "~:created-at": "~m1770719668044",
-  "~:backend": "legacy-db",
-  "~:data": {
-    "~:pages": [
-      "~u6886b62b-1979-8195-8007-8d0b92d3116b"
-    ],
-    "~:pages-index": {
-      "~u6886b62b-1979-8195-8007-8d0b92d3116b": {
-        "~:objects": {
-          "~#penpot/objects-map/v2": {
-            "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ud601cd4c-f774-802c-8007-8d0c13228bba\"]]]",
-            "~ud601cd4c-f774-802c-8007-8d0c13228bba": "[\"~#shape\",[\"^ \",\"~:y\",79.00000276416532,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",100.00000353902578,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",178.9999994188543]],[\"^<\",[\"^ \",\"~:x\",0,\"~:y\",178.9999994188543]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ud601cd4c-f774-802c-8007-8d0c13228bba\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:applied-tokens\",[\"^ \"],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",79.00000276416532,\"^8\",100.00000353902578,\"~:height\",99.99999665468899,\"~:x1\",0,\"~:y1\",79.00000276416532,\"~:x2\",100.00000353902578,\"~:y2\",178.99999941885432]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",99.99999665468899,\"~:flip-y\",null]]"
-          }
-        },
-        "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-        "~:name": "Page 1"
-      }
-    },
-    "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
-    "~:options": {
-      "~:components-v2": true,
-      "~:base-font-size": "16px"
-    },
-    "~:tokens-lib": {
-      "~#penpot/tokens-lib": {
-        "~:sets": {
-          "~#ordered-map": [
-            [
-              "S-Global",
-              {
-                "~#penpot/token-set": {
-                  "~:id": "~u7b395852-8f6b-8027-8007-8d0bb31bd9d9",
-                  "~:name": "Global",
-                  "~:description": "",
-                  "~:modified-at": "~m1770719731235",
-                  "~:tokens": {
-                    "~#ordered-map": [
-                      [
-                        "any-dimensions-token",
-                        {
-                          "~#penpot/token": {
-                            "~:id": "~u7b395852-8f6b-8027-8007-8d0bb31b8a10",
-                            "~:name": "any-dimensions-token",
-                            "~:type": "~:dimensions",
-                            "~:value": "256",
-                            "~:description": "",
-                            "~:modified-at": "~m1770719731235"
-                          }
-                        }
-                      ]
-                    ]
-                  }
-                }
-              }
-            ]
-          ]
-        },
-        "~:themes": {
-          "~#ordered-map": [
-            [
-              "",
-              {
-                "~#ordered-map": [
-                  [
-                    "__PENPOT__HIDDEN__TOKEN__THEME__",
-                    {
-                      "~#penpot/token-theme": {
-                        "~:id": "~u00000000-0000-0000-0000-000000000000",
-                        "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__",
-                        "~:group": "",
-                        "~:description": "",
-                        "~:is-source": false,
-                        "~:external-id": "",
-                        "~:modified-at": "~m1770719704149",
-                        "~:sets": {
-                          "~#set": [
-                            "Global"
-                          ]
-                        }
-                      }
-                    }
-                  ]
-                ]
-              }
-            ]
-          ]
-        },
-        "~:active-themes": {
-          "~#set": [
-            "/__PENPOT__HIDDEN__TOKEN__THEME__"
-          ]
-        }
-      }
-    }
-  }
-}
--- a/frontend/playwright/data/tokens/update-file-13302.json
+++ b/frontend/playwright/data/tokens/update-file-13302.json
@@ -1,338 +0,0 @@
-{
-  "~:revn": 11,
-  "~:lagged": [
-    {
-      "~:id": "~u6886b62b-1979-8195-8007-8d12e2ccd0f1",
-      "~:revn": 11,
-      "~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
-      "~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e",
-      "~:changes": [
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:width",
-              "~:val": 100.00000353902578,
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:points",
-              "~:val": [
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 79.00000333786011
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 100.00000353902578,
-                    "~:y": 79.00000333786011
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 100.00000353902578,
-                    "~:y": 335.00001430511475
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 335.00001430511475
-                  }
-                }
-              ],
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:selrect",
-              "~:val": {
-                "~#rect": {
-                  "~:x": 0,
-                  "~:y": 79.00000333786011,
-                  "~:width": 100.00000353902578,
-                  "~:height": 256.00001096725464,
-                  "~:x1": 0,
-                  "~:y1": 79.00000333786011,
-                  "~:x2": 100.00000353902578,
-                  "~:y2": 335.00001430511475
-                }
-              },
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            }
-          ]
-        },
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:applied-tokens",
-              "~:val": {
-                "~:height": "any-dimensions-token"
-              },
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            }
-          ]
-        },
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:y",
-              "~:val": 79.00000276416532,
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:points",
-              "~:val": [
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 79.0000027641653
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 100.00000353902578,
-                    "~:y": 79.0000027641653
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 100.00000353902578,
-                    "~:y": 178.9999994188543
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 178.9999994188543
-                  }
-                }
-              ],
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:selrect",
-              "~:val": {
-                "~#rect": {
-                  "~:x": 0,
-                  "~:y": 79.00000276416532,
-                  "~:width": 100.00000353902578,
-                  "~:height": 99.99999665468899,
-                  "~:x1": 0,
-                  "~:y1": 79.00000276416532,
-                  "~:x2": 100.00000353902578,
-                  "~:y2": 178.99999941885432
-                }
-              },
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:height",
-              "~:val": 99.99999665468899,
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            }
-          ]
-        },
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:applied-tokens",
-              "~:val": {},
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "~:id": "~u6886b62b-1979-8195-8007-8d12e996895c",
-      "~:revn": 12,
-      "~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
-      "~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e",
-      "~:changes": [
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:applied-tokens",
-              "~:val": {
-                "~:width": "any-dimensions-token",
-                "~:height": "any-dimensions-token"
-              },
-              "~:ignore-geometry": false,
-              "~:ignore-touched": false
-            }
-          ]
-        },
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:width",
-              "~:val": 256.0000033378599,
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:points",
-              "~:val": [
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 79.0000027641653
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 256.0000033378599,
-                    "~:y": 79.0000027641653
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 256.0000033378599,
-                    "~:y": 178.9999994188543
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 178.9999994188543
-                  }
-                }
-              ],
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:selrect",
-              "~:val": {
-                "~#rect": {
-                  "~:x": 0,
-                  "~:y": 79.00000276416532,
-                  "~:width": 256.0000033378599,
-                  "~:height": 99.99999665468899,
-                  "~:x1": 0,
-                  "~:y1": 79.00000276416532,
-                  "~:x2": 256.0000033378599,
-                  "~:y2": 178.99999941885432
-                }
-              },
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            }
-          ]
-        },
-        {
-          "~:type": "~:mod-obj",
-          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
-          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
-          "~:operations": [
-            {
-              "~:type": "~:set",
-              "~:attr": "~:y",
-              "~:val": 79.00000826835657,
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:points",
-              "~:val": [
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 79.00000826835657
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 256.0000033378599,
-                    "~:y": 79.00000826835657
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 256.0000033378599,
-                    "~:y": 335.0000178241718
-                  }
-                },
-                {
-                  "~#point": {
-                    "~:x": 0,
-                    "~:y": 335.0000178241718
-                  }
-                }
-              ],
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:selrect",
-              "~:val": {
-                "~#rect": {
-                  "~:x": 0,
-                  "~:y": 79.00000826835657,
-                  "~:width": 256.0000033378599,
-                  "~:height": 256.0000095558152,
-                  "~:x1": 0,
-                  "~:y1": 79.00000826835657,
-                  "~:x2": 256.0000033378599,
-                  "~:y2": 335.0000178241718
-                }
-              },
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            },
-            {
-              "~:type": "~:set",
-              "~:attr": "~:height",
-              "~:val": 256.0000095558152,
-              "~:ignore-geometry": false,
-              "~:ignore-touched": true
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
--- a/frontend/playwright/ui/specs/tokens/apply.spec.js
+++ b/frontend/playwright/ui/specs/tokens/apply.spec.js
@@ -1,4 +1,5 @@
 import { test, expect } from "@playwright/test";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
 import {
  setupTokensFileRender,
@@ -8,9 +9,7 @@ import {

 test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.init(page);
-  await WasmWorkspacePage.mockConfigFlags(page, [
-    "enable-feature-design-tokens-v1",
-  ]);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 test.describe("Tokens: Apply token", () => {
@@ -31,7 +30,7 @@ test.describe("Tokens: Apply token", () => {
    unfoldTokenTree(tokensSidebar, "color", "colors.black");

    await tokensSidebar
-      .getByRole("checkbox", { name: "black" })
+      .getByRole("button", { name: "black" })
      .click({ button: "right" });
    await tokenContextMenuForToken.getByText("Fill").click();

@@ -63,12 +62,12 @@ test.describe("Tokens: Apply token", () => {
    ).toBeVisible();
    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
    await expect(
-      tokensSidebar.getByRole("checkbox", { name: "borderRadius.sm" }),
+      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
    ).toBeVisible();

    // Apply border radius token from token panels
    await tokensSidebar
-      .getByRole("checkbox", { name: "borderRadius.sm" })
+      .getByRole("button", { name: "borderRadius.sm" })
      .click();

    // Check if border radius sections is visible on right sidebar
@@ -107,7 +106,7 @@ test.describe("Tokens: Apply token", () => {
  test("User applies opacity token to a shape from sidebar", async ({
    page,
  }) => {
-    const { workspacePage, tokensSidebar } =
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
      await setupTokensFileRender(page);

    await page.getByRole("tab", { name: "Layers" }).click();
@@ -127,11 +126,11 @@ test.describe("Tokens: Apply token", () => {
      .getByRole("button", { name: "opacity", exact: true })
      .click();
    await expect(
-      tokensSidebar.getByRole("checkbox", { name: "opacity.high" }),
+      tokensSidebar.getByRole("button", { name: "opacity.high" }),
    ).toBeVisible();

    // Apply opacity token from token panels
-    await tokensSidebar.getByRole("checkbox", { name: "opacity.high" }).click();
+    await tokensSidebar.getByRole("button", { name: "opacity.high" }).click();

    // Check if opacity sections is visible on right sidebar
    const layerMenuSection = page.getByRole("region", {
@@ -171,7 +170,8 @@ test.describe("Tokens: Apply token", () => {
  });

  test("User applies typography token to a text shape", async ({ page }) => {
-    const { workspacePage, tokensSidebar } = await setupTypographyTokensFileRender(page);
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTypographyTokensFileRender(page);

    await page.getByRole("tab", { name: "Layers" }).click();

@@ -188,7 +188,7 @@ test.describe("Tokens: Apply token", () => {
      .filter({ hasText: "Typography" })
      .click();

-    await tokensSidebar.getByRole("checkbox", { name: "Full" }).click();
+    await tokensSidebar.getByRole("button", { name: "Full" }).click();

    const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
      name: "Font Size",
@@ -204,6 +204,7 @@ test.describe("Tokens: Apply token", () => {
      tokensUpdateCreateModal,
      tokensSidebar,
      workspacePage,
+      tokenContextMenuForToken,
    } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] });

    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -467,7 +468,7 @@ test.describe("Tokens: Apply token", () => {
      unfoldTokenTree(tokensSidebar, "shadow", "primary");

      // Verify token appears in sidebar
-      const shadowToken = tokensSidebar.getByRole("checkbox", {
+      const shadowToken = tokensSidebar.getByRole("button", {
        name: "primary",
      });
      await expect(shadowToken).toBeEnabled();
@@ -489,7 +490,8 @@ test.describe("Tokens: Apply token", () => {
  test("User applies dimension token to a shape on width and height", async ({
    page,
  }) => {
-    const { workspacePage, tokensSidebar } = await setupTokensFileRender(page);
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFileRender(page);

    // Unfolds dimensions on token panel
    await page.getByRole("tab", { name: "Layers" }).click();
@@ -502,7 +504,7 @@ test.describe("Tokens: Apply token", () => {
    unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");

    // Apply token to width and height token from token panel
-    await tokensSidebar.getByRole("checkbox", { name: "dimension.sm" }).click();
+    await tokensSidebar.getByRole("button", { name: "dimension.sm" }).click();

    // Check if measures sections is visible on right sidebar
    const measuresSection = page.getByRole("region", {
@@ -556,7 +558,7 @@ test.describe("Tokens: Apply token", () => {

    // Apply token to width and height token from token panel
    await tokensSidebar
-      .getByRole("checkbox", { name: "dimension.sm" })
+      .getByRole("button", { name: "dimension.sm" })
      .click({ button: "right" });
    await tokenContextMenuForToken.getByText("AxisX").click();

@@ -612,7 +614,7 @@ test.describe("Tokens: Apply token", () => {

    // Apply token to width and height token from token panel
    await tokensSidebar
-      .getByRole("checkbox", { name: "dimension.sm" })
+      .getByRole("button", { name: "dimension.sm" })
      .click({ button: "right" });
    await tokenContextMenuForToken.getByText("Y").click();

@@ -668,7 +670,7 @@ test.describe("Tokens: Apply token", () => {

    // Apply token to width and height token from token panel
    await tokensSidebar
-      .getByRole("checkbox", { name: "dimension.xs" })
+      .getByRole("button", { name: "dimension.xs" })
      .click({ button: "right" });
    await tokenContextMenuForToken.getByText("Border radius").hover();
    await tokenContextMenuForToken.getByText("RadiusAll").click();
@@ -730,9 +732,9 @@ test.describe("Tokens: Apply token", () => {
    await page.getByRole("button", { name: "Stroke Width 2" }).click();
    const tokensSidebar = workspace.tokensSidebar;
    await expect(
-      tokensSidebar.getByRole("checkbox", { name: "width-big" }),
+      tokensSidebar.getByRole("button", { name: "width-big" }),
    ).toBeVisible();
-    await tokensSidebar.getByRole("checkbox", { name: "width-big" }).click();
+    await tokensSidebar.getByRole("button", { name: "width-big" }).click();

    // Check if token pill is visible on right sidebar
    const strokeSectionSidebar = rightSidebar.getByRole("region", {
@@ -741,17 +743,17 @@ test.describe("Tokens: Apply token", () => {
    await expect(strokeSectionSidebar).toBeVisible();
    const firstStrokeRow = strokeSectionSidebar.getByLabel("stroke-row-0");
    await expect(firstStrokeRow).toBeVisible();
-    const strokeWidthPill = firstStrokeRow.getByRole("button", {
+    const StrokeWidthPill = firstStrokeRow.getByRole("button", {
      name: "width-big",
    });
-    await expect(strokeWidthPill).toBeVisible();
+    await expect(StrokeWidthPill).toBeVisible();

    // Detach token from right sidebar and apply another from dropdown
    const detachButton = firstStrokeRow.getByRole("button", {
      name: "Detach token",
    });
    await detachButton.click();
-    await expect(strokeWidthPill).not.toBeVisible();
+    await expect(StrokeWidthPill).not.toBeVisible();

    const tokenDropdown = firstStrokeRow.getByRole("button", {
      name: "Open token list",
@@ -763,10 +765,10 @@ test.describe("Tokens: Apply token", () => {
    });
    await expect(widthOptionSmall).toBeVisible();
    await widthOptionSmall.click();
-    const strokeWidthPillSmall = firstStrokeRow.getByRole("button", {
+    const StrokeWidthPillSmall = firstStrokeRow.getByRole("button", {
      name: "width-small",
    });
-    await expect(strokeWidthPillSmall).toBeVisible();
+    await expect(StrokeWidthPillSmall).toBeVisible();
  });

  test("User applies margin token to a shape", async ({ page }) => {
@@ -800,10 +802,10 @@ test.describe("Tokens: Apply token", () => {
    await page.getByRole("button", { name: "dim", exact: true }).click();
    const tokensSidebar = workspace.tokensSidebar;
    await expect(
-      tokensSidebar.getByRole("checkbox", { name: "dim.md" }),
+      tokensSidebar.getByRole("button", { name: "dim.md" }),
    ).toBeVisible();
    await tokensSidebar
-      .getByRole("checkbox", { name: "dim.md" })
+      .getByRole("button", { name: "dim.md" })
      .click({ button: "right" });
    await page
      .getByTestId("tokens-context-menu-for-token")
@@ -856,7 +858,8 @@ test.describe("Tokens: Detach token", () => {
  test("User applies border-radius token to a shape from sidebar", async ({
    page,
  }) => {
-    const { workspacePage, tokensSidebar } = await setupTokensFileRender(page);
+    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFileRender(page);

    await page.getByRole("tab", { name: "Layers" }).click();

@@ -873,12 +876,12 @@ test.describe("Tokens: Detach token", () => {
    ).toBeVisible();
    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
    await expect(
-      tokensSidebar.getByRole("checkbox", { name: "borderRadius.sm" }),
+      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
    ).toBeVisible();

    // Apply border radius token from token panels
    await tokensSidebar
-      .getByRole("checkbox", { name: "borderRadius.sm" })
+      .getByRole("button", { name: "borderRadius.sm" })
      .click();

    // Check if border radius sections is visible on right sidebar
@@ -896,7 +899,7 @@ test.describe("Tokens: Detach token", () => {

    // Rename token
    await tokensSidebar
-      .getByRole("checkbox", { name: "borderRadius.sm" })
+      .getByRole("button", { name: "borderRadius.sm" })
      .click({ button: "right" });
    await expect(page.getByText("Edit token")).toBeVisible();
    await page.getByText("Edit token").click();
--- a/frontend/playwright/ui/specs/tokens/crud.spec.js
+++ b/frontend/playwright/ui/specs/tokens/crud.spec.js
@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import {
  setupEmptyTokensFileRender,
  setupTokensFileRender,
@@ -10,9 +11,7 @@ import {

 test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.init(page);
-  await WasmWorkspacePage.mockConfigFlags(page, [
-    "enable-feature-design-tokens-v1",
-  ]);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 test.describe("Tokens - creation", () => {
@@ -38,7 +37,7 @@ test.describe("Tokens - creation", () => {
    const missingReferenceError = "Missing token references";

    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFileRender(page , {
+      await setupEmptyTokensFileRender(page, {
        flags: ["enable-token-combobox", "enable-feature-token-input"],
      });

@@ -85,7 +84,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole('checkbox', { name: 'my-token' }),
+      tokensTabPanel.getByRole('button', { name: 'my-token' }),
    ).toBeEnabled();

    // Create second token referencing the first one using the combobox options
@@ -331,14 +330,14 @@ test.describe("Tokens - creation", () => {
    await submitButton.press("Enter");

    await expect(
-      tokensSidebar.getByRole("checkbox", {
+      tokensSidebar.getByRole("button", {
        name: "secondary",
      }),
    ).toBeEnabled();

    // Tokens tab panel should have two tokens with the color red / #ff0000
    await expect(
-      tokensSidebar.getByRole("checkbox", { name: "#ff0000" }),
+      tokensSidebar.getByRole("button", { name: "#ff0000" }),
    ).toHaveCount(2);

    // Global set has been auto created and is active
@@ -479,7 +478,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -520,7 +519,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();

    //
@@ -537,7 +536,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-3" }),
    ).toBeEnabled();
  });

@@ -633,7 +632,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -653,7 +652,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();

    //
@@ -673,7 +672,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-3" }),
    ).toBeEnabled();
  });

@@ -684,7 +683,8 @@ test.describe("Tokens - creation", () => {
    const selfReferenceError = "Token has self reference";
    const missingReferenceError = "Missing token references";

-    const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+      await setupEmptyTokensFileRender(page);

    // Open modal
    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -768,7 +768,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -788,7 +788,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();
  });

@@ -799,7 +799,7 @@ test.describe("Tokens - creation", () => {
    const selfReferenceError = "Token has self reference";
    const missingReferenceError = "Missing token references";

-    const { tokensUpdateCreateModal } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
      await setupEmptyTokensFileRender(page);

    // Open modal
@@ -886,7 +886,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -906,14 +906,14 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();
  });

  test("User creates shadow token", async ({ page }) => {
    const emptyNameError = "Name should be at least 1 character";

-    const { tokensUpdateCreateModal } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
      await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] });

    // Open modal
@@ -1050,7 +1050,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -1087,14 +1087,14 @@ test.describe("Tokens - creation", () => {
    await expect(submitButton).toBeEnabled();
    await submitButton.click();
    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();
  });

-  test("User can't submit empty typography token or reference", async ({
+  test("User cant submit empty typography token or reference", async ({
    page,
  }) => {
-    const { tokensUpdateCreateModal } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
      await setupTypographyTokensFileRender(page);

    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1129,7 +1129,7 @@ test.describe("Tokens - creation", () => {
  test("User creates shadow token with negative spread", async ({ page }) => {
    const emptyNameError = "Name should be at least 1 character";

-    const { tokensUpdateCreateModal } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
      await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] });

    // Open modal
@@ -1271,7 +1271,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -1308,13 +1308,14 @@ test.describe("Tokens - creation", () => {
    await expect(submitButton).toBeEnabled();
    await submitButton.click();
    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();
  });

  test("User creates typography token", async ({ page }) => {
    const emptyNameError = "Name should be at least 1 character";
-    const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+      await setupEmptyTokensFileRender(page);

    // Open modal
    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1514,7 +1515,7 @@ test.describe("Tokens - creation", () => {
    await submitButton.click();

    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
    ).toBeEnabled();

    //
@@ -1555,12 +1556,12 @@ test.describe("Tokens - creation", () => {
    await expect(submitButton).toBeEnabled();
    await submitButton.click();
    await expect(
-      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
    ).toBeEnabled();
  });

  test("User adds typography token with reference", async ({ page }) => {
-    const { tokensUpdateCreateModal, tokensSidebar } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
      await setupTypographyTokensFileRender(page);

    const newTokenTitle = "NewReference";
@@ -1602,7 +1603,7 @@ test.describe("Tokens - creation", () => {

    await expect(tokensUpdateCreateModal).not.toBeVisible();

-    const newToken = tokensSidebar.getByRole("checkbox", {
+    const newToken = tokensSidebar.getByRole("button", {
      name: newTokenTitle,
    });

@@ -1610,7 +1611,7 @@ test.describe("Tokens - creation", () => {
  });

  test("User creates grouped color token", async ({ page }) => {
-    const { tokensUpdateCreateModal, tokensSidebar } =
+    const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
      await setupEmptyTokensFileRender(page);

    await tokensSidebar
@@ -1641,7 +1642,7 @@ test.describe("Tokens - creation", () => {
    await expect(tokensSidebar.getByLabel("primary")).toBeEnabled();
  });

-  test("User can't create regular token with value missing", async ({
+  test("User cant create regular token with value missing", async ({
    page,
  }) => {
    const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
@@ -1668,6 +1669,29 @@ test.describe("Tokens - creation", () => {
    // Submit button should remain disabled when value is empty
    await expect(submitButton).toBeDisabled();
  });
+
+  test("User duplicate color token", async ({ page }) => {
+    const { tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFileRender(page);
+
+    await expect(tokensSidebar).toBeVisible();
+
+    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+
+    const colorToken = tokensSidebar.getByRole("button", {
+      name: "100",
+    });
+
+    await colorToken.click({ button: "right" });
+    await expect(tokenContextMenuForToken).toBeVisible();
+
+    await tokenContextMenuForToken.getByText("Duplicate token").click();
+    await expect(tokenContextMenuForToken).not.toBeVisible();
+
+    await expect(
+      tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
+    ).toBeVisible();
+  });
 });

 test("User creates grouped color token", async ({ page }) => {
@@ -1726,7 +1750,7 @@ test("User cant create regular token with value missing", async ({ page }) => {
  await expect(submitButton).toBeDisabled();
 });

-test("User duplicates color token", async ({ page }) => {
+test("User duplicate color token", async ({ page }) => {
  const { tokensSidebar, tokenContextMenuForToken } =
    await setupTokensFileRender(page);

@@ -1734,7 +1758,7 @@ test("User duplicates color token", async ({ page }) => {

  unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");

-  const colorToken = tokensSidebar.getByRole("checkbox", {
+  const colorToken = tokensSidebar.getByRole("button", {
    name: "100",
  });

@@ -1745,7 +1769,7 @@ test("User duplicates color token", async ({ page }) => {
  await expect(tokenContextMenuForToken).not.toBeVisible();

  await expect(
-    tokensSidebar.getByRole("checkbox", { name: "colors.blue.100-copy" }),
+    tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
  ).toBeVisible();
 });

@@ -1753,7 +1777,7 @@ test.describe("Tokens tab - edition", () => {
  test("User edits typography token and all fields are valid", async ({
    page,
  }) => {
-    const { tokensUpdateCreateModal, tokensSidebar } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
      await setupTypographyTokensFileRender(page);

    await tokensSidebar
@@ -1762,7 +1786,7 @@ test.describe("Tokens tab - edition", () => {
      .click();

    // Open edit modal for "Full" typography token
-    const token = tokensSidebar.getByRole("checkbox", { name: "Full" });
+    const token = tokensSidebar.getByRole("button", { name: "Full" });
    await token.click({ button: "right" });
    await page.getByText("Edit token").click();

@@ -1856,7 +1880,7 @@ test.describe("Tokens tab - edition", () => {

    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");

-    const colorToken = tokensSidebar.getByRole("checkbox", {
+    const colorToken = tokensSidebar.getByRole("button", {
      name: "100",
    });

@@ -1877,7 +1901,7 @@ test.describe("Tokens tab - edition", () => {

    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100.changed");

-    const colorTokenChanged = tokensSidebar.getByRole("checkbox", {
+    const colorTokenChanged = tokensSidebar.getByRole("button", {
      name: "changed",
    });
    await expect(colorTokenChanged).toBeVisible();
@@ -1940,7 +1964,7 @@ test.describe("Tokens tab - edition", () => {
 });

 test.describe("Tokens tab - delete", () => {
-  test("User deletes color token", async ({ page }) => {
+  test("User delete color token", async ({ page }) => {
    const { tokensSidebar, tokenContextMenuForToken } =
      await setupTokensFileRender(page);

@@ -1948,7 +1972,7 @@ test.describe("Tokens tab - delete", () => {

    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");

-    const colorToken = tokensSidebar.getByRole("checkbox", {
+    const colorToken = tokensSidebar.getByRole("button", {
      name: "100",
    });
    await expect(colorToken).toBeVisible();
@@ -1974,7 +1998,7 @@ test.describe("Tokens tab - delete", () => {
      name: "colors",
      exact: true,
    });
-    const colorNodeToken = tokensSidebar.getByRole("checkbox", {
+    const colorNodeToken = tokensSidebar.getByRole("button", {
      name: "100",
    });

--- a/frontend/playwright/ui/specs/tokens/general.spec.js
+++ b/frontend/playwright/ui/specs/tokens/general.spec.js
@@ -1,12 +1,11 @@
 import { test, expect } from "@playwright/test";
 import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import { setupEmptyTokensFileRender } from "./helpers";

 test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.init(page);
-  await WasmWorkspacePage.mockConfigFlags(page, [
-    "enable-feature-design-tokens-v1",
-  ]);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 test.describe("Tokens tab - common tests", () => {
@@ -21,31 +20,3 @@ test.describe("Tokens tab - common tests", () => {
    await expect(tokensTabPanel).toHaveText(/Themes/);
  });
 });
-
-test("BUG 13302 - Dimension token not being highlighted after applying it", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
-  await workspacePage.setupEmptyFile();
-
-  await workspacePage.mockGetFile("tokens/get-file-13302.json");
-  await workspacePage.mockRPC("update-file?id=*", "tokens/update-file-13302.json");
-
-  await workspacePage.goToWorkspace({
-    fileId: "6886b62b-1979-8195-8007-8d0b92d3116a",
-    pageId: "6886b62b-1979-8195-8007-8d0b92d3116b",
-  });
-
-  await workspacePage.clickLeafLayer("Rectangle");
-
-  await workspacePage.sidebar.getByRole("tab", { name: "Tokens" }).click();
-
-  await workspacePage.tokensSidebar
-    .getByRole("button", { name: "Dimensions 1" })
-    .click();
-
-  const token = workspacePage.tokensSidebar.getByRole("checkbox", { name: "any-dimensions-token" });
-  await token.click();
-
-  // FIXME: this is a bug somewhere else in tokens, this should be fully applied
-  // for a dimensions token
-  await expect(token).toBeChecked({ indeterminate: true });
-});
--- a/frontend/playwright/ui/specs/tokens/helpers.js
+++ b/frontend/playwright/ui/specs/tokens/helpers.js
@@ -11,6 +11,10 @@ const setupEmptyTokensFile = async (page, options = {}) => {
  }

  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );

  await workspacePage.mockRPC(
    "update-file?id=*",
@@ -46,6 +50,10 @@ const setupEmptyTokensFileRender = async (page, options = {}) => {
  }

  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );

  await workspacePage.mockRPC(
    "update-file?id=*",
@@ -85,7 +93,10 @@ const setupTokensFile = async (page, options = {}) => {
  }

  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(
@@ -127,7 +138,10 @@ const setupTokensFileRender = async (page, options = {}) => {
  }

  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(
@@ -192,7 +206,8 @@ const testTokenCreationFlow = async (
  const selfReferenceError = "Token has self reference";
  const missingReferenceError = "Missing token references";

-  const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
+  const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+    await setupEmptyTokensFileRender(page);

  // Open modal
  const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -273,7 +288,7 @@ const testTokenCreationFlow = async (
  await submitButton.click();

  await expect(
-    tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
+    tokensTabPanel.getByRole("button", { name: "my-token" }),
  ).toBeEnabled();

  //
@@ -293,7 +308,7 @@ const testTokenCreationFlow = async (
  await submitButton.click();

  await expect(
-    tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
+    tokensTabPanel.getByRole("button", { name: "my-token-2" }),
  ).toBeEnabled();
 };

@@ -329,7 +344,7 @@ const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
  }

  await expect(
-    typeParentWrapper.getByRole("checkbox", {
+    typeParentWrapper.getByRole("button", {
      name: tokenLeafName,
    }),
  ).toBeEnabled();
--- a/frontend/playwright/ui/specs/tokens/remapping.spec.js
+++ b/frontend/playwright/ui/specs/tokens/remapping.spec.js
@@ -11,6 +11,7 @@ test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.mockConfigFlags(page, [
    "enable-feature-design-tokens-v1",
  ]);
+  await WasmWorkspacePage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 const createToken = async (page, type, name, textFieldName, value) => {
@@ -73,7 +74,7 @@ const renameToken = async (page, oldName, newName) => {
  const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } =
    await setupTokensFileRender(page, { flags: ["enable-token-shadow"] });

-  const baseToken = tokensSidebar.getByRole("checkbox", {
+  const baseToken = tokensSidebar.getByRole("button", {
    name: oldName,
  });
  await baseToken.click({ button: "right" });
@@ -158,10 +159,10 @@ test.describe("Remapping Tokens", () => {

      // Verify token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "foundation-shadow" }),
+        tokensSidebar.getByRole("button", { name: "foundation-shadow" }),
      ).toBeVisible();
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "derived-shadow" }),
+        tokensSidebar.getByRole("button", { name: "derived-shadow" }),
      ).toBeVisible();
    });

@@ -194,13 +195,13 @@ test.describe("Remapping Tokens", () => {
        .click();

      await page.getByRole("tab", { name: "Tokens" }).click();
-      const cardShadowToken = tokensSidebar.getByRole("checkbox", {
+      const cardShadowToken = tokensSidebar.getByRole("button", {
        name: "card-shadow",
      });
      await cardShadowToken.click();

      // Rename and update value of base token
-      const primaryToken = tokensSidebar.getByRole("checkbox", {
+      const primaryToken = tokensSidebar.getByRole("button", {
        name: "primary-shadow",
      });
      await primaryToken.click({ button: "right" });
@@ -232,12 +233,12 @@ test.describe("Remapping Tokens", () => {

      // Verify base token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "main-shadow" }),
+        tokensSidebar.getByRole("button", { name: "main-shadow" }),
      ).toBeVisible();

      // Verify referenced token still exists
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "card-shadow" }),
+        tokensSidebar.getByRole("button", { name: "card-shadow" }),
      ).toBeVisible();

      // Verify the shape still has the token applied with the NEW name
@@ -274,7 +275,13 @@ test.describe("Remapping Tokens", () => {
    test("User renames typography token with alias references", async ({
      page,
    }) => {
-      const { tokensSidebar } = await setupTypographyTokensFileRender(page);
+      const {
+        tokensUpdateCreateModal,
+        tokensSidebar,
+        tokenContextMenuForToken,
+      } = await setupTypographyTokensFileRender(page);
+
+      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });

      // Create base typography token
      await createToken(page, "Typography", "base-text", "Font size", "16");
@@ -301,10 +308,10 @@ test.describe("Remapping Tokens", () => {

      // Verify token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "default-text" }),
+        tokensSidebar.getByRole("button", { name: "default-text" }),
      ).toBeVisible();
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "body-text" }),
+        tokensSidebar.getByRole("button", { name: "body-text" }),
      ).toBeVisible();
    });

@@ -357,13 +364,13 @@ test.describe("Remapping Tokens", () => {
        .click();

      await page.getByRole("tab", { name: "Tokens" }).click();
-      const paragraphToken = tokensSidebar.getByRole("checkbox", {
+      const paragraphToken = tokensSidebar.getByRole("button", {
        name: "paragraph-style",
      });
      await paragraphToken.click();

      // Rename and update value of base token
-      const bodyToken = tokensSidebar.getByRole("checkbox", {
+      const bodyToken = tokensSidebar.getByRole("button", {
        name: "body-style",
      });
      await bodyToken.click({ button: "right" });
@@ -395,12 +402,12 @@ test.describe("Remapping Tokens", () => {

      // Verify base token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "text-base" }),
+        tokensSidebar.getByRole("button", { name: "text-base" }),
      ).toBeVisible();

      // Verify referenced token still exists
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "paragraph-style" }),
+        tokensSidebar.getByRole("button", { name: "paragraph-style" }),
      ).toBeVisible();

      // Verify the text shape still has the token applied with NEW name and value
@@ -460,10 +467,10 @@ test.describe("Remapping Tokens", () => {

      // Verify token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "primary-radius" }),
+        tokensSidebar.getByRole("button", { name: "primary-radius" }),
      ).toBeVisible();
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "card-radius" }),
+        tokensSidebar.getByRole("button", { name: "card-radius" }),
      ).toBeVisible();
    });

@@ -497,7 +504,7 @@ test.describe("Remapping Tokens", () => {
      );

      // Rename and update value of base token
-      const radiusToken = tokensSidebar.getByRole("checkbox", {
+      const radiusToken = tokensSidebar.getByRole("button", {
        name: "radius-sm",
      });
      await radiusToken.click({ button: "right" });
@@ -527,17 +534,17 @@ test.describe("Remapping Tokens", () => {

      // Verify base token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "radius-base" }),
+        tokensSidebar.getByRole("button", { name: "radius-base" }),
      ).toBeVisible();

      // Verify referenced token still exists
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "button-radius" }),
+        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("checkbox", {
+      const buttonRadiusToken = tokensSidebar.getByRole("button", {
        name: "button-radius",
      });
      await buttonRadiusToken.click({ button: "right" });
@@ -580,11 +587,13 @@ test.describe("Remapping Tokens", () => {

      // Verify token was renamed
      await expect(
-        tokensSidebar.getByRole("checkbox", {
+        tokensSidebar.getByRole("button", {
          name: "foundation-shadow",
        }),
      ).toBeVisible();
-      await expect(tokensSidebar.getByLabel("Missing reference")).toBeVisible();
+      await expect(
+        tokensSidebar.locator('[aria-label="Missing reference"]'),
+      ).toBeVisible();
    });

    test("Cancel process - no changes applied", async ({ page }) => {
@@ -617,10 +626,10 @@ test.describe("Remapping Tokens", () => {

      // Verify original token name still exists
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "base-shadow" }),
+        tokensSidebar.getByRole("button", { name: "base-shadow" }),
      ).toBeVisible();
      await expect(
-        tokensSidebar.getByRole("checkbox", { name: "derived-shadow" }),
+        tokensSidebar.getByRole("button", { name: "derived-shadow" }),
      ).toBeVisible();
    });
  });
--- a/frontend/playwright/ui/specs/tokens/sets.spec.js
+++ b/frontend/playwright/ui/specs/tokens/sets.spec.js
@@ -1,12 +1,11 @@
 import { test, expect } from "@playwright/test";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
 import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers";

 test.beforeEach(async ({ page }) => {
-  await WasmWorkspacePage.init(page);
-  await WasmWorkspacePage.mockConfigFlags(page, [
-    "enable-feature-design-tokens-v1",
-  ]);
+  await WasmWorkspacePage.init(page);  
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 test.describe("Tokens: Sets Tab", () => {
@@ -18,11 +17,11 @@ test.describe("Tokens: Sets Tab", () => {
  };

  const createSet = async (sidebar, setName, finalKey = "Enter") => {
-    sidebar
+    const tokensTabButton = sidebar
      .getByRole("button", { name: "Add set" })
      .click();

-    await changeSetInput(sidebar, setName, finalKey);
+    await changeSetInput(sidebar, setName, (finalKey = "Enter"));
  };

  const assertEmptySetsList = async (el) => {
@@ -45,7 +44,7 @@ test.describe("Tokens: Sets Tab", () => {
    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
      await setupEmptyTokensFileRender(page);

-    tokenThemesSetsSidebar
+    const tokensTabButton = tokenThemesSetsSidebar
      .getByRole("button", { name: "Add set" })
      .click();

@@ -139,10 +138,10 @@ test.describe("Tokens: Sets Tab", () => {
  test("User can create & edit sets and set groups with an identical name", async ({
    page,
  }) => {
-    const { tokenThemesSetsSidebar } =
+    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
      await setupEmptyTokensFileRender(page);

-    tokenThemesSetsSidebar
+    const tokensTabButton = tokenThemesSetsSidebar
      .getByRole("button", { name: "Add set" })
      .click();

@@ -219,7 +218,7 @@ test.describe("Tokens: Sets Tab", () => {
  });

  test("Display active set and verify if is enabled", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokensSidebar } =
+    const { tokenThemesSetsSidebar, tokensSidebar, tokenSetItems } =
      await setupTokensFileRender(page);

    // Create set
--- a/frontend/playwright/ui/specs/tokens/themes.spec.js
+++ b/frontend/playwright/ui/specs/tokens/themes.spec.js
@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers";

 // THEMES HELPERS
@@ -26,6 +27,7 @@ test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.mockConfigFlags(page, [
    "enable-feature-design-tokens-v1",
  ]);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 test.describe("Tokens Themes", () => {
--- a/frontend/playwright/ui/specs/tokens/tree.spec.js
+++ b/frontend/playwright/ui/specs/tokens/tree.spec.js
@@ -1,12 +1,11 @@
 import { test, expect } from "@playwright/test";
 import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
+import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import { setupTokensFileRender, unfoldTokenTree } from "./helpers";

 test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.init(page);
-  await WasmWorkspacePage.mockConfigFlags(page, [
-    "enable-feature-design-tokens-v1",
-  ]);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });

 test.describe("Tokens - node tree", () => {
@@ -23,7 +22,7 @@ test.describe("Tokens - node tree", () => {

    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");

-    const colorToken = tokensSidebar.getByRole("checkbox", {
+    const colorToken = tokensSidebar.getByRole("button", {
      name: "100",
    });
    await expect(colorToken).toBeVisible();
--- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
@@ -191,7 +191,7 @@
        full-applied?
        (if has-selected?
          (applied-all-attributes? token selected-shapes attributes)
-          false)
+          true)

        applied?
        (if has-selected?
@@ -290,11 +290,6 @@
                      :token-pill-invalid-applied-viewer (and is-viewer?
                                                              (and full-applied? errors?)))
              :type "button"
-              :role "checkbox"
-              :aria-checked (cond
-                              full-applied? "true"
-                              half-applied? "mixed"
-                              :else "false")
              :on-focus on-hover

              :on-click on-click