Determine best way to match calypso scheme and wp-admin scheme colors

[mreishus]

This issue is part of the effort of combining color schemes in the Nav unification project.
See: #45435 and #45675 (comment).

There are two possible options for creating a matching color scheme across calypso and wp-admin:

Option A: Copy wp-admin scheme -> Calypso as closely as possible.

Insert a new color scheme into calypso that matches the wp-admin colors as close as possible - so you don't notice any changes while switching.

Option B: Make a new color scheme in Calypso using @automattic/color-studio, then update the wp-admin scheme with those palette colors.

Create a new color scheme in calypso that uses our existing color infrastructure, notably the internal palette. This would look close to the wp-admin color scheme, but not match it exactly. Then port that new scheme to wp-admin, so the user wouldn't be able to notice any changes while switching.

Thoughts - Option A Downsides

I'm finding Option A more difficult than first imagined because our calypso schemes "want" lots of lightness values that the wp-admin schemes don't provide. For example, defining a primary color looks like this:

It's easy to swap out "jetpack-green" with another color in the internal palette - but if I'm coming from a custom color in wp-admin, I don't have a way (currently) to general all of those shades (and rgb shades).

I also think that Calypso color schemes "want" a lightness value of -50 for the primary color, which might not match wp-admin's current primary color lightness value, and could lead to contrast issues. <- I think this is potentially a big point.

Thoughts - Option B Downsides

We'd have to change color schemes on wp-admin, which are built in core and synced over to wpcom. So we'd have to register our own and remove the core-bundled ones.

Proposal

Try porting one color scheme with both methods and evaluate them, based on dev and design effort required plus user experience.

Resources

Some details about how color schemes work in each repo in #47036.
Various internal posts about color schemes in calypso:
p4TIVU-9c1-p2 - How to make a new color scheme
p97Xot-O5-p2
p9Jlb4-Gf-p2

[mreishus]

Here I've done ectoplasm method B, but without updating wp-admin side yet: #47075

[frontdevde]

Option A: Copy wp-admin scheme -> Calypso as closely as possible.

This was the route we had originally considered when discussing this in the color schemes sync meeting (see #45675 (comment)). Not necessarily because it's the best approach but because it seemed like a good compromise when trying to limit the scope of the already large project.

One way of recreating the various shades of the primary color could be to use lighten() and darken() functions to generate these variations based on the single wp-admin colour. That said we've been actively trying to remove the use of these color functions from the code base because they encourage inconsistencies in color use (at some point we had 40ish different grays in the code base). It'd be different here because it would be contained in the color scheme files but worth mentioning.

Option B: Make a new color scheme in Calypso using @automattic/color-studio, then update the wp-admin scheme with those palette colors.

This option, while a bit more work, is probably in the interest of our designers. The goal of color-studio is to have the same set of colors used throughout all our products to achieve visual consistency. If we could recreate the wp-admin color schemes with color studio colours, that would make sure all color schemes are "on brand". It would also make it easier to recreate the wp-admin color schemes in Calypso because all color studio colours come with the needed color variations. The time saved can then be used to update the wp-admin color scheme, tweaking the colors slightly to match the color studio values. With that in mind, Option B might actually take more or less the same amount of time as Option A while leading to a more satisfying result from a design (consistency) perspective.

[frontdevde]

cc'ing @lcollette @sfougnier I'd love to hear your thoughts from a design perspective on A vs. B.

Also just in case option B would be preferred, it would be super helpful if y'all could provide us with some guidance on choosing the right replacement colors from color studio! We could either have y'all choose the colors first or if easier we could take a first stab at approximating the colors and then have y'all design review it.

[obenland]

To me it feels cleaner to go with A) and create the color shades rather than to replace all Core color schemes.
I'd also consider it to be more in line with our effort of bringing wp-admin to Calypso, rather than the other way around.

[lcollette]

My preference, and the approach I took with the modern color scheme, is Option A. Matching color-studio at this point isn't necessary.

@sixhours What are your thoughts?

[mreishus]

I have these two PRs. Screenshots are in the PR descriptions:

• Method A: Add ectoplasm color scheme (Method A) #47122: Bring wp-admin colors into calypso.
  • Branch add/color-scheme-ectoplasm-alt.
  • Problem: All -10 to -90 shades of primary and accent color are the same. Definitely has readability and contrast issues. How to fix this while retaining the seamless feel between wp-admin and calypso?
  • Primary and accent colors are the same. There doesn't seem to be an equivalent in wp-admin schemes? This one is mostly made of the base and highlight color, with small bits of the notification and icon colors. I used the highlight color for both primary and accent.
  • Note that we are using CSS variables, so darken() lighten() etc aren't available. (Maybe there's a way to get these to work, let me know if you can find one.)
• Method B: Add ectoplasm color scheme (Method B) #47075: Use the color palette to make something close to the wp-admin scheme.
  • Branch add/color-scheme-ectoplasm-alt.
  • Problem: Does not incorporate changes back into wp-admin theme. Not sure how to do this yet, especially considering the original definition is in core..

I'd love to get Design's input on #47122 @lcollette @sfougnier @sixhours

[sixhours]

I'd vote for option A as well. Having gone through the process of converting some color schemes from /wp-admin already, I know the range in Color Studio is not great. If we have to use HEX values/custom variables just for these color themes, I think that's OK. We can add exceptions to the linter and comments to make it clear. Using HEX also allows us to use lighten/darken when we need to.

Problem: All -10 to -90 shades of primary and accent color are the same. Definitely has readability and contrast issues. How to fix this while retaining the seamless feel between wp-admin and calypso?

(I can't believe I'm saying this, but) I think we offer enough accessible color schemes, and as long as our default color schemes are accessible, we shouldn't worry as much about meeting AA standards with the ones imported from /wp-admin. Readability is important, of course, so we can tweak things as much as is necessary to get there, but I wouldn't worry about calculating contrast on these.

Primary and accent colors are the same. There doesn't seem to be an equivalent in wp-admin schemes? This one is mostly made of the base and highlight color, with small bits of the notification and icon colors. I used the highlight color for both primary and accent.

We could try using the same color at a different lightness or darkness as the "accent" for a subtle shift, especially in cases where we need to indicate some change in the interface (active tabs or hover states, for example).

Note that we are using CSS variables, so darken() lighten() etc aren't available. (Maybe there's a way to get these to work, let me know if you can find one.)

Not as far as I know. This is why we have so many variables for each color, studio-green-10, -20, -30, etc. so we could still have variations in lightness or darkness.

[mreishus]

Great, thank you everyone for your input. It looks like we'll be going with option A.