Implementazione di temi multi-brand con variabili CSS

La tematizzazione multi-brand associa un unico insieme di token alias dei componenti a valori diversi dei token globali per ogni brand. I componenti fanno riferimento ai token alias; i file del tema di ciascun brand rimappano gli alias sui token globali specifici del brand.

Definisca i token globali in :root: tutti i valori grezzi dei colori, della spaziatura e della tipografia. Questo è il brand predefinito. I componenti non fanno mai riferimento direttamente ai token globali, ma sempre tramite gli alias.

I token alias fanno riferimento ai token globali usando var(): --color-action: var(--color-brand-primary). I componenti usano --color-action. Cambiando il significato di --color-brand-primary si modifica l'intero sistema.

Applichi i temi del brand con una classe su html o su un elemento contenitore. Ogni classe del tema sovrascrive i token globali nell'ambito di quel brand. I componenti all'interno del contenitore ereditano automaticamente i valori del brand.

La modalità scura è una variante del tema: una classe o una media query che sovrascrive i token dei colori. Utilizzi prefers-color-scheme per il valore predefinito del sistema operativo e una classe .dark per la scelta dell'utente. Entrambi modificano gli stessi token alias.

Le proprietà personalizzate CSS seguono la cascata e vengono ereditate. Un tema applicato a un elemento contenitore influisce su tutti i suoi discendenti. I temi annidati sovrascrivono i temi esterni a livello del contenitore, una soluzione utile per tematizzare widget incorporati nelle pagine.

Si assicuri che i token alias siano sempre definiti. Se manca una classe del tema, l'alias dovrebbe ricorrere in modo appropriato a un valore predefinito. Utilizzi la sintassi di fallback di CSS var(): var(--color-action, #3b82f6) per evitare testo invisibile o sfondi mancanti.

Style Dictionary può produrre file CSS separati per i temi a partire da un JSON di token. La fase di build genera theme-brand-a.css e theme-brand-b.css. Carichi il file appropriato a runtime oppure lo compili in bundle separati per ogni brand.

Scriva test di regressione visiva che eseguano il rendering di ogni componente in ogni tema. Percy e Chromatic acquisiscono screenshot per ogni variante del tema. I test visivi automatizzati rilevano le regressioni quando i valori dei token globali cambiano inaspettatamente.

Alterni le classi del tema con JavaScript: document.documentElement.classList.replace("theme-a", "theme-b"). Le variabili CSS si aggiornano istantaneamente senza eseguire nuovamente il rendering dei componenti: non servono né un nuovo rendering di React né il ricalcolo degli stili per valori statici.

Le variabili CSS vengono risolte al momento del paint: modificare una variabile radice attiva il repaint di tutti gli elementi che la utilizzano. Limiti le modifiche alle variabili globali alle interazioni dell'utente, come il cambio del tema, anziché usarle nei cicli di animazione. Utilizzi transizioni sulle singole proprietà per gli effetti di tematizzazione animati.

La tematizzazione multi-brand separa i valori globali grezzi dei token dai token alias semantici. Le classi dei temi sovrascrivono i token globali nell'ambito di un contenitore. I componenti che fanno riferimento agli alias riflettono automaticamente il tema del brand attivo, consentendo il cambio a runtime senza modificare il codice dei componenti.