Scale object in theme

[indiejoseph]

💬 Questions and Help

I wonder is there any way to do responsive scale in theme object, like how styled-system does https://styled-system.com/theme-specification#scale-objects.

{
...
  texts: {
    heading: {
      fontSize: { sx: '14px', md: '16px', lg: '18px' }, // does't work with xstyled
      // fontSize: ['14px', '16px', '18px'], with styled-system
    },
  }

<x.p text="heading" />

Thanks!

[gregberge]

Actually that's not the way it works but I will consider it! Thanks.

[indiejoseph]

Thanks! I wonder how did you handle it?

or something like:

<x.p text={{ xs: 'heading1', lg: 'heading2' }} />

[gregberge]

<x.p text={{ xs: 'heading1', lg: 'heading2' }} />

yeah

[gregberge]

I tested it and it already work, example:

const theme = {
  texts: { custom: { fontSize: { _: 10, md: 16 } } },
}