Custom theme colors map-loop to Buttons/Text Color/Bg Color removing out-the-box Bootstrap classes

[tovutifunk]

Last two lines remove text-white text-black bg-body:
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

How are we able to create map loops with our custom colors and avoid out of the box Bootstrap 5 classes from being removed based on the code above?

---

I thought the method mentioned by @nsmeele worked great.
That after:

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

we also need to add these 4 lines:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$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");

and all the color classes gets generated properly.

I've also looked at this documentation and it works well as well, but the problem with this is that this should only be used when you have some color for which you only need the background and text classes but not the buttons and other things. Also, this approach will not generate the rgb values. So, all the classes will have --bs-bg-opacity: 1 which will remain unused.

Originally posted by @isaumya in #34734 (comment)

[mdo]

#34756