feat: added css variables support to sumac

.env.test

@@ -40,3 +40,4 @@ ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
+PARAGON_THEME_URLS={}

package.json

@@ -21,7 +21,8 @@
     "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
     "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
-    "types": "tsc --noEmit"
+    "types": "tsc --noEmit",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "husky": {
     "hooks": {
@@ -49,10 +50,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-footer": "^14.1.0",
-    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@14.0.0-alpha.2",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.8.0-alpha.1",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-platform": "^8.0.3",
+    "@edx/frontend-platform": "npm:@edunext/frontend-platform@8.1.2-alpha.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
@@ -65,8 +66,8 @@
     "@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-build": "^14.0.14",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^22.8.1",
+    "@openedx/frontend-plugin-framework": "npm:@edunext/frontend-plugin-framework@1.3.0-alpha.1",
+    "@openedx/paragon": "^23.0.0-alpha.7",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
@@ -110,7 +111,7 @@
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/react-unit-test-utils": "npm:@edunext/react-unit-test-utils@3.0.0-alpha.1",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
     "@testing-library/jest-dom": "5.17.0",

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss

@@ -1,13 +1,10 @@
-@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-gray-500);
+  border-radius: var(--pgn-size-border-radius-base);
   border-style: solid;
 
   &:has(input:checked) {
@@ -27,10 +24,10 @@
 }
 
 .reset-units-button {
-  color: $link-color;
-  border-width: $border-width;
-  border-color: $border-color;
-  border-radius: $border-radius;
+  color: var(--pgn-color-info-base);
+  border-width: var(--pgn-size-border-width);
+  border-color: var(--pgn-color-gray-500);
+  border-radius: var(--pgn-size-border-radius-base);
   border-style: solid;
 }
 

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

src/advanced-settings/scss/_variables.scss

@@ -1 +1 @@
-$text-color-base: $gray-700;
+$text-color-base: var(--pgn-color-gray-700);

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,7 +76,7 @@
     right: 1.188rem;
     top: 50%;
     transform: translateY(-50%);
-    color: $black;
+    color: var(--pgn-color-black);
   }
 }
 

src/assets/scss/_utilities.scss

@@ -1,5 +1,5 @@
 .text-black {
-  color: $black;
+  color: var(--pgn-color-black);
 }
 
 .h-200px {

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;

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;

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 {

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

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;
   }
 }
 
@@ -17,11 +17,11 @@
 
   // Override indeterminate [-] (implicit) checkbox styles to match checked checkbox styles
   // 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 */
-    }
-  }
+  // input.pgn__form-checkbox-input {
+  //   &:indeterminate {
+  //     @extend :checked; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+  //   }
+  // }
 }
 
 .pgn__selectable_box.taxonomy-tags-selectable-box:disabled,
@@ -34,6 +34,6 @@
 }
 
 .dropdown-selector-tag-actions:focus-visible {
-  outline: solid 2px $info-900;
+  outline: solid 2px var(--pgn-color-info-900);
   border-radius: 4px;
 }

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

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