Tema · Stili
Gli stili
Un vocabolario di 385 nomi con cui si compongono le pagine. Non appartengono a un tema: li attraversano tutti e tredici, e cambiando tema si ri-stilano da soli.
Cosa sono
Un nome, non una classe
Uno stile è un nome che sta per un insieme di scelte grafiche — una superficie, un contorno, un’ombra, un movimento. I viewMode li COMPONGONO: dicono di che cosa sono fatti senza ripetere le classi, e ricorrono a Tailwind grezzo solo per i casi unici.
Perché esistono
Nessuno nomina un colore
Prendono tutti dalla palette attiva, ed è la ragione per cui sono trasversali: lo stesso `us-elevationSoft` su tredici temi dà tredici ombre diverse, e la pagina non cambia di una riga. Quelli con del CSS proprio diventano una regola `us-<nome>`; quelli fatti di sole utility vengono espansi in linea.
La superficie · 59
Di cosa è fatto un riquadro: il fondo, quanto è staccato dalla pagina, quanto sono tondi gli angoli, che contorno ha.
Il colore · 4
La tinta di un elemento e i suoi passi, dichiarati una volta e consumati dagli stati: uno stesso `hoverShade` serve nove bottoni senza nominare un colore.
La voce · 88
I ranghi tipografici e i trattamenti del testo. Un rango dice quanto è grande, mai che tag è: quello lo dichiara il viewMode.
Lo spazio · 8
Il respiro dentro e attorno: margini, distanze, e le griglie con cui un contenitore dispone i propri figli.
I pezzi finiti · 31
Le composizioni ricorrenti — bottoni, card, badge, avvisi, navigazioni, liste, campi — già montate come insieme di scelte.
La luce e il movimento · 174
Ciò che accade sopra e attorno: filtri, sfondi, cornici, separatori, e le animazioni d’ingresso con la loro rosa dei venti.
Guardarli applicati
Uno stile fuori contesto non dice niente: le pagine qui sotto lo mettono addosso a un elemento vero.
Vai al catalogoI campioni