Add coffee color scheme from wp-admin

[mreishus]

One part of #47036

Changes proposed in this Pull Request

• Add coffee color scheme

Testing instructions

• Visit /me/account
• Choose coffee and save

To see the wp-admin color scheme, create an atomic site, then visit /wp-admin/profile.php, choose color scheme and save.

Calypso:

Wp-admin:

Notes

If you're following along with Ectoplasm from #47122, you'll see I generated a palette of "Ectoplasm green" in -10 to -90 values. For this one, I found that "Studio Orange" was a close enough match for primary+accent colors and reused it. Orange and brown are close to each other in terms of color hue, who would have thunk it? I'm open to revision or ideas on this, though.

In wp-admin this is a "low contrast" scheme, which means that certain buttons are black instead of the highlight color. I haven't accounted for that here.

[matticbot]

Test live: https://calypso.live/?branch=add/color-scheme-coffee

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~47 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
account       +162 B  (+0.0%)      +47 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~87 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks       +162 B  (+0.0%)      +43 B  (+0.0%)
async-load-design              +162 B  (+0.0%)      +44 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sixhours]

🎉 This is coming together! Just a few minor things. Coffee could benefit from the same border treatment on the top bar as Ectoplasm:

I'm seeing the dark outline around the inline help button:

Noticed the gray plan flag in the sidebar could use a color shift:

And the Reader notification icon is still pink:

[cpapazoglou]

1. Sidebar Menu Headings should be white
   

[mreishus]

For the upsell nudge, I added a custom override. However, it's limited in scope to that one css class combination. It doesn't seem to be themeable as calypso hardcodes it to a neutral color:

My override is a 15% darken of the base color:

None of the other themes currently do this.

[mreishus]

I believe I've addressed everything except the circle around the FAB Inline Help button (explanation is in the ectoplasm PR #47122)

[cpapazoglou]

Thanks for pushing the changes @mreishus!

LGTM!

[mreishus]

The override for the nudge banner is causing issues when the nav unification flag is on (top right, text "free domain available" unreadable):

With Override:

Without Override:

I could make the override to be more specific, but I'm worried about it causing more issues I haven't seen yet, or that it will get lost as we reorganize CSS as the nav unification project continues. I propose removing the override, sticking with the base neutral colors set, and waiting until we control the banner with theme variables instead of neutral colors. @sixhours @cpapazoglou