Implement all element card state appearances

[umurgdk]

Element cards can be in 3 states

• Regular
• Highlighted
• Dimmed

Regular State

Regular card state is the default appearance shown in the periodic table. They have a dark background and their text is colored by their category

Highlighted State

Highlighted state is used in element inspector, compound builder as well as search results highlighting. Card background becomes the text color (which is the color decided by the elements category) and text becomes black (keeping the text transparency)

Dimmed State

Dimmed state is used for dimming unrelated search results on the periodic table to make related search results pop. Dark background is used as in regular state and text becomes dimmed gray.

https://www.sketch.com/s/3fe4efef-a8ae-47af-b455-98587010d778/a/WKOlxmw#inspector