A Simplified Responsive Variants Api

[Hamzat Victor Oluwabori]

When using Stitches responsive variants, I get a bit frustrated having to continually add quotes and the "@" sign. It would be better if we could do away with them and go for a simpler approach.
So instead of this 👇

<Stack
  gap={{ "@sm": 2, "@md": 5, "@lg": 10 }}
  direction={{ "@sm": "column", "@lg": "row"}}
>
  <Box />
  <Box />
  <Box />
</Stack>

We can use this 👇

<Stack
  gap={{ sm: 2, md: 5, lg: 10 }}
  direction={{ sm: "column", lg: "row"}}
>
  <Box />
  <Box />
  <Box />
</Stack>

Simpler and easier on the eye