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.
open-craft · May 13, 2024 · 895ae62 · 895ae62
1 parent 3d7311d
commit 895ae62
Show file tree

Hide file tree

Showing 16 changed files with 4,239 additions and 6,280 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,12 +29,12 @@
     "url": "https://github.com/openedx/frontend-app-learning/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "^12.0.0",
-    "@edx/frontend-component-header": "^4.0.0",
-    "@edx/frontend-lib-special-exams": "^2.16.1",
-    "@edx/frontend-platform": "^4.2.0",
-    "@edx/paragon": "20.28.4",
+    "@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-lib-special-exams": "https://github.com/open-craft/frontend-lib-special-exams/releases/download/v2.16.2-tokens-release/edx-frontend-lib-special-exams-1.14.0.tgz",
+    "@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.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "^12.8.27",
+    "@edx/frontend-build": "github:open-craft/frontend-build#asu-moe/palm-css",
     "@edx/reactifex": "2.1.1",
     "@pact-foundation/pact": "9.17.3",
     "@testing-library/jest-dom": "5.16.5",

diff --git a/src/course-home/outline-tab/Section.scss b/src/course-home/outline-tab/Section.scss
@@ -1,6 +1,4 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+
 
 .section .collapsible-body {
   /* Internal SequenceLink components will have padding instead so when
@@ -11,5 +9,5 @@
 }
 
 .section-selected > .collapsible-trigger {
-  background-color: $light-300;
+  background-color: var(--pgn-color-light-300);
 }
diff --git a/src/course-home/outline-tab/SequenceLink.scss b/src/course-home/outline-tab/SequenceLink.scss
@@ -1,7 +1,3 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .sequence-link-selected {
-  background-color: $light-300;
+  background-color: var(--pgn-color-light-300);
 }
diff --git a/src/course-home/outline-tab/widgets/FlagButton.scss b/src/course-home/outline-tab/widgets/FlagButton.scss
@@ -1,22 +1,18 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .flag-button {
-  background-color: $white;
-  border: 1px solid $light-400;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-light-400);
   border-radius: .2rem;
-  box-shadow: 0 0 0 2px $light-400;
+  box-shadow: 0 0 0 2px var(--pgn-color-light-400);
 
   &:hover {
-    border: 1px solid $primary-300;
-    box-shadow: 0 0 0 2px $white;
+    border: 1px solid var(--pgn-color-primary-300);
+    box-shadow: 0 0 0 2px var(--pgn-color-white);
   }
 }
 
 .flag-button-selected {
-  border: 1px solid $primary-300;
-  box-shadow: 0 0 0 2px $primary-300;
+  border: 1px solid var(--pgn-color-primary-300);
+  box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
   pointer-events: none;
 }
 

diff --git a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss
@@ -1,10 +1,10 @@
 .outline-sidebar-proctoring-panel {
-  border: 1px solid $dark-500;
-  border-top: 5px solid $brand-600;
+  border: 1px solid var(--pgn-color-dark-500);
+  border-top: 5px solid var(--pgn-color-brand-600);
 }
 .proctoring-onboarding-success {
-  border-top: 5px solid $primary-500;
+  border-top: 5px solid var(--pgn-color-primary-500);
 }
 .proctoring-onboarding-submitted {
-  border-top: 5px solid $dark-500;
+  border-top: 5px solid var(--pgn-color-dark-500);
 }
diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss b/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
@@ -7,18 +7,18 @@
 
 .donut-chart-label {
   font: {
-    family: $font-family-sans-serif;
+    family: var(--pgn-typography-font-family-sans-serif);
     size: .2rem;
-    weight: $font-weight-normal;
+    weight: var(--pgn-typography-font-weight-normal);
   }
   text-anchor: middle;
 }
 
 .donut-chart-number {
   font: {
-    family: $font-family-monospace;
+    family: var(--pgn-typography-font-family-monospace);
     size: .5rem;
-    weight: $font-weight-bold;
+    weight: var(--pgn-typography-font-weight-bold);
   }
   line-height: 1rem;
   text-anchor: middle;
@@ -29,7 +29,7 @@
 }
 
 .donut-chart-text {
-  fill: $primary-500;
+  fill: var(--pgn-color-primary-500);
   -moz-transform: translateY(0.25em);
   -ms-transform: translateY(0.25em);
   -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $info-500;
+    stroke: var(--pgn-color-info-500);
   }
 
   &.divider-stroke {
@@ -65,10 +65,10 @@
   }
 
   &.incomplete-stroke {
-    stroke: $light-300;
+    stroke: var(--pgn-color-light-300);
   }
 
   &.locked-stroke {
-    stroke: $primary-500;
+    stroke: var(--pgn-color-primary-500);
   }
 }
diff --git a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss b/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
@@ -4,24 +4,24 @@
   }
 
   .grade-bar__base {
-    fill: $light-300;
+    fill: var(--pgn-color-light-300);
   }
 
   .grade-bar__divider {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
     width: 1px;
   }
 
   .grade-bar--passing {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
   }
 
   .grade-bar--current-passing {
-    fill: $success-500;
+    fill: var(--pgn-color-success-500);
   }
 
   .grade-bar--current-non-passing {
-    fill: $accent-b;
+    fill: var(--pgn-color-accent-b);
   }
 }
 
@@ -31,22 +31,22 @@
 
 #minimum-grade-tooltip {
   .arrow::after {
-    border-bottom-color: $primary-500;
+    border-bottom-color: var(--pgn-color-primary-500);
   }
 }
 
 #passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $success-500;
+    border-top-color: var(--pgn-color-success-500);
   }
 
-  background: $success-500;
+  background: var(--pgn-color-success-500);
 }
 
 #non-passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $accent-b;
+    border-top-color: var(--pgn-color-accent-b);
   }
 
-  background: $accent-b;
+  background: var(--pgn-color-accent-b);
 }
diff --git a/src/courseware/course/celebration/CelebrationModal.scss b/src/courseware/course/celebration/CelebrationModal.scss
@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }

diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx
@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
+import { ModalDialog } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React, {
   Suspense, useCallback, useContext, useEffect, useLayoutEffect, useState,
@@ -196,29 +196,27 @@ const Unit = ({
         <ErrorPage />
       )}
       {modalOptions.open && (
-        <Modal
-          body={(
-            <>
-              {modalOptions.body
-                ? <div className="unit-modal">{ modalOptions.body }</div>
-                : (
-                  <iframe
-                    title={modalOptions.title}
-                    allow={IFRAME_FEATURE_POLICY}
-                    frameBorder="0"
-                    src={modalOptions.url}
-                    style={{
-                      width: '100%',
-                      height: '100vh',
-                    }}
-                  />
-                )}
-            </>
-          )}
+        <ModalDialog
           onClose={() => { setModalOptions({ open: false }); }}
-          open
-          dialogClassName="modal-lti"
-        />
+          isOpen={modalOptions.open}
+        >
+          <ModalDialog.Body className="modal-lti">
+            {modalOptions.body
+              ? <div className="unit-modal">{ modalOptions.body }</div>
+              : (
+                <iframe
+                  title={modalOptions.title}
+                  allow={IFRAME_FEATURE_POLICY}
+                  frameBorder="0"
+                  src={modalOptions.url}
+                  style={{
+                    width: '100%',
+                    height: '100vh',
+                  }}
+                />
+              )}
+          </ModalDialog.Body>
+        </ModalDialog>
       )}
       {!shouldDisplayHonorCode && (
         <div className="unit-iframe-wrapper">

diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
@@ -4,7 +4,7 @@
 }
 
 .lock-paywall-container svg {
-    color: $primary-700;
+    color: var(--pgn-color-primary-700);
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1100px) {

diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss
@@ -7,11 +7,11 @@
 }
 
 .upsell-warning {
-  background-color: $danger-100;
+  background-color: var(--pgn-color-danger-100);
 }
 
 .upsell-warning-light {
-  background-color: $warning-100;
+  background-color: var(--pgn-color-warning-100);
 }
 
 .upsell-warning, .upsell-warning-light {
@@ -37,7 +37,7 @@
 }
 
 .discount-info {
-  border-top: 1px solid $light-400;
+  border-top: 1px solid var(--pgn-color-light-400);
   padding-top: .75rem;
   padding-bottom: .75rem;
 }
diff --git a/src/generic/upsell-bullets/UpsellBullets.scss b/src/generic/upsell-bullets/UpsellBullets.scss
@@ -8,6 +8,6 @@
 }
 
 .upsell-bullet a {
-  color: $primary-500;
+  color: var(--pgn-color-primary-500);
 }