fix(react-ui): Button icons follow the button's text color

[roger-datocms]

Problem

In Web Previews' config screen, the trash icon on the red Remove frontend button is purple (Basecamp card). The bug is in datocms-react-ui, not in the plugin.

Button/styles.module.css hardcoded --color--ink-link on every button icon. The rule dates from 2021 (--accent-color, later renamed twice). As a result:

• negative: accent icon on a red surface.
• primary: accent icon on an accent surface, near-invisible in light mode.
• Disabled: icon keeps the link color (accent in light mode, near-white in dark) while the label goes grey.

Fix

Icons now use currentColor, so each variant's own ink applies. This matches the CMS's button CSS (styles/blocks/_button.css), which fills icons with primary-soft--ink (muted), primary--ink (primary), danger--ink (negative) and disabled--ink (disabled). ButtonLink shares these classes and gets the same fix.

Visible changes to expect:

• Muted buttons in light mode don't change: ink-link and primary-soft--ink both resolve to pigment-550, in every theme.
• Disabled buttons in dark mode get a dim grey icon instead of a near-white one, matching the label and the CMS's own disabled buttons.

Includes a patch changeset for datocms-react-ui.

Before/After Screenshot

(Left = before, right = after)

Testing

A Playwright harness renders the built Button inside Canvas, for every live appearance option:

• Monochromatic palettes: 13 hues (every 30°, plus 7, the Jan 2024 default; 270 is the current default).
• Grandfathered custom palettes: the pre-2024 default, a near-gray primary, and a light yellow accent.
• Both color schemes for each.

Each theme's tokens come from the CMS's own pipeline: its pigment and wash ramp builders, its semantic-token CSS, read back the way readCSSDesignTokens builds ctx.cssDesignTokens. The harness checks each icon's computed fill against both the label color and the CMS's expected token, across 3 types × enabled/disabled.

• Before: 176/192 fail. Only light-mode muted buttons pass, because both tokens resolve to the same palette stop.
• After: 192/192 pass.

npm run build and npm test pass.

🤖 Generated with Claude Code

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/datocms-react-ui@94c6359

npm i https://pkg.pr.new/datocms-plugin-sdk@94c6359

commit: 94c6359