Expand the spacing scale

[jameskoster]

Officially the spacing scale is based on an 8px base unit. However there are a few situations where values outside of the scale are used, and in these cases the general recommendation is to use values from a 4px baseline. This is achieved with code like:

line-height: $grid-unit-05 * 5;

Couple this with the fact that the scale already includes a couple of values outside of the 8px baseline ($grid-unit-05 and $grid-unit-15), it seems a good moment to consider officially adopting the 'unofficial' 4px baseline.

$grid-unit-05: 0.5 * $grid-unit;
$grid-unit-10: 1 * $grid-unit;
$grid-unit-15: 1.5 * $grid-unit;
$grid-unit-20: 2 * $grid-unit;	
$grid-unit-25: 2.5 * $grid-unit; 🆕
$grid-unit-30: 3 * $grid-unit;
$grid-unit-35: 3.5 * $grid-unit; 🆕
$grid-unit-40: 4 * $grid-unit;
$grid-unit-45: 4.5 * $grid-unit; 🆕
$grid-unit-50: 5 * $grid-unit;
$grid-unit-55: 5.5 * $grid-unit; 🆕
$grid-unit-60: 6 * $grid-unit;
$grid-unit-65: 6.5 * $grid-unit; 🆕
$grid-unit-70: 7 * $grid-unit;	
$grid-unit-75: 7.5 * $grid-unit; 🆕
$grid-unit-80: 8 * $grid-unit;
$grid-unit-85: 8.5 * $grid-unit; 🆕

This would make values 20px, 28px, 36px, 44px, 52px, 60px, and 68px available for use as variables, and allow us to tidy up some of the aforementioned code smells.

What do you think?

cc @WordPress/gutenberg-design

[jasmussen]

Question: do these new variables constitute new promises to maintain back-compat? I have a recollection of a similar conversation with now-deprecated variables, which if the case is the only reason to hesitate. To that end, I wonder: are these variables the best way to expand a spacing scale? Would a mix-in work as well or better? Something like spacing(8.5)?

A mixin might potentially also work better with the JSX based pieces? CC: @WordPress/gutenberg-components

[mirka]

do these new variables constitute new promises to maintain back-compat?

I think so, yes.

Adding discrete variables for each value is not sustainable, so it would probably be better to maintain a dynamic convention, e.g. $grid-unit-05 * 5 or a mixin. If we were to start from scratch, I may prefer a 4px-based mixin. But introducing that now may be more trouble than it's worth, given that we'd have to live with a mix of both until we migrate the entire codebase.

[jameskoster]

Ah yes, a mixin makes much more sense, and will be useful for defining things like layout width(s) which can be several hundred pixels.

But introducing that now may be more trouble than it's worth, given that we'd have to live with a mix of both until we migrate the entire codebase.

Where do you see the trouble? I'm thinking the migration should be relatively painless:

1. Add mixin
2. Use mixin in existing variables e.g. $grid-unit: 8px; becomes $grid-unit: spacing(2);
3. Move existing variables to 'deprecated' section with comment encouraging use of spacing() mixin
4. Over time; replace existing variable instances with mixin

[mirka]

4. Over time; replace existing variable instances with mixin

This part is the trouble. I've come to learn that this doesn't happen organically. Somebody has to go in and either do the replacing work themselves, or coordinate and oversee a crowdsourced effort until it's done 😄

If the upside is worth that effort and someone can commit to it, or we don't really mind having a mix of both in the codebase for a long time (possibly forever), then there's no issue. It would be pretty straightforward, like you outlined.

[jameskoster]

A mix doesn't seem like the end of the world to me, but y'all know better.

Also, maybe I'm being wildly optimistic, but it seems like it should be a fairly simple find/replace task. Similar to when we updated radius. I'll try to find some time to explore next week :D