Apariencia
Apariencia
Cómo se dibujan las cosas, una vez que se establece el color y la densidad: las esquinas, la profundidad, las líneas. Estos tokens son el eje de `piel` del tema: la piel predeterminada es lo que muestra esta página, y otra piel es otro archivo que establece los mismos nombres, sin nada que cambiar a continuación.
Radios de borde
Ninguno, luego cuatro pasos cada uno el doble del anterior, luego una píldora. Dos pasos de distancia es la misma distancia dondequiera que estés en la escala, lo que lo hace legible. El primer paso apenas está presente a propósito: es lo que una piel plana desea cuando un verdadero ángulo recto se lee como incompleto. Cualquier cosa más redonda que el último paso es una forma que quiere ser un círculo y lo dice por sí misma: un círculo no es una decisión de piel.
--radius-0
--radius-1
--radius-2
--radius-3
--radius-4
--radius-pill
Roles de los radios de borde
Una forma nunca lee la escala anterior: lee el rol que desempeña, y la piel dice qué paso recibe ese rol: nunca cuánto vale un paso, lo que haría que la escala significara dos cosas a la vez. Lo que sostiene algo es una caja, ya sea que contenga texto, contenido o un mensaje; lo que separa dos regiones de una página no es ninguno de los dos, y no redondea nada. Cambia la piel a `suave` y observa cómo un control se separa del resto: una cápsula es adecuada para algo de una línea de alto y absurda para un área de texto.
--radius-control
una línea de alto, y presionada
--radius-box
sostiene algo
--radius-media
imágenes y figuras
--radius-pill
lo que se lee como una cápsula
Sombras
Cuatro profundidades, desde un levantamiento delgado hasta un panel flotante. Una piel que desea un mundo plano establece las cuatro en ninguna y cada superficie elevada sigue eso.
--shadow-1
--shadow-2
--shadow-3
--shadow-4
Bordes
La línea misma: su ancho y su estilo. Su color no está aquí: eso pertenece al esquema de color, que es lo que permite que una piel elimine una línea sin saber qué color habría tenido.
--border-discreet
--border-default
--border-focus
--border-placeholder
Separadores y regiones
Las dos líneas que distinguen las cosas: entre dos filas de una cosa y entre dos regiones de una página. Veinte formas aproximadamente leen la primera, razón por la cual es un token y no una regla.
--border-separator — una fila entre otrasuna fila entre otras
una fila entre otras
--border-region — una región de la página, delimitada como tal