feat: added css variables support to sumac

.env

@@ -33,3 +33,4 @@ MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
 LEARNER_FEEDBACK_URL=''
 SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
+PARAGON_THEME_URLS={}

.env.development

@@ -34,3 +34,4 @@ MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:[email protected]'
 LEARNER_FEEDBACK_URL=''
 SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
+PARAGON_THEME_URLS={}

.env.test

@@ -31,3 +31,4 @@ APP_ID=
 MFE_CONFIG_API_URL=
 LEARNER_FEEDBACK_URL=''
 SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
+PARAGON_THEME_URLS={}

package.json

@@ -15,7 +15,9 @@
     "lint:fix": "npm run lint -- --fix",
     "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",
+    "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-account/issues"
@@ -29,17 +31,18 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-component-header": "npm:@edunext/[email protected]",
+    "@edx/frontend-component-footer": "npm:@edunext/[email protected]",
+    "@edx/frontend-platform": "npm:@edunext/[email protected]",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-plugin-framework": "^1.2.2",
+    "@openedx/frontend-plugin-framework": "npm:@edunext/[email protected]",
     "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "22.9.0",
+    "@openedx/paragon": "^23.0.0-alpha.7",
     "@tensorflow-models/blazeface": "0.1.0",
     "@tensorflow/tfjs-converter": "4.22.0",
     "@tensorflow/tfjs-core": "4.22.0",

src/account-settings/AccountSettingsPage.jsx

@@ -820,10 +820,10 @@ class AccountSettingsPage extends React.Component {
         </h1>
         <div>
           <div className="row">
-            <div className="col-md-2">
+            <div className="col-md-3">
               <JumpNav />
             </div>
-            <div className="col-md-10">
+            <div className="col-md-9">
               {loading ? this.renderLoading() : null}
               {loaded ? this.renderContent() : null}
               {loadingError ? this.renderError() : null}

src/account-settings/delete-account/ConfirmationModal.jsx

@@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
 
 import {
   AlertModal,
-  Button, Input, ValidationFormGroup, ActionRow,
+  Button,
+  Form,
+  ActionRow,
 } from '@openedx/paragon';
+
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -107,22 +110,23 @@ export class ConfirmationModal extends Component {
               <PrintingInstructions />
             </p>
           </Alert>
-          <ValidationFormGroup
-            for={passwordFieldId}
-            invalid={errorType !== null}
-            invalidMessage={intl.formatMessage(invalidMessage)}
-          >
-            <label className="d-block" htmlFor={passwordFieldId}>
+          <Form.Group isInvalid={errorType !== null} controlId={passwordFieldId}>
+            <Form.Label className="d-block" htmlFor={passwordFieldId}>
               {intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
-            </label>
-            <Input
+            </Form.Label>
+            <Form.Control
               name="password"
               id={passwordFieldId}
               type="password"
               value={password}
               onChange={onChange}
             />
-          </ValidationFormGroup>
+            {errorType !== null && (
+              <Form.Control.Feedback type="invalid">
+                {intl.formatMessage(invalidMessage)}
+              </Form.Control.Feedback>
+            )}
+          </Form.Group>
         </div>
 
       </AlertModal>

src/index.scss

@@ -3,7 +3,6 @@ $fa-font-path: "~font-awesome/fonts";
 
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
@@ -120,7 +119,7 @@ $fa-font-path: "~font-awesome/fonts";
   .dropdown-item:active,
   .dropdown-item:focus, 
   .btn-tertiary:not(:disabled):not(.disabled).active {
-    background-color: $light-300 !important;
+    background-color: var(--pgn-color-light-300) !important;
   }