fix: ensure focus outlines match button/link size on click

[markdalgleish]

We used to maintain the hit area for buttons/links during click by having an unstyled element for the button and then applying all visual styles to another element nested directly within the button. This mostly worked, but it introduced a visual issue where the focus outline would be out of sync with the button size on click.

To fix this, I've switched to a different approach where the button/link elements are made with a single element, and the increased hit area is managed by an absolutely positioned pseudo element that is scaled up on click. I implemented this with CSS variables to manage the different hover and active sizes so that we can dynamically calculate the inverse scale required to maintain the hit area.

Note that this means we no longer have the transform property on Box since our approach is more complicated now. Instead, interaction sizing is managed by a CSS utility function called touchableStyles that accepts the same values as transform but returns the required class names.

[linear]

RNBW-3596 ConnectButton bug when `focus` and `active`

To repro:

• Focus the button (eg pressing tab)
• Press down with cursor

CleanShot 2022-05-13 at 18.50.41.gif

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
rainbowkit-example	✅ Ready (Inspect)	Visit Preview	Jun 2, 2022 at 11:04PM (UTC)
rainbowkit-site	✅ Ready (Inspect)	Visit Preview	Jun 2, 2022 at 11:04PM (UTC)

[nickbytes]

What do you think of this on Firefox?

Tiny amounts peeking through. I know this is an edge case, so I'm not concerned w/ it. Good to go if you are. Poking around on it right now to see if can get a fix.

[markdalgleish]

@nickbytes Seems like a rounding issue in their rendering engine. I tried to fix it but didn't have much luck. We might have to look into this separately if we want to fix it.