perf: add support of css-variables to quince

package.json

@@ -15,7 +15,8 @@
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "watch-tests": "jest --watch",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -25,10 +26,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "4.6.1",
-    "@edx/paragon": "^20.44.0",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@12.2.1-alpha.2",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@4.6.0-alpha.2",
+    "@edx/frontend-platform": "npm:@edunext/[email protected]",
+    "@edx/paragon": "npm:@openedx/[email protected]",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -74,7 +75,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "^12.7.0",
+    "@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.0.1",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "12.1.5",

src/App.scss

@@ -1,13 +1,4 @@
-// frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/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";
 

src/__snapshots__/index.test.jsx.snap

@@ -17,6 +17,7 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
       Symbol(Symbol.observable): [Function],
     }
   }
+  wrapWithRouter={true}
 >
   <App />
 </AppProvider>

src/components/FilePreview/FileCard.scss

@@ -1,7 +1,5 @@
-@import "@edx/paragon/scss/core/core";
-
 .file-card {
-  margin: map-get($spacers, 1) 0;
+ margin: var(--pgn-spacing-spacer-1) 0;
 
   .file-card-title {
     text-overflow: ellipsis;
@@ -26,8 +24,8 @@
   white-space: pre-wrap;
 }
 
-@include media-breakpoint-down(sm) {
+@media (--max-pgn-size-breakpoint-sm) {
   .file-card-title {
-    width: calc(map-get($container-max-widths, "sm")/2);
+    width: calc(var(--pgn-size-container-max-width-sm)/2);
   }
-}
+}

src/containers/ListView/ListView.scss

@@ -1,12 +1,10 @@
-@import "@edx/paragon/scss/core/core";
-
 span.pgn__icon.breadcrumb-arrow {
   width: 16px !important;
   height: 16px !important;
 };
 
 .empty-submission {
-  width: map-get($container-max-widths, "sm");
+  width: var(--pgn-size-container-max-width-sm);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,7 +13,7 @@ span.pgn__icon.breadcrumb-arrow {
   margin: auto;
 
   > img {
-    padding: map-get($spacers, 5);
+    padding: var(--pgn-spacing-spacer-5);
   }
 }
 

src/containers/ResponseDisplay/ResponseDisplay.scss

@@ -1,14 +1,12 @@
-@import "@edx/paragon/scss/core/core";
-
 .response-display {
-  padding: map-get($spacers, 0);
-  width: map-get($container-max-widths, "md");
+  padding: 0;
+  width: var(--pgn-size-container-max-width-md);
   overflow-y: hidden;
   height: fit-content;
 
   .submission-files {
     .submission-files-title {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       border-radius: calc(0.375rem - 1px);
       border-bottom: 1px solid transparent;
       transition: border-color 100ms ease 150ms;
@@ -25,13 +23,13 @@
         cursor: initial;
 
         > h3 {
-          color: $gray-300;
+          color: var(--pgn-color-gray-300);
         }
       }
     }
 
     .submission-files-body {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       padding-top: 0;
 
       .submission-files-table thead {
@@ -41,7 +39,7 @@
   }
 
   .preview-display {
-    padding: map-get($spacers, 3) 0;
+    padding: var(--pgn-spacing-spacer-3) 0;
   }
 
   .response-display-text-content {
@@ -50,12 +48,12 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--max-pgn-size-breakpoint-sm) {
   .response-display {
     width: 100%;
 
     .preview-display {
-      padding: map-get($spacers, 1) 0;
+      padding: var(--pgn-spacing-spacer-1) 0;
     }
   }
-}
+}

src/containers/ReviewActions/ReviewActions.scss

@@ -1,16 +1,16 @@
-@import "@edx/paragon/scss/core/core";
+
 
 // action reviews
 .review-actions {
-  padding: map_get($spacers, 3);
+  padding: var(--pgn-spacing-spacer-3);
   flex-direction: row;
-  background-color: $light-200;
+  background-color: var(--pgn-color-light-200);
 
   .review-actions-username {
     flex-grow: 1;
   }
   .review-actions-status {
-    margin-left: map_get($spacers, 3);
+    margin-left: var(--pgn-spacing-spacer-3);
     vertical-align: middle;
   }
   .review-actions-group {
@@ -20,18 +20,18 @@
 
     .submission-navigation {
       float: right;
-      padding: map-get($spacers, 1);
+      padding: var(--pgn-spacing-spacer-1);
     }
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--max-pgn-size-breakpoint-md)  {
   .review-actions {
     flex-direction: column;
     align-items: flex-start !important;
   }
 
   .review-actions-username {
-    padding-bottom: map-get($spacers, 3);
+    padding-bottom: var(--pgn-spacing-spacer-3);
   }
-}
+}

src/containers/ReviewModal/ReviewModal.scss

@@ -1,7 +1,7 @@
-@import "@edx/paragon/scss/core/core";
+
 
 .review-modal-body {
-  background-color: $gray-300 !important;
+  background-color: var(--pgn-color-gray-300) !important;
   padding: inherit;
 
   & > div.pgn__modal-body-content {
@@ -23,7 +23,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--max-pgn-size-breakpoint-sm) {
   .review-modal-body {
     padding: 0 !important;
     overflow: hidden !important;
@@ -40,4 +40,4 @@
       width: 100%;
     }
   }
-}
+}

src/containers/Rubric/Rubric.scss

@@ -1,20 +1,16 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .criteria-label {
   width: 100%;
   .criteria-title {
     display: inline-block;
     max-width: calc(100% - 44px);
-    color: $primary-500;
+    color: var(--pgn-color-primary-500);
     font-weight: bold;
     vertical-align: top;
   }
   .esg-help-icon {
     float: right;
-    margin-top: (map-get($spacers, 2) * -1);
-    margin-right: (map-get($spacers, 2\.5) * -1);
+    margin-top: (calc(var(--pgn-spacing-spacer-2) * -1));
+    margin-right: calc(var(--pgn-spacing-spacer-2-5) * -1);
     vertical-align: top;
   }
 }
@@ -38,9 +34,9 @@
 
 .popover.overlay-help-popover {
   z-index: 4000;
-  margin-right: map-get($spacers, 1) !important;
+  margin-right: var(--pgn-spacing-spacer-1) !important;
   .help-popover-option {
-    margin-bottom: map-get($spacers, 1);
+    margin-bottom: var(--pgn-spacing-spacer-1);
   }
 }
 
@@ -49,15 +45,15 @@
   width: 320px !important;
   height: fit-content;
   max-height: 100%;
-  margin-left: map-get($spacers, 3);
+  margin-left: var(--pgn-spacing-spacer-3);
   position: sticky !important;
-  top: map-get($spacers, 1) * -1;
+  top:calc(var(--pgn-spacing-spacer-1) * -1);
 
   .grading-rubric-header {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .grading-rubric-body {
@@ -68,16 +64,16 @@
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
     opacity: .4 !important;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--max-pgn-size-breakpoint-sm) {
   .grading-rubric-card {
     margin-left: 0 !important;
   } 
-}
+}