v11.0.0

11.0.0 (2022-01-19)

Code Refactoring

• up and between functions (1a6bf94)

BREAKING CHANGES

add createTheme function to resolve name conflicts when merging multiple themes with custom breakpoints.

+ import { createTheme } from 'styled-breakpoints';

- const theme = {
-  breakpoints: {
-    sm: '576px',
-    md: '768px',
-    lg: '992px',
-    xl: '1200px',
-  },
-};

+ const theme = createTheme({
+  sm: '600px',
+  md: '900px',
+  lg: '1200px'
+})

<ThemeProvider theme={theme}>
  <Component>This is cool!</Component>
</ThemeProvider>;

Completely rewritten algorithm for calculating breakpoints for down and between functions to align with Bootstrap 5.

- down('md') => @media (max-width: 991.98px)
+ down('md') => @media (max-width: 767.98px) 

- between('md', 'lg') => @media (min-width: 768px) and (max-width: 1199.98px)
+ between('md', 'lg') => @media (min-width: 768px) and (max-width: 991.98px)