mirror of
https://github.com/penpot/penpot.git
synced 2026-10-29 14:00:37 +00:00
5259b4b2d5
* ♻️ Use DS buttons in the workspace right header The comments and history buttons were raw buttons with deprecated icons; they become DS ghost icon buttons that show their state through aria-pressed, with the unread dot as a child of the comments button. The view mode link had a click handler and no href; it becomes a DS icon button too, so it gets a button role and keyboard activation. Their tooltips open below and to the left, at the top right corner of the screen. The zoom menu's Reset is a DS ghost button. The share link stays raw with its deprecated icon until the DS has a share icon; it now uses its own class instead of the view mode one. Add a visual test that captures the header at rest, with comments active, and with the zoom menu open. AI-assisted-by: claude-opus-5-5 * ♻️ Move workspace right header styles off the deprecated styles The comments, history and view mode buttons are DS icon buttons, so their placeholders go away; the comments class only holds the unread dot. The zoom widget color goes through a local variable, and spacing, sizes, borders and the color aliases move to DS tokens and logical properties. Delete the save status rules: the status widget moved to the left header in #5773 and nothing here uses them anymore. refactor/ stays only for the shared menu placeholders and for the tertiary button and icon placeholders of the share link. AI-assisted-by: claude-opus-5-5 * 🐛 Give the action icon button a color while pressed or active The action variant of the DS icon button set the active background but not the active foreground, so it kept the base value, initial. A custom property set to initial is invalid at computed time, so the icon took the color of its container while the button was pressed (:active) or toggled on (aria-pressed): yellow in the workspace header, for example. Use the accent color, as the ghost and secondary variants do. AI-assisted-by: claude-opus-5-5 * 💄 Use the action variant for the right header icon buttons The comments, history and view mode buttons had no background at rest, on hover or while active. The DS action variant keeps that: no background at rest and on hover, accent icon on hover. It is 24px instead of the ghost 32px, and shows a small background while comments or history is on. The unread dot moves to 4px from the button corner, so it stays over the top right corner of the icon in the smaller button. AI-assisted-by: claude-opus-5-5 * 💄 Drop the background of a pressed action icon button A toggled-on action icon button (aria-pressed) showed the quaternary background next to the accent icon. Keep only the accent icon, as the workspace header buttons looked before the DS migration. The background stays for the click feedback (:active). Only the right header comments and history buttons use the action variant with aria-pressed today. AI-assisted-by: claude-opus-5-5 * 💄 Widen the gap between the right header actions The action icon buttons are 24px wide, smaller than the old ones, so the comments, history and view mode buttons sat closer together than before the DS migration. Raise the header gap from --sp-s to --sp-m to keep the old spacing between the icons without resizing the buttons. The separator absorbs the extra space, so the header width stays the same. AI-assisted-by: claude-opus-5-5 * ♻️ Make the right header zoom widget a button The zoom percentage of the right header opened its menu from a div with a click handler: no button role and no keyboard access. Make it a button with aria-expanded, keeping its classes, title and handler; its visible percentage is its accessible name. Reset the browser padding of the button so the percentage stays in place. AI-assisted-by: claude-opus-5-5 * ✨ Toggle the zoom dropdown from the zoom widget Clicking the zoom widget while its dropdown was open left it open: the handler always set the open state, and it stops the click before the dropdown sees it. The widget now toggles the dropdown, as its aria-expanded already suggests. Closing from outside or with Escape works as before. AI-assisted-by: claude-opus-5-5