Skip to content

Add active colors to super sidebar interactive items

Scott de Jonge requested to merge 428352-super-sidebar-add-active-state-to-items into master

What does this MR do and why?

Add active colors to super sidebar interactive items

  • Rename counter class user-bar-button shared with "Search or go to"
  • Rename user-bar-item class user-bar-dropdown-toggle for clarity
  • Add $t-white-a-* SCSS variables
  • Make $t-gray-a- values static and remove _dark.scss overrides (see !137738 (comment 1681041239))
  • Refactor super sidebar styles with new custom properties for :active states, remove mix-blend-mode usage, add .gl-dark custom property values using $t-white-a-* values
  • Update nav-item and menu-section to use CSS custom properties for :hover/:focus and now :active states
  • Remove gl-bg-t-gray-a-08 override class on GlBadge in nav-item

Screenshots or screen recordings

Before After
image gdk.test_3000_-profile_preferences__1
image gdk.test_3000_-profile_preferences__2
image gdk.test_3000_-profile_preferences__3
image gdk.test_3000_-profile_preferences__4
image gdk.test_3000_-profile_preferences__5
image gdk.test_3000_-profile_preferences__6
image gdk.test_3000_-profile_preferences__7
image gdk.test_3000_-profile_preferences__8
image gdk.test_3000_-profile_preferences__9
image gdk.test_3000_-profile_preferences__10
image gdk.test_3000_-_profile_preferences

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #428352 (closed)

Edited by Scott de Jonge

Merge request reports