Formation Deprecation - Step 1 - Move css variables from web-components/global to css library

[micahchiang]

Description

Related to #2190

As mentioned in the ticket linked to above, there are a couple different places where css variables are being declared. In an effort to make Design Tokens originating in Figma our source of truth for how css variables are generated, we need to consolidate our existing css variable usage into CSS Library.

Considerations

• There's a lot of overlap between the variables in packages/web-components/src/global/_variables.scss and the variables generated in css-library/dist/tokens/scss. The ones in web-components/src/global should be removed, and our existing web components should instead import and use the ones generated in CSS Library.
• Right now, CSS Library isn't really being used. This ticket should implement a way of importing css variables into web components

Tasks

• Import css variables from css-library instead of web-components/src/global
• Remove web-components/src/global/_variables.scss

Acceptance Criteria

• above tasks have been completed

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[jamigibbs]

During the discovery of exporting tokens into different formats, the CSS Library was imported like this to the component-library:

[it-harrison]

• PR for css-library
• PR for web-components