[@mantine/core] TypographyStylesProvider: Fix incorrect breakpoints u…

…sed in styles (mantinedev#3902) * [docs] Fix wrong theme media query functions description * [docs] Extend examples with theme functions for media queries * [@mantine/core] Fix TypographyStylesProvider wrong media query - use theme functions
milhamm · Mar 28, 2023 · beb979f · beb979f
1 parent 2a921e1
commit beb979f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/docs/src/docs/theming/functions.mdx b/docs/src/docs/theming/functions.mdx
@@ -126,12 +126,12 @@ function MyCustomText() {
 `theme.fn.smallerThan` and `theme.fn.largerThan` function can help you write responsive styles with `theme.breakpoints`:
 
 ```tsx
-theme.fn.smallerThan(768); // -> `@media (max-width: 48em)`
-theme.fn.smallerThan('lg'); // -> `@media (max-width: ${theme.breakpoints.lg})`
+// 0.0625rem (1px) is substracted from smallerThan breakpoints to avoid collisions with largerThan breakpoints
+theme.fn.smallerThan(768); // -> `@media (max-width: 47.9375em)`
+theme.fn.smallerThan('lg'); // -> `@media (max-width: ${em(getBreakpointValue(theme.breakpoints.sm) - 1)}`
 
-// 0.0625rem is added to largerThan breakpoints to avoid collisions with smallerThan breakpoints
-theme.fn.largerThan('sm'); // -> `@media (min-width: ${theme.breakpoints.sm + '0.0625em'})`
-theme.fn.largerThan(768); // -> `@media (min-width: 48.0625em)`
+theme.fn.largerThan('sm'); // -> `@media (min-width: ${theme.breakpoints.sm'})`
+theme.fn.largerThan(768); // -> `@media (min-width: 48em)`
 ```
 
 You can use both functions as a replacement for regular media query syntax in `createStyles` function, `styles` and `sx` props:

diff --git a/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts b/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts
@@ -14,7 +14,7 @@ export default createStyles((theme) => {
       marginBottom: theme.spacing.sm,
       ...values,
 
-      [`@media (max-width: ${theme.breakpoints.sm})`]: {
+      [theme.fn.smallerThan('sm')]: {
         fontSize: `calc(${rem(values.fontSize)} / 1.3)`,
       },
     };
@@ -29,7 +29,7 @@ export default createStyles((theme) => {
       lineHeight: theme.lineHeight,
       fontSize: theme.fontSizes.md,
 
-      [`@media (max-width: ${theme.breakpoints.sm})`]: {
+      [theme.fn.smallerThan('sm')]: {
         fontSize: theme.fontSizes.sm,
       },
 

diff --git a/src/mantine-demos/src/demos/create-styles/CreateStyles.demo.basics.tsx b/src/mantine-demos/src/demos/create-styles/CreateStyles.demo.basics.tsx
@@ -20,7 +20,7 @@ const useStyles = createStyles((theme) => ({
     borderRadius: theme.radius.sm,
 
     // Dynamic media queries, define breakpoints in theme, use anywhere
-    [\`@media (max-width: \${theme.breakpoints.sm})\`]: {
+    [theme.fn.smallerThan('sm')]: {
       // Child reference in nested selectors via ref
       [\`& .\${getStylesRef('child')}\`]: {
         fontSize: theme.fontSizes.xs,
@@ -65,7 +65,7 @@ const useStyles = createStyles((theme) => ({
     borderRadius: theme.radius.sm,
 
     // Dynamic media queries, define breakpoints in theme, use anywhere
-    [`@media (max-width: ${theme.breakpoints.sm})`]: {
+    [theme.fn.smallerThan('sm')]: {
       // Child reference in nested selectors via ref
       [`& .${getStylesRef('child')}`]: {
         fontSize: theme.fontSizes.xs,

diff --git a/src/mantine-demos/src/demos/create-styles/CreateStyles.demo.media.tsx b/src/mantine-demos/src/demos/create-styles/CreateStyles.demo.media.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 import { MantineDemo } from '@mantine/ds';
-import { createStyles, rem, em } from '@mantine/core';
+import { createStyles, rem, em, getBreakpointValue } from '@mantine/core';
 
 const code = `
-import { createStyles, rem, em } from '@mantine/core';
+import { createStyles, getBreakpointValue, rem, em } from '@mantine/core';
 
 const useStyles = createStyles((theme) => ({
   container: {
     height: rem(100),
     backgroundColor: theme.colors.blue[6],
 
     // Media query with value from theme
-    [\`@media (max-width: \${theme.breakpoints.xl})\`]: {
+    [\`@media (max-width: \${em(getBreakpointValue(theme.breakpoints.xl) - 1)})\`]: {
       backgroundColor: theme.colors.pink[6],
     },
 
+    // Simplify media query writing with theme functions
+    [theme.fn.smallerThan('lg')]: {
+      backgroundColor: theme.colors.yellow[6],
+    },
+
     // Static media query
     [\`@media (max-width: \${em(800)})\`]: {
       backgroundColor: theme.colors.orange[6],
@@ -34,10 +39,15 @@ const useStyles = createStyles((theme) => ({
     backgroundColor: theme.colors.blue[6],
 
     // Media query with value from theme
-    [`@media (max-width: ${theme.breakpoints.xl})`]: {
+    [`@media (max-width: ${em(getBreakpointValue(theme.breakpoints.xl) - 1)})`]: {
       backgroundColor: theme.colors.pink[6],
     },
 
+    // Simplify media query writing with theme functions
+    [theme.fn.smallerThan('lg')]: {
+      backgroundColor: theme.colors.yellow[6],
+    },
+
     // Static media query
     [`@media (max-width: ${em(800)})`]: {
       backgroundColor: theme.colors.orange[6],