feat: remove SCSS variables in docs site and start using custom media…

… queries
openedx · Apr 28, 2023 · fc7aab5 · fc7aab5
1 parent fa6f30e
commit fc7aab5
Show file tree

Hide file tree

Showing 31 changed files with 532 additions and 272 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Card/Card.scss b/src/Card/Card.scss
@@ -467,7 +467,7 @@ a .pgn__card {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (--max-pgn-size-breakpoint-xs) {
   .pgn__card-footer {
     &.horizontal > :not(:last-child) {
       margin-inline-end: 0;

diff --git a/src/ColorPicker/ColorPicker.scss b/src/ColorPicker/ColorPicker.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 .pgn__color-picker {
-  box-shadow: 0 0 3px 1px $gray-300;
+  box-shadow: 0 0 3px 1px var(--pgn-color-gray-300);
   border: none;
   background:
     linear-gradient(to bottom right,
@@ -15,18 +15,18 @@
   );
 
   &.pgn__color-picker-sm {
-    height: $picker-size-sm;
-    width: $picker-size-sm;
+    height: var(--pgn-size-color-picker-sm);
+    width: var(--pgn-size-color-picker-sm);
   }
 
   &.pgn__color-picker-md {
-    height: $picker-size-md;
-    width: $picker-size-md;
+    height: var(--pgn-size-color-picker-md);
+    width: var(--pgn-size-color-picker-md);
   }
 }
 
 .pgn__color-modal {
-  background: $white;
+  background: var(--pgn-color-white);
   padding-bottom: .1rem;
   margin-bottom: 1rem;
 }
@@ -45,7 +45,7 @@
   }
 
   .form-field {
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (--min-pgn-size-breakpoint-sm) {
       margin-inline-end: 0;
     }
   }

diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss
@@ -86,7 +86,7 @@
   display: flex;
   align-items: flex-start;
 
-  @media (max-width: var(--pgn-size-container-max-width-xl)) {
+  @media (--max-pgn-size-breakpoint-xl) {
     overflow-x: scroll;
   }
 
@@ -96,7 +96,7 @@
     box-shadow: var(--pgn-elevation-data-table-box-shadow);
     padding: var(--pgn-spacing-data-table-padding-small);
     margin-right: map_get($spacers, 4);
-    flex: 0 0 $data-table-layout-sidebar-width;
+    flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
   }
 
   .pgn__data-table-side-filters {

diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss
@@ -43,7 +43,7 @@
   flex-grow: 1;
   align-items: flex-start;
 
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
+  @media (--min-pgn-size-breakpoint-sm) {
     margin-inline-end: var(--pgn-spacing-form-control-gutter);
   }
 
@@ -412,7 +412,7 @@ select.form-control {
 
 .pgn__form-checkbox-input {
   &:checked {
-    background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked);
+    background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base);
   }
 
   &:indeterminate {
@@ -472,7 +472,7 @@ select.form-control {
   border-radius: var(--pgn-size-form-control-border-radio-indicator-radius);
 
   &:checked {
-    background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked);
+    background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base);
   }
 
   &:focus {
@@ -523,27 +523,27 @@ select.form-control {
 .pgn__form-checkbox {
   &.pgn__form-control-invalid input {
     &:checked {
-      background-image: escape-svg($custom-checkbox-indicator-icon-invalid-checked);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid);
     }
   }
 
   &.pgn__form-control-valid input {
     &:checked {
-      background-image: escape-svg($custom-checkbox-indicator-icon-valid-checked);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid);
     }
   }
 }
 
 .pgn__form-radio {
   &.pgn__form-control-invalid input {
     &:checked {
-      background-image: escape-svg($custom-radio-indicator-icon-invalid-checked);
+      background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-invalid);
     }
   }
 
   &.pgn__form-control-valid input {
     &:checked {
-      background-image: escape-svg($custom-radio-indicator-icon-valid-checked);
+      background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-valid);
     }
   }
 }
@@ -597,7 +597,7 @@ select.form-control {
   .pgn__form-autosuggest__dropdown {
     @include pgn-box-shadow(1, "centered");
 
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (--min-pgn-size-breakpoint-sm) {
       margin-inline-end: var(--pgn-spacing-form-control-gutter);
     }
 

diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
@@ -128,7 +128,7 @@
 
   .custom-control-input:checked ~ .custom-control-label {
     &::after {
-      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base);
     }
   }
 
@@ -168,7 +168,7 @@
 
   .custom-control-input:checked ~ .custom-control-label {
     &::after {
-      background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked);
+      background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base);
     }
   }
 

diff --git a/src/Icon/Icon.scss b/src/Icon/Icon.scss
@@ -11,8 +11,8 @@
   }
 
   &.pgn__icon__xs {
-    width: $icon-xs;
-    height: $icon-xs;
+    width: var(--pgn-size-icon-xs);
+    height: var(--pgn-size-icon-xs);
   }
 
   &.pgn__icon__sm {

diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
@@ -287,19 +287,19 @@
 
   &.pgn__modal-warning {
     .pgn__alert-modal__title_icon {
-      color: $warning-500;
+      color: var(--pgn-color-warning-500);
     }
   }
 
   &.pgn__modal-success {
     .pgn__alert-modal__title_icon {
-      color: $success-500;
+      color: var(--pgn-color-success-500);
     }
   }
 
   &.pgn__modal-danger {
     .pgn__alert-modal__title_icon {
-      color: $danger-500;
+      color: var(--pgn-color-danger-500);
     }
   }
 

diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss
@@ -39,7 +39,7 @@
   margin-bottom: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    bottom: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    bottom: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
 
     &::before {
       bottom: 0;
@@ -59,7 +59,7 @@
   margin-left: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    left: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    left: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
     width: var(--pgn-size-popover-arrow-height);
     height: var(--pgn-size-popover-arrow-width);
     margin: var(--pgn-size-popover-border-radius) 0;
@@ -88,7 +88,7 @@
   margin-top: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    top: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    top: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
 
     &::before {
       top: 0;
@@ -126,7 +126,7 @@
   margin-right: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    right: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    right: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
     width: var(--pgn-size-popover-arrow-height);
     height: var(--pgn-size-popover-arrow-width);
     margin: var(--pgn-size-popover-border-radius) 0;
@@ -185,7 +185,7 @@
   background-color: var(--pgn-color-popover-header-bg);
   border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-border-bottom-dark);
 
-  @include border-top-radius(calc(var(--pgn-popover-border-radius) - var(--pgn-popover-border-border)));
+  @include border-top-radius(calc(var(--pgn-size-popover-border-radius) - var(--pgn-size-popover-border-width)));
 
   &:empty {
     display: none;

diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss
@@ -10,7 +10,7 @@
   z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
   max-width: var(--pgn-size-product-tour-checkpoint-width-max);
 
-  @media (max-width: map-get($grid-breakpoints, "md")) {
+  @media (--max-pgn-size-breakpoint-sm) {
     min-width: 90%;
     max-width: 90%;
   }

diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss
@@ -41,11 +41,11 @@
     }
   }
 
-  @media only screen and (max-width: 768px) {
+  @media (--max-pgn-size-breakpoint-sm) {
     max-width: 100%;
   }
 
-  @media only screen and (min-width: 768px) {
+  @media (--min-pgn-size-breakpoint-md) {
     min-width: var(--pgn-size-toast-max-width);
     max-width: var(--pgn-size-toast-max-width);
   }

diff --git a/src/Toast/ToastContainer.scss b/src/Toast/ToastContainer.scss
@@ -9,7 +9,7 @@
     left: 0;
   }
 
-  @media only screen and (max-width: 768px) {
+  @media (--max-pgn-size-breakpoint-sm) {
     bottom: var(--pgn-spacing-toast-container-gutter-sm);
     right: var(--pgn-spacing-toast-container-gutter-sm);
     left: var(--pgn-spacing-toast-container-gutter-sm);

diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
@@ -1,12 +1,17 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 12:12:55 GMT
+ * Generated on Fri, 28 Apr 2023 09:30:45 GMT
  */
 
-@custom-media --pgn-size-breakpoint-xs (min-width: 0);
-@custom-media --pgn-size-breakpoint-sm (min-width: 576px);
-@custom-media --pgn-size-breakpoint-md (min-width: 768px);
-@custom-media --pgn-size-breakpoint-lg (min-width: 992px);
-@custom-media --pgn-size-breakpoint-xl (min-width: 1200px);
-@custom-media --pgn-size-breakpoint-xxl (min-width: 1400px);
+@custom-media --min-pgn-size-breakpoint-xs (min-width: 0);
+@custom-media --max-pgn-size-breakpoint-xs (max-width: 576px);
+@custom-media --min-pgn-size-breakpoint-sm (min-width: 576px);
+@custom-media --max-pgn-size-breakpoint-sm (max-width: 768px);
+@custom-media --min-pgn-size-breakpoint-md (min-width: 768px);
+@custom-media --max-pgn-size-breakpoint-md (max-width: 992px);
+@custom-media --min-pgn-size-breakpoint-lg (min-width: 992px);
+@custom-media --max-pgn-size-breakpoint-lg (max-width: 1200px);
+@custom-media --min-pgn-size-breakpoint-xl (min-width: 1200px);
+@custom-media --max-pgn-size-breakpoint-xl (max-width: 1400px);
+@custom-media --min-pgn-size-breakpoint-xxl (min-width: 1400px);