Skip to content

Commit

Permalink
perf: add css-variables support to redwood (#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
bra-i-am authored May 28, 2024
1 parent 4c9008d commit d47c6f5
Show file tree
Hide file tree
Showing 13 changed files with 3,392 additions and 1,315 deletions.
4,596 changes: 3,346 additions & 1,250 deletions package-lock.json

Large diffs are not rendered by default.

15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"quality": "npm run lint-fix && npm run test",
"watch-tests": "jest --watch",
"snapshot": "fedx-scripts jest --updateSnapshot",
"prepare": "husky install"
"prepare": "husky install",
"replace-variables": "paragon replace-variables -p src -t usage"
},
"author": "edX",
"license": "AGPL-3.0",
Expand All @@ -28,17 +29,17 @@
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/browserslist-config": "^1.1.0",
"@edx/frontend-component-footer": "13.1.0",
"@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.4-alpha.1",
"@edx/frontend-enterprise-hotjar": "3.0.0",
"@edx/frontend-platform": "7.1.4",
"@edx/frontend-platform": "npm:@edunext/frontend-platform@7.1.2-alpha.1",
"@edx/openedx-atlas": "^0.6.0",
"@edx/react-unit-test-utils": "2.0.0",
"@edx/react-unit-test-utils": "npm:@edunext/react-unit-test-utils@2.0.0-alpha.1",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.2.0",
"@openedx/frontend-plugin-framework": "^1.0.2",
"@openedx/paragon": "^22.2.2",
"@openedx/paragon": "23.0.0-alpha.1",
"@optimizely/react-sdk": "^2.9.2",
"@redux-beacon/segment": "^1.1.0",
"@reduxjs/toolkit": "^1.6.1",
Expand Down Expand Up @@ -81,7 +82,7 @@
},
"devDependencies": {
"@edx/reactifex": "^2.1.1",
"@openedx/frontend-build": "13.1.4",
"@openedx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.1.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.0",
"axios-mock-adapter": "^1.20.0",
Expand All @@ -95,4 +96,4 @@
"redux-mock-store": "^1.5.4",
"semantic-release": "^20.1.3"
}
}
}
7 changes: 2 additions & 5 deletions src/App.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
// frontend-app-*/src/index.scss
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
@import "~@edx/brand/paragon/fonts";
@import "~@edx/brand/paragon/variables";
@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work

@import "~@edx/frontend-component-footer/dist/_footer";

Expand Down
10 changes: 4 additions & 6 deletions src/containers/CourseCard/CourseCard.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
@import "@openedx/paragon/scss/core/core";

.course-card {
.card {
.pgn__card-wrapper-image-cap.vertical {
display: flex;
min-height: $card-image-vertical-max-height;
min-height: var(--pgn-size-card-image-vertical-max-height);
}
.pgn__card-image-cap {
border-bottom-left-radius: 0 !important;
Expand Down Expand Up @@ -53,11 +51,11 @@
> .alert {
border-radius: 0;
box-shadow: none;
padding: map-get($spacers, 3) map-get($spacers, 4);
padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);

&:last-of-type {
border-bottom-left-radius: $alert-border-radius;
border-bottom-right-radius: $alert-border-radius;
border-bottom-left-radius: var(--pgn-size-alert-border-radius);
border-bottom-right-radius: var(--pgn-size-alert-border-radius);
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import "~@edx/brand/paragon/variables";
@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";

a.course-card-title {
color: $black;
color: var(--pgn-color-black);
}
12 changes: 5 additions & 7 deletions src/containers/CoursesPanel/NoCoursesView/index.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
@import "@openedx/paragon/scss/core/core";

#no-courses-content-view {
border: 2px solid $light-400;
border: 2px solid var(--pgn-color-light-400);
flex-direction: column;
padding-bottom: map-get($spacers, 5);
padding-top: map-get($spacers, 5);
padding-bottom: var(--pgn-spacing-spacer-5);
padding-top: var(--pgn-spacing-spacer-5);
height: 100%;

& > * {
margin-top: map-get($spacers, 3);
margin-bottom: map-get($spacers, 3);
margin-top: var(--pgn-spacing-spacer-3);
margin-bottom: var(--pgn-spacing-spacer-3);
}
}

12 changes: 5 additions & 7 deletions src/containers/CoursesPanel/index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "@openedx/paragon/scss/core/core";

.course-list-heading-container {
display: flex;
flex-direction: row;
Expand All @@ -8,8 +6,8 @@
}

.course-list-title {
font-size: $h2-font-size;
margin: map-get($spacers, 3) 0;
font-size: var(--pgn-typography-font-size-h2);
margin: var(--pgn-spacing-spacer-3) 0;
}

.course-list-loading {
Expand All @@ -24,7 +22,7 @@
align-self: center;
}

@include media-breakpoint-down(md) {
@media (--max-pgn-size-breakpoint-md){
.course-list-heading-container {
flex-direction: column-reverse;
align-items: flex-start;
Expand All @@ -36,7 +34,7 @@
}

.course-list-title {
font-size: $h3-font-size;
margin: map-get($spacers, 2) 0;
font-size: var(--pgn-typography-font-size-h3);
margin: var(--pgn-spacing-spacer-2) 0;
}
}
14 changes: 6 additions & 8 deletions src/containers/Dashboard/index.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
@import "@openedx/paragon/scss/core/core";

.course-list-column {
padding: 0 map-get($spacers, 4);
padding: 0 var(--pgn-spacing-spacer-4);
}

.sidebar-column {
padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
padding: 0 var(--pgn-spacing-spacer-3) 0 var(--pgn-spacing-spacer-1);
}

@include media-breakpoint-down(lg) {
@media (--max-pgn-size-breakpoint-lg) {
.sidebar-column {
// grid are inheriting dir="ltr" from the body, so we need to override it
[dir=ltr] & {
padding: 0 map-get($spacers, 3);
padding: 0 var(--pgn-spacing-spacer-3);
}
[dir=rtl] & {
padding: 0 map-get($spacers, 3);
padding: 0 var(--pgn-spacing-spacer-3);
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.confirm-email-now-button {
text-decoration: underline !important;
}
}
22 changes: 10 additions & 12 deletions src/containers/MasqueradeBar/index.scss
Original file line number Diff line number Diff line change
@@ -1,38 +1,36 @@
@import "@openedx/paragon/scss/core/core";

.masquerade-bar {
display: flex;
align-items: flex-start;
padding: map-get($spacers, 3);
margin-bottom: map-get($spacers, 2);
padding: var(--pgn-spacing-spacer-3);
margin-bottom: var(--pgn-spacing-spacer-2);

.masquerade-form-label {
padding: map-get($spacers, 2) map-get($spacers, 3);
padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
display: flex;
align-items: center;
margin-bottom: 0;
white-space: nowrap;

&>.pgn__icon {
margin-right: map-get($spacers, 3);
margin-right: var(--pgn-spacing-spacer-3);
}
}

.masquerade-form-input {
margin-bottom: 0;
flex-grow: 1;
max-width: map-get($grid-breakpoints, 'md');
max-width: var(--pgn-size-breakpoint-min-width-md);
}

.masquerade-chip {
padding: map-get($spacers, 2) map-get($spacers, 3);
font-size: $font-size-base;
padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
font-size: var(--pgn-typography-font-size-base);
}
}

@include media-breakpoint-down(md) {
@media (--max-pgn-size-breakpoint-md){
.masquerade-bar {
margin: auto;
padding: map-get($spacers, 3) map-get($spacers, 4);
padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
}
}
}
6 changes: 2 additions & 4 deletions src/widgets/ProductRecommendations/index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "@openedx/paragon/scss/core/core";

$horizontal-card-gap: 20px;
$vertical-card-gap: 24px;

Expand Down Expand Up @@ -53,7 +51,7 @@ $vertical-card-gap: 24px;
gap: $vertical-card-gap $horizontal-card-gap;
}

@include media-breakpoint-down(lg) {
@media (--max-pgn-size-breakpoint-lg) {
overflow-x: scroll;
}
}
Expand All @@ -68,6 +66,6 @@ $vertical-card-gap: 24px;
transform: translateX(-50%);
width: 100vw;
height: 100%;
background-color: $light-200;
background-color: var(--pgn-color-light-200);
z-index: -1;
}
2 changes: 0 additions & 2 deletions src/widgets/RecommendationsPanel/components/index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "@openedx/paragon/scss/core/core";

.card-link{
display: block !important;
margin: 0.5rem 0 0.5rem 0 !important;
Expand Down
6 changes: 2 additions & 4 deletions src/widgets/RecommendationsPanel/index.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
@import "@openedx/paragon/scss/core/core";

.explore-courses-btn {
padding-top: 16px;
}

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

.recommendations-loading {
display: flex;
justify-content: center;
align-items: center;
height: 7.813rem;
background: $light-200;
background: var(--pgn-color-light-200);
}

0 comments on commit d47c6f5

Please sign in to comment.