Allow theme.spacing() to return a number

Motivation 🔦

I love the spacing utility function because it makes keeping spacing consistent throughout an application very easy, but in some cases, I want to tweak the value returned by it a little. This is currently quite difficult because the function always returns a string with "px" appended to it. Currently, if I want to, for example, add 2 to the return value of the spacing function, I would have to do something like this:

`${Number(theme.spacing(3).slice(0, -2)) + 2}px`

I did check to see if the spacing value provided to createTheme() was exposed anywhere in the Theme object, but it didn’t look like it was.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

There should be some way (possibly a fifth argument?) to make the spacing function return a number. If this isn’t possible, then the spacing multiplier value provided to createTheme() should be exposed somewhere in the Theme object so that developers can use it to do the multiplication themselves.

[chaosmirage]

Workaround: calc(${theme.spacing(2)} - 1px)

[mnajdova]

As per your code this is all it takes to implement it: Number(theme.spacing(3).slice(0, -2)) It should be fairly easy to add this inf your custom theme, or even as a util:

const getSpacing = (theme, value) => Number(theme.spacing(value).slice(0, -2))

I am not sure if it is worth adding it to the theme. I would wait to see if it will get some traction 😃