Allow `space` theme values to be defined as an object.

This may already be possible - so please let me know if it’s not actually an issue.

At the moment, we can define the most theme values as objects as opposed to arrays, such as fontSizes:

const theme = {
    fontSizes: {
        body: 12,
        largeHeading: 22
    }
}

This is super useful for allowing changes to be made in the future without having to go and update every array index.

However, if you try to do this with space, and pass it to a component margin or padding, it’s not recognised and no padding is applied. E.g.

const themes = {
    space: {
        small: 4,
        large: 16
    }
}

<Box px="small" mb="large">Example</Box>

Is there a reason for this? I’m getting lost in other packages, and sub-packages so can’t work out why this functionality is different from the other keys.

[jxnblk]

This would need to be address in styled-system. If you haven’t already, can you open an issue in that repo to discuss?

[thomasbrus]

I can’t tell exactly either but I think it would be better if it the unit was always required, for example when configuring breakpoints I have to think about whether the unit is px, em, or rems…