feat: support design tokens and paragon 23

.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.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-lib-special-exams": "^3.1.0",
+    "@edx/frontend-lib-special-exams": "^3.4.0",
     "@edx/frontend-platform": "8.3.5",
     "@edx/openedx-atlas": "^0.7.0",
     "@edx/react-unit-test-utils": "^3.0.0",
@@ -45,7 +45,7 @@
     "@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",
@@ -89,10 +89,10 @@
   },
   "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"
     }
   }
 }

src/components/Assessment/Assessment.scss

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

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

src/components/ModalContainer.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;

src/components/ProgressBar/index.scss

@@ -1,14 +1,12 @@
-@import '@openedx/paragon/scss/core/core';
-
 .ora-progress-nav-group {
-  max-width: $max-width-lg;
+  max-width: var(--pgn-size-container-max-width-lg);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: auto;
   .ora-progress-divider {
     position: absolute;
-    max-width: $max-width-lg;
+    max-width: var(--pgn-size-container-max-width-lg);
     width: 100%;
   }
   .ora-progress-nav {
@@ -48,21 +46,21 @@
     width: 100%;
     &.is-active {
       border: none;
-      background-color: $light;
+      background-color: var(--pgn-color-light-base);
     }
   }
   .nav-icon {
-    margin-left: map-get($spacers, 3);
+    margin-left: var(--pgn-spacing-spacer-3);
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .navbar-expand-lg .ora-progress-nav-group {
     @include navbar-collapse-definition;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .navbar-expand-md .ora-progress-nav-group {
     @include navbar-collapse-definition;
   }

src/components/Prompt/index.scss

@@ -1,3 +1,3 @@
 .prompt > pre {
   text-wrap: wrap;
-}
+}

src/components/Rubric/Rubric.scss

@@ -1,12 +1,8 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .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);
   }
 }
 
@@ -15,35 +11,35 @@
   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);
 
   .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);
   }
 
   .rubric-body {
     overflow-y: hide;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .rubric-footer {
     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) {
   .rubric-card {
     margin-left: 0 !important;
   } 

src/components/TextResponse/index.scss

@@ -7,4 +7,4 @@
   font-size: inherit;
   line-height: inherit;
   margin-bottom: 0;
-}
+}

src/index.scss

@@ -1,7 +1,5 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@openedx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
 
 #root {
   display: flex;
@@ -26,23 +24,23 @@
 }
 
 .gap-0 {
-  gap: map-get($spacers, 0);
+  gap: var(--pgn-spacing-spacer-0);
 }
 
 .gap-1 {
-  gap: map-get($spacers, 1);
+  gap: var(--pgn-spacing-spacer-1);
 }
 
 .gap-2 {
-  gap: map-get($spacers, 2);
+  gap: var(--pgn-spacing-spacer-2);
 }
 
 .gap-3 {
-  gap: map-get($spacers, 3);
+  gap: var(--pgn-spacing-spacer-3);
 }
 
 .gap-4 {
-  gap: map-get($spacers, 4);
+  gap: var(--pgn-spacing-spacer-4);
 } 
 .ora-icon svg {
   display: inline-block !important;
@@ -53,4 +51,4 @@
   top: 50%;
   left: 50%;
   scale: 3;
-}
+}

src/views/AssessmentView/BaseAssessmentView/BaseAssessmentView.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .assessment-content-layout {
   & > div.content-body {
     height: 100%;
@@ -12,15 +10,15 @@
   height: 100%;
 
   .content-wrapper {
-    max-width: $max-width-lg;
+    max-width: var(--pgn-size-container-max-width-lg);
   }
 
   .assessment-col {
     min-width: 300px;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .assessment-content-layout {
     .content-wrapper {
       width: 100%;

src/views/GradeView/index.scss

@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 .grade-view-body {
-  max-width: $max-width-lg;
+  max-width: var(--pgn-size-container-max-width-lg);
   flex-wrap: nowrap !important;
   gap: 1em;
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .grade-view-body {
     flex-wrap: wrap !important;
     gap: 0;

src/views/SubmissionView/index.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .assessment-content-layout {
   & > div.content-body {
     height: 100%;
@@ -12,15 +10,15 @@
   height: 100%;
 
   .content-wrapper {
-    max-width: $max-width-lg;
+    max-width: var(--pgn-size-container-max-width-lg);
   }
 }
 
 .ora-tinymce .tox-tinymce {
-  background-color: $white;
+  background-color: var(--pgn-color-white);
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .assessment-content-layout {
     .content-wrapper {
       width: 100%;

src/views/XBlockStudioView/index.scss

@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 #ora-xblock-studio-view {
   max-width: 1024px;
   display: flex;
   flex-direction: column;
-  gap: map-get($spacers, 3);
+  gap: var(--pgn-spacing-spacer-3);
 
-  @include media-breakpoint-down(md) {
+  @media (--pgn-size-breakpoint-max-width-md) {
     padding-left: 40px;
     padding-right: 40px;
   }