-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ocean Color Scheme: Update to match wp-admin #92412
Conversation
Jetpack Cloud live (direct link)
Automattic for Agencies live (direct link)
|
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. |
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Merged and deployed with #92397 |
Part of 7884-gh-Automattic/dotcom-forge
Proposed Changes
Updates the Ocean 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 Ocean 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:
Instead, ask:
There are three views we care about:
/home/[site-url]
, where you'll find a Calypso interface with the Hosting section open to the My Home submenu item6.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.