[BD-46] Remove SCSS variable usages in components and other custom styles

[PKulkoRaccoonGang]

Description

• Ensure the component-specific CSS variables can still display on the docs site under the "Variables" section.
• May need to generate component-specific stylesheets and aggregate them into one.
• Remove SCSS variables in favor of strictly using CSS variables throughout Paragon codebase (i.e., no more SCSS variables defined with CSS variables as their values).
• Ensure the SCSS variables displayed on component pages in the documentation website show the equivalent CSS variables definitions instead.
• Consider other impacts to these proposed changes.

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (100ee5c) 91.06% compared to head (fc7aab5) 91.06%.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #2137   +/-   ##
=======================================
  Coverage   91.06%   91.06%           
=======================================
  Files         214      214           
  Lines        3524     3524           
  Branches      853      853           
=======================================
  Hits         3209     3209           
  Misses        307      307           
  Partials        8        8           

Impacted Files	Coverage Δ
...wScroll/data/useOverflowScrollElementAttributes.js	97.72% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

🎉 This PR is included in version 21.0.0-alpha.24 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[edx-semantic-release]

🎉 This PR is included in version 22.0.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 23.0.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀