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

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

Hide file tree

Showing 30 changed files with 528 additions and 267 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);
   }
 
@@ -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: escape-svg(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: escape-svg(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: escape-svg(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: escape-svg(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/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 06:59:15 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);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,11 +1,13 @@
 /**
  * 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 06:59:15 GMT
  */
 
 :root {
   --pgn-theme-interval: 8%;
+  --pgn-other-form-control-custom-file-content: Browse;
+  --pgn-other-form-control-custom-file-lang: en;
   --pgn-other-form-control-range-track-cursor: pointer;
   --pgn-other-form-control-cursor: auto;
   --pgn-elevation-zindex-fixed: 1030;
@@ -78,6 +80,7 @@
   --pgn-typography-toast-font-size: .875rem;
   --pgn-typography-pagination-line-height: 1.5rem;
   --pgn-typography-pagination-font-size-sm: .875rem;
+  --pgn-typography-nav-link-text-decoration: none;
   --pgn-typography-nav-link-font-weight: 500;
   --pgn-typography-image-figure-caption-font-size: 90%;
   --pgn-typography-link-decoration-brand-inline-hover: underline;
@@ -100,6 +103,7 @@
   --pgn-typography-input-btn-font-family: inherit;
   --pgn-typography-headings-line-height: 1.25;
   --pgn-typography-headings-font-family: inherit;
+  --pgn-typography-dropdown-item-text-decoration: none;
   --pgn-typography-code-font-size: 87.5%;
   --pgn-typography-breadcrumb-font-size: inherit;
   --pgn-typography-badge-font-size: 75%;
@@ -176,8 +180,8 @@
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: .625rem;
-  --pgn-spacing-dropdown-padding-y-item: .5rem;
-  --pgn-spacing-dropdown-padding-y-base: .25rem;
+  --pgn-spacing-dropdown-padding-y-item: .25rem;
+  --pgn-spacing-dropdown-padding-y-base: .5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
   --pgn-spacing-dropdown-padding-x-base: 0;
   --pgn-spacing-dropdown-spacer: .125rem;
@@ -478,7 +482,7 @@
   --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
   --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
-  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em);
+  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
   --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-list-group-border-width: var(--pgn-size-border-width);
   --pgn-size-input-btn-border-width: var(--pgn-size-border-width);

diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * 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 06:59:15 GMT
  */
 
 .bg-accent-a {