Aspetto
Aspetto
Come vengono disegnati gli elementi, una volta stabiliti colore e densità: gli angoli, la profondità, le linee. Questi token sono l'asse `skin` del tema — l'aspetto predefinito è ciò che questa pagina mostra, e un altro aspetto è un altro file che imposta gli stessi nomi, senza nulla da cambiare qui sotto.
Arrotondamenti
Nessuno, poi quattro passi ciascuno il doppio di quello sottostante, poi una pillola. Due passi di distanza è la stessa distanza ovunque tu sia sulla scala, ed è ciò che lo rende leggibile. Il primo passo è appena presente di proposito: è ciò che un aspetto piatto desidera quando un vero angolo retto appare incompleto. Qualsiasi cosa più rotonda dell'ultimo passo è una forma che desidera essere un cerchio e lo dichiara essa stessa — un cerchio non è una decisione dell'aspetto.
--radius-0
--radius-1
--radius-2
--radius-3
--radius-4
--radius-pill
Ruoli degli arrotondamenti
Una forma non legge la scala sopra: legge il ruolo che svolge, e l'aspetto indica quale passo riceve quel ruolo — mai quanto vale un passo, il che renderebbe la scala significativa in due modi contemporaneamente. Ciò che contiene qualcosa è una scatola, sia che contenga testo, contenuto o un messaggio; ciò che separa due regioni di una pagina non è né l'uno né l'altro, e non arrotonda nulla. Cambia l'aspetto in `soft` e guarda un controllo staccarsi dal resto: una capsula è giusta per qualcosa alto una linea e assurda per un'area di testo.
--radius-control
alta una linea, e premuta
--radius-box
contiene qualcosa
--radius-media
immagini e figure
--radius-pill
quello che viene letto come una capsula
Ombre
Quattro profondità, da un sollevamento sottile a un pannello flottante. Un aspetto che desidera un mondo piatto imposta tutti e quattro a nessuno e ogni superficie sollevata segue.
--shadow-1
--shadow-2
--shadow-3
--shadow-4
Bordi
La linea stessa — la sua larghezza e il suo stile. Il suo colore non è qui: appartiene allo schema dei colori, che è ciò che consente a un aspetto di rimuovere una linea senza sapere di che colore sarebbe stata.
--border-discreet
--border-default
--border-focus
--border-placeholder
Separatori e regioni
Le due linee che distinguono le cose: tra due righe di una cosa, e tra due regioni di una pagina. Ventidue forme leggono la prima, ed è per questo che è un token e non una regola.
--border-separator — una riga tra le altreuna riga tra le altre
una riga tra le altre
--border-region — una regione della pagina, delimitata come tale