Color Schemes: Add Aquatic and hide Ocean

[marekhrabe]

This is a phase one of #47256 (comment). Please refer to the plan to understand the scope of this PR.

Changes proposed in this Pull Request

• add aquatic color scheme (uses exact same colors as ocean)
• add temporary code in the color scheme picker to pretend "ocean" is "aquatic"

I know what's the usual reaction when people see temporary code. I'll personally make sure it will be followed upon :)

Testing instructions

• set your account to use Ocean (either on local master branch or in prod https://wordpress.com/me/account)
• boot this PR
• confirm you can still see dark blue colors of "ocean" in the local UI
• navigate to /me/account on this branch and confirm the UI shows "aquatic" as the active scheme

Phase one of #47256

Reference Issues

• Main Issue Nav Unification - Main Issue #45435
  • Color Schemes Issue + Direction Nav Unification: Color Schemes #45675
    • Port over wp-admin schemes to calypso Nav unification: Port over WP Admin color schemes as new options in Calypso /me section. #47036
      • Nav Unification: Rename the Ocean color scheme to Aquatic; update user preferences accordingly Nav Unification: Rename the Ocean color scheme to Aquatic; update user preferences accordingly #47256

[matticbot]

Test live: https://calypso.live/?branch=update/color-schemes-ocean-aquatic

[matticbot]

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

Sections (~52 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
account       +221 B  (+0.1%)      +52 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 (~125 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks       +221 B  (+0.0%)      +67 B  (+0.0%)
async-load-design              +221 B  (+0.0%)      +58 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]

Tested as per testing instructions and can confirm:

• Ocean and Aquatic themes look identical
• When having selected Ocean in production this change will show Aquatic as selected and show the expected colors.

I know what's the usual reaction when people see temporary code. I'll personally make sure it will be followed upon :)

Sounds good! With that, LGTM 👍

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5157902

Thank you @marekhrabe for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.