Nav unification: consolidate color-sidebar-menu-hover-heading-background with non-"heading" version

[mreishus]

Background

Compared to #47294, this is a slightly more complex change. I definitely want @cpapazoglou to check this one out.

• This is considering the color of the background when hovering over sidebar items.
• Before we started the nav-unification project, calypso color schemes used color-sidebar-menu-hover-background.
• When we first added nav unification styles, we defined two variables, with the same color value:
  • color-sidebar-menu-hover-heading-background
    • This is a completely new variable to nav unification, not used in other places in calypso. However, it seems to perform the same function as the color-sidebar-menu-hover-background variable in calypso.
    • It's basically used everywhere in nav unification. So a theme must define the same value to color-sidebar-menu-hover-heading-background and color-sidebar-menu-hover-background to work with nav unification both on and off.
  • color-sidebar-menu-hover-background
    • This matches the calypso variable, but was only used in one corner case I couldn't recreate. Something about the site switcher. Link to code.
    • Its value in the default nav unification scheme is #32373c, which is a slightly darker version of the main color #1a1e23. In pull request Nav-unification: Submenu colors are controlled by variable #47249, I added a submenu-background variable which is also defined #32373c.

Changes proposed in this Pull Request

• Let color-sidebar-menu-hover-background control the sidebar hover background in both calypso and calypso+nav-unification.
• For the corner case with the site switcher, change to color-sidebar-submenu-background, which is also #32373c.
• Remove the new color-sidebar-menu-hover-heading-background variable.

Benefits

• One less variable
• Less changes needed to calypso schemes when porting to nav-unification calypso.

Testing instructions

Visit calypso with nav unification turned on, http://calypso.localhost:3000/?flags=nav-unification. Hovering sidebars should still work.

Reference Issues

• Main Issue Nav Unification - Main Issue #45435
  • Color Schemes Issue + Direction Nav Unification: Color Schemes #45675
    • Add the necessary wp-admin styles to support all color schemes available in Calypso Nav unification: port over Calypso exclusive color schemes to wp-admin #47040
      • Nav unification: Example of extending sakura to work on nav-unification Nav unification: Example of extending sakura to work on nav-unification #47292

[matticbot]

Test live: https://calypso.live/?branch=fix/consolidate-nav-unification-vars-2

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[cpapazoglou]

color-sidebar-menu-hover-background
This matches the calypso variable, but was only used in one corner case I couldn't recreate. Something about the site switcher. Link to code.

Is triggered when in site switcher you add a search term and press the down key

[cpapazoglou]

Thanks @mreishus for wrangling this!
This change makes sense to me and looks good!