Realizzare un tema

All’interno della directory src/themes è presente un CSS di esempio in cui viene mostrato come sovrascrivere le variabili utilizzate all’interno del toolkit:

/* src/themes/pac/index.css */
:root {
  --Color-primary: #a8336c;

  --Pac-font-family-sans: Titillium Web, HelveticaNeue-Light, Helvetica Neue Light,
                          Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}

.t-Pac {
  font-family: var(--Pac-font-family-sans);
}

Similmente è possibile sovrascrivere qualsiasi variabile contenuta nei moduli CSS, modificando ad esempio i colori che caratterizzano l’aspetto grafico dei vari elementi.

Variabili CSS

Alcune variabili che è possibile sovrascrivere:

--Color-focus
--Color-primary

--Button-default-bg
--Button-default-color
--Button-default-border
--Button-danger-bg
--Button-danger-color
--Button-danger-border
--Button-info-bg
--Button-info-color
--Button-info-border

--Table-border-color
--Table-stripe-color

--Prose-color-link
--Prose-color-link-hover
--Prose-color-link-visited

--Form-input-border-color
--Form-state-invalid-border-color
--Form-state-invalid-label-color
--Form-state-invalid-message-color
--Form-state-warning-border-color
--Form-state-warning-label-color
--Form-state-warning-message-color

--Alert-error-bg
--Alert-error-color
--Alert-error-border
--Alert-error-background-image
--Alert-warning-bg
--Alert-warning-color
--Alert-warning-border
--Alert-warning-background-image
--Alert-success-bg
--Alert-success-color
--Alert-success-border
--Alert-success-background-image
--Alert-info-bg
--Alert-info-color
--Alert-info-border
--Alert-info-background-image

--Offcanvas-width
--Offcanvas-max-width

--Linklist-border-color
--Linklist-link-padding
--Linklist-link-arrow-width

--Treeview-link-padding
--Treeview-link-arrow-width
--Treeview-link-arrow-up
--Treeview-link-arrow-down

--Hero-height
--Hero-background-img
  ...

Personalizzazione dei colori

La palette di colori è generata automaticamente a partire da un colore di base (--Color-primary) (src/utils/colors/index.css) applicando tinte e tonalità secondo quanto descritto nel relativo paragrafo delle Linee Guida; in questo modo è sufficiente sovrascrivere la variabile --Color-primary per ottenere l’intera palette.

Per applicare font e colori personalizzati è necessario:

modificare il file del tema src/themes/pac/index.css sovrascrivendo le variabili CSS
effettuare una nuova build del toolkit tramite npm run build, secondo quanto descritto nella sezione “Utilizzare l’ambiente di sviluppo“
incorporare i CSS generati (contenuti nella directory build) nei template HTML

Nomenclatura delle regole CSS personalizzate

Tutte le modifiche che riguardano uno specifico tema vanno applicate assegnando al tag body la classe utilizzata in src/themes/*/index.css (nel caso specifico t-Pac, ma può esser scelta arbitrariamente).

<!-- nel template HTML -->
<body class="t-Pac"> ...

Ciò significa che tale classe deve comparire necessariamente come prefisso nei selettori di ogni nuova regola CSS introdotta dal tema (e/o qualsiasi modifica ai moduli effettuata sovrascrivendo le regole originali).

Ad esempio, all’interno di src/themes/index.css, per applicare un padding alla classe .Alert dovrai utilizzare:

.t-Pac .Alert {
  padding-right: 1em;
}

e non quindi:

/* Mai senza prefisso! */
.Alert {
  padding-right: 1em;
}