feat: implementation of Paragon design tokens

.env.development

@@ -1,3 +1,5 @@
+APP_ID='frontend-app-discussions'
+MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1'
 NODE_ENV='development'
 PORT=2002
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'

env.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    FALSE_VALUE: false,
+    CORRECT_BOOL_VALUE: 'Good, false meant false.  We did not cast a boolean to a string.',
+    INCORRECT_BOOL_VALUE: 'Why was a false boolean true?',
+    INTEGER_VALUE: 123,
+    PARAGON_THEME_URLS: {
+        core: {
+            urls: {
+                default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css1'
+            },
+        },
+        defaults: {
+            light: 'light',
+        },
+        variants: {
+            light: {
+                urls: {
+                    default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css1',
+                },
+            },
+        },
+    },
+};

package.json

@@ -15,7 +15,7 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
-    "start": "fedx-scripts webpack-dev-server --progress",
+    "start": "fedx-scripts webpack-dev-server",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
   "husky": {
@@ -33,12 +33,12 @@
     "url": "https://github.com/openedx/frontend-app-discussions/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17",
     "@edx/frontend-component-header": "^5.0.2",
-    "@edx/frontend-platform": "^7.1.0",
+    "@edx/frontend-platform": "file:../frontend-platform/src",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.1.1",
+    "@openedx/paragon": "22.0.0-alpha.25",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -64,7 +64,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^13.0.28",
+    "@openedx/frontend-build": "file:../frontend-build",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",

src/components/NavigationBar/navBar.scss

@@ -1,8 +1,3 @@
-@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";
 
@@ -12,13 +7,13 @@ $fa-font-path: "~font-awesome/fonts";
   .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 +25,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 +35,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);
     }
   }
 }

src/components/TinyMCEEditor.jsx

@@ -35,7 +35,7 @@ import 'tinymce/plugins/charmap';
 import 'tinymce/plugins/paste';
 /* eslint import/no-webpack-loader-syntax: off */
 // eslint-disable-next-line import/no-unresolved
-import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
+import edxBrandCss from '!!raw-loader!../index.scss';
 // eslint-disable-next-line import/no-unresolved
 import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
 // eslint-disable-next-line import/no-unresolved

src/index.scss

@@ -1,7 +1,8 @@
-@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/dist/core.min.css" as paragonCore;
+// @use "@openedx/paragon/dist/light.min.css" as paragonLight;
+
+// @use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
+// @use "@edx/brand/dist/light.min.css" as paragonDark;
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
@@ -22,23 +23,23 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .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-16 {
@@ -166,7 +167,7 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .learner > a:hover {
-  background-color: $light-300;
+  background-color: var(--pgn-color-light-300);
 }
 
 .py-10px {
@@ -245,12 +246,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;
 }
 
@@ -373,8 +374,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
 }
 
 
@@ -416,38 +417,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;
 }
 
@@ -524,14 +525,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 {
@@ -577,7 +578,7 @@ code {
 }
 
 th, td {
-  border: 1px dashed $gray-200;
+  border: 1px dashed var(--pgn-color-gray-200);
   padding: 0.4rem;
   white-space: nowrap;
 }