penpot/frontend
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
2026-10-28 12:11:06 +01:00
..
2026-10-07 10:41:29 +02:00