feat: update MFE to use dynamically injected theme

Updates the MFE to use alpha version of frontend build, platform and paragon to support runtime theming.
open-craft · Jul 26, 2024 · d2b2de2 · d2b2de2
1 parent b66238c
commit d2b2de2
Show file tree

Hide file tree

Showing 68 changed files with 12,743 additions and 8,582 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,13 +40,13 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-ai-translations": "^2.0.0",
-    "@edx/frontend-component-footer": "^13.0.2",
-    "@edx/frontend-component-header": "^5.1.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17",
+    "@edx/frontend-component-ai-translations": "https://github.com/open-craft/frontend-component-ai-translations/releases/download/v2.0.0-token-asu-moe/edx-frontend-component-ai-translations-2.0.0.tgz",
+    "@edx/frontend-component-footer": "github:open-craft/frontend-component-footer#asu-moe/redwood-css",
+    "@edx/frontend-component-header": "github:open-craft/frontend-component-header#asu-moe/redwood-css",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "^2.1.11",
-    "@edx/frontend-platform": "7.0.1",
+    "@edx/frontend-lib-content-components": "https://github.com/open-craft/frontend-lib-content-components/releases/download/v2.1.11-tokens-release/edx-frontend-lib-content-components-2.1.11.tgz",
+    "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v7.0.1-token-asu-moe/edx-frontend-platform-7.0.1.tgz",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -64,8 +64,8 @@
     "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
-    "@openedx/frontend-plugin-framework": "^1.1.0",
-    "@openedx/paragon": "^22.2.1",
+    "@openedx/frontend-plugin-framework": "https://github.com/open-craft/frontend-plugin-framework/releases/download/v1.1.2-token-asu-moe/openedx-frontend-plugin-framework-1.1.2.tgz",
+    "@openedx/paragon": "23.0.0-alpha.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
     "classnames": "2.2.6",
@@ -98,11 +98,11 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/react-unit-test-utils": "^2.0.0",
+    "@edx/react-unit-test-utils": "https://github.com/open-craft/react-unit-test-utils/releases/download/v2.0.0-token-asu-moe/edx-react-unit-test-utils-2.0.0.tgz",
     "@edx/reactifex": "^1.0.3",
     "@edx/stylelint-config-edx": "2.3.0",
     "@edx/typescript-config": "^1.0.1",
-    "@openedx/frontend-build": "13.1.0",
+    "@openedx/frontend-build": "github:open-craft/frontend-build#asu-moe/redwood-css",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",

diff --git a/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss b/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss
@@ -1,13 +1,13 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/utilities-only";
+//@import "~@edx/brand/paragon/variables";
+//@import "~@openedx/paragon/scss/core/utilities-only";
 
 .summary-radio {
   display: flex;
   align-items: center;
   width: 100%;
-  border-width: $border-width;
-  border-color: $border-color;
-  border-radius: $border-radius;
+  border-width: var(--pgn-size-border-width);
+  border-color: var(--pgn-color-border);
+  border-radius: var(--pgn-size-border-radius-base);
   border-style: solid;
 
   &:has(input:checked) {
@@ -27,10 +27,10 @@
 }
 
 .reset-units-button {
-  color: $link-color;
-  border-width: $border-width;
-  border-color: $border-color;
-  border-radius: $border-radius;
+  color: var(--pgn-color-link-base);
+  border-width: var(--pgn-size-border-width);
+  border-color: var(--pgn-color-border);
+  border-radius: var(--pgn-size-border-radius-base);
   border-style: solid;
 }
 

diff --git a/src/advanced-settings/scss/AdvancedSettings.scss b/src/advanced-settings/scss/AdvancedSettings.scss
@@ -32,7 +32,7 @@
   bottom: 0;
   width: 100%;
   padding: 0 .625rem;
-  z-index: $zindex-modal;
+  z-index: var(--pgn-elevation-modal-zindex);
 }
 
 .alert-proctoring-error {
@@ -66,13 +66,13 @@
 .setting-sidebar-supplementary {
   .setting-sidebar-supplementary-about {
     .setting-sidebar-supplementary-about-title {
-      font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
-      color: $headings-color;
+      font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
+      color: var(--pgn-color-headings-base);
       margin-bottom: 1.25rem;
     }
 
     .setting-sidebar-supplementary-about-descriptions {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
       color: $text-color-base;
     }
   }
@@ -81,16 +81,16 @@
     list-style: none;
 
     .setting-sidebar-supplementary-other-link {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
       line-height: 1.5rem;
-      color: $info-500;
+      color: var(--pgn-color-info-500);
       margin-bottom: .5rem;
     }
   }
 
   .setting-sidebar-supplementary-other-title {
-    font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
-    color: $headings-color;
+    font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-headings-base);
     margin-bottom: 1.25rem;
   }
 }
@@ -102,7 +102,7 @@
     display: inline-block;
     margin-right: 5px;
     margin-bottom: 5px;
-    color: $danger;
+    color: var(--pgn-color-danger-base);
   }
 
   .modal-error-item-title {
@@ -113,12 +113,12 @@
 
 .modal-popup-content {
   max-width: 200px;
-  color: $white;
-  background-color: $black;
+  color: var(--pgn-color-white);
+  background-color: var(--pgn-color-black);
   filter: drop-shadow(0 2px 4px rgba(0 0 0 / .15));
   font-weight: 400;
 }
 
 .pgn__modal-popup__arrow::after {
-  border-top-color: $black;
+  border-top-color: var(--pgn-color-black);
 }
diff --git a/src/advanced-settings/scss/_variables.scss b/src/advanced-settings/scss/_variables.scss
@@ -1 +1 @@
-$text-color-base: $gray-700;
+$text-color-base: var(--pgn-color-gray-700);
diff --git a/src/assets/scss/_form.scss b/src/assets/scss/_form.scss
@@ -1,14 +1,14 @@
 .form-group-custom {
   .pgn__form-label {
-    font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
-    color: $gray-500;
+    font: normal var(--pgn-typography-font-weight-bold) .75rem/1.25rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-gray-500);
     margin-bottom: .5rem;
   }
 
   .pgn__form-control-description,
   .pgn__form-text {
-    font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
-    color: $gray-500;
+    font: normal var(--pgn-typography-font-weight-normal) .75rem/1.25rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-gray-500);
     margin-top: .5rem;
   }
 
@@ -19,12 +19,12 @@
 
   .form-group-custom_isInvalid {
     input {
-      border-color: $form-feedback-invalid-color;
+      border-color: var(--pgn-color-form-feedback-invalid);
     }
   }
 
   .feedback-error {
-    color: $form-feedback-invalid-color;
+    color: var(--pgn-color-form-feedback-invalid);
   }
 }
 
@@ -34,40 +34,40 @@
   .datepicker-custom-control {
     display: block;
     width: 100%;
-    font-size: $input-font-size;
-    font-weight: $input-font-weight;
-    line-height: $input-line-height;
-    background: $input-bg;
-    border-color: $input-border-color;
-    border-width: $input-border-width;
-    box-shadow: $input-box-shadow;
-    border-radius: $input-border-radius;
-    color: $input-color;
-    padding: $input-padding-y $input-padding-x;
-    height: $input-height;
+    font-size: var(--pgn-typography-form-input-font-size-base);
+    font-weight: var(--pgn-typography-form-input-font-weight);
+    line-height: var(--pgn-typography-form-input-line-height-base);
+    background: var(--pgn-color-form-input-bg-base);
+    border-color: var(--pgn-color-form-input-border);
+    border-width: var(--pgn-size-form-input-width-border);
+    box-shadow: var(--pgn-elevation-form-input-base);
+    border-radius: var(--pgn-size-form-input-radius-border-base);
+    color: var(--pgn-color-form-input-base);
+    padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
+    height: var(--pgn-size-form-input-height-base);
     resize: none;
 
     &:focus,
     :focus-visible {
-      color: $input-focus-color;
-      background-color: $input-bg;
-      border-color: $input-focus-border-color;
-      box-shadow: $input-focus-box-shadow;
+      color: var(--pgn-color-form-input-focus-base);
+      background-color: var(--pgn-color-form-input-bg-base);
+      border-color: var(--pgn-color-form-input-focus-border);
+      box-shadow: var(--pgn-elevation-form-input-focus);
       outline: 0;
     }
 
     &::placeholder {
-      color: $input-placeholder-color;
+      color: var(--pgn-color-form-input-placeholder);
     }
   }
 
   .datepicker-custom-control_readonly {
     border-color: transparent;
-    background: $input-disabled-bg;
+    background: var(--pgn-color-form-input-bg-disabled);
   }
 
   .datepicker-custom-control_isInvalid {
-    border-color: $form-feedback-invalid-color;
+    border-color: var(--pgn-color-form-feedback-invalid);
   }
 
   .datepicker-custom-control-icon {
@@ -76,6 +76,6 @@
     right: 1.188rem;
     top: 50%;
     transform: translateY(-50%);
-    color: $black;
+    color: var(--pgn-color-black);
   }
 }
diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss
@@ -1,5 +1,5 @@
 .text-black {
-  color: $black;
+  color: var(--pgn-color-black);
 }
 
 .h-200px {

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -1,2 +1,2 @@
-$text-color-base: $gray-700;
+$text-color-base: var(--pgn-color-gray-700);
 $text-color-weak: #3E3E3C;
diff --git a/src/certificates/scss/Certificates.scss b/src/certificates/scss/Certificates.scss
@@ -2,7 +2,7 @@
 
 .certificates {
   .section-title {
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
   .sub-header-actions {
@@ -11,7 +11,7 @@
 
   .certificate-details {
     .certificate-details__info {
-      color: $black;
+      color: var(--pgn-color-black);
       justify-content: space-between;
       align-items: baseline;
     }
@@ -22,7 +22,7 @@
 
     .certificate-details__info-paragraph-course-number {
       flex: 1;
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
       text-align: right;
     }
   }
@@ -74,7 +74,7 @@
     }
   }
 
-  @media (max-width: map-get($grid-breakpoints, "xl")) {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     .signatory {
       display: flex;
       flex-direction: column;

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -38,7 +38,7 @@
 
 .add-tags-button:not([disabled]):hover {
   background-color: transparent;
-  color: $info-900 !important;
+  color: var(--pgn-color-info-900) !important;
 }
 
 .react-select-add-tags__control {

diff --git a/src/content-tags-drawer/ContentTagsDrawer.scss b/src/content-tags-drawer/ContentTagsDrawer.scss
@@ -16,7 +16,7 @@
 
   .tags-drawer-cancel-button:hover {
     background-color: transparent;
-    color: $gray-300 !important;
+    color: var(--pgn-color-gray-300) !important;
   }
 
   .other-description {
@@ -25,7 +25,7 @@
 
   .enable-taxonomies-button:not([disabled]):hover {
     background-color: transparent;
-    color: $info-900 !important;
+    color: var(--pgn-color-info-900) !important;
   }
 }
 

diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.scss b/src/content-tags-drawer/ContentTagsDropDownSelector.scss
@@ -7,7 +7,7 @@
 
   &:hover {
     background-color: transparent;
-    color: $info-900 !important;
+    color: var(--pgn-color-info-900) !important;
   }
 }
 
@@ -19,7 +19,8 @@
   // In the future, this customizability should be implemented in paragon instead
   input.pgn__form-checkbox-input {
     &:indeterminate {
-      @extend :checked; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base);
+      border-color: var(--pgn-color-form-control-indicator-checked-border-base);
     }
   }
 }
@@ -34,6 +35,6 @@
 }
 
 .dropdown-selector-tag-actions:focus-visible {
-  outline: solid 2px $info-900;
+  outline: solid 2px var(--pgn-color-info-900);
   border-radius: 4px;
 }
diff --git a/src/content-tags-drawer/TagsTree.scss b/src/content-tags-drawer/TagsTree.scss
@@ -9,13 +9,13 @@
 
     &:hover {
       svg {
-        color: $gray-900;
+        color: var(--pgn-color-gray-900);
       }
     }
 
     &:focus-visible {
       border: 2px solid;
-      border-color: $gray-900;
+      border-color: var(--pgn-color-gray-900);
     }
   }
 }
diff --git a/src/course-checklist/ChecklistSection/ChecklistSection.scss b/src/course-checklist/ChecklistSection/ChecklistSection.scss
@@ -13,10 +13,10 @@
 
 .assignment-list {
   display: inline;
-  padding-inline-start: map-get($spacers, 1);
+  padding-inline-start: var(--pgn-spacing-spacer-1);
 }
 
 //complete checklist item style
 .checklist-item-complete {
-  box-shadow: -5px 0 0 0 $success-500;
+  box-shadow: -5px 0 0 0 var(--pgn-color-success-500);
 }
diff --git a/src/course-outline/card-header/CardHeader.scss b/src/course-outline/card-header/CardHeader.scss
@@ -9,7 +9,7 @@
     height: 1.5rem;
     margin-right: .25rem;
     background: transparent;
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
   .item-card-edit-icon {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		$text-color-base: $gray-700;
		$text-color-base: var(--pgn-color-gray-700);