Convert sass variables to css variables

[farhan]

Ticket: https://github.com/openedx/edx-platform/issues/35306

Relevant PR's

Predecessor PR: https://github.com/openedx/edx-platform/pull/35233 Next ticket: https://github.com/openedx/edx-platform/issues/35300 Word Cloud & Annotatable XBlocks have already been merged in following PR's These PR's were merged earlier to check the impact of early sass to css variables migration on the production. Word Cloud XBlock: https://github.com/openedx/edx-platform/pull/35386 Annotatable XBlock: https://github.com/openedx/edx-platform/pull/35409

Dropping use of sass/css variable:

We will drop use of $all-text-inputs in the file xmodule/assets/capa/_display.scss at line ~1075

  #{$all-text-inputs} {
    display: inline;
    width: auto;
  }

It will be compiled into following css in ticket and only that css will be used in future

  .xmodule_display.xmodule_ProblemBlock div.problem input[type="email"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="number"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="password"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="search"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="tel"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="url"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="color"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="date"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="datetime"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="datetime-local"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="month"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="time"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="week"] {
    display: inline;
    width: auto; 
}

Compiled Sass, picking values from global css variables:

:root {
  --action-primary-active-bg: #0075b4;
  --base-font-size: 1em;
  --base-line-height: 1.5em;
  --baseline: 20px;
  --black: #000;
  --black-t2: rgba(0, 0, 0, 0.5);
  --blue: #0075b4;
  --blue-d1: #005e90;
  --blue-d2: #00466c;
  --blue-d4: #001724;
  --blue-s1: #0075b4;
  --body-color: #313131;
  --border-color: #e7e7e7;
  --bp-screen-lg: 1024px;
  --btn-brand-focus-background: #065683;
  --correct: #008100;
  --danger: #b20610;
  --darkGrey: #8891a1;
  --error-color: #cb0712;
  --error-color-dark: #95050d;
  --error-color-light: #f95861;
  --font-bold: 700;
  --font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --general-color-accent: #0075b4;
  --gray: #767676;
  --gray-300: #d9d9d9;
  --gray-d1: #5e5e5e;
  --gray-l2: #adadad;
  --gray-l3: #c8c8c8;
  --gray-l4: #e4e4e4;
  --gray-l6: #f8f8f8;
  --icon-correct: url("../images/correct-icon.png");
  --icon-incorrect: url("../images/incorrect-icon.png");
  --icon-info: url("../images/info-icon.png");
  --icon-partially-correct: url("../images/partially-correct-icon.png");
  --icon-spinner: url("../images/spinner.gif");
  --icon-unanswered: url("../images/unanswered-icon.png");
  --incorrect: #b20610;
  --lightGrey: #edf1f5;
  --lighter-base-font-color: #646464;
  --link-color: #1b6d99;
  --medium-font-size: 0.9em;
  --partially-correct: #008100;
  --primary: #0075b4;
  --shadow: rgba(0, 0, 0, 0.2);
  --shadow-l1: rgba(0, 0, 0, 0.1);
  --sidebar-color: #f6f6f6;
  --small-font-size: 80%;
  --static-path: "..";
  --submitted: #0075b4;
  --success: #008100;
  --tmg-f2: 0.25s;
  --tmg-s2: 2s;
  --transparent: transparent;
  --uxpl-gray-background: #d9d9d9;
  --uxpl-gray-base: #414141;
  --uxpl-gray-dark: #111111;
  --very-light-text: white;
  --warning: #e2c01f;
  --warning-color: #ffc01f;
  --warning-color-accent: #fffcdd;
  --white: #fff;
  --yellow: #e2c01f; 
  }

[kdmccormick]

@farhan ty for writing up those issues.

Regarding issue 1, seems that there is no lighten/darken replacement in CSS. There is a separate CSS brightness filter that could be applied to the same elements, but it might be difficult to get an exact match with Sass's lighten and darken.

Regarding issue 2, from my research it seems that string concatenation in CSS just simply isn't supported.

Perhaps an easy for for both issues 1 and 2 would be to define new CSS variables in _builtin-block-variables.scss :

:root {
  ...
  --error-color-dark: darken($error-color, 11%);
  --error-color-light: lighten($error-color, 25%);
  --unanswered-icon-url: '#{var(--static-path)}/images/unanswered-icon.png';
  ...
}

how does that look?

[farhan]

@kdmccormick Solutions sounds reasonable to me. was inclined towards brightness filter but for the exact match I think let's go for it.

@kdmccormick Followup question: Are we planning to remove all the sass infrastructure? If so, will these sass variables will also be removed ahead?

[farhan]

@kdmccormick Another issue is identified, details added in description: Can we do hard code just for all-text-inputs, its using in the Cappa Problem XBlock?

[kdmccormick]

@farhan

Are we planning to remove all the sass infrastructure? If so, will these sass variables will also be removed ahead?

The general edx-platform Sass infrastructure must remain until the very last legacy frontend is converted into a React micro-frontend. That will not be for another year or two. The Sass variables we use in _builtin-block-variables.scss will remain available for the time being.

However, we will stop compiling built-in XBlock Sass in particular as part of this ticket: https://github.com/openedx/edx-platform/issues/35300

[kdmccormick]

@farhan

Can we do hard code just for all-text-inputs, its using in the Cappa Problem XBlock?

Yes, you can hard code the value of $all-text-inputs and remove it from _builtin-block-variables.scss. I cannot imagine that anyone's theme would have modified the value of that variable, since it really is just an exhaustive list of all text-based input types.

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[farhan]

@kdmccormick PR is rebased and ready to ship from my side.

FYI We have already shipped Annotatable XBlock in PR tested by me and @irtazaakram .

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[kdmccormick]

One very minor note @farhan , I will be squashing your commit with a refactor: message instead of a chore: message. Chores refer to insignificant changes that can mostly be ignored, whereas this is a fairly significant refactoring that we had to test carefully.

[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 deployed to the edX production environment.