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..2029132 100644 --- a/packages/react-ui/src/Button/styles.module.css +++ b/packages/react-ui/src/Button/styles.module.css @@ -137,8 +137,10 @@ line-height: 0.6; svg { - fill: var(--color--ink-link); - color: var(--color--ink-link); + 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; } }