Merge pull request #5 from eduNEXT/jipm/added-css-variables-support-sumac

jignaciopm · web-flow · commit fa0c1903b9c2 · 2025-01-22T10:22:33.000-04:00
feat: add css variables support sumac
diff --git a/.env b/.env
@@ -42,3 +42,4 @@ ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
+PARAGON_THEME_URLS={}
diff --git a/.env.development b/.env.development
@@ -48,3 +48,4 @@ ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
+PARAGON_THEME_URLS={}
diff --git a/.env.test b/.env.test
@@ -47,3 +47,4 @@ ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=true
 ENABLE_PROGRAMS=false
+PARAGON_THEME_URLS={}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",
@@ -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",
diff --git a/src/App.scss b/src/App.scss
@@ -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";
diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss
@@ -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;
@@ -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);
       }
     }
 
diff --git a/src/containers/CourseCard/components/CourseCardDetails/index.scss b/src/containers/CourseCard/components/CourseCardDetails/index.scss
@@ -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);
 }
diff --git a/src/containers/CoursesPanel/NoCoursesView/index.scss b/src/containers/CoursesPanel/NoCoursesView/index.scss
@@ -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);
   }
 }
 
diff --git a/src/containers/CoursesPanel/index.scss b/src/containers/CoursesPanel/index.scss
@@ -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;
@@ -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 {
@@ -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;
@@ -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;
   }
 }
diff --git a/src/containers/Dashboard/index.scss b/src/containers/Dashboard/index.scss
@@ -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);
     }
   }
-}
+}
diff --git a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/ConfirmEmailBanner.scss b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/ConfirmEmailBanner.scss
@@ -1,3 +1,3 @@
 .confirm-email-now-button {
   text-decoration: underline !important;
-}
+}
diff --git a/src/containers/MasqueradeBar/index.scss b/src/containers/MasqueradeBar/index.scss
@@ -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);
   }
-}
+}
diff --git a/src/containers/SelectSessionModal/__snapshots__/index.test.jsx.snap b/src/containers/SelectSessionModal/__snapshots__/index.test.jsx.snap
@@ -173,4 +173,4 @@ exports[`SelectSessionModal snapshot modal without leave option  1`] = `
     </Button>
   </ActionRow>
 </ModalDialog>
-`;
+`;
diff --git a/webpack.dev-tutor.config.js b/webpack.dev-tutor.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,5 @@`
`1`		`-@import "~@edx/brand/paragon/variables";`
`2`		`-@import "~@openedx/paragon/scss/core/core";`
`3`		`-@import "~@edx/brand/paragon/overrides";`
	`1`	`+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;`
`4`	`2`
`5`	`3`	`a.course-card-title {`
`6`		`- color: $black;`
	`4`	`+ color: var(--pgn-color-black);`
`7`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "@openedx/paragon/scss/core/core";`
	`1`	`+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;`
`2`	`2`
`3`	`3`	`.course-list-heading-container {`
`4`	`4`	`display: flex;`
`@@ -8,8 +8,8 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.course-list-title {`
`11`		`- font-size: $h2-font-size;`
`12`		`- margin: map-get($spacers, 3) 0;`
	`11`	`+ font-size: var(--pgn-typography-font-size-h2-base);`
	`12`	`+ margin: var(--pgn-spacing-spacer-3) 0;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.course-list-loading {`
`@@ -24,7 +24,7 @@`
`24`	`24`	`align-self: center;`
`25`	`25`	`}`
`26`	`26`
`27`		`-@include media-breakpoint-down(md) {`
	`27`	`+@media (--max-pgn-size-breakpoint-md) {`
`28`	`28`	`.course-list-heading-container {`
`29`	`29`	`flex-direction: column-reverse;`
`30`	`30`	`align-items: flex-start;`
`@@ -36,7 +36,7 @@`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.course-list-title {`
`39`		`- font-size: $h3-font-size;`
`40`		`- margin: map-get($spacers, 2) 0;`
	`39`	`+ font-size: var(--pgn-typography-font-size-h3-base);`
	`40`	`+ margin: var(--pgn-spacing-spacer-2) 0;`
`41`	`41`	`}`
`42`	`42`	`}`