Convert discussion block sass variable into css variables (#37742)

* chore: convert discussion sass variable into css variables

Author: salman2013

common/static/sass/_builtin-block-variables.scss

@@ -8,6 +8,7 @@
 @import 'bourbon/bourbon';
 @import 'lms/theme/variables';
 @import 'lms/theme/variables-v1';
+@import 'lms/static/sass/discussion/utilities/_variables-bootstrap.scss';
 @import 'cms/static/sass/partials/cms/theme/_variables';
 @import 'cms/static/sass/partials/cms/theme/_variables-v1';
 @import 'bootstrap/scss/variables';
@@ -16,6 +17,8 @@
 
 :root {
     --action-primary-active-bg: $action-primary-active-bg;
+    --actions-dropdown-width: $actions-dropdown-width;
+    --actions-dropdown-offset: $actions-dropdown-offset;
     --base-font-size: $base-font-size;
     --base-line-height: $base-line-height;
     --baseline: $baseline;
@@ -28,17 +31,48 @@
     --blue-s1: $blue-s1;
     --body-color: $body-color;
     --border-color: $border-color;
+    --border-color-4:$border-color-4;
     --bp-screen-lg: $bp-screen-lg;
     --btn-brand-focus-background: $btn-brand-focus-background;
     --correct: $correct;
+    --comment-image-dimension: $comment-image-dimension;
+    --container-max-widths-xl: map-get($container-max-widths, xl);
     --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;
+    --forum-color-active-thread: $forum-color-active-thread;
+    --forum-color-hover: $forum-color-hover;
+    --forum-color-active-text: $forum-color-active-text;
+    --forum-color-background: $forum-color-background;
+    --forum-x-large-font-size: $forum-x-large-font-size;
+    --forum-color-copy-light: $forum-color-copy-light;
+    --forum-large-font-size: $forum-large-font-size;
+    --forum-border-radius: $forum-border-radius;
+    --forum-base-font-size: $forum-base-font-size;
+    --forum-small-font-size: $forum-small-font-size;
+    --forum-color-border: $forum-color-border;
+    --forum-color-background-light: $forum-color-background-light;
+    --forum-color-editor-preview-label: $forum-color-editor-preview-label;
+    --forum-color-following: $forum-color-following;
+    --forum-color-error: $forum-color-error;
+    --forum-color-pinned: $forum-color-pinned;
+    --forum-color-reported: $forum-color-reported;
+    --forum-color-closed: $forum-color-closed;
+    --forum-color-staff: $forum-color-staff;
+    --forum-color-community-ta: $forum-color-community-ta;
+    --forum-color-response-count: $forum-color-response-count;
+    --forum-color-read-post: $forum-color-read-post;
+    --forum-color-hover-thread: $forum-color-hover-thread;
+    --forum-color-reading-thread: $forum-color-reading-thread;
+    --forum-color-never-read-post: $forum-color-never-read-post;
+    --forum-color-navigation-bar: $forum-color-navigation-bar;
+    --forum-color-primary: $forum-color-primary;
     --general-color-accent: $general-color-accent;
+    --green: $green;
     --gray: $gray;
     --gray-300: $gray-300;
     --gray-d1: $gray-d1;
@@ -56,15 +90,20 @@
     --lightGrey: $lightGrey;
     --lighter-base-font-color: $lighter-base-font-color;
     --link-color: $link-color;
+    --line-height-base:$line-height-base;
     --medium-font-size: $medium-font-size;
+    --pink:$pink;
     --partially-correct: $partially-correct;
     --primary: $primary;
+    --post-image-dimension: $post-image-dimension;
+    --response-image-dimension: $response-image-dimension;
     --shadow: $shadow;
     --shadow-l1: $shadow-l1;
     --sidebar-color: $sidebar-color;
     --small-font-size: $small-font-size;
     --submitted: $submitted;
     --success: $success;
+    --serif:$serif;
     --tmg-f2: $tmg-f2;
     --tmg-s2: $tmg-s2;
     --transparent: $transparent;

lms/static/sass/base/_base.scss

@@ -6,19 +6,19 @@
 // }
 
 html {
-  font-family: $font-family-sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-style: normal;
   line-height: 1em;
   background: theme-color("inverse");
 
 }
 
 body {
-  font-family: $font-family-sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-style: normal;
-  font-size: $font-size-base;
+  font-size: var(--font-size-base);
   line-height: 1em;
-  background: $body-bg;
+  background: var(--body-bg);
 
 }
 
@@ -33,29 +33,29 @@ h3,
 h4,
 h5,
 h6 {
-  color: $body-color;
-  font: normal 1.2em/1.2em $serif;
+  color: var(--body-color);
+  font: normal 1.2em/1.2em var(--serif);
   margin: 0;
 }
 
 h1 {
-  color: $body-color;
-  font: normal 2em/1.4em $font-family-sans-serif;
-  margin-bottom: ($baseline*1.5);
+  color: var(--body-color);
+  font: normal 2em/1.4em var(--font-family-sans-serif);
+  margin-bottom: calc(var(--baseline) * 1.5);
   text-align: center;
 }
 
 h2 {
-  color: $lighter-base-font-color;
-  font: normal 1.2em/1.2em $serif;
-  margin-bottom: ($baseline*0.75);
+  color: var(--lighter-base-font-color);
+  font: normal 1.2em/1.2em var(--serif);
+  margin-bottom: calc(var(--baseline) * 0.75);
   -webkit-font-smoothing: antialiased;
 }
 
 p + h2,
 ul + h2,
 ol + h2 {
-  margin-top: ($baseline*2);
+  margin-top: calc(var(--baseline) * 2);
 }
 
 p {
@@ -78,20 +78,20 @@ span {
 }
 
 .text-dark-grey {
-  color: $dark-gray1;
+  color: var(--dark-gray1);
   font-size: 24px;
 }
 
 p + p,
 ul + p,
 ol + p {
-  margin-top: $baseline;
+  margin-top: var(--baseline);
 }
 
 p {
   a:not(.btn),
   a:visited:not(.btn) {
-    color: $link-color;
+    color: var(--link-color);
     font: inherit;
     font-weight: inherit;
     text-decoration: none;
@@ -108,7 +108,7 @@ p {
 
 a:not(.btn),
 a:visited:not(.btn) {
-  color: $link-color;
+  color: var(--link-color);
   font: inherit;
   text-decoration: none;
 
@@ -131,12 +131,12 @@ a:visited:not(.btn) {
 }
 
 .content-wrapper {
-  margin: $baseline auto 0 auto;
-  max-width: map-get($container-max-widths, xl);
-  padding: 0 0 $baseline/2;
+  margin: var(--baseline) auto 0 auto;
+  max-width: var(--container-max-widths-xl);
+  padding: 0 0 calc(var(--baseline) / 2);
 
   @include media-breakpoint-up(md) {
-    padding: 0 $baseline $baseline/2;
+    padding: 0 var(--baseline) calc(var(--baseline) / 2);
   }
 
   @media print {
@@ -151,7 +151,7 @@ a:visited:not(.btn) {
 
   @include media-breakpoint-up(md) {
     margin: 0 auto;
-    padding: ($baseline*2) 0;
+    padding: calc(var(--baseline) * 2) 0;
     max-width: grid-width(12);
     min-width: 760px;
     width: flex-grid(12);
@@ -171,8 +171,8 @@ span.edx {
   @include clearfix();
 
   margin: 0 auto;
-  max-width: map-get($container-max-widths, xl);
-  padding: ($baseline*3) 0 ($baseline*6);
+  max-width: var(--container-max-widths-xl);
+  padding: calc(var(--baseline) * 3) 0 calc(var(--baseline) * 6);
   width: flex-grid(12);
 
   .inner-wrapper {
@@ -185,29 +185,29 @@ span.edx {
     list-style: disc;
 
     li {
-      color: $body-color;
-      font: normal 1em/1.4em $serif;
+      color: var(--body-color);
+      font: normal 1em/1.4em var(--serif);
       margin: 0;
     }
   }
 
   h1 {
-    margin-bottom: ($baseline*1.5);
+    margin-bottom: calc(var(--baseline) * 1.5);
   }
 
   h1 + hr {
-    margin-bottom: ($baseline*3);
+    margin-bottom: calc(var(--baseline) * 3);
   }
 
   p + h2,
   ul + h2,
   ol + h2 {
-    margin-top: ($baseline*2);
+    margin-top: calc(var(--baseline) * 2);
   }
 
   ul + p,
   ol + p {
-    margin-top: $baseline;
+    margin-top: var(--baseline);
   }
 }
 
@@ -227,13 +227,13 @@ mark {
 
 .ie-banner {
   display: none;
-  max-width: map-get($container-max-widths, xl);
+  max-width: var(--container-max-widths-xl);
   min-width: 720px;
   margin: auto;
   border-radius: 0 0 3px 3px;
   background: #f4f4e0;
   color: #3c3c3c;
-  padding: ($baseline/4) $baseline 8px;
+  padding: calc(var(--baseline) / 4) var(--baseline) 8px;
   font-size: 13px;
   text-align: center;
 
@@ -274,19 +274,19 @@ mark {
   display: inline-block;
   position: absolute;
   left: 0;
-  top: -($baseline*30);
+  top: calc(-1 * var(--baseline) * 30);
   overflow: hidden;
-  background: $white;
-  border-bottom: 1px solid $border-color-4;
-  padding: ($baseline*0.75) 0;
+  background: var(--white);
+  border-bottom: 1px solid var(--border-color-4);
+  padding: calc(var(--baseline) * 0.75) 0;
 
   &:focus,
   &:active {
     @include left(45%);
-    @include margin-left(-1 * $baseline * 1.5);
+    @include margin-left(calc( -1 * var(--baseline) * 1.5));
 
     position: absolute;
-    top: $baseline/4;
+    top: calc(var(--baseline) / 4);
     width: 10%;
     height: auto;
     background-color: black;

lms/static/sass/discussion/_discussion-v1.scss

@@ -12,14 +12,14 @@
   );
 
   display: inline-block;
-  border: 1px solid $forum-color-active-thread;
+  border: 1px solid var(--forum-color-active-thread);
   border-radius: 3px;
   margin: 0;
   background-image: none;
   box-shadow: none;
   height: 40px;
   text-shadow: none;
-  font-family: $font-family-sans-serif; // without this, it would fallback to lms button tag style
+  font-family: var(--font-family-sans-serif); // without this, it would fallback to lms button tag style
   font-size: 14px;
   font-weight: 600;
   word-wrap: break-word;
@@ -44,11 +44,11 @@
   &:focus {
     // Note:these rules all need !important in order to beat out
     // the base button styling defined in the courseware.
-    border-color: $forum-color-hover !important;
-    background-color: $forum-color-hover !important;
+    border-color: var(--forum-color-hover) !important;
+    background-color: var(--forum-color-hover) !important;
     background-image: none !important;
     box-shadow: none !important;
-    color: $forum-color-active-text !important;
+    color: var(--forum-color-active-text) !important;
     text-decoration: none !important;  // Don't show underlines on links that are styled as buttons
   }
 }
@@ -59,15 +59,15 @@
   .btn {
     @extend %pattern-library-btn;
 
-    background-color: $forum-color-background;
-    color: $forum-color-active-thread;
+    background-color: var(--forum-color-background);
+    color: var(--forum-color-active-thread);
   }
 
   .btn-brand {
     @extend %pattern-library-btn;
 
-    background-color: $forum-color-active-thread;
-    color: $forum-color-active-text;
+    background-color: var(--forum-color-active-thread);
+    color: var(--forum-color-active-text);
   }
 }