feat!: add design tokens support (#1220)

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

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

Author: brian-smith-tcril

.env

@@ -29,3 +29,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -30,3 +30,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER_PROFILE=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -25,3 +25,4 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

package-lock.json

@@ -39,7 +39,7 @@
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^22.17.0",
+    "@openedx/paragon": "^23.4.5",
     "@pact-foundation/pact": "^11.0.2",
     "@redux-devtools/extension": "3.3.0",
     "classnames": "2.5.1",

package.json

@@ -1,7 +1,5 @@
-@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 "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 

src/index.scss

@@ -28,7 +28,7 @@
   position: absolute;
   left: 1.5rem;
   top: 5.25rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
   line-height: 0.9rem;
   font-size: 0.8rem;
   font-style: normal;
@@ -42,24 +42,24 @@
 
 .icon-visibility-off {
   height: 1rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
 }
 
 .profile-page {
   .edit-section-header {
-    @extend .h6;
+    font-size: var(--pgn-typography-font-size-h6-base);
     display: block;
     font-weight: normal;
     letter-spacing: 0;
     margin: 0;
   }
 
   label.edit-section-header {
-    margin-bottom: $spacer * .5;
+    margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5);
   }
 
   .profile-avatar-wrap {
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       max-width: 12rem;
       margin-right: 0;
       margin-top: -8rem;
@@ -77,25 +77,25 @@
     align-items: center;
     border-radius: 50%;
 
-    @include media-breakpoint-up(md) {
+     @media (--pgn-size-breakpoint-min-width-md) {
       background: linear-gradient(to top, rgba(0,0,0,.65) 4rem, rgba(0,0,0,0) 4rem);
       align-items: flex-end;
     }
 
     .btn {
       text-decoration: none;
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         margin-bottom: 1.2rem;
       }
     }
 
     .dropdown {
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         margin-bottom: 1.2rem;
       }
 
       .btn {
-        color: $white;
+        color: var(--pgn-color-white);
         background: transparent;
         border-color: transparent;
         margin: 0;
@@ -108,7 +108,7 @@
     height: 5rem;
     position: relative;
 
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       width: 12rem;
       height: 12rem;
     }
@@ -128,7 +128,7 @@
       border-radius:0;
       transition: opacity 200ms ease;
 
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         height: 4rem;
       }
 
@@ -142,7 +142,7 @@
     position: relative;
 
     .certificate-title {
-      font-family: $font-family-serif;
+      font-family: var(--pgn-typography-font-family-serif);
       font-weight: 400;
     }