Problem with creating automated utility bg and text class with custom colors in v5.1.0

Hi, I’m facing a major issue in Bootstrap v5.1.0 regarding autogenerating bg and text utility classes. So, in Bootstrap v5.0.1 (which I majorly use on al of my projects) I have the following structure:

in common.scss which is what gets added to the frontend, I add all the bootstrap file calls, e.g.:

### common.scss
@import "./libs/bootstrap/functions";

@import "./helpers/bootstrap-variables-with-overwrites";
@import "./libs/bootstrap/mixins";
@import "./libs/bootstrap/utilities";
## and so on...

Now inside bootstrap-variables-with-overwrites.scss I can create a bunch of custom colours and merge that with theme colours. For example:

$color1: red;
$color2: blue;

@import "../libs/bootstrap/variables";

$extra-theme-colors: (
	"gray-dark":   $gray-800,
	"color1":   $color1,
	"color2": $color2
);

$colors: map-remove( $colors, "gray-dark" );

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

With that above implementation, in v5.0.1 these new custom colors in $extra-theme-colors gets added to $theme-colors and so naturally, when I compile it creates all the custom classes like .bg-color1, .bg-color2 and so on among other things along with having the default color classes added by Bootstrap.

But as soon as updated to Bootstrap v5.1.0 this system stopped working and I got no more custom classes for the custom colours. I have tried almost everything and none worked.

Is this a bug? Can someone let me know what’s going on and how to make sure that the same can be implemented in v5.1.0? This is super important to all of my projects.

[nsmeele]

;TLDR Also not working after manually merging the variables.

---

Solution

Merge variables with the new colors.

@import "../../node_modules/bootstrap/scss/variables";

$theme-colors: map-merge($theme-colors, (
    'primary-dark' : shade-color($blue, 20%),
    'primary-light' : tint-color($blue, 20%),
    'purple' : $indigo,
    'purple-dark' : shade-color($indigo, 20%),
    'purple-light' : tint-color($indigo, 10%),
));

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

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

@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

// and the rest of your Bootstrap components

In my opinion this is where the !default should handle some merging stuff. I’m not sure why it doesn’t work like that now.

You’re welcome.

Problem

Also experiencing this problem. This is my code

@import 'lib/variables';

// Bootstrap include base
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

$theme-colors: map-merge($theme-colors, (
    'primary-dark' : shade-color($blue, 20%),
    'primary-light' : tint-color($blue, 20%),
    'purple' : $indigo,
    'purple-dark' : shade-color($indigo, 20%),
    'purple-light' : tint-color($indigo, 10%),
));

@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";

// ..the rest

When I run a debug on $utilities-colors the result is this: DEBUG: ("primary": 13, 110, 253, "secondary": 108, 117, 125, "success": 25, 135, 84, "info": 13, 202, 240, "warning": 255, 193, 7, "danger": 220, 53, 69, "light": 248, 249, 250, "dark": 33, 37, 41, "black": 0, 0, 0, "white": 255, 255, 255, "body": 33, 37, 41)

Ergo the map contains the original variables. SInce I want the original + the new colors I thought lets merge the two of them. But when I specifically merge the variables like this:

$utilities-colors: map-merge($theme-colors, $utilities-colors)

// copied from the bootstrap variables file
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

and run a debug on $utilities-colors now, it’s actually added to the map.

DEBUG: ("primary": 13, 110, 253, "secondary": 108, 117, 125, "success": 25, 135, 84, "info": 13, 202, 240, "warning": 255, 193, 7, "danger": 220, 53, 69, "light": 248, 249, 250, "dark": 33, 37, 41, "primary-dark": #0a58ca, "primary-light": #3d8bfd, "purple": #6610f2, "purple-dark": #520dc2, "purple-light": #7528f3, "black": 0, 0, 0, "white": 255, 255, 255, "body": 33, 37, 41)

This CSS is loaded in the browser on the .bg-purple-dark selector

.bg-purple-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-purple-dark-rgb), var(--bs-bg-opacity)) !important;
}

Firefox is telling another problem: --bs-purple-dark-rgb is not set.

[mdo]

Closing as duplicate of #34756 where more convo has been happening.

@isaumya Yes, my plan would be to include in v5.2.0 and potentially fast track that release instead of v5.1.2 being the next update.