perf: add runtime theming support to redwood

eduNEXT · May 16, 2024 · 5b41c2b · 5b41c2b
1 parent 1c3610e
commit 5b41c2b
Show file tree

Hide file tree

Showing 19 changed files with 9,044 additions and 4,545 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -30,31 +31,31 @@
     "url": "https://github.com/openedx/frontend-app-learning/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^13.0.4",
-    "@edx/frontend-component-header": "^5.0.2",
-    "@edx/frontend-lib-learning-assistant": "^2.0.0",
-    "@edx/frontend-lib-special-exams": "^3.0.1",
-    "@edx/frontend-platform": "^7.1.2",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^2.0.0",
+    "@edx/brand": "npm:@openedx/[email protected]",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.4-alpha.1",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.0.2-alpha.1",
+    "@edx/frontend-lib-learning-assistant": "npm:@edunext/frontend-lib-learning-assistant@2.0.0-alpha.1",
+    "@edx/frontend-lib-special-exams": "npm:@edunext/frontend-lib-special-exams@3.0.1-alpha.1",
+    "@edx/frontend-platform": "github:edunext/frontend-platform#bc/css-variables-7.1.2",
+    "@edx/openedx-atlas": "0.6.0",
+    "@edx/react-unit-test-utils": "npm:@edunext/react-unit-test-utils@2.0.0-alpha.1",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@openedx/frontend-plugin-framework": "^1.0.2",
-    "@openedx/paragon": "^22.3.0",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-plugin-framework": "1.0.2",
+    "@openedx/paragon": "23.0.0-alpha.1",
     "@popperjs/core": "2.11.8",
     "@reduxjs/toolkit": "1.8.1",
     "classnames": "2.3.2",
     "core-js": "3.22.2",
     "history": "5.3.0",
-    "joi": "^17.11.0",
+    "joi": "17.11.0",
     "js-cookie": "3.0.5",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",
-    "query-string": "^7.1.3",
+    "query-string": "7.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
@@ -71,26 +72,26 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "13.1.4",
-    "@pact-foundation/pact": "^11.0.2",
+    "@openedx/frontend-build": "github:edunext/frontend-build#bc/css-variables-13.1.4",
+    "@pact-foundation/pact": "11.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "11.0.0",
     "es-check": "6.2.1",
-    "eslint-import-resolver-webpack": "^0.13.8",
+    "eslint-import-resolver-webpack": "0.13.8",
     "husky": "7.0.4",
-    "jest": "^26.6.3",
-    "jest-console-group-reporter": "^1.0.1",
-    "jest-when": "^3.6.0",
-    "patch-package": "^8.0.0",
-    "postcss-loader": "^8.1.1",
+    "jest": "26.6.3",
+    "jest-console-group-reporter": "1.0.1",
+    "jest-when": "3.6.0",
+    "patch-package": "8.0.0",
+    "postcss-loader": "8.1.1",
     "rosie": "2.1.1",
-    "sass": "^1.72.0",
-    "sass-loader": "^14.1.1",
-    "source-map-loader": "^5.0.0",
-    "style-loader": "^3.3.4"
+    "sass": "1.72.0",
+    "sass-loader": "14.1.1",
+    "source-map-loader": "5.0.0",
+    "style-loader": "3.3.4"
   }
-}
+}
diff --git a/src/course-home/courseware-search/courseware-search.scss b/src/course-home/courseware-search/courseware-search.scss
@@ -5,8 +5,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-top: 1px solid $light-300;
-  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.
+  border-top: 1px solid var(--pgn-color-light-300);
+  z-index: var(--pgn-elevation-modal-zindex); // Bootstrap's z-index layer for Modals.
 
   &__close {
     position: absolute !important; // For some reason it gets overridden
@@ -35,7 +35,7 @@
 
   &__results-summary {
     font-size: .9rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 1rem 0 .5rem;
   }
 
@@ -50,7 +50,7 @@
   margin-top: 1.5rem;
 
   &__empty {
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 6rem 0;
     text-align: center;
   }
@@ -64,17 +64,17 @@
 
     &:hover {
       text-decoration: none;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
     }
 
     &:not(:first-child) {
-      border-top: 1px solid $light-300;
+      border-top: 1px solid var(--pgn-color-light-300);
     }
   }
 
   &__icon {
     padding: 0.375rem 0 0 0.375rem;
-    color: $gray-300;
+    color: var(--pgn-color-gray-300);
   }
 
   &__info {
@@ -87,7 +87,7 @@
     align-items: center;
     line-height: 2.5;
     font-size: 0.875rem;
-    color: $black;
+    color: var(--pgn-color-black);
 
     > span {
       display: block;
@@ -101,7 +101,7 @@
       font-variant-numeric: lining-nums tabular-nums;
       min-width: 1.25rem;
       line-height: 1rem;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
       border-radius: 99rem;
       font-style: normal;
       margin-left: 0.375rem;
@@ -113,7 +113,7 @@
   &__breadcrumbs {
     display: flex;
     gap: 1.25rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -144,14 +144,14 @@
 }
 
 .courseware-search-results-tabs {
-  border-bottom-color: $gray-400 !important;
+  border-bottom-color: var(--pgn-color-gray-400) !important;
 
   &.nav-tabs .nav-link.active {
     border-bottom-width: 4px !important;
   }
 }
 
-@media (min-width: map-get($grid-breakpoints, 'md')) {
+@media (--pgn-size-breakpoint-min-width-md) {
   .courseware-search__content {
     padding-top: 8rem;
   }

diff --git a/src/course-home/outline-tab/widgets/FlagButton.scss b/src/course-home/outline-tab/widgets/FlagButton.scss
@@ -1,22 +1,21 @@
 @import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 .flag-button {
-  background-color: $white;
-  border: 1px solid $light-400;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-light-400);
   border-radius: .2rem;
-  box-shadow: 0 0 0 2px $light-400;
+  box-shadow: 0 0 0 2px var(--pgn-color-light-400);
 
   &:hover {
-    border: 1px solid $primary-300;
-    box-shadow: 0 0 0 2px $white;
+    border: 1px solid var(--pgn-color-primary-300);
+    box-shadow: 0 0 0 2px var(--pgn-color-white);
   }
 }
 
 .flag-button-selected {
-  border: 1px solid $primary-300;
-  box-shadow: 0 0 0 2px $primary-300;
+  border: 1px solid var(--pgn-color-primary-300);
+  box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
   pointer-events: none;
 }
 

diff --git a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss
@@ -1,10 +1,10 @@
 .outline-sidebar-proctoring-panel {
-  border: 1px solid $dark-500;
-  border-top: 5px solid $brand-600;
+  border: 1px solid var(--pgn-color-dark-500);
+  border-top: 5px solid var(--pgn-color-brand-600);
 }
 .proctoring-onboarding-success {
-  border-top: 5px solid $primary-500;
+  border-top: 5px solid var(--pgn-color-primary-500);
 }
 .proctoring-onboarding-submitted {
-  border-top: 5px solid $dark-500;
+  border-top: 5px solid var(--pgn-color-dark-500);
 }
diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss b/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
@@ -7,18 +7,18 @@
 
 .donut-chart-label {
   font: {
-    family: $font-family-sans-serif;
+    family: var(--pgn-typography-font-family-sans-serif);
     size: .2rem;
-    weight: $font-weight-normal;
+    weight: var(--pgn-typography-font-weight-normal);
   }
   text-anchor: middle;
 }
 
 .donut-chart-number {
   font: {
-    family: $font-family-monospace;
+    family: var(--pgn-typography-font-family-monospace);
     size: .5rem;
-    weight: $font-weight-bold;
+    weight: var(--pgn-typography-font-weight-bold);
   }
   line-height: 1rem;
   text-anchor: middle;
@@ -29,7 +29,7 @@
 }
 
 .donut-chart-text {
-  fill: $primary-500;
+  fill: var(--pgn-color-primary-500);
   -moz-transform: translateY(0.25em);
   -ms-transform: translateY(0.25em);
   -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $info-500;
+    stroke: var(--pgn-color-info-500);
   }
 
   &.divider-stroke {
@@ -65,10 +65,10 @@
   }
 
   &.incomplete-stroke {
-    stroke: $light-300;
+    stroke: var(--pgn-color-light-300);
   }
 
   &.locked-stroke {
-    stroke: $primary-500;
+    stroke: var(--pgn-color-primary-500);
   }
 }
diff --git a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss b/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
@@ -4,24 +4,24 @@
   }
 
   .grade-bar__base {
-    fill: $light-300;
+    fill: var(--pgn-color-light-300);
   }
 
   .grade-bar__divider {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
     width: 1px;
   }
 
   .grade-bar--passing {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
   }
 
   .grade-bar--current-passing {
-    fill: $success-500;
+    fill: var(--pgn-color-success-500);
   }
 
   .grade-bar--current-non-passing {
-    fill: $accent-b;
+    fill: var(--pgn-color-accent-b);
   }
 }
 
@@ -31,22 +31,22 @@
 
 #minimum-grade-tooltip {
   .arrow::after {
-    border-bottom-color: $primary-500;
+    border-bottom-color: var(--pgn-color-primary-500);
   }
 }
 
 #passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $success-500;
+    border-top-color: var(--pgn-color-success-500);
   }
 
-  background: $success-500;
+  background: var(--pgn-color-success-500);
 }
 
 #non-passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $accent-b;
+    border-top-color: var(--pgn-color-accent-b);
   }
 
-  background: $accent-b;
+  background: var(--pgn-color-accent-b);
 }
diff --git a/src/course-tabs/course-tabs-navigation.scss b/src/course-tabs/course-tabs-navigation.scss
@@ -5,13 +5,13 @@
   .nav a,
   .nav button {
     &:hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
       border-bottom: none;
     }
   }

diff --git a/src/courseware/course/celebration/CelebrationModal.scss b/src/courseware/course/celebration/CelebrationModal.scss
@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }