feat(global-styles): Create mechanism for global resets & primitives to be shared between components

[jkaeser]

Related Ticket(s)

Closes #10794

Description

Re-roll of #10800

This PR creates two new lower-level concepts, which when combined allow components to adopt one or more "global" stylesheets.

Consider the wide variety of components that contain button styles. Instead of re-defining those button styles in each component's own internal stylesheets, we can define those styles in one place and have all components adopt that single stylesheet.

This should reduce the filesize (and therefore bandwidth used/blocking time) of every single component by stripping out large chunks of the CSS. Additionally, since each component class defines it's own stylesheet, moving those duplicated styles to a single stylesheet that can be adopted many times frees up large chunks of system memory.

To prove the efficacy of this approach, I've also implemented this setup into the button-group and button-group-item components. To further reduce each component's definition size I've split the suite of styles (button-group.scss) into individual stylesheets for each component. (button-group.scss and button-group-item.scss).

CarbonBase class

The CarbonBase class is intended to exist between the LitElement framework and all carbon components. As of this PR, its only job is to handle the global style adoption, but it could also take on the role of the StableSelector mixin or act as another entry point to all components.

CarbonStyles class

The CarbonStyles class acts as a global storage point for all the CSS primitives. Each stylesheet can be requested by name using the getStyleSheets() method, which will return an array of CSSStyleSheet objects.

How it all ties together

1. Styles package generates Sass primitives.
2. Utilities package imports primitives in CarbonStyles class, which converts the imported CSS strings into CSSStyleSheet objects, and stores them on the class instance keyed by name (e.g. "reset").
3. Carbon Web Components package defines CarbonBase class that extends LitElement. It provides mechanisms for extending elements to attach the CSSStyleSheet objects to the shadow root's adoptedStylesheets.
   1. _requestCarbonStyles() method defines which primitives should be adopted, by default requesting reset and type primitives. This method can be overridden by extending classes in the event they need to request additional primitives (e.g. button styles) or they don't need one or more of the default primitives.
   2. The requested primitives are adopted in the connectedCallback() lifecycle method.

Changelog

New

• Add CarbonBase and CarbonStyles classes

Changed

• split button-group.scss files into individual component stylesheets

[m4olivei]

This was a super interesting concept, and theoretically, by the PR description, makes good sense. In practice IIRC, the styles package was too tangly to make this workable. Still useful as an architecture document, but closing for now for cleanup purposes.