From 2fcdf49612b0c055193e7907bb35054f9f3a648b Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 1 Nov 2023 10:33:02 +0100
Subject: [PATCH] Use traditional syntax for media queries (#707)

---
 packages/css/src/accordion/accordion.scss     |  2 +-
 packages/css/src/alert/alert.scss             |  2 +-
 packages/css/src/blockquote/blockquote.scss   |  2 +-
 packages/css/src/breadcrumb/breadcrumb.scss   |  2 +-
 packages/css/src/button/button.scss           |  2 +-
 packages/css/src/checkbox/checkbox.scss       |  4 ++--
 packages/css/src/form-label/form-label.scss   |  2 +-
 packages/css/src/heading/heading.scss         |  8 ++++----
 packages/css/src/icon/icon.scss               | 20 +++++++++----------
 packages/css/src/link/link.scss               |  4 ++--
 .../css/src/ordered-list/ordered-list.scss    |  2 +-
 .../css/src/page-heading/page-heading.scss    |  2 +-
 packages/css/src/page-menu/page-menu.scss     |  2 +-
 packages/css/src/paragraph/paragraph.scss     |  6 +++---
 .../css/src/top-task-link/top-task-link.scss  |  4 ++--
 .../src/unordered-list/unordered-list.scss    |  2 +-
 .../storybook-docs/src/breakpoint.stories.mdx |  2 +-
 17 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss
index 42fcd345a9..ee17a369a0 100644
--- a/packages/css/src/accordion/accordion.scss
+++ b/packages/css/src/accordion/accordion.scss
@@ -30,7 +30,7 @@
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 
diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss
index b118e63887..92a5ac54b9 100644
--- a/packages/css/src/alert/alert.scss
+++ b/packages/css/src/alert/alert.scss
@@ -34,7 +34,7 @@
   font-weight: var(--amsterdam-alert-title-font-weight);
   line-height: var(--amsterdam-alert-title-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-alert-title-wide-font-size);
   }
 
diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss
index 0d053ad161..5aa9d9c53b 100644
--- a/packages/css/src/blockquote/blockquote.scss
+++ b/packages/css/src/blockquote/blockquote.scss
@@ -29,7 +29,7 @@
     content: close-quote;
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-blockquote-wide-font-size);
   }
 
diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
index f63db760b7..13ad8a8555 100644
--- a/packages/css/src/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -18,7 +18,7 @@
   font-weight: var(--amsterdam-breadcrumb-font-weight);
   line-height: var(--amsterdam-breadcrumb-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-breadcrumb-wide-font-size);
   }
 }
diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
index bc488a9def..b026d87054 100644
--- a/packages/css/src/button/button.scss
+++ b/packages/css/src/button/button.scss
@@ -13,7 +13,7 @@
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
 
diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss
index c17e02b5c5..fc9afd555e 100644
--- a/packages/css/src/checkbox/checkbox.scss
+++ b/packages/css/src/checkbox/checkbox.scss
@@ -34,7 +34,7 @@
     width: 100%;
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
   }
 }
@@ -65,7 +65,7 @@
     }
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
 
diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss
index c0b077d063..c9a7682f16 100644
--- a/packages/css/src/form-label/form-label.scss
+++ b/packages/css/src/form-label/form-label.scss
@@ -16,7 +16,7 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
 
diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss
index 6a33fcb8b3..e147ae61ff 100644
--- a/packages/css/src/heading/heading.scss
+++ b/packages/css/src/heading/heading.scss
@@ -25,7 +25,7 @@
   font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
@@ -34,7 +34,7 @@
   font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
@@ -43,7 +43,7 @@
   font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
@@ -52,7 +52,7 @@
   font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }
diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/icon/icon.scss
index ed4fc77749..3a7288b66c 100644
--- a/packages/css/src/icon/icon.scss
+++ b/packages/css/src/icon/icon.scss
@@ -17,7 +17,7 @@
 .amsterdam-icon--size-3 {
   height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
   }
 }
@@ -26,7 +26,7 @@
   height: var(--amsterdam-icon-size-3-icon-size-narrow);
   width: var(--amsterdam-icon-size-3-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-3-icon-size-wide);
     width: var(--amsterdam-icon-size-3-icon-size-wide);
   }
@@ -34,7 +34,7 @@
 .amsterdam-icon--size-4 {
   height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
   }
 }
@@ -43,7 +43,7 @@
   height: var(--amsterdam-icon-size-4-icon-size-narrow);
   width: var(--amsterdam-icon-size-4-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-4-icon-size-wide);
     width: var(--amsterdam-icon-size-4-icon-size-wide);
   }
@@ -52,7 +52,7 @@
 .amsterdam-icon--size-5 {
   height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
   }
 }
@@ -61,7 +61,7 @@
   height: var(--amsterdam-icon-size-5-icon-size-narrow);
   width: var(--amsterdam-icon-size-5-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-5-icon-size-wide);
     width: var(--amsterdam-icon-size-5-icon-size-wide);
   }
@@ -70,7 +70,7 @@
 .amsterdam-icon--size-6 {
   height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
   }
 }
@@ -79,7 +79,7 @@
   height: var(--amsterdam-icon-size-6-icon-size-narrow);
   width: var(--amsterdam-icon-size-6-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-6-icon-size-wide);
     width: var(--amsterdam-icon-size-6-icon-size-wide);
   }
@@ -88,7 +88,7 @@
 .amsterdam-icon--size-7 {
   height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
   }
 }
@@ -97,7 +97,7 @@
   height: var(--amsterdam-icon-size-7-icon-size-narrow);
   width: var(--amsterdam-icon-size-7-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-7-icon-size-wide);
     width: var(--amsterdam-icon-size-7-icon-size-wide);
   }
diff --git a/packages/css/src/link/link.scss b/packages/css/src/link/link.scss
index ebb878140d..8668ee894c 100644
--- a/packages/css/src/link/link.scss
+++ b/packages/css/src/link/link.scss
@@ -34,7 +34,7 @@
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-link-standalone-wide-font-size);
   }
 }
@@ -70,7 +70,7 @@
     text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-link-in-list-wide-font-size);
   }
 }
diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/ordered-list/ordered-list.scss
index 336c9a38cf..4510415e4e 100644
--- a/packages/css/src/ordered-list/ordered-list.scss
+++ b/packages/css/src/ordered-list/ordered-list.scss
@@ -31,7 +31,7 @@
   line-height: var(--amsterdam-ordered-list-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-ordered-list-wide-font-size);
   }
 
diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/page-heading/page-heading.scss
index 22edf980a1..dac2c86b4d 100644
--- a/packages/css/src/page-heading/page-heading.scss
+++ b/packages/css/src/page-heading/page-heading.scss
@@ -20,7 +20,7 @@
   font-weight: var(--amsterdam-page-heading-font-weight);
   line-height: var(--amsterdam-page-heading-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-page-heading-wide-font-size);
   }
 
diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/page-menu/page-menu.scss
index e98a50e778..9781286a1a 100644
--- a/packages/css/src/page-menu/page-menu.scss
+++ b/packages/css/src/page-menu/page-menu.scss
@@ -49,7 +49,7 @@
   text-decoration: var(--amsterdam-page-menu-item-text-decoration);
   touch-action: manipulation;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-page-menu-item-wide-font-size);
   }
 }
diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/paragraph/paragraph.scss
index 4b9ef40811..1384d49cbe 100644
--- a/packages/css/src/paragraph/paragraph.scss
+++ b/packages/css/src/paragraph/paragraph.scss
@@ -18,7 +18,7 @@
   font-weight: var(--amsterdam-paragraph-font-weight);
   line-height: var(--amsterdam-paragraph-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-wide-font-size);
   }
 
@@ -29,7 +29,7 @@
   font-size: var(--amsterdam-paragraph-small-narrow-font-size);
   line-height: var(--amsterdam-paragraph-small-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-small-wide-font-size);
   }
 }
@@ -38,7 +38,7 @@
   font-size: var(--amsterdam-paragraph-large-narrow-font-size);
   line-height: var(--amsterdam-paragraph-large-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-large-wide-font-size);
   }
 }
diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/top-task-link/top-task-link.scss
index 2a562d23c1..8efcc6461f 100644
--- a/packages/css/src/top-task-link/top-task-link.scss
+++ b/packages/css/src/top-task-link/top-task-link.scss
@@ -26,7 +26,7 @@
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
   line-height: var(--amsterdam-top-task-link-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-label-wide-font-size);
   }
 
@@ -47,7 +47,7 @@
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
   line-height: var(--amsterdam-top-task-link-description-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-description-wide-font-size);
   }
 
diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/unordered-list/unordered-list.scss
index 909f34a3ab..746eb70808 100644
--- a/packages/css/src/unordered-list/unordered-list.scss
+++ b/packages/css/src/unordered-list/unordered-list.scss
@@ -31,7 +31,7 @@
   line-height: var(--amsterdam-unordered-list-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-unordered-list-wide-font-size);
   }
 
diff --git a/storybook/storybook-docs/src/breakpoint.stories.mdx b/storybook/storybook-docs/src/breakpoint.stories.mdx
index fb6bda3783..a0d8253207 100644
--- a/storybook/storybook-docs/src/breakpoint.stories.mdx
+++ b/storybook/storybook-docs/src/breakpoint.stories.mdx
@@ -14,7 +14,7 @@ Bijvoorbeeld:
 .class {
   /* Your narrow styling */
 
-  @media screen and (width > $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
     /* Your wide styling */
   }
 }