feat!: add design tokens support (#556)

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

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

Author: brian-smith-tcril

.env

@@ -23,3 +23,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ENABLE_VERIFIABLE_CREDENTIALS=''
 SUPPORT_URL_VERIFIABLE_CREDENTIALS=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -24,3 +24,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ENABLE_VERIFIABLE_CREDENTIALS='true'
 SUPPORT_URL_VERIFIABLE_CREDENTIALS=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -20,3 +20,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL_LEARNER_RECORDS=''
 ENABLE_VERIFIABLE_CREDENTIALS='true'
 SUPPORT_URL_VERIFIABLE_CREDENTIALS=''
+PARAGON_THEME_URLS={}

package-lock.json

@@ -44,8 +44,8 @@
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-plugin-framework": "^1.2.0",
-    "@openedx/paragon": "^22.2.2",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/paragon": "^23.4.2",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "babel-polyfill": "6.26.0",

package.json

@@ -1,20 +1,23 @@
 .program-record-wrapper {
-    @extend .my-4\.5;
+    margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important;
 
     .back-to-records:hover {
         background: none;
     }
 
     .program-record-nav {
-        @extend .d-flex, .justify-content-between, .mb-3;
+        display: flex !important;
+        justify-content: space-between !important;
+        margin-bottom: var(--pgn-spacing-spacer-base) !important;
 
         .program-record-actions {
-            @extend .d-flex;
+            display: flex !important;
             gap: 0.5rem;
         }
 
         .download-record {
-            @extend .d-flex, .flex-row-reverse;
+            display: flex !important;
+            flex-direction: row-reverse !important;
         }
     }
 
@@ -23,15 +26,17 @@
         .program-record-header {
 
             .program-headings {
-                @extend .d-flex, .justify-content-between;
-                color: $primary-500;
+                display: flex !important;
+                justify-content: space-between !important;
+                color: var(--pgn-color-primary-500);
 
                 h4 {
                     color: inherit;
                 }
 
                 .program-title {
-                    @extend .d-flex, .flex-column;
+                    display: flex !important;
+                    flex-direction: column !important;
 
                     .heading-label {
                         text-transform: capitalize;
@@ -44,20 +49,22 @@
             }
 
             .program-status {
-                @extend .d-flex, .align-items-center;
+                display: flex !important;
+                align-items: center !important;
                 gap: 0.5rem;
 
                 span.badge {
-                    @extend .d-flex;
+                    display: flex !important;
                 }
 
                 span.updated {
-                    @extend .small;
+                    font-size: var(--pgn-typography-font-size-sm);
+                    font-weight: var(--pgn-typography-font-weight-normal);
                 }
             }
 
             .learner-info {
-                @extend .d-flex;
+                display: flex !important;
                 gap: 0.25rem;
             }
         }
@@ -68,6 +75,6 @@
     }
 
     .help {
-        color: $primary-500;
+        color: var(--pgn-color-primary-500);
     }
 }

src/components/ProgramRecord/ProgramRecord.scss

@@ -1,17 +1,20 @@
 .send-record-modal {
-    @extend .d-flex, .flex-column;
+    display: flex !important;
+    flex-direction: column !important;
 
     > div:nth-child(2) {
-        @extend .d-flex, .flex-column;
-        color: $primary-500;
+        display: flex !important;
+        flex-direction: column !important;
+        color: var(--pgn-color-primary-500);
     }
 
     > div:nth-child(3) {
         overflow: hidden;
     }
 
     .checkbox-group {
-        @extend .d-flex, .flex-column;
+        display: flex !important;
+        flex-direction: column !important;
 
         > div {
             width: 100%;

src/components/ProgramRecordSendModal/SendLearnerRecordModal.scss

@@ -1,7 +1,4 @@
-@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" as paragonCustomMediaBreakpoints;
 
 @import './components/index.scss';
 

src/index.scss

@@ -15,6 +15,7 @@ import messages from './i18n';
 jest.mock('@edx/frontend-platform/react/hooks', () => ({
   ...jest.requireActual('@edx/frontend-platform/react/hooks'),
   useTrackColorSchemeChoice: jest.fn(),
+  useParagonTheme: () => [{ isThemeLoaded: true }, jest.fn()],
 }));
 
 mergeConfig(envConfig);