From ab727949946f9621d4d5467dd06592a6984094a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Schr=C3=B6dl?= Date: Mon, 27 Jan 2025 16:00:24 +0100 Subject: [PATCH] :bug: Fix user cant submit existing token when editing name only (#5658) * :bug: Fix user cant submit existing token when editing it --- .../workspace/get-file-fragment-tokens.json | 469 +++++ .../data/workspace/get-file-tokens.json | 1798 +++++++++++++++++ frontend/playwright/ui/pages/WorkspacePage.js | 4 + frontend/playwright/ui/specs/tokens.spec.js | 89 +- .../ui/workspace/tokens/context_menu.cljs | 1 + .../app/main/ui/workspace/tokens/form.cljs | 32 +- .../app/main/ui/workspace/tokens/sidebar.cljs | 3 +- 7 files changed, 2383 insertions(+), 13 deletions(-) create mode 100644 frontend/playwright/data/workspace/get-file-fragment-tokens.json create mode 100644 frontend/playwright/data/workspace/get-file-tokens.json diff --git a/frontend/playwright/data/workspace/get-file-fragment-tokens.json b/frontend/playwright/data/workspace/get-file-fragment-tokens.json new file mode 100644 index 000000000..c41deaef1 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-fragment-tokens.json @@ -0,0 +1,469 @@ +{ + "~:id": "~u51e13852-1a8e-8037-8005-9eabb500f7c7", + "~:file-id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f6", + "~:created-at": "~m1737542758401", + "~:data": { + "~:options": {}, + "~:objects": { + "~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 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~: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, + "~:width": 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, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759", + "~uc5b31054-fb6d-80a9-8005-9eab169af180", + "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159" + ] + } + }, + "~uc5b31054-fb6d-80a9-8005-9eab169af180": { + "~#shape": { + "~:y": 605.5, + "~: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": 278, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 388, + "~:y": 605.5 + } + }, + { + "~#point": { + "~:x": 666, + "~:y": 605.5 + } + }, + { + "~#point": { + "~:x": 666, + "~:y": 680.5 + } + }, + { + "~#point": { + "~:x": 388, + "~:y": 680.5 + } + } + ], + "~:r2": 8, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:fix", + "~:r3": 8, + "~:r1": 8, + "~:id": "~uc5b31054-fb6d-80a9-8005-9eab169af180", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:applied-tokens": { + "~:fill": "button.primary.background", + "~:r1": "button.borderRadius", + "~:r2": "button.borderRadius", + "~:r3": "button.borderRadius", + "~:r4": "button.borderRadius" + }, + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 388, + "~:proportion": 1, + "~:r4": 8, + "~:selrect": { + "~#rect": { + "~:x": 388, + "~:y": 605.5, + "~:width": 278, + "~:height": 75, + "~:x1": 388, + "~:y1": 605.5, + "~:x2": 666, + "~:y2": 680.5 + } + }, + "~:fills": [ + { + "~:fill-color": "#7f9cf5" + } + ], + "~:flip-x": null, + "~:height": 75, + "~:flip-y": null + } + }, + "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159": { + "~#shape": { + "~:y": 625, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:font-size": "30", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#ffffff" + } + ], + "~:font-family": "sourcesanspro", + "~:text": "Button" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:key": "2623a", + "~:font-size": "30", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#ffffff" + } + ], + "~:font-family": "sourcesanspro" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "Button", + "~:width": 87, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 483.5, + "~:y": 625 + } + }, + { + "~#point": { + "~:x": 570.5, + "~:y": 625 + } + }, + { + "~#point": { + "~:x": 570.5, + "~:y": 661 + } + }, + { + "~#point": { + "~:x": 483.5, + "~:y": 661 + } + } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:applied-tokens": { + "~:fill": "button.primary.text" + }, + "~:position-data": [ + { + "~#rect": { + "~:y": 662.3333345651627, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "30px", + "~:font-weight": "400", + "~:y1": -1.3333333730697632, + "~:width": 86.60417175292969, + "~:text-decoration": "none solid rgb(0, 0, 0)", + "~:letter-spacing": "normal", + "~:x": 483.5, + "~:x1": 0, + "~:y2": 37.33333456516266, + "~:fills": [ + { + "~:fill-color": "#ffffff" + } + ], + "~:x2": 86.60417175292969, + "~:direction": "ltr", + "~:font-family": "sourcesanspro", + "~:height": 38.66666793823242, + "~:text": "Button" + } + } + ], + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:x": 483.5, + "~:selrect": { + "~#rect": { + "~:x": 483.5, + "~:y": 625, + "~:width": 87, + "~:height": 36, + "~:x1": 483.5, + "~:y1": 625, + "~:x2": 570.5, + "~:y2": 661 + } + }, + "~:flip-x": null, + "~:height": 36, + "~:flip-y": null + } + }, + "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759": { + "~#shape": { + "~:y": 396, + "~: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": 494, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 280, + "~:y": 396 + } + }, + { + "~#point": { + "~:x": 774, + "~:y": 396 + } + }, + { + "~#point": { + "~:x": 774, + "~:y": 890 + } + }, + { + "~#point": { + "~:x": 280, + "~:y": 890 + } + } + ], + "~:r2": 8, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 8, + "~:r1": 8, + "~:id": "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:applied-tokens": { + "~:fill": "card.background", + "~:r1": "card.borderRadius", + "~:r2": "card.borderRadius", + "~:r3": "card.borderRadius", + "~:r4": "card.borderRadius" + }, + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 280, + "~:proportion": 1, + "~:r4": 8, + "~:selrect": { + "~#rect": { + "~:x": 280, + "~:y": 396, + "~:width": 494, + "~:height": 494, + "~:x1": 280, + "~:y1": 396, + "~:x2": 774, + "~:y2": 890 + } + }, + "~:fills": [ + { + "~:fill-color": "#ffffff" + } + ], + "~:flip-x": null, + "~:height": 494, + "~:flip-y": null + } + } + }, + "~:id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f7", + "~:name": "Page 1", + "~:background": "#e8eae9", + "~:guides": { + "~uc5b31054-fb6d-80a9-8005-9eaaba69431e": { + "~:position": 182, + "~:frame-id": null, + "~:id": "~uc5b31054-fb6d-80a9-8005-9eaaba69431e", + "~:axis": "~:x" + } + } + } +} diff --git a/frontend/playwright/data/workspace/get-file-tokens.json b/frontend/playwright/data/workspace/get-file-tokens.json new file mode 100644 index 000000000..4f2f2cdad --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-tokens.json @@ -0,0 +1,1798 @@ +{ + "~:features": { + "~#set": [ + "design-tokens/v1", + "layout/grid", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~: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": "New File 32", + "~:revn": 36, + "~:modified-at": "~m1737542758402", + "~:vern": 0, + "~:id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f6", + "~:is-shared": false, + "~:version": 60, + "~:project-id": "~u0df61468-6cbf-8067-8005-6b453ce996d0", + "~:created-at": "~m1737536563847", + "~:data": { + "~:pages": ["~u51e13852-1a8e-8037-8005-9e9413a1f1f7"], + "~:pages-index": { + "~u51e13852-1a8e-8037-8005-9e9413a1f1f7": { + "~#penpot/pointer": [ + "~u51e13852-1a8e-8037-8005-9eabb500f7c7", + { + "~:created-at": "~m1737542758403" + } + ] + } + }, + "~:id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f6", + "~:options": { + "~:components-v2": true + }, + "~:tokens-lib": { + "~#penpot/tokens-lib": { + "~:sets": { + "~#ordered-map": [ + [ + "S-core", + { + "~#penpot/token-set": { + "~:name": "core", + "~:description": null, + "~:modified-at": "~m1737542498283", + "~:tokens": { + "~#ordered-map": [ + [ + "colors.red.600", + { + "~#penpot/token": { + "~:name": "colors.red.600", + "~:type": "~:color", + "~:value": "#e53e3e", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.white", + { + "~#penpot/token": { + "~:name": "colors.white", + "~:type": "~:color", + "~:value": "#ffffff", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.pink.400", + { + "~#penpot/token": { + "~:name": "colors.pink.400", + "~:type": "~:color", + "~:value": "#f687b3", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.blue.300", + { + "~#penpot/token": { + "~:name": "colors.blue.300", + "~:type": "~:color", + "~:value": "#90cdf4", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.red.700", + { + "~#penpot/token": { + "~:name": "colors.red.700", + "~:type": "~:color", + "~:value": "#c53030", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.pink.800", + { + "~#penpot/token": { + "~:name": "colors.pink.800", + "~:type": "~:color", + "~:value": "#97266d", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.green.100", + { + "~#penpot/token": { + "~:name": "colors.green.100", + "~:type": "~:color", + "~:value": "#f0fff4", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.blue.100", + { + "~#penpot/token": { + "~:name": "colors.blue.100", + "~:type": "~:color", + "~:value": "#ebf8ff", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.green.800", + { + "~#penpot/token": { + "~:name": "colors.green.800", + "~:type": "~:color", + "~:value": "#276749", + "~:description": null, + "~:modified-at": "~m1737542498280" + } + } + ], + [ + "colors.indigo.500", + { + "~#penpot/token": { + "~:name": "colors.indigo.500", + "~:type": "~:color", + "~:value": "#667eea", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "dimension.sm", + { + "~#penpot/token": { + "~:name": "dimension.sm", + "~:type": "~:dimensions", + "~:value": "{dimension.xs} * {dimension.scale}", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.purple.900", + { + "~#penpot/token": { + "~:name": "colors.purple.900", + "~:type": "~:color", + "~:value": "#44337a", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.orange.200", + { + "~#penpot/token": { + "~:name": "colors.orange.200", + "~:type": "~:color", + "~:value": "#feebc8", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.teal.700", + { + "~#penpot/token": { + "~:name": "colors.teal.700", + "~:type": "~:color", + "~:value": "#2c7a7b", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.green.300", + { + "~#penpot/token": { + "~:name": "colors.green.300", + "~:type": "~:color", + "~:value": "#9ae6b4", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.pink.600", + { + "~#penpot/token": { + "~:name": "colors.pink.600", + "~:type": "~:color", + "~:value": "#d53f8c", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.yellow.200", + { + "~#penpot/token": { + "~:name": "colors.yellow.200", + "~:type": "~:color", + "~:value": "#fefcbf", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.yellow.800", + { + "~#penpot/token": { + "~:name": "colors.yellow.800", + "~:type": "~:color", + "~:value": "#975a16", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.teal.200", + { + "~#penpot/token": { + "~:name": "colors.teal.200", + "~:type": "~:color", + "~:value": "#b2f5ea", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.teal.500", + { + "~#penpot/token": { + "~:name": "colors.teal.500", + "~:type": "~:color", + "~:value": "#38b2ac", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.blue.200", + { + "~#penpot/token": { + "~:name": "colors.blue.200", + "~:type": "~:color", + "~:value": "#bee3f8", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.green.600", + { + "~#penpot/token": { + "~:name": "colors.green.600", + "~:type": "~:color", + "~:value": "#38a169", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.indigo.400", + { + "~#penpot/token": { + "~:name": "colors.indigo.400", + "~:type": "~:color", + "~:value": "#7f9cf5", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.purple.600", + { + "~#penpot/token": { + "~:name": "colors.purple.600", + "~:type": "~:color", + "~:value": "#805ad5", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.purple.400", + { + "~#penpot/token": { + "~:name": "colors.purple.400", + "~:type": "~:color", + "~:value": "#b794f4", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.indigo.900", + { + "~#penpot/token": { + "~:name": "colors.indigo.900", + "~:type": "~:color", + "~:value": "#3c366b", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "spacing.lg", + { + "~#penpot/token": { + "~:name": "spacing.lg", + "~:type": "~:spacing", + "~:value": "{dimension.lg}", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.purple.300", + { + "~#penpot/token": { + "~:name": "colors.purple.300", + "~:type": "~:color", + "~:value": "#d6bcfa", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.yellow.500", + { + "~#penpot/token": { + "~:name": "colors.yellow.500", + "~:type": "~:color", + "~:value": "#ecc94b", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "opacity.md", + { + "~#penpot/token": { + "~:name": "opacity.md", + "~:type": "~:opacity", + "~:value": "50%", + "~:description": null, + "~:modified-at": "~m1737542498283" + } + } + ], + [ + "colors.purple.800", + { + "~#penpot/token": { + "~:name": "colors.purple.800", + "~:type": "~:color", + "~:value": "#553c9a", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.yellow.900", + { + "~#penpot/token": { + "~:name": "colors.yellow.900", + "~:type": "~:color", + "~:value": "#744210", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "dimension.xl", + { + "~#penpot/token": { + "~:name": "dimension.xl", + "~:type": "~:dimensions", + "~:value": "{dimension.lg} * {dimension.scale}", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.yellow.700", + { + "~#penpot/token": { + "~:name": "colors.yellow.700", + "~:type": "~:color", + "~:value": "#b7791f", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.green.900", + { + "~#penpot/token": { + "~:name": "colors.green.900", + "~:type": "~:color", + "~:value": "#22543d", + "~:description": null, + "~:modified-at": "~m1737542498280" + } + } + ], + [ + "spacing.md", + { + "~#penpot/token": { + "~:name": "spacing.md", + "~:type": "~:spacing", + "~:value": "{dimension.md}", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.red.200", + { + "~#penpot/token": { + "~:name": "colors.red.200", + "~:type": "~:color", + "~:value": "#fed7d7", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.orange.600", + { + "~#penpot/token": { + "~:name": "colors.orange.600", + "~:type": "~:color", + "~:value": "#dd6b20", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "dimension.scale", + { + "~#penpot/token": { + "~:name": "dimension.scale", + "~:type": "~:dimensions", + "~:value": "2", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.red.800", + { + "~#penpot/token": { + "~:name": "colors.red.800", + "~:type": "~:color", + "~:value": "#9b2c2c", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.red.300", + { + "~#penpot/token": { + "~:name": "colors.red.300", + "~:type": "~:color", + "~:value": "#feb2b2", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "dimension.md", + { + "~#penpot/token": { + "~:name": "dimension.md", + "~:type": "~:dimensions", + "~:value": "{dimension.sm} * {dimension.scale}", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.gray.600", + { + "~#penpot/token": { + "~:name": "colors.gray.600", + "~:type": "~:color", + "~:value": "#718096", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.pink.100", + { + "~#penpot/token": { + "~:name": "colors.pink.100", + "~:type": "~:color", + "~:value": "#fff5f7", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.yellow.300", + { + "~#penpot/token": { + "~:name": "colors.yellow.300", + "~:type": "~:color", + "~:value": "#faf089", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.orange.800", + { + "~#penpot/token": { + "~:name": "colors.orange.800", + "~:type": "~:color", + "~:value": "#9c4221", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.indigo.700", + { + "~#penpot/token": { + "~:name": "colors.indigo.700", + "~:type": "~:color", + "~:value": "#4c51bf", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.yellow.400", + { + "~#penpot/token": { + "~:name": "colors.yellow.400", + "~:type": "~:color", + "~:value": "#f6e05e", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "opacity.low", + { + "~#penpot/token": { + "~:name": "opacity.low", + "~:type": "~:opacity", + "~:value": "10%", + "~:description": null, + "~:modified-at": "~m1737542498283" + } + } + ], + [ + "colors.indigo.200", + { + "~#penpot/token": { + "~:name": "colors.indigo.200", + "~:type": "~:color", + "~:value": "#c3dafe", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.blue.900", + { + "~#penpot/token": { + "~:name": "colors.blue.900", + "~:type": "~:color", + "~:value": "#2a4365", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.gray.500", + { + "~#penpot/token": { + "~:name": "colors.gray.500", + "~:type": "~:color", + "~:value": "#a0aec0", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.red.400", + { + "~#penpot/token": { + "~:name": "colors.red.400", + "~:type": "~:color", + "~:value": "#fc8181", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.teal.800", + { + "~#penpot/token": { + "~:name": "colors.teal.800", + "~:type": "~:color", + "~:value": "#285e61", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.gray.300", + { + "~#penpot/token": { + "~:name": "colors.gray.300", + "~:type": "~:color", + "~:value": "#e2e8f0", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.teal.600", + { + "~#penpot/token": { + "~:name": "colors.teal.600", + "~:type": "~:color", + "~:value": "#319795", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.red.500", + { + "~#penpot/token": { + "~:name": "colors.red.500", + "~:type": "~:color", + "~:value": "#f56565", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.teal.400", + { + "~#penpot/token": { + "~:name": "colors.teal.400", + "~:type": "~:color", + "~:value": "#4fd1c5", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "borderRadius.lg", + { + "~#penpot/token": { + "~:name": "borderRadius.lg", + "~:type": "~:border-radius", + "~:value": "8", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.gray.200", + { + "~#penpot/token": { + "~:name": "colors.gray.200", + "~:type": "~:color", + "~:value": "#edf2f7", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.red.900", + { + "~#penpot/token": { + "~:name": "colors.red.900", + "~:type": "~:color", + "~:value": "#742a2a", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.gray.900", + { + "~#penpot/token": { + "~:name": "colors.gray.900", + "~:type": "~:color", + "~:value": "#1a202c", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.pink.700", + { + "~#penpot/token": { + "~:name": "colors.pink.700", + "~:type": "~:color", + "~:value": "#b83280", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.green.200", + { + "~#penpot/token": { + "~:name": "colors.green.200", + "~:type": "~:color", + "~:value": "#c6f6d5", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.pink.500", + { + "~#penpot/token": { + "~:name": "colors.pink.500", + "~:type": "~:color", + "~:value": "#ed64a6", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.yellow.600", + { + "~#penpot/token": { + "~:name": "colors.yellow.600", + "~:type": "~:color", + "~:value": "#d69e2e", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.orange.700", + { + "~#penpot/token": { + "~:name": "colors.orange.700", + "~:type": "~:color", + "~:value": "#c05621", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.teal.100", + { + "~#penpot/token": { + "~:name": "colors.teal.100", + "~:type": "~:color", + "~:value": "#e6fffa", + "~:description": null, + "~:modified-at": "~m1737542498280" + } + } + ], + [ + "colors.gray.800", + { + "~#penpot/token": { + "~:name": "colors.gray.800", + "~:type": "~:color", + "~:value": "#2d3748", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.orange.300", + { + "~#penpot/token": { + "~:name": "colors.orange.300", + "~:type": "~:color", + "~:value": "#fbd38d", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.orange.100", + { + "~#penpot/token": { + "~:name": "colors.orange.100", + "~:type": "~:color", + "~:value": "#fffaf0", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.purple.700", + { + "~#penpot/token": { + "~:name": "colors.purple.700", + "~:type": "~:color", + "~:value": "#6b46c1", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "dimension.lg", + { + "~#penpot/token": { + "~:name": "dimension.lg", + "~:type": "~:dimensions", + "~:value": "{dimension.md} * {dimension.scale}", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.gray.400", + { + "~#penpot/token": { + "~:name": "colors.gray.400", + "~:type": "~:color", + "~:value": "#cbd5e0", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.indigo.100", + { + "~#penpot/token": { + "~:name": "colors.indigo.100", + "~:type": "~:color", + "~:value": "#ebf4ff", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.green.500", + { + "~#penpot/token": { + "~:name": "colors.green.500", + "~:type": "~:color", + "~:value": "#48bb78", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.pink.300", + { + "~#penpot/token": { + "~:name": "colors.pink.300", + "~:type": "~:color", + "~:value": "#fbb6ce", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.pink.900", + { + "~#penpot/token": { + "~:name": "colors.pink.900", + "~:type": "~:color", + "~:value": "#702459", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.purple.200", + { + "~#penpot/token": { + "~:name": "colors.purple.200", + "~:type": "~:color", + "~:value": "#e9d8fd", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.purple.500", + { + "~#penpot/token": { + "~:name": "colors.purple.500", + "~:type": "~:color", + "~:value": "#9f7aea", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.green.700", + { + "~#penpot/token": { + "~:name": "colors.green.700", + "~:type": "~:color", + "~:value": "#2f855a", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.indigo.800", + { + "~#penpot/token": { + "~:name": "colors.indigo.800", + "~:type": "~:color", + "~:value": "#434190", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.blue.700", + { + "~#penpot/token": { + "~:name": "colors.blue.700", + "~:type": "~:color", + "~:value": "#2b6cb0", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "borderRadius.sm", + { + "~#penpot/token": { + "~:name": "borderRadius.sm", + "~:type": "~:border-radius", + "~:value": "4", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.black", + { + "~#penpot/token": { + "~:name": "colors.black", + "~:type": "~:color", + "~:value": "#000000", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "opacity.high", + { + "~#penpot/token": { + "~:name": "opacity.high", + "~:type": "~:opacity", + "~:value": "90%", + "~:description": null, + "~:modified-at": "~m1737542498283" + } + } + ], + [ + "colors.blue.800", + { + "~#penpot/token": { + "~:name": "colors.blue.800", + "~:type": "~:color", + "~:value": "#2c5282", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.orange.400", + { + "~#penpot/token": { + "~:name": "colors.orange.400", + "~:type": "~:color", + "~:value": "#f6ad55", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.pink.200", + { + "~#penpot/token": { + "~:name": "colors.pink.200", + "~:type": "~:color", + "~:value": "#fed7e2", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.gray.100", + { + "~#penpot/token": { + "~:name": "colors.gray.100", + "~:type": "~:color", + "~:value": "#f7fafc", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "spacing.xl", + { + "~#penpot/token": { + "~:name": "spacing.xl", + "~:type": "~:spacing", + "~:value": "{dimension.xl}", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "dimension.xs", + { + "~#penpot/token": { + "~:name": "dimension.xs", + "~:type": "~:dimensions", + "~:value": "4", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.teal.900", + { + "~#penpot/token": { + "~:name": "colors.teal.900", + "~:type": "~:color", + "~:value": "#234e52", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.teal.300", + { + "~#penpot/token": { + "~:name": "colors.teal.300", + "~:type": "~:color", + "~:value": "#81e6d9", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "colors.blue.500", + { + "~#penpot/token": { + "~:name": "colors.blue.500", + "~:type": "~:color", + "~:value": "#4299e1", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "borderRadius.xl", + { + "~#penpot/token": { + "~:name": "borderRadius.xl", + "~:type": "~:border-radius", + "~:value": "16", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.green.400", + { + "~#penpot/token": { + "~:name": "colors.green.400", + "~:type": "~:color", + "~:value": "#68d391", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.indigo.300", + { + "~#penpot/token": { + "~:name": "colors.indigo.300", + "~:type": "~:color", + "~:value": "#a3bffa", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.red.100", + { + "~#penpot/token": { + "~:name": "colors.red.100", + "~:type": "~:color", + "~:value": "#fff5f5", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.orange.900", + { + "~#penpot/token": { + "~:name": "colors.orange.900", + "~:type": "~:color", + "~:value": "#7b341e", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.purple.100", + { + "~#penpot/token": { + "~:name": "colors.purple.100", + "~:type": "~:color", + "~:value": "#faf5ff", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "spacing.xs", + { + "~#penpot/token": { + "~:name": "spacing.xs", + "~:type": "~:spacing", + "~:value": "{dimension.xs}", + "~:description": null, + "~:modified-at": "~m1737542498276" + } + } + ], + [ + "colors.indigo.600", + { + "~#penpot/token": { + "~:name": "colors.indigo.600", + "~:type": "~:color", + "~:value": "#5a67d8", + "~:description": null, + "~:modified-at": "~m1737542498282" + } + } + ], + [ + "colors.gray.700", + { + "~#penpot/token": { + "~:name": "colors.gray.700", + "~:type": "~:color", + "~:value": "#4a5568", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.blue.400", + { + "~#penpot/token": { + "~:name": "colors.blue.400", + "~:type": "~:color", + "~:value": "#63b3ed", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ], + [ + "spacing.sm", + { + "~#penpot/token": { + "~:name": "spacing.sm", + "~:type": "~:spacing", + "~:value": "{dimension.sm}", + "~:description": null, + "~:modified-at": "~m1737542498277" + } + } + ], + [ + "colors.orange.500", + { + "~#penpot/token": { + "~:name": "colors.orange.500", + "~:type": "~:color", + "~:value": "#ed8936", + "~:description": null, + "~:modified-at": "~m1737542498278" + } + } + ], + [ + "colors.yellow.100", + { + "~#penpot/token": { + "~:name": "colors.yellow.100", + "~:type": "~:color", + "~:value": "#fffff0", + "~:description": null, + "~:modified-at": "~m1737542498279" + } + } + ], + [ + "colors.blue.600", + { + "~#penpot/token": { + "~:name": "colors.blue.600", + "~:type": "~:color", + "~:value": "#3182ce", + "~:description": null, + "~:modified-at": "~m1737542498281" + } + } + ] + ] + } + } + } + ], + [ + "S-light", + { + "~#penpot/token-set": { + "~:name": "light", + "~:description": null, + "~:modified-at": "~m1737542498290", + "~:tokens": { + "~#ordered-map": [ + [ + "accent.default", + { + "~#penpot/token": { + "~:name": "accent.default", + "~:type": "~:color", + "~:value": "{colors.indigo.400}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "bg.muted", + { + "~#penpot/token": { + "~:name": "bg.muted", + "~:type": "~:color", + "~:value": "{colors.gray.100}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "bg.subtle", + { + "~#penpot/token": { + "~:name": "bg.subtle", + "~:type": "~:color", + "~:value": "{colors.gray.200}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "accent.bg", + { + "~#penpot/token": { + "~:name": "accent.bg", + "~:type": "~:color", + "~:value": "{colors.indigo.200}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "accent.onAccent", + { + "~#penpot/token": { + "~:name": "accent.onAccent", + "~:type": "~:color", + "~:value": "{colors.white}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "shadows.default", + { + "~#penpot/token": { + "~:name": "shadows.default", + "~:type": "~:color", + "~:value": "{colors.gray.900}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "fg.muted", + { + "~#penpot/token": { + "~:name": "fg.muted", + "~:type": "~:color", + "~:value": "{colors.gray.700}", + "~:description": null, + "~:modified-at": "~m1737542498289" + } + } + ], + [ + "fg.default", + { + "~#penpot/token": { + "~:name": "fg.default", + "~:type": "~:color", + "~:value": "{colors.black}", + "~:description": null, + "~:modified-at": "~m1737542498289" + } + } + ], + [ + "fg.subtle", + { + "~#penpot/token": { + "~:name": "fg.subtle", + "~:type": "~:color", + "~:value": "{colors.gray.500}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ], + [ + "bg.default", + { + "~#penpot/token": { + "~:name": "bg.default", + "~:type": "~:color", + "~:value": "{colors.white}", + "~:description": null, + "~:modified-at": "~m1737542498290" + } + } + ] + ] + } + } + } + ], + [ + "S-dark", + { + "~#penpot/token-set": { + "~:name": "dark", + "~:description": null, + "~:modified-at": "~m1737542498291", + "~:tokens": { + "~#ordered-map": [ + [ + "accent.default", + { + "~#penpot/token": { + "~:name": "accent.default", + "~:type": "~:color", + "~:value": "{colors.indigo.600}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "bg.muted", + { + "~#penpot/token": { + "~:name": "bg.muted", + "~:type": "~:color", + "~:value": "{colors.gray.700}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "bg.subtle", + { + "~#penpot/token": { + "~:name": "bg.subtle", + "~:type": "~:color", + "~:value": "{colors.gray.600}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "accent.bg", + { + "~#penpot/token": { + "~:name": "accent.bg", + "~:type": "~:color", + "~:value": "{colors.indigo.800}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "accent.onAccent", + { + "~#penpot/token": { + "~:name": "accent.onAccent", + "~:type": "~:color", + "~:value": "{colors.white}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "shadows.default", + { + "~#penpot/token": { + "~:name": "shadows.default", + "~:type": "~:color", + "~:value": "rgba({colors.black}, 0.3)", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "fg.muted", + { + "~#penpot/token": { + "~:name": "fg.muted", + "~:type": "~:color", + "~:value": "{colors.gray.300}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "fg.default", + { + "~#penpot/token": { + "~:name": "fg.default", + "~:type": "~:color", + "~:value": "{colors.white}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "fg.subtle", + { + "~#penpot/token": { + "~:name": "fg.subtle", + "~:type": "~:color", + "~:value": "{colors.gray.500}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ], + [ + "bg.default", + { + "~#penpot/token": { + "~:name": "bg.default", + "~:type": "~:color", + "~:value": "{colors.gray.900}", + "~:description": null, + "~:modified-at": "~m1737542498291" + } + } + ] + ] + } + } + } + ], + [ + "S-theme", + { + "~#penpot/token-set": { + "~:name": "theme", + "~:description": null, + "~:modified-at": "~m1737542498292", + "~:tokens": { + "~#ordered-map": [ + [ + "button.primary.background", + { + "~#penpot/token": { + "~:name": "button.primary.background", + "~:type": "~:color", + "~:value": "{accent.default}", + "~:description": null, + "~:modified-at": "~m1737542498292" + } + } + ], + [ + "button.primary.text", + { + "~#penpot/token": { + "~:name": "button.primary.text", + "~:type": "~:color", + "~:value": "{accent.onAccent}", + "~:description": null, + "~:modified-at": "~m1737542498292" + } + } + ], + [ + "button.borderRadius", + { + "~#penpot/token": { + "~:name": "button.borderRadius", + "~:type": "~:border-radius", + "~:value": "{borderRadius.lg}", + "~:description": null, + "~:modified-at": "~m1737542498292" + } + } + ], + [ + "card.borderRadius", + { + "~#penpot/token": { + "~:name": "card.borderRadius", + "~:type": "~:border-radius", + "~:value": "{borderRadius.lg}", + "~:description": null, + "~:modified-at": "~m1737542498292" + } + } + ], + [ + "card.background", + { + "~#penpot/token": { + "~:name": "card.background", + "~:type": "~:color", + "~:value": "{bg.default}", + "~:description": null, + "~:modified-at": "~m1737542498292" + } + } + ], + [ + "card.padding", + { + "~#penpot/token": { + "~:name": "card.padding", + "~:type": "~:dimensions", + "~:value": "{dimension.md}", + "~:description": null, + "~:modified-at": "~m1737542498292" + } + } + ] + ] + } + } + } + ] + ] + }, + "~:themes": { + "~#ordered-map": [ + [ + "Core", + { + "~#ordered-map": [ + [ + "Light", + { + "~#penpot/token-theme": { + "~:name": "Light", + "~:group": "Core", + "~:description": null, + "~:is-source": false, + "~:modified-at": "~m1737542746842", + "~:sets": { + "~#set": ["light", "theme", "core"] + } + } + } + ], + [ + "Dark", + { + "~#penpot/token-theme": { + "~:name": "Dark", + "~:group": "Core", + "~:description": null, + "~:is-source": false, + "~:modified-at": "~m1737542746842", + "~:sets": { + "~#set": ["dark", "theme", "core"] + } + } + } + ] + ] + } + ], + [ + "", + { + "~#ordered-map": [ + [ + "__PENPOT__HIDDEN__TOKEN__THEME__", + { + "~#penpot/token-theme": { + "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__", + "~:group": "", + "~:description": null, + "~:is-source": false, + "~:modified-at": "~m1737542683555", + "~:sets": { + "~#set": ["light", "theme", "core"] + } + } + } + ] + ] + } + ] + ] + }, + "~:active-themes": { + "~#set": ["Core/Light"] + } + } + } + } +} diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 3948730c5..87a2eedab 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -89,8 +89,12 @@ export class WorkspacePage extends BaseWebSocketPage { "token-update-create-modal", ); this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar"); + this.tokensSidebar = page.getByTestId("tokens-sidebar"); this.tokenSetItems = page.getByTestId("tokens-set-item"); this.tokenSetGroupItems = page.getByTestId("tokens-set-group-item"); + this.tokenContextMenuForToken = page.getByTestId( + "tokens-context-menu-for-token", + ); } async goToWorkspace({ diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js index 01d8c6ec9..8c4f77c13 100644 --- a/frontend/playwright/ui/specs/tokens.spec.js +++ b/frontend/playwright/ui/specs/tokens.spec.js @@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => { await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); -const setupFileWithTokens = async (page) => { +const setupEmptyTokensFile = async (page) => { const workspacePage = new WorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC( @@ -29,12 +29,44 @@ const setupFileWithTokens = async (page) => { }; }; +const setupTokensFile = async (page) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC( + "get-team?id=*", + "workspace/get-team-tokens.json", + ); + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-tokens.json"); + await workspacePage.mockRPC( + /get\-file\-fragment\?/, + "workspace/get-file-fragment-tokens.json", + ); + + await workspacePage.goToWorkspace({ + fileId: "51e13852-1a8e-8037-8005-9e9413a1f1f6", + pageId: "51e13852-1a8e-8037-8005-9e9413a1f1f7", + }); + + const tokensTabButton = page.getByRole("tab", { name: "Tokens" }); + await tokensTabButton.click(); + + return { + workspacePage, + tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal, + tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar, + tokenSetItems: workspacePage.tokenSetItems, + tokenSetGroupItems: workspacePage.tokenSetGroupItems, + tokensSidebar: workspacePage.tokensSidebar, + tokenContextMenuForToken: workspacePage.tokenContextMenuForToken, + }; +}; + test.describe("Tokens: Tokens Tab", () => { test("Clicking tokens tab button opens tokens sidebar tab", async ({ page, }) => { const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupFileWithTokens(page); + await setupEmptyTokensFile(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -46,7 +78,7 @@ test.describe("Tokens: Tokens Tab", () => { page, }) => { const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupFileWithTokens(page); + await setupEmptyTokensFile(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); await tokensTabPanel.getByTitle("Add token: Color").click(); @@ -106,9 +138,56 @@ test.describe("Tokens: Tokens Tab", () => { ).toHaveAttribute("aria-checked", "true"); }); + test("User edits token and auto created set show up in the sidebar", async ({ + page, + }) => { + const { + workspacePage, + tokensUpdateCreateModal, + tokenThemesSetsSidebar, + tokensSidebar, + tokenContextMenuForToken, + } = await setupTokensFile(page); + + await expect(tokensSidebar).toBeVisible(); + + const tokensColorGroup = tokensSidebar.getByRole("button", { + name: "Color 92", + }); + await expect(tokensColorGroup).toBeVisible; + await tokensColorGroup.click(); + + const colorToken = tokensSidebar.getByRole("button", { + name: "colors.blue.100", + }); + await expect(colorToken).toBeVisible; + await colorToken.click({ button: "right" }); + + await expect(tokenContextMenuForToken).toBeVisible(); + await tokenContextMenuForToken.getByText("Edit token").click(); + + await expect(tokensUpdateCreateModal).toBeVisible(); + + const nameField = tokensUpdateCreateModal.getByLabel("Name"); + await nameField.pressSequentially(".changed"); + + const submitButton = tokensUpdateCreateModal.getByRole("button", { + name: "Save", + }); + await expect(submitButton).toBeEnabled(); + await submitButton.click(); + + await expect(tokensUpdateCreateModal).not.toBeVisible(); + + const colorTokenChanged = tokensSidebar.getByRole("button", { + name: "colors.blue.100.changed", + }); + expect(colorTokenChanged).toBeVisible(); + }); + test("User creates grouped color token", async ({ page }) => { const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupFileWithTokens(page); + await setupEmptyTokensFile(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); await tokensTabPanel.getByTitle("Add token: Color").click(); @@ -156,7 +235,7 @@ test.describe("Tokens: Sets Tab", () => { // tokenThemesSetsSidebar, // tokenSetItems, // tokenSetGroupItems, - // } = await setupFileWithTokens(page); + // } = await setupEmptyTokensFile(page); // // const tokensTabButton = tokenThemesSetsSidebar // .getByRole("button", { name: "Add set" }) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 7c6719069..41a5b876a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -392,6 +392,7 @@ [:& dropdown {:show is-open? :on-close #(st/emit! dt/hide-token-context-menu)} [:div {:class (stl/css :token-context-menu) + :data-testid "tokens-context-menu-for-token" :ref dropdown-ref :data-direction dropdown-direction :style {:--bottom (if (= dropdown-direction "up") diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 8182eb7c5..a7f571e4a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -216,7 +216,8 @@ (mf/defc form {::mf/wrap-props false} [{:keys [token token-type action selected-token-set-name]}] - (let [token (or token {:type token-type}) + (let [create? (not (instance? ctob/Token token)) + token (or token {:type token-type}) token-properties (wtty/get-token-properties token) color? (wtt/color-token? token) selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) @@ -292,7 +293,8 @@ color-ramp-open? (mf/use-state false) value-input-ref (mf/use-ref nil) value-ref (mf/use-var (:value token)) - token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) + token-resolve-result* (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) + token-resolve-result (deref token-resolve-result*) set-resolve-value (mf/use-fn (fn [token-or-err] @@ -301,7 +303,7 @@ token-or-err (:resolved-value token-or-err))] (when color? (reset! color (if error? nil v))) - (reset! token-resolve-result v)))) + (reset! token-resolve-result* v)))) on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value) on-update-value (mf/use-fn (mf/deps on-update-value-debounced) @@ -321,10 +323,10 @@ (fn [] (swap! color-ramp-open? not))) - value-error? (seq (:errors @token-resolve-result)) + value-error? (seq (:errors token-resolve-result)) valid-value-field? (and (not value-error?) - (valid-value? @token-resolve-result)) + (valid-value? token-resolve-result)) ;; Description description-ref (mf/use-var (:description token)) @@ -395,6 +397,22 @@ (dom/prevent-default e) (modal/hide!)))] + ;; Clear form token cache on mount + (mf/use-effect + (fn [] + (reset! form-token-cache-atom nil))) + + ;; Update the value when editing an existing token + ;; so the user doesn't have to interact with the form to validate the token + (mf/use-effect + (mf/deps create? resolved-tokens token token-resolve-result set-resolve-value) + (fn [] + (when (and (not create?) + (not token-resolve-result) + resolved-tokens) + (-> (get resolved-tokens @name-ref) + (set-resolve-value))))) + [:form {:class (stl/css :form-wrapper) :on-submit on-submit} [:div {:class (stl/css :token-rows)} @@ -443,10 +461,10 @@ [:> input-token-color-bullet* {:color @color :on-click on-display-colorpicker}])] (when @color-ramp-open? - [:> ramp* {:color (some-> (or @token-resolve-result (:value token)) + [:> ramp* {:color (some-> (or token-resolve-result (:value token)) (tinycolor/valid-color)) :on-change on-update-color}]) - [:& token-value-or-errors {:result-or-errors @token-resolve-result}]] + [:& token-value-or-errors {:result-or-errors token-resolve-result}]] [:div {:class (stl/css :input-row)} [:> input-tokens* diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index f212ddaff..2cc01220e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -370,7 +370,8 @@ (use-resize-hook :tokens 200 38 400 :y false nil)] [:div {:class (stl/css :sidebar-wrapper)} [:& themes-sets-tab {:resize-height size-pages-opened}] - [:article {:class (stl/css :tokens-section-wrapper)} + [:article {:class (stl/css :tokens-section-wrapper) + :data-testid "tokens-sidebar"} [:div {:class (stl/css :resize-area-horiz) :on-pointer-down on-pointer-down-pages :on-lost-pointer-capture on-lost-pointer-capture-pages