Color Schemes: update sidebar styles to better match wp-admin

[chad1008]

Part of 7884-gh-Automattic/dotcom-forge

Proposed Changes

Adds some styles and a few new variables to the Calypso sidebar stylesheet to allow more versatility within individual color schemes to better match wp-admin

This PR contains the changes of 17 other smaller PRs for the individual color schemes (see links in the to-do list on 7884-gh-Automattic/dotcom-forge).

Why are these changes being made?

An issue recently highlighted some disconnects that have developed between our unified/redesigned sidebars and the wp-admin styles for various color schemes. This PR is the first step in making sure our schemes can match what wp-admin displays.

Important Note On Merging:

This PR is a pre-requisite for other PRs for each individual color scheme. I wanted to keep them separate so an individual scheme is easy to revert if needed.

That means this PR has to be merged before any of the others listed in 7884-gh-Automattic/dotcom-forge. It also means, because this PR introduces a few variables that the color schemes on production don't recognize, that we should merge this one and then immediately merge the individual scheme PRs. Ideally, I'd like to merge them all in one go so they can all stack into the same deploy so there's no lag time where specific sidebar elements will be unstyled. The new variables (see below) for the hover state of currently selected submenu items would be the most impactful one if there was a delay on a given scheme.

New variables:

• --color-sidebar-submenu-selected-hover-text: On some schemes, the currently selected submenu item (e.g. Posts > All Posts) does not change its color when hovered. On other schemes, the hover state matches that of unselected submenu items and the color does change. This variable allows us to make that determination on a per-scheme basis.
• --color-navredesign-sidebar-submenu-selected-hover-text: This variable accomplishes the same thing as the previous one, but for the Nav Redesign variant of the sidebar, which appears when a site has wp-admin set in interface setting and the My Home/Hosting page is being viewed (this is the only Calypso page that gets rendered when a wp-admin preference is set.
• --color-collapse-menu-text: Different themes handle the color of this menu differently. Sometimes it matches the base sidebar text color, other times the submenu hover color, or maybe just a separate color all together. The hover state seems to be consistent in that it matches the submenu hover color across all schemes, so we thankfully don't need additional specificity there.

Testing Instructions

This PR alone won't fully address most schemes, so I'd recommend visual code review to confirm the new variables and changes to existing styles all make sense. When reviewing the schemes themselves the styles will all come together, making a review of the UI more practical.

The individual scheme PRs are all branched off of this one, and can be rebased if we make any changes here to keep them current.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-113911

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-113911&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-113911&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• editing-toolkit
• happy-blocks
• help-center
• notifications
• odyssey-stats
• whats-new
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug chad1008/sidebar-style-updates on your sandbox.

[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.