mirror of
https://github.com/penpot/penpot.git
synced 2026-11-07 04:33:10 -05:00
develop
656
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Andrey Antukh
|
97fe51e08b | Merge remote-tracking branch 'origin/staging' into develop | ||
|
Eva Marco
|
eb6e976c01 |
♻️ Move the dashboard header styles to the DS (#12676)
* ♻️ Move the dashboard header styles to the DS The page header of the dashboard and settings pages took its styles from common/refactor/common-dashboard.scss. Move the rules still in use to dashboard/common/header.scss, written with DS tokens: - The page titles become heading* (title-large) with a class instead of a bare h1; the team section links get a class, and the active class moves from the li to the link. - Drop the rules that matched nothing: .element-name, .context-menu, .icon and .btn-secondary inside the header, and the global .btn-primary and .btn-secondary (only the fonts page uses them; it keeps the old import until its open change lands). - The sidebar and subscription styles imported the file without using it; drop the import. The header looks the same (0 px in the new visual test). The title line height goes from 1.15 to 1.4, which does not move the text. AI-assisted-by: claude-opus-5-5 * ♻️ Move the dashboard libraries and search styles to the DS Replace the deprecated spacing, size and border variables with DS tokens and logical properties, and drop the refactor/ import. - The search placeholder icon gets a class for its color instead of a .icon svg rule; its xl size already gives the 32px box. - Delete the selectors no markup uses: .dashboard-projects in both files and .dashboard-shared in search. No visual change (0 px in the new libraries and search visual test). AI-assisted-by: claude-opus-5-5 * 🔥 Move the fonts page header to the DS and delete common-dashboard The fonts page was the last user of common/refactor/common-dashboard.scss: its header now uses the shared DS header styles and a DS heading, like the other dashboard pages. Nothing else imports common-dashboard, so it is deleted. No visual change. AI-assisted-by: claude-opus-5-5 * 📎 Remove a double blank line in the dashboard sidebar styles Prettier rejects the two blank lines left after the imports, which made the frontend lint fail in CI. AI-assisted-by: claude-opus-5-5 * 📎 Remove a blank line between the subscription style imports Stylelint (at-rule-empty-line-before) rejects the blank line left between the @use rules after the common-dashboard import was dropped. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
0f7e3fe92e |
♻️ Use DS icon buttons in the path editing bar (#12682)
* ♻️ Use DS icon buttons in the path editing bar The path editing bar now uses DS icon buttons (ghost, tooltip below) and DS icons, like the top toolbar. The toggles (draw/move mode, handler types, snap) use aria-pressed, and the handler type trigger uses the DS flyout indicator, with no tooltip because its menu opens on hover. This also shows the handler and snap icons again: since #12659 their SVGs draw with currentColor, and the legacy %button-icon set color to transparent, so they were invisible. Add a visual test of the bar, its hover and the handler menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move the path editing bar styles to the DS Drop the deprecated styles import, resolve --panel-border-color to --color-background-quaternary and use logical properties, except top and height of the bar, which its transition names. Delete the selectors the DS buttons left unused: .handler-trigger and .flyout-indicator (the DS icon button draws its own indicator). No visual change. AI-assisted-by: claude-opus-5-5 * 📎 Add the blank line stylelint expects in the path bar styles Stylelint (scss/double-slash-comment-empty-line-before) rejects the comment right after a declaration, which made the frontend lint fail in CI. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
9349c3b778 |
♻️ Make the workspace logo and project name real links (#12699)
* ♻️ Give the workspace logo a real link and the DS logo asset The Penpot logo in the workspace header was an <a> without href, so the keyboard could not reach it and it could not open in a new tab. It now links to the dashboard Recent page; a plain click still runs the in-app navigation (prevent default), and Ctrl/Cmd-click opens the link in a new tab. The logo uses the DS raw-svg* asset instead of the legacy icon (same drawing), with its own 32px class. The legacy svg kept its 500px height attribute, so it overflowed the header by 222px above and below. This was the last legacy icon in left_header.cljs. New visual test "Shows the Penpot logo link": 0 px of difference at rest and on hover. AI-assisted-by: claude-opus-5-5 * ♻️ Make the workspace project name a real link The project name in the workspace header was a div with on-click that opened the project files in a new tab, so the keyboard could not reach it. It is now a link to the same page with target "_blank": the browser opens the new tab, and Tab, Enter and "Open link" work as for any link. The left header visual test gives 0 px of difference. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
f827b7b4a6 |
🐛 Make the dashboard template cards keyboard buttons (#12710)
A template card was an <a> without href inside a focusable div: Tab reached the div, and neither Enter nor Space imported the template, so the cards could not be used from the keyboard. Importing is an action, so the card is now a <button> with the same look; it takes the tab index the div had, and the manual Enter handler goes away. Keyboard focus looks like hover (accent border and "Add to your project"). The templates visual test gives 0 px of difference at rest, on hover and for the scroll and collapse buttons; a new shot covers the focus. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
686b47742d |
🐛 Make the profile page modal links keyboard buttons (#12712)
"Change email" and "Want to remove your account?" were <a> without href that open modals: the keyboard could not reach them. They are now <button type="button"> that keep their text-link look (accent color, underline on hover), so Tab reaches them and Enter or Space opens the modal. The profile visual test gives 0 px of difference, now also with a shot of the hover on "Want to remove your account?". AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
8ab9624f0b |
🐛 Make Download report.txt a keyboard button (#12723)
On the internal error page and the feedback page, "Download report.txt" was an <a> without href, so Tab skipped it. It is an action, so it becomes a <button type="button"> with the same look, underline on hover included. The type keeps it from sending the feedback form. A new visual test reaches both pages through a mocked server error and checks 0 px of difference and the download with Enter. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
657ce8b054 |
🐛 Make the login dialog section links keyboard buttons (#12724)
"Forgot password?", "Create an account" and "Login here." switch the section of the login dialog (viewer and MCP authorize) and of the dialog on the not found page. They were <a> without href, so Tab skipped them. They become <button type="button"> with the same look; a class replaces the bare a selector in static.scss. A new visual test opens both dialogs, uses the keyboard to switch sections and checks 0 px of difference at rest and on hover. AI-assisted-by: claude-opus-5-5 |
||
|
David Barragán Merino
|
0e9a9a8950 |
💥 Enable admin console by default (#12475)
Signed-off-by: David Barragán Merino <david.barragan@kaleidos.net> |
||
|
Andrey Antukh
|
be37341f36 | Merge remote-tracking branch 'origin/staging' into develop | ||
|
Eva Marco
|
a69d5d15d2 |
🐛 Wrap long shortcut key lists in the shortcuts panel (#12735)
* 🐛 Wrap long shortcut key lists in the shortcuts panel The Next board and Previous board rows of the viewer have five key combinations. Their keys ran past the panel edge and covered the label. Since #11081 the label sits inside a span with no flex rules, and the key list never wrapped. Now each combination is a group that never breaks, and the list wraps between groups. The comma stays at the end of its group and "or" leads the last one, so no line starts with a separator. The label keeps its width and the keys take the rest. Closes #12641 AI-assisted-by: claude-opus-5-5 * ♻️ Drop unused deprecated imports from the shortcuts styles shortcuts.scss no longer uses anything from refactor/ or ds/mixins. Remove both imports and use the typography module without a namespace. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
12dd4d19d0 |
♻️ Use a DS icon button for Share in the workspace header (#12681)
* ♻️ Use a DS icon button for Share in the workspace header The Share link of the right header becomes an icon-button* with the DS share icon, like its neighbours (comments, history, viewer). It gets keyboard focus, a name and the DS tooltip and hover. It also makes Share visible again on develop: since the share icon moved to currentColor, the legacy icon drew with the transparent color of its svg. The button is 32px wide instead of 28px, so the zoom, comments and history controls move 4px to the left. AI-assisted-by: claude-opus-5-5 * 🔥 Remove the share link styles from the workspace header Delete .share-btn and its svg rule, which no markup uses since Share is a DS icon button. refactor/ stays only for the menu placeholders. No visual change (0 px). AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
66f1f689f8 |
♻️ Use the DS select for the gradient type in the colorpicker (#12653)
* ♻️ Use the DS select for the gradient type in the colorpicker The Linear / Radial select of the gradient options used the legacy select. It now uses select* with string ids, converted back to the gradient type keyword in the handler. Visible changes: the DS select look (label 1px higher, DS list with taller rows and the DS check mark, opening 2px lower). The list still opens inside the colorpicker, so it needs no portal. The "Create a RADIAL gradient" e2e test picks the type by role instead of a DOM position that only matched the legacy markup. New ds visual test "Gradient type select": closed, hover, open and changed. AI-assisted-by: claude-opus-5-5 * ♻️ Move colorpicker gradient styles off the deprecated styles gradients.scss now uses DS spacing, sizes, borders, typography and logical properties, and resolves the --menu-shadow-color alias. The deprecated import stays only for %input-element: the stop offset input moves to the DS with the numeric inputs group. The offset input uses body-small (line-height 1.3 instead of 1.4); the input keeps its height, so nothing moves. 0px difference against the previous commit, including a new shot of the whole gradient panel. gradients.cljs uses an icon-text class that has no rule in this file. AI-assisted-by: claude-opus-5-5 |
||
|
Andrey Antukh
|
65a76a21cd | Merge remote-tracking branch 'origin/staging' into develop | ||
|
Eva Marco
|
2607ec89fa |
♻️ Move the profile page to the DS and make the Update overlay a button (#12651)
* ♻️ Make the profile photo Update overlay a button The "Update" overlay on the profile photo was a span with an on-click, so the keyboard could not reach it. It is now a button: it shows on keyboard focus as well as on hover. The button centers its line in the circle, so a 4px bottom padding keeps the label where the span drew it (0px difference). New ds visual test "Profile page controls": the page at rest, the overlay on hover and on focus, Save enabled, and the Change email link on hover. AI-assisted-by: claude-opus-5-5 * ♻️ Move profile page styles off the deprecated styles profile.scss imported the whole deprecated module and kept a long copy of shared settings rules. It now uses the DS tokens, sizes, borders, z-index and typography. The deprecated import stays only for %button-primary: the save button is the shared forms submit button. Deleted selectors that match nothing in profile.cljs: .btn-secondary (both), .field, .field-title, .field-text, .custom-input, .custom-select, .two-columns, .subtitle, .notification-icon, .notification-text, .notification-text-email, .newsletter-subs, the h1, h3, p and hr rules, the form rule (both forms set their own flex) and the link hover underline (the global link rule already does it). Typographies: the page title uses title-large (line-height 1.4 instead of 1.15), the Change email link title-small (line-height 1.2 instead of the default), and the Update overlay title-large with its own line-height. Visible change: the taller title line moves the title 3px down and the rest of the page 6px down. Nothing else changes. AI-assisted-by: claude-opus-5-5 * ♻️ Give the profile page links, title and photo classes The links and the profile photo get their own classes instead of bare a and img selectors, and the page title uses the DS heading with title-large (it already used that typography). The link wrapper drops a class with no styles, and the rule for the file input goes: the shared uploader hides that input inline, so the rule did nothing. No visual change. AI-assisted-by: claude-opus-5-5 * 💄 Use one DS typography and the accent color for the profile links "Change email" took title-small from its container, overridden by the global link styles (14px, weight 500), and "Want to remove your account?" had no typography and inherited 16px. Both links now use body-medium and --color-accent-primary, as design asked in the review. The "Change email" line is taller with the 1.4 line height, so Save settings and the link below it sit 3px lower. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
705ea42622 |
🐛 Keep the default cursor in the token dropdown of numeric inputs (#12680)
A numeric input that can be scrubbed sets the ew-resize cursor on its wrapper, and the token dropdown renders inside that wrapper, so the whole list inherited the scrub cursor. Give the options dropdown the default cursor, so it never takes the cursor of the control that opens it. AI-assisted-by: claude-opus-5-5 |
||
|
Dr. Dominik Jainandalonso.torres
|
e20a0d748e |
✨ Add OAuth support for MCP server (#12480)
* 🎉 Add OAuth support for remote MCP connections Add MCP-specific discovery, client registration, and approval endpoints. Exchange single-use authorization codes with PKCE for the fixed MCP user token, enabling MCP and creating the token on approval when needed. Use self-contained client IDs without new database tables or stored client records. Keep temporary authorization state in Redis/Valkey. Accept bearer credentials while preserving query-parameter connections. Enable OAuth through PENPOT_MCP_AUTH_URI in multi-user mode. Document the environment variable in the README and implementation details in Serena. Explain protocol and concurrency decisions in the Clojure code. Cover token provisioning, OAuth state, client registration, HTTP flows, and the approval page with tests. AI-assisted-by: gpt-6 * 🐛 Wait for devenv initialization before starting builds Docker reports a container as Running as soon as its main process starts, while the entrypoint may still be preparing the development environment. manage.sh used that status to launch tmux jobs, allowing frontend builds to race with ownership changes to /opt/rustup and Cargo setup. On a fresh container, rustup could fail with Permission denied before the frontend watcher started. Nginx would later serve the existing JavaScript, leaving source changes absent from the running app despite restarting devenv. Wait for nginx's local health endpoint before launching the jobs. Nginx starts after entrypoint setup, so its response confirms that setup has finished. Allow up to 120 seconds and report a timeout without starting the jobs if initialization does not complete. Validation: shell syntax and whitespace checks pass. AI-assisted-by: gpt-6 * ♻️ Share the login modal with MCP authorization Extract the viewer login modal and its styles into a shared auth component, retaining the viewer wrapper and its close behavior. Use the modal on the MCP approval page and preserve the pending request through login. Closing it clears the saved return URL and shows a cancellation message without further actions. Cover return URL handling and cancellation with frontend tests. AI-assisted-by: gpt-6 * ✨ Show client icons in MCP authorization Preserve HTTPS logo URLs from client registration and published metadata and show the icon beside the application name on the approval page. Ignore unusable URLs and hide failed images without blocking approval. Update the access description to refer to MCP connections established from Penpot. Cover logo metadata and approval responses in backend tests. AI-assisted-by: gpt-6 * 🐛 Follow the system theme when no preference is configured Default to the system theme in the shared resolver used by the app and plugins. Preserve explicit light and dark choices, including the legacy default value that means dark. Reuse the reactive theme hook in progress widgets and show the system preference in settings for accounts without a configured theme. Verify preference resolution with regression tests and browser checks. All 1,474 frontend tests pass. AI-assisted-by: gpt-6 * 🐛 Replace expired MCP tokens during OAuth approval Settings can give an MCP token an expiry date. OAuth approval reused the newest MCP token without checking it, so an expired token reached the client and never matched a plugin connection. Approval now treats an expired token as missing and creates a new one. Token exchange rejects a code whose token expired after approval with invalid_grant. AI-assisted-by: claude-opus-5-5 * 🐛 Log unexpected errors on MCP OAuth endpoints The OAuth routes sit outside the shared HTTP middleware, so the shared error handler never saw them, and their own handler turned unexpected failures into a 503 without logging anything. Failures in the session middleware of the approval endpoints had no handler at all. Unexpected failures now also go through the shared error handler for its logging, while clients still get an OAuth error body. The OAuth error handler also wraps the session middleware of the approval endpoints. AI-assisted-by: claude-opus-5-5 * 🔧 Add devenv script to run the MCP server with OAuth start-mcp-devenv-oauth starts the MCP server in multi-user mode with PENPOT_MCP_AUTH_URI derived from PENPOT_PUBLIC_URI, to test OAuth in the devenv. Agentic tooling still uses the single-user start-mcp-devenv. AI-assisted-by: claude-opus-5-5 * 🐛 Fix failing test case --------- Co-authored-by: alonso.torres <alonso.torres@kaleidos.net> |
||
|
Eva Marco
|
8951c57ee6 |
♻️ Use DS buttons and icons in the dashboard fonts page (#12533)
* ♻️ Use DS buttons and icons in the dashboard fonts page The fonts page moves off the deprecated icons and raw buttons: - "Add custom font", "Upload all", "Upload" and "Save" become DS primary buttons and "Dismiss all" a secondary one. - The remove, cancel and menu controls of the font rows become ghost DS icon buttons named "Remove", "Cancel" and "Options"; the menu one says whether its menu is open. Two of them were spans. - The delete control of a font style was a span; it is now a button named "Delete font style" with the DS close icon, still shown only on hover. - The warning and empty list icons use the DS icons. The loading placeholder keeps the legacy loader: there is no DS one. The font menu offset grows by the 6px the taller menu button added, so the menu opens where it did. New key: dashboard.fonts.delete-variant (en, es). A visual test covers a font ready to upload, the style hover, the font menu and the edition row. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard fonts styles to logical properties Physical sizes, offsets, margins and paddings become logical properties and the DS typography module is used without a namespace. The element selectors (section title, inputs, hero text) stay, with a comment: they have no class. The shared dashboard header styles (common-dashboard) still come from refactor/: ten dashboard modules use them, so they move in their own change. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Use the DS loader and heading in the dashboard fonts page The fonts loading placeholder used the legacy loader icon, drawn as an outline in a 32px box. It now uses the DS loader*, the same animated pencil as the other dashboard loading screens. Its box is 9px tall, so the label moves 6px up. The section title h3 is now a heading* with the title-small typography and its own class, so the SCSS no longer styles the bare element. The legacy loader icon has no other use, so its SVG and def are gone. AI-assisted-by: claude-opus-5-5 * ♻️ Give the dashboard fonts inputs and hero text classes The font name and search inputs and the hero text get their own classes instead of bare input and p selectors, and the hero title uses the DS heading with title-large instead of the global h2 rule. The title keeps its 24px size and weight; the DS line height (1.4 instead of 1.15) moves the hero content about 6px down. AI-assisted-by: claude-opus-5-5 * 🐛 Give the fonts placeholder icon its color back Removing the legacy loader also removed the .icon svg rule, which gave the empty placeholder text icon its color, so the icon had none. The icon now has its own class with the secondary foreground color, and the wrapper div without styles goes. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
980ed0a719 |
♻️ Use DS icon buttons to close the subscription dialogs (#12539)
* ♻️ Use DS icon buttons to close the subscription dialogs The close buttons of the five subscription dialogs (plan management, success, Nitrate subscription, contact sales and manual cancel) were raw buttons with no name. They become ghost DS icon buttons named "Close"; the class that places them in the corner goes on the tooltip wrapper, so they stay where they were and only show the DS hover. The plans page link-style buttons stay raw: they have no DS equivalent. A visual test covers the plans page and the plan management dialog. AI-assisted-by: claude-opus-5-5 * ♻️ Move settings subscription styles closer to the DS The settings subscription stylesheet inlines the deprecated button-style mixin and %button-icon placeholder, resolves its legacy color aliases and font weight, uses logical properties and the DS typography module without a namespace. The rules on icon svgs that have no class keep a comment; two that match nothing (the dropdown arrow svg and .radio-btns) are commented out with a TODO. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the settings subscription The SCSS refactor of the settings subscription left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .icon-dropdown svg, .radio-btns, .radio-btns label. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Give the subscription icons classes and drop unused props Review fixes for the subscription styles: - The plan icon span sets the letter color with color, not stroke on a bare svg, and drops fill, stroke-width and color: transparent, which do nothing on a span. - The plan icon border uses $b-2 (was 1.75px), so it is 0.25px thicker. - The letter gets its own class for its 2.25px stroke. With the default stroke it looks too thin next to the border. - The open link and editors arrow icons get a cta-icon class instead of the bare svg selector, and take the button color. The arrow used an icon-dropdown class with no rule. AI-assisted-by: claude-opus-5-5 * ♻️ Use the DS stroke width and color in the subscription icons The plan letter and the member icons keep the DS stroke width (the plan letter line gets thinner), the member icons set their color instead of the stroke, and the props copied from the button icon placeholder go. The success dialog logo gets its own class instead of a bare svg selector. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
1109e38852 |
♻️ Use DS icons in the dashboard lists and placeholders (#12536)
* ♻️ Use DS icons in the dashboard lists and placeholders The trash project options button becomes a ghost DS icon button, as in the projects list, and says whether its menu is open. The search placeholders, the empty project "create new file" button, the comments placeholder and the legacy import library tag use the DS icons. The legacy search icon had no fill rule, so its lens was filled black; the DS one is not. Two fixtures make the trash testable: a deleted project, and deleted files due in 2100 (the existing ones expired in 2024, so the trash dropped them). A visual test covers the trash row, the empty project button, the project rename field and the comments placeholder. AI-assisted-by: claude-opus-5-5 * 🐛 Remove the hidden close control from the dashboard rename field The rename field of dashboard projects and files had a close control next to the input that never showed: its legacy icon is drawn with a stroke, but the styles only set a fill. It could not be reached with the keyboard or a screen reader, and a click on it did what leaving the field does: the blur saves the name first, and its handler saved it too. It only left a pointer cursor over an empty spot. Enter, Escape and leaving the field keep working as before. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard trash, comments and rename styles to the DS The trash, comments panel and rename field stylesheets resolve their legacy color aliases, sizes, font sizes, mixins and the menu shadow to DS tokens and values, and use logical properties. The comments panel and the rename field no longer import refactor/; the trash keeps only the shared dashboard header styles (common-dashboard), used by ten dashboard modules. Four selectors that the modules do not use are commented out with a TODO. The comments dropdown z-index (4) has no DS token and keeps a TODO. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard trash and comments The SCSS refactor of the dashboard trash and comments left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .thread-group, .comments-icon-small, .add-file-btn, .add-icon. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Use px2rem for the unread dot size in dashboard comments The unread dot used $sz-8, which the DS sizes do not define, so the integration bundle build failed. It now uses px2rem(8), the same 8px. AI-assisted-by: claude-opus-5-5 * ♻️ Use DS typography and z-index in the dashboard comments Review fixes for the dashboard lists styles: - The comments dropdown title uses the headline-small typography. It was 11px regular, so it is now 12px medium (larger and bolder). - The comments dropdown uses --z-index-dropdown instead of a raw 4. - The rename field selector is the class alone; the input type is not needed to win over the input defaults (0px change). The visual test now also captures the whole comments dropdown, so the title change shows. AI-assisted-by: claude-opus-5-5 * 🔥 Remove dead rules from the dashboard comments styles The comments dropdown has no separators, so its hr rule matched nothing, and the comments icon set the default stroke width. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
4d416bd3f2 |
♻️ Use DS icons and buttons in the settings sidebar and email modal (#12541)
* ♻️ Use DS icons and buttons in the settings sidebar and email modal - The settings sidebar back arrow and "Contact us" icon use the DS icons. The arrow keeps its place; the small DS icon draws 12px inside a 16px box, so the feedback icon sits 2px to the right and its margin shrinks to keep the label in place. - The change email modal close button becomes a ghost DS icon button named "Close"; the class that places it goes on the tooltip wrapper. The form submit buttons of the settings pages stay: they are the shared forms submit button. A visual test covers the settings sidebar and the change email modal. AI-assisted-by: claude-opus-5-5 * ♻️ Move settings sidebar and email modal styles to the DS The settings sidebar no longer imports refactor/: its legacy mixins, sizes and color aliases resolve to DS values and tokens, with logical properties. Its z-index (1) has no DS token and keeps a TODO. The change email modal does the same and keeps refactor/ only for the modal placeholders (%modal-*), which move with the modals refactor. Its legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px): the modal grows 2px. Two unused selectors are commented out with a TODO. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the change email modal The SCSS refactor of the change email modal left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .select-title, .cancel-button. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Tidy the settings sidebar and change email styles The sidebar uses --z-index-panels instead of auto, the change email submit button gets its own class instead of a bare button selector, and the sidebar icons keep the DS stroke width (only the feedback icon line gets thinner). AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
b1018c77b7 |
♻️ Use DS icons in the legacy context notification (#12542)
* ♻️ Use DS icons in the legacy context notification The legacy context notification (still used by the global context notifications, the fonts page, the team, change email, delete account and export modals) draws its level icon with the DS icons instead of the deprecated icon set, colored through the color property. The icons are the same drawings, so nothing changes on screen. The component stays: the DS context notification has no links, which the global context notifications use. A visual test covers the info and warning levels and a warning with html content. AI-assisted-by: claude-opus-5-5 * ♻️ Move the legacy context notification styles to the DS The legacy context notification no longer imports refactor/: its sizes, spacing, borders and alert color aliases resolve to DS tokens, with logical properties. The legacy body-small typography becomes the DS one, which differs only in its line height (1.3 instead of 1.4): one line notifications do not change, and multi-line ones are about 1.5px shorter per extra line. The unused .default level is commented out with a TODO. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the legacy context notification The SCSS refactor of the legacy context notification left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .default. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
08228324db |
♻️ Use DS icons in the dashboard templates section (#12535)
The arrow and add icons of the dashboard libraries and templates section use the DS icons and get their color from the color property. The collapse button says whether the section is expanded, and the left scroll button, which had no name, is now named "Previous". The scroll buttons stay raw: they are round 36px buttons with no DS equivalent. The template cards are anchors without href; they go to the anchors backlog. A new fixture lists eight builtin templates, and a visual test covers the cards, a card hover, the scroll buttons and the collapsed title. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
c05b2e2ead |
♻️ Use DS buttons and icons in the share link modal (#12562)
* ♻️ Use DS buttons and icons in the share link modal - The close button becomes a ghost DS icon button named "Close"; the class that places it goes on the tooltip wrapper. - "Get link", "Destroy link" and the confirmation buttons were raw inputs; they become DS primary, destructive and secondary buttons. - The copy link button stays a raw segment of the link field; its icon becomes the DS clipboard icon, a bit larger than the legacy drawing. - "Manage permissions" stays a link-style toggle; its arrow becomes the DS icon (the rotation still shows the state) and it says whether the permissions are expanded. The page checkboxes and the permission selects stay for their own groups. A new create share link fixture and a visual test cover the modal before and after getting a link, with the permissions expanded, and the destroy confirmation. AI-assisted-by: claude-opus-5-5 * ♻️ Move share link modal styles closer to the DS The share link stylesheet resolves its legacy sizes, spacing, mixins, z-index and color aliases to DS values and tokens, with logical properties. The copy button inlines %button-secondary with local color variables, so it looks the same at rest, on hover, on focus and while pressed; the visual test now also covers its hover. The legacy typographies become the DS ones, each differing in one detail: the title and "Manage permissions" use headline-small (12px instead of 11px) and the texts body-small (line height 1.3 instead of 1.4), so the modal changes height by about 1px. refactor/ stays only for the modal container, the link input and the page checkboxes. AI-assisted-by: claude-opus-5-5 * ♻️ Use a DS icon button for the share link copy button The copy button next to the link was a raw button with the secondary button styles inlined in share_link.scss. It is now a secondary icon-button* named "Copy link", so the .copy-button block goes away (review feedback). Visible changes: the DS secondary look (grey icon at rest, no lighter background on hover) and a 32px wide button instead of 28px, so the link text ends 4px earlier. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
ac52c41903 |
♻️ Use DS icons in the comments panel filter (#12561)
* ♻️ Use DS icons in the comments panel filter The comments panel filter (workspace and viewer sidebar) draws its trigger arrow and menu ticks with the DS icons, as the viewer comments filter does. The trigger button says whether its menu is open (aria-expanded, aria-haspopup). The menu items stay: they move with the menus group. The dropdown item placeholder styles any svg inside a span with a 12px box and a stroke color, so the tick icon class sets its 16px box and currentColor stroke. Nothing changes on screen. A visual test covers the trigger and the open menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move comments panel styles closer to the DS The comments panel stylesheet resolves its legacy sizes, spacing, mixins and color aliases to DS values and tokens, with logical properties, and inlines the asset element placeholder of the filter trigger. refactor/ stays only for the dropdown placeholders, which move with the menus group. The legacy body-small typography becomes the DS one, which differs only in its line height (1.3 instead of 1.4): the menu labels sit 1px higher. The trigger looks the same at rest and on hover; the visual test now also covers the hover. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
f6f9df9a1a |
♻️ Use DS icons in the layer row buttons (#12477)
* ♻️ Use DS icons in the layer row buttons The expand, visibility and lock buttons of the layer rows drew their icons with the deprecated icon set (arrow, shown, hide, unlock, lock). Use the DS icon instead. The buttons stay raw: they are segments of the layer row, with backgrounds that follow the row state. The icons get a class each, so their colors move from svg rules to those classes, and they keep the old stroke weight. The DS icon draws 12px inside a 16px box: - The expand button start padding goes from 8px to 6px, so the arrow stays in place. - The visibility and lock buttons leave 12px for the icon, so their icons do not shrink (flex-shrink: 0) and stay centered, uncut. The rows look the same as before, pixel for pixel. Add a visual test with a selected, hidden and blocked layer and a hovered row. AI-assisted-by: claude-opus-5-5 * ♻️ Move the layer name styles off the deprecated styles The layer name and its rename input used the deprecated body-small typography, mixins, spacing and token aliases. They now use the DS body-small typography, sizes, borders and px2rem(), and the layer row color aliases resolve to their DS tokens, in layer_item.scss too. The DS body-small has a 1.3 line-height instead of 1.4, so the layer names sit 1px higher. The name color is one local variable for every state; the rename input sets it too, since it also has .element-name. A visual test now covers the rename input. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
c26a67a8dd |
♻️ Use a DS button for previous in the onboarding questions (#12550)
* ♻️ Use a DS button for previous in the onboarding questions The "Previous" button of the onboarding questions becomes a DS secondary button; it was a raw button with the deprecated modal cancel styles. It is a bit narrower and its label uses the DS typography. "Next" stays: it is the shared forms submit button. The "Other" option icon stays too: it belongs to the forms image radio buttons, which move with the radio buttons group. A visual test covers the step 2 buttons at rest and with "Previous" hovered. AI-assisted-by: claude-opus-5-5 * ♻️ Move onboarding questions styles closer to the DS The onboarding questions stylesheet resolves its legacy modal color aliases to DS tokens, uses logical properties and the DS typography module without a namespace. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. No visual change (checked on steps 1 and 2; only the shuffled options differ between runs). AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
29e79edc66 |
♻️ Use DS buttons and icons in the dashboard team pages (#12531)
* ♻️ Use DS buttons and icons in the dashboard team pages The team pages (members, invitations, webhooks and settings) and their modals move off the deprecated icons and raw buttons: - The member and webhook row menus become ghost DS icon buttons named "Options", with aria-expanded. - The member and invitation role selectors become buttons with aria-haspopup and aria-expanded, and use the DS arrow icon. They were divs; one carried a role and an id repeated on every row. - The four modal close buttons become ghost DS icon buttons named "Close"; the class that places them goes on the tooltip wrapper. - "Create webhook" becomes a DS primary button. - The webhook status, team image and settings icons use the DS icons. The invitation checkbox tick stays until the checkbox migration. A visual test covers the role and row menus, the resend and webhook modals and the team image overlay. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard team styles to logical properties and DS tokens The remaining legacy color aliases resolve to their DS tokens, physical offsets and margins become logical properties, and the DS typography module is used without a namespace. Four selectors that team.cljs does not use are commented out with a TODO. refactor/ stays only for component-family placeholders: %input-checkbox and %checkbox-icon (checkboxes) and %modal-* (modals). The shared dashboard header styles (common-dashboard) are used by ten dashboard modules and move in their own change. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Open the team row menus below their button The member and webhook row menus were placed from the bottom of their cell with a fixed offset, so their position depended on the menu height and the button height. The two-item webhook menu covered its button, the member menu covered the lower part of it, and the taller DS icon button moved both 3px down. They now open 4px below the button. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard team pages The SCSS refactor left four rules commented out with a TODO because team.cljs does not use them. CSS modules scope the classes to this module and no other source uses them, so they go: .dashboard-top-cta, .error-notification, .empty-invitations-buttons and .invitations-dropdown. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Find the member role selector as a button in the dashboard test The "Bug 9443" test looked for the member role selector as a combobox. The selector is now a button with aria-haspopup, so the test failed in CI. It now looks for a button named "Admin", and checks that the owner has no such button. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
112e6dedd7 |
♻️ Use DS icons in the copy button (#12558)
* ♻️ Use DS icons in the copy button The shared copy button (Inspect attribute rows and code blocks, share link, integrations) draws its clipboard and tick icons with the DS icons at the small size, colored through the color property. The button itself stays: it wraps whole rows. The icons are the same drawings, so nothing changes on screen. A visual test covers an Inspect computed attribute row and the code block copy button, at rest, on hover and after copying. AI-assisted-by: claude-opus-5-5 * ♻️ Move copy button styles off the deprecated styles The copy button stylesheet no longer imports refactor/: the button-style, flex-center and copy-wrapper-base mixins are inlined with DS values, the tertiary button and icon color aliases resolve to their DS tokens, and physical properties become logical ones. No visual change (whole viewer visual spec compared; the code tab syntax highlighting loads late on a cold first run, with either stylesheet). AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
8800ff4bc9 |
♻️ Use DS buttons and icons in the assets tab (#12559)
* ♻️ Use DS buttons and icons in the assets tab - "Add library" and "Manage library" become DS primary and secondary buttons, full width with the label centered; they keep their test id. - The filter button stays a raw segment of the search bar; its legacy icon becomes the DS filter icon. Its opened state comes before the focus and hover rules, as the legacy placeholder did, so the focus border still shows. - The create/rename group modal gets a ghost DS icon button named "Close", placed on the tooltip wrapper, and DS cancel (secondary) and create/rename (primary) buttons instead of raw inputs. A visual test covers the add and manage library buttons, the filter at rest, on hover and opened, and the create group modal. AI-assisted-by: claude-opus-5-5 * ♻️ Move assets tab styles off the deprecated styles assets.scss no longer imports refactor/: its mixins, sizes, spacing and input / button icon color aliases resolve to DS values and tokens, with logical properties. The unused .sections-container, .section-item and .section-btn rules are deleted (the filter menu is the shared context menu). assets/groups.scss does the same and keeps refactor/ only for the modal placeholders (%modal-*) and %input-with-label. Its legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px): the group modal grows 2px. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
33d304c0af |
♻️ Use DS icons in the dashboard sidebar (#12534)
* ♻️ Use DS icons in the dashboard sidebar The search, clear search, pinned projects placeholder and logout icons of the dashboard sidebar use the DS icons, and they get their color from the color property. The two search buttons had untranslated test names as their labels ("dashboard-search"); they are now named "Search" and "Clear search". The pin keeps its place: the DS small icon draws 12px inside a 16px box, so its margins shrink by 2px. New key: dashboard.clear-search (en, es). The dashboard page object looks the search button up by its new name. A visual test covers the search box with and without a term, the pinned projects placeholder and the profile menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard sidebar styles off the deprecated styles Legacy color aliases resolve to their DS tokens, deprecated mixins, sizes and font variables are inlined with DS values, physical properties become logical ones and the DS typography module is used without a namespace. An invalid max-width with two values, which the browser ignored, is gone. Two rules that match nothing are commented out with a TODO: the profile menu arrow svg rule (the arrow is the DS icon svg itself) and the upgrade plan section, which sidebar.cljs does not use. refactor/ stays only for the profile menu placeholders (%menu-dropdown, %menu-item-base) and the shared dashboard header styles (common-dashboard). No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard sidebar The SCSS refactor of the dashboard sidebar left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .profile-dropdown-item .open-arrow svg, .upgrade-plan-section, .penpot-free, .no-limits, .power-up. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
afd838ea5b |
♻️ Use DS buttons in the dashboard team modals (#12537)
* ♻️ Use DS buttons in the dashboard team modals The close buttons of the create/rename team modal, the team permission notice and the two "before you leave" modals become ghost DS icon buttons named "Close"; the class that places them goes on the tooltip wrapper. The cancel and "promote and leave" inputs of the leave modals become DS buttons: secondary, and destructive once a member is picked (primary and disabled before). Two fixtures make the leave and reassign modal testable (the logged-in user owns the second team, which has another member). A visual test covers the create team modal and the leave and reassign modal. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard team modal styles closer to the DS The change owner and team form stylesheets resolve their legacy color aliases, spacing and typography mixins to DS tokens and use the DS typography module without a namespace. The legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px): the "before you leave" title grows 1px and the modal 2px. Unused selectors are commented out with a TODO. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor, and the input placeholders. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard team modals The SCSS refactor of the dashboard team modals left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .input-wrapper, .cancel-button, &.danger. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
19fc9ebce8 |
♻️ Use DS icons in the viewer flows and interactions menus (#12520)
* ♻️ Use DS icons in the viewer flows and interactions menus The flows and interactions triggers in the viewer header were divs with a click handler, and their menus lived inside them. They are now buttons with aria-expanded and aria-haspopup, and each menu sits next to its button in a wrapper, since a button cannot hold the menu entries. The play, arrow and tick icons use DS icons. The menu entries stay as they are. A visual test covers the interactions menu closed and open; the test files have no flows, and the flows trigger shares its styles. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer interactions styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties. The DS icons take their color from the text and no longer shrink, so the old icon placeholders go away. The DS body-small line-height is more compact, so the trigger labels sit 1px higher. The refactor/ import stays only for the shared menu placeholders. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
9854f8e54f |
♻️ Move dashboard subscription styles off the deprecated styles (#12538)
* ♻️ Move dashboard subscription styles off the deprecated styles The subscription stylesheet inlines the deprecated button-style and flex-center mixins, resolves its legacy color aliases and sizes to DS tokens, uses logical properties and the DS typography module without a namespace. Three rules that match nothing (the arrow svg, .cta-link and .open-arrow) are commented out with a TODO. The subscription controls need no DS change: the plan card, the current plan card and the manage subscription link have no DS equivalent, and they use no legacy icons. refactor/ stays only for the power up menu item placeholder and the shared dashboard header styles. A visual test covers the sidebar plan card (closed and open), the team settings plan and the members seats warnings. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard subscription The SCSS refactor of the dashboard subscription left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .icon-dropdown svg, .cta-link, .open-arrow. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
411f661bdb |
♻️ Use DS buttons in the delete shared libraries modal (#12554)
* ♻️ Use DS buttons in the delete shared libraries modal The delete shared libraries modal (unpublish a library, delete a shared file or project) gets a ghost DS icon button named "Close", placed on the tooltip wrapper, and DS buttons for cancel (secondary) and accept (destructive for the danger style, primary otherwise) instead of raw inputs. The buttons are narrower and the accept button takes the DS destructive red. A new empty library references fixture and a visual test cover the unpublish library modal from the workspace main menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move delete shared libraries modal styles closer to the DS The delete shared libraries stylesheet resolves its legacy modal color aliases to DS tokens, uses a logical property and the DS typography module without a namespace. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. Two unused selectors are commented out with a TODO. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the delete shared libraries modal The SCSS refactor of the delete shared libraries modal left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: &.transparent, .list-wrapper. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
f07452e36b |
♻️ Use DS buttons and icons in the inspect code tab (#12521)
* ♻️ Use DS buttons and icons in the inspect code tab "Copy all code" becomes a DS secondary button, and the expand panel buttons ghost DS icon buttons labelled "Expand panel" (new key, en and es). The collapse toggles of the CSS and markup blocks stay raw buttons, since they sit in a 12px column; their arrow uses DS icons and they get a name and aria-expanded. The copy buttons belong to the shared copy button and move with it. A visual test covers the code tab buttons, expanded and collapsed. AI-assisted-by: claude-opus-5-5 * ♻️ Move inspect code tab styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties. The 11px uppercase titles become the 12px DS headline-small, the only difference. The code typography keeps its values with a TODO: the DS code-font names "Roboto Mono", while the app loads "robotomono". The full-width "Copy all code" DS button centers its label explicitly. The refactor/ import stays only for the copy buttons, styled here until the shared copy button moves to the DS. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
96b62f6475 |
♻️ Use DS buttons in the delete account modal (#12540)
* ♻️ Use DS buttons in the delete account modal The close button of the delete account modal becomes a ghost DS icon button named "Close"; the class that places it goes on the tooltip wrapper. The cancel and delete buttons become DS secondary and destructive buttons, so their labels no longer wrap and the delete button takes the DS destructive red. The delete button keeps its test id. A visual test covers the modal at rest and with the close and delete buttons hovered. AI-assisted-by: claude-opus-5-5 * ♻️ Move delete account modal styles closer to the DS The delete account stylesheet resolves its legacy sizes, spacing, mixins and color aliases to DS tokens and uses logical properties and the DS typography module without a namespace. The legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px), so the title and the content below sit 1px lower. The organization counts used a fixed dark-theme gray; they now use the themed DS secondary foreground. Two unused selectors are commented out with a TODO. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the delete account modal The SCSS refactor of the delete account modal left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .fields-row, .select-title. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
376ecda94e |
♻️ Move viewport top bar styles off the deprecated styles (#12488)
* ♻️ Move viewport top bar styles off the deprecated styles The viewport top bars (view only bar of the inspect tab, path edition bar) already use DS buttons. Move top_bar.scss to DS sizes, borders, spacing tokens and logical properties, resolve the panel and shadow color aliases, and drop the refactor import. The unused done-btn class, the last user of the deprecated button placeholders here, goes away. The two z-index values have no DS token, so they stay with a TODO. Add a visual test of the view only bar; it looks the same as before, pixel for pixel. AI-assisted-by: claude-opus-5-5 * ♻️ Use the body-small typography in the viewport top bar title The title only set a 12px font size, which body-small already has. Use the DS typography instead of the inline size and its TODO. The view only bar looks the same, pixel for pixel. AI-assisted-by: claude-opus-5-5 |
||
|
Filip Sajdak
|
576bf4ed3d |
✨ Close search and shortcuts panels with Escape (#12374)
* ✨ Close search and shortcuts panels with Escape The workspace search and shortcuts panels could only be dismissed with the mouse, which interrupts keyboard-first workflows. A new use-escape-to-close hook gives each panel an on-key-down handler that closes it on Escape while the user is working in it: the latest pointer press or focus change must have landed inside the panel, or the panel must hold focus when it opens (a panel that autofocuses its search box, such as Shortcuts, is closed by the first Escape). Focus left behind in a panel after the user moved on to the canvas does not count, so Escape keeps its usual meaning there. The handler never stops the event. The global Escape shortcut still runs and finishes in-progress operations such as path drawing; an earlier version stopped propagation and left a half-drawn path that failed shape validation on the next commit. In the search panel an open filters menu takes the first Escape and the panel closes on the second. The history panel needs no handler: Escape already closes it through the :interrupt it emits. Closes #9540 AI-assisted-by: claude-opus-5-5 AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> * 📎 Add e2e test for closing panels with Escape Cover the Escape handling added for the layers search and shortcuts panels with four Playwright cases on the mocked workspace: - Escape closes the layers search panel. - With the search filters menu open, the first Escape closes only the menu and the second closes the panel. - Escape closes the shortcuts panel right after it opens with `?`. The panel autofocuses its search box, so the first Escape must close it instead of only blurring the box. - A path drawn while focus sits in the shortcuts panel is finished by Escape, which proves the panel does not swallow the global shortcut. The first three cases fail on develop. The shortcuts case also fails when the hook does not seed its tracker from the focused element. AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> * 🐛 Close History with Escape when opened by shortcut or menu Only the header button opened History through initialize-history, which removes the :document-history flag on the next :interrupt. The Ctrl/Cmd+Alt+H shortcut and the "Version history" menu item toggled the flag directly, so the global Escape left the panel open. Both now emit initialize-history, like the header, and keep their own event origin. Two e2e cases cover the shortcut and the menu; both fail without this change. AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> * ♻️ Apply review suggestions to Escape-to-close Use dom/child? instead of .contains in the Escape hook and drop the redundant nil checks. Drive the path test through clickAt so its clicks wait for the path tool. Add a negative Search case: Escape reaches the panel after the last click landed on the viewport, and the panel stays open. That case fails when the containment check is removed. AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> --------- Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> |
||
|
Eva Marco
|
e24e9dc747 |
♻️ Use DS buttons and icons in the viewer header (#12523)
* ♻️ Use DS buttons and icons in the viewer header The section buttons, full screen and edit become ghost DS icon buttons (the last two were spans), with aria-pressed where they toggle. Share and "Log in or sign up" become DS buttons. The zoom widget becomes a button that toggles its menu, like the workspace one, with DS zoom buttons inside. The breadcrumb and the current board name become buttons with aria-expanded, and the page menu moves next to its button. The arrow and tick icons use DS icons. The logo stays: it is brand art. A visual test covers the header in two sections and both menus. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer header styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties, and the button placeholders go away. The section buttons column goes from a fixed 92px to auto, since the three 32px DS buttons no longer fit; the 1fr side columns keep it centered. The zoom widget follows the workspace header one. The 11px project name becomes the 12px DS headline-small. The global .selected rule also highlighted the current page in the page menu: that row keeps its highlight through its own rule. The refactor/ import stays only for the shared menu placeholders; the options z-index (10) has no DS token and keeps a TODO. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
48a5875a71 |
♻️ Use DS icon buttons in the viewer board navigation (#12527)
* ♻️ Use DS icon buttons in the viewer board navigation The previous, next and first board buttons of the viewer become secondary DS icon buttons with the DS arrow and reload icons. They keep their size and the viewer background at rest; on hover they take the DS secondary look. The first board button had no accessible name; it is now labelled. The position classes move to the tooltip wrappers, so the fullscreen and comments sidebar offsets still apply. New key: viewer.go-to-first-board (en, es). A visual test covers the buttons at rest and on hover. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties, and the file no longer imports refactor/. The section scrollbar uses the DS custom-scrollbar mixin; the text selection and placeholder styles that %new-scrollbar gave to the comments layer stay, with DS tokens of the same value. An invalid padding-right with four values, which the browser ignored, is gone. The DS body-small typography differs from the old one only in a more compact line-height, so the board counter sits 1px higher. The z-index values (10, 2) have no DS token and keep a TODO. The .viewer-header, .not-fixed, .fixed and .frame-children rules are not used by this module and are commented out with a TODO. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the viewer The SCSS refactor of the viewer left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .viewer-header, .not-fixed, .fixed, .frame-children g. No visual change. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
a5fd2df1f0 |
♻️ Make the grid track direction icon and the swap groups buttons (#12476)
* ♻️ Make the grid track direction icon a button The direction icon at the start of each grid track value field selected that column or row from a div with a click handler: no button role, no name and no keyboard access. Make it a button labeled "Select column" or "Select row", keeping its class and handler, and reset the browser border so it looks the same. It stays a raw button: it is a segment of the track field, not a DS button. Add the workspace.layout-grid.editor.select-column and select-row keys (en, es). AI-assisted-by: claude-opus-5-5 * ♻️ Make the component swap panel groups buttons The groups of the component swap panel opened from a div with a click handler: no button role and no keyboard access. Make each group a button, keeping its class, title and handler, and reset the browser button styles so it looks the same. Its name is the visible group name. Add a visual test with a fixture whose components sit in two groups, so the swap panel lists them. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
bac62a27bf |
♻️ Use DS icons in the viewer comments filter (#12519)
* ♻️ Use DS icons in the viewer comments filter The "Comments" filter trigger in the viewer header was a div with a click handler, and its menu lived inside it. It is now a button with aria-expanded and aria-haspopup, and the menu sits next to it in a wrapper, since a button cannot hold the menu entries. The arrow and the ticks use DS icons. The menu entries stay as they are. A visual test covers the filter closed and open. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer comments styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties. The DS icons take their color from the text and no longer shrink, so the old icon placeholders go away. The DS body-small line-height is more compact, so "Comments" sits 1px higher. The refactor/ import stays only for the shared menu placeholders. The z-index values (1 and 10) have no DS token and keep a TODO. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
ef17aea39e |
♻️ Use DS icon buttons in the viewer thumbnails panel (#12518)
* ♻️ Use DS icon buttons in the viewer thumbnails panel The expand, close and scroll buttons of the viewer thumbnails panel become ghost DS icon buttons. They had no accessible name; they are now labelled, and the expand button says whether the panel is expanded. The rotated legacy arrow gives way to the DS arrow icons. The thumbnails stay raw buttons, since they are list items. New keys: labels.expand and viewer.thumbnails.scroll-left/right (en, es). A visual test covers the panel collapsed, on hover and expanded. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer thumbnails panel styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties, and the file no longer imports refactor/. The scroll buttons keep their 60px height through --button-height and still show only on hover; their tooltip wrappers take the grid cells. The DS body-small typography differs from the old one only in a more compact line-height, so the counter and the board names sit 1px higher. The panel z-index (10) has no DS token and keeps a TODO. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
9911f82087 |
♻️ Use a DS icon in the grid editor track options button (#12486)
* ♻️ Use a DS icon in the grid editor track options button The options button of each grid track on the canvas drew a deprecated icon and had no accessible name. Use the DS menu icon and label the button "Track options". The button stays raw: it lives on the canvas, where the track editor keeps a fixed screen size at any zoom. The DS icon has a fixed 16px size, so its class scales it down with the zoom (transform: scale(1 / zoom)), as the old svg rule did with its width. It looks the same, but for a few antialiasing pixels. Add the workspace.layout-grid.editor.track-options key (en, es) and a visual test of a track at two zoom levels. AI-assisted-by: claude-opus-5-5 * ♻️ Move grid editor styles off the deprecated styles Move grid_layout_editor.scss to DS sizes, borders, spacing tokens, colors and logical properties, and drop the refactor import. The canvas sizes keep their division by the zoom. The grid editor color aliases resolve to their DS tokens, and the unused close-btn class, the last user of the deprecated button placeholders here, goes away. The track editor and the editing bar look the same as before. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
7ff8df6ffb |
♻️ Name the grid track expand buttons and make the annotation toggle a button (#12489)
* ♻️ Name the grid track expand buttons The menu button that expands the columns or rows of a grid layout had no accessible name. Label it "Columns" or "Rows" and expose its state with aria-expanded. The track title next to it also toggles on click; it stays a div, as a larger pointer target for the same action, so the keyboard does not stop twice on it. Add the workspace.layout-grid.editor.columns and rows keys (en, es). AI-assisted-by: claude-opus-5-5 * ♻️ Make the annotation title toggle a button The annotation title of a component toggled from a div with a click handler, and it holds the edit, delete, save and discard buttons, so it cannot become a single button. Move the toggle to a button with the arrow and the "Annotation" name, with aria-expanded, that takes the whole free width of the title. While editing or creating, the title stays text and no longer collapses the annotation on click, as its cursor already suggested. Extend the annotation visual test with the collapsed state; it looks the same as before, pixel for pixel. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
ac08e38c1a |
♻️ Use DS buttons and icons in the export assets modal (#12517)
* ♻️ Use DS buttons and icons in the export assets modal The export modal close button becomes a ghost DS icon button and the progress toast close button an action one, which fits its 24px grid column; both are labelled "Close". Cancel and Export become DS buttons. The checkbox ticks and the toast icons use DS icons. The selection rows stay raw buttons, since they are list rows, and so does the link-styled retry/cancel button of the toast. The export frames e2e spec now finds the Export button by role, and a visual test covers the modal with all, some and no rows selected. AI-assisted-by: claude-opus-5-5 * ♻️ Make the export progress ring a button The export progress ring in the header opens the export details, but it was a div with a click handler. It is now a button named after the export status, with aria-expanded, and keeps its look. AI-assisted-by: claude-opus-5-5 * ♻️ Move export assets modal styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties, and the button placeholders go away. The classes left without use are removed: the old modal buttons, the old close icon, and the file export entries, which live in files.scss. The refactor/ import stays only for the shared modal and checkbox placeholders, which move to the DS with the modals and the checkboxes. The checkbox placeholder shrinks a ticked icon to 12px, which pushed the DS tick off center: the tick keeps its 16px box now, and does not shrink inside the 14px flex box either. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
29b00f8535 |
♻️ Use DS icons in the text palette and its menu (#12452)
* ♻️ Use DS icons in the text palette and its menu The scroll arrows of the text palette and the tick of the selected palette in its menu used deprecated icons; use the DS arrow and tick icons instead. The arrows are full-height scroll buttons with a fade, not DS button sizes, so they stay raw buttons. Add a visual test that opens a file with 16 local typographies, so the arrows show, and captures the palette at rest, with the pointer over the right arrow, after scrolling and with its menu open. Its fixture is the library fixture with more typographies. AI-assisted-by: claude-opus-5-5 * ♻️ Move text palette styles off the deprecated styles Inline the button, flex and ellipsis mixins, move spacing, sizes and borders to DS tokens and logical properties, and resolve the color aliases to their DS tokens. The arrow, item and menu colors that change on hover, disable or selection go through local variables, and the new icons take them through currentColor instead of svg selectors. The three typography lines share their ellipsis rule. The .disabled ::after rule of the left arrow never matched and goes away; :disabled::after already covers it. The items, the empty message and the menu use the DS body-small typography, whose line-height is 1.3 instead of 1.4. The arrows keep their z-index, now commented, and the menu its legacy context menu one. text_palette.scss and text_palette_ctx_menu.scss no longer import refactor/. AI-assisted-by: claude-opus-5-5 * 🐛 Show the text palette scroll arrows at rest The enabled scroll arrows of the text palette had no color at rest, so they only showed on hover, while the color palette arrows show in the secondary color. Give them the same rest color. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
904f456c61 |
♻️ Use DS icons in the color palette and its menu (#12444)
* ♻️ Use DS icons in the color palette and its menu The scroll arrows of the color palette and the tick of the selected palette in its menu used deprecated icons; use the DS arrow and tick icons instead. The arrows are full-height scroll buttons with a fade, not DS button sizes, so they stay raw buttons. The color cells are swatches and stay as they are. Add a visual test that opens a file with 24 local colors, so the arrows show, and captures the palette before and after scrolling and with its menu open. Its fixture is the library fixture with more colors. AI-assisted-by: claude-opus-5-5 * ♻️ Move color palette styles off the deprecated styles Inline the button, flex and ellipsis mixins, move spacing, sizes and borders to DS tokens and logical properties, and resolve the color aliases to their DS tokens. The arrow and menu item colors that change on hover, disable or selection go through local variables, and the new icons take them through currentColor instead of svg selectors. The empty palette message and the menu items use the DS body-small typography, whose line-height is 1.3 instead of 1.4. The arrows keep their z-index, now commented: the left arrow comes before the positioned color list, so without it the colors would cover its fade. The menu keeps its legacy context menu z-index, also commented. color_palette.scss and color_palette_ctx_menu.scss no longer import refactor/. AI-assisted-by: claude-opus-5-5 |
||
|
Eva Marco
|
6acb360f4a |
♻️ Use DS icons and an icon button in the undo history panel (#12472)
* ♻️ Use DS icons and an icon button in the undo history panel The undo history panel (History > Actions) drew its entry type icons with the deprecated icon set, and the arrow that shows the details of an entry was a div with a click handler: no button role, no keyboard access and no accessible name. - The entry type icons use the DS icon (drop-icon is i/drop in the DS). - The arrow becomes a DS action icon button labeled "Show details", with aria-expanded for its state. It keeps its data attribute, its classes and its click handler, and it also shows on keyboard focus. The DS icon draws 12px inside a 16px box, so the entry icon gets a negative margin, and the button wrapper a negative end margin: icon, arrow and text stay where they were. The arrow turns through its own class instead of an svg rule. Add the workspace.undo.entry.show-details key (en, es) and a visual test that draws a rectangle, opens the actions list and expands the entry. AI-assisted-by: claude-opus-5-5 * ♻️ Move undo history panel styles off the deprecated styles Move history.scss to DS tokens, sizes, borders and logical properties, and drop the refactor import. The entry color aliases become local variables of the entry, set by its disabled and hover states, and the arrow opacity goes through one as well. AI-assisted-by: claude-opus-5-5 * 💄 Place the undo history icon and arrow without negative margins Drop the -2px margin of the entry icon and the -6px end margin of the details button wrapper. Keep text and arrow in place with token spacing instead: the text after the 16px icon box starts with --sp-xs instead of --sp-s, and the entry end padding is --sp-xxs, since the 24px button leaves 6px around its 12px arrow. The icon now sits 2px to the right, centered in its box. AI-assisted-by: claude-opus-5-5 |