Adjust the styling and interaction pattern of context switcher to reinforce layering

Problem to solve

The context switcher is using the same background as the rest of the navigation, and the current revel animation does not help differentiate this section from the rest of the navigation.

Proposal

Update background color

Light mode

Current Proposed
$gray-10 (#fbfafd) $gray-10(#fbfafd)+#fff(64%) → #fefdfe

Dark mode

Current Proposed
$gray-10 (#1f1e24) $gray-10 (#1f1e24) + #fff(2%) → #232328

Match revel animation

See codepen →

Screen clip

Switcher_reveal

Watch on Loom →

Update section line separator's color

Dark mode

Current Proposed
$gray-50 (#333238) #fff(8%) → #353539
Edited by Austin Regnery