feat!: add design tokens support (#777)

brian-smith-tcril · dcoa · web-flow · commit 33375a51e042 · 2025-06-18T15:45:26.000-04:00
BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

Co-authored-by: Diana Olarte &lt;dcoa@live.com&gt;
diff --git a/.env b/.env
@@ -22,3 +22,5 @@ USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
diff --git a/.env.development b/.env.development
@@ -23,3 +23,5 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@edx/frontend-component-header": "^6.2.0",
     "@edx/frontend-platform": "^8.3.3",
     "@edx/openedx-atlas": "^0.6.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/paragon": "^23.4.5",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "5.1.1",
     "babel-polyfill": "6.26.0",
diff --git a/src/components/NavigationBar/navBar.scss b/src/components/NavigationBar/navBar.scss
@@ -1,24 +1,16 @@
-@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";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 
   .nav a,
   .nav button {
     &:hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
       border-bottom: none;
     }
   }
@@ -30,7 +22,7 @@ $fa-font-path: "~font-awesome/fonts";
   .nav-link {
     border-bottom: 4px solid transparent;
     border-top: 4px solid transparent;
-    color: $gray-700;
+    color: var(--pgn-color-gray-700);
 
     // temporary until we can remove .btn class from dropdowns
     border-left: 0;
@@ -40,9 +32,9 @@ $fa-font-path: "~font-awesome/fonts";
     &:hover,
     &:focus,
     &.active {
-      font-weight: $font-weight-normal;
-      color: $primary-500;
-      border-bottom-color: $primary-500;
+      font-weight: var(--pgn-typography-font-weight-normal);
+      color: var(--pgn-color-primary-500);
+      border-bottom-color: var(--pgn-color-primary-500);
     }
   }
 }
diff --git a/src/discussions/post-comments/comments/CommentsView.jsx b/src/discussions/post-comments/comments/CommentsView.jsx
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
              variant="plain"
              block="true"
              className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
-                    line-height-24 text-primary-500"
+                    line-height-24 text-primary-500 bg-white"
              onClick={handleAddResponse}
              data-testid="add-response"
            >
diff --git a/src/index.scss b/src/index.scss
@@ -1,13 +1,9 @@
-@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;
+
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
 
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
 
 body,
 #main
@@ -28,6 +24,10 @@ body,
   font-size: 16px !important;
 }
 
+.btn-plain {
+    background-color: var(--pgn-color-card-bg-base) !important;
+}
+
 #post,
 #comment,
 #reply,
@@ -41,23 +41,23 @@ body,
 }
 
 .text-staff-color {
-  color: $warning-700;
+  color: var(--pgn-color-warning-700);
 }
 
 .outline-staff-color {
-  outline: $warning-700 solid 2px;
+  outline: var(--pgn-color-warning-700) solid 2px;
 }
 
 .text-TA-color {
-  color: $success-700;
+  color: var(--pgn-color-success-700);
 }
 
 .outline-TA-color {
-  outline: $success-700 solid 2px;
+  outline: var(--pgn-color-success-700) solid 2px;
 }
 
 .outline-anonymous {
-  outline: $light-400 solid 2px;
+  outline: var(--pgn-color-light-400) solid 2px;
 }
 
 .font-size-8 {
@@ -173,7 +173,7 @@ body,
 }
 
 .learner > a:hover {
-  background-color: $light-300;
+  background-color: var(--pgn-color-light-300);
 }
 
 .py-10px {
@@ -252,12 +252,12 @@ header {
 }
 
 .border-light-400-2 {
-  border: 2px solid $light-400 !important;
+  border: 2px solid var(--pgn-color-light-400) !important;
   border-width: 2px !important;
 }
 
 .border-primary-500-2 {
-  border: 2px solid $primary-500 !important;
+  border: 2px solid var(--pgn-color-primary-500) !important;
   border-width: 2px !important;
 }
 
@@ -383,8 +383,8 @@ header {
 }
 
 .btn-icon.btn-icon-primary:hover {
-  background-color: $light-300 !important;
-  color: $primary-500 !important
+  background-color: var(--pgn-color-light-300) !important;
+  color: var(--pgn-color-primary-500) !important
 }
 
 
@@ -427,38 +427,38 @@ header {
 }
 
 .hover-button:hover {
-  background-color: $light-300 !important;
+  background-color: var(--pgn-color-light-300) !important;
   height: 36px !important;
   border: none !important;
 }
 
 .btn-tertiary:hover {
-  background-color: $light-300 !important;
+  background-color: var(--pgn-color-light-300) !important;
 }
 
 .nav-button-group {
   .nav-link {
     &:hover {
-      background-color: $light-300 !important;
+      background-color: var(--pgn-color-light-300) !important;
     }
   }
 
   .nav-link.active,
   .show>.nav-link {
-    background-color: $primary-500 !important;
+    background-color: var(--pgn-color-primary-500) !important;
   }
 }
 
 .course-tabs-navigation {
   .nav a {
     &:hover {
-      background-color: $light-300 !important;;
+      background-color: var(--pgn-color-light-300) !important;;
     }
   }
 }
 
 .btn-tertiary:disabled {
-  color: $gray-700 !important;
+  color: var(--pgn-color-gray-700) !important;
   background-color: transparent !important;
 }
 
@@ -535,14 +535,14 @@ code {
 .post-preview,
 .discussion-comments {
   blockquote {
-    border-left: 2px solid $gray-200;
+    border-left: 2px solid var(--pgn-color-gray-200);
     margin-left: 1.5rem;
     padding-left: 1rem;
   }
 }
 
 .add-comment-btn {
-  border: 1px solid $light-300 !important;
+  border: 1px solid var(--pgn-color-light-300) !important;
 }
 
 .icon-size-24 {
@@ -588,7 +588,7 @@ code {
 }
 
 th, td {
-  border: 1px dashed $gray-200;
+  border: 1px dashed var(--pgn-color-gray-200);
   padding: 0.4rem;
   white-space: nowrap;
 }

Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {`
`92`	`92`	`variant="plain"`
`93`	`93`	`block="true"`
`94`	`94`	`className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500`
`95`		`- line-height-24 text-primary-500"`
	`95`	`+ line-height-24 text-primary-500 bg-white"`
`96`	`96`	`onClick={handleAddResponse}`
`97`	`97`	`data-testid="add-response"`
`98`	`98`	`>`
Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,9 @@`
`1`		`-@import "~@edx/brand/paragon/fonts.scss";`
`2`		`-@import "~@edx/brand/paragon/variables.scss";`
`3`		`-@import "~@openedx/paragon/scss/core/core.scss";`
`4`		`-@import "~@edx/brand/paragon/overrides.scss";`
	`1`	`+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;`
	`2`	`+`
`5`	`3`
`6`	`4`	`@import "~@edx/frontend-component-footer/dist/footer";`
`7`	`5`	`@import "~@edx/frontend-component-header/dist/index";`
`8`	`6`
`9`		`-$fa-font-path: "~font-awesome/fonts";`
`10`		`-@import "~font-awesome/scss/font-awesome";`
`11`	`7`
`12`	`8`	`body,`
`13`	`9`	`#main`
`@@ -28,6 +24,10 @@ body,`
`28`	`24`	`font-size: 16px !important;`
`29`	`25`	`}`
`30`	`26`
	`27`	`+.btn-plain {`
	`28`	`+ background-color: var(--pgn-color-card-bg-base) !important;`
	`29`	`+}`
	`30`	`+`
`31`	`31`	`#post,`
`32`	`32`	`#comment,`
`33`	`33`	`#reply,`
`@@ -41,23 +41,23 @@ body,`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`.text-staff-color {`
`44`		`- color: $warning-700;`
	`44`	`+ color: var(--pgn-color-warning-700);`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`.outline-staff-color {`
`48`		`- outline: $warning-700 solid 2px;`
	`48`	`+ outline: var(--pgn-color-warning-700) solid 2px;`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`.text-TA-color {`
`52`		`- color: $success-700;`
	`52`	`+ color: var(--pgn-color-success-700);`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`.outline-TA-color {`
`56`		`- outline: $success-700 solid 2px;`
	`56`	`+ outline: var(--pgn-color-success-700) solid 2px;`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`.outline-anonymous {`
`60`		`- outline: $light-400 solid 2px;`
	`60`	`+ outline: var(--pgn-color-light-400) solid 2px;`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`.font-size-8 {`
`@@ -173,7 +173,7 @@ body,`
`173`	`173`	`}`
`174`	`174`
`175`	`175`	`.learner > a:hover {`
`176`		`- background-color: $light-300;`
	`176`	`+ background-color: var(--pgn-color-light-300);`
`177`	`177`	`}`
`178`	`178`
`179`	`179`	`.py-10px {`
`@@ -252,12 +252,12 @@ header {`
`252`	`252`	`}`
`253`	`253`
`254`	`254`	`.border-light-400-2 {`
`255`		`- border: 2px solid $light-400 !important;`
	`255`	`+ border: 2px solid var(--pgn-color-light-400) !important;`
`256`	`256`	`border-width: 2px !important;`
`257`	`257`	`}`
`258`	`258`
`259`	`259`	`.border-primary-500-2 {`
`260`		`- border: 2px solid $primary-500 !important;`
	`260`	`+ border: 2px solid var(--pgn-color-primary-500) !important;`
`261`	`261`	`border-width: 2px !important;`
`262`	`262`	`}`
`263`	`263`
`@@ -383,8 +383,8 @@ header {`
`383`	`383`	`}`
`384`	`384`
`385`	`385`	`.btn-icon.btn-icon-primary:hover {`
`386`		`- background-color: $light-300 !important;`
`387`		`- color: $primary-500 !important`
	`386`	`+ background-color: var(--pgn-color-light-300) !important;`
	`387`	`+ color: var(--pgn-color-primary-500) !important`
`388`	`388`	`}`
`389`	`389`
`390`	`390`
`@@ -427,38 +427,38 @@ header {`
`427`	`427`	`}`
`428`	`428`
`429`	`429`	`.hover-button:hover {`
`430`		`- background-color: $light-300 !important;`
	`430`	`+ background-color: var(--pgn-color-light-300) !important;`
`431`	`431`	`height: 36px !important;`
`432`	`432`	`border: none !important;`
`433`	`433`	`}`
`434`	`434`
`435`	`435`	`.btn-tertiary:hover {`
`436`		`- background-color: $light-300 !important;`
	`436`	`+ background-color: var(--pgn-color-light-300) !important;`
`437`	`437`	`}`
`438`	`438`
`439`	`439`	`.nav-button-group {`
`440`	`440`	`.nav-link {`
`441`	`441`	`&:hover {`
`442`		`- background-color: $light-300 !important;`
	`442`	`+ background-color: var(--pgn-color-light-300) !important;`
`443`	`443`	`}`
`444`	`444`	`}`
`445`	`445`
`446`	`446`	`.nav-link.active,`
`447`	`447`	`.show>.nav-link {`
`448`		`- background-color: $primary-500 !important;`
	`448`	`+ background-color: var(--pgn-color-primary-500) !important;`
`449`	`449`	`}`
`450`	`450`	`}`
`451`	`451`
`452`	`452`	`.course-tabs-navigation {`
`453`	`453`	`.nav a {`
`454`	`454`	`&:hover {`
`455`		`- background-color: $light-300 !important;;`
	`455`	`+ background-color: var(--pgn-color-light-300) !important;;`
`456`	`456`	`}`
`457`	`457`	`}`
`458`	`458`	`}`
`459`	`459`
`460`	`460`	`.btn-tertiary:disabled {`
`461`		`- color: $gray-700 !important;`
	`461`	`+ color: var(--pgn-color-gray-700) !important;`
`462`	`462`	`background-color: transparent !important;`
`463`	`463`	`}`
`464`	`464`
`@@ -535,14 +535,14 @@ code {`
`535`	`535`	`.post-preview,`
`536`	`536`	`.discussion-comments {`
`537`	`537`	`blockquote {`
`538`		`- border-left: 2px solid $gray-200;`
	`538`	`+ border-left: 2px solid var(--pgn-color-gray-200);`
`539`	`539`	`margin-left: 1.5rem;`
`540`	`540`	`padding-left: 1rem;`
`541`	`541`	`}`
`542`	`542`	`}`
`543`	`543`
`544`	`544`	`.add-comment-btn {`
`545`		`- border: 1px solid $light-300 !important;`
	`545`	`+ border: 1px solid var(--pgn-color-light-300) !important;`
`546`	`546`	`}`
`547`	`547`
`548`	`548`	`.icon-size-24 {`
`@@ -588,7 +588,7 @@ code {`
`588`	`588`	`}`
`589`	`589`
`590`	`590`	`th, td {`
`591`		`- border: 1px dashed $gray-200;`
	`591`	`+ border: 1px dashed var(--pgn-color-gray-200);`
`592`	`592`	`padding: 0.4rem;`
`593`	`593`	`white-space: nowrap;`
`594`	`594`	`}`