Midnight Color Scheme: Update to match wp-admin

[chad1008]

Part of 7884-gh-Automattic/dotcom-forge

Proposed Changes

Updates the Midnight color scheme to address discrepancies from wp-admin, for a more consistent user experience.

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 addresses those for the Midnight color scheme.

Note

Because the schemes depend on the variables provided by client/my-sites/sidebar/style.scss, this PR is branched off of #92397.

If any changes are recommended for client/my-sites/sidebar/style.scss, please leave a note on that PR instead of this one, so I can make changes there, and then rebase the individual scheme PRs.

Testing Instructions

Important Some items have received changes to their code that won't be reflected visually, because the only change was renaming a variable. That means comparing to production/trunk can be misleading, because a changed sidebar might look just like production, but the change is still needed for the new variables in the sidebar styles to work.

Instead of direct production/trunk comparisons of a link like (for example) My Sites under Hosting, focus on comparing the behavior of the types of links you're looking at. When My Sites on the Hosting sidebar is the currently selected menu item, it should behave the same way and have the same color/hover effect as, for example All Posts under Posts, when it's selected... basically, when testing this one, avoid asking:

Does this sidebar on local calypso look different than it does on production?

Instead, ask:

Does this currently selected sidebar item on local calypso match currently selected submenu items in wp-admin?

There are three views we care about:

• Calypso sidebar
• My Home/Hosting sidebar
• wp-admin (the control that we're updating schemes to match again)

1. Select a simple site and make sure you have the "default" view (i.e. Calypso) selected
2. In a separate tab, select an Atomic site. If you haven't already done so previously, select Tools > Hosting for your Atomic site and activate hosting settings. If this site was already atomic, you should already see the Hosting sidebar item. This should open /home/[site-url], where you'll find a Calypso interface with the Hosting section open to the My Home submenu item
3. Under Settings > General, choose the wp-admin/classic interface for your Atomic site
4. In a third tab, select the same Atomic site. Open any wp-admin page. This tab isn't changing, but we'll want it open to visually compare the other two tabs to so we can make sure they match.
5. Activate the Modern color scheme for your site
6. In your Calypso sidebar tab (from step 1) and your My Home/Hosting sidebar tab (from step 2), confirm that the following items match your wp-admin tab (from step 3):
   6.1. Unfocused text and background colors for menu items and submenu items
   6.2. Unfocused text and background colors in the flyout when hovering over an expandable item like "Posts"
   6.3. Unfocused text and background colors in the in-sidebar submenu when an expandable item is selected
   6.4. Unfocused text and background colors for the currently selected items (e.g. Posts) and submenu items (e.g. All Posts)
   6.5. Hover text and background colors for menu items and submenu items
   6.6. Hover text and background colors in the flyout when hovering over an expandable item like "Posts"
   6.7. Hover text and background colors in the in-sidebar submenu when an expandable item is selected
   6.8. Hover text and background colors for the currently selected items (e.g. Posts) and submenu items (e.g. All Posts)
   6.9. The "Collapse Menu" link, both unfocused and hovered

The hover states of a currently selected submenu item like "All Posts" and the "Collapse Menu" link were where I found the most nuance/variation from one scheme to the next.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

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

[matticbot]

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

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

• blaze-dashboard
• command-palette-wp-admin
• 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/fix-midnight-color-scheme on your sandbox.

[nightnei]

LGTM and works as expected 👍

[chad1008]

Merged and deployed with #92397