Color

Colores

La paleta de colores de Bootstrap ha seguido expandiéndose y adquiriendo más matices en la v5.3.0. Hemos agregado nuevas variables para colores de fondo y texto secondary y tertiary, además de {color}-bg-subtle, {color}-border-subtle y {color}-text-emphasis para nuestros colores de tema. Estos nuevos colores están disponibles a través de variables Sass y CSS (pero no de nuestros mapas de colores ni clases de utilidad) con el objetivo expreso de facilitar la personalización en múltiples modos de color como claro y oscuro. Estas nuevas variables se establecen globalmente en :root y se adaptan a nuestro nuevo modo de color oscuro, mientras que nuestros colores de tema originales permanecen sin cambios.

Los colores que terminan en -rgb proporcionan los valores red, green, blue (rojo, verde, azul) para su uso en los modos de color rgb() y rgba(). Por ejemplo, rgba(var(--bs-secondary-bg-rgb), .5).

Usando los nuevos colores

Estos nuevos colores son accesibles a través de variables CSS y clases de utilidad —como --bs-primary-bg-subtle y .bg-primary-subtle— lo que te permite componer tus propias reglas CSS con las variables, o aplicar estilos rápidamente a través de clases. Las utilidades se construyen con las variables CSS asociadas al color y, dado que personalizamos esas variables CSS para el modo oscuro, también se adaptan al modo de color de forma predeterminada.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Elemento de ejemplo con utilidades
</div>

Colores del tema

Usamos un subconjunto de todos los colores para crear una paleta de colores más pequeña para generar combinaciones de colores, también disponible como variables Sass y un mapa Sass en el archivo scss/_variables.scss de Bootstrap.

Todos estos colores están disponibles como un mapa Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Consulta nuestra documentación sobre mapas y bucles de Sass para saber cómo modificar estos colores.

Todos los colores

Todos los colores de Bootstrap están disponibles como variables Sass y un mapa Sass en el archivo scss/_variables.scss. Para evitar un aumento en el tamaño de los archivos, no creamos clases de color de texto o de fondo para cada una de estas variables. En su lugar, elegimos un subconjunto de estos colores para una paleta de temas.

Asegúrate de monitorear las relaciones de contraste a medida que personalizas los colores. Como se muestra a continuación, hemos agregado tres relaciones de contraste a cada uno de los colores principales: uno para los colores actuales de la muestra, uno para el fondo blanco y uno para el fondo negro.

Notas sobre Sass

Sass no puede generar variables mediante programación, por lo que creamos manualmente variables para cada tono y matiz nosotros mismos. Especificamos el valor del punto medio (por ejemplo, $blue-500) y usamos funciones de color personalizadas para teñir (aclarar) o sombrear (oscurecer) nuestros colores a través de la función de color mix() de Sass.

El uso de mix() no es lo mismo que lighten() y darken(); el primero mezcla el color especificado con blanco o negro, mientras que el segundo solo ajusta el valor de luminosidad de cada color. El resultado es una suite de colores mucho más completa, como se muestra en esta demostración de CodePen.

Nuestras funciones tint-color() and shade-color() usan mix() junto con nuestra variable $theme-color-interval, que especifica un valor de porcentaje escalonado para cada color mixto que producimos. Consulta los archivos scss/_functions.scss y scss/_variables.scss para ver el código fuente completo.

Mapas Sass de colores

Los archivos Sass de origen de Bootstrap incluyen tres mapas para ayudarte a realizar bucles rápida y fácilmente sobre una lista de colores y sus valores hexadecimales.

• $colors enumera todos nuestros colores base (500) disponibles
• $theme-colors enumera todos los colores del tema con nombres semánticos (que se muestran a continuación)
• $grays enumera todos los tonos y matices de gris

Dentro de scss/_variables.scss, encontrarás las variables de color de Bootstrap y el mapa Sass. Aquí hay un ejemplo del mapa Sass $colors:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Agrega, elimina o modifica valores dentro del mapa para actualizar cómo se usan en muchos otros componentes. Desafortunadamente en este momento, no todos los componentes utilizan este mapa Sass. Las actualizaciones futuras se esforzarán por mejorar esto. Hasta entonces, planifica hacer uso de las variables ${color} y de este mapa Sass.

Ejemplo

Aquí es cómo puedes usar esto en tu Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Las clases de utilidad de color y fondo también están disponibles para establecer color y background-color utilizando los valores de color 500.

Generación de utilidades

Bootstrap no incluye utilidades de color y background-color para cada variable de color, pero puedes generarlas tú mismo con nuestra API de utilidad y nuestros mapas Sass extendidos agregados en la v5.1.0.

1. Para comenzar, asegúrate de haber importado nuestras funciones, variables, mixins y utilidades.
2. Usa nuestra función map-merge-multiple() para fusionar rápidamente múltiples mapas Sass en un nuevo mapa.
3. Fusiona este nuevo mapa combinado para extender cualquier utilidad con un nombre de clase {color}-{level}.

Aquí hay un ejemplo que genera utilidades de color de texto (por ejemplo, .text-purple-500) utilizando los pasos anteriores.

@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 generará nuevas utilidades .text-{color}-{level} para cada color y nivel. También puedes hacer lo mismo para cualquier otra utilidad y propiedad.