Re-review button stylings currently in brand.ai (default button styles, active styles, award emoji buttons)
The current styles may need a re-review in order to be sure they are correct. Also, the current button styles do not yet include stylings for active award emoji buttons.
I want to go over a few things to make sure we are doing to correct thing:
- The current default button border-color is
$grey-400: #bababa. Can we lighten the color to
- The default button hover, active, and focus stylings are quite dark. Can we lighten them up, similarly?
- We do not yet have active award emoji stylings in our button stylings. We could use these stylings to improve the hover, active, and focus stylings. That way creating more consistency and solving 2 problems (this would make buttons more inline with links as well)
- Even though we have our active button styles defined, I don't think they will fit well in the application, as it is too heave a styling. Given the changes above, it would make it look like:
I propose we shift our active button styles to have, no inner shadow and no thicker border. As can be seen in the following demo https://codepen.io/strages/pen/qpJoGp a normal button interaction shifts from hover to focus, meaning this only affects dropdowns and emoji buttons. This results in:
As can be seen, this is still a bit to heavy for an always on display active state. Therefore I propose also leaving the background a little lighter. Resulting in: