Estados y movimiento
El aspecto y el comportamiento se documentan juntos.
Reposo → hover → pulsado. El foco es independiente y visible al navegar con teclado. Disabled evita la activación; carga y error necesitan mensajes propios.
Estado actual
Decisiones que ya existen y pueden observarse en el producto.
Botón: sombra 4px en reposo; traslación +2px y sombra 2px en hover; +4px sin sombra al pulsar.
140ms para respuesta de control, 200ms para cambios de superficie. Curva cubic-bezier(0.2, 0, 0, 1).
Con prefers-reduced-motion, las transiciones se reducen y Skeleton deja de pulsar. Ninguna información depende de animación.
Las recompensas del juego usan 320ms con rebote y las animaciones compartidas bl-* del tema; se omiten con movimiento reducido.
Cada página de componente incluye Estados e interacción. Los elementos sin acción no simulan hover ni foco.
Muestras visuales del botón primario. Debajo puedes comprobar los estados reales con ratón, teclado o tacto.
4px / 0px2px / +2px0px / +4px3px / offset 3pxflat / mutedTab muestra el foco; Enter y Espacio activan. Hover reduce la sombra sin cambiar el grosor del borde. Con movimiento reducido, el estado cambia sin animación.
Tokens actuales
Valores presentes hoy; documentarlos no significa que todos sean definitivos.
| Token | Valor | Uso actual |
|---|---|---|
| --bl-motion-fast | 140ms | Duración o curva |
| --bl-motion-standard | 200ms | Duración o curva |
| --bl-motion-ease | cubic-bezier(0.2, 0, 0, 1) | Duración o curva |
| --bl-motion-celebrate | 320ms | Duración o curva |
| --bl-motion-ease-pop | cubic-bezier(0.34, 1.56, 0.64, 1) | Duración o curva |
Qué falta
Huecos que impiden tratar esta base como una regla estable.
No quedan huecos abiertos en el alcance actual de esta foundation.
Próximas decisiones
Orden recomendado para convertir los hallazgos en una foundation estable.
- 01
Prueba ratón, Tab, Enter, Espacio y movimiento reducido. Revisa el ejemplo interactivo de abajo.