feat: add support for design tokens and CSS variables

.gitignore

@@ -23,3 +23,7 @@ temp/babel-plugin-react-intl
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+### Local-only config ###
+.env.private
+module.config.js

package.json

@@ -28,13 +28,13 @@
     "extends @edx/browserslist-config"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "12.2.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.16",
+    "@edx/frontend-component-footer": "12.2.1",
     "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "5.0.0",
-    "@edx/paragon": "20.45.0",
+    "@edx/frontend-platform": "github:openedx/frontend-platform#ags/inject-theme-css",
+    "@edx/paragon": "22.0.0-alpha.1",
     "@edx/react-unit-test-utils": "1.7.0",
-    "@edx/reactifex": "^2.1.1",
+    "@edx/reactifex": "^2.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -67,8 +67,8 @@
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.3",
+    "@edx/browserslist-config": "^1.2.0",
+    "@edx/frontend-build": "github:openedx/frontend-build#ags/2321",
     "@testing-library/react": "12.1.5",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "axios": "0.21.2",

src/App.scss

@@ -1,16 +1,16 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+//@import "~@edx/brand/paragon/fonts";
+//@import "~@edx/brand/paragon/variables";
+//@import "~@edx/paragon/scss/core/core";
+//@import "~@edx/brand/paragon/overrides";
 
 $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";
+//@import "~@edx/frontend-component-header/dist/index";
+//@import "~@edx/frontend-component-footer/dist/_footer";
 
 @import "./components/GradesView/GradesView";
 @import "./components/BulkManagementHistoryView/BulkManagementHistoryView";

src/components/GradesView/GradebookTable/hooks.jsx

@@ -39,7 +39,7 @@ export const useGradebookTableData = () => {
     [Headings.username]: (
       <Fields.Username username={entry.username} userKey={entry.external_user_key} />
     ),
-    [Headings.email]: (<Fields.Email email={entry.email} />),
+    [Headings.email]: (<Fields.Text value={entry.email} />),
     [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${getLocalizedPercentSign()}`,
     ...entry.section_breakdown.reduce((acc, subsection) => ({
       ...acc,

src/components/GradesView/GradebookTable/index.jsx

@@ -10,7 +10,7 @@ import useGradebookTableData from './hooks';
  * a row for each user, with a column for their username, email, and total grade,
  * along with one for each subsection in their grade entry.
  */
-export const GradebookTable = () => {
+const GradebookTable = () => {
   const {
     columns,
     data,

src/components/GradesView/GradesView.scss

@@ -119,6 +119,6 @@ select#ScoreView.form-control {
 
     &:before {
         border-width: 0.4rem 0.4rem 0.4rem 0;
-        border-right-color: $black;
+        border-right-color: var(--pgn-color-black);
     }
 }

src/components/GradesView/ImportSuccessToast/index.jsx

@@ -16,6 +16,7 @@ export const ImportSuccessToast = () => {
     show,
     description,
   } = useImportSuccessToastData();
+  return null;
   return (
     <Toast {...{ action, onClose, show }}>
       {description}