Background

Across components which are interactive, the states of said components utilize different patterns for their interactive states. Some components start blue and stay blue through their interactive states, some start blue and gray, and become completely blue, while others remain gray throughout their entire interactivity. Additionally, some use a border only, or background only, or a mix of both throughout the states of interactivity to denote a new state with the previously mentioned, various combinations of colors.

This is a continuation of T377977: Update interactive styles of components: phase 1 for elements which have not yet been resolved.

Goal

Updates to be made:

• Menu to use progressive and progressive-subtle-- tokens for all content and interactive state backgrounds for selected and destructive and destructive-subtle-- tokens for all content and interactive state backgrounds which are destructive
• Tabs framed interactive states to use mix-blend-mode interactive tokens and match bottom border [box-shadow] to text color in all modes
• ToggleButton toggled-on state should follow same styles/interactive styles as the primary progressive button
• Update interactive states for Accordion to match similar components

Acceptance criteria

• Identify any remaining inconsistencies between interactive states across components.
• Update any necessary interactive states
  • Figma
  • Code

Expected changes

wikimedia-ui.json

application.json

dark.json