Responsive properties

[Bastian]

It should be possible to use breakpoints for properties that change the style.

Problem Description

At the momemt, you cannot have reponsive properties, but have to use window.matchMediaQuery or use CSS to hide complete components, like so (using Tailwind):

<Button fullWidth class="md:hidden">
  Full width on mobile
</Button>

<Button class="hidden md:flex">
  Normal on desktop
</Button>

Both options have downsides:

• The first option (matchMediaQuery) does not work with SSR
• The second option (hide with CSS) would create the same DOM elements multiple times and is very boilerplate heavy

Suggestion Solution

Allowing reponsive properties for some hand-picked properties would combine the best of both worlds: Support for SSR, no duplicate DOM elements and very little boilerplate:

<Button fullWidth={{ default: true, md: false }}>
  Full width on mobile
</Button>

<Drawer open={{ default: false, lg: true }}>
  <!-- ... -->
</Button>

I'm not yet sure how to best implement it.

[Bastian]

The biggest problem at the moment is with the Text component. While on desktop screens you often want titles and stuff to be really big (4xl or bigger), on mobile screens this is way to big and for example xl is much more appropriate.

On the other hand, this would look kinda weird:

<Text tag="h1" size={{ default: "xl", lg: "2xl", 2xl: "4xl" }>
  I'm large on large screens and small on small screens!
</Text>

Another option (for texts specifically) is to not have absolute sizes but have them relative by default. I.e., that

<Text tag="h1" size="2xl">
  I'm still reponsive!
</Text>

has different font sizes on different screen sizes.