feat!: add design tokens support (#1504)

BREAKING CHANGE: Pre-design-tokens theming is no longer supported. Co-authored-by: Diana Olarte <diana.olarte@edunext.co>
2025-06-18 14:29:11 -04:00
parent 486d0bfd37
commit da5a2e31b6
12 changed files with 7396 additions and 2549 deletions
--- a/.env
+++ b/.env
@@ -41,3 +41,5 @@ BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -41,3 +41,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -18,3 +18,4 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -36,12 +36,12 @@
    "@fortawesome/free-brands-svg-icons": "6.7.2",
    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/paragon": "^23.4.2",
    "@optimizely/react-sdk": "^2.9.1",
    "@redux-devtools/extension": "3.3.0",
    "@testing-library/react": "^16.2.0",
    "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.14.0",
+    "algoliasearch-helper": "^3.26.0",
    "classnames": "2.5.1",
    "core-js": "3.43.0",
    "fastest-levenshtein": "1.0.16",
@@ -69,12 +69,13 @@
  "devDependencies": {
    "@edx/browserslist-config": "^1.1.1",
    "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^14.4.2",
+    "@openedx/frontend-build": "^14.6.1",
    "babel-plugin-formatjs": "10.5.39",
    "eslint-plugin-import": "2.31.0",
    "glob": "7.2.3",
    "history": "5.3.0",
    "jest": "30.0.0",
-    "react-test-renderer": "^18.3.1"
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.4.0"
  }
 }
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,2 @@
-@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 "sass/style";
--- a/src/sass/_base_component.scss
+++ b/src/sass/_base_component.scss
@@ -2,19 +2,19 @@
 .layout {
  display: flex;

-  @include media-breakpoint-down('lg') {
+  @media (--pgn-size-breakpoint-max-width-lg) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

-  @include media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
    justify-content: space-between;
  }
 }

 .content {
-  @include media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
    display: flex;
    justify-content: center;
    width: 50vw;
@@ -47,7 +47,7 @@
  font-weight: 700;
  line-height: 1;

-  @include media-breakpoint-down('xl') {
+  @media (--pgn-size-breakpoint-max-width-xl) {
    font-size: 3.75rem;
  }

@@ -60,7 +60,7 @@
  margin-bottom: 0.5rem;
  font-weight: 700;

-  @include media-breakpoint-down('xl') {
+  @media (-pgn-size-breakpoint-max-width-xl) {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }
@@ -72,7 +72,7 @@
 }

 .large-screen-left-container {
-  @include media-breakpoint-down('xl') {
+  @media (-pgn-size-breakpoint-max-width-xl) {
    flex: 0 0 25%;
    max-width: 25%;
  }
@@ -87,43 +87,43 @@
  height: 0.25rem;
  background-image: linear-gradient(
    102.02deg,
-    $brand-700,
-    $brand-700 20%,
-    $brand 20%,
+    var(--pgn-color-brand-700),
+    var(--pgn-color-brand-700) 20%,
+    var(--pgn-color-brand-base) 20%,
  );
  background-repeat: no-repeat;
 }

-@include media-breakpoint-only('md') {
+@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
  .medium-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-      $brand-700,
-      $brand-700 10%,
-      $brand 10%,
-      $brand 90%,
-      $primary-700 90%,
-      $primary-700 100%,
+      var(--pgn-color-brand-700),
+      var(--pgn-color-brand-700) 10%,
+      var(--pgn-color-brand-base) 10%,
+      var(--pgn-color-brand-base) 90%,
+      var(--pgn-color-primary-700) 90%,
+      var(--pgn-color-primary-700) 100%,
    );
    background-repeat: no-repeat;
  }
 }

-@include media-breakpoint-only('lg') {
+@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
  .medium-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-      $brand-700 10%,
-      $brand 10%,
-      $brand 65%,
-      $primary-700 65%,
-      $primary-700 75%,
-      $accent-a 75%,
-      $accent-a 75%
+      var(--pgn-color-brand-700) 10%,
+      var(--pgn-color-brand-base) 10%,
+      var(--pgn-color-brand-base) 65%,
+      var(--pgn-color-primary-700) 65%,
+      var(--pgn-color-primary-700) 75%,
+      var(--pgn-color-accent-a) 75%,
+      var(--pgn-color-accent-a) 75%
    );
    background-repeat: no-repeat;
  }
@@ -131,20 +131,20 @@

 .extra-large-screen-top-stripe { display: none; }

-@include media-breakpoint-up('xl') {
+@media (--pgn-size-breakpoint-min-width-xl) {
 .extra-large-screen-top-stripe {
   display: flex;
   height: 0.5rem;
   background-image: linear-gradient(
     102.02deg,
-     $brand-700 10%,
-     $brand 10%,
-     $brand 45%,
-     $primary-700 45%,
-     $primary-700 55%,
-     $accent-a 55%,
-     $accent-a 75%,
-     $info-200 75%,
+     var(--pgn-color-brand-700) 10%,
+     var(--pgn-color-brand-base) 10%,
+     var(--pgn-color-brand-base) 45%,
+     var(--pgn-color-primary-700) 45%,
+     var(--pgn-color-primary-700) 55%,
+     var(--pgn-color-accent-a) 55%,
+     var(--pgn-color-accent-a) 75%,
+     var(--pgn-color-info-200) 75%,
  );
   background-repeat: no-repeat;
 }
@@ -152,24 +152,24 @@

 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: $light-200;
+  fill: var(--pgn-color-light-200);
  overflow: hidden;
  position: absolute;
 }

 .large-screen-svg-primary {
-  fill: $primary-400;
+  fill: var(--pgn-color-primary-400);
 }

 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: $light-200;
+  fill: var(--pgn-color-light-200);
  overflow: inherit;
  position: absolute;
 }

 .medium-screen-svg-primary {
-  fill: $primary-400;
+  fill: var(--pgn-color-primary-400);
 }

 [dir=rtl]{
@@ -184,20 +184,20 @@
 .small-yellow-line {
  width: 80px;
  height: 0;
-  border: 2px solid $accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
  transform: rotate(102.02deg);
 }

 .medium-yellow-line {
  width: 120px;
  height: 0;
-  border: 3px solid $accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
  transform: rotate(102.02deg);
 }

 .large-yellow-line {
  width: 240px;
  height: 0;
-  border: 3px solid $accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
  transform: rotate(102.02deg);
 }
--- a/src/sass/_progressive_profiling_page.scss
+++ b/src/sass/_progressive_profiling_page.scss
@@ -11,7 +11,7 @@
    margin-bottom: 0.5rem;
    font-weight: 700;

-    @include media-breakpoint-down('md') {
+    @media (--pgn-size-breakpoint-max-width-md) {
      line-height: 1.5rem;
      font-size: 1.125rem;
    }
--- a/src/sass/_recommendations_card_base.scss
+++ b/src/sass/_recommendations_card_base.scss
@@ -64,52 +64,52 @@ $header-height: 104px;
  }

  &.light {
-    background-color: $white;
+    background-color: var(--pgn-color-white);

    .title {
-      color: $black;
+      color: var(--pgn-color-black);
    }

    .subtitle {
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
    }

    .badge {
-      background-color: $light-500;
-      color: $black;
+      background-color: var(--pgn-color-light-500);
+      color: var(--pgn-color-black);
    }

    .footer-content {
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
    }
  }

  &.dark {
-    background-color: $primary-500;
+    background-color: var(--pgn-color-primary-500);

    .pgn__card-header-title-md {
-      color: $white;
+      color: var(--pgn-color-white);
    }

    .pgn__card-header-subtitle-md {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
    }

    .title {
-      color: $white;
+      color: var(--pgn-color-white);
    }

    .subtitle {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
    }

    .badge {
-      background-color: $dark-200;
-      color: $white;
+      background-color: var(--pgn-color-dark-200);
+      color: var(--pgn-color-white);
    }

    .footer-content {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
    }
  }
 }
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -3,7 +3,7 @@ $card-gap: 24px;
 .recommendations-container__card-list {
  gap: $card-gap $card-gap;

-  @include media-breakpoint-down(sm) {
+  @media (-pgn-size-breakpoint-max-width-sm) {
    margin-bottom: 0 !important;
  }

@@ -11,15 +11,15 @@ $card-gap: 24px;
    flex: 0 1 100%;
    cursor: pointer;

-    @include media-breakpoint-up(sm) {
+    @media (--pgn-size-breakpoint-min-width-sm) {
      flex: 0 1 calc(50% - #{$card-gap - 12});
    }

-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
      flex: 0 1 calc(33.333% - #{$card-gap - 8});
    }

-    @include media-breakpoint-up(lg) {
+    @media (--pgn-size-breakpoint-min-width-lg) {
      flex: 0 1 calc(25% - #{$card-gap - 6});
    }
  }
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -23,21 +23,21 @@
  }

  .alert-link  {
-    color: $primary !important;
+    color: var(--pgn-color-primary-base) !important;

    &:hover {
      text-decoration: underline;
-      color: $info-700 !important;
+      color: var(--pgn-color-info-700) !important;
    }
  }
 }

 .email-suggestion-alert-warning {
-  color: $info-500 !important;
+  color: var(--pgn-color-info-500) !important;

  &:hover {
    text-decoration: underline;
-    color: $info-700 !important;
+    color: var(--pgn-color-info-700) !important;
  }
 }

@@ -56,7 +56,7 @@
  line-height: 24px;
  font-size: 12px;
  font-weight: normal;
-  color: $primary-700;
+  color: var(--pgn-color-primary-700);
 }

 .username-suggestion--label {
@@ -99,7 +99,7 @@
  }
 }

-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (--pgn-size-breakpoint-max-width-sm) {
  .username-scroll-suggested--form-field {
    width: 15rem;
  }
--- a/src/sass/_style.scss
+++ b/src/sass/_style.scss
@@ -40,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .main-content {
-  @extend .pt-4;
+  padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
  min-width: 464px !important;
 }

@@ -80,15 +80,15 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 .alert-link {
  font-weight: normal;
  text-decoration: underline;
-  color: $info-300 !important;
+  color: var(--pgn-color-info-300) !important;

  &:hover {
-    color: $info-500 !important;
+    color: var(--pgn-color-info-500) !important;
  }
 }

 .form-control {
-  background-color: $white !important;
+  background-color: var(--pgn-color-white) !important;
  font-size: 0.875rem;
  line-height: 1.5;
  height: 2.75rem;
@@ -103,11 +103,11 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  font-size: 14px;

-  background-color: $white;
-  border: 1px solid $primary;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-primary-base);
  width: 224px;
  height: 36px;
-  color: $primary;
+  color: var(--pgn-color-primary-base);

  .btn-tpa__image-icon{
    background-color: transparent;
@@ -132,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .btn-tpa__font-container {
-  background-color: $primary;
-  color: $white;
+  background-color: var(--pgn-color-primary-base);
+  color: var(--pgn-color-white);
  font-size: 11px;

  margin-left: -6px;
@@ -143,7 +143,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .btn-oa2-facebook {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $facebook-blue;
  background-color: $facebook-blue;

@@ -151,12 +151,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $facebook-focus-blue;
    border: 1px solid $facebook-focus-blue;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

 .btn-oa2-google-oauth2 {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $google-blue;
  background-color: $google-blue;

@@ -171,12 +171,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $google-focus-blue;
    border: 1px solid $google-focus-blue;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

 .btn-oa2-apple-id {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $apple-black;
  background-color: $apple-black;
  font-size: 16px;
@@ -190,12 +190,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $apple-focus-black;
    border: 1px solid $apple-focus-black;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

 .btn-oa2-azuread-oauth2 {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $microsoft-black;
  background-color: $microsoft-black;

@@ -203,7 +203,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $microsoft-focus-black;
    border: 1px solid $microsoft-focus-black;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

@@ -214,9 +214,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .institute-icon {
-  @extend .mr-1;
-  @extend .text-gray;
-
+  margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important;
+  color: var(--pgn-color-gray-base) !important;
  display: inline-block;
  margin-bottom: 0.25rem;
  height: 18px;
@@ -232,7 +231,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .invalid-feedback {
-  color: $red;
+  color: var(--pgn-color-red);
 }

 .full-vertical-height {
@@ -290,22 +289,22 @@ select.form-control {

 #password-requirement-left {
  opacity: 1;
-  @extend .x-small;
+  font-size: var(--pgn-typography-font-size-xs) !important;
  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
  right: 0.2rem !important;
  .tooltip-inner {
-    background: $white;
+    background: var(--pgn-color-white);
    display: block;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
  }
  .arrow::before {
-    border-left-color: $white;
+    border-left-color: var(--pgn-color-white);
  }
 }

 #password-requirement-top {
-  @extend .x-small;
-  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
+  font-size: var(--pgn-typography-font-size-xs) !important;
+  filter: drop-shadow(var(--pgn-elevation-box-shadow-level-2)) drop-shadow(var(--pgn-elevation-box-shadow-level-2)) !important;
  opacity: 1;
  width: 90%;
  bottom: 10px !important;
@@ -314,30 +313,30 @@ select.form-control {

  .tooltip-inner {
    min-width: 464px !important;
-    background: $white;
+    background: var(--pgn-color-white);
    display: block;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
  }
  .arrow::before {
-    border-top-color: $white;
+    border-top-color: var(--pgn-color-white);
  }

 }

 .yellow-border {
-  border: 2px solid $accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
 }

 .institutions__heading {
-  color: $primary-700;
+  color: var(--pgn-color-primary-700);
 }

 .logistration-button {
-  color: $gray-700;
+  color: var(--pgn-color-gray-700);
 }

 .logistration-button:hover{
-  color: $gray-700;
+  color: var(--pgn-color-gray-700);
  text-decoration: none;
 }

@@ -352,7 +351,7 @@ select.form-control {
  width: 2.3rem;
 }
 .has-floating-label {
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
 }

 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -366,7 +365,7 @@ select.form-control {

 .form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
    font-size: 16px;
-    color: $primary-700;
+    color: var(--pgn-color-primary-700);
 }

 .form-group__form-field .form-control:not([value='']):not(:focus) ~
@@ -444,14 +443,14 @@ select.form-control {
 }

 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: $light-200;
+  background-color: var(--pgn-color-light-200);
 }

 .institutions--provider-link {
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 1.5rem;
-  color: $primary-700
+  color: var(--pgn-color-primary-700)
 }

 .pgn__form-control-decorator-trailing {