Elevación
Seis niveles de orden en profundidad, dibujados como un anillo de línea fina más una sombra muy suave, sin teñir la superficie.
La elevación describe qué superficie está por encima de cuál. Tanrei conserva los seis niveles semánticos, de 0 a 5, y los dibuja de forma contenida.
level0level1level2level3level4level5| Token | Claro | Oscuro |
|---|---|---|
--tanrei-sys-elevation-level0 | ||
--tanrei-sys-elevation-level1 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) |
--tanrei-sys-elevation-level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-sys-elevation-level3 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level4 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level5 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) |
Generado a partir de design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json, tokens/sys/elevation.tokens.json
Cada nivel por encima de cero es un token de sombra compuesto con dos tipos de capa:
- un anillo de 1px en el rol
elevation-ring, que define el borde con nitidez sobre cualquier fondo; - una o dos sombras muy suaves y de baja opacidad, que crecen con el nivel.
El anillo es siempre la primera capa. Una plataforma que no puede dibujar la extensión de una sombra lo representa como un borde de un píxel y conserva el resto.
Las superficies elevadas no se tiñen con el color primario. La profundidad se expresa con el anillo, la sombra y, cuando hace falta, un paso en la escala de contenedores de superficie. Así, las superficies neutras siguen siendo neutras.
Las sombras se ven mal sobre un lienzo casi negro, así que en los temas oscuros el anillo hace la mayor parte del trabajo, y las superficies elevadas pasan además a un rol de contenedor más claro.
| Nivel | Uso habitual |
|---|---|
| 0 | La página y todo lo que queda al ras de ella |
| 1 | Tarjetas en reposo, opciones segmentadas seleccionadas |
| 2 | Botones elevados, tarjetas que se elevan al pasar el cursor |
| 3 | Menús, popovers, snackbars |
| 4–5 | Diálogos, hojas y otras superficies modales |
Usa tan pocos niveles como la pantalla permita. Si hay que separar dos elementos vecinos y ninguno flota, usa una línea fina.