refactor: update styles to css variables

dcoa · dcoa · commit 7713ed15d245 · 2025-04-01T17:14:07.000+11:00
diff --git a/src/components/Assessment/Assessment.scss b/src/components/Assessment/Assessment.scss
@@ -1,38 +1,34 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .assessment-card {
   max-width: 320px !important;
   height: fit-content;
   max-height: 100%;
   position: sticky !important;
-  top: map-get($spacers, 1) * -1;
+  top: calc( var(--pgn-spacing-spacer-1) * -1);
 
   .assessment-header {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .assessment-body {
     overflow-y: hide;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .assessment-footer {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
     opacity: .4 !important;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .assessment-card {
     margin-left: 0 !important;
     width: 100% !important;
diff --git a/src/components/CriterionContainer/CriterionContainer.scss b/src/components/CriterionContainer/CriterionContainer.scss
@@ -1,19 +1,15 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .criteria-label {
   width: 100%;
   .criteria-title {
     display: inline-block;
     max-width: calc(100% - 44px);
-    color: $primary-500;
+    color: var(--pgn-color-primary-500);
     font-weight: bold;
     vertical-align: top;
   }
   .esg-help-icon {
-    margin-top: (map-get($spacers, 1\.5) * -1);
-    margin-right: (map-get($spacers, 2\.5) * -1);
+    margin-top: calc( var(--pgn-spacing-spacer-1-5) * -1);
+    margin-right: calc( var(--pgn-spacing-spacer-2-5) * -1);
     vertical-align: top;
   }
 }
diff --git a/src/components/FilePreview/components/FileRenderer/FileCard/FileCard.scss b/src/components/FilePreview/components/FileRenderer/FileCard/FileCard.scss
@@ -1,7 +1,5 @@
-@import "@openedx/paragon/scss/core/core";
-
 .file-card {
-  margin: map-get($spacers, 1) 0;
+  margin: var(--pgn-spacing-spacer-1) 0;
 
   .file-card-title {
     text-overflow: ellipsis;
@@ -26,8 +24,8 @@
   white-space: pre-wrap;
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .file-card-title {
-    width: calc(map-get($container-max-widths, "sm")/2);
+    width: calc(var(--pgn-size-container-max-width-sm)/2);
   }
-}
+}
diff --git a/src/components/FileUpload/styles.scss b/src/components/FileUpload/styles.scss
@@ -5,4 +5,4 @@
   vertical-align: middle;
   overflow: hidden;
   white-space: nowrap;
-}
+}
diff --git a/src/components/ModalContainer.scss b/src/components/ModalContainer.scss
@@ -1,14 +1,10 @@
-@import '@edx/brand/paragon/variables.scss';
-@import '@openedx/paragon/scss/core/core.scss';
-@import '@edx/brand/paragon/overrides.scss';
-
 .ora-modal-body {
-  min-height: calc(100vh - 20px - 64px - (map-get($spacers, 2) * 8));
+  min-height: calc(100vh - 20px - 64px - calc(var(--pgn-spacing-spacer-3) * 8));
   height: 100%;
 }
 
 .exam-timer {
-  max-width: $max-width-lg;
+  max-width: var(--pgn-size-container-max-width-lg);
   margin: auto;
   button {
     display: none;
diff --git a/src/components/ProgressBar/index.scss b/src/components/ProgressBar/index.scss
@@ -1,14 +1,12 @@
-@import '@openedx/paragon/scss/core/core';
-
 .ora-progress-nav-group {
-  max-width: $max-width-lg;
+  max-width: var(--pgn-size-container-max-width-lg);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: auto;
   .ora-progress-divider {
     position: absolute;
-    max-width: $max-width-lg;
+    max-width: var(--pgn-size-container-max-width-lg);
     width: 100%;
   }
   .ora-progress-nav {
@@ -48,21 +46,21 @@
     width: 100%;
     &.is-active {
       border: none;
-      background-color: $light;
+      background-color: var(--pgn-color-light-base);
     }
   }
   .nav-icon {
-    margin-left: map-get($spacers, 3);
+    margin-left: var(--pgn-spacing-spacer-3);
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .navbar-expand-lg .ora-progress-nav-group {
     @include navbar-collapse-definition;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .navbar-expand-md .ora-progress-nav-group {
     @include navbar-collapse-definition;
   }
diff --git a/src/components/Prompt/index.scss b/src/components/Prompt/index.scss
@@ -1,3 +1,3 @@
 .prompt > pre {
   text-wrap: wrap;
-}
+}
diff --git a/src/components/Rubric/Rubric.scss b/src/components/Rubric/Rubric.scss
@@ -1,12 +1,8 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .popover.overlay-help-popover {
   z-index: 4000;
-  margin-right: map-get($spacers, 1) !important;
+  margin-right: var(--pgn-spacing-spacer-1) !important;
   .help-popover-option {
-    margin-bottom: map-get($spacers, 1);
+    margin-bottom: var(--pgn-spacing-spacer-1);
   }
 }
 
@@ -15,35 +11,35 @@
   width: 320px !important;
   height: fit-content;
   max-height: 100%;
-  margin-left: map-get($spacers, 3);
+  margin-left: var(--pgn-spacing-spacer-3);
   position: sticky !important;
-  top: map-get($spacers, 1) * -1;
+  top: calc(var(--pgn-spacing-spacer-1) * -1);
 
   .rubric-header {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .rubric-body {
     overflow-y: hide;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .rubric-footer {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
     opacity: .4 !important;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .rubric-card {
     margin-left: 0 !important;
   } 
diff --git a/src/components/TextResponse/index.scss b/src/components/TextResponse/index.scss
@@ -7,4 +7,4 @@
   font-size: inherit;
   line-height: inherit;
   margin-bottom: 0;
-}
+}
diff --git a/src/index.scss b/src/index.scss
@@ -1,7 +1,5 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@openedx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
 
 #root {
   display: flex;
@@ -26,23 +24,23 @@
 }
 
 .gap-0 {
-  gap: map-get($spacers, 0);
+  gap: var(--pgn-spacing-spacer-0);
 }
 
 .gap-1 {
-  gap: map-get($spacers, 1);
+  gap: var(--pgn-spacing-spacer-1);
 }
 
 .gap-2 {
-  gap: map-get($spacers, 2);
+  gap: var(--pgn-spacing-spacer-2);
 }
 
 .gap-3 {
-  gap: map-get($spacers, 3);
+  gap: var(--pgn-spacing-spacer-3);
 }
 
 .gap-4 {
-  gap: map-get($spacers, 4);
+  gap: var(--pgn-spacing-spacer-4);
 } 
 .ora-icon svg {
   display: inline-block !important;
@@ -53,4 +51,4 @@
   top: 50%;
   left: 50%;
   scale: 3;
-}
+}
diff --git a/src/views/AssessmentView/BaseAssessmentView/BaseAssessmentView.scss b/src/views/AssessmentView/BaseAssessmentView/BaseAssessmentView.scss
@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .assessment-content-layout {
   & > div.content-body {
     height: 100%;
@@ -12,15 +10,15 @@
   height: 100%;
 
   .content-wrapper {
-    max-width: $max-width-lg;
+    max-width: var(--pgn-size-container-max-width-lg);
   }
   
   .assessment-col {
     min-width: 300px;
   }
 }
 
-@include media-breakpoint-down(sm) {
+ @media (--pgn-size-breakpoint-max-width-sm) {
   .assessment-content-layout {
     .content-wrapper {
       width: 100%;
diff --git a/src/views/GradeView/index.scss b/src/views/GradeView/index.scss
@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 .grade-view-body {
-  max-width: $max-width-lg;
+  max-width: var(--pgn-size-container-max-width-lg);
   flex-wrap: nowrap !important;
   gap: 1em;
 }
 
-@include media-breakpoint-down(md) {
+ @media (--pgn-size-breakpoint-max-width-md) {
   .grade-view-body {
     flex-wrap: wrap !important;
     gap: 0;
diff --git a/src/views/SubmissionView/index.scss b/src/views/SubmissionView/index.scss
@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .assessment-content-layout {
   & > div.content-body {
     height: 100%;
@@ -12,15 +10,15 @@
   height: 100%;
 
   .content-wrapper {
-    max-width: $max-width-lg;
+    max-width: var(--pgn-size-container-max-width-lg);
   }
 }
 
 .ora-tinymce .tox-tinymce {
-  background-color: $white;
+  background-color: var(--pgn-color-white);
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .assessment-content-layout {
     .content-wrapper {
       width: 100%;
diff --git a/src/views/XBlockStudioView/index.scss b/src/views/XBlockStudioView/index.scss
@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 #ora-xblock-studio-view {
   max-width: 1024px;
   display: flex;
   flex-direction: column;
-  gap: map-get($spacers, 3);
+  gap: var(--pgn-spacing-spacer-3);
 
-  @include media-breakpoint-down(md) {
+  @media (--pgn-size-breakpoint-max-width-md) {
     padding-left: 40px;
     padding-right: 40px;
   }
diff --git a/src/views/XBlockView/index.scss b/src/views/XBlockView/index.scss
@@ -1,8 +1,6 @@
-@import "@openedx/paragon/scss/core/core";
-
 #ora-xblock-view {
   max-width: 1024px;
-  @include media-breakpoint-down(md) {
+  @media (--pgn-size-breakpoint-max-width-md) {
     padding-left: 40px;
     padding-right: 40px;
   }

Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,12 @@`
`1`		`-@import '@openedx/paragon/scss/core/core';`
`2`		`-`
`3`	`1`	`.ora-progress-nav-group {`
`4`		`- max-width: $max-width-lg;`
	`2`	`+ max-width: var(--pgn-size-container-max-width-lg);`
`5`	`3`	`display: flex;`
`6`	`4`	`flex-direction: row;`
`7`	`5`	`justify-content: space-between;`
`8`	`6`	`margin: auto;`
`9`	`7`	`.ora-progress-divider {`
`10`	`8`	`position: absolute;`
`11`		`- max-width: $max-width-lg;`
	`9`	`+ max-width: var(--pgn-size-container-max-width-lg);`
`12`	`10`	`width: 100%;`
`13`	`11`	`}`
`14`	`12`	`.ora-progress-nav {`
`@@ -48,21 +46,21 @@`
`48`	`46`	`width: 100%;`
`49`	`47`	`&.is-active {`
`50`	`48`	`border: none;`
`51`		`- background-color: $light;`
	`49`	`+ background-color: var(--pgn-color-light-base);`
`52`	`50`	`}`
`53`	`51`	`}`
`54`	`52`	`.nav-icon {`
`55`		`- margin-left: map-get($spacers, 3);`
	`53`	`+ margin-left: var(--pgn-spacing-spacer-3);`
`56`	`54`	`}`
`57`	`55`	`}`
`58`	`56`
`59`		`-@include media-breakpoint-down(md) {`
	`57`	`+@media (--pgn-size-breakpoint-max-width-md) {`
`60`	`58`	`.navbar-expand-lg .ora-progress-nav-group {`
`61`	`59`	`@include navbar-collapse-definition;`
`62`	`60`	`}`
`63`	`61`	`}`
`64`	`62`
`65`		`-@include media-breakpoint-down(sm) {`
	`63`	`+@media (--pgn-size-breakpoint-max-width-sm) {`
`66`	`64`	`.navbar-expand-md .ora-progress-nav-group {`
`67`	`65`	`@include navbar-collapse-definition;`
`68`	`66`	`}`
-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 .prompt > pre {
   text-wrap: wrap;
 -}
 +}