refactor: update paragon version and scss to use css variables

Author: dcoa

dist/package.json

@@ -34,10 +34,10 @@
   "homepage": "https://github.com/openedx/frontend-platform#readme",
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/browserslist-config": "1.2.0",
-    "@openedx/frontend-build": "14.1.5",
-    "@openedx/paragon": "22.8.1",
-    "@testing-library/jest-dom": "6.5.0",
+    "@edx/browserslist-config": "1.4.0",
+    "@openedx/frontend-build": "14.2.2",
+    "@openedx/paragon": "23.1.1",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.4.3",
@@ -46,7 +46,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-localstorage-mock": "^2.4.26",
     "jsdoc": "^4.0.0",
-    "nodemon": "3.1.7",
+    "nodemon": "3.1.9",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -59,7 +59,7 @@
     "@formatjs/intl-pluralrules": "4.3.3",
     "@formatjs/intl-relativetimeformat": "10.0.1",
     "axios": "1.6.7",
-    "axios-cache-interceptor": "1.3.2",
+    "axios-cache-interceptor": "1.6.2",
     "form-urlencoded": "4.1.4",
     "glob": "7.2.3",
     "history": "4.10.1",
@@ -71,13 +71,13 @@
     "lodash.memoize": "4.1.2",
     "lodash.merge": "4.6.2",
     "lodash.snakecase": "4.1.1",
-    "pubsub-js": "1.9.4",
-    "react-intl": "6.7.0",
+    "pubsub-js": "1.9.5",
+    "react-intl": "6.8.9",
     "universal-cookie": "4.0.4"
   },
   "peerDependencies": {
     "@openedx/frontend-build": ">= 14.0.0",
-    "@openedx/paragon": " 23.0.0-alpha.4 || >= 21.5.7 < 23.0.0",
+    "@openedx/paragon": ">= 21.5.7 < 24.0.0",
     "prop-types": ">=15.7.2 <16.0.0",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0",

env.config.js

@@ -5,4 +5,4 @@ const config = {
   JS_FILE_VAR: 'JS_FILE_VAR_VALUE_FOR_EXAMPLE_APP',
 };
 
-module.config = config;
+module.exports = config;

example/index.scss

@@ -1,4 +1 @@
-@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;