At first glance, Button, IconButton, and LinkButton toolbar variants look identical to the plain variant. The only difference is the focus ring colour for better colour contrast when the buttons are in a toolbar.
As discussed with Matt, potential solutions could be:
- Remove the toolbar variant in favour of styling the focus ring specifically instead (maybe a new prop?)
- Consider changing focus ring design so that it is robust against varying background colour. For example, Chakra UI v3 uses the same colour for focus rings regardless of light/dark mode (Chakra UI v3 colour theme) and uses a focus ring with an offset outline of 2px presumably to ensure sufficient colour contrast.
At first glance, Button, IconButton, and LinkButton toolbar variants look identical to the plain variant. The only difference is the focus ring colour for better colour contrast when the buttons are in a toolbar.
As discussed with Matt, potential solutions could be: