Light Color Scheme: Update to match wp-admin

[chad1008]

Part of 7884-gh-Automattic/dotcom-forge

Proposed Changes

Updates the Light 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 Light 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

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. Under Settings > General, choose the wp-admin/classic interaface. Open any wp-admin page.
3. In a third tab, select Tools > Hosting for your Atomic site. This should open /home/[site-url], where you'll find a Calypso interface with the Hosting section open to the My Home submenu item
4. Activate the Light color scheme for your site
5. In both of your Calypso-based tabs, confirm that the following match wp-admin(hopefully exactly, but at least visually close enough to provide a good UX):
   5.1. Unfocused text and background colors for menu items and submenu items
   5.2. Unfocused text and background colors in the flyout when hovering over an expandable item like "Posts"
   5.3. Unfocused text and background colors in the in-sidebar submenu when an expandable item is selected
   5.4. Unfocused text and background colors for the currently selected items (e.g. Posts) and submenu items (e.g. All Posts)
   5.5. Hover text and background colors for menu items and submenu items
   5.6. Hover text and background colors in the flyout when hovering over an expandable item like "Posts"
   5.7. Hover text and background colors in the in-sidebar submenu when an expandable item is selected
   5.8. Hover text and background colors for the currently selected items (e.g. Posts) and submenu items (e.g. All Posts)
   5.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-113495

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-113495&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.

[nightnei]

LGTM and works as expected 👍

[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

To test WordPress.com changes, run install-plugin.sh $pluginSlug chad1008/fix-light-color-scheme on your sandbox.

[chad1008]

Merged and deployed with #92397