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 · Nov 23, 2023 · 05aa870 · 05aa870
1 parent 2ffe9ba
commit 05aa870
Show file tree

Hide file tree

Showing 8 changed files with 5,067 additions and 5,890 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,11 +33,11 @@
     "url": "https://github.com/openedx/frontend-app-course-authoring/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-[email protected]",
-    "@edx/frontend-component-footer": "11.1.1",
-    "@edx/frontend-lib-content-components": "^1.131.0",
-    "@edx/frontend-platform": "2.5.1",
-    "@edx/paragon": "^20.38.0",
+    "@edx/brand": "npm:@edx/brand-[email protected]",
+    "@edx/frontend-component-footer": "12.6.0",
+    "@edx/frontend-lib-content-components": "https://github.com/open-craft/frontend-lib-content-components/releases/download/v1.131.0-tokens-release/edx-frontend-lib-content-components-1.0.0-semantically-released.tgz",
+    "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v6.2.0-pre-token-asu-moe/edx-frontend-platform-6.2.0.tgz",
+    "@edx/paragon": "22.0.0-alpha.13",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.0.0",
-    "@edx/frontend-build": "12.8.38",
+    "@edx/frontend-build": "github:open-craft/frontend-build#asu-moe/palm-css",
     "@edx/reactifex": "^1.0.3",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.1",

diff --git a/src/index.scss b/src/index.scss
@@ -1,10 +1,10 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+/* @import "~@edx/brand/paragon/fonts"; */
+/* @import "~@edx/brand/paragon/variables"; */
+/* @import "~@edx/paragon/scss/core/core"; */
+/* @import "~@edx/brand/paragon/overrides"; */
 
-@import "studio-header/header";
-@import "~@edx/frontend-component-footer/dist/footer";
+/* @import "studio-header/header"; */
+/* @import "~@edx/frontend-component-footer/dist/footer"; */
 
 @import "proctored-exam-settings/proctoredExamSettings";
 @import "pages-and-resources/discussions/app-list/AppList";
diff --git a/src/pages-and-resources/discussions/app-list/AppList.scss b/src/pages-and-resources/discussions/app-list/AppList.scss
@@ -6,21 +6,117 @@
   .pgn__data-table-container {
     tr {
       th {
-        background-color: $white;
+        background-color: var(--pgn-color-white);
         text-align: center;
 
-        .d-flex, span {
+        .d-flex,
+        span {
           display: block !important;
         }
       }
 
       td {
-        background-color: $white;
+        background-color: var(--pgn-color-white);
 
         .pgn__data-table-cell-wrap {
           max-width: unset;
         }
+      }
+    }
+  }
+}
+
+.height-36 {
+  height: 2.25rem !important;
+}
+
+.line-height-20 {
+  line-height: 1.25rem !important;
+}
+
+.font-size-14 {
+  font-size: 14px !important;
+}
+
+.font-weight-500 {
+  font-weight: 500 !important;
+}
+
+.py-7px {
+  padding: 0 7px;
+}
+
+.line-height-24 {
+  line-height: 24px !important;
+}
+
+.hide-discussion-modal {
+  .pgn__modal-header {
+    padding-top: 24px;
+
+    h2 {
+      color: var(--pgn-color-primary-500);
+      line-height: 28px;
+      font-size: 22px;
+    }
+  }
+
+  .bg-black {
+    color: #000000;
+  }
+
+  .pgn__modal-footer {
+    padding-top: 8px;
+    padding-bottom: 24px;
+  }
+
+  button {
+    font-weight: 500;
+  }
+}
+
+.discussion-restriction {
+  .unselected-button {
+    &:hover {
+      background: #E9E6E4;
+    }
+  }
+
+  .action-btn {
+    padding: 10px 16px;
+    width: 80px;
+    height: 44px;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .w-92 {
+    width: 92px;
+  }
+
+  .card-body-section {
+    padding-top: 12px !important;
+    padding-bottom: 20px !important;
+  }
+
+  .form-control {
+    border-radius: 0 !important;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .collapsible-card {
+    padding: 14px 14px 14px 24px !important;
+    min-height: 100px;
+
+    .collapsible-trigger {
+      padding: 0 !important;
 
+      .badge {
+        font-size: 12px;
+        line-height: 20px;
       }
     }
   }

diff --git a/src/pages-and-resources/pages/PageCard.scss b/src/pages-and-resources/pages/PageCard.scss
@@ -9,14 +9,14 @@
 }
 
 .shadow {
-  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .3) !important;
 }
 
-[dir=rtl] {
-  .desktop-card, .mobile-card {
+[dir="rtl"] {
+  .desktop-card,
+  .mobile-card {
     .pgn__card-header-actions .pgn__hyperlink .btn-icon {
-      transform: scaleX(-1)
+      transform: scaleX(-1);
     }
   }
-}
+}
diff --git a/src/proctored-exam-settings/proctoredExamSettings.scss b/src/proctored-exam-settings/proctoredExamSettings.scss
@@ -1,11 +1,10 @@
 // legend styling should match label styling
 legend {
-    font-size: 1.0rem;
-    font-weight: 700;
+  font-size: var(--pgn-spacing-spacer-base);
+  font-weight: 700;
 }
 
 // override conflicting browser styles
 select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
+  appearance: none;
 }
diff --git a/src/studio-header/Menu/menu.scss b/src/studio-header/Menu/menu.scss
@@ -2,15 +2,18 @@
 .menu {
   position: relative;
 }
+
 .menu-content {
   position: absolute;
   top: 100%;
   z-index: 10;
-  background: #fff;
+  background: var(--pgn-color-white);
   min-width: 10rem;
+
   &.pin-left {
     left: 0;
   }
+
   &.pin-right {
     right: 0;
   }
@@ -20,27 +23,25 @@
 .menu-dropdown-enter {
   opacity: 0;
   transform-origin: 75% 0;
-  transform: scale3d(0.8, 0.8, 1);
+  transform: scale3d(.8, .8, 1);
 }
+
 .menu-dropdown-enter-active {
   transform-origin: 75% 0;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 250ms cubic-bezier(.4, 0, .2, 1);
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
-.menu-dropdown-enter-done {
-}
 
 .menu-dropdown-exit {
   transform-origin: 75% 0;
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
+
 .menu-dropdown-exit-active {
   transform-origin: 75% 0;
-  transform: scale3d(0.8, 0.8, 1);
-  transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
+  transform: scale3d(.8, .8, 1);
+  transition: all 250ms cubic-bezier(.8, 0, .6, 1);
   opacity: 0;
 }
-.menu-dropdown-exit-done {
-}
diff --git a/src/studio-header/header.scss b/src/studio-header/header.scss
@@ -1,23 +1,25 @@
 // This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
-$spacer: 1rem;
-$blue: #007db8;
-$white: #fff;
+$spacer: var(--pgn-spacing-spacer-base) !default;
+$blue: var(--pgn-color-blue) !default;
+$white: var(--pgn-color-white) !default;
 
-@import "./Menu/menu.scss";
+@import "./Menu/menu";
 
 .course-title-lockup {
   @media only screen and (max-width: 768px) {
-    padding-left: 0.5rem;
+    padding-left: .5rem;
     max-width: 70%;
   }
+
   @media only screen and (min-width: 769px) {
-    padding: 0.5rem;
-    padding-right: 1rem;
-    border-right: 1px solid #e5e5e5;
+    padding: .5rem var(--pgn-spacing-spacer-base) .5rem .5rem;
+    border-right: 1px solid #E5E5E5;
   }
+
   overflow: hidden;
+
   span {
-    color: #333;
+    color: var(--pgn-color-gray-800);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -42,12 +44,13 @@ $white: #fff;
   border: none;
   height: 3rem;
   width: 3rem;
-  padding: 0.75rem;
+  padding: .75rem;
   justify-content: center;
   align-items: center;
+
   &:hover,
   &:focus {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgb(0 0 0 / .1);
   }
 }
 
@@ -62,54 +65,63 @@ $white: #fff;
     text-decoration: none;
     cursor: pointer;
   }
+
   img {
     height: 1.5rem;
   }
 }
 
 .site-header-desktop {
   height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  background: $white;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: var(--pgn-color-white);
+
   .nav-link {
     text-decoration: none;
   }
+
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
-    top: -0.05em;
+    top: -.05em;
     height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
+    padding: var(--pgn-spacing-spacer-base) 0;
+    margin-right: var(--pgn-spacing-spacer-base);
+
     img {
       display: block;
       height: 100%;
     }
   }
+
   .main-nav {
     flex-wrap: nowrap;
+
     .nav-link {
-      padding: 1rem;
+      padding: var(--pgn-spacing-spacer-base);
       text-decoration: none;
       font-weight: 500;
-      letter-spacing: 0.01em;
+      letter-spacing: .01em;
     }
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active);
+      color: var(--pgn-color-active);
     }
+
     .menu {
       position: relative;
+
       .menu-content {
-        border-top: solid 2px $component-active-bg;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+        border-top: solid 2px var(--pgn-color-bg-active);
+        box-shadow: 0 1px 2px rgb(0 0 0 / .25);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base);
       }
     }
   }