Added new colors to $theme-colors but related classes are not created for text and background colors

[bkilinc]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I added custom colors to $theme-colors map, btn-, link- colors are generated perfectly but text- and bg- colors are not generated. I guess it should behave same.

my custom.scss file is as follows.

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$custom-colors: (
  "primary-light": lighten(map-get($theme-colors,"primary"), 20),
  "secondary-light": lighten(map-get($theme-colors,"secondary"), 20),
  "success-light": lighten(map-get($theme-colors,"success"), 20),
  "info-light": lighten(map-get($theme-colors,"info"), 20),
  "warning-light": lighten(map-get($theme-colors,"warning"), 20),
  "danger-light": lighten(map-get($theme-colors,"danger"), 20)
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

as a result ;

• btn btn-primary-light, link-primary-light classes are generated correctly
• bg-primary-light, text-primary-light clases are not generated as expected.

Reduced test cases

include file at top;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$custom-colors: (
  "primary-light": lighten(map-get($theme-colors,"primary"), 20),
  "secondary-light": lighten(map-get($theme-colors,"secondary"), 20),
  "success-light": lighten(map-get($theme-colors,"success"), 20),
  "info-light": lighten(map-get($theme-colors,"info"), 20),
  "warning-light": lighten(map-get($theme-colors,"warning"), 20),
  "danger-light": lighten(map-get($theme-colors,"danger"), 20)
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

bg-primary-light, text-primary-light should be generated

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.1.3

[nkdas91]

@bkilinc
You have to use the Utilities API and add your custom colors.

https://getbootstrap.com/docs/5.1/utilities/background/#utilities-api
https://getbootstrap.com/docs/5.1/utilities/api/#using-the-api

Existing Utilities:
https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss

CODE

// Import utilities first
@import "~bootstrap/scss/utilities";

// After utilites, use map-merge to add your custom colors

// Background Colors

$utilities: map-merge(
  $utilities,
  (
    "background-color": (
      property: background-color,
      class: bg,
      local-vars: (
        "bg-opacity": 1,
      ),
      values:
        map-merge(
          // Your custom colors
          $custom-colors,
          map-merge(
            $utilities-bg-colors,
            (
              "transparent": transparent,
            )
          )
        ),
    ),
  )
);

// Text Colors

$utilities: map-merge(
  $utilities,
  (
    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1,
      ),
      values:
        map-merge(
          // Your custom colors
          $custom-colors,
          map-merge(
            $utilities-text-colors,
            (
              "muted": $text-muted,
              "black-50": rgba($black, 0.5),
              "white-50": rgba($white, 0.5),
              "reset": inherit,
            )
          )
        ),
    ),
  )
);

[bkilinc]

so $theme-colors affect some components and it may not affect some other components. May be this should be documented in variables file.

[MisatoTremor]

The maps that are used for these are built in _variables.scss, but you can rebuild them.

Instead of just

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

do

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

[bkilinc]

This works. But, it isn't beautiful.

[mdo]

Duplicate of #34756. #34942 will be shipped in v5.2.0 to address it.

[snarea]

I solved the problem.
Related information exists in [ helpers/color-bg.scss ].
I worked with the following sources.*

------------------------add-source---------------------------------------

$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: map-merge($utilities-text, $utilities-colors);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
$utilities-bg: map-merge($utilities-bg, $utilities-colors);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

@each $color, $value in $theme-colors {
$color-rgb: to-rgb($value);
.text-bg-#{$color} {
color: color-contrast($value) !important;
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) !important;
}
}
@each $color, $value in $theme-colors {
$color-rgb: to-rgb($value);
.link-#{$color} {
color: color-contrast($value) !important;
}
}