How do I override bootstrap 5.0 info color and make it like bootstrap 3's info color?

In bootstrap 3, the info color was #d9edf7. When using bg-info or alert-info, the background color was always #d9edf7. I'm trying to override bootstrap 5.0 to have the same effect on the info color.

I have a cutom scss file to override bootstrap:

If I set the info or cyan variable to #d9edf7, then my .bg-info elements look correct but my .alert-info elements are getting lightened by 60%.

$info: #d9edf7;
@import "../scss/bootstrap.scss";

If I set the info or cyan variable to #40a4d7 then my .alert-info elements look correct but my .bg-info elements are 40% darker than #d9edf7.

$info: #40a4d7;
@import "../scss/bootstrap.scss";

How can I override bootstrap to get the desired effect? Basically, anything using the info color should have a background color of #d9edf7.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>

<div class="bg-info" style="width:100%; height:60px;">
This should have the same background color because they're both using the 'info' color
</div>

<!-- end snippet -->

Bootstrap 5.0.2

Because of the color "scaling" used in 5.0 you'd need to regenerated the alert-info class by passing the appropriate colors into the alert-variant mixin...

@import "functions";
@import "mixins";

$info: #d9edf7;

@import "variables";
@import "bootstrap";

.alert-info {
    @include alert-variant($info, $info, shift-color($info, $alert-color-scale));
}

In this example I still used the scaling for the (foreground) color, but you could just use $body-color instead...

@include alert-variant($info, $info, $body-color);

https://codeply.com/p/k0MPD65ezI

Bootstrap 5.3.0

As you will read in the docs...

> "Sass mixin is deprecated. Alert variants now have their CSS variables
> overridden in a Sass
> loop"

So there are different color vars for the alert text color, bg color, links, etc... In your case, you'd want to override $info-bg-subtle for the background color:

$info: #d9edf7;
$info-bg-subtle: #d9edf7;

@import "bootstrap";

SASS demo

After thorough investigation, it appears the SASS variable causing your issue for Bootstrap 5.0 is $alert-bg-scale. This variable is declared in the _variables.scss file with an initial value of -80%.

$alert-bg-scale: 0%;
$info: #d9edf7;

@import "bootstrap.scss";

Unfortunately, it looks like getting the behavior you desire won't be as simple as you had hoped. If you modify this value, it will make the background color for ALL alerts darker. It appears that they did solve this problem in later versions, per Carol Skelly's answer.

A couple of workarounds I can think of off the top of my head:

Use the .alert-info class wherever you currently are using .bg-info

This class only applies a border and text color in addition to the background-color.

Create an override for the .bg-info class

If you're absolutely against the idea of having the border and text color set by the previous suggestion, this would work. However, I would recommend against this as it would be modifying the expected behavior of Bootstrap. Alternatively, you could create your own custom class that does this.

$info: #d9edf7;

@import "bootstrap.scss";

/*
  By calling this after the Bootstrap import, you get access to all the
  SASS functions, namely `shift-color()`
*/
.bg-info {
    background-color: shift-color($info, $alert-bg-scale) !important;
}