Guida · Le fondamenta
Le variabili
Nomi piatti, un valore ciascuno. Sono il fondo su cui poggia tutto il resto: cambiarne uno si vede ovunque, e nessuno di loro sa dove.
Dove siamo
Hai un progetto che rende una pagina. Alla fine di questo capitolo avrai cambiato il colore primario di tutto il sito modificando una riga, e saprai perché quella riga arriva fino a un bottone che non l’ha mai nominata.
Si comincia da qui e non dai componenti perché è l’ordine in cui le cose si costruiscono: gli stili citano le variabili, i viewMode citano gli stili, i blocchi citano i viewMode.
Il gesto
Apri db.themes.json, alla radice del progetto. Trova il tema attivo — il nome sta in ACTIVE_THEME, dentro src/themes.ts — e nella sua palette cambia primaryColor. Salva.
In dev il generatore è in ascolto sugli store: ricarica, e header, bottoni, bordi si spostano insieme. (Accanto c’è anche db.base-vars.json, stesso schema piatto, per le poche variabili che non appartengono a un tema.)
// db.themes.json — il tema attivo, la sua palette
{
"name": "uims",
"palette": {
"primaryColor": "#2B5F83",
"secondaryColor": "#DFE9F0",
"accentColor": "#904F20"
}
}Cos’è appena successo
Il file non è letto dal browser: gen:css lo trasforma in variabili CSS scritte in .uims/uims-theme-vars.css, che styles.css importa nel bundle. In dev il generatore resta in ascolto e riscrive il file a ogni salvataggio; in build ci pensa prebuild. Da lì in poi le variabili esistono per tutta la pagina, e chiunque le usi le prende da lì.
Per questo il cambiamento arriva ovunque senza che nessuno lo propaghi. Un bottone non conosce primaryColor: conosce una classe, che conosce una variabile, che quel file ha valorizzato. Tre passaggi, tutti per nome — e nessun riferimento diretto da aggiornare.
La conseguenza pratica è che non esiste un posto dove dimenticarsi il colore. Non c’è propagazione, c’è una sorgente sola.
Perché piatto, e non annidato
Un oggetto annidato — colors.primary.500 — sembra più ordinato e costa caro: obbliga chi scrive uno stile a conoscere l’albero, e chi riorganizza l’albero a cambiare ogni stile che lo citava. Un nome piatto è un indirizzo stabile.
Il prezzo è che l’ordine va tenuto a mano. Si paga una volta, mentre l’altro si paga a ogni rinomina.
Quando non funziona
Se un colore «non cambia», guarda il valore prima della catena. Una variabile CSS non valida non dà errore: il browser la scarta e il colore torna a quello ereditato.
Nessun log, nessun avviso. "primaryColor": "verde" si comporta esattamente come una riga che non hai mai scritto.
Avanti
Le variabili base sono il fondo comune, uguale per ogni tema. Nel capitolo dopo: cosa succede quando un tema vuole discostarsene.