.btn background removed in :active state

Created by: roblevintennis

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

Issue

It appears the latest 5.2.2 is implemented so that if you have a .btn with no variant e.g. .btn-VARIANT, and you click or make that button :active, it's background color will be removed. It appears this is because the --bs-btn-active-bg css variable is not getting defined:

This becomes an issue especially if you have custom background styles you're using alongside .btn e.g. white text color that is !important with a color background that is not important since they'll get removed leaving you with a blank all white button (see test case below)

Secondary issues

The same sort of undefined css variable thing is happening for var(--bs-btn-active-border-color) as well. It doesn't affect my particular use case but maybe/probably should be addressed as well?

Cause

I believe this is do to a recent addition of this line:

:not(.btn-check) + &:active introduced here

Reduced test cases

I've forked the button stackblitz to reproduce this here: https://stackblitz.com/edit/s8s493?file=index.html

Just toggle the :active state either manually by clicking the button or via devtools

Chrome

Safari

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

macOS

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

Chrome, Safari

What version of Bootstrap are you using?

v5.2.2