fix(design-system): media queries are not effected by font-size changes

Author: joshuaellis

.changeset/nasty-laws-agree.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: use px for media queries as font-size won't affect media queries

packages/strapi-design-system/src/ThemeProvider/ThemeProvider.tsx

@@ -97,8 +97,6 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 100%;
-    font: inherit;
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
@@ -151,10 +149,13 @@ const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 
-  body,html{
-    height: 100%;
+  html {
     /* Sets 1rem === 10px */
     font-size: 62.5%;
+  }
+
+  body,html{
+    height: 100%;
     line-height: 1;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
@@ -165,7 +166,6 @@ const GlobalStyle = createGlobalStyle`
     border: none;
     background: none;
     color: inherit;
-    font-size: 100%;
     cursor: pointer;
     font: inherit;
   }

packages/strapi-design-system/src/themes/common-theme.ts

@@ -24,8 +24,8 @@ export const commonTheme: CommonTheme = {
   spaces: ['0px', '4px', '8px', '12px', '16px', '20px', '24px', '32px', '40px', '48px', '56px', '64px'],
   borderRadius: '4px',
   mediaQueries: {
-    tablet: `@media (max-width: 110rem)`,
-    mobile: `@media (max-width: 55rem)`,
+    tablet: `@media (max-width: 1100px)`,
+    mobile: `@media (max-width: 550px)`,
   },
   fontSizes: [`1.1rem`, `1.2rem`, `1.4rem`, '1.6rem', `1.8rem`, `3.2rem`],
   lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],