I am working on a website for a client and they have a style guild that I need to follow.
Below is the Figma of the search field.
Breakdown of the below image;
- Default Stage
- Focused state (Please note there is no hover state for the entire element)
- Focused (keyboard) < don’t need help with this
None of that would be an issue if it wasn’t for the fact that the text color (icon) needs to changed based on the state of the search field.
Breakdown of the below image:
Top Left: Default State
Top Right: Default hover state
Bottom Left: Default focus state
Bottom Right: Hover focus state.
Basically no matter what the state is it needs to turn #D14210 when hovered. However, based on the state of the search field it will need to change back to either #FFFFFF or #2D2F32
The icon is actually a font: Material Symbols and Icons - Google Fonts
So I dont need to change an SVG color etc.
Here is my public share link: [LINK]