Button Variant mixin is not setting the hover/active background color correctly when used with white.

[LordBarnhill]

Not sure if this is a bug in v5.3.7 or if we need to change the way we are using the button-variant mixin for our white button class. I didn't see any issues or discussions for it, but I could have overlooked one.

This is how we have the class coded in our SCSS:

.btn-white {
  @include button-variant(#fff, #fff);
}

Previously, the mixin would darken the color used for the base background for the hover/active background colors when we were using v4. However, after upgrading to the latest version, this is no longer the case. The text color is set appropriately, but the hover/active background color is set to white according to Chrome's inspector. When testing with another color (#266f9d), the resulting button styling behaves as I would expect.

Is this the expected behavior for the mixin now?

[patkon]

I think it's because button-variant uses the tint-color() function.
So ‘white’ is mixed with #fff. And that results in #fff.

If I understand the documentation correctly, you can also simply specify the :hover background.
https://getbootstrap.com/docs/5.3/components/buttons/#sass-mixins

button-variant

• background
• border
• color
• hover-background
• hover-border
• hover-color
• active-background
• active-border
• active-color
• ...

.btn-white {
  @include button-variant(#ffffff, #ffffff,#222222,#eeeeee);
}

[LordBarnhill]

Ah, I looked right over that in the mixin. I had already specified the hover background in our styling temporarily while investigating if the new behavior was a bug or not, which it would seem it is not. Thanks for pointing out the change I missed @patkon !