feat: add support for design tokens and CSS variables

package.json

@@ -29,13 +29,13 @@
     "url": "https://github.com/openedx/frontend-app-learning/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.16",
     "@edx/frontend-component-footer": "12.0.0",
     "@edx/frontend-component-header": "4.0.0",
     "@edx/frontend-lib-learning-assistant": "^1.11.1",
     "@edx/frontend-lib-special-exams": "2.20.1",
-    "@edx/frontend-platform": "4.3.0",
-    "@edx/paragon": "20.46.0",
+    "@edx/frontend-platform": "github:openedx/frontend-platform#ags/inject-theme-css",
+    "@edx/paragon": "22.0.0-alpha.1",
     "@edx/react-unit-test-utils": "npm:@edx/[email protected]",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -51,8 +51,8 @@
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",
     "query-string": "^7.1.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "5.2.1",
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "^12.8.27",
+    "@edx/frontend-build": "github:openedx/frontend-build#ags/2321",
     "@edx/reactifex": "2.2.0",
     "@pact-foundation/pact": "^11.0.2",
     "@testing-library/jest-dom": "5.16.5",

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;
 }
 

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);
 }

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);
   }
 }

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);
 }

src/courseware/course/celebration/CelebrationModal.scss

@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }

src/courseware/course/sequence/Unit/ContentIFrame.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
-import { Modal } from '@edx/paragon';
+import { ModalDialog } from '@edx/paragon';
 
 import PageLoading from '../../../../generic/PageLoading';
 import * as hooks from './hooks';
@@ -75,22 +75,21 @@ const ContentIFrame = ({
         </div>
       )}
       {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' }}
-              />
-            )}
-          dialogClassName="modal-lti"
-          onClose={handleModalClose}
-          open
-        />
+        <ModalDialog className="modal-lti" onClose={handleModalClose} isOpen={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>
       )}
     </>
   );

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) {

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;
 }

src/generic/upsell-bullets/UpsellBullets.scss

@@ -8,6 +8,6 @@
 }
 
 .upsell-bullet a {
-  color: $primary-500;
+  color: var(--pgn-color-primary-500);
 }