Hover-styling doorvoeren in dev libraries

[pepijngieles]

Context

In de Figma-libraries is een reeks componenten aangepast om één duidelijke lijn
te trekken in de styling van hover states. Deze wijzigingen moeten nu worden
doorgevoerd in de dev libraries.

Wijzigingen

Hover

• Waar voorheen --accent of --secondary (blauw) werd gebruikt voor hover,
  is dit vervangen door --muted

Onderscheid selected vs. hover

• Op veel plekken waren selected en hover visueel identiek. Deze zijn nu van
  elkaar te onderscheiden. Selected is waar nodig toegevoegd en voorzien van background --secondary.

--popover token

• Aangepast van stone/800 naar neutral/900.
• Reden: voorkomt het mengen van stone- en neutral-schalen (viezige
  kleurcombinaties) en verhoogt het contrast tussen hover en de default
  background.

Component-specifiek

• Een aantal componenten had aanvullende, specifieke aanpassingen nodig.

Bron

De volledige set wijzigingen staat per component in de changelogs in Figma.

Definition of done

• Hover states in dev libraries gebruiken --muted i.p.v. --accent / --secondary
• Selected en hover zijn per component visueel onderscheiden
• --popover bijgewerkt naar neutral/900
• Component-specifieke wijzigingen uit de Figma-changelogs verwerkt
• Visueel gecheckt in light én dark mode