Update Calypso Colors #35949

porada · 2019-09-03T16:10:31Z

This branch updates all Calypso components and all color schemes with the recently refreshed palette colors.

Notable changes

Color schemes

Color scheme properties have been refactored:

Color scheme stylesheets have been split into separate partials for better readability.
All themable color properties are now prefixed with --color- while generic colors are directly outsourced to Color Studio properties (which are prefixed with --studio- and can’t be overwritten).
Most color references in the code base have been outsourced to theme properties.
Nightfall’s accent color has been changed from Purple to Blue due to WooCommerce folks’ wish to limit WordPress.com’s use of purple.
All color combinations should be 100% accessible now.

Components

Some components had to receive dedicated but non-breaking color treatments or refinements for better overall consistency:

Badge
Banner
Color Scheme Picker
Credit Card
Jetpack Logo
Push Notification Illustration
Masterbar
Notice
Sidebar

Other

All the remaining color variables defined in SCSS have been phased out completely in favor of CSS custom properties.
Updated SVG files for all plan icons and color scheme thumbnails. No other SVG files have been touched.
Removed unused code bits (where identified).

Testing instructions

Ensure color scheme switching works as intended.
Ensure the components listed above are displayed correctly with all color schemes and under all supported browsers.
Ensure this update doesn’t introduce any visual regressions.

matticbot · 2019-09-03T16:10:35Z

Test live: https://calypso.live/?branch=update/colors

porada · 2019-09-03T16:14:54Z

Regarding this bit:

Updated SVG files for all plan icons and color scheme thumbnails. No other SVG files have been touched.

Given these updates’ impact on our app accessibility, I think this branch shouldn’t have to wait for all illustrations to be updated.

Maybe we could outsource the SVG color updates to one of our creative technologists? I imagine this isn’t the last time we’ll have to perform those.

matticbot · 2019-09-03T16:21:37Z

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

Webpack Runtime (~2056 bytes added 📈 [gzipped])

name      parsed_size            gzip_size
manifest     +21500 B  (+12.8%)    +2056 B  (+6.8%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name        parsed_size           gzip_size
entry-main     +25214 B  (+1.6%)    +1137 B  (+0.3%)

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

Sections (~184905 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
signup                    +19124 B  (+7.2%)     +454 B   (+0.7%)
settings                   +5711 B  (+1.0%)    +5628 B   (+3.9%)
settings-writing           +5622 B  (+1.2%)    +5111 B   (+4.5%)
marketing                  +5209 B  (+0.7%)    +8853 B   (+4.7%)
posts-pages                +5100 B  (+1.1%)    +6197 B   (+5.2%)
people                     +5095 B  (+1.4%)    +6970 B   (+7.5%)
posts-custom               +5020 B  (+1.8%)    +6088 B   (+8.7%)
media                      +5020 B  (+1.4%)    +6092 B   (+6.3%)
woocommerce                +4971 B  (+0.2%)    +2432 B   (+0.4%)
settings-performance       +4874 B  (+2.5%)    +4997 B   (+9.7%)
gutenberg-editor           +4871 B  (+0.7%)    +5562 B   (+3.0%)
post-editor                +4851 B  (+0.3%)    +2058 B   (+0.4%)
settings-security          +4762 B  (+2.3%)    +4997 B   (+9.4%)
settings-discussion        +4762 B  (+2.8%)    +4940 B  (+11.5%)
plans                      +4678 B  (+0.9%)    +4541 B   (+3.3%)
jetpack-connect            +4661 B  (+0.8%)    +4381 B   (+2.8%)
email                      +4654 B  (+1.3%)    +5099 B   (+5.5%)
import                     +4520 B  (+2.2%)    +4170 B   (+8.0%)
comments                   +4505 B  (+0.9%)    +4400 B   (+3.6%)
plugins                    +4499 B  (+0.8%)    +3909 B   (+2.9%)
domains                    +4467 B  (+0.5%)    +4422 B   (+2.1%)
theme                      +4448 B  (+1.4%)    +4309 B   (+5.1%)
home                       +4443 B  (+1.1%)    +3573 B   (+3.6%)
checklist                  +4443 B  (+1.2%)    +3573 B   (+3.7%)
wp-super-cache             +4422 B  (+2.0%)    +3532 B   (+6.4%)
concierge                  +4422 B  (+1.5%)    +3593 B   (+5.0%)
purchases                  +4407 B  (+0.5%)    +1376 B   (+0.6%)
earn                       +4351 B  (+1.7%)    +2933 B   (+4.7%)
stats                      +4336 B  (+0.6%)    +2049 B   (+1.1%)
themes                     +4278 B  (+1.1%)    +3600 B   (+3.5%)
zoninator                  +4252 B  (+2.1%)    +2817 B   (+5.3%)
checkout                   +4185 B  (+0.5%)    +1832 B   (+0.8%)
login                      +4167 B  (+2.8%)    +2887 B   (+7.4%)
customize                  +4165 B  (+1.7%)    +2726 B   (+4.1%)
google-my-business         +4148 B  (+1.5%)    +2188 B   (+2.8%)
sites                      +4082 B  (+4.9%)    +2142 B   (+9.5%)
sensei                     +4082 B  (+4.8%)    +2152 B   (+9.3%)
preview                    +4082 B  (+4.5%)    +2181 B   (+8.8%)
hello-dolly                +4082 B  (+4.5%)    +2188 B   (+8.8%)
feature-upsell             +4082 B  (+2.9%)    +2189 B   (+6.5%)
export                     +4082 B  (+1.5%)    +2259 B   (+3.3%)
activity                   +3907 B  (+0.9%)    +1448 B   (+1.4%)
jetpack-onboarding         +3882 B  (+7.3%)    +1909 B  (+14.5%)
notification-settings      +1076 B  (+0.3%)    +3908 B   (+5.0%)
reader                      +774 B  (+0.2%)    +2339 B   (+2.4%)
account                     +741 B  (+0.2%)    +2573 B   (+3.0%)
security                    +736 B  (+0.2%)    +2657 B   (+2.5%)
help                        +736 B  (+0.1%)    +2640 B   (+1.9%)
devdocs                     +700 B  (+0.5%)     +698 B   (+1.9%)
site-blocks                 +657 B  (+0.3%)    +1936 B   (+3.0%)
privacy                     +566 B  (+0.3%)    +1897 B   (+3.2%)
me                          +566 B  (+0.3%)    +1897 B   (+3.3%)
happychat                   +566 B  (+0.2%)    +1897 B   (+2.9%)
account-close               +566 B  (+0.2%)    +1897 B   (+2.0%)
accept-invite               +295 B  (+0.2%)    +1361 B   (+3.0%)
auth                        +170 B  (+0.9%)     +448 B   (+8.4%)

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

name                                                         parsed_size           gzip_size
async-load-design                                                +5153 B  (+0.3%)    +1564 B   (+0.4%)
async-load-design-playground                                     +5030 B  (+0.3%)    +1722 B   (+0.4%)
async-load-design-blocks                                         +4901 B  (+0.2%)    +1185 B   (+0.2%)
async-load-signup-steps-clone-point                              +3965 B  (+2.4%)    +1747 B   (+4.5%)
async-load-post-editor-media-modal                                +486 B  (+0.2%)    +2362 B   (+3.1%)
async-load-signup-steps-user                                      +465 B  (+0.5%)    +1929 B   (+7.3%)
async-load-signup-steps-about                                     +433 B  (+0.9%)    +2266 B  (+19.9%)
async-load-signup-steps-site                                      +340 B  (+1.3%)    +1232 B  (+18.8%)
async-load-signup-steps-plans-atomic-store                        +340 B  (+0.3%)    +1257 B   (+4.4%)
async-load-signup-steps-plans                                     +340 B  (+0.2%)    +1275 B   (+3.4%)
async-load-signup-steps-passwordless                              +340 B  (+1.3%)    +1210 B  (+19.0%)
async-load-extensions-woocommerce-app-store-stats-referrers       +340 B  (+0.7%)    +1391 B  (+10.9%)
async-load-extensions-woocommerce-app-store-stats                 +340 B  (+0.7%)    +1328 B  (+10.2%)
async-load-components-web-preview-component                       +312 B  (+0.1%)    +1545 B   (+1.8%)
async-load-quick-language-switcher                                +311 B  (+1.1%)    +1139 B  (+14.5%)
async-load-signup-steps-theme-selection                           +283 B  (+0.7%)    +1429 B  (+14.4%)
async-load-blocks-inline-help                                     +255 B  (+0.4%)      +37 B   (+0.2%)
async-load-signup-steps-site-topic                                +200 B  (+0.7%)     +625 B   (+8.4%)
async-load-signup-steps-import-url-onboarding                     +177 B  (+0.5%)     +506 B   (+5.1%)
async-load-signup-steps-import-url                                +177 B  (+0.8%)     +575 B   (+8.7%)
async-load-signup-steps-test-step                                 +170 B  (+2.0%)     +396 B  (+16.4%)
async-load-signup-steps-survey                                    +170 B  (+0.9%)     +686 B  (+14.6%)
async-load-signup-steps-site-type                                 +170 B  (+1.4%)     +575 B  (+17.3%)
async-load-signup-steps-site-title                                +170 B  (+1.4%)     +570 B  (+17.4%)
async-load-signup-steps-site-style                                +170 B  (+1.3%)     +577 B  (+16.6%)
async-load-signup-steps-site-picker                               +170 B  (+1.9%)     +418 B  (+15.6%)
async-load-signup-steps-site-or-domain                            +170 B  (+0.9%)     +541 B   (+9.7%)
async-load-signup-steps-rewind-were-backing                       +170 B  (+1.8%)     +485 B  (+17.9%)
async-load-signup-steps-rewind-migrate                            +170 B  (+0.7%)     +456 B   (+6.5%)
async-load-signup-steps-rewind-form-creds                         +170 B  (+0.4%)     +542 B   (+5.1%)
async-load-signup-steps-rewind-add-creds                          +170 B  (+1.8%)     +540 B  (+20.1%)
async-load-signup-steps-rebrand-cities-welcome                    +170 B  (+1.2%)     +550 B  (+14.2%)
async-load-signup-steps-reader-landing                            +170 B  (+1.5%)     +483 B  (+15.6%)
async-load-signup-steps-import-preview                            +170 B  (+0.8%)     +480 B   (+7.4%)
async-load-signup-steps-creds-permission                          +170 B  (+0.7%)     +589 B   (+9.2%)
async-load-signup-steps-creds-confirm                             +170 B  (+0.7%)     +596 B   (+9.2%)
async-load-signup-steps-creds-complete                            +170 B  (+1.9%)     +482 B  (+17.8%)
async-load-signup-steps-clone-start                               +170 B  (+1.2%)     +494 B  (+11.7%)
async-load-signup-steps-clone-ready                               +170 B  (+0.6%)     +389 B   (+4.9%)
async-load-signup-steps-clone-jetpack                             +170 B  (+1.5%)     +543 B  (+18.0%)
async-load-signup-steps-clone-destination                         +170 B  (+0.9%)     +588 B  (+11.2%)
async-load-signup-steps-clone-credentials                         +170 B  (+0.4%)     +563 B   (+5.1%)
async-load-signup-steps-clone-cloning                             +170 B  (+1.2%)     +444 B  (+10.8%)
async-load-my-sites-current-site-domain-warnings                  +170 B  (+0.3%)     +986 B   (+6.9%)
async-load-extensions-woocommerce-app-store-stats-listview        +170 B  (+1.0%)     +676 B  (+13.9%)
async-load-blocks-inline-help-popover                             +170 B  (+0.1%)     +746 B   (+0.9%)
async-load-signup-steps-domains                                   +158 B  (+0.1%)     +465 B   (+0.9%)
async-load-post-editor-editor-sharing-accordion                   +133 B  (+0.5%)     +634 B  (+10.4%)
async-load-reader-site-stream                                     +120 B  (+0.4%)     +630 B   (+8.0%)
async-load-reader-feed-stream                                     +120 B  (+0.4%)     +618 B   (+7.9%)
async-load-post-editor-editor-author                              +120 B  (+0.6%)     +546 B  (+10.1%)
async-load-layout-guided-tours-component                          +109 B  (+0.1%)     +417 B   (+2.0%)
async-load-components-jetpack-header                               +81 B  (+1.2%)      +59 B   (+2.7%)
async-load-layout-guided-tours                                     +71 B  (+0.2%)      +22 B   (+0.2%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx        +21 B  (+0.0%)     -266 B   (-0.8%)

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.

apps/notifications/src/panel/boot/stylesheets/main.scss

ramonjd · 2019-09-03T22:35:18Z

Just eye-balling signup cc @dwolfe @fditrapani @shaunandrews

Currently the signup primary color is --color-primary (# 016087), which matches the current master bar color.

--color-primary is now --studio-blue-50 (# 2271b1) and the masterbar is --studio-wordpress-blue-50 (# 006088)

porada · 2019-09-04T08:56:40Z

@ramonjd Thanks for pointing that out. That’s my omission. The signup should use WordPress Blue for better visual continuity with our landing pages. Already fixed:

simison

Left a couple minor comments/questions.

Before I can test this you should rebase on top of master since this wasn't updated since August 20th and a lot of code has changed since. ;-) Pay attention e.g. to changes made in #35793

client/components/notice/style.scss

client/components/accordion/docs/example.jsx

client/blocks/color-scheme-picker/style.scss

packages/calypso-color-schemes/package.json

simison · 2019-09-15T20:32:25Z

It was mentioned a few times outside Internets that browser inspector has gotten very slow after this PR was merged.

cc at least @ramonjd and I can't remember who else mentioned the same. :-) What was your browser?

Aurorum · 2019-09-15T20:36:37Z

I also feel that btw :)

porada · 2019-09-15T20:39:28Z

I experienced the very same problem while working on this, but I’m not sure yet if this update was the one that introduced it. We actually cut down on the number of custom properties with this PR.

simison · 2019-09-15T21:05:28Z

I think the issue might be that all few hundred color variables are appended to each CSS bundle loaded during Calypso session. That'll cause each new CSS bundle download overwriting previous variables in memory but I suppose all those thousands of variables kept in inspector's memory?

Seems like color variables should be loaded just once initially (maybe even inline on page render?) and not on every bundle?

cc @sgomes as this is clearly a performance issue.

sgomes · 2019-09-15T21:28:45Z

Thanks for the ping, @simison! This PR seems to have introduced some performance issues, both on the CSS and the JS side of things. I haven't had a chance to look at this thoroughly yet, as the way it was merged (with a merge commit) makes it very hard to isolate from other changes that got interspersed throughout.

Adding it to my backlog.

ramonjd · 2019-09-16T12:29:16Z

Thanks @simison and @sgomes for looking into this.

I experimented a couple of times by resetting my local branch to the commit immediately previous to 2fcbd46, reinstalling node modules and rebooting Calypso, then resetting forward to 2fcbd46.

Confirmed that this effect is noticeable in Chrome, Chromium and Firefox.

It's relatively tolerable if you switch away from the styles pane, that is, you can inspect elements and perform other important tasks in debugger, but inspecting and editing styles is no longer fun. :)

sirreal

This was a big change, thanks for taking that on 🙂

Some issues have appeared in and around Calypso that seem to be related to this changeset that we'll need to work to track down.

If we find ways to keep changesets smaller, it should help with reviews in addition to making it easier to track down the source of issues when they are introduced.

sirreal · 2019-09-16T14:39:14Z

packages/calypso-color-schemes/.npmignore

+.eslintrc.js
+bin
+screenshot@2x.png
+src/__color-studio


This broke SASS in the published package. Fixed in #36171.

sirreal · 2019-09-16T14:45:03Z

packages/calypso-color-schemes/CHANGELOG.md

+
+* Updated [Color Studio](https://color-studio.blog), the primary dependency, to the most recent version.
+* Following the [files](https://github.com/Automattic/color-studio/blob/master/dist/color-properties.css) [generated](https://github.com/Automattic/color-studio/blob/master/dist/color-properties-rgb.css) by Color Studio, updated all properties to use consistent names (including index numbers).
+* Phased out all SCSS variables in favor of CSS custom properties.


Why did this happen? This breaks dependent SASS pipelines. Importing CSS is very different from importing SASS in that it generates output.

I'd speculate that this is the cause of #35949 (comment) and is likely related to a bump in bundle sizes @sgomes has been tracking down.

As I already mentioned in one of the comments, it was a handful of the remaining SCSS variables that were phased out. Those had relied on SCSS color functions like darken or lighten, and that was the reason why the original PR introducing calypso-color-schemes left them out.

In other words, I completed the switch from one SCSS variables to CSS custom properties that had already been done in 95%.

sirreal · 2019-09-16T15:30:27Z

I'm working on addressing the issues here in #36175

sgomes · 2019-09-16T15:39:53Z

I'm seeing a few things in this PR that I'm having trouble grokking and understanding correctly.

This PR touches a lot of stuff, and it seems to make a bunch of different types of changes:

It renames some variables across the application
It changes how variables are loaded
It changes how JS accesses the various variables
It makes specific colour changes for a particular theme

Combined with the large number of files changed in this PR, this makes it really hard to reason about and to track down some negative effects it appears to have introduced.

This was compounded by the fact that the PR was merged with a merge commit, interspersing it with other unrelated commits, and the branch is now deleted. (This is no longer possible, as the repo will now only accept squash merges)

Is it possible to get a bit more clarity and background on what's happening here?

Why was everything switched to CSS custom properties (which are great, and I love, by the way!) if we have a SCSS pipeline already, that functions better with SCSS variables?
What are we doing on browsers that we still care about that don't CSS custom properties? I see lines like background: rgba( var( --color-surface-rgb ), 0 );. Does this get transformed at some point with some fallback for e.g. IE 11?
If the goal is to switch to CSS custom properties, that are a runtime construct, why are we pre-generating all the themes and loading them all, instead of e.g. generating a CSS file for each theme that redefines the custom properties and thus affects the whole application?

In general, it would likely be best if we were to split large changes like this across multiple PRs that build on each other, and would let reviewers focus on one type of change at a time.

porada · 2019-09-17T21:11:34Z

Why was everything switched to CSS custom properties?

What are we doing on browsers that we still care about that don't CSS custom properties?

This PR built on the existing concepts introduced earlier with Calypso color schemes. It didn’t really touch any stylesheets postprocessing.

There were a few SCSS variables left in places that relied on SCSS color functions like darken or lighten. Those have been refactored to use predefined colors.

porada · 2019-09-17T21:12:02Z

It changes how JS accesses the various variables

@sgomes Could you elaborate on that?

porada · 2019-09-17T21:13:47Z

In general, it would likely be best if we were to split large changes like this across multiple PRs that build on each other, and would let reviewers focus on one type of change at a time.

Noted. Although, please note some of the issues mentioned above had been introduced before I started working on this.

I have a local copy of this branch and can bring it back. What else can I do to help?

In #35949 we missed the OAuth login screen (only used in the desktop app), so it is currently using a wrong color for its background. This PR uses the proper color var for the background screen, so the WP.com's brand color is used (same color as sign up). It also makes the sign it button enabled by default and removes the custom blue color used on it, so it is displayed with the same pink used in other primary action buttons.

porada added [Status] In Progress Design labels Sep 3, 2019

porada requested review from a team as code owners September 3, 2019 16:10

porada assigned davewhitley and sixhours Sep 3, 2019

porada requested review from sixhours and davewhitley and removed request for a team September 3, 2019 16:11

porada unassigned davewhitley and sixhours Sep 3, 2019

porada changed the title ~~Update/colors~~ Update Calypso Colors Sep 3, 2019

davewhitley previously requested changes Sep 3, 2019

View reviewed changes

apps/notifications/src/panel/boot/stylesheets/main.scss Outdated Show resolved Hide resolved

simison reviewed Sep 4, 2019

View reviewed changes

porada requested a review from davewhitley September 4, 2019 09:46

porada added the Color Schemes label Sep 13, 2019

porada merged commit 2fcbd46 into master Sep 13, 2019

porada deleted the update/colors branch September 13, 2019 19:49

mmtr mentioned this pull request Sep 13, 2019

Fix Overflow Fade In Stats Page "Post Published" Overflow #36085

Merged

Aurorum mentioned this pull request Sep 13, 2019

Theme Sheet: Use Masterbar Colour #36111

Merged

This was referenced Sep 14, 2019

Update Jetpack Connect Colors #36123

Merged

Update Jetpack UI to the New Color Palette Automattic/jetpack#13469

Open

sirreal mentioned this pull request Sep 16, 2019

Calypso color schemes: Fix published SASS #36171

Merged

sirreal reviewed Sep 16, 2019

View reviewed changes

sirreal mentioned this pull request Sep 16, 2019

Build/colors: Update color schemes and SASS pipeline #36175

Merged

This was referenced Sep 23, 2019

Editor: Improve Featured Image Dropzone Colours #36243

Merged

Classic Editor: Drop zone needs additional fine-tuning for colors #36239

Closed

This was referenced Oct 2, 2019

Calypsoify: Update Colours to the New Palette Automattic/jetpack#13628

Merged

Illustrations: Update Colours to the New Palette #36510

Merged

Colour Schemes: Migrate Images to Webpack #36554

Merged

mmtr mentioned this pull request Oct 16, 2019

OAuth: Fix brand colors in login screen #36817

Merged

simison mentioned this pull request Oct 25, 2019

Update/publish calypso sass #36170

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Calypso Colors #35949

Update Calypso Colors #35949

porada commented Sep 3, 2019 •

edited

Loading

matticbot commented Sep 3, 2019

porada commented Sep 3, 2019

matticbot commented Sep 3, 2019 •

edited

Loading

ramonjd commented Sep 3, 2019 •

edited

Loading

porada commented Sep 4, 2019 •

edited

Loading

simison left a comment •

edited

Loading

simison commented Sep 15, 2019

Aurorum commented Sep 15, 2019

porada commented Sep 15, 2019

simison commented Sep 15, 2019

sgomes commented Sep 15, 2019

ramonjd commented Sep 16, 2019 •

edited

Loading

sirreal left a comment

sirreal Sep 16, 2019

sirreal Sep 16, 2019

porada Sep 17, 2019

sirreal commented Sep 16, 2019

sgomes commented Sep 16, 2019

porada commented Sep 17, 2019

porada commented Sep 17, 2019

porada commented Sep 17, 2019

Update Calypso Colors #35949

Update Calypso Colors #35949

Conversation

porada commented Sep 3, 2019 • edited Loading

Notable changes

Color schemes

Components

Other

Testing instructions

matticbot commented Sep 3, 2019

porada commented Sep 3, 2019

matticbot commented Sep 3, 2019 • edited Loading

ramonjd commented Sep 3, 2019 • edited Loading

porada commented Sep 4, 2019 • edited Loading

simison left a comment • edited Loading

Choose a reason for hiding this comment

simison commented Sep 15, 2019

Aurorum commented Sep 15, 2019

porada commented Sep 15, 2019

simison commented Sep 15, 2019

sgomes commented Sep 15, 2019

ramonjd commented Sep 16, 2019 • edited Loading

sirreal left a comment

Choose a reason for hiding this comment

sirreal Sep 16, 2019

Choose a reason for hiding this comment

sirreal Sep 16, 2019

Choose a reason for hiding this comment

porada Sep 17, 2019

Choose a reason for hiding this comment

sirreal commented Sep 16, 2019

sgomes commented Sep 16, 2019

porada commented Sep 17, 2019

porada commented Sep 17, 2019

porada commented Sep 17, 2019

porada commented Sep 3, 2019 •

edited

Loading

matticbot commented Sep 3, 2019 •

edited

Loading

ramonjd commented Sep 3, 2019 •

edited

Loading

porada commented Sep 4, 2019 •

edited

Loading

simison left a comment •

edited

Loading

ramonjd commented Sep 16, 2019 •

edited

Loading