Color

colores del tema

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

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

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

Consulte nuestros documentos de 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 de Sass y un mapa de Sass en scss/_variables.scssel archivo. Para evitar aumentar 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 temática .

Asegúrese de controlar las relaciones de contraste a medida que personaliza los colores. Como se muestra a continuación, hemos agregado tres proporciones de contraste a cada uno de los colores principales: una para los colores actuales de la muestra, una contra el blanco y otra contra el negro.

Notas sobre Sass

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

Usar mix()no es lo mismo que lighten()y : darken()el primero combina el color especificado con blanco o negro, mientras que el segundo solo ajusta el valor de luminosidad de cada color. El resultado es un conjunto de colores mucho más completo, como se muestra en esta demostración de CodePen .

Nuestras funciones tint-color()y shade-color()se usan mix()junto con nuestra $theme-color-intervalvariable, que especifica un valor porcentual escalonado para cada color mixto que producimos. Consulte los archivos scss/_functions.scssy scss/_variables.scsspara obtener el código fuente completo.

Mapas Sass en color

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

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

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

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

Agregue, elimine o modifique 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 de Sass. Las actualizaciones futuras se esforzarán por mejorar esto. Hasta entonces, planee hacer uso de las ${color}variables y este mapa de Sass.

Ejemplo

Así es como puede usarlos en su Sass:

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

Las clases de utilidad de color y fondocolor también están disponibles para configurar y background-colorusar los 500valores de color.

Generación de utilidades

Bootstrap no incluye utilidades colorpara background-colorcada variable de color, pero puede generarlas usted mismo con nuestra API de utilidades y nuestros mapas Sass extendidos agregados en v5.1.0.

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

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

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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 .text-{color}-{level}utilidades para cada color y nivel. También puede hacer lo mismo con cualquier otra utilidad y propiedad.