Bootstrap 5 not compiling gray color into utility classes with custom sass

Question

I have the following code in my styles.scss file.

$all-colors: map-merge-multiple($grays, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);


$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
    "font-size": (
        property: font-size,
        class: display,
        values: $display-font-custom
    )
  )
);

Based on the instructions in the Customize Section of the website, this should generate color and background-color classes for all colors within the map-merge-multiple mixin. I get all the colors except for gray.

I have tried placing them in a different order, placing

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
) !default;

in my primary scss file, and tried a separate mixin. Nothing has worked. I also checked to make sure there were no custom options that needed to be disabled or enabled.

Answer 1

Here, I have shared code for $grays color only Please consider updating your Style.scss file code for gray utilities as below:

$utilities: () !default;

$utilities: map-merge(
  (
    "grays": (
      property: background-color,
      class: gray,
      values: $grays
    )
  ),
  $utilities
);

This will create a CSS file with .gray-100,.gray-200, .gray-300, and so on... for background colors.

If you want to create classes for gray text colors like .text-gray-100, .text-gray-200, .text-gray-300, etc... then you can add them as below:

$utilities: () !default;    

$utilities: map-merge(
  (
    "grays": (
      property: background-color,
      class: background-color,
      values: $grays
    ),
    "text-grays": (
      property: color,
      class: text-gray,
      values: $grays
    )
  ),
  $utilities
);

This will give you output as

.gray-100 {
  background-color: rgba(150, 150, 150, 0.06) !important;
}

.gray-200 {
  background-color: rgba(150, 150, 150, 0.1) !important;
}

.gray-300 {
  background-color: rgba(150, 150, 150, 0.2) !important;
}

....
....

.text-gray-100 {
  color: rgba(150, 150, 150, 0.06) !important;
}

.text-gray-200 {
  color: rgba(150, 150, 150, 0.1) !important;
}

.text-gray-300 {
  color: rgba(150, 150, 150, 0.2) !important;
}

....
....

Happy Coding!!