Updated .bg-* and .text-* utilities break when CSS variables are not enabled in v5.1.0

In one of my projects I include the needed Bootstrap SCSS files manually and specifically exclude bootstrap/scss/root, first because I don’t rely on most of the CSS variables and secondly because adding all CSS variables increases the CSS file size by about 50-60kb (uncompressed).

With v5.1.0 all .bg-* and .text-* utilities break, as the needed CSS variables are missing, e.g.

.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; // --bs-white-rgb is not set
}

Is there a simple way to disable CSS variables generation or to reduce the number of CSS variables? The only way forward right now would be to revert the utility sets back to $theme-colors, but that still leaves an additional --bs-text-opacity: 1; and does not take care of --bs-body-color and the like:

$utilities-text-colors: $theme-colors;
$utilities-bg-colors: $theme-colors;

[iatek]

The whole bg-, text- update in 5.1.0 has seemingly complicated the entire process of adding a new theme-color. The only way I could find to get the bg- and text- classes regenerated for the new “custom” theme color is…

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

$custom: #df711b;

$custom-theme-colors: (
  "custom": $custom
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

I discovered this on an SO question and here’s the working code demo

---

Whereas in 5.0.2 one could simply follow the example in the docs…

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

$custom-colors: (
  "custom-color": #df711b
);

$theme-colors: map-merge($theme-colors, $custom-colors);

[Pythagus]

The whole bg-, text- update in 5.1.0 has seemingly complicated the entire process of adding a new theme-color. The only way I could find to get the bg- and text- classes regenerated for the new “custom” theme color is…

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

Thanks! This really needs to be written in the official documentation!