Allow Button component to force focus/idle state

[frankieyan]

🚀 Feature request

Motivation

We want to stop consuming the --reactist-* colour variables in-app, and instead, consume those from the product library instead. However, there are a few instances of button colour variables being used, which are dynamically set based on the button's variant, which makes replacing some of their current use cases awkward.

Example

We have about 4-5 instances in Todoist where we're forcing the button to either be shown in its idle or active states. For example, when the sidebar toggle button has the aria-expanded=true attribute set (ref).

https://github.com/search?q=repo%3ADoist%2Ftodoist-web%20var(--reactist-btn&type=code

Possible implementations

If we want to solve this on the consumer side: specify the variant of the colour variable we want to use as an override, e.g. --product-library-actionable-primary-idle-fill

If we want to expose this option as props: borrowing from exceptionallySetClassName, we could use something like exceptionallySetButtonState={'idle' | 'focused' | undefined}