Habillage
Habillage
Comment les choses sont dessinées, une fois la couleur et la densité établies : les coins, la profondeur, les lignes. Ces jetons sont l'axe de la `peau` du thème — la peau par défaut est ce que cette page montre, et une autre peau est un autre fichier définissant les mêmes noms, sans rien à changer ci-dessous.
Arrondis
Aucun, puis quatre étapes chacune deux fois celle d'en dessous, puis une pilule. Deux étapes d'écart représentent la même distance peu importe où vous vous trouvez sur l'échelle, ce qui la rend lisible. La première étape est à peine là exprès : c'est ce qu'une peau plate désire quand un vrai angle droit se lit comme inachevé. Tout ce qui est plus rond que la dernière étape est une forme qui veut être un cercle et le dit elle-même — un cercle n'est pas une décision de peau.
--radius-0
--radius-1
--radius-2
--radius-3
--radius-4
--radius-pill
Rôles des arrondis
Une forme ne lit jamais l'échelle ci-dessus : elle lit le rôle qu'elle joue, et la peau indique quelle étape ce rôle obtient — jamais ce qu'une étape vaut, ce qui ferait que l'échelle signifie deux choses en même temps. Ce qui tient quelque chose est une boîte, qu'elle contienne du texte, du contenu ou un message ; ce qui sépare deux régions d'une page n'est ni l'un ni l'autre, et ne rond rien. Changez la peau en `doux` et regardez un contrôle se séparer du reste : une capsule est adéquate pour quelque chose d'une ligne de haut et absurde pour une zone de texte.
--radius-control
une ligne de haut, et pressée
--radius-box
tient quelque chose
--radius-media
images et figures
--radius-pill
ce qui est lu comme une capsule
Ombres
Quatre profondeurs, d'un soulèvement de cheveux à un panneau flottant. Une peau qui désire un monde plat définit les quatre à aucun et chaque surface surélevée suit.
--shadow-1
--shadow-2
--shadow-3
--shadow-4
Bordures
La ligne elle-même — sa largeur et son style. Sa couleur n'est pas ici : cela appartient au schéma de couleurs, qui permet à une peau de retirer une ligne sans savoir quelle couleur elle aurait eue.
--border-discreet
--border-default
--border-focus
--border-placeholder
Séparateurs et zones
Les deux lignes qui distinguent les choses : entre deux rangées d'une chose, et entre deux régions d'une page. Une vingtaine de formes lisent la première, ce qui est pourquoi c'est un jeton et non une règle.
--border-separator — une rangée parmi d'autresune rangée parmi d'autres
une rangée parmi d'autres
--border-region — une région de la page, délimitée comme telle