fix: use min-width in custom-media breakpoint definitions (openedx#2098)

Author: adamstankiewicz

scss/core/css/custom-media-breakpoints.css

@@ -1,12 +1,12 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:38:50 GMT
+ * Generated on Sun, 26 Feb 2023 16:21:31 GMT
  */
 
-@custom-media --pgn-size-breakpoint-xs (max-width: 0); 
-@custom-media --pgn-size-breakpoint-sm (max-width: 576px); 
-@custom-media --pgn-size-breakpoint-md (max-width: 768px); 
-@custom-media --pgn-size-breakpoint-lg (max-width: 992px); 
-@custom-media --pgn-size-breakpoint-xl (max-width: 1200px); 
-@custom-media --pgn-size-breakpoint-xxl (max-width: 1400px); 
+@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);

scss/core/css/utility-classes.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 12:30:21 GMT
+ * Generated on Sun, 26 Feb 2023 16:21:31 GMT
  */
 
 .bg-dark {

scss/core/css/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 12:30:21 GMT
+ * Generated on Sun, 26 Feb 2023 16:21:31 GMT
  */
 
 :root {

tokens/style-dictionary.js

@@ -174,7 +174,7 @@ StyleDictionary.registerFormat({
     let customMediaVariables = '';
 
     Object.values(breakpoint).forEach(item => {
-      customMediaVariables += `@custom-media --${item.name} (max-width: ${item.value}); \n`;
+      customMediaVariables += `@custom-media --${item.name} (min-width: ${item.value});\n`;
     });
 
     return fileHeader({ file }) + customMediaVariables;