feat: implemented restricted countries functionality

.env

@@ -41,5 +41,3 @@ BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.development

@@ -41,5 +41,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.test

@@ -18,4 +18,3 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}

README.rst

@@ -29,13 +29,7 @@ Getting Started
 Installation
 ============
 
-`Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
-
-.. _Tutor: https://github.com/overhangio/tutor
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
-
-Devstack (Deprecated) instructions
-==================================
+This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
 
 1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
 
@@ -57,7 +51,7 @@ Devstack (Deprecated) instructions
 Environment Variables/Setup Notes
 =================================
 
-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
 The authentication micro-frontend also requires the following additional variable:
 
@@ -148,13 +142,13 @@ Furthermore, there are several edX-specific environment variables that enable in
      - ``true`` | ``''`` (empty strings are falsy)    
 
 For more information see the document: `Micro-frontend applications in Open
-edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
 How To Contribute
 =================
 
 Contributions are very welcome, and strongly encouraged! We've
-put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
+put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.
 
 Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
 

docs/how_tos/enable_social_auth.rst

@@ -3,7 +3,7 @@ Enable Social Auth Locally
 
 Please follow the steps below to enable social auth (SSO) locally.
 
-1. Follow `Enabling Third Party Authentication <https://docs.openedx.org/en/latest/site_ops/install_configure_run_guide/configuration/tpa/index.html>`_ for backend configuration.
+1. Follow `Enabling Third Party Authentication <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.
 
 2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.
 

package.json

@@ -13,12 +13,15 @@
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/authn/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authn#readme",
@@ -30,32 +33,33 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-platform": "^8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^23.4.2",
+    "@openedx/paragon": "^22.1.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.26.0",
+    "algoliasearch-helper": "^3.14.0",
     "classnames": "2.5.1",
-    "core-js": "3.43.0",
+    "core-js": "3.40.0",
     "fastest-levenshtein": "1.0.16",
     "form-urlencoded": "6.1.5",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
     "react-loading-skeleton": "3.5.0",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
+    "react-router": "6.29.0",
+    "react-router-dom": "6.29.0",
     "react-zendesk": "^0.1.13",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
@@ -69,13 +73,13 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^14.6.1",
-    "babel-plugin-formatjs": "10.5.39",
+    "@openedx/frontend-build": "^14.0.3",
+    "babel-plugin-formatjs": "10.5.35",
     "eslint-plugin-import": "2.31.0",
     "glob": "7.2.3",
     "history": "5.3.0",
-    "jest": "30.0.0",
-    "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.4.0"
+    "husky": "9.1.7",
+    "jest": "29.7.0",
+    "react-test-renderer": "^17.0.2"
   }
 }

src/common-components/data/actions.js

@@ -13,9 +13,15 @@ export const getThirdPartyAuthContextBegin = () => ({
   type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,
 });
 
-export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({
+export const getThirdPartyAuthContextSuccess = (
+  fieldDescriptions,
+  optionalFields,
+  thirdPartyAuthContext,
+  countries) => ({
   type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-  payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+  payload: {
+    fieldDescriptions, optionalFields, thirdPartyAuthContext, countries,
+  },
 });
 
 export const getThirdPartyAuthContextFailure = () => ({

src/common-components/data/reducers.js

@@ -35,6 +35,7 @@ const reducer = (state = defaultState, action = {}) => {
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,
+        countries: action.payload.countries,
       };
     }
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:

src/common-components/data/sagas.js

@@ -8,6 +8,7 @@ import {
   THIRD_PARTY_AUTH_CONTEXT,
 } from './actions';
 import {
+  getCountryList,
   getThirdPartyAuthContext,
 } from './service';
 import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
@@ -18,9 +19,10 @@ export function* fetchThirdPartyAuthContext(action) {
     const {
       fieldDescriptions, optionalFields, thirdPartyAuthContext,
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
+    const countries = (yield call(getCountryList)) || [];
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext, countries));
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/data/service.js

@@ -1,5 +1,8 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { FIELD_LABELS } from '../../data/constants';
 
 // eslint-disable-next-line import/prefer-default-export
 export async function getThirdPartyAuthContext(urlParams) {
@@ -23,3 +26,28 @@ export async function getThirdPartyAuthContext(urlParams) {
     thirdPartyAuthContext: data.contextData || {},
   };
 }
+
+function extractCountryList(data) {
+  return data?.fields
+    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
+    ?.options?.map(({ value, name }) => ({ code: value, name })) || [];
+}
+
+export async function getCountryList() {
+  try {
+    const requestConfig = {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      isPublic: true,
+    };
+
+    const { data } = await getAuthenticatedHttpClient()
+      .get(
+        `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`,
+        requestConfig,
+      );
+    return extractCountryList(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}

src/common-components/data/tests/sagas.test.js

@@ -8,6 +8,11 @@ import * as api from '../service';
 
 const { loggingService } = initializeMockLogging();
 
+jest.mock('../service', () => ({
+  getCountryList: jest.fn(),
+  getThirdPartyAuthContext: jest.fn(),
+}));
+
 describe('fetchThirdPartyAuthContext', () => {
   const params = {
     payload: { urlParams: {} },
@@ -31,6 +36,7 @@ describe('fetchThirdPartyAuthContext', () => {
         thirdPartyAuthContext: data,
         fieldDescriptions: {},
         optionalFields: {},
+        countries: [],
       }));
 
     const dispatched = [];
@@ -44,7 +50,7 @@ describe('fetchThirdPartyAuthContext', () => {
     expect(dispatched).toEqual([
       actions.getThirdPartyAuthContextBegin(),
       setCountryFromThirdPartyAuthContext(),
-      actions.getThirdPartyAuthContextSuccess({}, {}, data),
+      actions.getThirdPartyAuthContextSuccess({}, {}, data, []),
     ]);
     getThirdPartyAuthContext.mockClear();
   });

src/data/constants.js

@@ -37,3 +37,6 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+
 // things like auto-enrollment upon login and registration.
 export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
 export const REDIRECT = 'redirect';
+export const FIELD_LABELS = {
+  COUNTRY: 'country',
+};

src/index.jsx

@@ -1,36 +1,27 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React, { StrictMode } from 'react';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import {
   APP_INIT_ERROR, APP_READY, initialize, mergeConfig, subscribe,
 } from '@edx/frontend-platform';
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { createRoot } from 'react-dom/client';
 
 import configuration from './config';
 import messages from './i18n';
 import MainApp from './MainApp';
 
 subscribe(APP_READY, () => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <MainApp />
-    </StrictMode>,
+  ReactDOM.render(
+    <MainApp />,
+    document.getElementById('root'),
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <ErrorPage message={error.message} />
-    </StrictMode>,
-  );
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({

src/index.scss

@@ -1,2 +1,6 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
 @import "sass/style";

src/recommendations/data/tests/hooks.test.jsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import algoliasearchHelper from 'algoliasearch-helper';
 
 import mockedRecommendedProducts from './mockedData';

src/register/RegistrationPage.jsx

@@ -85,6 +85,7 @@ const RegistrationPage = (props) => {
   const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
   const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
   const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
+  const countries = useSelector(state => state.commonComponents.countries);
 
   const backendValidations = useSelector(getBackendValidations);
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
@@ -358,6 +359,7 @@ const RegistrationPage = (props) => {
                 setFormFields={setConfigurableFormFields}
                 autoSubmitRegisterForm={autoSubmitRegForm}
                 fieldDescriptions={fieldDescriptions}
+                countries={countries}
               />
               <StatefulButton
                 id="register-user"

src/register/components/ConfigurableRegistrationForm.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getCountryList, getLocale, useIntl } from '@edx/frontend-platform/i18n';
@@ -31,13 +31,13 @@ const ConfigurableRegistrationForm = (props) => {
     setFieldErrors,
     setFormFields,
     autoSubmitRegistrationForm,
+    countries,
   } = props;
 
   /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
   States' instead of 'United States of America' which does not exist in country dropdown list and gets the user
   confused and unable to create an account. So we added the United States entry in the dropdown list.
  */
-  const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
 
   let showTermsOfServiceAndHonorCode = false;
   let showCountryField = false;
@@ -70,6 +70,18 @@ const ConfigurableRegistrationForm = (props) => {
     }
   }, [autoSubmitRegistrationForm]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const removeDisabledCountries = useCallback((countryList) => {
+    if (!countries.length) {
+      return countryList;
+    }
+    const allowedCountries = new Set(countries.map(({ code }) => code));
+
+    return countryList.filter(({ code }) => allowedCountries.has(code));
+  }, [countries]);
+
+  const countryList = useMemo(() => removeDisabledCountries(
+    getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []), [removeDisabledCountries]);
+
   const handleErrorChange = (fieldName, error) => {
     if (fieldName) {
       setFieldErrors(prevErrors => ({
@@ -231,11 +243,16 @@ ConfigurableRegistrationForm.propTypes = {
   setFieldErrors: PropTypes.func.isRequired,
   setFormFields: PropTypes.func.isRequired,
   autoSubmitRegistrationForm: PropTypes.bool,
+  countries: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  })),
 };
 
 ConfigurableRegistrationForm.defaultProps = {
   fieldDescriptions: {},
   autoSubmitRegistrationForm: false,
+  countries: [],
 };
 
 export default ConfigurableRegistrationForm;

src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -185,6 +185,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
         autoSubmitRegistrationForm: true,
+        countries: [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }],
       };
 
       render(routerWrapper(reduxWrapper(

src/sass/_base_component.scss

@@ -2,19 +2,19 @@
 .layout {
   display: flex;
 
-  @media (--pgn-size-breakpoint-max-width-lg) {
+  @include media-breakpoint-down('lg') {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  @media (--pgn-size-breakpoint-min-width-xl) {
+  @include media-breakpoint-up('xl') {
     justify-content: space-between;
   }
 }
 
 .content {
-  @media (--pgn-size-breakpoint-min-width-xl) {
+  @include media-breakpoint-up('xl') {
     display: flex;
     justify-content: center;
     width: 50vw;
@@ -47,7 +47,7 @@
   font-weight: 700;
   line-height: 1;
 
-  @media (--pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     font-size: 3.75rem;
   }
 
@@ -60,7 +60,7 @@
   margin-bottom: 0.5rem;
   font-weight: 700;
 
-  @media (-pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     font-size: 1.375rem;
     line-height: 1.75rem;
   }
@@ -72,7 +72,7 @@
 }
 
 .large-screen-left-container {
-  @media (-pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     flex: 0 0 25%;
     max-width: 25%;
   }
@@ -87,43 +87,43 @@
   height: 0.25rem;
   background-image: linear-gradient(
     102.02deg,
-    var(--pgn-color-brand-700),
-    var(--pgn-color-brand-700) 20%,
-    var(--pgn-color-brand-base) 20%,
+    $brand-700,
+    $brand-700 20%,
+    $brand 20%,
   );
   background-repeat: no-repeat;
 }
 
-@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
+@include media-breakpoint-only('md') {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      var(--pgn-color-brand-700),
-      var(--pgn-color-brand-700) 10%,
-      var(--pgn-color-brand-base) 10%,
-      var(--pgn-color-brand-base) 90%,
-      var(--pgn-color-primary-700) 90%,
-      var(--pgn-color-primary-700) 100%,
+      $brand-700,
+      $brand-700 10%,
+      $brand 10%,
+      $brand 90%,
+      $primary-700 90%,
+      $primary-700 100%,
     );
     background-repeat: no-repeat;
   }
 }
 
-@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
+@include media-breakpoint-only('lg') {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      var(--pgn-color-brand-700) 10%,
-      var(--pgn-color-brand-base) 10%,
-      var(--pgn-color-brand-base) 65%,
-      var(--pgn-color-primary-700) 65%,
-      var(--pgn-color-primary-700) 75%,
-      var(--pgn-color-accent-a) 75%,
-      var(--pgn-color-accent-a) 75%
+      $brand-700 10%,
+      $brand 10%,
+      $brand 65%,
+      $primary-700 65%,
+      $primary-700 75%,
+      $accent-a 75%,
+      $accent-a 75%
     );
     background-repeat: no-repeat;
   }
@@ -131,20 +131,20 @@
 
 .extra-large-screen-top-stripe { display: none; }
 
-@media (--pgn-size-breakpoint-min-width-xl) {
+@include media-breakpoint-up('xl') {
  .extra-large-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-     var(--pgn-color-brand-700) 10%,
-     var(--pgn-color-brand-base) 10%,
-     var(--pgn-color-brand-base) 45%,
-     var(--pgn-color-primary-700) 45%,
-     var(--pgn-color-primary-700) 55%,
-     var(--pgn-color-accent-a) 55%,
-     var(--pgn-color-accent-a) 75%,
-     var(--pgn-color-info-200) 75%,
+     $brand-700 10%,
+     $brand 10%,
+     $brand 45%,
+     $primary-700 45%,
+     $primary-700 55%,
+     $accent-a 55%,
+     $accent-a 75%,
+     $info-200 75%,
   );
    background-repeat: no-repeat;
  }
@@ -152,24 +152,24 @@
 
 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: var(--pgn-color-light-200);
+  fill: $light-200;
   overflow: hidden;
   position: absolute;
 }
 
 .large-screen-svg-primary {
-  fill: var(--pgn-color-primary-400);
+  fill: $primary-400;
 }
 
 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: var(--pgn-color-light-200);
+  fill: $light-200;
   overflow: inherit;
   position: absolute;
 }
 
 .medium-screen-svg-primary {
-  fill: var(--pgn-color-primary-400);
+  fill: $primary-400;
 }
 
 [dir=rtl]{
@@ -184,20 +184,20 @@
 .small-yellow-line {
   width: 80px;
   height: 0;
-  border: 2px solid var(--pgn-color-accent-b);
+  border: 2px solid $accent-b;
   transform: rotate(102.02deg);
 }
 
 .medium-yellow-line {
   width: 120px;
   height: 0;
-  border: 3px solid var(--pgn-color-accent-b);
+  border: 3px solid $accent-b;
   transform: rotate(102.02deg);
 }
 
 .large-yellow-line {
   width: 240px;
   height: 0;
-  border: 3px solid var(--pgn-color-accent-b);
+  border: 3px solid $accent-b;
   transform: rotate(102.02deg);
 }

src/sass/_progressive_profiling_page.scss

@@ -11,7 +11,7 @@
     margin-bottom: 0.5rem;
     font-weight: 700;
 
-    @media (--pgn-size-breakpoint-max-width-md) {
+    @include media-breakpoint-down('md') {
       line-height: 1.5rem;
       font-size: 1.125rem;
     }

src/sass/_recommendations_card_base.scss

@@ -64,52 +64,52 @@ $header-height: 104px;
   }
 
   &.light {
-    background-color: var(--pgn-color-white);
+    background-color: $white;
 
     .title {
-      color: var(--pgn-color-black);
+      color: $black;
     }
 
     .subtitle {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
     }
 
     .badge {
-      background-color: var(--pgn-color-light-500);
-      color: var(--pgn-color-black);
+      background-color: $light-500;
+      color: $black;
     }
 
     .footer-content {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
     }
   }
 
   &.dark {
-    background-color: var(--pgn-color-primary-500);
+    background-color: $primary-500;
 
     .pgn__card-header-title-md {
-      color: var(--pgn-color-white);
+      color: $white;
     }
 
     .pgn__card-header-subtitle-md {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
 
     .title {
-      color: var(--pgn-color-white);
+      color: $white;
     }
 
     .subtitle {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
 
     .badge {
-      background-color: var(--pgn-color-dark-200);
-      color: var(--pgn-color-white);
+      background-color: $dark-200;
+      color: $white;
     }
 
     .footer-content {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
   }
 }

src/sass/_recommendations_page.scss

@@ -3,7 +3,7 @@ $card-gap: 24px;
 .recommendations-container__card-list {
   gap: $card-gap $card-gap;
 
-  @media (-pgn-size-breakpoint-max-width-sm) {
+  @include media-breakpoint-down(sm) {
     margin-bottom: 0 !important;
   }
 
@@ -11,15 +11,15 @@ $card-gap: 24px;
     flex: 0 1 100%;
     cursor: pointer;
 
-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @include media-breakpoint-up(sm) {
       flex: 0 1 calc(50% - #{$card-gap - 12});
     }
 
-    @media (--pgn-size-breakpoint-min-width-md) {
+    @include media-breakpoint-up(md) {
       flex: 0 1 calc(33.333% - #{$card-gap - 8});
     }
 
-    @media (--pgn-size-breakpoint-min-width-lg) {
+    @include media-breakpoint-up(lg) {
       flex: 0 1 calc(25% - #{$card-gap - 6});
     }
   }

src/sass/_registration.scss

@@ -23,21 +23,21 @@
   }
 
   .alert-link  {
-    color: var(--pgn-color-primary-base) !important;
+    color: $primary !important;
 
     &:hover {
       text-decoration: underline;
-      color: var(--pgn-color-info-700) !important;
+      color: $info-700 !important;
     }
   }
 }
 
 .email-suggestion-alert-warning {
-  color: var(--pgn-color-info-500) !important;
+  color: $info-500 !important;
 
   &:hover {
     text-decoration: underline;
-    color: var(--pgn-color-info-700) !important;
+    color: $info-700 !important;
   }
 }
 
@@ -56,7 +56,7 @@
   line-height: 24px;
   font-size: 12px;
   font-weight: normal;
-  color: var(--pgn-color-primary-700);
+  color: $primary-700;
 }
 
 .username-suggestion--label {
@@ -99,7 +99,7 @@
   }
 }
 
-@media (--pgn-size-breakpoint-max-width-sm) {
+@media (max-width: map-get($grid-breakpoints, "sm")) {
   .username-scroll-suggested--form-field {
     width: 15rem;
   }

src/sass/_style.scss

@@ -40,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .main-content {
-  padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
+  @extend .pt-4;
   min-width: 464px !important;
 }
 
@@ -80,15 +80,15 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 .alert-link {
   font-weight: normal;
   text-decoration: underline;
-  color: var(--pgn-color-info-300) !important;
+  color: $info-300 !important;
 
   &:hover {
-    color: var(--pgn-color-info-500) !important;
+    color: $info-500 !important;
   }
 }
 
 .form-control {
-  background-color: var(--pgn-color-white) !important;
+  background-color: $white !important;
   font-size: 0.875rem;
   line-height: 1.5;
   height: 2.75rem;
@@ -103,11 +103,11 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   margin-bottom: 1rem;
   font-size: 14px;
 
-  background-color: var(--pgn-color-white);
-  border: 1px solid var(--pgn-color-primary-base);
+  background-color: $white;
+  border: 1px solid $primary;
   width: 224px;
   height: 36px;
-  color: var(--pgn-color-primary-base);
+  color: $primary;
 
   .btn-tpa__image-icon{
     background-color: transparent;
@@ -132,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-tpa__font-container {
-  background-color: var(--pgn-color-primary-base);
-  color: var(--pgn-color-white);
+  background-color: $primary;
+  color: $white;
   font-size: 11px;
 
   margin-left: -6px;
@@ -143,7 +143,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-oa2-facebook {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $facebook-blue;
   background-color: $facebook-blue;
 
@@ -151,12 +151,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $facebook-focus-blue;
     border: 1px solid $facebook-focus-blue;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-google-oauth2 {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $google-blue;
   background-color: $google-blue;
 
@@ -171,12 +171,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $google-focus-blue;
     border: 1px solid $google-focus-blue;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-apple-id {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $apple-black;
   background-color: $apple-black;
   font-size: 16px;
@@ -190,12 +190,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $apple-focus-black;
     border: 1px solid $apple-focus-black;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-azuread-oauth2 {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $microsoft-black;
   background-color: $microsoft-black;
 
@@ -203,7 +203,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $microsoft-focus-black;
     border: 1px solid $microsoft-focus-black;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
@@ -214,8 +214,9 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .institute-icon {
-  margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important;
-  color: var(--pgn-color-gray-base) !important;
+  @extend .mr-1;
+  @extend .text-gray;
+
   display: inline-block;
   margin-bottom: 0.25rem;
   height: 18px;
@@ -231,7 +232,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .invalid-feedback {
-  color: var(--pgn-color-red);
+  color: $red;
 }
 
 .full-vertical-height {
@@ -289,22 +290,22 @@ select.form-control {
 
 #password-requirement-left {
   opacity: 1;
-  font-size: var(--pgn-typography-font-size-xs) !important;
+  @extend .x-small;
   filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   right: 0.2rem !important;
   .tooltip-inner {
-    background: var(--pgn-color-white);
+    background: $white;
     display: block;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
   }
   .arrow::before {
-    border-left-color: var(--pgn-color-white);
+    border-left-color: $white;
   }
 }
 
 #password-requirement-top {
-  font-size: var(--pgn-typography-font-size-xs) !important;
-  filter: drop-shadow(var(--pgn-elevation-box-shadow-level-2)) drop-shadow(var(--pgn-elevation-box-shadow-level-2)) !important;
+  @extend .x-small;
+  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   opacity: 1;
   width: 90%;
   bottom: 10px !important;
@@ -313,30 +314,30 @@ select.form-control {
 
   .tooltip-inner {
     min-width: 464px !important;
-    background: var(--pgn-color-white);
+    background: $white;
     display: block;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
   }
   .arrow::before {
-    border-top-color: var(--pgn-color-white);
+    border-top-color: $white;
   }
 
 }
 
 .yellow-border {
-  border: 2px solid var(--pgn-color-accent-b);
+  border: 2px solid $accent-b;
 }
 
 .institutions__heading {
-  color: var(--pgn-color-primary-700);
+  color: $primary-700;
 }
 
 .logistration-button {
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
 }
 
 .logistration-button:hover{
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
   text-decoration: none;
 }
 
@@ -351,7 +352,7 @@ select.form-control {
   width: 2.3rem;
 }
 .has-floating-label {
-  color: var(--pgn-color-gray-500);
+  color: $gray-500;
 }
 
 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -365,7 +366,7 @@ select.form-control {
 
 .form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
     font-size: 16px;
-    color: var(--pgn-color-primary-700);
+    color: $primary-700;
 }
 
 .form-group__form-field .form-control:not([value='']):not(:focus) ~
@@ -443,14 +444,14 @@ select.form-control {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--pgn-color-light-200);
+  background-color: $light-200;
 }
 
 .institutions--provider-link {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
-  color: var(--pgn-color-primary-700)
+  color: $primary-700
 }
 
 .pgn__form-control-decorator-trailing {