From e35f3a5df6e4f53861e1a5f23379aab00d30e79e Mon Sep 17 00:00:00 2001
From: Muhammad Farhan Khan <mfarhan133@gmail.com>
Date: Thu, 5 Sep 2024 10:53:32 +0500
Subject: [PATCH] chore: Convert builtin blocks sass variables to css variables

---
 .../static/sass/_builtin-block-variables.scss |  10 +-
 xmodule/assets/capa/_display.scss             | 355 +++++++++---------
 xmodule/assets/editor/_edit.scss              |  12 +-
 xmodule/assets/html/_display.scss             |  44 +--
 xmodule/assets/lti/_lti.scss                  |  10 +-
 xmodule/assets/poll/_display.scss             |  16 +-
 xmodule/assets/problem/_edit.scss             |  18 +-
 xmodule/assets/sequence/_display.scss         |  14 +-
 xmodule/assets/tabs/_codemirror.scss          |   2 +-
 xmodule/assets/tabs/_tabs.scss                |  40 +-
 xmodule/assets/video/_accessible_menu.scss    |  47 +--
 xmodule/assets/video/_display.scss            |  92 ++---
 12 files changed, 336 insertions(+), 324 deletions(-)

diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss
index 2c567c6fb1f4..e232cb57d575 100644
--- a/common/static/sass/_builtin-block-variables.scss
+++ b/common/static/sass/_builtin-block-variables.scss
@@ -16,7 +16,6 @@
 
 :root {
     --action-primary-active-bg: $action-primary-active-bg;
-    --all-text-inputs: $all-text-inputs;
     --base-font-size: $base-font-size;
     --base-line-height: $base-line-height;
     --baseline: $baseline;
@@ -26,6 +25,7 @@
     --blue-d1: $blue-d1;
     --blue-d2: $blue-d2;
     --blue-d4: $blue-d4;
+    --blue-s1: $blue-s1;
     --body-color: $body-color;
     --border-color: $border-color;
     --bp-screen-lg: $bp-screen-lg;
@@ -34,6 +34,8 @@
     --danger: $danger;
     --darkGrey: $darkGrey;
     --error-color: $error-color;
+    --error-color-dark: darken($error-color, 11%);
+    --error-color-light: lighten($error-color, 25%);
     --font-bold: $font-bold;
     --font-family-sans-serif: $font-family-sans-serif;
     --general-color-accent: $general-color-accent;
@@ -44,6 +46,12 @@
     --gray-l3: $gray-l3;
     --gray-l4: $gray-l4;
     --gray-l6: $gray-l6;
+    --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');
     --incorrect: $incorrect;
     --lightGrey: $lightGrey;
     --lighter-base-font-color: $lighter-base-font-color;
diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss
index 15571b65dc30..a4ead59ba307 100644
--- a/xmodule/assets/capa/_display.scss
+++ b/xmodule/assets/capa/_display.scss
@@ -50,7 +50,7 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 
 // +Mixins - Status Icon - Capa
 // ====================
-@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
+@mixin status-icon($color: var(--gray), $fontAwesomeIcon: "\f00d") {
   .status-icon {
     &::after {
       @extend %use-font-awesome;
@@ -66,13 +66,13 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 // ====================
 h2 {
   margin-top: 0;
-  margin-bottom: ($baseline*0.75);
+  margin-bottom: calc((var(--baseline)*0.75));
 
   &.problem-header {
     display: inline-block;
 
     section.staff {
-      margin-top: ($baseline*1.5);
+      margin-top: calc((var(--baseline)*1.5));
       font-size: 80%;
     }
   }
@@ -89,10 +89,10 @@ h2 {
 }
 
 %feedback-hint {
-  margin-top: ($baseline / 4);
+  margin-top: calc((var(--baseline) / 4));
 
   .icon {
-    @include margin-right($baseline / 4);
+    @include margin-right(calc((var(--baseline) / 4)));
   }
 }
 
@@ -100,7 +100,7 @@ h2 {
   @extend %feedback-hint;
 
   .icon {
-    color: $incorrect;
+    color: var(--incorrect);
   }
 }
 
@@ -109,7 +109,7 @@ h2 {
   @extend %feedback-hint;
 
   .icon {
-    color: $correct;
+    color: var(--correct);
   }
 }
 
@@ -143,19 +143,19 @@ iframe[seamless] {
 }
 
 .inline-error {
-  color: darken($error-color, 11%);
+  color: var(--error-color-dark);
 }
 
 div.problem-progress {
   display: inline-block;
-  color: $gray-d1;
+  color: var(--gray-d1);
   font-size: em(14);
 }
 
 // +Problem - Base
 // ====================
 div.problem {
-  padding-top: $baseline;
+  padding-top: var(--baseline);
 
   @media print {
     display: block;
@@ -176,25 +176,25 @@ div.problem {
     display: inline;
 
     + p {
-      margin-top: $baseline;
+      margin-top: var(--baseline);
     }
   }
 
   .question-description {
-    color: $gray-d1;
-    font-size: $small-font-size;
+    color: var(--gray-d1);
+    font-size: var(--small-font-size);
   }
 
   form > label, .problem-group-label {
     display: block;
-    margin-bottom: $baseline;
+    margin-bottom: var(--baseline);
     font: inherit;
     color: inherit;
     -webkit-font-smoothing: initial;
   }
 
   .problem-group-label + .question-description {
-    margin-top: -$baseline;
+    margin-top: calc(-1 * var(--baseline));
   }
 
 }
@@ -203,7 +203,7 @@ div.problem {
 // can not use the & + & since .problem is nested deeply in .xmodule_display.xmodule_CapaModule
 .wrapper-problem-response + .wrapper-problem-response,
 .wrapper-problem-response + p {
-  margin-top: ($baseline * 1.5);
+  margin-top: calc((var(--baseline) * 1.5));
 }
 
 // Choice Group - silent class
@@ -219,14 +219,14 @@ div.problem {
 
     display: inline-block;
     clear: both;
-    margin-bottom: ($baseline/2);
-    border: 2px solid $gray-l4;
+    margin-bottom: calc((var(--baseline)/2));
+    border: 2px solid var(--gray-l4);
     border-radius: 3px;
-    padding: ($baseline/2);
+    padding: calc((var(--baseline)/2));
     width: 100%;
 
     &::after {
-      @include margin-left($baseline*0.75);
+      @include margin-left(calc((var(--baseline)*0.75)));
     }
   }
 
@@ -242,15 +242,15 @@ div.problem {
 
   input[type="radio"],
   input[type="checkbox"] {
-    @include margin($baseline/4);
-    @include margin-right($baseline/2);
+    @include margin(calc((var(--baseline)/4)));
+    @include margin-right(calc((var(--baseline)/2)));
   }
 
   input {
     &:focus,
     &:hover {
       & + label {
-        border: 2px solid $blue;
+        border: 2px solid var(--blue);
       }
     }
 
@@ -258,25 +258,25 @@ div.problem {
     &:focus,
     &:hover {
       & + label.choicegroup_correct {
-        @include status-icon($correct, $checkmark-icon);
+        @include status-icon(var(--correct), $checkmark-icon);
 
-        border: 2px solid $correct;
+        border: 2px solid var(--correct);
       }
 
       & + label.choicegroup_partially-correct {
-        @include status-icon($partially-correct, $asterisk-icon);
+        @include status-icon(var(--partially-correct), $asterisk-icon);
 
-        border: 2px solid $partially-correct;
+        border: 2px solid var(--partially-correct);
       }
 
       & + label.choicegroup_incorrect {
-        @include status-icon($incorrect, $cross-icon);
+        @include status-icon(var(--incorrect), $cross-icon);
 
-        border: 2px solid $incorrect;
+        border: 2px solid var(--incorrect);
       }
 
       & + label.choicegroup_submitted {
-        border: 2px solid $submitted;
+        border: 2px solid var(--submitted);
       }
     }
   }
@@ -293,11 +293,11 @@ div.problem {
     }
 
     label {
-      @include padding($baseline/2);
-      @include padding-left($baseline*2.3);
+      @include padding(calc((var(--baseline)/2)));
+      @include padding-left(calc((var(--baseline)*2.3)));
 
       position: relative;
-      font-size: $base-font-size;
+      font-size: var(--base-font-size);
       line-height: normal;
       cursor: pointer;
     }
@@ -308,19 +308,19 @@ div.problem {
 
       position: absolute;
       top: 0.35em;
-      width: $baseline*1.1;
-      height: $baseline*1.1;
+      width: calc(var(--baseline)*1.1);
+      height: calc(var(--baseline)*1.1);
       z-index: 1;
     }
 
     legend {
-      margin-bottom: $baseline;
+      margin-bottom: var(--baseline);
       max-width: 100%;
       white-space: normal;
     }
 
     legend + .question-description {
-      margin-top: -$baseline;
+      margin-top: calc(-1 * var(--baseline));
       max-width: 100%;
       white-space: normal;
     }
@@ -332,24 +332,24 @@ div.problem {
 // Summary status indicators shown after the input area
 div.problem {
   .indicator-container {
-    @include margin-left($baseline*0.75);
+    @include margin-left(calc((var(--baseline)*0.75)));
 
     .status {
-      width: $baseline;
+      width: var(--baseline);
 
       // CASE: correct answer
       &.correct {
-        @include status-icon($correct, $checkmark-icon);
+        @include status-icon(var(--correct), $checkmark-icon);
       }
 
       // CASE: partially correct answer
       &.partially-correct {
-        @include status-icon($partially-correct, $asterisk-icon);
+        @include status-icon(var(--partially-correct), $asterisk-icon);
       }
 
       // CASE: incorrect answer
       &.incorrect {
-        @include status-icon($incorrect, $cross-icon);
+        @include status-icon(var(--incorrect), $cross-icon);
       }
 
       &.submitted,
@@ -379,7 +379,7 @@ div.problem {
 
   .solution-span {
     > span {
-      margin: $baseline 0;
+      margin: var(--baseline) 0;
       display: block;
       position: relative;
 
@@ -413,20 +413,20 @@ div.problem {
         font-style: normal;
 
         &:hover {
-          color: $blue;
+          color: var(--blue);
         }
       }
     }
 
     &.correct, &.ui-icon-check {
       input {
-        border-color: $correct;
+        border-color: var(--correct);
       }
     }
 
     &.partially-correct, &.ui-icon-check {
       input {
-        border-color: $partially-correct;
+        border-color: var(--partially-correct);
       }
     }
 
@@ -438,25 +438,25 @@ div.problem {
 
     &.ui-icon-close {
       input {
-        border-color: $incorrect;
+        border-color: var(--incorrect);
       }
     }
 
     &.incorrect, &.incomplete {
       input {
-        border-color: $incorrect;
+        border-color: var(--incorrect);
       }
     }
 
     &.submitted, &.ui-icon-check {
       input {
-        border-color: $submitted;
+        border-color: var(--submitted);
       }
     }
 
     p.answer {
       display: inline-block;
-      margin-top: ($baseline / 2);
+      margin-top: calc((var(--baseline) / 2));
       margin-bottom: 0;
 
       &::before {
@@ -483,7 +483,7 @@ div.problem {
       }
 
       img.loading {
-        @include padding-left($baseline/2);
+        @include padding-left(calc((var(--baseline)/2)));
 
         display: inline-block;
       }
@@ -517,7 +517,7 @@ div.problem {
         top: 4px;
         width: 14px;
         height: 14px;
-        background: url('#{$static-path}/images/unanswered-icon.png') center center no-repeat;
+        background: var(--icon-unanswered) center center no-repeat;
       }
 
       &.processing, &.ui-icon-processing {
@@ -526,7 +526,7 @@ div.problem {
         top: 6px;
         width: 25px;
         height: 20px;
-        background: url('#{$static-path}/images/spinner.gif') center center no-repeat;
+        background: var(--icon-spinner) center center no-repeat;
       }
 
       &.ui-icon-check {
@@ -535,7 +535,7 @@ div.problem {
         top: 3px;
         width: 25px;
         height: 20px;
-        background: url('#{$static-path}/images/correct-icon.png') center center no-repeat;
+        background: var(--icon-correct) center center no-repeat;
       }
 
       &.incomplete, &.ui-icon-close {
@@ -544,24 +544,24 @@ div.problem {
         top: 3px;
         width: 20px;
         height: 20px;
-        background: url('#{$static-path}/images/incorrect-icon.png') center center no-repeat;
+        background: var(--icon-incorrect) center center no-repeat;
       }
     }
 
     .reload {
       @include float(right);
 
-      margin: ($baseline/2);
+      margin: calc((var(--baseline)/2));
     }
 
 
     .grader-status {
       @include clearfix();
 
-      margin: $baseline/2 0;
-      padding: $baseline/2;
+      margin: calc(var(--baseline)/2) 0;
+      padding: calc(var(--baseline)/2);
       border-radius: 5px;
-      background: $gray-l6;
+      background: var(--gray-l6);
 
       span {
         display: block;
@@ -574,7 +574,7 @@ div.problem {
       .grading {
         margin: 0px 7px 0 0;
         padding-left: 25px;
-        background: url('#{$static-path}/images/info-icon.png') left center no-repeat;
+        background: var(--icon-info) left center no-repeat;
         text-indent: 0px;
       }
 
@@ -586,11 +586,11 @@ div.problem {
       }
 
       &.file {
-        margin-top: $baseline;
-        padding: $baseline 0 0 0;
+        margin-top: var(--baseline);
+        padding: var(--baseline) 0 0 0;
         border: 0;
         border-top: 1px solid #eee;
-        background: $white;
+        background: var(--white);
 
         p.debug {
           display: none;
@@ -605,13 +605,13 @@ div.problem {
 
     .evaluation {
       p {
-        margin-bottom: ($baseline/5);
+        margin-bottom: calc((var(--baseline)/5));
       }
     }
 
 
     .feedback-on-feedback {
-      margin-right: $baseline;
+      margin-right: var(--baseline);
       height: 100px;
     }
 
@@ -646,7 +646,7 @@ div.problem {
     }
 
     .submit-message-container {
-      margin: $baseline 0px ;
+      margin: var(--baseline) 0px ;
     }
   }
 
@@ -753,17 +753,17 @@ div.problem {
     padding: 0px 5px;
     border: 1px solid #eaeaea;
     border-radius: 3px;
-    background-color: $gray-l6;
+    background-color: var(--gray-l6);
     white-space: nowrap;
     font-size: .9em;
   }
 
   pre {
     overflow: auto;
-    padding: 6px $baseline/2;
-    border: 1px solid $gray-l3;
+    padding: 6px calc(var(--baseline)/2);
+    border: 1px solid var(--gray-l3);
     border-radius: 3px;
-    background-color: $gray-l6;
+    background-color: var(--gray-l6);
     font-size: .9em;
     line-height: 1.4;
 
@@ -784,7 +784,7 @@ div.problem {
     input {
       box-sizing: border-box;
 
-      border: 2px solid $gray-l4;
+      border: 2px solid var(--gray-l4);
       border-radius: 3px;
       min-width: 160px;
       height: 46px;
@@ -792,47 +792,47 @@ div.problem {
 
     .status {
       display: inline-block;
-      margin-top: ($baseline/2);
+      margin-top: calc((var(--baseline)/2));
       background: none;
     }
 
     // CASE: incorrect answer
     > .incorrect {
       input {
-        border: 2px solid $incorrect;
+        border: 2px solid var(--incorrect);
       }
 
       .status {
-        @include status-icon($incorrect, $cross-icon);
+        @include status-icon(var(--incorrect), $cross-icon);
       }
     }
 
     // CASE: partially correct answer
     > .partially-correct {
       input {
-        border: 2px solid $partially-correct;
+        border: 2px solid var(--partially-correct);
       }
 
       .status {
-        @include status-icon($partially-correct, $asterisk-icon);
+        @include status-icon(var(--partially-correct), $asterisk-icon);
       }
     }
 
     // CASE: correct answer
     > .correct {
       input {
-        border: 2px solid $correct;
+        border: 2px solid var(--correct);
       }
 
       .status {
-        @include status-icon($correct, $checkmark-icon);
+        @include status-icon(var(--correct), $checkmark-icon);
       }
     }
 
     // CASE: submitted, correctness withheld
     > .submitted {
       input {
-        border: 2px solid $submitted;
+        border: 2px solid var(--submitted);
       }
 
       .status {
@@ -843,7 +843,7 @@ div.problem {
     // CASE: unanswered and unsubmitted
     > .unanswered, > .unsubmitted {
       input {
-        border: 2px solid $gray-l4;
+        border: 2px solid var(--gray-l4);
       }
 
       .status {
@@ -868,7 +868,7 @@ div.problem {
   }
 
   .trailing_text {
-    @include margin-right($baseline/2);
+    @include margin-right(calc((var(--baseline)/2)));
 
     display: inline-block;
   }
@@ -930,7 +930,7 @@ div.problem {
         visibility: hidden;
         width: 0;
         border-right: none;
-        border-left: 1px solid $black;
+        border-left: 1px solid var(--black);
       }
     }
   }
@@ -952,14 +952,14 @@ div.problem {
 
 .capa-message {
   display: inline-block;
-  color: $gray-d1;
+  color: var(--gray-d1);
   -webkit-font-smoothing: antialiased;
 }
 
 // +Problem - Actions
 // ====================
 div.problem .action {
-  min-height: $baseline;
+  min-height: var(--baseline);
   width: 100%;
   display: flex;
   display: -ms-flexbox;
@@ -972,11 +972,11 @@ div.problem .action {
       display: inline-flex;
       justify-content: flex-end;
       width: 100%;
-      padding-bottom: $baseline;
+      padding-bottom: var(--baseline);
   }
 
   .problem-action-button-wrapper {
-    @include border-right(1px solid $gray-300);
+    @include border-right(1px solid var(--gray-300));
     @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation
 
     display: inline-block;
@@ -994,11 +994,11 @@ div.problem .action {
     &:hover,
     &:focus,
     &:active {
-      color: $primary !important;
+      color: var(--primary) !important;
     }
 
     .icon {
-      margin-bottom: $baseline / 10;
+      margin-bottom: calc(var(--baseline) / 10);
       display: block;
     }
 
@@ -1008,41 +1008,41 @@ div.problem .action {
   }
 
   .submit-attempt-container {
-    padding-bottom: $baseline;
+    padding-bottom: var(--baseline);
     flex-grow: 1;
     display: flex;
     align-items: center;
 
-    @media (max-width: $bp-screen-lg) {
+    @media (max-width: var(--bp-screen-lg)) {
       max-width: 100%;
-      padding-bottom: $baseline;
+      padding-bottom: var(--baseline);
     }
 
     .submit {
-      @include margin-right($baseline / 2);
+      @include margin-right(calc((var(--baseline) / 2)));
       @include float(left);
 
       white-space: nowrap;
     }
 
     .submit-cta-description {
-        color: $primary;
+        color: var(--primary);
         font-size: small;
-        padding-right: $baseline / 2;
+        padding-right: calc(var(--baseline) / 2);
     }
     .submit-cta-link-button {
-        color: $primary;
-        padding-right: $baseline / 4;
+        color: var(--primary);
+        padding-right: calc(var(--baseline) / 4);
     }
   }
 
   .submission-feedback {
-    @include margin-right($baseline / 2);
+    @include margin-right(calc((var(--baseline) / 2)));
 
-    margin-top: $baseline / 2;
+    margin-top: calc(var(--baseline) / 2);
     display: inline-block;
-    color: $gray-d1;
-    font-size: $medium-font-size;
+    color: var(--gray-d1);
+    font-size: var(--medium-font-size);
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
 
@@ -1072,6 +1072,9 @@ div.problem {
     visibility: hidden;
   }
 
+  //  TODO: We will directly use the compiled css in place of $all-text-inputs in the ticket give below
+  //  https://github.com/openedx/edx-platform/issues/35300
+  //  Note: We will not read the $all-text-inputs value from the global css variable
   #{$all-text-inputs} {
     display: inline;
     width: auto;
@@ -1082,7 +1085,7 @@ div.problem {
     display: block;
     margin: lh() 0;
     padding: lh();
-    border: 1px solid $gray-l3;
+    border: 1px solid var(--gray-l3);
   }
 
   .message {
@@ -1114,52 +1117,52 @@ div.problem {
   }
 
   div.capa_alert {
-    margin-top: $baseline;
+    margin-top: var(--baseline);
     padding: 8px 12px;
-    border: 1px solid $warning-color;
+    border: 1px solid var(--warning-color);
     border-radius: 3px;
-    background: $warning-color-accent;
+    background: var(--warning-color-accent);
     font-size: 0.9em;
   }
 
   .notification {
     @include float(left);
 
-    margin-top: $baseline / 2;
-    padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2);
-    line-height: $base-line-height;
+    margin-top: calc(var(--baseline) / 2);
+    padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2));
+    line-height: var(--base-line-height);
 
     &.success {
-      @include notification-by-type($success);
+      @include notification-by-type(var(--success));
     }
 
     &.error {
-      @include notification-by-type($danger);
+      @include notification-by-type(var(--danger));
     }
 
     &.warning {
-      @include notification-by-type($warning);
+      @include notification-by-type(var(--warning));
     }
 
     &.general {
-      @include notification-by-type($general-color-accent);
+      @include notification-by-type(var(--general-color-accent));
     }
 
     &.problem-hint {
-      border: 1px solid $uxpl-gray-background;
+      border: 1px solid var(--uxpl-gray-background);
       border-radius: 6px;
 
       .icon {
-        @include margin-right(3 * $baseline / 4);
+        @include margin-right(calc(3 * var(--baseline) / 4) );
 
-        color: $uxpl-gray-dark;
+        color: var(--uxpl-gray-dark);
       }
 
       li {
-        color: $uxpl-gray-base;
+        color: var(--uxpl-gray-base);
 
         strong {
-          color: $uxpl-gray-dark;
+          color: var(--uxpl-gray-dark);
         }
       }
     }
@@ -1168,7 +1171,7 @@ div.problem {
       @include float(left);
 
       position: relative;
-      top: $baseline / 5;
+      top: calc(var(--baseline) / 5);
     }
 
     .notification-message {
@@ -1184,7 +1187,7 @@ div.problem {
         margin: 0;
 
         li:not(:last-child) {
-          margin-bottom: $baseline / 4;
+          margin-bottom: calc(var(--baseline) / 4);
         }
       }
     }
@@ -1198,13 +1201,13 @@ div.problem {
   .notification-btn {
     @include float(right);
 
-    padding: ($baseline / 10) ($baseline / 4);
-    min-width: ($baseline * 3);
+    padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4));
+    min-width: calc((var(--baseline) * 3));
     display: block;
     clear: both;
 
     &:first-child {
-      margin-bottom: $baseline / 4;
+      margin-bottom: calc(var(--baseline) / 4);
     }
   }
 
@@ -1225,26 +1228,26 @@ div.problem {
 
     &.btn-brand {
       &:hover {
-        background-color: $btn-brand-focus-background;
+        background-color: var(--btn-brand-focus-background);
       }
     }
   }
 
   .review-btn {
-    color: $blue; // notification type has other colors
+    color: var(--blue); // notification type has other colors
     &.sr {
-      color: $blue;
+      color: var(--blue);
     }
   }
 
   div.capa_reset {
     padding: 25px;
-    border: 1px solid $error-color;
-    background-color: lighten($error-color, 25%);
+    background-color: var(--error-color-light);
+    border: 1px solid var(--error-color);
     border-radius: 3px;
     font-size: 1em;
-    margin-top: $baseline/2;
-    margin-bottom: $baseline/2;
+    margin-top: calc(var(--baseline)/2);
+    margin-bottom: calc(var(--baseline)/2);
   }
 
   .capa_reset>h2 {
@@ -1256,7 +1259,7 @@ div.problem {
   }
 
   .hints {
-    border: 1px solid $gray-l3;
+    border: 1px solid var(--gray-l3);
 
     h3 {
       @extend %t-strong;
@@ -1264,7 +1267,7 @@ div.problem {
       padding: 9px;
       border-bottom: 1px solid #e3e3e3;
       background: #eee;
-      text-shadow: 0 1px 0 $white;
+      text-shadow: 0 1px 0 var(--white);
       font-size: em(16);
     }
 
@@ -1283,8 +1286,8 @@ div.problem {
         a {
           display: block;
           padding: 9px;
-          background: $gray-l6;
-          box-shadow: inset 0 0 0 1px $white;
+          background: var(--gray-l6);
+          box-shadow: inset 0 0 0 1px var(--white);
         }
       }
 
@@ -1311,11 +1314,11 @@ div.problem {
 
     > section {
       position: relative;
-      margin-bottom: ($baseline/2);
-      padding: 9px 9px $baseline;
+      margin-bottom: calc((var(--baseline)/2));
+      padding: 9px 9px var(--baseline);
       border: 1px solid #ddd;
       border-radius: 3px;
-      background: $white;
+      background: var(--white);
       box-shadow: inset 0 0 0 1px #eee;
 
       p:last-of-type {
@@ -1331,8 +1334,8 @@ div.problem {
         box-sizing: border-box;
 
         display: block;
-        padding: ($baseline/5);
-        background: $gray-l4;
+        padding: calc((var(--baseline)/5));
+        background: var(--gray-l4);
         text-align: right;
         font-size: 1em;
 
@@ -1349,8 +1352,8 @@ div.problem {
 
   .external-grader-message {
     section {
-      padding-top: ($baseline*1.5);
-      padding-left: $baseline;
+      padding-top: calc((var(--baseline)*1.5));
+      padding-left: var(--baseline);
       background-color: #fafafa;
       color: #2c2c2c;
       font-size: 1em;
@@ -1369,9 +1372,9 @@ div.problem {
         padding: 0;
 
         .result-errors {
-          margin: ($baseline/4);
-          padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2);
-          background: url('#{$static-path}/images/incorrect-icon.png') center left no-repeat;
+          margin: calc((var(--baseline)/4));
+          padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2));
+          background: var(--icon-incorrect) center left no-repeat;
 
           li {
             color: #b00;
@@ -1379,10 +1382,10 @@ div.problem {
         }
 
         .result-output {
-          margin: $baseline/4;
-          padding: $baseline 0 ($baseline*0.75) 50px;
+          margin: calc(var(--baseline)/4);
+          padding: var(--baseline) 0 calc((var(--baseline)*0.75)) 50px;
           border-top: 1px solid #ddd;
-          border-left: $baseline solid #fafafa;
+          border-left: var(--baseline) solid #fafafa;
 
           h4 {
             font-size: 1em;
@@ -1394,7 +1397,7 @@ div.problem {
           }
 
           dt {
-            margin-top: $baseline;
+            margin-top: var(--baseline);
           }
 
           dd {
@@ -1403,7 +1406,7 @@ div.problem {
         }
 
         .result-correct {
-          background: url('#{$static-path}/images/correct-icon.png') left 20px no-repeat;
+          background: var(--icon-correct) left 20px no-repeat;
 
           .result-actual-output {
             color: #090;
@@ -1411,7 +1414,7 @@ div.problem {
         }
 
         .result-partially-correct {
-          background: url('#{$static-path}/images/partially-correct-icon.png') left 20px no-repeat;
+          background: var(--icon-partially-correct) left 20px no-repeat;
 
           .result-actual-output {
             color: #090;
@@ -1419,7 +1422,7 @@ div.problem {
         }
 
         .result-incorrect {
-          background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat;
+          background: var(--icon-incorrect) left 20px no-repeat;
 
           .result-actual-output {
             color: #b00;
@@ -1427,8 +1430,8 @@ div.problem {
         }
 
         .markup-text{
-          margin: ($baseline/4);
-          padding: $baseline 0 15px 50px;
+          margin: calc((var(--baseline)/4));
+          padding: var(--baseline) 0 15px 50px;
           border-top: 1px solid #ddd;
           border-left: 20px solid #fafafa;
 
@@ -1451,19 +1454,19 @@ div.problem {
 div.problem {
   .rubric {
     tr {
-      margin: ($baseline/2) 0;
+      margin: calc((var(--baseline)/2)) 0;
       height: 100%;
     }
 
     td {
-      margin: ($baseline/2) 0;
-      padding: $baseline 0;
+      margin: calc((var(--baseline)/2)) 0;
+      padding: var(--baseline) 0;
       height: 100%;
     }
 
     th {
-      margin: ($baseline/4);
-      padding: ($baseline/4);
+      margin: calc((var(--baseline)/4));
+      padding: calc((var(--baseline)/4));
     }
 
     label,
@@ -1471,12 +1474,12 @@ div.problem {
       position: relative;
       display: inline-block;
       margin: 3px;
-      padding: ($baseline*0.75);
+      padding: calc((var(--baseline)*0.75));
       min-width: 50px;
       min-height: 50px;
       width: 150px;
       height: 100%;
-      background-color: $gray-l3;
+      background-color: var(--gray-l3);
       font-size: .9em;
     }
 
@@ -1484,7 +1487,7 @@ div.problem {
       position: absolute;
       right: 0;
       bottom: 0;
-      margin: ($baseline/2);
+      margin: calc((var(--baseline)/2));
     }
 
     .selected-grade {
@@ -1508,14 +1511,14 @@ div.problem {
 div.problem {
   .annotation-input {
     margin: 0 0 1em 0;
-    border: 1px solid $gray-l3;
+    border: 1px solid var(--gray-l3);
     border-radius: 1em;
 
     .annotation-header {
       @extend %t-strong;
 
       padding: .5em 1em;
-      border-bottom: 1px solid $gray-l3;
+      border-bottom: 1px solid var(--gray-l3);
     }
 
     .annotation-body { padding: .5em 1em; }
@@ -1557,7 +1560,7 @@ div.problem {
           @extend %ui-fake-link;
 
           display: inline-block;
-          margin-left: ($baseline*2);
+          margin-left: calc((var(--baseline)*2));
           border: 1px solid rgb(102,102,102);
 
           &.selected {
@@ -1590,13 +1593,13 @@ div.problem {
     .debug-value {
       margin: 1em 0;
       padding: 1em;
-      border: 1px solid $black;
+      border: 1px solid var(--black);
       background-color: #999;
-      color: $white;
+      color: var(--white);
 
       input[type="text"] { width: 100%; }
 
-      pre { background-color: $gray-l3; color: $black; }
+      pre { background-color: var(--gray-l3); color: var(--black); }
 
       &::before {
         @extend %t-strong;
@@ -1623,7 +1626,7 @@ div.problem {
       @extend label.choicegroup_correct;
 
       input[type="text"] {
-        border-color: $correct;
+        border-color: var(--correct);
       }
     }
 
@@ -1631,7 +1634,7 @@ div.problem {
       @extend label.choicegroup_partially-correct;
 
       input[type="text"] {
-        border-color: $partially-correct;
+        border-color: var(--partially-correct);
       }
     }
 
@@ -1645,9 +1648,9 @@ div.problem {
 
     label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
       &::after {
-        @include margin-left($baseline*0.75);
+        @include margin-left(calc((var(--baseline)*0.75)));
 
-        content: url('#{$static-path}/images/correct-icon.png');
+        content: var(--icon-correct);
       }
     }
 
@@ -1682,15 +1685,15 @@ div.problem .imageinput.capa_inputtype {
   }
 
   .correct {
-    @include status-icon($correct, $checkmark-icon);
+    @include status-icon(var(--correct), $checkmark-icon);
   }
 
   .incorrect {
-    @include status-icon($incorrect, $cross-icon);
+    @include status-icon(var(--incorrect), $cross-icon);
   }
 
   .partially-correct {
-    @include status-icon($partially-correct, $asterisk-icon);
+    @include status-icon(var(--partially-correct), $asterisk-icon);
   }
 
   .submitted {
@@ -1723,15 +1726,15 @@ div.problem .annotation-input {
   }
 
   .correct {
-    @include status-icon($correct, $checkmark-icon);
+    @include status-icon(var(--correct), $checkmark-icon);
   }
 
   .incorrect {
-    @include status-icon($incorrect, $cross-icon);
+    @include status-icon(var(--incorrect), $cross-icon);
   }
 
   .partially-correct {
-    @include status-icon($partially-correct, $asterisk-icon);
+    @include status-icon(var(--partially-correct), $asterisk-icon);
   }
 
   .submitted {
@@ -1743,5 +1746,5 @@ div.problem .annotation-input {
 // ====================
 .problems-wrapper .loading-spinner {
   text-align: center;
-  color: $gray-d1;
+  color: var(--gray-d1);
 }
diff --git a/xmodule/assets/editor/_edit.scss b/xmodule/assets/editor/_edit.scss
index 71699776522d..9ecd31416ced 100644
--- a/xmodule/assets/editor/_edit.scss
+++ b/xmodule/assets/editor/_edit.scss
@@ -18,7 +18,7 @@
     @include linear-gradient(top, #d4dee8, #c9d5e2);
 
     position: relative;
-    padding: ($baseline/4);
+    padding: calc((var(--baseline)/4));
     border-bottom-color: #a5aaaf;
 
     button {
@@ -26,7 +26,7 @@
 
       @include float(left);
 
-      padding: 3px ($baseline/2) 5px;
+      padding: 3px calc((var(--baseline)/2)) 5px;
       margin-left: 7px;
       border: 0;
       border-radius: 2px;
@@ -53,7 +53,7 @@
 
     li {
       @include float(left);
-      @include margin-right($baseline/4);
+      @include margin-right(calc((var(--baseline)/4)));
 
       &:last-child {
         @include margin-right(0);
@@ -67,7 +67,7 @@
       border: 1px solid #a5aaaf;
       border-radius: 3px 3px 0 0;
 
-      @include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
+      @include linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, .06));
 
       background-color: #e5ecf3;
       font-size: 13px;
@@ -75,8 +75,8 @@
       box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
 
       &.current {
-        background: $white;
-        border-bottom-color: $white;
+        background: var(--white);
+        border-bottom-color: var(--white);
       }
     }
   }
diff --git a/xmodule/assets/html/_display.scss b/xmodule/assets/html/_display.scss
index 25e2ce4fbd64..beceaa1d0119 100644
--- a/xmodule/assets/html/_display.scss
+++ b/xmodule/assets/html/_display.scss
@@ -10,8 +10,8 @@
 }
 
 h1 {
-  color: $body-color;
-  font: normal 2em/1.4em $font-family-sans-serif;
+  color: var(--body-color);
+  font: normal 2em/1.4em var(--font-family-sans-serif);
   letter-spacing: 1px;
 
   @include margin(0, 0, 1.416em, 0);
@@ -19,9 +19,9 @@ h1 {
 
 h2 {
   color: #646464;
-  font: normal 1.2em/1.2em $font-family-sans-serif;
+  font: normal 1.2em/1.2em var(--font-family-sans-serif);
   letter-spacing: 1px;
-  margin-bottom: ($baseline*0.75);
+  margin-bottom: calc((var(--baseline)*0.75));
   -webkit-font-smoothing: antialiased;
 }
 
@@ -29,7 +29,7 @@ h3,
 h4,
 h5,
 h6 {
-  @include margin(0, 0, ($baseline/2), 0);
+  @include margin(0, 0, calc((var(--baseline)/2)), 0);
 
   font-weight: 600;
 }
@@ -54,7 +54,7 @@ p {
   margin-bottom: 1.416em;
   font-size: 1em;
   line-height: 1.6em !important;
-  color: $body-color;
+  color: var(--body-color);
 }
 
 em,
@@ -78,11 +78,11 @@ b {
 p + p,
 ul + p,
 ol + p {
-  margin-top: $baseline;
+  margin-top: var(--baseline);
 }
 
 blockquote {
-  margin: 1em ($baseline*2);
+  margin: 1em calc((var(--baseline)*2));
 }
 
 ol,
@@ -91,7 +91,7 @@ ul {
   @include bi-app-compact(padding, 0, 0, 0, 1em);
 
   margin: 1em 0;
-  color: $body-color;
+  color: var(--body-color);
 
   li {
     margin-bottom: 0.708em;
@@ -112,7 +112,7 @@ a {
   &:hover,
   &:active,
   &:focus {
-    color: $blue;
+    color: var(--blue);
   }
 }
 
@@ -122,7 +122,7 @@ img {
 
 pre {
   margin: 1em 0;
-  color: $body-color;
+  color: var(--body-color);
   font-family: monospace, serif;
   font-size: 1em;
   white-space: pre-wrap;
@@ -130,7 +130,7 @@ pre {
 }
 
 code {
-  color: $body-color;
+  color: var(--body-color);
   font-family: monospace, serif;
   background: none;
   padding: 0;
@@ -138,15 +138,15 @@ code {
 
 table {
   width: 100%;
-  margin: $baseline 0;
+  margin: var(--baseline) 0;
   border-collapse: collapse;
   font-size: 16px;
 
   td,
   th {
-    margin: $baseline 0;
-    padding: ($baseline/2);
-    border: 1px solid $gray-l3;
+    margin: var(--baseline) 0;
+    padding: calc((var(--baseline)/2));
+    border: 1px solid var(--gray-l3);
     font-size: 14px;
 
     &.cont-justified-left {
@@ -179,12 +179,12 @@ th {
 
     position: absolute;
     display: block;
-    padding: ($baseline/4) 7px;
+    padding: calc((var(--baseline)/4)) 7px;
     border-radius: 5px;
     opacity: 0.9;
-    background: $white;
-    color: $black;
-    border: 2px solid $black;
+    background: var(--white);
+    color: var(--black);
+    border: 2px solid var(--black);
 
     .label {
       font-weight: bold;
@@ -269,11 +269,11 @@ th {
             position: relative;
 
             &.action-zoom-in {
-              margin-right: ($baseline/4);
+              margin-right: calc((var(--baseline)/4));
             }
 
             &.action-zoom-out {
-              margin-left: ($baseline/4);
+              margin-left: calc((var(--baseline)/4));
             }
 
             &.is-disabled {
diff --git a/xmodule/assets/lti/_lti.scss b/xmodule/assets/lti/_lti.scss
index 4bd2c41317f5..9eee710f0dad 100644
--- a/xmodule/assets/lti/_lti.scss
+++ b/xmodule/assets/lti/_lti.scss
@@ -10,7 +10,7 @@ h2.problem-header {
 
 div.problem-progress {
   display: inline-block;
-  padding-left: ($baseline/4);
+  padding-left: calc((var(--baseline)/4));
   color: #666;
   font-weight: 100;
   font-size: em(16);
@@ -24,8 +24,8 @@ div.lti {
   .wrapper-lti-link {
     @include font-size(14);
 
-    background-color: $sidebar-color;
-    padding: $baseline;
+    background-color: var(--sidebar-color);
+    padding: var(--baseline);
 
     .lti-link {
       margin-bottom: 0;
@@ -58,8 +58,8 @@ div.lti {
   }
 
   div.problem-feedback {
-    margin-top: ($baseline/4);
-    margin-bottom: ($baseline/4);
+    margin-top: calc((var(--baseline)/4));
+    margin-bottom: calc((var(--baseline)/4));
 
   }
 }
diff --git a/xmodule/assets/poll/_display.scss b/xmodule/assets/poll/_display.scss
index 7c07f89376b2..7c9b21bf205e 100644
--- a/xmodule/assets/poll/_display.scss
+++ b/xmodule/assets/poll/_display.scss
@@ -20,13 +20,13 @@ div.poll_question {
 
   h3 {
     margin-top: 0;
-    margin-bottom: ($baseline*0.75);
+    margin-bottom: calc((var(--baseline)*0.75));
     color: #fe57a1;
     font-size: 1.9em;
 
     &.problem-header {
       div.staff {
-        margin-top: ($baseline*1.5);
+        margin-top: calc((var(--baseline)*1.5));
         font-size: 80%;
       }
     }
@@ -44,7 +44,7 @@ div.poll_question {
   }
 
   .poll_answer {
-    margin-bottom: $baseline;
+    margin-bottom: var(--baseline);
 
     &.short {
       clear: both;
@@ -107,7 +107,7 @@ div.poll_question {
         font-weight: bold;
         letter-spacing: normal;
         line-height: 25.59375px;
-        margin-bottom: ($baseline*0.75);
+        margin-bottom: calc((var(--baseline)*0.75));
         margin: 0;
         padding: 0px;
         text-align: center;
@@ -145,9 +145,9 @@ div.poll_question {
         width: 80%;
         text-align: left;
         min-height: 30px;
-        margin-left: $baseline;
+        margin-left: var(--baseline);
         height: auto;
-        margin-bottom: $baseline;
+        margin-bottom: var(--baseline);
 
         &.short {
           width: 100px;
@@ -157,7 +157,7 @@ div.poll_question {
 
     .stats {
       min-height: 40px;
-      margin-top: $baseline;
+      margin-top: var(--baseline);
       clear: both;
 
       &.short {
@@ -174,7 +174,7 @@ div.poll_question {
         border: 1px solid black;
         display: inline;
         float: left;
-        margin-right: ($baseline/2);
+        margin-right: calc((var(--baseline)/2));
 
         &.short {
           width: 65%;
diff --git a/xmodule/assets/problem/_edit.scss b/xmodule/assets/problem/_edit.scss
index 018a0961c247..f3fc795ec646 100644
--- a/xmodule/assets/problem/_edit.scss
+++ b/xmodule/assets/problem/_edit.scss
@@ -5,20 +5,20 @@
       margin-top: -4px;
       padding: 3px 9px;
       font-size: 12px;
-      color: $link-color;
+      color: var(--link-color);
 
       &.current {
-        border: 1px solid $lightGrey !important;
+        border: 1px solid var(--lightGrey) !important;
         border-radius: 3px !important;
-        background: $lightGrey !important;
-        color: $darkGrey !important;
+        background: var(--lightGrey) !important;
+        color: var(--darkGrey) !important;
         pointer-events: none;
         cursor: none;
 
         &:hover,
         &:focus {
           box-shadow: 0 0 0 0 !important;
-          background-color: $white;
+          background-color: var(--white);
         }
       }
     }
@@ -31,9 +31,9 @@
   top: 41px;
   @include left(70%);
   width: 0;
-  border-left: 1px solid $gray-l2;
+  border-left: 1px solid var(--gray-l2);
 
-  background-color: $lightGrey;
+  background-color: var(--lightGrey);
   overflow: hidden;
 
   &.shown {
@@ -76,7 +76,7 @@
       margin-right: 30px;
 
       .icon {
-        height: ($baseline * 1.5);
+        height: calc((var(--baseline) * 1.5));
       }
     }
   }
@@ -105,5 +105,5 @@
   width: 26px;
   height: 21px;
   vertical-align: middle;
-  color: $body-color;
+  color: var(--body-color);
 }
diff --git a/xmodule/assets/sequence/_display.scss b/xmodule/assets/sequence/_display.scss
index 3ddda8b37d09..595b602a8872 100644
--- a/xmodule/assets/sequence/_display.scss
+++ b/xmodule/assets/sequence/_display.scss
@@ -5,9 +5,9 @@
 @import 'bootstrap/scss/mixins/breakpoints';
 @import 'lms/theme/variables-v1';
 
-$seq-nav-border-color: $border-color !default;
+$seq-nav-border-color: var(--border-color) !default;
 $seq-nav-hover-color: rgb(245, 245, 245) !default;
-$seq-nav-link-color: $link-color !default;
+$seq-nav-link-color: var(--link-color) !default;
 $seq-nav-icon-color: rgb(10, 10, 10) !default;
 $seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
 $seq-nav-tooltip-color: rgb(51, 51, 51) !default;
@@ -69,7 +69,7 @@ $seq-nav-height: 50px;
 .sequence-nav {
   @extend .topbar;
 
-  margin: 0 auto $baseline;
+  margin: 0 auto var(--baseline);
   position: relative;
   border-bottom: none;
   z-index: 0;
@@ -172,14 +172,14 @@ $seq-nav-height: 50px;
 
           margin-top: 12px;
           background: $seq-nav-tooltip-color;
-          color: $white;
-          font-family: $font-family-sans-serif;
+          color: var(--white);
+          font-family: var(--font-family-sans-serif);
           line-height: lh();
           right: 0;  // Should not be RTLed, tooltips do not move in RTL
           padding: 6px;
           position: absolute;
           top: 48px;
-          text-shadow: 0 -1px 0 $black;
+          text-shadow: 0 -1px 0 var(--black);
           white-space: pre;
           pointer-events: none;
 
@@ -239,7 +239,7 @@ $seq-nav-height: 50px;
     text-overflow: ellipsis;
 
     span:not(:last-child) {
-      @include padding-right($baseline / 2);
+      @include padding-right(calc((var(--baseline) / 2)));
     }
   }
 
diff --git a/xmodule/assets/tabs/_codemirror.scss b/xmodule/assets/tabs/_codemirror.scss
index 237d1850332a..37a894a10395 100644
--- a/xmodule/assets/tabs/_codemirror.scss
+++ b/xmodule/assets/tabs/_codemirror.scss
@@ -9,7 +9,7 @@
     height: 379px;
     border: 1px solid #3c3c3c;
     border-top: 1px solid #8891a1;
-    background: $white;
+    background: var(--white);
     color: #3c3c3c;
   }
 
diff --git a/xmodule/assets/tabs/_tabs.scss b/xmodule/assets/tabs/_tabs.scss
index ad47d915a230..4b8c2a387a91 100644
--- a/xmodule/assets/tabs/_tabs.scss
+++ b/xmodule/assets/tabs/_tabs.scss
@@ -31,12 +31,12 @@
   .edit-header {
     box-sizing: border-box;
 
-    padding: 18px $baseline;
+    padding: 18px var(--baseline);
     top: 0 !important; // ugly override for second level tab override
     right: 0;
-    background-color: $blue;
-    border-bottom: 1px solid $blue-d2;
-    color: $white;
+    background-color: var(--blue);
+    border-bottom: 1px solid var(--blue-d2);
+    color: var(--white);
 
     //Component Name
     .component-name {
@@ -44,16 +44,16 @@
       top: 0;
       left: 0;
       width: 50%;
-      color: $white;
+      color: var(--white);
       font-weight: 600;
 
 
 
       em {
         display: inline-block;
-        margin-right: ($baseline/4);
+        margin-right: calc((var(--baseline)/4));
         font-weight: 400;
-        color: $white;
+        color: var(--white);
       }
     }
 
@@ -61,9 +61,9 @@
     .editor-tabs {
       list-style: none;
       right: 0;
-      top: ($baseline/4);
+      top: calc((var(--baseline)/4));
       position: absolute;
-      padding: 12px ($baseline*0.75);
+      padding: 12px calc((var(--baseline)*0.75));
 
       .inner_tab_wrap {
         display: inline-block;
@@ -73,25 +73,25 @@
           @include font-size(14);
           @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
 
-          border: 1px solid $blue-d1;
+          border: 1px solid var(--blue-d1);
           border-radius: 3px;
-          padding: ($baseline/4) ($baseline);
-          background-color: $blue;
+          padding: calc((var(--baseline)/4)) (var(--baseline));
+          background-color: var(--blue);
           font-weight: bold;
-          color: $white;
+          color: var(--white);
 
           &.current {
-            @include linear-gradient($blue, $blue);
+            @include linear-gradient(var(--blue), var(--blue));
 
-            color: $blue-d1;
-            box-shadow: inset 0 1px 2px 1px $shadow-l1;
-            background-color: $blue-d4;
+            color: var(--blue-d1);
+            box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
+            background-color: var(--blue-d4);
             cursor: default;
           }
 
           &:hover,
           &:focus {
-            box-shadow: inset 0 1px 2px 1px  $shadow;
+            box-shadow: inset 0 1px 2px 1px  var(--shadow);
             background-image: linear-gradient(#009fe6, #009fe6) !important;
           }
         }
@@ -113,7 +113,7 @@
     .comp-subtitles-import-list {
       > li {
         display: block;
-        margin: $baseline/2 0;
+        margin: calc(var(--baseline)/2) 0;
       }
 
       .blue-button {
@@ -128,7 +128,7 @@
 }
 
 .component-tab {
-  background: $white;
+  background: var(--white);
   position: relative;
   border-top: 1px solid #8891a1;
 
diff --git a/xmodule/assets/video/_accessible_menu.scss b/xmodule/assets/video/_accessible_menu.scss
index f7153fa98429..d411925f2390 100644
--- a/xmodule/assets/video/_accessible_menu.scss
+++ b/xmodule/assets/video/_accessible_menu.scss
@@ -1,11 +1,12 @@
 @import 'base/mixins';
+@import 'lms/theme/variables-v1';
 
 $a11y--gray: rgb(127, 127, 127);
 $a11y--blue: rgb(0, 159, 230);
-$a11y--gray-d1: shade($gray, 20%);
-$a11y--gray-l2: tint($gray, 40%);
-$a11y--gray-l3: tint($gray, 60%);
-$a11y--blue-s1: saturate($blue, 15%);
+$a11y--gray-d1: var(--gray-d1);
+$a11y--gray-l2: var(--gray-l2);
+$a11y--gray-l3: var(--gray-l3);
+$a11y--blue-s1: var(--blue-s1);
 
 %use-font-awesome {
   font-family: FontAwesome;
@@ -32,7 +33,7 @@ $a11y--blue-s1: saturate($blue, 15%);
     display: none;
     position: absolute;
     list-style: none;
-    background-color: $white;
+    background-color: var(--white);
     border: 1px solid #eee;
 
     li {
@@ -41,7 +42,7 @@ $a11y--blue-s1: saturate($blue, 15%);
       margin: 0;
       padding: 0;
       border-bottom: 1px solid #eee;
-      color: $white;
+      color: var(--white);
 
       a {
         display: block;
@@ -84,23 +85,23 @@ $a11y--blue-s1: saturate($blue, 15%);
 
     &.open {
       > a {
-        background-color: $action-primary-active-bg;
-        color: $very-light-text;
+        background-color: var(--action-primary-active-bg);
+        color: var(--very-light-text);
 
         &::after {
-          color: $very-light-text;
+          color: var(--very-light-text);
         }
       }
     }
 
     > a {
-      @include transition(all $tmg-f2 ease-in-out 0s);
+      @include transition(all var(--tmg-f2) ease-in-out 0s);
       @include font-size(12);
 
       display: block;
       border-radius: 0 3px 3px 0;
-      background-color: $very-light-text;
-      padding: ($baseline*0.75) ($baseline*1.25) ($baseline*0.75) ($baseline*0.75);
+      background-color: var(--very-light-text);
+      padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75));
       color: $a11y--gray-l2;
       min-width: 1.5em;
       line-height: 14px;
@@ -113,9 +114,9 @@ $a11y--blue-s1: saturate($blue, 15%);
 
         content: "\f0d7";
         position: absolute;
-        right: ($baseline*0.5);
+        right: calc((var(--baseline)*0.5));
         top: 33%;
-        color: $lighter-base-font-color;
+        color: var(--lighter-base-font-color);
       }
     }
 
@@ -144,7 +145,7 @@ $a11y--blue-s1: saturate($blue, 15%);
   @extend %ui-depth5;
 
   border: 1px solid #333;
-  background: $white;
+  background: var(--white);
   color: #333;
   padding: 0;
   margin: 0;
@@ -162,8 +163,8 @@ $a11y--blue-s1: saturate($blue, 15%);
 
   .menu-item,
   .submenu-item {
-    border-top: 1px solid $gray-l3;
-    padding: ($baseline/4) ($baseline/2);
+    border-top: 1px solid var(--gray-l3);
+    padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
     outline: none;
 
     & > span {
@@ -176,17 +177,17 @@ $a11y--blue-s1: saturate($blue, 15%);
 
     &:focus {
       background: #333;
-      color: $white;
+      color: var(--white);
 
       & > span {
-        color: $white;
+        color: var(--white);
       }
     }
   }
 
   .submenu-item {
     position: relative;
-    padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
+    padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2));
 
     &::after {
       content: '\25B6';
@@ -202,10 +203,10 @@ $a11y--blue-s1: saturate($blue, 15%);
 
     &.is-opened {
       background: #333;
-      color: $white;
+      color: var(--white);
 
       & > span {
-        color: $white;
+        color: var(--white);
       }
 
       & > .submenu {
@@ -220,7 +221,7 @@ $a11y--blue-s1: saturate($blue, 15%);
 
   .is-disabled {
     pointer-events: none;
-    color: $gray-l3;
+    color: var(--gray-l3);
   }
 }
 
diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss
index fd5cd73b2105..c1f2ccee19fa 100644
--- a/xmodule/assets/video/_display.scss
+++ b/xmodule/assets/video/_display.scss
@@ -23,7 +23,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light
 $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
 & {
-  margin-bottom: ($baseline*1.5);
+  margin-bottom: calc((var(--baseline)*1.5));
 }
 
 .is-hidden {
@@ -99,9 +99,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     .branding,
     .wrapper-transcript-feedback {
       flex: 1;
-      margin-top: $baseline;
+      margin-top: var(--baseline);
 
-      @include padding-right($baseline);
+      @include padding-right(var(--baseline));
 
       vertical-align: top;
     }
@@ -147,14 +147,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         left: -9999em;
         display: inline-block;
         vertical-align: middle;
-        color: $body-color;
+        color: var(--body-color);
       }
 
       .brand-logo {
         display: inline-block;
         max-width: 100%;
-        max-height: ($baseline*2);
-        padding: ($baseline/4) 0;
+        max-height: calc((var(--baseline)*2));
+        padding: calc((var(--baseline)/4)) 0;
         vertical-align: middle;
       }
     }
@@ -180,8 +180,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   .google-disclaimer {
     display: none;
-    margin-top: $baseline;
-    @include padding-right($baseline);
+    margin-top: var(--baseline);
+    @include padding-right(var(--baseline));
     vertical-align: top;
   }
 
@@ -246,7 +246,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       opacity: 0.1;
 
       &::after {
-        background: $white;
+        background: var(--white);
         position: absolute;
         width: 50%;
         height: 50%;
@@ -271,23 +271,23 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     }
 
     .closed-captions.is-visible {
-      max-height: ($baseline * 3);
-      border-radius: ($baseline / 5);
-      padding: 8px ($baseline / 2) 8px ($baseline * 1.5);
+      max-height: calc((var(--baseline) * 3));
+      border-radius: calc((var(--baseline) / 5));
+      padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5));
       background: rgba(0, 0, 0, 0.75);
-      color: $yellow;
+      color: var(--yellow);
 
       &::before {
         position: absolute;
         display: inline-block;
         top: 50%;
 
-        @include left($baseline);
+        @include left(var(--baseline));
 
         margin-top: -0.6em;
         font-family: 'FontAwesome';
         content: "\f142";
-        color: $white;
+        color: var(--white);
         opacity: 0.5;
       }
 
@@ -316,7 +316,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       .video-error,
       .video-hls-error {
-        padding: ($baseline / 5);
+        padding: calc((var(--baseline) / 5));
         background: black;
         color: white !important; // the pattern library headings shim is more scoped
       }
@@ -366,7 +366,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         margin: 0;
         border: 0;
         border-radius: 0;
-        padding: ($baseline / 2) ($baseline / 1.5);
+        padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5));
         background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
         box-shadow: none;
         text-shadow: none;
@@ -409,7 +409,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         left: 0;
         right: 0;
         z-index: 1;
-        height: ($baseline / 4);
+        height: calc((var(--baseline) / 4));
         margin-left: 0;
         border: 1px solid $cool-dark;
         border-radius: 0;
@@ -436,11 +436,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
           box-sizing: border-box;
           top: -1px;
-          height: ($baseline / 4);
-          width: ($baseline / 4);
-          margin-left: -($baseline / 8); // center-center causes the control to be beyond the end of the sider
+          height: calc((var(--baseline) / 4));
+          width: calc((var(--baseline) / 4));
+          margin-left: calc(-1 * (var(--baseline) / 8)); // center-center causes the control to be beyond the end of the sider
           border: 1px solid $secondary-base;
-          border-radius: ($baseline / 5);
+          border-radius: calc((var(--baseline) / 5));
           padding: 0;
           background: $secondary-base;
           box-shadow: none;
@@ -527,7 +527,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
             position: absolute;
             display: none;
-            bottom: ($baseline * 2);
+            bottom: calc((var(--baseline) * 2));
 
             @include right(0); // right-align menus since this whole collection is on the right
 
@@ -571,9 +571,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
               &.is-active {
                 .speed-option,
                 .control-lang {
-                  @include border-left($baseline/10 solid rgb(14, 166, 236));
+                  @include border-left(var(--baseline)/10 solid rgb(14, 166, 236));
 
-                  font-weight: $font-bold;
+                  font-weight: var(--font-bold);
                   color: rgb(14, 166, 236); // UXPL primary accent
                 }
               }
@@ -610,9 +610,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
           .speed-button {
             .label {
-              @include padding(0 ($baseline/3) 0 0);
+              @include padding(0 calc((var(--baseline)/3)) 0 0);
 
-              font-family: $font-family-sans-serif;
+              font-family: var(--font-family-sans-serif);
               color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
 
               @media (max-width: 1120px) {
@@ -636,8 +636,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
         .lang {
           .language-menu {
-            width: $baseline;
-            padding: ($baseline / 2) 0;
+            width: var(--baseline);
+            padding: calc((var(--baseline) / 2)) 0;
           }
 
           .control {
@@ -685,7 +685,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
             display: none;
             position: absolute;
-            bottom: ($baseline * 2);
+            bottom: calc((var(--baseline) * 2));
 
             @include right(0);
 
@@ -695,7 +695,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
             .volume-slider {
               height: 100px;
-              width: ($baseline / 4);
+              width: calc((var(--baseline) / 4));
               margin: 14px auto;
               box-sizing: border-box;
               border: 1px solid $cool-dark;
@@ -704,14 +704,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
               .ui-slider-handle {
                 @extend %ui-fake-link;
 
-                @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
+                @include transition(height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s);
                 @include left(-5px);
 
                 box-sizing: border-box;
                 height: 13px;
                 width: 13px;
                 border: 1px solid $secondary-base;
-                border-radius: ($baseline / 5);
+                border-radius: calc((var(--baseline) / 5));
                 padding: 0;
                 background: $secondary-base;
                 box-shadow: none;
@@ -763,11 +763,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     &:hover {
       .video-controls {
         .slider {
-          height: ($baseline / 1.5);
+          height: calc((var(--baseline) / 1.5));
 
           .ui-slider-handle {
-            height: ($baseline / 1.5);
-            width: ($baseline / 1.5);
+            height: calc((var(--baseline) / 1.5));
+            width: calc((var(--baseline) / 1.5));
           }
         }
       }
@@ -887,7 +887,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       bottom: 0;
       top: 0;
       width: 275px;
-      padding: 0 $baseline;
+      padding: 0 var(--baseline);
       display: none;
     }
   }
@@ -973,14 +973,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       box-sizing: border-box;
       @include transition(none);
 
-      background: $black;
+      background: var(--black);
       visibility: visible;
 
       li {
         color: #aaa;
 
         &.current {
-          color: $white;
+          color: var(--white);
         }
       }
     }
@@ -1010,17 +1010,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: 100%;
-    background-color: $black;
+    background-color: var(--black);
 
     &.is-html5 {
       background-size: 15%;
     }
 
     .btn-play.btn-pre-roll {
-      padding: $baseline;
+      padding: var(--baseline);
       border: none;
-      border-radius: $baseline;
-      background: $black-t2;
+      border-radius: var(--baseline);
+      background: var(--black-t2);
       box-shadow: none;
 
       &::after {
@@ -1030,13 +1030,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       }
 
       img {
-        height: ($baseline * 4);
-        width: ($baseline * 4);
+        height: calc((var(--baseline) * 4));
+        width: calc((var(--baseline) * 4));
       }
 
       &:hover,
       &:focus {
-        background: $blue;
+        background: var(--blue);
       }
     }
   }