Checkout: Update color themes to use WordPress blue colors

[sirbrillig]

Background

I was researching why the buttons in checkout are a different shade of blue than other parts of calypso.

For example, see the color difference between these two buttons:

Outside checkout	Checkout

It turns out that checkout is using the color directly from the @automattic/color-studio package (which is outdated as version 2.6 everywhere in calypso) but some parts of calypso are using the deprecated button in the @automattic/components package which has a hard-coded color (from the @automattic/calypso-color-schemes package) that happens to match the one in color-studio 3.0. In #94148 I'm updating all of calypso to use the latest version of the color-studio package.

However, checkout currently uses the color Blue 50 for its buttons, and the blue used by the "correct" color scheme is actually WordPress Blue 50. So to get the correct color in checkout we need to also update the @automattic/composite-checkout package to be use WordPress Blue instead.

Proposed changes

In this PR I'm updating the colors used by the @automattic/composite-checkout package theme (and the Jetpack variant) to use "WordPress Blue" instead of "Blue".

Screenshot

This change by itself:

Before	After

With #94148 also applied:

Before	After

Testing Instructions

• Add a product to your cart and visit checkout.
• If the steps are collapsed (auto-completed), click to "Edit" the tax information step ("Billing details" or "Contact details").
• Examine the color of the "Continue to payment" button and verify it is #006088 (previously#0675c4).
• Optional: also apply Update color-studio package to 3.0.1 #94148 and verify that the color has changed to #3858e9.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-118165

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-118165&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-118165&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/checkout-blue-colors-to-wordpress-blue on your sandbox.

[matticbot]

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

Sections (~15 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
checkout                                 +50 B  (+0.0%)      +15 B  (+0.0%)
site-purchases                           +20 B  (+0.0%)       +8 B  (+0.0%)
purchases                                +20 B  (+0.0%)       +8 B  (+0.0%)
plans                                    +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-connect                          +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-pricing                    +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-plugin-management          +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-partner-portal             +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-manage-pricing             +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-features-comparison        +20 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-agency-sites-v2            +20 B  (+0.0%)       +8 B  (+0.0%)
a8c-for-agencies-purchases               +20 B  (+0.0%)       +8 B  (+0.0%)
a8c-for-agencies-client                  +20 B  (+0.0%)       +8 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 (~34 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal                                              +50 B  (+0.0%)      +15 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +50 B  (+0.0%)      +15 B  (+0.0%)
async-load-signup-steps-page-picker                                                     +20 B  (+0.0%)       +8 B  (+0.0%)
async-load-purchase-modal-wrapper                                                       +20 B  (+0.0%)       +8 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +20 B  (+0.0%)       +8 B  (+0.0%)
async-load-masterbar-cart-masterbar-cart-wrapper                                        +20 B  (+0.0%)       +8 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout-tsx                                        +20 B  (+0.0%)       +9 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout                                            +20 B  (+0.0%)      +10 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.

[michaeldcain]

This is good to go once #94148 is merged. Let's not merge it before then, so as to not introduce another blue to our primary flows (Checkout currently matches Signup and Stepper, but not Calypso or Sites Dashboard).

[fditrapani]

Thanks for this update. This PR is good to go.

We'll need to make a subsequent update that updates the blue for the following:

• All text links should have the new blue (In terms, the support link, and edit button)
• The title for the callout in the sidebar
• The active state for the dropdown options in the term
• The borders for the payment methods (both hover and active state)

Also, unrelated, I noticed the borders between the payment method have a rounded edge on them when unselected:

[sirbrillig]

We'll need to make a subsequent update that updates the blue for the following:

@fditrapani thanks! I'm working on this in #94194