Skip to content

Commit

Permalink
feat: update MFE to use dynamically injected theme
Browse files Browse the repository at this point in the history 
Updates the MFE to use alpha version of frontend build, platform and paragon to
support runtime theming.
  • Loading branch information
@ArturGaspar
ArturGaspar committed Aug 2, 2024
1 parent b8a808f commit 955c7ec
Show file tree
Hide file tree
Showing 9 changed files with 946 additions and 154 deletions.
866 changes: 824 additions & 42 deletions package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@
"url": "https://github.com/openedx/frontend-app-authn/issues"
},
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-platform": "7.1.3",
"@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17",
"@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v7.1.2-token-asu-moe/edx-frontend-platform-7.1.2.tgz",
"@edx/openedx-atlas": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "6.5.2",
"@fortawesome/free-brands-svg-icons": "6.5.2",
"@fortawesome/free-solid-svg-icons": "6.5.2",
"@fortawesome/react-fontawesome": "0.2.0",
"@openedx/paragon": "^22.1.1",
"@openedx/paragon": "23.0.0-alpha.1",
"@optimizely/react-sdk": "^2.9.1",
"@redux-devtools/extension": "3.3.0",
"@testing-library/react": "^12.1.5",
Expand Down Expand Up @@ -73,7 +73,7 @@
"devDependencies": {
"@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0",
"@openedx/frontend-build": "13.1.4",
"@openedx/frontend-build": "github:open-craft/frontend-build#asu-moe/redwood-css",
"babel-plugin-formatjs": "10.5.14",
"eslint-plugin-import": "2.29.1",
"glob": "7.2.3",
Expand Down
11 changes: 7 additions & 4 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
@import "~@edx/brand/paragon/fonts";
@import "~@edx/brand/paragon/variables";
@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";
/* @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;
@use "@edx/brand/paragon/css/core/custom-media-breakpoints.css" as brandCustomMediaBreakpoints;

@import "sass/style";
80 changes: 40 additions & 40 deletions src/sass/_base_component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
.layout {
display: flex;

@include media-breakpoint-down('lg') {
@media (--pgn-size-breakpoint-max-width-lg) {
flex-direction: column;
justify-content: center;
align-items: center;
}

@include media-breakpoint-up('xl') {
@media (--pgn-size-breakpoint-min-width-xl) {
justify-content: space-between;
}
}

.content {
@include media-breakpoint-up('xl') {
@media (--pgn-size-breakpoint-min-width-xl) {
display: flex;
justify-content: center;
width: 50vw;
Expand Down Expand Up @@ -47,7 +47,7 @@
font-weight: 700;
line-height: 1;

@include media-breakpoint-down('xl') {
@media (--pgn-size-breakpoint-max-width-xl) {
font-size: 3.75rem;
}

Expand All @@ -60,7 +60,7 @@
margin-bottom: 0.5rem;
font-weight: 700;

@include media-breakpoint-down('xl') {
@media (--pgn-size-breakpoint-max-width-xl) {
font-size: 1.375rem;
line-height: 1.75rem;
}
Expand All @@ -72,7 +72,7 @@
}

.large-screen-left-container {
@include media-breakpoint-down('xl') {
@media (--pgn-size-breakpoint-max-width-xl) {
flex: 0 0 25%;
max-width: 25%;
}
Expand All @@ -87,89 +87,89 @@
height: 0.25rem;
background-image: linear-gradient(
102.02deg,
$brand-700,
$brand-700 20%,
$brand 20%,
var(--pgn-color-brand-700),
var(--pgn-color-brand-700) 20%,
var(--pgn-color-brand-base) 20%,
);
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 {
display: flex;
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700,
$brand-700 10%,
$brand 10%,
$brand 90%,
$primary-700 90%,
$primary-700 100%,
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 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,
$brand-700 10%,
$brand 10%,
$brand 65%,
$primary-700 65%,
$primary-700 75%,
$accent-a 75%,
$accent-a 75%
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;
}
}

.extra-large-screen-top-stripe { display: none; }

@include media-breakpoint-up('xl') {
@media (--pgn-size-breakpoint-min-width-xl) {
.extra-large-screen-top-stripe {
display: flex;
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700 10%,
$brand 10%,
$brand 45%,
$primary-700 45%,
$primary-700 55%,
$accent-a 55%,
$accent-a 75%,
$info-200 75%,
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: $light-200;
fill: var(--pgn-color-light-200);
overflow: hidden;
position: absolute;
}

.large-screen-svg-primary {
fill: $primary-400;
fill: var(--pgn-color-primary-400);
}

.medium-screen-svg-light,
.medium-screen-svg-primary {
fill: $light-200;
fill: var(--pgn-color-light-200);
overflow: inherit;
position: absolute;
}

.medium-screen-svg-primary {
fill: $primary-400;
fill: var(--pgn-color-primary-400);
}

[dir=rtl]{
Expand All @@ -184,20 +184,20 @@
.small-yellow-line {
width: 80px;
height: 0;
border: 2px solid $accent-b;
border: 2px solid var(--pgn-color-accent-b);
transform: rotate(102.02deg);
}

.medium-yellow-line {
width: 120px;
height: 0;
border: 3px solid $accent-b;
border: 3px solid var(--pgn-color-accent-b);
transform: rotate(102.02deg);
}

.large-yellow-line {
width: 240px;
height: 0;
border: 3px solid $accent-b;
border: 3px solid var(--pgn-color-accent-b);
transform: rotate(102.02deg);
}
2 changes: 1 addition & 1 deletion src/sass/_progressive_profiling_page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
margin-bottom: 0.5rem;
font-weight: 700;

@include media-breakpoint-down('md') {
@media (--pgn-size-breakpoint-max-width-md) {
line-height: 1.5rem;
font-size: 1.125rem;
}
Expand Down
28 changes: 14 additions & 14 deletions src/sass/_recommendations_card_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,52 +64,52 @@ $header-height: 104px;
}

&.light {
background-color: $white;
background-color: var(--pgn-color-white);

.title {
color: $black;
color: var(--pgn-color-black);
}

.subtitle {
color: $gray-700;
color: var(--pgn-color-gray-700);
}

.badge {
background-color: $light-500;
color: $black;
background-color: var(--pgn-color-light-500);
color: var(--pgn-color-black);
}

.footer-content {
color: $gray-700;
color: var(--pgn-color-gray-700);
}
}

&.dark {
background-color: $primary-500;
background-color: var(--pgn-color-primary-500);

.pgn__card-header-title-md {
color: $white;
color: var(--pgn-color-white);
}

.pgn__card-header-subtitle-md {
color: $light-200;
color: var(--pgn-color-light-200);
}

.title {
color: $white;
color: var(--pgn-color-white);
}

.subtitle {
color: $light-200;
color: var(--pgn-color-light-200);
}

.badge {
background-color: $dark-200;
color: $white;
background-color: var(--pgn-color-dark-200);
color: var(--pgn-color-white);
}

.footer-content {
color: $light-200;
color: var(--pgn-color-light-200);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/sass/_recommendations_page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ $card-gap: 24px;
.recommendations-container__card-list {
gap: $card-gap $card-gap;

@include media-breakpoint-down(sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
margin-bottom: 0 !important;
}

.recommendation-card {
flex: 0 1 100%;
cursor: pointer;

@include media-breakpoint-up(sm) {
@media (--pgn-size-breakpoint-min-width-sm) {
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});
}

@include media-breakpoint-up(lg) {
@media (--pgn-size-breakpoint-min-width-lg) {
flex: 0 1 calc(25% - #{$card-gap - 6});
}
}
Expand Down
12 changes: 6 additions & 6 deletions src/sass/_registration.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@
}

.alert-link {
color: $primary !important;
color: var(--pgn-color-primary-base) !important;

&:hover {
text-decoration: underline;
color: $info-700 !important;
color: var(--pgn-color-info-700) !important;
}
}
}

.email-suggestion-alert-warning {
color: $info-500 !important;
color: var(--pgn-color-info-500) !important;

&:hover {
text-decoration: underline;
color: $info-700 !important;
color: var(--pgn-color-info-700) !important;
}
}

Expand All @@ -56,7 +56,7 @@
line-height: 24px;
font-size: 12px;
font-weight: normal;
color: $primary-700;
color: var(--pgn-color-primary-700);
}

.username-suggestion--label {
Expand Down Expand Up @@ -99,7 +99,7 @@
}
}

@media (max-width: map-get($grid-breakpoints, "sm")) {
@media (--pgn-size-breakpoint-max-width-xs) {
.username-scroll-suggested--form-field {
width: 15rem;
}
Expand Down
Loading

0 comments on commit 955c7ec

Please sign in to comment.