Hover Effects for Font Names and Checkboxes in Font Library Modal

[okmttdhr]

What problem does this address?

The font-variant selection interface currently lacks hover effects for font names and checkboxes. The cursor pointer change is the only indication of interactivity.
Also, the font selection UI lacks hover effects on the font names, while it already has an effect for the arrow >.

Screen.Recording.2024-02-08.at.11.55.42.mov

What is your proposed solution?

• For font names: A subtle change in the background color or the border of the item to indicate the hover state
• For checkboxes: A border color change or background fill

[matiasbenedetto]

@okmttdhr thanks for reporting this!

@jasmussen I'd appreciate your input about if you think this is needed and some mockup in that case.

[jasmussen]

There should actually be a hover state as part of the original designs: #45271

[matiasbenedetto]

There should actually be a hover state as part of the original designs: #45271

Good to know. I moved this issue to to-do.

[juanfra]

I was checking this one, and there's a limitation to applying a different text color for the hover state, as Google fonts are displayed as SVGs and loading from w.org (I assume that could be for performance or GDPR-related, correct me if I'm wrong as I don't have full context).

For now, the easiest solution would be to apply only the background color on hover (If I'm not mistaken, we will use $gray-100).

[matiasbenedetto]

Google fonts are displayed as SVGs and loading from w.org (I assume that could be for performance or GDPR-related, correct me if I'm wrong as I don't have full context).

That's true, both are valid reasons.