feat!: add design tokens support (#314)

BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

Co-authored-by: Diana Olarte <[email protected]>

Author: brian-smith-tcril

.env

@@ -22,3 +22,5 @@ USER_INFO_COOKIE_NAME=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
 HOTJAR_SITE_ID=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -23,3 +23,5 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 APP_ID=''
 MFE_CONFIG_API_URL=''
 HOTJAR_SITE_ID='0'
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -21,3 +21,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 APP_ID=''
 MFE_CONFIG_API_URL=''
 HOTJAR_SITE_ID='0'
+PARAGON_THEME_URLS={}

package-lock.json

@@ -34,8 +34,8 @@
     "url": "https://github.com/edx/frontend-app-ora/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-[email protected].3",
-    "@edx/frontend-lib-special-exams": "^3.1.0",
+    "@edx/brand": "npm:@openedx/brand-[email protected].3",
+    "@edx/frontend-lib-special-exams": "^3.4.0",
     "@edx/frontend-platform": "8.4.0",
     "@edx/openedx-atlas": "^0.7.0",
     "@edx/react-unit-test-utils": "^3.0.0",
@@ -45,12 +45,12 @@
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^21.13.1",
+    "@openedx/paragon": "^23.4.2",
     "@reduxjs/toolkit": "^1.9.7",
     "@tanstack/react-query": "^4.29.25",
     "@tanstack/react-query-devtools": "^4.35.3",
     "@tinymce/tinymce-react": "3.14.0",
-    "@zip.js/zip.js": "^2.7.30",
+    "@zip.js/zip.js": "^2.7.62",
     "axios": "^1.5.1",
     "classnames": "^2.3.2",
     "core-js": "3.42.0",
@@ -85,14 +85,14 @@
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest": "^29.7.0",
-    "ts-jest": "^29.1.4"
+    "ts-jest": "^29.4.0"
   },
   "overrides": {
     "@edx/frontend-lib-special-exams": {
-      "@openedx/paragon": "21.13.1"
+      "@openedx/paragon": "^23.4.2"
     },
     "@edx/frontend-platform": {
-      "@openedx/paragon": "21.13.1"
+      "@openedx/paragon": "^23.4.2"
     }
   }
 }

package.json

@@ -1,38 +1,34 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .assessment-card {
   max-width: 320px !important;
   height: fit-content;
   max-height: 100%;
   position: sticky !important;
-  top: map-get($spacers, 1) * -1;
+  top: calc( var(--pgn-spacing-spacer-1) * -1);
 
   .assessment-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);
   }
 
   .assessment-body {
     overflow-y: hide;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .assessment-footer {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     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) {
   .assessment-card {
     margin-left: 0 !important;
     width: 100% !important;

src/components/Assessment/Assessment.scss

@@ -1,19 +1,15 @@
-@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 {
-    margin-top: (map-get($spacers, 1\.5) * -1);
-    margin-right: (map-get($spacers, 2\.5) * -1);
+    margin-top: calc( var(--pgn-spacing-spacer-1-5) * -1);
+    margin-right: calc( var(--pgn-spacing-spacer-2-5) * -1);
     vertical-align: top;
   }
 }

src/components/CriterionContainer/CriterionContainer.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/components/FilePreview/components/FileRenderer/FileCard/FileCard.scss

@@ -5,4 +5,4 @@
   vertical-align: middle;
   overflow: hidden;
   white-space: nowrap;
-}
+}

src/components/FileUpload/styles.scss

@@ -1,14 +1,10 @@
-@import '@edx/brand/paragon/variables.scss';
-@import '@openedx/paragon/scss/core/core.scss';
-@import '@edx/brand/paragon/overrides.scss';
-
 .ora-modal-body {
-  min-height: calc(100vh - 20px - 64px - (map-get($spacers, 2) * 8));
+  min-height: calc(100vh - 20px - 64px - calc(var(--pgn-spacing-spacer-2) * 8));
   height: 100%;
 }
 
 .exam-timer {
-  max-width: $max-width-lg;
+  max-width: var(--pgn-size-container-max-width-lg);
   margin: auto;
   button {
     display: none;