Feature: Responsive styles whitelist mobile

Is your feature request related to a problem? Please describe. I wish I could just whitelist mobile instead of blacklisting the rest of the devices while I use the responsive prop.

Describe the solution you’d like If we would explicitly pass just one argument to the array of responsive styles it would mean that we want to apply this value only to the smallest breakpoint, eg: we got 3 breakpoints [mobile, tablet, PC] and we want to display hamburger menu only for mobile, instead of doing

display: ["block", "none", "none"]

we could do:

display: ["block"]

in the CSS media queries, the equivalent would be using:

@media only screen and (max-width: <mobile>)

Let me know what you think 😃

[jxnblk]

Generally speaking the responsive array is meant to be “mobile first” (see https://styled-system.com/guides/array-props for some background). You might find the @theme-ui/match-media package to be a better fit for conditionally showing and hiding elements based on viewport width. I’d be open for more hooks-based APIs to explore your use-case, but I don’t think it would be a good idea to overload the responsive array values with max-width media queries

[lachlanjc]

Closing since we’re not planning to implement.