openedx · brian-smith-tcril · May 12, 2025 · Mar 4, 2025 · Apr 14, 2025 · Mar 11, 2025
diff --git a/.env b/.env
@@ -46,3 +46,5 @@ ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+# Fallback in local style files
+PARAGON_THEME_URLS={}
diff --git a/.env.development b/.env.development
@@ -49,3 +49,5 @@ ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+# Fallback in local style files
+PARAGON_THEME_URLS={}
diff --git a/.env.test b/.env.test
@@ -41,3 +41,4 @@ ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+PARAGON_THEME_URLS=
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
     "@openedx/frontend-build": "^14.3.3",
     "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.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,5 +1,5 @@
 @import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/utilities-only";
+@import "~@openedx/paragon/styles/scss/core/utilities-only";
 
 .summary-radio {
   display: flex;

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,7 +76,7 @@
     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 */
+      border-color: var(--pgn-color-form-control-indicator-checked-border-base);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-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-button-icon {

diff --git a/src/course-outline/card-header/TitleButton.jsx b/src/course-outline/card-header/TitleButton.jsx
@@ -39,7 +39,7 @@ const TitleButton = ({
         className="item-card-header__title-btn"
         onClick={onTitleClick}
       >
-        <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+        <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
       </Button>
     </OverlayTrigger>
   );

diff --git a/src/course-outline/card-header/TitleLink.jsx b/src/course-outline/card-header/TitleLink.jsx
@@ -14,7 +14,7 @@ const TitleLink = ({
     className="item-card-header__title-btn"
     to={titleLink}
   >
-    <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+    <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
   </Button>
 );
 

diff --git a/src/course-outline/empty-placeholder/EmptyPlaceholder.scss b/src/course-outline/empty-placeholder/EmptyPlaceholder.scss
@@ -3,8 +3,8 @@
   align-items: center;
   justify-content: center;
   gap: 1.25rem;
-  border: .0625rem solid $gray-200;
+  border: .0625rem solid var(--pgn-color-gray-200);
   border-radius: .375rem;
-  box-shadow: inset inset 0 1px .125rem 1px $gray-200;
+  box-shadow: inset inset 0 1px .125rem 1px var(--pgn-color-gray-200);
   padding: 2.5rem;
 }
diff --git a/src/course-outline/highlights-modal/HighlightsModal.scss b/src/course-outline/highlights-modal/HighlightsModal.scss
@@ -6,7 +6,7 @@
   }
 
   .form-control {
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
   .pgn__form-control-decorator-group {

diff --git a/src/course-outline/page-alerts/PageAlerts.jsx b/src/course-outline/page-alerts/PageAlerts.jsx
@@ -359,9 +359,9 @@ const PageAlerts = ({
         }
         case API_ERROR_TYPES.serverError: {
           const description = (
-            <Truncate lines={2}>
+            <Truncate.Deprecated lines={2}>
               {v.data || intl.formatMessage(messages.serverErrorAlertBody)}
-            </Truncate>
+            </Truncate.Deprecated>
           );
           return {
             key: k,
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);