WooCommerce Install: Update styles

[obenland]

Brings styles closer to the figma file.

Changes proposed in this Pull Request

• Moves styles to a central file
• Establishes a mixing for two-column layout that can be used by onboarding steps.
• Updates form element styles to correspond with the figma design.
• Moves two elements into the woocommerce-install/index file since they're now used by all steps.

Testing instructions

• Go to http://calypso.localhost:3000/woocommerce-installation/
• Choose a test site site
• Click "Set up my store"
• Navigate through the onboarding steps and make sure the form elements look like in the figma
• Check that the transfer screen still looks the same.

After

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[obenland]

Somehow I broke the transfer step styles with this. So I'll look at that next.

[matticbot]

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

App Entrypoints (~126 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                  -708 B  (-0.1%)      -87 B  (-0.0%)
entry-gutenboarding         -566 B  (-0.0%)      -81 B  (-0.0%)
entry-login                 -512 B  (-0.1%)      -42 B  (-0.0%)
entry-domains-landing       -512 B  (-0.1%)      -42 B  (-0.0%)
entry-browsehappy           -512 B  (-0.5%)      -42 B  (-0.1%)

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

Sections (~5030 bytes removed 📉 [gzipped])

name                                 parsed_size           gzip_size
signup                                   -1984 B  (-0.5%)      -44 B  (-0.1%)
settings                                  -501 B  (-0.1%)    +1491 B  (+0.8%)
settings-performance                      +412 B  (+0.1%)    -1083 B  (-0.9%)
marketing                                 -340 B  (-0.1%)     -183 B  (-0.1%)
themes                                    -280 B  (-0.1%)     +216 B  (+0.1%)
plugins                                   -280 B  (-0.0%)     -930 B  (-0.5%)
home                                      -280 B  (-0.0%)     -788 B  (-0.5%)
site-purchases                            -256 B  (-0.0%)     -860 B  (-0.2%)
purchases                                 -256 B  (-0.0%)     -860 B  (-0.2%)
import                                    +232 B  (+0.1%)     +882 B  (+1.0%)
export                                    +232 B  (+0.1%)     +892 B  (+1.6%)
checkout                                  -232 B  (-0.0%)     -569 B  (-0.1%)
settings-discussion                       +154 B  (+0.1%)     +849 B  (+1.0%)
woocommerce-installation                  -146 B  (-0.1%)     -446 B  (-0.6%)
activity                                  -146 B  (-0.0%)     -454 B  (-0.3%)
backup                                    -123 B  (-0.0%)     -368 B  (-0.2%)
automated-transfer-state-middleware       -117 B  (-0.6%)     -396 B  (-6.6%)
theme                                     +110 B  (+0.0%)     +605 B  (+0.6%)
devdocs                                   -109 B  (-0.1%)      -14 B  (-0.0%)
customize                                  +87 B  (+0.0%)     +867 B  (+1.6%)
pages                                      -86 B  (-0.0%)     -367 B  (-0.3%)
marketplace                                -84 B  (-0.0%)     +276 B  (+0.2%)
media                                      -83 B  (-0.0%)      -48 B  (-0.0%)
domains                                    -83 B  (-0.0%)     -104 B  (-0.0%)
scan                                       -69 B  (-0.0%)      -28 B  (-0.0%)
comments                                   -57 B  (-0.0%)      -41 B  (-0.0%)
account                                    -54 B  (-0.0%)      -39 B  (-0.0%)
plans                                      -53 B  (-0.0%)      -21 B  (-0.0%)
stats                                      -30 B  (-0.0%)       -3 B  (-0.0%)
preview                                    -30 B  (-0.0%)       -4 B  (-0.0%)
posts-custom                               -30 B  (-0.0%)       -5 B  (-0.0%)
posts                                      -30 B  (-0.0%)       -5 B  (-0.0%)
hosting                                    -30 B  (-0.0%)      -40 B  (-0.0%)
woocommerce                                -29 B  (-0.0%)      -12 B  (-0.0%)
sites                                      -29 B  (-0.0%)      -12 B  (-0.0%)
settings-writing                           -29 B  (-0.0%)      -12 B  (-0.0%)
settings-security                          -29 B  (-0.0%)      -12 B  (-0.0%)
settings-jetpack                           -29 B  (-0.0%)       -9 B  (-0.0%)
people                                     -29 B  (-0.0%)      -16 B  (-0.0%)
migrate                                    -29 B  (-0.0%)      -12 B  (-0.0%)
jetpack-search                             -29 B  (-0.0%)      -30 B  (-0.0%)
jetpack-connect                            -29 B  (-0.0%)      -12 B  (-0.0%)
jetpack-cloud-settings                     -29 B  (-0.0%)      -12 B  (-0.0%)
jetpack-cloud-pricing                      -29 B  (-0.0%)      -12 B  (-0.0%)
jetpack-cloud                              -29 B  (-0.0%)      -12 B  (-0.0%)
gutenberg-editor                           -29 B  (-0.0%)      -12 B  (-0.0%)
google-my-business                         -29 B  (-0.0%)      -12 B  (-0.0%)
email                                      -29 B  (-0.0%)     +248 B  (+0.2%)
earn                                       -29 B  (-0.0%)      -12 B  (-0.0%)
concierge                                  -29 B  (-0.0%)      -12 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 (~9448 bytes added 📈 [gzipped])

name                                                            parsed_size               gzip_size
async-load-signup-steps-woocommerce-install                        +64322 B  (+31530.4%)   +20716 B  (+13279.5%)
async-load-signup-steps-woocommerce-install-step-store-address     -34720 B     (-21.0%)   -11672 B     (-22.0%)
async-load-signup-steps-woocommerce-install-step-business-info     -34716 B     (-21.1%)   -11403 B     (-21.4%)
async-load-design-blocks                                             -121 B      (-0.0%)     -684 B      (-0.1%)
async-load-calypso-my-sites-sidebar-unified                          -117 B      (-0.1%)     -439 B      (-1.4%)
async-load-calypso-layout-guided-tours-component                     -117 B      (-0.1%)     -415 B      (-1.9%)
async-load-calypso-my-sites-sidebar                                   +88 B      (+0.0%)     +443 B      (+0.5%)
async-load-design-playground                                          -78 B      (-0.0%)      -16 B      (-0.0%)
async-load-design                                                     -78 B      (-0.0%)      -16 B      (-0.0%)
async-load-signup-steps-theme-selection                               +62 B      (+0.0%)     +324 B      (+0.8%)
async-load-signup-steps-woocommerce-install-confirm                   +55 B      (+0.1%)     -647 B      (-1.8%)
async-load-signup-steps-design-picker                                 -55 B      (-0.1%)      -12 B      (-0.0%)
async-load-signup-steps-woocommerce-install-transfer                  -54 B      (-0.1%)      -36 B      (-0.1%)
async-load-signup-steps-user                                          -54 B      (-0.0%)      -32 B      (-0.1%)
async-load-signup-steps-test-step                                     -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-survey                                        -54 B      (-0.1%)      -21 B      (-0.1%)
async-load-signup-steps-starting-point                                -54 B      (-0.1%)      -33 B      (-0.1%)
async-load-signup-steps-site-type                                     -54 B      (-0.1%)      -16 B      (-0.1%)
async-load-signup-steps-site-topic                                    -54 B      (-0.1%)      -19 B      (-0.1%)
async-load-signup-steps-site-title                                    -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-site-picker                                   -54 B      (-0.0%)      -36 B      (-0.1%)
async-load-signup-steps-site-or-domain                                -54 B      (-0.1%)      -34 B      (-0.1%)
async-load-signup-steps-site-options                                  -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-site-info-collection                          -54 B      (-0.0%)      -40 B      (-0.1%)
async-load-signup-steps-site                                          -54 B      (-0.1%)      -33 B      (-0.1%)
async-load-signup-steps-rewind-were-backing                           -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-rewind-migrate                                -54 B      (-0.1%)      -18 B      (-0.1%)
async-load-signup-steps-rewind-form-creds                             -54 B      (-0.0%)      -19 B      (-0.1%)
async-load-signup-steps-reader-landing                                -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-plans-atomic-store                            -54 B      (-0.0%)      -17 B      (-0.0%)
async-load-signup-steps-plans                                         -54 B      (-0.0%)      -33 B      (-0.0%)
async-load-signup-steps-passwordless                                  -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-p2-site                                       -54 B      (-0.1%)      -33 B      (-0.1%)
async-load-signup-steps-p2-get-started                                -54 B      (-0.1%)      -21 B      (-0.1%)
async-load-signup-steps-p2-details                                    -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-p2-confirm-email                              -54 B      (-0.1%)      -15 B      (-0.1%)
async-load-signup-steps-new-or-existing-site                          -54 B      (-0.1%)      -34 B      (-0.1%)
async-load-signup-steps-intent                                        -54 B      (-0.1%)      -33 B      (-0.1%)
async-load-signup-steps-import-ready                                  -54 B      (-0.1%)      -35 B      (-0.1%)
async-load-signup-steps-import-from-wordpress-content-chooser         -54 B      (-0.1%)      -16 B      (-0.1%)
async-load-signup-steps-import-from-wordpress                         -54 B      (-0.1%)      -16 B      (-0.1%)
async-load-signup-steps-import-from-wix                               -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-signup-steps-import-from-squarespace                       -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-signup-steps-import-from-medium                            -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-signup-steps-import-from-components-progress-screen        -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-signup-steps-import-from-components-not-authorized         -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-import-from-components-error-message          -54 B      (-0.1%)      -19 B      (-0.1%)
async-load-signup-steps-import-from-components-done-button            -54 B      (-0.1%)      -19 B      (-0.1%)
async-load-signup-steps-import-from-components-complete-screen        -54 B      (-0.1%)      -18 B      (-0.1%)
async-load-signup-steps-import-from                                   -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-signup-steps-import-capture                                -54 B      (-0.1%)      -21 B      (-0.1%)
async-load-signup-steps-import                                        -54 B      (-0.0%)      -35 B      (-0.1%)
async-load-signup-steps-emails                                        -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-domains                                       -54 B      (-0.0%)      -40 B      (-0.0%)
async-load-signup-steps-difm-site-picker                              -54 B      (-0.0%)      -36 B      (-0.1%)
async-load-signup-steps-creds-permission                              -54 B      (-0.1%)      -19 B      (-0.1%)
async-load-signup-steps-creds-confirm                                 -54 B      (-0.1%)      -15 B      (-0.0%)
async-load-signup-steps-creds-complete                                -54 B      (-0.1%)      -18 B      (-0.1%)
async-load-signup-steps-courses                                       -54 B      (-0.1%)      -17 B      (-0.1%)
async-load-signup-steps-clone-start                                   -54 B      (-0.1%)      -21 B      (-0.1%)
async-load-signup-steps-clone-ready                                   -54 B      (-0.1%)      -20 B      (-0.1%)
async-load-signup-steps-clone-point                                   -54 B      (-0.0%)      -36 B      (-0.1%)
async-load-signup-steps-clone-jetpack                                 -54 B      (-0.1%)      -19 B      (-0.1%)
async-load-signup-steps-clone-destination                             -54 B      (-0.1%)      -21 B      (-0.1%)
async-load-signup-steps-clone-credentials                             -54 B      (-0.0%)      -21 B      (-0.1%)
async-load-signup-steps-clone-cloning                                 -54 B      (-0.1%)      -17 B      (-0.1%)
async-load-signup-steps-about                                         -54 B      (-0.0%)      -36 B      (-0.1%)
async-load-quick-language-switcher                                    -54 B      (-0.0%)      -39 B      (-0.1%)
async-load-design-wordpress-components-gallery                        -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-calypso-post-editor-media-modal                            -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-calypso-post-editor-editor-media-modal                     -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-calypso-blocks-editor-checkout-modal                       -54 B      (-0.0%)      -36 B      (-0.0%)
async-load-block-editor                                               -54 B      (-0.0%)      -39 B      (-0.0%)
async-load-automattic-search                                          -54 B      (-0.1%)      -32 B      (-0.1%)
async-load-calypso-layout-guided-tours                                -29 B      (-0.4%)      -10 B      (-0.5%)
async-load-calypso-blocks-support-article-dialog-dialog               +27 B      (+0.0%)      +18 B      (+0.1%)
async-load-calypso-blocks-support-article-dialog                      +27 B      (+1.5%)      +15 B      (+1.9%)

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.

[lsl]

Probably still want to go ahead with this change here but FYI a fix might come from upstream at some point WordPress/gutenberg#38020

[Rolilink]

Maybe this is me being picky but the label colors, I think don't match the ones in the design

[obenland]

Maybe this is me being picky but the label colors, I think don't match the ones in the design

That should be a matter of which color scheme you use, I don't believe I'm currently using the default one.

[DustyReagan]

I think I see what @Rolilink is talking about regarding the font colors. The Figma looks slightly darker, but the hex values appear to be the same. I think it could be a minor difference in font or possibly the field borders making the font color appear lighter. But I think this PR is good to ship. 👍

After pics: