feat: update MFE to use dynamically injected theme

Updates the MFE to use alpha version of frontend build, platform and paragon to
support runtime theming.

package.json

@@ -24,11 +24,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "^2.5.1",
-    "@edx/paragon": "^19.9.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.16",
+    "@edx/frontend-component-footer": "^12.6.0",
+    "@edx/frontend-component-header": "^4.10.1",
+    "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v6.2.0-pre-token-asu-moe/edx-frontend-platform-6.2.0.tgz",
+    "@edx/paragon": "22.0.0-alpha.13",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -73,7 +73,8 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "12.4",
+    "@edx/browserslist-config": "1.1.1",
+    "@edx/frontend-build": "github:open-craft/frontend-build#asu-moe/palm-css",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",

src/App.scss

@@ -1,15 +1,15 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+/* @import "~@edx/brand/paragon/fonts"; */
+/* @import "~@edx/brand/paragon/variables"; */
+/* @import "~@edx/paragon/scss/core/core"; */
+/* @import "~@edx/brand/paragon/overrides"; */
 
 $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-focus) !default;
 
-@import "~@edx/frontend-component-footer/dist/_footer";
+/* @import "~@edx/frontend-component-footer/dist/_footer"; */
 
 #root {
   display: flex;

src/components/FilePreview/FileCard.scss

@@ -1,7 +1,5 @@
-@import "@edx/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: 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 "@edx/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 "@edx/paragon/scss/core/core";
-
 .response-display {
-  padding: map-get($spacers, 0);
-  width: map-get($container-max-widths, "md");
+  padding: 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 "@edx/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-sm) {
   .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 "@edx/paragon/scss/core/core";
-
 .review-modal-body {
-  background-color: $gray-300 !important;
+  background-color: var(--pgn-color-gray-300) !important;
   padding: inherit;
 
   & > div.pgn__modal-body-content {
@@ -23,7 +21,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .review-modal-body {
     padding: 0 !important;
     overflow: hidden !important;
@@ -40,4 +38,4 @@
       width: 100%;
     }
   }
-}
+}

src/containers/Rubric/Rubric.scss

@@ -1,20 +1,16 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/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;
   }
 }
@@ -38,9 +34,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);
   }
 }
 
@@ -49,15 +45,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 {
@@ -68,16 +64,16 @@
     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;
-  } 
-}
+  }
+}