Pressed and hover states in lists

[aweell]

En línea con las conversaciones que se han tenido sobre otros elementos, abro un tema referente a los estados :hover y :active de las listas para web y una propuesta de cual podría ser el resultado de tener los dos estados en el componente:

Ejemplo de la propuesta:

https://codepen.io/AlexBueno/pen/VwXrByp

Propongo añadir nuevos tokens para los elementos interactivos que tienen el mismo fondo que el background:

Token name	Light value	Dark value
backgroundHover	#fafafa	#242424
backgroundPressed	#f5f5f5	#292929

[yceballost]

Funciona bastante guay, por mi adelante!

La única duda que se me presenta sería si llamarle background a la constante.. aunque es cierto que al fin y al cabo es un background

[aweell]

La idea es que aplicara a cualquier elemento que tuviera como default el token background como es el caso de la lista. Quizás aquí sería interesante plantear si este componente debería utilizar containerBackground (Que tiene como alias el white en todas las marcas)? Y plantear background únicamente como un UIbackground?

(Pensando en otras aplicaciones que puede tener este token como por ejemplo el dismiss en cards y dialogs que son estrictamente containers por definición, en ese caso incluso tendríamos que plantear que los estados usen un alpha en vez de un sólido)

[yceballost]

No sé si te entiendo del todo, lo que dices es que igual esto estado podría estar en el componente Boxed ? Aunque para el caso de la row (no boxed) no valdría

Interesante ese detalle de la opacidad de aplicarlo tb a los dismiss

[aweell]

Ahora mismo la row utiliza el background pero la boxedRow utiliza el containerBackground. Por evitar duplicidad de tokens (tener que hacer un :hover y un :active para cada uno) proponía que la row utilizara también en su default containerBackground.

[yceballost]

el problema es que entonces en darkmode se vería un poco extraño, no crees?

background se integra con el fondo, el container no. quedaría algo asi:

[aweell]

Yes! Vale entonces la solución debería pasar porque estos nuevos tokens funcionen para background y backgroundContainer en los dos modos.

He actualizado el codepen con los valores aplicando el alpha y teniendo en cuenta el backgroundcontainer para las boxed.

Los nuevos valores serían:

Token name	Light value	Dark value
backgroundHover	hsl(0, 0%, 0%, 0.02)	hsl(255, 100%, 100%, 0.10)
backgroundPressed	hsl(0, 0%, 0%, 0.04)	hsl(255, 100%, 100%, 0.14)