Add ectoplasm color scheme (Method A)

[mreishus]

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

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

• Big: All lightness values of both primary and accent colors, -10 through -90, are set to the same color. How do we generate these while maintaining a seamless experience between wp-admin and calypso? Here's how color-studio generates them.
• Primary and accent colors are the same. Does this cause an issue?

[matticbot]

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

[matticbot]

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

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

name        parsed_size           gzip_size
entry-main        +12 B  (+0.0%)       +8 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 (~136 bytes added 📈 [gzipped])

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

Listing issues that arise from setting all primary-10 - primary-90 and accent-10 - accent-90 colors to wp-admin highlight color. (Starting with one and will edit others in)

SectionNav Hover - Unreadable text


Hover background is color-primary-0

Busy bar isn't animated


color-accent and color-accent-60

Credit Card is unreadable


Background is color-primary-0, border is color-primary-5 and color-primary-10

Line Chart series blend together


color-primary-dark, color-accent, color-primary-light

PieChart


color-primary-dark, color-accent, color-primary-light

ProductCard doesn't show selection as clearly


--color-primary-rgb - this is a bug because my -rgb variants include rgb() when they shouldn't

ProgressBar doesn't animate


color-primary, color-primary-light

Some text uses color-primary-dark and is hard to read.

[mreishus]

So, having all -10 -90 assigned to the same color was causing some issues as illustrated above. I used color-studio to generate a range of colors and it fixes the issue.

Since we set the sidebar colors exactly, we can make sure that those match wp-admin exactly and don't use the "palette" colors. So this way, we retain parity with wp-admin but provide calypso with some of the extra colors it wants.

in data/color-definitions.js

    {
      name: 'Ectoplasm Green',
      default: 50,
      specs: {
        hue_start: 70,
        hue_end: 72,
        hue_curve: 'easeOutSine',
        sat_steps: [
          8, 27, 56, 80, 100, 100, 100, 100, 100, 100, 100, 100
        ],
        lum_steps: [
          96, 96, 95, 94, 87, 75.1, 61.6, 49, 40.5, 31, 20, 11
        ]
      }
    }

[sixhours]

Took this for a quick spin! I noticed the outline around the help button could be tweaked to use a variation of the green:

What do you think about adding a darker purple for the top bar border color to give it a little separation from the side nav?

[cpapazoglou]

Thanks @mreishus for wrangling this!
Generally it works as expected. I navigated around and checked the components page! Let's check if we can easily address the following:

Menu Heading should be the same as links or at least vivid enough

[cpapazoglou]

Took this for a quick spin! I noticed the outline around the help button could be tweaked to use a variation of the green:

What do you think about adding a darker purple for the top bar border color to give it a little separation from the side nav?

@sixhours thanks for chiming in! As it seems all wp-admin color schemes make no distinction between the masterbar and the sidebar in terms of colour or bordering. I agree it would be best, but I am not sure that we should start making changes to already wp-admin defined colour schemes. This would increase maintainability of schemes and make the scope of porting the colour schemes even larger. @davemart-in , @lcollette what is your take on this?

[sixhours]

The /wp-admin version of Ectoplasm shows a border for me:

[cpapazoglou]

The /wp-admin version of Ectoplasm shows a border for me:

Interesting, the core version doesn't have one... It is a wpcom hack.

That said, I am not sure how we should proceed... wpcom-admin-bar.css contains a dozen of overrides.

[mreishus]

Variable scope change

Done.

Notification circle color in masterbar:

Done.

Masterbar bottom border color:

As noted above, it seems like this looks different depending on if you're on atomic or not. I'm okay adding a bottom border since there is already support in it in calypso, and I only have to change one line. I've made the change here. I guess it ultimately depends on which version of WP we want to be consistent with.

FAB Outer ring color

It is already based on the green highlight color, but can be hard to tell:

It doesn't seem too out of line with an existing theme in calypso, like sunset:

This one I'm hesitant to change because I'd have to make --color-primary-dark lighter, which might affect readability of some text (like the CreditCard code listing change a few posts up)

Sidebar top level menu text brightness

I can do this, (And I have), but I'm wondering if it's the right thing to do.

In calypso, it's normal for the top level menus to have less contrast than the inner menus. Examples:

In wp-admin, I see the outer menus brighter

So we have three options for the ports
A (Dimmer outer, conforms to calypso feeling)

B (Dimmer inner, conforms to wp-admin feeling)

C (Both bright, compromise)

What should we go with? I have "C" pushed right now.

[mreishus]

🤦‍♂️ I just realized that these don't work when the nav unification flag is on, because these overrides take precedence. I made a crude fix that re-specifies all the theme variables inside a .is-nav-unification { } selector, but will think about a better fix on Monday.

[cpapazoglou]

🤦‍♂️ I just realized that these don't work when the nav unification flag is on, because these overrides take precedence. I made a crude fix that re-specifies all the theme variables inside a .is-nav-unification { } selector, but will think about a better fix on Monday.

Changes in sidebar-unified/style.scss will ultimately reside in the default theme _default.scss and they will be overridden by each colour-scheme. Till then, I pushed a commit, making your idea DRY. It should be enough.

[cpapazoglou]

Thanks for pushing the changes @mreishus!

LGTM!