Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat!: add design tokens support (#1504)

Browse Source 
BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

Co-authored-by: Diana Olarte <diana.olarte@edunext.co>
This commit is contained in:
Brian Smith
2025-06-18 14:29:11 -04:00
committed by GitHub
parent 486d0bfd37
commit da5a2e31b6
12 changed files with 7396 additions and 2549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

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

2
.env.development
View File

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

1
.env.test
View File

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

9720
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -36,12 +36,12 @@
"@fortawesome/free-brands-svg-icons": "6.7.2", "@fortawesome/free-brands-svg-icons": "6.7.2",
"@fortawesome/free-solid-svg-icons": "6.7.2", "@fortawesome/free-solid-svg-icons": "6.7.2",
"@fortawesome/react-fontawesome": "0.2.2", "@fortawesome/react-fontawesome": "0.2.2",
"@openedx/paragon": "^22.16.0", "@openedx/paragon": "^23.4.2",
"@optimizely/react-sdk": "^2.9.1", "@optimizely/react-sdk": "^2.9.1",
"@redux-devtools/extension": "3.3.0", "@redux-devtools/extension": "3.3.0",
"@testing-library/react": "^16.2.0", "@testing-library/react": "^16.2.0",
"algoliasearch": "^4.14.3", "algoliasearch": "^4.14.3",
"algoliasearch-helper": "^3.14.0", "algoliasearch-helper": "^3.26.0",
"classnames": "2.5.1", "classnames": "2.5.1",
"core-js": "3.43.0", "core-js": "3.43.0",
"fastest-levenshtein": "1.0.16", "fastest-levenshtein": "1.0.16",
@@ -69,12 +69,13 @@
"devDependencies": { "devDependencies": {
"@edx/browserslist-config": "^1.1.1", "@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0", "@edx/reactifex": "1.1.0",
"@openedx/frontend-build": "^14.4.2", "@openedx/frontend-build": "^14.6.1",
"babel-plugin-formatjs": "10.5.39", "babel-plugin-formatjs": "10.5.39",
"eslint-plugin-import": "2.31.0", "eslint-plugin-import": "2.31.0",
"glob": "7.2.3", "glob": "7.2.3",
"history": "5.3.0", "history": "5.3.0",
"jest": "30.0.0", "jest": "30.0.0",
"react-test-renderer": "^18.3.1" "react-test-renderer": "^18.3.1",
"ts-jest": "^29.4.0"
} }
} }

6
src/index.scss
View File

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

80
src/sass/_base_component.scss
View File

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

2
src/sass/_progressive_profiling_page.scss
View File

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

28
src/sass/_recommendations_card_base.scss
View File

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

8
src/sass/_recommendations_page.scss
View File

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

12
src/sass/_registration.scss
View File

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

75
src/sass/_style.scss
View File

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