Understand and address design tokens & CSS variable related issues in @edx/frontend-component-* repos

[adamstankiewicz]

The shared frontend-component-{header|footer} JS libraries rely on SCSS variables and mixins that are no longer exposes/useful in a world where the consuming MFE is utilizing design tokens and CSS variables.

We will need to update the shared header/footer components to avoid making use of SCSS variables and mixins, in favor of the new CSS variables and custom media breakpoints generated from design tokens.

2 repos for Open edX:

• https://github.com/openedx/frontend-component-header
• https://github.com/openedx/frontend-component-footer

2 repos for edX.org:

• https://github.com/openedx/frontend-component-header-edx
• https://github.com/openedx/frontend-component-footer-edx

Note: we can execute on this task to get draft PRs ready to merge prior to releasing Paragon's alpha release to latest. Use the alpha version for now in package.json, but it should be quick drop-in replacement with latest once design tokens is merged into latest.

[PKulkoRaccoonGang]

PRs:

• OpenEdx Frontend-component-header;
• OpenEdx Frontend-component-footer;
• Edx Frontend-component-header;
• Edx Frontend-component-footer.