Questions from someone coming from styled-system

[Montlouis-Calixte Stéphane]

1. Sometimes I found myself wanting to use "magical one time px values" and this is what I like about styled-system vs tailwind-css, I was able to add some 3px margin here and there when needed. <Box mr={3} /> but still use theme values. Seems like typescript don't like it here. Was is the best practice here ? Generate multiples by 4 ?

  spacing: {"1": 4, 2: "8", 3: "12"}

But stuff like this doesn't allow TS to understand what I'm doing :

spacing: Object.fromEntries(
    [...new Array(20)].map((_, i) => [i.toString(), i * 4])
  )

With the spacing theme I need to generate the spacing object, not just use 4 or 5 keys. Do you have solution for this ?

EDIT: Ohhh nvm I got it, spacing is just.. well, for spacing, there are no rules for width and height.

2. Do you plan to support arrays or objects like styled-system ?

  colors: {
    black: '#000000',
    greys: ['#F5F5F5',  '#94959F',  '#707070'],
    white: '#FFFFFF',
    blues: {
      dark: '#282C40',
      light: '#9EF2FA',
    },
  },

and use it like <Box color="grey.0" and <Box color="blues.dark" />

3. I noticed fontSizes doesn't have theme key, is this on purpose ? I was expecting to find it in the theme and use predefined fontSizes.

Great lib btw !

[Joel Besada]

1. Sometimes I found myself wanting to use "magical one time px values" and this is what I like about styled-system vs tailwind-css, I was able to add some 3px margin here and there when needed. <Box mr={3} /> but still use theme values. Seems like typescript don't like it here. Was is the best practice here ? Generate multiples by 4 ?

The recommended practice for one-off values is to apply them directly via the style prop instead:

<Box padding="s" style={{marginTop: 7}} />

2. Do you plan to support arrays or objects like styled-system ?

This would be cool but I don't think there's a way to get this to work with TypeScript (it wouldn't be able to map the strings "grey.0" and "blues.dark" as part of the theme). However, and I admit this is slightly ugly, you could do this today already:

colors: {
    'greys.0': '#F5F5F5',
    'greys.1': '#94959F',
    'greys.2': '#707070',
    'blues.dark': '#282C40',
    'blues.light': '#9EF2FA',
},

3. I noticed fontSizes doesn't have theme key, is this on purpose ? I was expecting to find it in the theme and use predefined fontSizes.

The thinking was that you'd be using the textVariants definitions mostly and not be overriding font sizes often, but I can see the case for mapping this to a theme key as well. I'd be happy to accept a PR on this if you'd like to contribute! 😉

[Montlouis-Calixte Stéphane]

I'll contribute ! Thanks !