refactor: update styles to use css variables

dcoa · dcoa · commit 70aa4fffe7f0 · 2025-04-14T12:28:32.000+10:00
diff --git a/src/course-home/courseware-search/courseware-search.scss b/src/course-home/courseware-search/courseware-search.scss
@@ -9,8 +9,8 @@
   height: 100%;
   max-width: none;
   margin: 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.
 
   &__form {
     position: relative;
@@ -47,7 +47,7 @@
 
   &__results-summary {
     font-size: .9rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 1rem 0 .5rem;
   }
 
@@ -62,7 +62,7 @@
   margin-top: 1.5rem;
 
   &__empty {
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 6rem 0;
     text-align: center;
   }
@@ -76,17 +76,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 {
@@ -99,7 +99,7 @@
     align-items: center;
     line-height: 2.5;
     font-size: 0.875rem;
-    color: $black;
+    color: var(--pgn-color-black);
 
     > span {
       display: block;
@@ -113,7 +113,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;
@@ -125,7 +125,7 @@
   &__breadcrumbs {
     display: flex;
     gap: 1.25rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -156,14 +156,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 {
     &__close {
       right: -2.5rem;
diff --git a/src/course-home/outline-tab/widgets/FlagButton.scss b/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";
+
+@use "~@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;
 }
 
diff --git a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss b/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);
 }
diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss b/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);
   }
 }
diff --git a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss b/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 {
-  background: $success-500;
+  background: var(--pgn-color-success-500);
 
   .arrow::after {
-    border-top-color: $success-500;
+    border-top-color: var(--pgn-color-success-500);
   }
 }
 
 #non-passing-grade-tooltip {
-  background: $accent-b;
+  background: var(--pgn-color-accent-b);
 
   .arrow::after {
-    border-top-color: $accent-b;
+    border-top-color: var(--pgn-color-accent-b);
   }
 }
diff --git a/src/course-tabs/course-tabs-navigation.scss 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;
     }
   }
diff --git a/src/courseware/course/celebration/CelebrationModal.jsx b/src/courseware/course/celebration/CelebrationModal.jsx
@@ -35,7 +35,7 @@ const CelebrationModal = ({
     <StandardModal
       footerNode={(
         <ActionRow isStacked className="pb-2">
-          <Button onClick={onClose}>{intl.formatMessage(messages.forward)}</Button>
+          <Button  className="btn-primary" onClick={onClose}>{intl.formatMessage(messages.forward)}</Button>
         </ActionRow>
       )}
       hasCloseButton={false}
diff --git a/src/courseware/course/celebration/CelebrationModal.scss b/src/courseware/course/celebration/CelebrationModal.scss
@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }
diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
@@ -4,7 +4,7 @@
 }
 
 .lock-paywall-container svg {
-    color: $primary-700;
+    color: var(--pgn-color-primary-700);
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1100px) {
diff --git a/src/courseware/course/sidebar/common/SidebarBase.scss b/src/courseware/course/sidebar/common/SidebarBase.scss
@@ -1,5 +1,5 @@
 #course-sidebar {
-    @media (max-width: -1 + map-get($grid-breakpoints, "lg")) {
+    @media (--pgn-size-breakpoint-max-width-lg) {
         overflow-y: scroll;
         padding: 0 .625rem !important;
     }
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
@@ -7,7 +7,7 @@
 }
 
 .outline-sidebar {
-    @media (min-width: map-get($grid-breakpoints, "xl")) {
+    @media (--pgn-size-breakpoint-min-width-xl) {
         position: absolute;
         left: 0;
         top: 0;
@@ -25,12 +25,12 @@
     }
 
     .outline-sidebar-heading {
-        font-weight: $font-weight-bold;
+        font-weight: var(--pgn-typography-font-weight-bold);
     }
 }
 
 .course-sidebar-section {
-    background: $white;
+    background: var(--pgn-color-white);
     border: 1px solid #d7d3d1;
 
     button {
@@ -54,7 +54,7 @@
 #outline-sidebar-outline {
     margin-top: -1px;
 
-    @media (min-width: map-get($grid-breakpoints, "xl")) {
+    @media (--pgn-size-breakpoint-min-width-xl) {
         margin-bottom: 0;
     }
 
@@ -64,39 +64,35 @@
 
         .collapsible-trigger {
             border-radius: 0;
-            padding: map-get($spacers, 3\.5) map-get($spacers, 4) map-get($spacers, 3\.5) map-get($spacers, 5);
+            padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5);
 
-            @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-                padding-left: map-get($spacers, 4);
+            @media (--pgn-size-breakpoint-max-width-sm) {
+                padding-left: var(--pgn-spacing-spacer-4);
             }
 
             &:hover {
-                background-color: $light-500;
+                background-color: var(--pgn-color-light-500);
             }
 
             .collapsible-icon {
                 margin-inline-start: initial;
             }
         }
-
-        &:last-child .pgn_collapsible {
-            @extend .mb-0;
-        }
     }
 
     .collapsible-body {
         padding: 0;
 
         ol li > a {
-            padding: map-get($spacers, 3\.5) map-get($spacers, 4) map-get($spacers, 3\.5) map-get($spacers, 5\.5);
+            padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5-5);
 
-            @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-                padding-left: map-get($spacers, 4\.5);
+            @media (--pgn-size-breakpoint-max-width-sm) {
+                padding-left: var(--pgn-spacing-spacer-4-5);
             }
 
             &:hover {
                 text-decoration: none;
-                background-color: $light-500;
+                background-color: var(--pgn-color-light-500);
             }
         }
     }
diff --git a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
@@ -1,5 +1,5 @@
 .discussions-sidebar-frame {
-    @media (max-width: -1 + map-get($grid-breakpoints, "xl")) {
+    @media (--pgn-size-breakpoint-max-width-xl) {
         max-height: calc(100vh - 65px);
     }
 }
diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss
diff --git a/src/generic/upsell-bullets/UpsellBullets.scss b/src/generic/upsell-bullets/UpsellBullets.scss
diff --git a/src/index.scss b/src/index.scss
diff --git a/src/product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss b/src/product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`.outline-sidebar-proctoring-panel {`
`2`		`- border: 1px solid $dark-500;`
`3`		`- border-top: 5px solid $brand-600;`
	`2`	`+ border: 1px solid var(--pgn-color-dark-500);`
	`3`	`+ border-top: 5px solid var(--pgn-color-brand-600);`
`4`	`4`	`}`
`5`	`5`	`.proctoring-onboarding-success {`
`6`		`- border-top: 5px solid $primary-500;`
	`6`	`+ border-top: 5px solid var(--pgn-color-primary-500);`
`7`	`7`	`}`
`8`	`8`	`.proctoring-onboarding-submitted {`
`9`		`- border-top: 5px solid $dark-500;`
	`9`	`+ border-top: 5px solid var(--pgn-color-dark-500);`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,18 +7,18 @@`
`7`	`7`
`8`	`8`	`.donut-chart-label {`
`9`	`9`	`font: {`
`10`		`- family: $font-family-sans-serif;`
	`10`	`+ family: var(--pgn-typography-font-family-sans-serif);`
`11`	`11`	`size: .2rem;`
`12`		`- weight: $font-weight-normal;`
	`12`	`+ weight: var(--pgn-typography-font-weight-normal);`
`13`	`13`	`}`
`14`	`14`	`text-anchor: middle;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.donut-chart-number {`
`18`	`18`	`font: {`
`19`		`- family: $font-family-monospace;`
	`19`	`+ family: var(--pgn-typography-font-family-monospace);`
`20`	`20`	`size: .5rem;`
`21`		`- weight: $font-weight-bold;`
	`21`	`+ weight: var(--pgn-typography-font-weight-bold);`
`22`	`22`	`}`
`23`	`23`	`line-height: 1rem;`
`24`	`24`	`text-anchor: middle;`
`@@ -29,7 +29,7 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`.donut-chart-text {`
`32`		`- fill: $primary-500;`
	`32`	`+ fill: var(--pgn-color-primary-500);`
`33`	`33`	`-moz-transform: translateY(0.25em);`
`34`	`34`	`-ms-transform: translateY(0.25em);`
`35`	`35`	`-webkit-transform: translateY(0.25em);`
`@@ -56,7 +56,7 @@`
`56`	`56`
`57`	`57`	`.donut-ring, .donut-segment, .donut-hole {`
`58`	`58`	`&.complete-stroke {`
`59`		`- stroke: $info-500;`
	`59`	`+ stroke: var(--pgn-color-info-500);`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`&.divider-stroke {`
`@@ -65,10 +65,10 @@`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`&.incomplete-stroke {`
`68`		`- stroke: $light-300;`
	`68`	`+ stroke: var(--pgn-color-light-300);`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`&.locked-stroke {`
`72`		`- stroke: $primary-500;`
	`72`	`+ stroke: var(--pgn-color-primary-500);`
`73`	`73`	`}`
`74`	`74`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,24 +4,24 @@`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.grade-bar__base {`
`7`		`- fill: $light-300;`
	`7`	`+ fill: var(--pgn-color-light-300);`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.grade-bar__divider {`
`11`		`- fill: $primary-500;`
	`11`	`+ fill: var(--pgn-color-primary-500);`
`12`	`12`	`width: 1px;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.grade-bar--passing {`
`16`		`- fill: $primary-500;`
	`16`	`+ fill: var(--pgn-color-primary-500);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.grade-bar--current-passing {`
`20`		`- fill: $success-500;`
	`20`	`+ fill: var(--pgn-color-success-500);`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.grade-bar--current-non-passing {`
`24`		`- fill: $accent-b;`
	`24`	`+ fill: var(--pgn-color-accent-b);`
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`
`@@ -31,22 +31,22 @@`
`31`	`31`
`32`	`32`	`#minimum-grade-tooltip {`
`33`	`33`	`.arrow::after {`
`34`		`- border-bottom-color: $primary-500;`
	`34`	`+ border-bottom-color: var(--pgn-color-primary-500);`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`#passing-grade-tooltip {`
`39`		`- background: $success-500;`
	`39`	`+ background: var(--pgn-color-success-500);`
`40`	`40`
`41`	`41`	`.arrow::after {`
`42`		`- border-top-color: $success-500;`
	`42`	`+ border-top-color: var(--pgn-color-success-500);`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`#non-passing-grade-tooltip {`
`47`		`- background: $accent-b;`
	`47`	`+ background: var(--pgn-color-accent-b);`
`48`	`48`
`49`	`49`	`.arrow::after {`
`50`		`- border-top-color: $accent-b;`
	`50`	`+ border-top-color: var(--pgn-color-accent-b);`
`51`	`51`	`}`
`52`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,13 +5,13 @@`
`5`	`5`	`.nav a,`
`6`	`6`	`.nav button {`
`7`	`7`	`&:hover {`
`8`		`- background-color: $light-400;`
	`8`	`+ background-color: var(--pgn-color-light-400);`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.nav a {`
`13`	`13`	`&:not(.active):hover {`
`14`		`- background-color: $light-400;`
	`14`	`+ background-color: var(--pgn-color-light-400);`
`15`	`15`	`border-bottom: none;`
`16`	`16`	`}`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,6 @@`
`22`	`22`	`justify-content: center;`
`23`	`23`
`24`	`24`	`button {`
`25`		`- @extend .btn-primary;`
`26`	`25`	`font-size: 1.2rem;`
`27`	`26`	`width: 50%;`
`28`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.lock-paywall-container svg {`
`7`		`- color: $primary-700;`
	`7`	`+ color: var(--pgn-color-primary-700);`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`@media only screen and (min-width: 992px) and (max-width: 1100px) {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`#course-sidebar {`
`2`		`- @media (max-width: -1 + map-get($grid-breakpoints, "lg")) {`
	`2`	`+ @media (--pgn-size-breakpoint-max-width-lg) {`
`3`	`3`	`overflow-y: scroll;`
`4`	`4`	`padding: 0 .625rem !important;`
`5`	`5`	`}`