feat!: use css custom properties for primary color

[andrey-canon]

Description

This pr will replace the primary color definition and its level for custom css properties(css variables) to allow the mfes customization on runtime.

Color will be defined is this way

How to test

1. install this version
2. Set a color, document.documentElement.style.setProperty('--custom-primary-500', '#A00000'), check the following gif.

Note:

This is a breaking change, since components, from another libraries, could be using the primary color with sass functions as mix, darken, lighten, those functions are expecting a color variable and this replace the color for a css var that is not compatible, so the workaround is to use get-darken-color, get-mix-color and get-lighten-color functions defined in these changes

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

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, @andrey-canon! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f9817fe
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/63dd5f512c5269000935e8de
😎 Deploy Preview	https://deploy-preview-1996--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[adamstankiewicz]

Hello @andrey-canon! Thanks for opening this PR; it's actually overlapping with some ongoing work to migrate Paragon's style definitions in their entirety over to design tokens. These design tokens are then transformed into various output formats, including CSS variables.

There is currently an ADR in draft / up for review right to solicit feedback/concerns/etc. on our approach; would love any input you might have!

It's also worth mentioning that we have an alpha release of Paragon with this design tokens implementation that you might consider trying to install in a micro-frontend to observe the CSS variables in use throughout Paragon's components.

[openedx-webhooks]

@andrey-canon Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.