Estados de interacción
Las capas de estado, el indicador de foco de separación y anillo, y cómo se dibuja el estado deshabilitado.
Los componentes interactivos comparten un mismo vocabulario de estados: habilitado, con el cursor encima, con foco, pulsado, arrastrado, seleccionado, activado, error, cargando y deshabilitado. La especificación de un componente enumera los estados que admite, y cada plataforma debe implementarlos todos.
El paso del cursor, el foco, la pulsación y el arrastre se muestran con una capa de estado: una superposición translúcida que cubre el contenedor del componente.
- La capa toma el color del contenido, es decir, el rol
on-de aquello que cubre. En un botón con relleno eson-primary; en un botón de texto es el color de la etiqueta. - Su opacidad sale de un token, no del componente.
- Solo se ve una capa a la vez. Cuando los estados se solapan, gana el más fuerte: pulsado sobre con foco, y con foco sobre con el cursor encima.
- Aparece con un fundido, en una transición breve de efectos, y de inmediato al pulsar.
La selección discreta también es una capa, y es la que permanece: la opción seleccionada de una lista, el elemento de enlace actual de un menú y el indicador de las pestañas tonales se dibujan con el color de su contenido a selected-state-layer-opacity, el doble de la capa de paso del cursor, sobre cualquier superficie en la que esté el elemento. Así, en cualquier superficie, un elemento seleccionado se separa de uno con el cursor encima tanto como este se separa de uno en reposo. Las capas de paso del cursor, foco y pulsación se superponen a ella, y la selección nunca se comunica solo con el relleno: una marca de verificación, un indicador o la etiqueta también la dicen.
| Token | Valor | Muestra |
|---|---|---|
--tanrei-sys-state-disabled-container-opacity | 0.12 (12%) | AaAa |
--tanrei-sys-state-disabled-content-opacity | 0.38 (38%) | AaAa |
--tanrei-sys-state-dragged-state-layer-opacity | 0.16 (16%) | AaAa |
--tanrei-sys-state-focus-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-hover-state-layer-opacity | 0.08 (8%) | AaAa |
--tanrei-sys-state-pressed-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-selected-state-layer-opacity | 0.16 (16%) | AaAa |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/state.tokens.json
Pasa el cursor por los botones siguientes y púlsalos para ver la capa sobre distintos contenedores:
Capas de estado
El foco del teclado se dibuja como una separación de 2px en el color de la superficie, seguida de un anillo de 2px en el rol focus-ring. La separación garantiza que el anillo se vea incluso cuando el relleno del propio componente es parecido al color del anillo, y se comprueba que el rol tenga un contraste de 3:1 frente a las superficies.
- El anillo se muestra para el foco del teclado y de la tecnología de apoyo, no para los clics del puntero.
- Nunca se anima.
- Sigue la forma del componente, desplazado hacia fuera.
Tanrei no dibuja una onda que se expande al pulsar. La capa del estado pulsado es la respuesta. Un tema puede activar la onda de forma explícita, pero ningún componente depende de ella.
Un componente deshabilitado dibuja su contenedor con disabled-container-opacity y su contenido con disabled-content-opacity de on-surface, no muestra ninguna capa de estado y sale del orden del foco. Los elementos deshabilitados están exentos de los requisitos de contraste, lo cual es un motivo para usarlos con moderación.
Consejo
Es preferible mantener habilitada una acción y explicar qué falta cuando se usa. Un botón deshabilitado no puede decirle a nadie por qué lo está.