feat: update MFE to use dynamically injected theme

package.json

@@ -32,14 +32,14 @@
     "url": "https://github.com/openedx/frontend-app-authn/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "7.1.3",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17",
+    "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v7.1.2-token-asu-moe/edx-frontend-platform-7.1.2.tgz",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/paragon": "^22.1.1",
+    "@openedx/paragon": "23.0.0-alpha.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
     "@testing-library/react": "^12.1.5",
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "13.1.4",
+    "@openedx/frontend-build": "github:open-craft/frontend-build#asu-moe/redwood-css",
     "babel-plugin-formatjs": "10.5.14",
     "eslint-plugin-import": "2.29.1",
     "glob": "7.2.3",

src/index.scss

@@ -1,6 +1,9 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+/* @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.css" as paragonCustomMediaBreakpoints;
+@use "@edx/brand/paragon/css/core/custom-media-breakpoints.css" as brandCustomMediaBreakpoints;
 
 @import "sass/style";

src/sass/_base_component.scss

@@ -2,19 +2,19 @@
 .layout {
   display: flex;
 
-  @include media-breakpoint-down('lg') {
+  @media (--pgn-size-breakpoint-max-width-lg) {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  @include media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
     justify-content: space-between;
   }
 }
 
 .content {
-  @include media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
     display: flex;
     justify-content: center;
     width: 50vw;
@@ -47,7 +47,7 @@
   font-weight: 700;
   line-height: 1;
 
-  @include media-breakpoint-down('xl') {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     font-size: 3.75rem;
   }
 
@@ -60,7 +60,7 @@
   margin-bottom: 0.5rem;
   font-weight: 700;
 
-  @include media-breakpoint-down('xl') {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     font-size: 1.375rem;
     line-height: 1.75rem;
   }
@@ -72,7 +72,7 @@
 }
 
 .large-screen-left-container {
-  @include media-breakpoint-down('xl') {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     flex: 0 0 25%;
     max-width: 25%;
   }
@@ -87,89 +87,89 @@
   height: 0.25rem;
   background-image: linear-gradient(
     102.02deg,
-    $brand-700,
-    $brand-700 20%,
-    $brand 20%,
+    var(--pgn-color-brand-700),
+    var(--pgn-color-brand-700) 20%,
+    var(--pgn-color-brand-base) 20%,
   );
   background-repeat: no-repeat;
 }
 
-@include media-breakpoint-only('md') {
+@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      $brand-700,
-      $brand-700 10%,
-      $brand 10%,
-      $brand 90%,
-      $primary-700 90%,
-      $primary-700 100%,
+      var(--pgn-color-brand-700),
+      var(--pgn-color-brand-700) 10%,
+      var(--pgn-color-brand-base) 10%,
+      var(--pgn-color-brand-base) 90%,
+      var(--pgn-color-primary-700) 90%,
+      var(--pgn-color-primary-700) 100%,
     );
     background-repeat: no-repeat;
   }
 }
 
-@include media-breakpoint-only('lg') {
+@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg) {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      $brand-700 10%,
-      $brand 10%,
-      $brand 65%,
-      $primary-700 65%,
-      $primary-700 75%,
-      $accent-a 75%,
-      $accent-a 75%
+      var(--pgn-color-brand-700) 10%,
+      var(--pgn-color-brand-base) 10%,
+      var(--pgn-color-brand-base) 65%,
+      var(--pgn-color-primary-700) 65%,
+      var(--pgn-color-primary-700) 75%,
+      var(--pgn-color-accent-a) 75%,
+      var(--pgn-color-accent-a) 75%
     );
     background-repeat: no-repeat;
   }
 }
 
 .extra-large-screen-top-stripe { display: none; }
 
-@include media-breakpoint-up('xl') {
+@media (--pgn-size-breakpoint-min-width-xl) {
  .extra-large-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-     $brand-700 10%,
-     $brand 10%,
-     $brand 45%,
-     $primary-700 45%,
-     $primary-700 55%,
-     $accent-a 55%,
-     $accent-a 75%,
-     $info-200 75%,
+     var(--pgn-color-brand-700) 10%,
+     var(--pgn-color-brand-base) 10%,
+     var(--pgn-color-brand-base) 45%,
+     var(--pgn-color-primary-700) 45%,
+     var(--pgn-color-primary-700) 55%,
+     var(--pgn-color-accent-a) 55%,
+     var(--pgn-color-accent-a) 75%,
+     var(--pgn-color-info-200) 75%,
   );
    background-repeat: no-repeat;
  }
 }
 
 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: $light-200;
+  fill: var(--pgn-color-light-200);
   overflow: hidden;
   position: absolute;
 }
 
 .large-screen-svg-primary {
-  fill: $primary-400;
+  fill: var(--pgn-color-primary-400);
 }
 
 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: $light-200;
+  fill: var(--pgn-color-light-200);
   overflow: inherit;
   position: absolute;
 }
 
 .medium-screen-svg-primary {
-  fill: $primary-400;
+  fill: var(--pgn-color-primary-400);
 }
 
 [dir=rtl]{
@@ -184,20 +184,20 @@
 .small-yellow-line {
   width: 80px;
   height: 0;
-  border: 2px solid $accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
   transform: rotate(102.02deg);
 }
 
 .medium-yellow-line {
   width: 120px;
   height: 0;
-  border: 3px solid $accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
   transform: rotate(102.02deg);
 }
 
 .large-yellow-line {
   width: 240px;
   height: 0;
-  border: 3px solid $accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
   transform: rotate(102.02deg);
 }

src/sass/_progressive_profiling_page.scss

@@ -11,7 +11,7 @@
     margin-bottom: 0.5rem;
     font-weight: 700;
 
-    @include media-breakpoint-down('md') {
+    @media (--pgn-size-breakpoint-max-width-md) {
       line-height: 1.5rem;
       font-size: 1.125rem;
     }

src/sass/_recommendations_card_base.scss

@@ -64,52 +64,52 @@ $header-height: 104px;
   }
 
   &.light {
-    background-color: $white;
+    background-color: var(--pgn-color-white);
 
     .title {
-      color: $black;
+      color: var(--pgn-color-black);
     }
 
     .subtitle {
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
     }
 
     .badge {
-      background-color: $light-500;
-      color: $black;
+      background-color: var(--pgn-color-light-500);
+      color: var(--pgn-color-black);
     }
 
     .footer-content {
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
     }
   }
 
   &.dark {
-    background-color: $primary-500;
+    background-color: var(--pgn-color-primary-500);
 
     .pgn__card-header-title-md {
-      color: $white;
+      color: var(--pgn-color-white);
     }
 
     .pgn__card-header-subtitle-md {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
     }
 
     .title {
-      color: $white;
+      color: var(--pgn-color-white);
     }
 
     .subtitle {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
     }
 
     .badge {
-      background-color: $dark-200;
-      color: $white;
+      background-color: var(--pgn-color-dark-200);
+      color: var(--pgn-color-white);
     }
 
     .footer-content {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
     }
   }
 }

src/sass/_recommendations_page.scss

@@ -3,23 +3,23 @@ $card-gap: 24px;
 .recommendations-container__card-list {
   gap: $card-gap $card-gap;
 
-  @include media-breakpoint-down(sm) {
+  @media (--pgn-size-breakpoint-max-width-sm) {
     margin-bottom: 0 !important;
   }
 
   .recommendation-card {
     flex: 0 1 100%;
     cursor: pointer;
 
-    @include media-breakpoint-up(sm) {
+    @media (--pgn-size-breakpoint-min-width-sm) {
       flex: 0 1 calc(50% - #{$card-gap - 12});
     }
 
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       flex: 0 1 calc(33.333% - #{$card-gap - 8});
     }
 
-    @include media-breakpoint-up(lg) {
+    @media (--pgn-size-breakpoint-min-width-lg) {
       flex: 0 1 calc(25% - #{$card-gap - 6});
     }
   }

src/sass/_registration.scss

@@ -23,21 +23,21 @@
   }
 
   .alert-link  {
-    color: $primary !important;
+    color: var(--pgn-color-primary-base) !important;
 
     &:hover {
       text-decoration: underline;
-      color: $info-700 !important;
+      color: var(--pgn-color-info-700) !important;
     }
   }
 }
 
 .email-suggestion-alert-warning {
-  color: $info-500 !important;
+  color: var(--pgn-color-info-500) !important;
 
   &:hover {
     text-decoration: underline;
-    color: $info-700 !important;
+    color: var(--pgn-color-info-700) !important;
   }
 }
 
@@ -56,7 +56,7 @@
   line-height: 24px;
   font-size: 12px;
   font-weight: normal;
-  color: $primary-700;
+  color: var(--pgn-color-primary-700);
 }
 
 .username-suggestion--label {
@@ -99,7 +99,7 @@
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (--pgn-size-breakpoint-max-width-xs) {
   .username-scroll-suggested--form-field {
     width: 15rem;
   }