Add ectoplasm color scheme (Method B)

[mreishus]

One part of #47036
Method B is defined in #47103. There's a "Method A" copy of the PR here: #47122.

Changes proposed in this Pull Request

• Add ectoplasm color scheme

Testing instructions

• Visit /me/account
• Choose ectoplasm 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:

Known Issues:

• As I'm limited to the colors on https://color-studio.blog/, I couldn't find a good match for the green. Purple is not perfect either but is closer.
• In calypso, the masterbar is a darker purple than the sidebar to match the other calypso themes. In wp-admin, they're the same.
• Calypso "wants" the main button color to be a -50 lightness, which is darker than the wp-admin one.
• The wp-admin pallette shows an orange, but I couldn't find it used anywhere while using the site.
  
• Hovering in the sidebar flips the text color from white to black for contrast reasons:
  
  It doesn't flip in wp-admin:
  
• We would have to port these changes back to wp-admin. But how?

[matticbot]

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

[a8ci18n]

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 139 times:
translate( 'Ectoplasm', { context: 'admin color scheme'} ) ES Score: 21

[mreishus]

There seems to be an issue with the sidebar text flipping from white to black on hover+select in conjunction with the "secondary color" text. The alt text color doesn't support changing on hover, so the "premium" word is hard to read when "plans" is hovered or selected.

https://github.com/Automattic/wp-calypso/blob/2cbd24e59ffd24df0797bd61bc6e383d29bd6b44/client/layout/sidebar/style.scss#L197-L212 - No simple &:hover color

[matticbot]

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

App Entrypoints (~10 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +12 B  (+0.0%)      +10 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~62 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
account       +205 B  (+0.1%)      +62 B  (+0.1%)

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 (~148 bytes added 📈 [gzipped])

name                                           parsed_size           gzip_size
async-load-design-blocks                            +205 B  (+0.0%)      +59 B  (+0.0%)
async-load-design                                   +205 B  (+0.0%)      +67 B  (+0.0%)
async-load-lib-preferences-helper                    +12 B  (+0.1%)       +9 B  (+0.2%)
async-load-calypso-blocks-inline-help-popover        +12 B  (+0.0%)      +13 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.

[mreishus]

We'll be going with Option A: #47103 #47122