feat: Have breakpoints accept custom media queries

[carolinmaisenbacher]

Is your feature request related to a problem? Please describe.
Currently breakpoints generate mobile-first (i.e. min-width) media queries which does not work for every usecase.
Our team e.g. uses on breakpoint that is only relevant if the screen's orientation is "landscape".

Describe your solution
In addition to accepting a the min-width as a string, breakpoints can now also consist of full media queries.

This is done, by checking, whether the breakpoint string contains "@media". In that case the custom media query is used to create the css.
If the breakpoint does not include "@media", the mobile-first media query is used, just like before.

A breakpoint array like this:

// example custom breakpoints
{
  breakpoints: [
    '40em', 
    '@media screen and (orientation: landscape) and (min-width: 40rem)',    
    '64em',
  ],
}

now results in the following generated media queries:

'@media screen and (min-width: 40em)'
'@media screen and (orientation: landscape) and (min-width: 40rem)'
'@media screen and (min-width: 64em)'

This solution does not result in any breaking changes.

I updated the documentation and the CHANGELOG accordingly.

📦 Published PR as canary version: 0.6.3--canary.1653.a955910.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.6.3--canary.1653.a955910.0
npm install @theme-ui/color@0.6.3--canary.1653.a955910.0
npm install @theme-ui/components@0.6.3--canary.1653.a955910.0
npm install @theme-ui/core@0.6.3--canary.1653.a955910.0
npm install @theme-ui/css@0.6.3--canary.1653.a955910.0
npm install @theme-ui/custom-properties@0.6.3--canary.1653.a955910.0
npm install @theme-ui/editor@0.6.3--canary.1653.a955910.0
npm install gatsby-plugin-theme-ui@0.6.3--canary.1653.a955910.0
npm install gatsby-theme-code-recipes@0.6.3--canary.1653.a955910.0
npm install gatsby-theme-style-guide@0.6.3--canary.1653.a955910.0
npm install gatsby-theme-ui-layout@0.6.3--canary.1653.a955910.0
npm install @theme-ui/match-media@0.6.3--canary.1653.a955910.0
npm install @theme-ui/mdx@0.6.3--canary.1653.a955910.0
npm install @theme-ui/parse-props@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-base@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-bootstrap@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-bulma@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-dark@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-deep@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-funk@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-future@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-polaris@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-roboto@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-sketchy@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-swiss@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-system@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-tailwind@0.6.3--canary.1653.a955910.0
npm install @theme-ui/preset-tosh@0.6.3--canary.1653.a955910.0
npm install @theme-ui/presets@0.6.3--canary.1653.a955910.0
npm install @theme-ui/prism@0.6.3--canary.1653.a955910.0
npm install @theme-ui/sidenav@0.6.3--canary.1653.a955910.0
npm install @theme-ui/style-guide@0.6.3--canary.1653.a955910.0
npm install @theme-ui/tachyons@0.6.3--canary.1653.a955910.0
npm install @theme-ui/tailwind@0.6.3--canary.1653.a955910.0
npm install @theme-ui/theme-provider@0.6.3--canary.1653.a955910.0
npm install theme-ui@0.6.3--canary.1653.a955910.0
npm install @theme-ui/typography@0.6.3--canary.1653.a955910.0
# or 
yarn add @theme-ui/color-modes@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/color@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/components@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/core@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/css@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/custom-properties@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/editor@0.6.3--canary.1653.a955910.0
yarn add gatsby-plugin-theme-ui@0.6.3--canary.1653.a955910.0
yarn add gatsby-theme-code-recipes@0.6.3--canary.1653.a955910.0
yarn add gatsby-theme-style-guide@0.6.3--canary.1653.a955910.0
yarn add gatsby-theme-ui-layout@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/match-media@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/mdx@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/parse-props@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-base@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-bootstrap@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-bulma@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-dark@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-deep@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-funk@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-future@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-polaris@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-roboto@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-sketchy@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-swiss@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-system@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-tailwind@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/preset-tosh@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/presets@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/prism@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/sidenav@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/style-guide@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/tachyons@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/tailwind@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/theme-provider@0.6.3--canary.1653.a955910.0
yarn add theme-ui@0.6.3--canary.1653.a955910.0
yarn add @theme-ui/typography@0.6.3--canary.1653.a955910.0

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/6oi4ioo4uN9BjkS3FR4mTWuCryak
✅ Preview: https://theme-ui-git-fork-carolinmaisenbacher-develop-systemui.vercel.app

[hasparus]

One ternary operator, one amazzing PR. @lachlanjc come look, we're releasing this today.

Thank you so much @carolinmaisenbacher!