Nav Unification: introduce Classic Dark as the new default color scheme

[frontdevde]

Changes proposed in this Pull Request

This PR

• introduces Classic Dark as the new default color scheme
• adds Classic Bright as a copy of the previous default color scheme
• adds missing colors to Classic Blue that were previously inherited from Classic Bright default

Context:

With the nav unification project we're introducing unified default colors across Calypso and wp-admin. @rickybanister suggested we introduce these colors to Calypso users early via a new default color scheme. The colors in this PR are based on the most recent Navigation Unification, Design Update (see p2-pbAPfg-13V).

Related issue: #47135

Testing instructions

• Check out branch locally, yarn && yarn start, visit http://calypso.localhost:3000/me/account
• OR use the calypso.live link (easier!)
• Test on a user account that has never had a color scheme set. On this account the new Classic Dark color scheme should show as default now.
• Navigate around Calypso and see if everything looks as expected
• Change color schemes to Classic Bright and Classic Blue and see if those still match what you see in production.

Fixes #47135

[matticbot]

Test live: https://calypso.live/?branch=feature/new-default-color-scheme

[matticbot]

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

Sections (~48 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
account       +186 B  (+0.0%)      +48 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 (~95 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks       +186 B  (+0.0%)      +42 B  (+0.0%)
async-load-design              +186 B  (+0.0%)      +53 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.

[frontdevde]

CC'ing all designers involved for design review @sfougnier @lcollette @davemart-in @rickybanister

Given that this would replace the default color scheme for everyone that doesn't have color scheme set, I'd highly appreciate if y'all could take a look and let me know about any changes we'd want to make. Thank you!

[frontdevde]

@sfougnier @lcollette
These two colors (#333, #23282d) are the exact values from wp-admin. If I understand the new Navigation Unification, Design Update (see p2-pbAPfg-13V) correctly, it seems like for brand consistency we're starting to tweak wp-admin colors a bit too. If so could you let me if these should be replaced with color studio vars and if so which ones? Thank you!

[davemart-in]

Given that this would replace the default color scheme for everyone that doesn't have color scheme set

If possible, I'd very much prefer to make this swap for everyone who signs up past the timestamp for when we launch this. Otherwise this is going to change the color scheme for hundreds of thousands of customers, perhaps millions with no warning or explanation as to why it happened.

I know introducing a signup date stamp will introduce complexity on the code side of things, but this is the only real option that I see.

[marekhrabe]

Next steps as I understand them from the meeting:

• let's add this new color scheme to the list of available ones
• add a separate task for the default scheme choice which will happen under TBD contitions (we can repost the start of the discussion from here)

[cpapazoglou]

It seems to me that Classic Dark will be the default for all users with no specific scheme selected after nav unification is launched. Till then we can launch it but not make it default. I am not sure we should introduce any signup date timestamp.

[cpapazoglou]

Thanks @frontdevde for wrangling this!

Followed the testing instructions and LGTM!

• Booting calypso with a user with no color scheme selected, defaulted to Classic Dark.
• Navigated around and everything seems good.
• Changing to Classic Bright or Classic Blue works as expected

Following this comment #47151 (comment), I would suggest making Classic Bright the default again and creating a separate file for Classic Dark. When we launch nav unification to 100% of users we can move the Classic Dark styles to the default and remove the separate Classic Dark file.

[frontdevde]

Closing this PR as the approach changed. Will open a new PR to address #47266.