Component-level focus state tokens

[mwentz]

Bootstrap v6 button variables currently expose component-level customization for states such as hover and active, but there does not appear to be an equivalent model for :focus / :focus-visible state styling. Instead, focus styling seems to be primarily represented through the centralized focus ring system.

The focus ring approach is valuable and important for accessibility, but many modern design systems treat focus as a first-class interaction state alongside hover and active, with visual changes that extend beyond the focus indicator itself.

A common design-system requirement is for focus states to affect:

• Background color
• Text color
• Border color
• Focus ring / outline

This is something we have run into a number of times on projects and has been suboptimal working with Bootstrap 5. I hope it's ok to refer to design systems here, it's the best way I could come up with to show what I am referring to:

Adobe Spectrum defines keyboard focus as a distinct component state and notes that focus often builds upon a component's visual hover treatment while adding an additional focus indicator. https://spectrum.adobe.com/page/states/

IBM Carbon exposes focus behavior directly within its button state definitions. Some button variants have focus-specific background and border treatments in addition to focus indicators.
https://carbondesignsystem.com/components/button/style/

I'll also note that .nav-link in Bootstrap has a built-in hover state that changes the color and background-color. Not sure how many other components have it specifically, but it would be nice to have that on a more global scale - links, form inputs, navigational elements, etc.

Would you consider exposing component-level focus variables/tokens alongside existing hover and active state variables? Given that Bootstrap already exposes component-level tokens for other interaction states, I would like to see similar support for :focus / :focus-visible states.