refactor: update styles to css variables

Author: dcoa

src/App.scss

@@ -1,13 +1,10 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-footer/dist/_footer";
 @import "~@edx/frontend-component-header/dist/index";

src/components/FilePreview/FileCard.scss

@@ -1,7 +1,5 @@
-@import "@openedx/paragon/scss/core/core";
-
 .file-card {
-  margin: map-get($spacers, 1) 0;
+  margin: var(--pgn-spacing-spacer-1) 0;
 
   .file-card-title {
     text-overflow: ellipsis;
@@ -26,8 +24,8 @@
   white-space: pre-wrap;
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .file-card-title {
-    width: calc(map-get($container-max-widths, "sm")/2);
+    width: calc(var(--pgn-size-container-max-width-sm)/2);
   }
-}
+}

src/containers/ListView/ListView.scss

@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 span.pgn__icon.breadcrumb-arrow {
   width: 16px !important;
   height: 16px !important;
 };
 
 .empty-submission {
-  width: map-get($container-max-widths, "sm");
+  width: var(--pgn-size-container-max-width-sm);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,7 +13,7 @@ span.pgn__icon.breadcrumb-arrow {
   margin: auto;
 
   > img {
-    padding: map-get($spacers, 5);
+    padding: var(--pgn-spacing-spacer-5);
   }
 }
 

src/containers/ResponseDisplay/ResponseDisplay.scss

@@ -1,14 +1,12 @@
-@import "@openedx/paragon/scss/core/core";
-
 .response-display {
-  padding: map-get($spacers, 0);
-  width: map-get($container-max-widths, "md");
+  padding: var(--pgn-spacing-spacer-0);
+  width: var(--pgn-size-container-max-width-md);
   overflow-y: hidden;
   height: fit-content;
 
   .submission-files {
     .submission-files-title {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       border-radius: calc(0.375rem - 1px);
       border-bottom: 1px solid transparent;
       transition: border-color 100ms ease 150ms;
@@ -25,13 +23,13 @@
         cursor: initial;
 
         > h3 {
-          color: $gray-300;
+          color: var(--pgn-color-gray-300);
         }
       }
     }
 
     .submission-files-body {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       padding-top: 0;
 
       .submission-files-table thead {
@@ -41,7 +39,7 @@
   }
 
   .preview-display {
-    padding: map-get($spacers, 3) 0;
+    padding: var(--pgn-spacing-spacer-3) 0;
   }
 
   .response-display-text-content {
@@ -50,12 +48,12 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .response-display {
     width: 100%;
 
     .preview-display {
-      padding: map-get($spacers, 1) 0;
+      padding: var(--pgn-spacing-spacer-1) 0;
     }
   }
-}
+}

src/containers/ReviewActions/ReviewActions.scss

@@ -1,16 +1,14 @@
-@import "@openedx/paragon/scss/core/core";
-
 // action reviews
 .review-actions {
-  padding: map_get($spacers, 3);
+  padding: var(--pgn-spacing-spacer-3);
   flex-direction: row;
-  background-color: $light-200;
+  background-color: var(--pgn-color-light-200);
 
   .review-actions-username {
     flex-grow: 1;
   }
   .review-actions-status {
-    margin-left: map_get($spacers, 3);
+    margin-left: var(--pgn-spacing-spacer-3);
     vertical-align: middle;
   }
   .review-actions-group {
@@ -20,18 +18,18 @@
 
     .submission-navigation {
       float: right;
-      padding: map-get($spacers, 1);
+      padding: var(--pgn-spacing-spacer-1);
     }
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .review-actions {
     flex-direction: column;
     align-items: flex-start !important;
   }
 
   .review-actions-username {
-    padding-bottom: map-get($spacers, 3);
+    padding-bottom:var(--pgn-spacing-spacer-3);
   }
-}
+}

src/containers/ReviewModal/ReviewModal.scss

@@ -1,7 +1,5 @@
-@import "@openedx/paragon/scss/core/core";
-
 .review-modal-body {
-  background-color: $gray-300 !important;
+  background-color: var(--pgn-color-gray-300) !important;
   overflow: auto !important;
   padding: inherit;
 
@@ -20,7 +18,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .review-modal-body {
     padding: 0 !important;
     overflow: hidden !important;

src/containers/Rubric/Rubric.scss

@@ -1,20 +1,16 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .criteria-label {
   width: 100%;
   .criteria-title {
     display: inline-block;
     max-width: calc(100% - 44px);
-    color: $primary-500;
+    color: var(--pgn-color-primary-500);
     font-weight: bold;
     vertical-align: top;
   }
   .esg-help-icon {
     float: right;
-    margin-top: (map-get($spacers, 2) * -1);
-    margin-right: (map-get($spacers, 2\.5) * -1);
+    margin-top: calc(var(--pgn-spacing-spacer-2) * -1);
+    margin-right: calc(var(--pgn-spacing-spacer-2-5) * -1);
     vertical-align: top;
   }
 }
@@ -42,9 +38,9 @@
 
 .popover.overlay-help-popover {
   z-index: 4000;
-  margin-right: map-get($spacers, 1) !important;
+  margin-right: var(--pgn-spacing-spacer-1) !important;
   .help-popover-option {
-    margin-bottom: map-get($spacers, 1);
+    margin-bottom: var(--pgn-spacing-spacer-1);
   }
   .popover-body {
     max-height: 100vh;
@@ -57,15 +53,15 @@
   width: 320px !important;
   height: fit-content;
   max-height: 100%;
-  margin-left: map-get($spacers, 3);
+  margin-left: var(--pgn-spacing-spacer-3);
   position: sticky !important;
-  top: map-get($spacers, 1) * -1;
+  top: calc(var(--pgn-spacing-spacer-1) * -1);
 
   .grading-rubric-header {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .grading-rubric-body {
@@ -76,15 +72,15 @@
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
     opacity: .4 !important;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .grading-rubric-card {
     margin-left: 0 !important;
   }