feat: renamed custom media query

openedx · Aug 3, 2023 · 51e699a · 51e699a
1 parent f72bd32
commit 51e699a
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 34 deletions.
diff --git a/src/Card/Card.scss b/src/Card/Card.scss
@@ -477,7 +477,7 @@ a.pgn__card {
   }
 }
 
-@media (--max-pgn-size-breakpoint-xs) {
+@media (--pgn-size-breakpoint-max-width-xs) {
   .pgn__card-footer {
     &.horizontal > :not(:last-child) {
       margin-inline-end: 0;

diff --git a/src/ColorPicker/ColorPicker.scss b/src/ColorPicker/ColorPicker.scss
@@ -45,7 +45,7 @@
   }
 
   .form-field {
-    @media (--min-pgn-size-breakpoint-sm) {
+    @media (--pgn-size-breakpoint-min-width-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-pgn-size-breakpoint-xl) {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     overflow-x: scroll;
   }
 

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-pgn-size-breakpoint-sm) {
+  @media (--pgn-size-breakpoint-min-width-sm) {
     margin-inline-end: var(--pgn-spacing-form-control-gutter);
   }
 
@@ -597,7 +597,7 @@ select.form-control {
   .pgn__form-autosuggest__dropdown {
     @include pgn-box-shadow(1, "centered");
 
-    @media (--min-pgn-size-breakpoint-sm) {
+    @media (--pgn-size-breakpoint-min-width-sm) {
       margin-inline-end: var(--pgn-spacing-form-control-gutter);
     }
 

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-pgn-size-breakpoint-sm) {
+  @media (--pgn-size-breakpoint-max-width-sm) {
     min-width: 90%;
     max-width: 90%;
   }

diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss
@@ -41,11 +41,11 @@
     }
   }
 
-  @media (--max-pgn-size-breakpoint-sm) {
+  @media (--pgn-size-breakpoint-max-width-sm) {
     max-width: 100%;
   }
 
-  @media (--min-pgn-size-breakpoint-md) {
+  @media (--pgn-size-breakpoint-min-width-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 (--max-pgn-size-breakpoint-sm) {
+  @media (--pgn-size-breakpoint-max-width-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,17 +1,17 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 05 Jun 2023 02:30:54 GMT
+ * Generated on Thu, 03 Aug 2023 08:09:26 GMT
  */
 
-@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);
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
+@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
+@custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
+@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px);
+@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px);
+@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px);
+@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px);
+@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px);
+@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px);
+@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px);
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
@@ -5,6 +5,7 @@ const StyleDictionary = require('style-dictionary');
 const chroma = require('chroma-js');
 const { colorYiq, darken, lighten } = require('./sass-helpers');
 const cssUtilities = require('./css-utilities');
+const { composeBreakpointName } = require('./utils');
 
 const { fileHeader, sortByReference } = StyleDictionary.formatHelpers;
 
@@ -185,9 +186,9 @@ StyleDictionary.registerFormat({
 
     for (let i = 0; i < breakpoints.length; i++) {
       const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
-      customMediaVariables += `@custom-media --min-${currentBreakpoint.name} (min-width: ${currentBreakpoint.value});\n`;
+      customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`;
       if (nextBreakpoint) {
-        customMediaVariables += `@custom-media --max-${currentBreakpoint.name} (max-width: ${nextBreakpoint.value});\n`;
+        customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`;
       }
     }
 

diff --git a/tokens/utils.js b/tokens/utils.js
@@ -190,9 +190,21 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'
   });
 }
 
+/**
+ * Composes a breakpoint name according to the Paragon namespace.
+ *
+ * @param {string} breakpointName - breakpoint initial name.
+ * @param {string} format - screen width format.
+ * @return {string} - new breakpoint name.
+ */
+function composeBreakpointName(breakpointName, format) {
+  return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`;
+}
+
 module.exports = {
   createIndexCssFile,
   getFilesWithExtension,
   getSCSStoCSSMap,
   transformInPath,
+  composeBreakpointName,
 };
diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss
@@ -139,11 +139,11 @@
 .pgn-doc__menu-all-components .pgn-doc__menu-component-list {
   columns: 4;
 
-  @media (--max-pgn-size-breakpoint-sm) {
+  @media (--pgn-size-breakpoint-max-width-sm) {
     columns: 2;
   }
 
-  @media (--max-pgn-size-breakpoint-xs) {
+  @media (--pgn-size-breakpoint-max-width-xs) {
     columns: 1;
   }
 }
diff --git a/www/src/components/Search/Search.scss b/www/src/components/Search/Search.scss
@@ -53,7 +53,7 @@
     margin: 6.875rem auto auto;
     cursor: auto;
 
-    @media (--max-pgn-size-breakpoint-sm) {
+    @media (--pgn-size-breakpoint-max-width-sm) {
       max-width: 100%;
       margin: auto;
       border-radius: 0;
@@ -65,7 +65,7 @@
       border-top: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
       padding: 0 1.625rem;
 
-      @media (--max-pgn-size-breakpoint-sm) {
+      @media (--pgn-size-breakpoint-max-width-sm) {
         position: absolute;
         border-radius: 0;
         bottom: 0;
@@ -92,7 +92,7 @@
       padding: 0 1.625rem;
       max-height: 20.9375rem;
 
-      @media (--max-pgn-size-breakpoint-sm) {
+      @media (--pgn-size-breakpoint-max-width-sm) {
         height: 100%;
         // stylelint-disable-next-line max-line-length
         max-height: calc(var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
@@ -290,7 +290,7 @@
       text-decoration: underline;
     }
 
-    @media (--max-pgn-size-breakpoint-sm) {
+    @media (--pgn-size-breakpoint-max-width-sm) {
       font-size: var(--pgn-typography-font-size-base);
       line-height: var(--pgn-typography-line-height-base);
       font-weight: var(--pgn-typography-font-weight-semi-bold);
@@ -318,7 +318,7 @@
   }
 
   .DocSearch-Cancel {
-    @media (--max-pgn-size-breakpoint-sm) {
+    @media (--pgn-size-breakpoint-max-width-sm) {
       margin-right: 1.1875rem;
     }
   }

diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
@@ -246,7 +246,7 @@
       align-items: center;
       background-color: var(--pgn-color-gray-100);
 
-      @media (--max-pgn-size-breakpoint-sm) {
+      @media (--pgn-size-breakpoint-max-width-sm) {
         max-width: 100%;
       }
     }

diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss
@@ -55,15 +55,15 @@
       width: 13.25rem;
       height: 2.75rem;
 
-      @media (--max-pgn-size-breakpoint-md) {
+      @media (--pgn-size-breakpoint-max-width-md) {
         width: 2.75rem;
         height: 2.75rem;
         border-radius: 50%;
         overflow: hidden;
         padding: .625rem .75rem;
       }
 
-      @media (--max-pgn-size-breakpoint-xs) {
+      @media (--pgn-size-breakpoint-max-width-xs) {
         margin: 0 0 0 .5rem;
         width: 2rem;
         height: 2rem;
@@ -103,7 +103,7 @@
   &-settings-and-search .DocSearch.DocSearch-Button {
     margin: 0 var(--pgn-spacing-spacer-base) 0 0;
 
-    @media (--max-pgn-size-breakpoint-xs) {
+    @media (--pgn-size-breakpoint-max-width-xs) {
       margin: 0 .5rem 0 0;
     }
   }