Responsive defaultVariants

[marconucara]

Is your feature request related to a problem? Please describe.

In general, but mostly when I use component composition, I need to set a responsive defaultVariants. In the example below I want to create a "Heading" component that uses some variants of "Text" in a responsive way.

Describe the solution you'd like

I think it is expected that either of these syntaxes will work as described, I prefer the former personally.

Premises:

• @typoGrow is my semantic media query for typography
• displayMd, displayLg are two values of "size" variant of Text component
• align and weight are two variants that doesn't need to change responsively

// first solution:
const Heading = styled(Text, {
  marginBottom: "$4",
  ...

  defaultVariants: {
    size: {
      "@initial": "displayMd",
      "@typoGrow": "displayLg",
    },
    align: "center",
    weight: "semibold",
  },
});

// second solution:
const Heading = styled(Text, {
  marginBottom: "$4",
  ...

  defaultVariants: {
    size: "displayMd",
    align: "center",
    weight: "semibold",
  },
  "@typoGrow": {
    defaultVariants: {
      size: "displayLg",
    },
  },
});

Describe alternatives you've considered My current alternative is a bit ugly and doesn't allow to export a Heading component with predefined responsiveness, unless you wrap it with a second component.

const Heading = styled(Text, {
  marginBottom: "$4",
  ...

  defaultVariants: {
    align: "center",
    weight: "semibold",
  },
});

// and in render or in a second wrapping component:
<Heading size={{ "@initial": "displayMd", "@typoGrow": "displayLg" }}>
  {heading}
</Heading>