chore: Convert word cloud block sass variables to css variables

[farhan]

Ticket: #35306

Description:
Convert word cloud block sass variables to css variables

Other Relevant PR's:
#35233
#35385

How to test:

• Add the word cloud block in a test course
• Open it in the LMS
• Make sure following property is accessible
  getComputedStyle(document.documentElement).getPropertyValue('--baseline')

Pending/Known Issue:

5px or appropriate value of margin should be reflected in the styling of word-cloud xblock unit frame but it's not.
I think the issue is .xmodule_display.xmodule_WordCloudBlock class doesn't exist referred in the generatd css file given below (css generated on the master branch for the testing)

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
/* line 1, /openedx/edx-platform/xmodule/assets/WordCloudBlockDisplay.scss */
.xmodule_display.xmodule_WordCloudBlock {
  /* stylelint-disable-line */
  /* stylelint-disable-line */ }
  /* line 6, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
  .xmodule_display.xmodule_WordCloudBlock .input-cloud {
    margin: 5px; }
  /* line 10, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
  .xmodule_display.xmodule_WordCloudBlock .result_cloud_section {
    display: none;
    width: 0px;
    height: 0px; }
  /* line 16, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
  .xmodule_display.xmodule_WordCloudBlock .result_cloud_section.active {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1em; }
    /* line 22, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
    .xmodule_display.xmodule_WordCloudBlock .result_cloud_section.active h3 {
      font-size: 100%; }
  /* line 27, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
  .xmodule_display.xmodule_WordCloudBlock .your_words {
    font-size: 0.85em;
    display: block; }

[kdmccormick]

@farhan does the styling issue happen without your PR as well, or is it triggered by your PR?

[farhan]

@farhan does the styling issue happen without your PR as well, or is it triggered by your PR?

@kdmccormick Issue exists in the master branch, not triggered with my PR.
I was planning to merge this PR after testing but in b/w I surfaced this issue.

[farhan]

As per decision with @kdmccormick let's merge this PR as issue is not triggered by this PR.

[kdmccormick]

we talked in our sync-up and decided that since the issue exists on master and since Farhan was able to confirm that the new css variable shows up in the DOM, that we do not to block this PR on a styling fix

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX staging environment in preparation for a release to production.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX production environment.

[edx-pipeline-bot]

2U Release Notice: This PR has been rolled back from the edX production environment.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX production environment.