feat: update dependencies and replace SCSS variables with CSS

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",
@@ -31,20 +32,21 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@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/frontend-component-footer": "npm:@raccoongang/frontend-component-footer@^13.2.0-tokens.3",
+    "@edx/frontend-component-header": "npm:@raccoongang/frontend-component-header@^5.0.2-tokens.3",
+    "@edx/frontend-lib-learning-assistant": "npm:@raccoongang/frontend-lib-learning-assistant@^2.0.0-tokens.1",
+    "@edx/frontend-lib-special-exams": "npm:@raccoongang/frontend-lib-special-exams@^1.14.0-tokens.1",
+    "@edx/frontend-platform": "npm:@raccoongang/frontend-platform@^7.1.2-tokens.1",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^2.0.0",
+    "@edx/react-unit-test-utils": "npm:@raccoongang/react-unit-test-utils@^2.0.0-tokens.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.1.2",
+    "@openedx/frontend-plugin-framework": "npm:@raccoongang/frontend-plugin-framework@^1.1.2-tokens.1",
     "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.3.0",
+    "@openedx/paragon": "23.0.0-alpha.4",
     "@popperjs/core": "2.11.8",
     "@reduxjs/toolkit": "1.8.1",
     "classnames": "2.3.2",
@@ -71,7 +73,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "13.1.4",
+    "@openedx/frontend-build": "npm:@raccoongang/frontend-build@^13.1.4-tokens.1",
     "@pact-foundation/pact": "^11.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",

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;
   }

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;
 }
 

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);
 }

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);
   }
 }

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);
 }

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;
     }
   }

src/courseware/course/celebration/CelebrationModal.scss

@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }

src/courseware/course/content-tools/calculator/Calculator.jsx

@@ -341,6 +341,7 @@ class Calculator extends Component {
                         <li>arccsch(4x+y)</li>
                       </ul>
                     </td>
+                    {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                     <td dir="auto" />
                   </tr>
                   <tr>

src/courseware/course/sequence/Unit/ContentIFrame.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
-import { ModalDialog, Modal } from '@openedx/paragon';
+import { ModalDialog } from '@openedx/paragon';
 
 import PageLoading from '@src/generic/PageLoading';
 import * as hooks from './hooks';
@@ -89,28 +89,16 @@ const ContentIFrame = ({
           <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
         </div>
       )}
-      {modalOptions.isOpen && (modalOptions.isFullscreen
-        ? (
-          <ModalDialog
-            dialogClassName="modal-lti"
-            onClose={handleModalClose}
-            size="fullscreen"
-            isOpen
-            hasCloseButton={false}
-          >
-            <ModalDialog.Body className={modalOptions.modalBodyClassName}>
-              {modalContent}
-            </ModalDialog.Body>
-          </ModalDialog>
-
-        ) : (
-          <Modal
-            body={modalContent}
-            dialogClassName="modal-lti"
-            onClose={handleModalClose}
-            open
-          />
-        )
+      {modalOptions.isOpen && (
+        <ModalDialog
+          dialogClassName="modal-lti"
+          onClose={handleModalClose}
+          isOpen
+        >
+          <ModalDialog.Body>
+            {modalContent}
+          </ModalDialog.Body>
+        </ModalDialog>
       )}
     </>
   );