Outline checkbox button has incorrect focus state

[LocalHeroPro]

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

When we use Checkbox with outlined style
https://getbootstrap.com/docs/5.2/forms/checks-radios/#outlined-styles
When checkbox is selected and we click on that checkbox to unselect it, selecting color still appear and to see changes - no color inside button - we need to click somewhere else.
If wee still clicking on same checkbox, we have selected color inside checkbox. No changes appears.
It's annoying.

Reduced test cases

Single toggle

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

Linux

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

Chrome, Firefox, Opera

What version of Bootstrap are you using?

5.2

[RedHeadphone]

The issue is with :focus in .btn-check right?

[RedHeadphone]

I would like to fix it

[mdo]

Duplicate of #31149.

[RedHeadphone]

@mdo but this issue is related to :focus and not :hover

[mdo]

Ah yup, sorry! Will review again, I think I found when and why this bug/change was introduced thanks to your PR.

[mdo]

This was changed in #34600 with the rewrite of our buttons to use CSS variables. We moved a ton of source SCSS from the mixin into the main .btn base class, which included some styles that were specific to .btn-* modifiers and not .btn-outline-* modifiers. Will need a little time to think about a solution here.

[RedHeadphone]

yeah I see in mixin button-outline-variant only the following css was applied on focus

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

How should I fix this? Can you lead me a way?

[RedHeadphone]

Do I move back specific CSS for .btn-* and .btn-outline-* back to mixin? or is there better way to do it? @mdo

[Aliyosign]

hey
am interested in this task , how do l go ahead?

[florianlacreuse]

You should read the readme and the contributing guidelines.