Styling: Hover/Focus on TextInputs utilize dark colors #1886
Conversation
Changes: - Added new dark hover/focus colors to variables.md - Added new dark hover/focus colors to text-inputs.md - Updated text-inputs.md with the new dark hover/focus color stories
shindigira
requested review from
natalia-fitzgerald,
anselmbradford,
billhimmelsbach and
meissadia
✅ Thanks for the improvements! Browse a preview of your changes using the link below.
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
@shindigira
When I reviewed this with the design team we had only discussed changing the hover state to the darker color. Changing the focus state (or hover + focus) to the darker color was not the intent and would require further exploration/consideration. Perhaps as a first step we can change the hover to red (instead of blue) and put this additional change aside until I have time to discuss with the team next week?
Or we can pause on this and focus on the checkbox Error status states as a first step.
|
I'd like to proceed as follows:
The only visual change here should be changing Hover from Pacific to Dark Red. Focus+Hover and Focus should remain as Red. |
Changed where only Hover has the dark variant. See the screenshot and test via the preview link. |
|
I'll merge this after #1973 goes in. |
closes #1881
Changes
How to Test
text-inputs.lessand ensure no unintended styling changes affect other componentsVariablesstory section to view the new styling variables.TextInputsstory section and view the new dark hover/focus styles. Hover and focus in the three normal status sections (success/error/warning)Screenshot(s)
Subtle dark colors -- only visible during hover (not focus)