Update spacing approach about foundational-design-system-proto

[sarahill]

Summary of decision from discussion

• We’ll use a unit value to set the scale ( 4px?)
• Keep the scale simple
• Include some smaller increments for detailed spacing (icons, text)
• Avoid t-shirt sizing conventions as it doesn’t scale well
• Reference spacing for padding, margin and top, left, right, bottom styles.
• Avoid adding multipliers with decimals. We use a limited number of decimals in the scale to give us more range for detailed spacing.

unit = 4

export function spacing(base: number) = {
0: ${unit} * 0,
.25: ${unit} * .25,
.5: ${unit} * .5,
1: ${unit},
2: ${unit} * 2,
3: ${unit} * 3
…etc…
19: ${unit} * 19
20: ${unit} * 20
}

This will then get consumed in padding, margin and top, left, right, bottom styles and will look something like:

marginTop-1
padding-2
paddingLeft-4
bottom-22