Skip to content

Commit

Permalink
Merge pull request #21 from open-craft/artur/asu-moe/redwood-css
Browse files Browse the repository at this point in the history 
feat: update MFE to use dynamically injected theme
  • Loading branch information
@ArturGaspar
ArturGaspar authored Aug 27, 2024
2 parents b8a808f + 9fe723c commit ecf542e
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 ecf542e

Please sign in to comment.