5.2.1 broke .btn:focus box-shadow behaviour

[oakleaf]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Upgraded from 5.2.0 and quickly noticed that the box-shadow disappeared from all my buttons when :focus(ing).

The options (https://getbootstrap.com/docs/5.2/customize/options/) clearly states;
$enable-shadows | true or false (default) | Enables predefined decorative box-shadow styles on various components. Does not affect box-shadows used for focus states.

Could this be the issue?
https://github.com/twbs/bootstrap/blob/main/scss/_buttons.scss

#21, the "--#{$prefix}btn-focus-shadow-rgb" variable doesnt seem to exist

Reduced test cases

https://github.com/twbs/bootstrap/blob/main/scss/_buttons.scss

#21, add default value to
--#{$prefix}btn-focus-shadow-rgb

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.1

[julien-deramond]

Isn't your issue linked to the following modification #37026?

for all .btns, it changes the :focus styling to :focus-visible - this way, the focus style doesn't take effect and "stick" (until you click somewhere else) for mouse/touch users

When you're talking about ":focus(ing)`, is it focusing with the mouse or the keyboard (or both)?

[oakleaf]

Okey, sorry - was not aware that the :focus was removed. Are there any solution to bring it back? We love the focus-shadows.

[julien-deramond]

I'm closing it since the issue seems to be resolved.

Are there any solution to bring it back? We love the focus-shadows.

You'll have to create your own :focus rules to override the behavior offered by our rules linked to :focus-visible. Here is the corresponding diff: https://github.com/twbs/bootstrap/pull/37026/files.

[daftspunk]

You'll have to create your own :focus rules to override the behavior offered by our rules

Super simple example for restoring the focus ring thing:

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgb(97 109 133 / 50%);
}