chore: Adds fallback values to the xmodule xblocks global css variables

[farhan]

Adds fallback to variables.
In case required global css variables are not provided by the runtime, XBlocks should render normally on its default values.

Predecessor PR/stories:

#35300
#35233

Fallbacks of following global css variables has been added (or added yet):

CSS

--font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

--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")

SCSS

    --font-family-sans-serif: $font-family-sans-serif;

    --icon-correct: url($static-path + '/images/correct-icon.png');
    --icon-incorrect: url($static-path + '/images/incorrect-icon.png');
    --icon-info: url($static-path + '/images/info-icon.png');
    --icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
    --icon-spinner: url($static-path + '/images/spinner.gif');
    --icon-unanswered: url($static-path + '/images/unanswered-icon.png');

Where I have taken the fallback values from?

I have copied the fallback values from cms/static/css/studio-main-v1.css file which generates when we compile the sass files like via npm run compile-sass command.

:root {
  --action-primary-active-bg: #0075b4;
  --base-font-size: 18px;
  --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%;
  --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; 
}