Nav unification: Port over WP Admin color schemes as new options in Calypso /me section.

[frontdevde]

This issue is part of the effort of combining color schemes in the Nav unification project.
For the approved direction please see #45675 (comment).

Reference Issues

• Main Issue Nav Unification - Main Issue #45435
  • Color Schemes Issue + Direction Nav Unification: Color Schemes #45675

[frontdevde]

@sfougnier @lcollette We have a design request for this one:

We'll need to add thumbnails for the color schemes we're porting over from wp-admin similar to the ones that already exist in the Calypso Color Scheme picker. Could you please provide us with these? Thank you!

For reference see SVGs for existing color schemes here:
https://github.com/Automattic/wp-calypso/tree/master/client/assets/images/color-schemes

[mreishus]

We may be able to do this ourselves by editing the existing svgs and changing the color codes in them.

[mreishus]

wp-admin color scheme details

Most wp-admin colors seem to be auto generated from 4 main variables:

$base-color: #523f6d;
$icon-color: #ece6f6;
$highlight-color: #a3b745;
$notification-color: #d46f15;

That's from wp-admin/css/colors/ectoplasm/colors.scss, which is used to build other .css files in that directory, I'm guessing. Not sure how to kick off the build process.

Build process

Build steps

• wp-admin/css/colors/ectoplasm/colors.scss Defines top level variables - something like 4 hex codes defines the entire color scheme
• Variables like $menu-submenu-background are defined in wp-admin/css/colors/_variables.scss, from applying functions on the top level variables
• wp-admin/css/colors/admin.scss is the template used to generate the final css files
• wp-admin/css/colors/ectoplasm/* are the final css files

[mreishus]

calypso color scheme details

• Calypso color scheme definitions in CSS look like this: link
• Definitions of the variables used in the above link come from: packages/calypso-color-schemes/src/__color-studio/color-properties.css packages/calypso-color-schemes/src/__color-studio/color-properties-rgb.css, but these files aren't tracked in git.
• A build process copies these files from @automattic/color-studio: link
• Color studio is its own repository: link
• https://color-studio.blog/ shows all of the color-studio colors available.
• color-studio is a project made by design systems: pbjpUB-aH-p2

So we may not be able to match the wp-admin colors 1:1, but rather use approximate matches that come from our internal color pallette. (Although, maybe the wp-admin colors were chosen from the pallette as well, haven't checked)

[mreishus]

I created a PR for adding ectoplasm here. This could serve as a basis for making other color schemes: #47075

• Used https://color-studio.blog/ as a reference
• In the SCSS file, I manually picked sidebar and masterbar colors from the https://color-studio.blog/ pallette, looking to match the wp-admin color scheme as close as possible.
• Modified the masterbar to be darker than the sidebar to fit with other calypso schemes
• For color-primary and color-accent styles, you basically only get to pick the hue from https://color-studio.blog/, as calypso "wants" --color-primary and --color-accent to be -50 lightness.
• For the SVG, I manually edited it, setting the same colors I picked in sidebar and masterbar, changing only color codes. If your editor can display the color of hex color codes it's not too bad:
  

This was a decent amount of work so, maybe one PR per color scheme is the way to go? Any thoughts here?

[frontdevde]

We may be able to do this ourselves by editing the existing svgs and changing the color codes in them.

Yes, we can easily change them. I was more thinking for design to provide us with guidance on how the thumbnails should look. That said, it's probably pretty easy for us to deduce the right look given that they simply reflect the implemented color scheme.

So we may not be able to match the wp-admin colors 1:1, but rather use approximate matches that come from our internal color pallette. (Although, maybe the wp-admin colors were chosen from the pallette as well, haven't checked)

I'd argue it's imperative that we do match the wp-admin colors 1:1 (either by matching in Calyso or adjusting in wp-admin). The goal of nav unification is to make the two interfaces identical. If colors don't match up exactly, colors will change when switching between menu items.

[mreishus]

I'd argue it's imperative that we do match the wp-admin colors 1:1 (either by matching in Calyso or adjusting in wp-admin). The goal of nav unification is to make the two interfaces identical. If colors don't match up exactly, colors will change when switching between menu items.

We do plan to remove the color scheme setting from wp-admin and have it read from calypso, so after all steps are completed, it would match wp-admin 1:1. The issue is that calypso (and other products) have standardized on a standard color pallette, https://color-studio.blog/ or npm package @automattic/color-studio, and the current wp-admin themes don't fit within that pallette.

[mreishus]

Best method to unify WP-Admin & Calypso color schemes

Continued discussion here: #47103

[mreishus]

Link to PRs dealing with individual schemes

• Ectoplasm - Add ectoplasm color scheme (Method A) #47122 add/color-scheme-ectoplasm-alt
• Sunrise - Add sunrise color scheme #47171 add/color-scheme-sunrise
• Ocean - Add color scheme ocean #47333 add/wp-color-scheme-ocean
  • Rename the Ocean color scheme to Aquatic; update user preferences accordingly
• Midnight - Awaiting Calypso midnight to be renamed, Not porting. Updating Calypso to match wp-admin
• Coffee - Add coffee color scheme from wp-admin #47173 add/color-scheme-coffee
• Blue - Add blue color scheme from wp-admin #47204 add/color-scheme-blue
• Modern - Add modern color scheme from wp-admin #47208 add/color-scheme-modern
• Light - Add light color scheme from wp-admin #47209 add/color-scheme-light
• Default - Not porting. Reference

Other PRs I created along the way:

• Nav-unification: Submenu colors are controlled by variable Nav-unification: Submenu colors are controlled by variable #47249
• Nav Unification: Flyout indicator arrow uses submenu background color Nav Unification: Flyout indicator arrow uses submenu background color #47250

[frontdevde]

Default - None yet, unsure if we need to port this one

I don't think we need to, right? Thinking out loud here: Initially, if we launch all of color schemes early, the default color scheme on the wp-admin side would be replaced by Classic Bright i.e. current Calypso colors. Then once we launch nav unification the default will be replaced by the new dark colors. With than in mind it seems like we wouldn't need to port the wp-admin default color scheme over to Calypso (but we'd definitely need to port over default Calypso Classic Bright to wp-admin). If folks want the old colours back, they can select the new Classic Dark theme we're creating that's very close to the wp-admin color scheme.

[frontdevde]

Closing as last remaining task is logged as a new issue here #47597