Colori

Quali sono i colori disponibili in Bootstrap Italia e come personalizzarli

Introduzione

Bootstrap Italia dalla v3.x espone i valori dei colori tramite le CSS custom properties. Il nome delle variabili descrive la funzione del colore e non il valore cromatico.

Semantica dei colori

I colori seguono la semantica definita dal Design System Italia e sono suddivisi in:

Varianti

Ciascun colore può avere diverse varianti:

Attenzione: I nomi subtle e muted sono utilizzati sia per i colori che per le varianti. In questo modo possono essere abbinati sia ad una proprietà come border che ad un colore come primary. Ad esempio:

1
2
3
4
 :root {
   --bsi-color-background-primary-muted: #004d99;
   --bsi-color-border-subtle: #c5c7c9;
 }

Mentre --bsi-color-background-primary-muted definisce una variante molto attenuata del colore primario abbinata alla proprietà background, la variabile --bsi-color-border-subtle definisce la variante di un bordo, senza esplicitare il colore di riferimento, che in questo caso è un grigio chiaro.

Variabili CSS disponibili

Le variabili semantiche descrivono il ruolo del colore all’interno dell’interfaccia. Sono organizzate per categoria: testo, sfondo, bordo, link e stato.

Colore del testo

Le variabili --bsi-color-text-* controllano il colore del testo in diversi contesti:

Colore di sfondo

Le variabili --bsi-color-background-* controllano i colori di sfondo di componenti e sezioni di pagina.

Colore dei bordi

Le variabili --bsi-color-border-* controllano i colori dei bordi di componenti e separatori.

Colore dei link

Le variabili --bsi-color-link-* controllano i colori dei link nella pagina.

Colori di stato

Le variabili --bsi-color-status-* sono alias semantici dei colori di sfondo di stato, utili per colorare elementi indicatori come badge, dot o icone.

Come personalizzare i colori

Puoi personalizzare i colori creando un foglio di stile dedicato e caricarlo dopo bootstrap-italia.min.css, seguendo la logica a cascata dei file CSS. In questo modo è possibile sovrascrivere le variabili sull’elemento :root.

1
2
3
<link rel="stylesheet" href="bootstrap-italia.min.css">
<!-- Caricamento del foglio di stile personalizzato -->
<link rel="stylesheet" href="my-custom-colors.css">

In alternativa, puoi creare un file SCSS dedicato e importarlo nel file sorgente della libreria, inserendolo dopo il parziale _root.scss seguendo la nuova logica di importazione:

1
2
3
4
5
6
7
8
9
// my-bootstrap-italia.scss

@use 'bootstrap-italia/src/scss/base/root' as *;

// altri parziali da importare
// ...

// Personalizzazione dei colori
@use 'my-custom-colors.scss' as *;

Cambiare il colore primario

Ad esempio, cambiare il colore primario del tema è molto semplice. Basta sovrascrivere le principali variabili primary per categoria seguendo la stessa logica:

1
2
3
4
5
6
7
8
9
10
11
12
/* my-custom-colors.css */
:root {

  /* Nuovo colore primario */
  --my-custom-primary-color: #005C2B;

  /* Override delle variabili CSS di Bootstrap Italia */
  --bsi-color-text-primary: var(--my-custom-primary-color);
  --bsi-color-background-primary: var(--my-custom-primary-color);
  --bsi-color-border-primary: var(--my-custom-primary-color);
  --bsi-color-icon-primary: var(--my-custom-primary-color);
}

Questo approccio è valido per tutte le variabili disponibili nella libreria.

Migrazione dalla versione 2

La versione 2.x di Bootstrap Italia metteva a disposizione molte classi di utility legate alla palette dei colori che ora sono state rimosse in favore delle variabili CSS.

Se hai utilizzato queste classi in precedenza, puoi sostituirle con le variabili CSS simili o equivalenti verificando che i valori siano compatibili, secondo il contesto di utilizzo.

Classi rimosse

In questa tabella sono riportate le classi per le quali è disponibile una variabile o classe CSS equivalente. Quelle elencate come rimosse invece non hanno un sostituto diretto.