Add new units to spacing scale (#897)

## What are you changing?

Adds new spacing units to maintain parity with Figma.

## Why?

The spacing scale has diverged from what the design team are working
with in Figma so engineers are being given designs which use spacing
units not available in `source-foundations`, forcing them to hardcode
spacing values rather than use the system.

.changeset/quiet-turtles-check.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-foundations': minor
+---
+
+Add new spacing units to maintain parity with Figma

libs/@guardian/source-foundations/src/space/space.stories.mdx

@@ -30,24 +30,36 @@ const container = css`
 The following units can be applied to margin or padding properties, vertically
 or horizontally.
 
+- `space[0]` -> 2px
 - `space[1]` -> 4px
 - `space[2]` -> 8px
 - `space[3]` -> 12px
 - `space[4]` -> 16px
 - `space[5]` -> 20px
 - `space[6]` -> 24px
+- `space[8]` -> 32px
 - `space[9]` -> 36px
+- `space[10]` -> 40px
 - `space[12]` -> 48px
+- `space[14]` -> 56px
+- `space[16]` -> 64px
+- `space[18]` -> 72px
 - `space[24]` -> 96px
 
 The same scale is also available as rems:
 
+- `remSpace[0]` -> 0.125rem
 - `remSpace[1]` -> 0.25rem
 - `remSpace[2]` -> 0.5rem
 - `remSpace[3]` -> 0.75rem
 - `remSpace[4]` -> 1rem
 - `remSpace[5]` -> 1.25rem
 - `remSpace[6]` -> 1.5rem
+- `remSpace[8]` -> 2rem
 - `remSpace[9]` -> 2.25rem
+- `remSpace[10]` -> 2.5rem
 - `remSpace[12]` -> 3rem
+- `remSpace[14]` -> 3.5rem
+- `remSpace[16]` -> 4rem
+- `remSpace[18]` -> 4.5rem
 - `remSpace[24]` -> 6rem

libs/@guardian/source-foundations/src/space/space.ts

@@ -6,25 +6,37 @@ import { pxToRem } from '../utils/px-to-rem';
  *
  * Can be applied to margin or padding properties, vertically or horizontally.
  *
+ ** `space[0]` -> 2px
  ** `space[1]` -> 4px
  ** `space[2]` -> 8px
  ** `space[3]` -> 12px
  ** `space[4]` -> 16px
  ** `space[5]` -> 20px
  ** `space[6]` -> 24px
+ ** `space[8]` -> 32px
  ** `space[9]` -> 36px
+ ** `space[10]` -> 40px
  ** `space[12]` -> 48px
+ ** `space[14]` -> 56px
+ ** `space[16]` -> 64px
+ ** `space[18]` -> 72px
  ** `space[24]` -> 96px
  */
 export const space = {
+	0: 2,
 	1: 4,
 	2: 8,
 	3: 12,
 	4: 16,
 	5: 20,
 	6: 24,
+	8: 32,
 	9: 36,
+	10: 40,
 	12: 48,
+	14: 56,
+	16: 64,
+	18: 72,
 	24: 96,
 } as const;
 
@@ -34,25 +46,37 @@ export const space = {
  *
  * Can be applied to margin or padding properties, vertically or horizontally.
  *
+ ** `remSpace[0]` -> 0.125rem
  ** `remSpace[1]` -> 0.25rem
  ** `remSpace[2]` -> 0.5rem
  ** `remSpace[3]` -> 0.75rem
  ** `remSpace[4]` -> 1rem
  ** `remSpace[5]` -> 1.25rem
  ** `remSpace[6]` -> 1.5rem
+ ** `remSpace[8]` -> 2rem
  ** `remSpace[9]` -> 2.25rem
+ ** `remSpace[10]` -> 2.5rem
  ** `remSpace[12]` -> 3rem
+ ** `remSpace[14]` -> 3.5rem
+ ** `remSpace[16]` -> 4rem
+ ** `remSpace[18]` -> 4.5rem
  ** `remSpace[24]` -> 6rem
  */
 export const remSpace: { [K in keyof typeof space]: string } = {
+	0: `${pxToRem(space[0])}rem`,
 	1: `${pxToRem(space[1])}rem`,
 	2: `${pxToRem(space[2])}rem`,
 	3: `${pxToRem(space[3])}rem`,
 	4: `${pxToRem(space[4])}rem`,
 	5: `${pxToRem(space[5])}rem`,
 	6: `${pxToRem(space[6])}rem`,
+	8: `${pxToRem(space[8])}rem`,
 	9: `${pxToRem(space[9])}rem`,
+	10: `${pxToRem(space[10])}rem`,
 	12: `${pxToRem(space[12])}rem`,
+	14: `${pxToRem(space[14])}rem`,
+	16: `${pxToRem(space[16])}rem`,
+	18: `${pxToRem(space[18])}rem`,
 	24: `${pxToRem(space[24])}rem`,
 };