Colore

Colori a tema

Usiamo un sottoinsieme di tutti i colori per creare una tavolozza di colori più piccola per la generazione di schemi di colori, disponibili anche come variabili Sass e una mappa Sass nel scss/_variables.scssfile di Bootstrap.

Tutti questi colori sono disponibili come mappa Sass, $theme-colors.

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

Dai un'occhiata alle nostre mappe Sass e ai documenti sui loop per come modificare questi colori.

Tutti i colori

Tutti i colori Bootstrap sono disponibili come variabili Sass e una mappa Sass nel scss/_variables.scssfile. Per evitare un aumento delle dimensioni dei file, non creiamo classi di colore del testo o dello sfondo per ciascuna di queste variabili. Invece, scegliamo un sottoinsieme di questi colori per una tavolozza dei temi .

Assicurati di monitorare i rapporti di contrasto mentre personalizzi i colori. Come mostrato di seguito, abbiamo aggiunto tre rapporti di contrasto a ciascuno dei colori principali: uno per i colori attuali del campione, uno per il bianco e uno per il nero.

Appunti sul Sass

Sass non può generare variabili in modo programmatico, quindi abbiamo creato manualmente variabili per ogni tinta e sfumatura. Specifichiamo il valore del punto medio (ad esempio, $blue-500) e utilizziamo funzioni di colore personalizzate per tingere (schiarire) o sfumare (scurire) i nostri colori tramite la mix()funzione colore di Sass.

L'uso mix()non è lo stesso di lighten()e : darken()il primo fonde il colore specificato con il bianco o il nero, mentre il secondo regola solo il valore di luminosità di ciascun colore. Il risultato è una suite di colori molto più completa, come mostrato in questa demo di CodePen .

Le nostre funzioni tint-color()e shade-color()vengono utilizzate mix()insieme alla nostra $theme-color-intervalvariabile, che specifica un valore percentuale a gradini per ogni colore misto che produciamo. Vedere i file scss/_functions.scsse scss/_variables.scssper il codice sorgente completo.

Mappe a colori Sass

I file Sass di origine di Bootstrap includono tre mappe per aiutarti a scorrere rapidamente e facilmente un elenco di colori e i loro valori esadecimali.

• $colorselenca tutti i nostri 500colori di base disponibili ( ) .
• $theme-colorselenca tutti i colori del tema denominati semanticamente (mostrati di seguito)
• $grayselenca tutte le tinte e le sfumature di grigio

All'interno scss/_variables.scsstroverai le variabili di colore di Bootstrap e la mappa Sass. Ecco un esempio della $colorsmappa del 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
);

Aggiungi, rimuovi o modifica i valori all'interno della mappa per aggiornare il modo in cui vengono utilizzati in molti altri componenti. Sfortunatamente in questo momento, non tutti i componenti utilizzano questa mappa Sass. Gli aggiornamenti futuri si sforzeranno di migliorare questo aspetto. Fino ad allora, pianifica di utilizzare le ${color}variabili e questa mappa Sass.

Esempio

Ecco come puoi usarli nel tuo Sass:

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

Sono inoltre disponibili classi di utilità colore e sfondocolor per l'impostazione e background-colorl'utilizzo dei 500valori di colore.

Generazione di utilità

Bootstrap non include utility colorper background-colorogni variabile di colore, ma puoi generarle tu stesso con la nostra utility API e le nostre mappe Sass estese aggiunte nella v5.1.0.

1. Per iniziare, assicurati di aver importato le nostre funzioni, variabili, mixin e utilità.
2. Usa la nostra map-merge-multiple()funzione per unire rapidamente più mappe Sass in una nuova mappa.
3. Unisci questa nuova mappa combinata per estendere qualsiasi utilità con un {color}-{level}nome di classe.

Ecco un esempio che genera utilità per il colore del testo (ad es. .text-purple-500) utilizzando i passaggi precedenti.

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

Questo genererà nuove .text-{color}-{level}utilità per ogni colore e livello. Puoi fare lo stesso anche per qualsiasi altra utilità e proprietà.