Colores
Muchos de los componentes construidos en Bootstrapt tienen una serie de colores definidas en el map de Sass($theme-colors).
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
La definición de los colores se encuentra en el archivo scss/_variables.scss.

Estos son los colores básicos que tiene, los cuales los modifican mediante el valor (blanco/negro/peso), creando una paleta de colores.
Color sass maps
Dentro del archivo scss/_variables.scss, encontramos 3 maps de colores que nos facilitan y sus valores hexadecimales.
- $colors: Lista todos los colores
- $theme-colors: Lista los colores semánticamente nombrados
- $grays: Lista todos los colores de tonos de grises
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
Añadir, modificar o eliminar valores de este mapa de colores no es el más acertado, ya que muchos componentes no lo utilizan (por ahora). Hasta entonces tendremos que usar la variable ${color} y ese map de Sass.
Generating utilities
Bootstrap no tiene color ni background-color para cada variable color, pero podemos generárnosla mediante utility API. Para ello, los pasos a seguir son:
- 1. Nos debemos de asegurar que hemos importado las funciones, variables, mixins y utilities
- 2. Usamos la fusión para hacer un merge map-merge-multiple() creando un nuevo maps
- 3. Hacemos un merge para combiar cualquier utility con un nombre de clase {color}-{level}.
Por ejemplo, si queremos generar .text-purple-500:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($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
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
Esto nos genera un nuevo .text-{color}-{level} utilities para cada color y nivel.