feat: add css variables support sumac

.env

@@ -21,3 +21,4 @@ USER_INFO_COOKIE_NAME=''
 SCHEDULE_EMAIL_SECTION=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

.env.development

@@ -22,3 +22,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

.env.test

@@ -20,3 +20,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

package.json

@@ -16,7 +16,8 @@
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "husky": {
     "hooks": {
@@ -34,18 +35,19 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "^8.0.0",
+    "@edx/frontend-component-footer": "github:edunext/frontend-component-footer#edunext/css-variables-14.0.0",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.8.0-alpha.1",
+    "@edx/frontend-platform": "npm:@edunext/frontend-platform@8.1.2-alpha.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.1.2",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.0.0",
+    "@openedx/frontend-plugin-framework": "npm:@edunext/frontend-plugin-framework@1.3.0-alpha.1",
+    "@openedx/frontend-slot-footer": "npm:@edunext/frontend-slot-footer@1.0.2-alpha.1",
+    "@openedx/paragon": "^23.0.0-alpha.7",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
@@ -65,8 +67,8 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@openedx/frontend-build": "14.0.3",
     "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "^14.1.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.21.2",

src/index.scss

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