Bootstrap 5 original full color palettes

Question

Bootstrap 5 documentation presents full color palettes, including white / black text at different background intensities for good contrast https://getbootstrap.com/docs/5.0/customize/color/.

These css classes are named as per the schema bd-blue-500.

Where can I find scss for generating these classes?

I have found few other solutions for e.g. https://5balloons.info/generate-background-color-for-all-available-colors-in-bootstrap-5/ but none of them creates these original Bootstrap 5 classes from docs.

Answer 1

To create palette-based utilities, you need to (example for grays):

@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

$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
);

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