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.