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 committed Aug 3, 2024
1 parent b8a808f commit 9fe723c
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

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
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
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
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
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
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
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
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 9fe723c

Please sign in to comment.