feat!: add design tokens support (#665)

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

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

Author: brian-smith-tcril

.env

@@ -42,3 +42,5 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -48,3 +48,5 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -47,3 +47,4 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=true
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+PARAGON_THEME_URLS={}

package-lock.json

@@ -41,7 +41,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/paragon": "^23.4.5",
     "@redux-devtools/extension": "3.3.0",
     "@reduxjs/toolkit": "^2.0.0",
     "classnames": "^2.3.1",

package.json

@@ -1,13 +1,10 @@
 // frontend-app-*/src/index.scss
-@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;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";

src/App.scss

@@ -1,10 +1,8 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-card {
   .card {
     .pgn__card-wrapper-image-cap.vertical {
       display: flex;
-      min-height: $card-image-vertical-max-height;
+      min-height: var(--pgn-size-card-image-vertical-max-height);
     }
     .pgn__card-image-cap {
       border-bottom-left-radius: 0 !important;
@@ -53,11 +51,11 @@
     > .alert {
       border-radius: 0;
       box-shadow: none;
-      padding: map-get($spacers, 3) map-get($spacers, 4);
+      padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
 
       &:last-of-type {
-        border-bottom-left-radius: $alert-border-radius;
-        border-bottom-right-radius: $alert-border-radius;
+        border-bottom-left-radius: var(--pgn-size-alert-border-radius);
+        border-bottom-right-radius: var(--pgn-size-alert-border-radius);
       }
     }
 

src/containers/CourseCard/CourseCard.scss

@@ -1,7 +1,3 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 a.course-card-title {
-  color: $black;
+  color: var(--pgn-color-black);
 }

src/containers/CourseCard/components/CourseCardDetails/index.scss

@@ -1,15 +1,13 @@
-@import "@openedx/paragon/scss/core/core";
-
 #no-courses-content-view {
-  border: 2px solid $light-400;
+  border: 2px solid var(--pgn-color-light-400);
   flex-direction: column;
-  padding-bottom: map-get($spacers, 5);
-  padding-top: map-get($spacers, 5);
+  padding-bottom: var(--pgn-spacing-spacer-5);
+  padding-top: var(--pgn-spacing-spacer-5);
   height: 100%;
 
   & > * {
-    margin-top: map-get($spacers, 3);
-    margin-bottom: map-get($spacers, 3);
+    margin-top: var(--pgn-spacing-spacer-3);
+    margin-bottom: var(--pgn-spacing-spacer-3);
   }
 }
 

src/containers/CoursesPanel/NoCoursesView/index.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-list-heading-container {
   display: flex;
   flex-direction: row;
@@ -8,8 +6,8 @@
 }
 
 .course-list-title {
-  font-size: $h2-font-size;
-  margin: map-get($spacers, 3) 0;
+  font-size: var(--pgn-typography-font-size-h2-base);
+  margin: var(--pgn-spacing-spacer-3) 0;
 }
 
 .course-list-loading {
@@ -24,7 +22,7 @@
   align-self: center;
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .course-list-heading-container {
     flex-direction: column-reverse;
     align-items: flex-start;
@@ -36,7 +34,7 @@
   }
 
   .course-list-title {
-    font-size: $h3-font-size;
-    margin: map-get($spacers, 2) 0;
+    font-size: var(--pgn-typography-font-size-h3-base);
+    margin: var(--pgn-spacing-spacer-2) 0;
   }
 }