Add Spacing Props

[dav-is]

I love rems for text and sizing grid items, but I think px is still valid for spacing. Users can increase the font size and make the text bigger, but I don't think they intend to increase the spacing. If a width is defined to contain text, then it makes sense to tie it to rem, hence the "sizes" props that already exist.

If I want to add a little spacing around a user's, avatar, I don't want that to increase with the font size. If spacing uses rem, I think it needlessly wastes space on the screen when the user increases the font size by a lot. I am big fan of "density" also being configurable by the user. I've seen email clients that allow this.

An example of somewhere I have recently seen this done well is Radix Themes' Spacing (I don't agree with their typography using px, I'm only mentioning their spacing page). They suggest density options at 90%, 95%, 100%, 105%, 110%.

https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/styles/tokens/space.css

I know the openprops website says, "No px here, relative units all the way." Used in this way, and considering density is a variable, you could consider predefined spacing props as "relative".

If you don't think this is a good idea for OpenProps, then I think more examples of using spacing on the website could be useful.

[argyleink]

good call here, I see this as a couple of tasks that are worthwhile:

• remove that "no px here" statement
• offer a set of size props that are px based

there's no reason that pixels should be avoided so much, and if this lib wants to offer grab-n-go prop packs, there should definitely be a pixel based set.

[Brian-Pob]

How does this look? I converted the rem sizes to px by multiplying by 16.
https://codepen.io/brian-pob/pen/jORzORB