* ♻️ 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
* ♻️ 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
* 🐛 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ Use DS icon buttons for the bottom palette toggles
The color palette and typographies toggles of the bottom palette were raw
buttons with deprecated icons. Replace them with DS ghost icon buttons
with small icons, as before, that show the open palette through
aria-pressed. The layout flags are keywords, so they are coerced to a
boolean for aria-pressed. Their title moves to the label, shown in the DS
tooltip with the shortcut.
The palette actions button spans the palette height, not a DS button
size, so it stays raw; only its deprecated icon moves to the DS icon.
Add a visual test that compares the palette with each toggle selected
with no tolerance.
AI-assisted-by: claude-opus-5-5
* ♻️ Move bottom palette styles off the deprecated styles
The palette toggles are DS icon buttons, so their placeholders go away.
The actions button keeps the tertiary button look through local state
variables, and its icon takes the color from the button. Spacing, sizes,
borders, opacity and the color aliases move to DS tokens and logical
properties, except right and width of the palette, which are the
transitioned properties. The grid template is split into areas, rows and
columns, since Sass reads its slash as a division with a size variable.
The z-index values came from the legacy global scale. The resize area,
the toggles and the actions button had their own (4, 2 and 2), plus 0
overrides while collapsed, but they sit in separate grid areas and the
palette content does not reach them: removing them changes no pixel with
the text or color palette, the actions menu open, the 80px size, or the
palette collapsed and hidden. Only the palette's own z-index stays, with
a comment: it keeps the palette above the viewport overlays (z-index 1),
and drops to their level while collapsed.
The help button styles are not used in palette.cljs, but the external
chat widget injected into the palette wrapper may use them, so they stay,
inlined on DS tokens.
palette.scss no longer imports refactor/.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button for the bottom palette actions
The palette actions button (⋮) stayed a raw button because it spans the
palette height, not a DS button size. The DS icon button takes its
height from --button-height, so a class now stretches it to the palette
and the hand-made colors and states go away. It uses the ghost variant,
like the palette toggles next to it.
The button had no accessible name and did not say that it opens a menu:
it now has the "Palette options" label (new en and es keys) with its
tooltip, aria-expanded and aria-haspopup. The class given to its icon
did not exist in palette.scss and is gone.
Only the button corners change in the palette screenshots: the raw
button painted its own rounded background, the ghost button is
transparent at rest.
AI-assisted-by: claude-opus-5-5
The layers panel already uses DS icons and buttons; its two raw buttons
(the layer filter pill and the focus mode title) stay raw, since they are
custom widgets. Their styles still used the deprecated %button-tag
placeholder and color aliases.
- Inline %button-tag in the filter pill: border, cursor, centering, and
its focus and pressed states through local variables. Its hover rule
set the icons to the color they already had, so it goes away.
- Resolve the icon, title, pill and menu color aliases to DS tokens. The
filter menu item texts are the same color in every state, so only the
background changes, through a local variable.
The refactor import stays for the shared %menu-dropdown placeholder.
Add a visual test of the focus mode title, a filter pill and the filter
menu; the panel looks the same as before, pixel for pixel.
AI-assisted-by: claude-opus-5-5
* ♻️ 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
* ♻️ Use DS buttons and icons in the plugins dialogs
The plugins manager and the permissions, permissions update and try-out
dialogs used raw buttons, input elements styled as buttons and
deprecated icons. Replace them with the DS components:
- The four close buttons become ghost icon buttons labeled "Close", shown
in their DS tooltip. The class that places them in the corner goes on
the tooltip wrapper, so the tooltip anchors to the button.
- Install, and the cancel and accept buttons of the three dialogs, become
DS primary and secondary buttons.
- The empty list puzzle and the external link icons use the DS icon.
The permission icons (oauth-*) stay: they are brand art.
Add a visual test with fixtures for a team with the plugins feature and
a profile with one installed plugin. It shows the empty manager, the
manager with a plugin and the permissions dialog.
AI-assisted-by: claude-opus-5-5
* ♻️ Move plugins dialog styles off the deprecated styles
Remove the styles the DS buttons and icons no longer need (close-icon,
primary-button, cancel-button, search-icon and the svg rules of the
migrated icons) and move the rest of plugins.scss to DS tokens, DS
typographies and logical properties.
- The close button wrapper keeps only its position; the deprecated
tertiary button style was landing on the tooltip wrapper.
- The full-width cancel and accept buttons center their label again: the
DS button does not center it when it grows.
- The external link icon gets a class instead of an svg rule.
- The deprecated body-small used line-height 1.4 and the DS one 1.3, so
the permissions dialog is a few pixels shorter.
The refactor import stays for the modal placeholders until the modals
move to the DS modal.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS buttons in the debug shape panel
The object and tree dump buttons of the debug shape panel were raw
buttons with the browser default look. Use DS secondary buttons. The
DS buttons are taller, so the title row centers the shape name.
Add a visual test that turns on the shape-panel debug option and shows
the title row of the selected shape.
AI-assisted-by: claude-opus-5-5
* ♻️ Move debug shape panel styles off the deprecated styles
Move debug_shape_info.scss to DS spacing tokens, borders and logical
properties, resolve the panel background alias, and drop the refactor
import. The two font sizes match no DS typography, so they stay with a
TODO, and the unused shape-info-title class is commented out for a
manual check. The panel looks the same as with the previous commit.
AI-assisted-by: claude-opus-5-5
* 🐛 Let the debugging tools options scroll
The debugging tools panel lists 32 options in the left sidebar, whose
content area hides what overflows. On a short window the last options
were cut off with no way to reach them. Make the options list fill the
space under the title and scroll on its own.
AI-assisted-by: claude-opus-5-5
* ♻️ Move debugging tools panel styles to DS tokens
Move debug.scss spacing, size and the panel background alias to DS
tokens and logical properties. The refactor import stays only for the
checkbox placeholders, until the checkboxes move to the DS. The panel
looks the same as before.
AI-assisted-by: claude-opus-5-5
* ♻️ Explain why layout_container.scss keeps the deprecated import
The TODO at the top said to remove the refactor/ import once the buttons
were replaced, and sat above the DS imports instead of that one. The
buttons are now DS buttons (#12428, #12431), but the import is still
needed by the numeric inputs (%input-element, %disabled-input) and by the
two raw track header buttons, which keep the secondary and tertiary
placeholders. Replace the TODO with a comment on the import that says so.
AI-assisted-by: claude-opus-5-5
* 📎 Format the workspace visual spec with Prettier
Three expectations added in #12423, #12428 and #12431 broke a call chain
in a way Prettier rewrites. check-fmt:js did not catch it: its
playwright/**/*.js glob is expanded by the shell without globstar, so it
does not reach visual-specs/.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button for the component pill menu
Replace the raw three dots button of the component pill with the DS
secondary icon button. It had no label, so it reuses the "Options" one,
shown in the DS tooltip above and to the left (it sits at the right edge
of the sidebar), and aria-pressed while the menu is open instead of the
selected class.
Its class drops the button placeholders and only keeps the pill segment
shape: full height and square corners on the left. The tooltip wrapper
fills the segment too.
Add a visual test that selects a component copy so the pill shows.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS icon buttons for the component annotation actions
The save/create, discard, edit and delete actions of a component
annotation were divs with a click handler: no keyboard focus and no button
role. Replace them with DS ghost icon buttons. Their title moves to the
label, shown in the DS tooltip above and to the left, and save is disabled
while the text is blank, which it already ignored.
The class that hides them until the title is hovered, or while editing or
creating, now goes on the tooltip wrapper. The green and red hover colors
and the fixed size go away with the DS look. While editing or creating,
the actions get a small padding so their hover background does not touch
the annotation border; the title row grows from 32 to 36px there.
Add a visual test that creates an annotation on a main component and
shows both sets of actions.
AI-assisted-by: claude-opus-5-5
* 💄 Open component options tooltips above and to the left
The variants help, create variant, add property and remove property icon
buttons sit at the right edge of the sidebar: open their tooltips above
and to the left, like the other actions of the component options.
AI-assisted-by: claude-opus-5-5
* ♻️ Move component options styles off the deprecated styles
Inline the dropdown placeholders of the component pill menu with DS
tokens and a local variable for the item colors that change on hover, and
give the item label its own class instead of styling the span. Resolve
the annotation title border alias to its DS token and delete the unused
.component-title-actions rule.
The item label uses the DS body-small typography; its line-height is 1.3
instead of 1.4, with no visible change since the item centers it.
component.scss no longer imports refactor/.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button for the guide defaults menu
Replace the raw three dots button that opens the use default / set as
default menu of a guide with the DS ghost icon button. It had no label, so
it gets a new "Guide defaults" one, shown in the DS tooltip, and
aria-pressed while the menu is open instead of the selected class.
The add, show/hide and remove guide buttons, and the new one, sit at the
right edge of the sidebar: open their tooltips above and to the left.
The advanced options toggle stays a raw button: it is one segment of the
guide type control and an icon button would break that shape.
Add a visual test that adds a guide to a board and opens its advanced
options.
AI-assisted-by: claude-opus-5-5
* ♻️ Remove guide defaults button styles
The three dots guide defaults button is a DS icon button now: delete the
.show-more-options rule, its state variables and its svg rule. The rest of
frame_grid.scss already uses DS tokens.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS button for edit grid in the grid cell options
Replace the raw "Edit grid" button of the grid cell options with the DS
secondary button. Drop its alt attribute, which is not valid on a button;
the label already names it.
The column and row icons label the numeric inputs, so they move with the
numeric inputs migration.
Add a visual test that selects a cell in grid edit mode so the options
show.
AI-assisted-by: claude-opus-5-5
* ♻️ Move grid cell options styles to DS tokens
The edit grid button is a DS button now, so its button placeholder and
typography mixin go away; the class only stretches it and centers its
label. Merge the two .grid-cell-menu-container rules, inline the flex
mixins, and move spacing, borders and color aliases to DS tokens and
logical properties.
Use the DS body-small typography in the inputs; its line-height is 1.3
instead of 1.4.
The refactor/ import stays only for %input-element and %button-icon, used
by the inputs and their legacy icons, which move with the numeric inputs
migration.
AI-assisted-by: claude-opus-5-5
* ♻️ Use the DS icon in the workspace left header
The shared library badge of the left header used a deprecated icon; use
the DS library icon instead.
Drop the deprecated icons inside the save status dot. They rendered as
500px SVGs with no stroke, so they never showed: the dot is only its
background color, and its title keeps the status text. The Penpot logo is
brand art and stays.
Add a visual test that opens a shared file and shows the header with the
badge, then the saved status after drawing a shape.
AI-assisted-by: claude-opus-5-5
* ♻️ Move workspace left header styles off the deprecated styles
Inline the 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 status dot takes its color from a local variable. The
badge icon gets its color through a class instead of an svg selector.
The project name uses the DS headline-small typography: 12px instead of
11px. The file name matches title-small exactly.
Left with a TODO: the rename input font size and z-index have no DS
match, and the pending status orange (#f5a91b) has no DS color.
left_header.scss no longer imports refactor/.
AI-assisted-by: claude-opus-5-5
* ♻️ Resolve the TODOs left in the workspace left header styles
The status dot used the legacy warning orange #f5a91b, which drifted from
the DS one when both replaced #fe4811 a few days apart in early 2025. Use
the DS --color-accent-warning (#fe9c07), the orange of every other DS
warning, so the dot looks a little more orange while saving.
The rename input had z-index 20, which did nothing: the input is neither
positioned nor a flex or grid item. Remove it.
The rename input only set its font size and got the rest from the global
reset; it now uses the DS title-small typography, like the file name. Its
line-height goes from normal to 1.2, so it grows from 16 to 16.8px.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS buttons and icons in the grid layout options
The "Edit grid" button of a grid layout and the "Exit" button of the grid
editor were raw buttons with the deprecated secondary style. Replace them
with DS secondary buttons; their text and actions stay the same. Drop the
"alt" attribute of "Edit grid": it is not valid on a button.
The expand and add buttons of the column and row headers are 52px parts of
a custom header, not DS buttons, so they stay raw; only their deprecated
icons move to the DS icon, as does the direction icon of each track.
Add a visual test that shows the grid layout options and the grid editor
with the column tracks expanded.
AI-assisted-by: claude-opus-5-5
* ♻️ Remove deprecated button styles from the grid layout options
"Edit grid" and "Exit" are now DS buttons, so their secondary placeholder
and typography go away; the classes only place them in the grid and center
their label. The track header and direction icons drop the deprecated icon
placeholder and get their colors through classes. The header buttons keep
their secondary and tertiary placeholders, since they stay raw.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS icon buttons for the flex wrap and padding mode
The wrap button of a flex layout and the button that shows the four
padding sides (flex and grid layouts) were raw buttons with deprecated
icons. Replace them with DS ghost icon buttons that show their state
through aria-pressed, with the tooltip above and to the left since they
sit at the right edge of the sidebar.
The wrap label is now always "Wrap": its title switched to "No wrap"
while pressed, which conflicts with the pressed state.
Add a visual test that selects a flex board and shows both buttons at
rest and pressed.
AI-assisted-by: claude-opus-5-5
* ♻️ Remove deprecated wrap and padding toggle styles
The wrap and padding mode buttons are now DS icon buttons, so their
tertiary button, icon and selected placeholders go away. The tooltip
wrappers take the same grid cells the buttons had.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button for the layout element margin mode
The button that switches a flex or grid element between simple and
multiple margins was a raw button with a deprecated icon. Replace it with
a DS ghost icon button that shows the multiple state through aria-pressed.
Its title moves to the label, shown in the DS tooltip above and to the
left since the button sits at the right edge of the sidebar. The grid
column class goes on the tooltip wrapper.
The legacy margin icons label the numeric inputs and stay for the numeric
inputs group; the radio buttons are out of scope.
Add a visual test that selects a flex element and shows both margin modes.
AI-assisted-by: claude-opus-5-5
* ♻️ Remove deprecated button styles from layout element options
The margin mode button is now a DS icon button, so its tertiary button,
icon and selected placeholders and the deprecated 32px height go away.
The class only places the tooltip wrapper in the third grid column.
The refactor/ import stays for %input-element, still used by the legacy
numeric inputs.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button to remove imported SVG attributes
Replace the raw remove button of each imported SVG attribute with the DS
ghost icon button and the DS remove icon. The button had no title, so it
gets a new "Remove attribute" label, which the DS tooltip shows. Drop the
wrapper div that only held the button.
Add a visual test that selects a group imported from SVG so the section
shows.
AI-assisted-by: claude-opus-5-5
* ♻️ Move imported SVG attributes styles to DS tokens
The remove button is a DS icon button now, so .attr-actions and
.attr-action-btn with their button placeholders go away. Inline the flex
and ellipsis mixins, move spacing to DS tokens and logical properties,
sizes to px2rem and the title color alias to its DS token.
Use the DS body-small typography; its line-height is 1.3 instead of 1.4.
Drop the line clamp rules of the attribute name: its later display:
inline-block already overrode the -webkit-box they need.
The refactor/ import stays only for %input-element on the value input,
which moves with the inputs migration.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button to close the nudge amount modal
The close button of the nudge amount modal (main menu, Preferences) was a
raw button with a deprecated icon and no accessible name. Replace it with
a DS ghost icon button labeled "Close", shown in its DS tooltip. The class
that places it in the corner goes on the tooltip wrapper, so the tooltip
anchors to the button. The numeric inputs stay for the inputs group.
Add a visual test that opens the modal from the main menu.
AI-assisted-by: claude-opus-5-5
* ♻️ Move nudge modal styles off the deprecated styles
The close button is a DS icon button, so its placeholder goes away; it is
now 32px wide instead of 28px, and sits 4px from the edge instead of 6px
so the icon stays in the same place. Spacing, sizes and the color aliases
move to DS tokens and logical properties, the flex mixin is inlined, and
the label rule targets its class instead of the label element.
The title matches the DS headline-medium typography exactly. The content
and labels use body-large and the wrapper body-small, whose line-heights
differ by 0.1 from the legacy ones; the labels keep their 1.5 override,
so nothing visible changes.
refactor/ stays only for the shared modal and labeled input placeholders.
AI-assisted-by: claude-opus-5-5
The libraries modal now opens on the "This file" tab, so the visual test
timed out looking for the shared library. Open the "Libraries" tab first,
as the functional test does, mock the file with the library linked, and
check the "Added" label instead of the old "File library" text.
AI-assisted-by: claude-opus-5-5
* ♻️ Use a DS icon button for flatten in the boolean options
Replace the raw flatten button and its deprecated icon with icon-button*
and the DS boolean-flatten icon. The title text moves to aria-label, so
the DS tooltip shows it. The grid column goes on the tooltip wrapper
through tooltip-class.
Add a visual test that selects two shapes so the boolean options show.
AI-assisted-by: claude-opus-5-5
* ♻️ Remove deprecated button styles from the boolean options
The flatten button is a DS icon button now, so its placeholders, sizes
and icon colors go away; only the grid column stays, on the tooltip
wrapper. Use block-size and drop the refactor/ import.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS buttons for more colors in the selected colors
Replace the three raw "more colors" buttons (library colors, colors and
color tokens) with the DS secondary button.
Add a visual test that selects a board with more than three colors so
the button shows.
AI-assisted-by: claude-opus-5-5
* ♻️ Move selected colors styles to DS tokens
The "more colors" buttons are DS buttons now, so their placeholder and
typography mixin go away; the class only centers the label, since the
column stretches the button. Delete the unused .add-fill rule, move
spacing to DS tokens and logical properties, and drop the refactor/
import.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS icon buttons in the align options
Replace the eight raw align and distribute buttons with icon-button*
and DS icons. The title text moves to aria-label, so the DS tooltip
shows the same text and shortcut. Disabled distribute buttons now use
the DS disabled color.
Add a visual test that selects two shapes so the align options show.
AI-assisted-by: claude-opus-5-5
* ♻️ Remove deprecated button styles from the align options
The align buttons are DS icon buttons now, so the .align-button rules
and their placeholders go away. Move the row height to a DS size token
and drop the refactor/ import.
AI-assisted-by: claude-opus-5-5
