[BD-46] docs: replaced SCSS variables with CSS variables on the Colors page

[PKulkoRaccoonGang]

Description

• refactored Color page;
• added CSS variables.

Github issue

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

All modified and coverable lines are covered by tests ✅

Project coverage is 91.95%. Comparing base (09570d7) to head (12a2267).
Report is 746 commits behind head on alpha.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #2376   +/-   ##
=======================================
  Coverage   91.95%   91.95%           
=======================================
  Files         216      216           
  Lines        3618     3618           
  Branches      891      891           
=======================================
  Hits         3327     3327           
  Misses        286      286           
  Partials        5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[viktorrusakov]

@PKulkoRaccoonGang I think that code could be greatly simplified on this page since we use CSS variables now. Previously we used MeasuredItem component to render a div with specific className to the get div's color with browser API and display its value. This is redundant now since we know in advance which CSS variable is used to render each color, so we can get color value just by variable's name. E.g., Swatch component could be rewritten like this

const styles = getComputedStyle(document.body);

function Swatch({ name, colorClassName, isUnused }: ISwatch) {
  const computedValue = styles.getPropertyValue(name);
  return (
    <div className="d-flex align-items-center mb-2">
      <div
        className={classNames('p-3 mr-2 rounded', colorClassName, {
          'unused-level': isUnused,
        })}
      />
      <div style={{ lineHeight: 1 }} className="small">
        <code className="mb-0 d-block text-lowercase text-dark-700">
          {`var(${name})`}
        </code>
        <code style={{ fontSize: '65%' }} className="text-muted">
          {computedValue}
        </code>
      </div>
    </div>
  );
}

// usage example, note that you need to pass var's name to the "name" prop without wrapping it in 'var'
<Swatch name="--pgn-color-accent-a" colorClassName="bg-accent-a" />

I believe this lets you completely remove usages of MeasuredItem and Color components from this page and this is a good thing 🙂
Works for me at least

Also, there's something wrong with the borders

they render with same styles for some reason, although they should have different colors. I'll let you figure this one out on your own 😛

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	12a2267
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/650305f1b530bc00081cd205
😎 Deploy Preview	https://deploy-preview-2376--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 configuration.

[viktorrusakov]

@PKulkoRaccoonGang I noticed you pushed a commit with my suggestions, but I still see issues with borders that I described above. Just reminding you in case you missed or forgot about that part. If you just didn't have time to look at that yet, that's ok 🙂

Also, deploy preview is failing now because you used getComputedStyle which is not defined during build. Probably need to check if it's defined before using it.

[adamstankiewicz]

Left 1 comment alongside Viktor's feedback.

The only high-level feedback about the page I have might be about whether we can have the "accents" colors shown as the last color variants in the UI given there's only 2 of them (throws off the visual grid haha) and are generally less commonly used (non-blocking, can be deferred).

[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 22.0.0-alpha.3 🎉

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 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 23.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀