Calypso CSS: refactor CSS reset and base styles

[simison]

Goal: scope CSS reset and base calypso styles so that it's possible to exclude them from /gutenboarding section.

Specifically, I'm addressing these two issues from #36170 (comment):

• CSS reset stylesheet
• styles for form elements, as we apply Calypso styling even to plain input or select elements that don’t have any class names

Here are some Calypso overrides previous "Gutenberg in Calypso" had to do.

Changes proposed in this Pull Request

• Move scss partials to client/assets/stylesheets/layout, leaving client/assets/stylesheets/*.scss only for entry files
• Move animations partial to new layout folder, leaving shared for only scss files that don't produce any visible CSS when imported
• Move grow animation to _animations.scss
• Change loading order so that resets and base styles come first
• Move Calypso styles that affect non-class selectors to a new _base.scss file, goal is to strip down generic "main" file away eventually
• Scope reset and base -styles so that it's possible to exclude them from some views. TODO: an exact mechanism to be figured out. I'm using html.gr__calypso_localhost as a temporary example selector — it'll be something else later on.
• Update outdated README.md

I'll PR some of this separately for easier review & testing:

• Components: remove global CSS reset in button #37026
• Layout CSS: move a CSS reset to main style #37064

Testing instructions

• Spin up Calypso
• Observe that base and reset styles are first in entry bundle
• Test everything!
• /onboarding looks great, eh?

[matticbot]

Test live: https://calypso.live/?branch=update/refactor-calypso-css-reset

[simison]

We don't need these to be in mixin, but it would make things easier for #36170 and (component) consumers outside Calypso.

[simison]

Moved to _base.scss but will need to check how that affects things outside .layout__content — maybe leave be for now and loop back to it later. It's the only non-class-selector here.

[jsnajdr]

The only thing outside .layout__content is the Masterbar and things inside it, notably Notifications. Notifications have their own .wpnc__main a { text-decoration: none } style, so they shouldn't get hurt by this change. I think it's good and safe move.

[simison]

PRed separately so that it's easier to test #37064

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[jsnajdr]

Scope reset and base -styles so that it's possible to exclude them from some views.

I understand the need for scoping the base styles, but why reset? It would help to know the use case that requires the scoping feature. Or is it from the "someone might need it" bucket at this moment?

[jsnajdr]

The only thing outside .layout__content is the Masterbar and things inside it, notably Notifications. Notifications have their own .wpnc__main a { text-decoration: none } style, so they shouldn't get hurt by this change. I think it's good and safe move.

[simison]

Pretty much everything from this has been handled in separate PRs or problems worked out in other ways, so I'll close.

Calypso stylesets definetely need some more work but new PRs are better for that. :-)