Cor

Cores do tema

Usamos um subconjunto de todas as cores para criar uma paleta de cores menor para gerar esquemas de cores, também disponíveis como variáveis ​​Sass e um mapa Sass no scss/_variables.scssarquivo do Bootstrap.

Todas essas cores estão disponíveis como um mapa Sass, $theme-colors.

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

Confira nossos mapas Sass e documentos de loops para saber como modificar essas cores.

Todas as cores

Todas as cores do Bootstrap estão disponíveis como variáveis ​​Sass e um mapa Sass no scss/_variables.scssarquivo. Para evitar tamanhos de arquivo maiores, não criamos classes de cores de texto ou de fundo para cada uma dessas variáveis. Em vez disso, escolhemos um subconjunto dessas cores para uma paleta de temas .

Certifique-se de monitorar as taxas de contraste ao personalizar as cores. Conforme mostrado abaixo, adicionamos três taxas de contraste a cada uma das cores principais – uma para as cores atuais da amostra, uma para o branco e uma para o preto.

Notas sobre Sass

Sass não pode gerar variáveis ​​programaticamente, então nós mesmos criamos variáveis ​​manualmente para cada tonalidade e sombra. Especificamos o valor do ponto médio (por exemplo, $blue-500) e usamos funções de cores personalizadas para tingir (clarear) ou sombrear (escurecer) nossas cores por meio da mix()função de cor do Sass.

Usar mix()não é o mesmo que lighten()e darken()—o primeiro combina a cor especificada com branco ou preto, enquanto o último apenas ajusta o valor de luminosidade de cada cor. O resultado é um conjunto de cores muito mais completo, conforme mostrado nesta demonstração do CodePen .

Nossas funções tint-color()e são usadas junto com nossa variável, que especifica um valor percentual escalonado para cada cor misturada que produzimos. Consulte os arquivos e para obter o código-fonte completo.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Mapas Sass coloridos

Os arquivos Sass de origem do Bootstrap incluem três mapas para ajudá-lo a percorrer rápida e facilmente uma lista de cores e seus valores hexadecimais.

• $colors500lista todas as nossas cores de base ( ) disponíveis
• $theme-colorslista todas as cores de tema nomeadas semanticamente (mostradas abaixo)
• $grayslista todos os tons e tons de cinza

Dentro scss/_variables.scssde , você encontrará as variáveis ​​de cores do Bootstrap e o mapa Sass. Aqui está um exemplo do $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
);

Adicione, remova ou modifique valores no mapa para atualizar como eles são usados ​​em muitos outros componentes. Infelizmente, neste momento, nem todos os componentes utilizam este mapa Sass. Atualizações futuras se esforçarão para melhorar isso. Até lá, planeje fazer uso das ${color}variáveis ​​e deste mapa Sass.

Exemplo

Veja como você pode usá-los em seu Sass:

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

As classes de utilitário de cor e planocolor de fundo também estão disponíveis para definir e background-colorusar os 500valores de cor.

Gerando utilitários

O Bootstrap não inclui utilitários colorpara background-colorcada variável de cor, mas você mesmo pode gerá-los com nossa API de utilitários e nossos mapas Sass estendidos adicionados na v5.1.0.

1. Para começar, certifique-se de ter importado nossas funções, variáveis, mixins e utilitários.
2. Use nossa map-merge-multiple()função para mesclar rapidamente vários mapas Sass em um novo mapa.
3. Mescle este novo mapa combinado para estender qualquer utilitário com um {color}-{level}nome de classe.

Aqui está um exemplo que gera utilitários de cores de texto (por exemplo, .text-purple-500) usando as etapas acima.

@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";

Isso gerará novos .text-{color}-{level}utilitários para cada cor e nível. Você pode fazer o mesmo para qualquer outro utilitário e propriedade também.