@openedx/frontend-app-authn 1.0.0-alpha.0 → 1.0.0-alpha.10

package/dist/reset-password/messages.js

@@ -0,0 +1,87 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    'sign.in': {
+        id: 'sign.in',
+        defaultMessage: 'Sign in',
+        description: 'Sign in toggle text',
+    },
+    'reset.password.page.title': {
+        id: 'reset.password.page.title',
+        defaultMessage: 'Reset Password | {siteName}',
+        description: 'page title',
+    },
+    'reset.password': {
+        id: 'reset.password',
+        defaultMessage: 'Reset password',
+        description: 'The page heading and button text for reset password page.',
+    },
+    'reset.password.page.instructions': {
+        id: 'reset.password.page.instructions',
+        defaultMessage: 'Enter and confirm your new password.',
+        description: 'Instructions message for reset password page.',
+    },
+    'new.password.label': {
+        id: 'new.password.label',
+        defaultMessage: 'New password',
+        description: 'New password field label for the reset password page.',
+    },
+    'confirm.password.label': {
+        id: 'confirm.password.label',
+        defaultMessage: 'Confirm password',
+        description: 'Confirm password field label for the reset password page.',
+    },
+    // validation errors
+    'password.validation.message': {
+        id: 'password.validation.message',
+        defaultMessage: 'Password criteria has not been met',
+        description: 'Error message for empty or invalid password',
+    },
+    'passwords.do.not.match': {
+        id: 'passwords.do.not.match',
+        defaultMessage: 'Passwords do not match',
+        description: 'Password format error.',
+    },
+    'confirm.your.password': {
+        id: 'confirm.your.password',
+        defaultMessage: 'Confirm your password',
+        description: 'Field validation message when confirm password is empty',
+    },
+    // alert banner strings
+    'reset.password.failure.heading': {
+        id: 'reset.password.failure.heading',
+        defaultMessage: 'We couldn\'t reset your password.',
+        description: 'Heading for reset password request failure',
+    },
+    'reset.password.form.submission.error': {
+        id: 'reset.password.form.submission.error',
+        defaultMessage: 'Please check your responses and try again.',
+        description: 'Error message for reset password page',
+    },
+    'reset.server.rate.limit.error': {
+        id: 'reset.server.rate.limit.error',
+        defaultMessage: 'Too many requests.',
+        description: 'Too many request at server end point',
+    },
+    'reset.password.success.heading': {
+        id: 'reset.password.success.heading',
+        defaultMessage: 'Password reset complete.',
+        description: 'Heading for alert box when reset password is successful',
+    },
+    'reset.password.success': {
+        id: 'reset.password.success',
+        defaultMessage: 'Your password has been reset. Sign in to your account.',
+        description: 'Reset password success message',
+    },
+    'internal.server.error': {
+        id: 'internal.server.error',
+        defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
+        description: 'Error message that appears when server responds with 500 error code',
+    },
+    'rate.limit.error': {
+        id: 'rate.limit.error',
+        defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',
+        description: 'Error message that appears when server responds with 429 error code',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/reset-password/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../src/reset-password/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,SAAS;QACb,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,qBAAqB;KACnC;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,2BAA2B;QAC/B,cAAc,EAAE,6BAA6B;QAC7C,WAAW,EAAE,YAAY;KAC1B;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,gBAAgB;QACpB,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,2DAA2D;KACzE;IACD,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,sCAAsC;QACtD,WAAW,EAAE,+CAA+C;KAC7D;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,oBAAoB;QACxB,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,uDAAuD;KACrE;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wBAAwB;QAC5B,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,2DAA2D;KACzE;IACD,oBAAoB;IACpB,6BAA6B,EAAE;QAC7B,EAAE,EAAE,6BAA6B;QACjC,cAAc,EAAE,oCAAoC;QACpD,WAAW,EAAE,6CAA6C;KAC3D;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wBAAwB;QAC5B,cAAc,EAAE,wBAAwB;QACxC,WAAW,EAAE,wBAAwB;KACtC;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,uBAAuB;QAC3B,cAAc,EAAE,uBAAuB;QACvC,WAAW,EAAE,yDAAyD;KACvE;IACD,uBAAuB;IACvB,gCAAgC,EAAE;QAChC,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,mCAAmC;QACnD,WAAW,EAAE,4CAA4C;KAC1D;IACD,sCAAsC,EAAE;QACtC,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,4CAA4C;QAC5D,WAAW,EAAE,uCAAuC;KACrD;IACD,+BAA+B,EAAE;QAC/B,EAAE,EAAE,+BAA+B;QACnC,cAAc,EAAE,oBAAoB;QACpC,WAAW,EAAE,sCAAsC;KACpD;IACD,gCAAgC,EAAE;QAChC,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,0BAA0B;QAC1C,WAAW,EAAE,yDAAyD;KACvE;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wBAAwB;QAC5B,cAAc,EAAE,wDAAwD;QACxE,WAAW,EAAE,gCAAgC;KAC9C;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,uBAAuB;QAC3B,cAAc,EAAE,oFAAoF;QACpG,WAAW,EAAE,qEAAqE;KACnF;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kBAAkB;QACtB,cAAc,EAAE,uFAAuF;QACvG,WAAW,EAAE,qEAAqE;KACnF;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  'sign.in': {\n    id: 'sign.in',\n    defaultMessage: 'Sign in',\n    description: 'Sign in toggle text',\n  },\n  'reset.password.page.title': {\n    id: 'reset.password.page.title',\n    defaultMessage: 'Reset Password | {siteName}',\n    description: 'page title',\n  },\n  'reset.password': {\n    id: 'reset.password',\n    defaultMessage: 'Reset password',\n    description: 'The page heading and button text for reset password page.',\n  },\n  'reset.password.page.instructions': {\n    id: 'reset.password.page.instructions',\n    defaultMessage: 'Enter and confirm your new password.',\n    description: 'Instructions message for reset password page.',\n  },\n  'new.password.label': {\n    id: 'new.password.label',\n    defaultMessage: 'New password',\n    description: 'New password field label for the reset password page.',\n  },\n  'confirm.password.label': {\n    id: 'confirm.password.label',\n    defaultMessage: 'Confirm password',\n    description: 'Confirm password field label for the reset password page.',\n  },\n  // validation errors\n  'password.validation.message': {\n    id: 'password.validation.message',\n    defaultMessage: 'Password criteria has not been met',\n    description: 'Error message for empty or invalid password',\n  },\n  'passwords.do.not.match': {\n    id: 'passwords.do.not.match',\n    defaultMessage: 'Passwords do not match',\n    description: 'Password format error.',\n  },\n  'confirm.your.password': {\n    id: 'confirm.your.password',\n    defaultMessage: 'Confirm your password',\n    description: 'Field validation message when confirm password is empty',\n  },\n  // alert banner strings\n  'reset.password.failure.heading': {\n    id: 'reset.password.failure.heading',\n    defaultMessage: 'We couldn\\'t reset your password.',\n    description: 'Heading for reset password request failure',\n  },\n  'reset.password.form.submission.error': {\n    id: 'reset.password.form.submission.error',\n    defaultMessage: 'Please check your responses and try again.',\n    description: 'Error message for reset password page',\n  },\n  'reset.server.rate.limit.error': {\n    id: 'reset.server.rate.limit.error',\n    defaultMessage: 'Too many requests.',\n    description: 'Too many request at server end point',\n  },\n  'reset.password.success.heading': {\n    id: 'reset.password.success.heading',\n    defaultMessage: 'Password reset complete.',\n    description: 'Heading for alert box when reset password is successful',\n  },\n  'reset.password.success': {\n    id: 'reset.password.success',\n    defaultMessage: 'Your password has been reset. Sign in to your account.',\n    description: 'Reset password success message',\n  },\n  'internal.server.error': {\n    id: 'internal.server.error',\n    defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',\n    description: 'Error message that appears when server responds with 500 error code',\n  },\n  'rate.limit.error': {\n    id: 'rate.limit.error',\n    defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',\n    description: 'Error message that appears when server responds with 429 error code',\n  },\n});\n\nexport default messages;\n"]}

package/dist/routes.d.ts

@@ -0,0 +1,19 @@
+export default routes;
+declare const routes: {
+    id: string;
+    path: string;
+    lazy(): Promise<{
+        Component: () => import("react/jsx-runtime").JSX.Element;
+    }>;
+    children: ({
+        path: string;
+        element: import("react/jsx-runtime").JSX.Element;
+        handle?: undefined;
+    } | {
+        path: string;
+        handle: {
+            role: string;
+        };
+        element: import("react/jsx-runtime").JSX.Element;
+    })[];
+}[];

package/dist/routes.js

@@ -0,0 +1,76 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmbeddedRegistrationRoute, NotFoundPage, UnAuthOnlyRoute } from './common-components';
+import { confirmPasswordRole, loginPath, loginRole, notFoundPath, passwordResetConfirmPath, registerEmbeddedPath, registerPath, registerRole, resetPath, resetPasswordRole, welcomePath, welcomeRole, } from './constants';
+import { ForgotPasswordPage } from './forgot-password';
+import Logistration from './logistration/Logistration';
+import { ProgressiveProfiling } from './progressive-profiling';
+import { RegistrationPage } from './register';
+import { ResetPasswordPage } from './reset-password';
+const routes = [
+    {
+        id: 'org.openedx.frontend.route.authn.main',
+        path: '/authn',
+        lazy() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const module = yield import('./Main');
+                return { Component: module.default };
+            });
+        },
+        children: [
+            {
+                path: registerEmbeddedPath,
+                element: (_jsx(EmbeddedRegistrationRoute, { children: _jsx(RegistrationPage, {}) })),
+            },
+            {
+                path: loginPath,
+                handle: {
+                    role: loginRole,
+                },
+                element: (_jsx(UnAuthOnlyRoute, { children: _jsx(Logistration, { selectedPage: loginPath }) })),
+            },
+            {
+                path: registerPath,
+                handle: {
+                    role: registerRole,
+                },
+                element: (_jsx(UnAuthOnlyRoute, { children: _jsx(Logistration, {}) })),
+            },
+            {
+                path: resetPath,
+                handle: {
+                    role: resetPasswordRole,
+                },
+                element: (_jsx(UnAuthOnlyRoute, { children: _jsx(ForgotPasswordPage, {}) })),
+            },
+            {
+                path: `${passwordResetConfirmPath}/:token`,
+                handle: {
+                    role: confirmPasswordRole,
+                },
+                element: (_jsx(ResetPasswordPage, {})),
+            },
+            {
+                path: welcomePath,
+                handle: {
+                    role: welcomeRole,
+                },
+                element: (_jsx(ProgressiveProfiling, {})),
+            },
+            {
+                path: notFoundPath,
+                element: (_jsx(NotFoundPage, {})),
+            },
+        ]
+    }
+];
+export default routes;
+//# sourceMappingURL=routes.js.map

package/dist/routes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["../src/routes.jsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,yBAAyB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EACL,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EACvD,wBAAwB,EAAE,oBAAoB,EAAE,YAAY,EAAE,YAAY,EAC1E,SAAS,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,GACvD,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,GAAG;IACb;QACE,EAAE,EAAE,uCAAuC;QAC3C,IAAI,EAAE,QAAQ;QACR,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACtC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;QACD,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,oBAAoB;gBAC1B,OAAO,EAAE,CACP,KAAC,yBAAyB,cAAC,KAAC,gBAAgB,KAAG,GAA4B,CAC5E;aACF;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;iBAChB;gBACD,OAAO,EAAE,CACP,KAAC,eAAe,cAAC,KAAC,YAAY,IAAC,YAAY,EAAE,SAAS,GAAI,GAAkB,CAC7E;aACF;YACD;gBACE,IAAI,EAAE,YAAY;gBAClB,MAAM,EAAE;oBACN,IAAI,EAAE,YAAY;iBACnB;gBACD,OAAO,EAAE,CACP,KAAC,eAAe,cAAC,KAAC,YAAY,KAAG,GAAkB,CACpD;aACF;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE;oBACN,IAAI,EAAE,iBAAiB;iBACxB;gBACD,OAAO,EAAE,CACP,KAAC,eAAe,cAAC,KAAC,kBAAkB,KAAG,GAAkB,CAC1D;aACF;YACD;gBACE,IAAI,EAAE,GAAG,wBAAwB,SAAS;gBAC1C,MAAM,EAAE;oBACN,IAAI,EAAE,mBAAmB;iBAC1B;gBACD,OAAO,EAAE,CACP,KAAC,iBAAiB,KAAG,CACtB;aACF;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE;oBACN,IAAI,EAAE,WAAW;iBAClB;gBACD,OAAO,EAAE,CACP,KAAC,oBAAoB,KAAG,CACzB;aACF;YACD;gBACE,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CACP,KAAC,YAAY,KAAG,CACjB;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { EmbeddedRegistrationRoute, NotFoundPage, UnAuthOnlyRoute } from './common-components';\nimport {\n  confirmPasswordRole, loginPath, loginRole, notFoundPath,\n  passwordResetConfirmPath, registerEmbeddedPath, registerPath, registerRole,\n  resetPath, resetPasswordRole, welcomePath, welcomeRole,\n} from './constants';\nimport { ForgotPasswordPage } from './forgot-password';\nimport Logistration from './logistration/Logistration';\nimport { ProgressiveProfiling } from './progressive-profiling';\nimport { RegistrationPage } from './register';\nimport { ResetPasswordPage } from './reset-password';\n\nconst routes = [\n  {\n    id: 'org.openedx.frontend.route.authn.main',\n    path: '/authn',\n    async lazy() {\n      const module = await import('./Main');\n      return { Component: module.default };\n    },\n    children: [\n      {\n        path: registerEmbeddedPath,\n        element: (\n          <EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>\n        ),\n      },\n      {\n        path: loginPath,\n        handle: {\n          role: loginRole,\n        },\n        element: (\n          <UnAuthOnlyRoute><Logistration selectedPage={loginPath} /></UnAuthOnlyRoute>\n        ),\n      },\n      {\n        path: registerPath,\n        handle: {\n          role: registerRole,\n        },\n        element: (\n          <UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>\n        ),\n      },\n      {\n        path: resetPath,\n        handle: {\n          role: resetPasswordRole,\n        },\n        element: (\n          <UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>\n        ),\n      },\n      {\n        path: `${passwordResetConfirmPath}/:token`,\n        handle: {\n          role: confirmPasswordRole,\n        },\n        element: (\n          <ResetPasswordPage />\n        ),\n      },\n      {\n        path: welcomePath,\n        handle: {\n          role: welcomeRole,\n        },\n        element: (\n          <ProgressiveProfiling />\n        ),\n      },\n      {\n        path: notFoundPath,\n        element: (\n          <NotFoundPage />\n        ),\n      },\n    ]\n  }\n];\n\nexport default routes;\n"]}

package/{src → dist}/sass/_base_component.scss

@@ -1,21 +1,19 @@
-@use "@openedx/paragon/scss/core/core" as paragon;
-
 .layout {
   display: flex;
 
-  @include paragon.media-breakpoint-down('lg') {
+  @media (--pgn-size-breakpoint-max-width-lg) {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  @include paragon.media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
     justify-content: space-between;
   }
 }
 
 .content {
-  @include paragon.media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
     display: flex;
     justify-content: center;
     width: 50vw;
@@ -48,7 +46,7 @@
   font-weight: 700;
   line-height: 1;
 
-  @include paragon.media-breakpoint-down('xl') {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     font-size: 3.75rem;
   }
 
@@ -61,7 +59,7 @@
   margin-bottom: 0.5rem;
   font-weight: 700;
 
-  @include paragon.media-breakpoint-down('xl') {
+  @media (-pgn-size-breakpoint-max-width-xl) {
     font-size: 1.375rem;
     line-height: 1.75rem;
   }
@@ -73,7 +71,7 @@
 }
 
 .large-screen-left-container {
-  @include paragon.media-breakpoint-down('xl') {
+  @media (-pgn-size-breakpoint-max-width-xl) {
     flex: 0 0 25%;
     max-width: 25%;
   }
@@ -86,42 +84,46 @@
 
 .small-screen-top-stripe {
   height: 0.25rem;
-  background-image: linear-gradient(102.02deg,
-      paragon.$brand-700,
-      paragon.$brand-700 20%,
-      paragon.$brand 20%,
-    );
+  background-image: linear-gradient(
+    102.02deg,
+    var(--pgn-color-brand-700),
+    var(--pgn-color-brand-700) 20%,
+    var(--pgn-color-brand-base) 20%,
+  );
   background-repeat: no-repeat;
 }
 
-@include paragon.media-breakpoint-only('md') {
+@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
-    background-image: linear-gradient(102.02deg,
-        paragon.$brand-700,
-        paragon.$brand-700 10%,
-        paragon.$brand 10%,
-        paragon.$brand 90%,
-        paragon.$primary-700 90%,
-        paragon.$primary-700 100%,
-      );
+    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%,
+    );
     background-repeat: no-repeat;
   }
 }
 
-@include paragon.media-breakpoint-only('lg') {
+@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
-    background-image: linear-gradient(102.02deg,
-        paragon.$brand-700 10%,
-        paragon.$brand 10%,
-        paragon.$brand 65%,
-        paragon.$primary-700 65%,
-        paragon.$primary-700 75%,
-        paragon.$accent-a 75%,
-        paragon.$accent-a 75%);
+    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%
+    );
     background-repeat: no-repeat;
   }
 }
@@ -130,44 +132,45 @@
   display: none;
 }
 
-@include paragon.media-breakpoint-up('xl') {
-  .extra-large-screen-top-stripe {
-    display: flex;
-    height: 0.5rem;
-    background-image: linear-gradient(102.02deg,
-        paragon.$brand-700 10%,
-        paragon.$brand 10%,
-        paragon.$brand 45%,
-        paragon.$primary-700 45%,
-        paragon.$primary-700 55%,
-        paragon.$accent-a 55%,
-        paragon.$accent-a 75%,
-        paragon.$info-200 75%,
-      );
-    background-repeat: no-repeat;
-  }
+@media (--pgn-size-breakpoint-min-width-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%,
+  );
+   background-repeat: no-repeat;
+ }
 }
 
 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: paragon.$light-200;
+  fill: var(--pgn-color-light-200);
   overflow: hidden;
   position: absolute;
 }
 
 .large-screen-svg-primary {
-  fill: paragon.$primary-400;
+  fill: var(--pgn-color-primary-400);
 }
 
 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: paragon.$light-200;
+  fill: var(--pgn-color-light-200);
   overflow: inherit;
   position: absolute;
 }
 
 .medium-screen-svg-primary {
-  fill: paragon.$primary-400;
+  fill: var(--pgn-color-primary-400);
 }
 
 [dir=rtl] {
@@ -183,20 +186,20 @@
 .small-yellow-line {
   width: 80px;
   height: 0;
-  border: 2px solid paragon.$accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
   transform: rotate(102.02deg);
 }
 
 .medium-yellow-line {
   width: 120px;
   height: 0;
-  border: 3px solid paragon.$accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
   transform: rotate(102.02deg);
 }
 
 .large-yellow-line {
   width: 240px;
   height: 0;
-  border: 3px solid paragon.$accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
   transform: rotate(102.02deg);
 }

package/{src → dist}/sass/_progressive_profiling_page.scss

@@ -1,5 +1,3 @@
-@use "@openedx/paragon/scss/core/core" as paragon;
-
 .pp-page__button-width {
   min-width: 6rem;
 }
@@ -15,7 +13,7 @@
   margin-bottom: 0.5rem;
   font-weight: 700;
 
-  @include paragon.media-breakpoint-down('md') {
+  @media (--pgn-size-breakpoint-max-width-md) {
     line-height: 1.5rem;
     font-size: 1.125rem;
   }

package/{src → dist}/sass/_registration.scss

@@ -1,4 +1,3 @@
-@use "@openedx/paragon/scss/core/core" as paragon;
 @use "sass:map";
 
 .register-button {
@@ -25,22 +24,22 @@
     line-height: 1.25rem;
   }
 
-  .alert-link {
-    color: paragon.$primary !important;
+  .alert-link  {
+    color: var(--pgn-color-primary-base) !important;
 
     &:hover {
       text-decoration: underline;
-      color: paragon.$info-700 !important;
+      color: var(--pgn-color-info-700) !important;
     }
   }
 }
 
 .email-suggestion-alert-warning {
-  color: paragon.$info-500 !important;
+  color: var(--pgn-color-info-500) !important;
 
   &:hover {
     text-decoration: underline;
-    color: paragon.$info-700 !important;
+    color: var(--pgn-color-info-700) !important;
   }
 }
 
@@ -60,7 +59,7 @@
   line-height: 24px;
   font-size: 12px;
   font-weight: normal;
-  color: paragon.$primary-700;
+  color: var(--pgn-color-primary-700);
 }
 
 .username-suggestion--label {
@@ -69,22 +68,20 @@
   margin-right: 0.25rem;
 }
 
-.username-suggestions {
+.username__form-group-wrapper {
   position: relative;
-  margin-top: -2.5rem;
-  margin-left: 15px;
 }
 
-.username-suggestions__close__button {
-  right: 1rem;
+.username-suggestions {
   position: absolute;
+  inset: 0;
+  padding-left: 15px;
+  z-index: 100;
 }
 
-.username-suggestions__error {
-  position: relative;
-  margin-top: -13.7%;
-  margin-bottom: 11%;
-  margin-left: 15px;
+.username-suggestions__close__button {
+  right: 1rem;
+  position: absolute;
 }
 
 .username-scroll-suggested--form-field {
@@ -104,7 +101,7 @@
   }
 }
 
-@media (max-width: map.get(paragon.$grid-breakpoints, "sm")) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .username-scroll-suggested--form-field {
     width: 15rem;
   }