Skip to content

Commit

Permalink
feat: add css variables support sumac
Browse files Browse the repository at this point in the history
  • Loading branch information
jignaciopm committed Jan 16, 2025
1 parent 021f52b commit 75d8005
Show file tree
Hide file tree
Showing 15 changed files with 5,887 additions and 2,333 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,4 @@ ENABLE_NOTICES=''
CAREER_LINK_URL=''
ENABLE_EDX_PERSONAL_DASHBOARD=false
ENABLE_PROGRAMS=false
PARAGON_THEME_URLS={}
1 change: 1 addition & 0 deletions .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,4 @@ ENABLE_NOTICES=''
CAREER_LINK_URL=''
ENABLE_EDX_PERSONAL_DASHBOARD=false
ENABLE_PROGRAMS=false
PARAGON_THEME_URLS={}
1 change: 1 addition & 0 deletions .env.test
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,4 @@ ENABLE_NOTICES=''
CAREER_LINK_URL=''
ENABLE_EDX_PERSONAL_DASHBOARD=true
ENABLE_PROGRAMS=false
PARAGON_THEME_URLS={}
8,110 changes: 5,834 additions & 2,276 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 9 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,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 @@ -30,18 +31,19 @@
},
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-component-header": "^5.6.0",
"@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.8.0-alpha.1",
"@edx/frontend-component-footer": "github:edunext/frontend-component-footer#edunext/css-variables-14.0.0",
"@edx/frontend-enterprise-hotjar": "3.0.0",
"@edx/frontend-platform": "8.1.2",
"@edx/frontend-platform": "npm:@edunext/frontend-platform@8.1.2-alpha.1",
"@edx/openedx-atlas": "^0.6.0",
"@edx/react-unit-test-utils": "3.0.0",
"@edx/react-unit-test-utils": "npm:@edunext/react-unit-test-utils@3.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.2.0",
"@openedx/frontend-slot-footer": "^1.0.2",
"@openedx/paragon": "^22.2.2",
"@openedx/frontend-plugin-framework": "npm:@edunext/frontend-plugin-framework@1.3.0-alpha.1",
"@openedx/frontend-slot-footer": "npm:@edunext/frontend-slot-footer@1.0.2-alpha.1",
"@openedx/paragon": "^23.0.0-alpha.7",
"@redux-beacon/segment": "^1.1.0",
"@redux-devtools/extension": "3.3.0",
"@reduxjs/toolkit": "^1.6.1",
Expand Down
11 changes: 2 additions & 9 deletions src/App.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
// frontend-app-*/src/index.scss
@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;

$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-header/dist/index";
@import "~@edx/frontend-component-footer/dist/_footer";
Expand Down
10 changes: 5 additions & 5 deletions src/containers/CourseCard/CourseCard.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@import "@openedx/paragon/scss/core/core";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

.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 +53,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,5 @@
@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;

a.course-card-title {
color: $black;
color: var(--pgn-color-black);
}
12 changes: 6 additions & 6 deletions src/containers/CoursesPanel/NoCoursesView/index.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
@import "@openedx/paragon/scss/core/core";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

#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: 6 additions & 6 deletions src/containers/CoursesPanel/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "@openedx/paragon/scss/core/core";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

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

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

.course-list-loading {
Expand All @@ -24,7 +24,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 +36,7 @@
}

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

.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: 11 additions & 11 deletions src/containers/MasqueradeBar/index.scss
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
@import "@openedx/paragon/scss/core/core";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

.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);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -173,4 +173,4 @@ exports[`SelectSessionModal snapshot modal without leave option 1`] = `
</Button>
</ActionRow>
</ModalDialog>
`;
`;
Empty file added webpack.dev-tutor.config.js
Empty file.

0 comments on commit 75d8005

Please sign in to comment.