Hook up focus colors to existing controls

[bheston]

What feature are you requesting?
We recently added focus to the color recipes. These values are not yet hooked up in controls.

What would be the benefit of adding this feature?
Adding to the design system to allow more flexibility in component interaction states.

[chrisdholt]

@bheston can you provide an example of how the recipe could be applied to something fairly simple? Just as an example. Without context here it would likely require a collaborator to do this, but if it's simple enough and we have the details it may be something a first time contributor could take on.

[bheston]

A simple example is something like this search field

The rest, hover, active, and focus states may all be different.

The delta has already been added to the design system and color recipes, so the task here is to go into each style sheet and apply the focus color to the focus state. It's fairly mechanical and shouldn't require design. That being said, the current theory assumes that the focus color is in the same palette as the other state colors, which is true for the current way recipes are applied.

I'll tag it as a good first issue.

[bheston]

In the default design system configuration, the focus color should not be different than the resting state. For instance, tab-focusing a button should not change the color. This update will also validate the new color recipes in a real-world scenario. For instance, use a delta that's 10-20 larger than the hover or active state, which should result in a noticeable state change.
Note that foreground colors will need to be adjusted based on the focus background as well.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chrisdholt]

closed with #3517