Disabled button is transparent on a floating background

[Jay-Topher]

Describe the bug

Currently, the color used to represent a disabled button in vanilla is a lighter (more transparent) hue of the original button color, this works well for the most part, but is problematic when the button is made to float over a dynamic background (e.g: a map)

To Reproduce

Steps to reproduce the behavior:

1. Create a button that floats on a dynamic (multi-colored) background
2. Make the button disabled

Expected behavior

The button should be opaque to improve readability

Screenshots

[arize99]

Hi. Nice contribution. You can also play with the opacity:
<button style={{ opacity: 0.5 }}>Button</button>
😉🤷🏽‍♂️

[danielmutis]

Ideally, this would be fixed by flattening the transparency and providing shades of colour for each state. We don't have the time to work on this right now, so for now we suggest using a wrapper on the component that provides a background to make it solid.

[danielmutis]

For further discussion: what sort of components are we allowed to use on non-flat backgrounds? Is it okay to use other components, like radio buttons, on other backgrounds?