From 3ba4a96bb95aad5495234b3cb3bd74b20a983d53 Mon Sep 17 00:00:00 2001 From: "Roger Tuan (DatoCMS)" Date: Tue, 29 Sep 2026 07:42:19 -0700 Subject: [PATCH 1/2] fix(react-ui): Button icons follow the button's text color The icon rule hardcoded `--color--ink-link` for every button type, so icons stayed accent-colored on red negative buttons, on primary buttons (near-invisible in light mode), and on disabled buttons. `currentColor` picks up each variant's own ink, matching the CMS's button CSS. Co-Authored-By: Claude Opus 5.5 --- .changeset/button-icon-current-color.md | 5 +++++ packages/react-ui/src/Button/styles.module.css | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/button-icon-current-color.md diff --git a/.changeset/button-icon-current-color.md b/.changeset/button-icon-current-color.md new file mode 100644 index 0000000..c14a194 --- /dev/null +++ b/.changeset/button-icon-current-color.md @@ -0,0 +1,5 @@ +--- +"datocms-react-ui": patch +--- + +`Button` icons now take the button's own text color instead of always using the link color. This fixes accent-colored icons on red `negative` buttons, on `primary` buttons, and on disabled buttons. diff --git a/packages/react-ui/src/Button/styles.module.css b/packages/react-ui/src/Button/styles.module.css index 89dc121..cf18606 100644 --- a/packages/react-ui/src/Button/styles.module.css +++ b/packages/react-ui/src/Button/styles.module.css @@ -137,8 +137,8 @@ line-height: 0.6; svg { - fill: var(--color--ink-link); - color: var(--color--ink-link); + fill: currentColor; + color: currentColor; } } From 94c63594c828c46590c39d3dcb7e6050fc8f28c5 Mon Sep 17 00:00:00 2001 From: "Roger Tuan (DatoCMS)" Date: Tue, 29 Sep 2026 09:38:26 -0700 Subject: [PATCH 2/2] docs(react-ui): explain why Button icons also set color: currentColor Co-Authored-By: Claude Opus 5.5 --- packages/react-ui/src/Button/styles.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-ui/src/Button/styles.module.css b/packages/react-ui/src/Button/styles.module.css index cf18606..2029132 100644 --- a/packages/react-ui/src/Button/styles.module.css +++ b/packages/react-ui/src/Button/styles.module.css @@ -138,6 +138,8 @@ svg { fill: currentColor; + /* Not redundant: icons painting via `currentColor` (e.g. FontAwesome) would + otherwise pick up a plugin's own `color` rule on the svg */ color: currentColor; } }