add Synthesis spacing variables

scss/spacing.scss

@@ -1,7 +1,24 @@
+// TODO: deprecate after swapping for synth spacing vars
 $ux-spacing-10: 4px;
 $ux-spacing-20: 8px;
 $ux-spacing-30: 12px;
 $ux-spacing-40: 16px;
 $ux-spacing-50: 24px;
 $ux-spacing-60: 32px;
 $ux-spacing-70: 48px;
+
+$synth-spacing-base: 4px;
+
+$synth-spacing-1: $synth-spacing-base; // 4px
+$synth-spacing-2: $synth-spacing-base * 2; // 8px
+$synth-spacing-3: $synth-spacing-base * 3; // 12px
+$synth-spacing-4: $synth-spacing-base * 4; // 16px
+$synth-spacing-5: $synth-spacing-base * 5; // 20px
+$synth-spacing-6: $synth-spacing-base * 6; // 24px
+$synth-spacing-7: $synth-spacing-base * 7; // 28px
+$synth-spacing-8: $synth-spacing-base * 8; // 32px
+$synth-spacing-9: $synth-spacing-base * 9; // 36px
+$synth-spacing-10: $synth-spacing-base * 10; // 40px
+$synth-spacing-11: $synth-spacing-base * 11; // 44px
+$synth-spacing-12: $synth-spacing-base * 12; // 48px
+

stories/Spacing/Spacing.scss

@@ -0,0 +1,59 @@
+@import 'scss/colors';
+@import 'scss/spacing';
+
+.spacing-example {
+  background-color: $synth-accent-green;
+}
+
+@mixin spacing-example-square($spacing-token) {
+  height: $spacing-token;
+  width: $spacing-token;
+}
+
+.synth-spacing-1 {
+  @include spacing-example-square($synth-spacing-1);
+}
+
+.synth-spacing-2 {
+  @include spacing-example-square($synth-spacing-2);
+}
+
+.synth-spacing-3 {
+  @include spacing-example-square($synth-spacing-3);
+}
+
+.synth-spacing-4 {
+  @include spacing-example-square($synth-spacing-4);
+}
+
+.synth-spacing-5 {
+  @include spacing-example-square($synth-spacing-5);
+}
+
+.synth-spacing-6 {
+  @include spacing-example-square($synth-spacing-6);
+}
+
+.synth-spacing-7 {
+  @include spacing-example-square($synth-spacing-7);
+}
+
+.synth-spacing-8 {
+  @include spacing-example-square($synth-spacing-8);
+}
+
+.synth-spacing-9 {
+  @include spacing-example-square($synth-spacing-9);
+}
+
+.synth-spacing-10 {
+  @include spacing-example-square($synth-spacing-10);
+}
+
+.synth-spacing-11 {
+  @include spacing-example-square($synth-spacing-11);
+}
+
+.synth-spacing-12 {
+  @include spacing-example-square($synth-spacing-12);
+}

stories/Spacing/Spacing.stories.jsx

@@ -1,21 +1,28 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import {
  Table, TableBody, TableCell, TableHead, TableRow,
 } from 'src/Table';
-import { colors } from 'src/Styles';
+
+import './Spacing.scss';
 
 import mdx from './Spacing.mdx';
 
 /* eslint-disable object-curly-newline */
 const data = [
-  { id: 1, token: '$ux-spacing-10', px: '4' },
-  { id: 2, token: '$ux-spacing-20', px: '8' },
-  { id: 3, token: '$ux-spacing-30', px: '12' },
-  { id: 4, token: '$ux-spacing-40', px: '16' },
-  { id: 5, token: '$ux-spacing-50', px: '24' },
-  { id: 6, token: '$ux-spacing-60', px: '32' },
-  { id: 7, token: '$ux-spacing-70', px: '48' },
+  { id: 1, token: 'synth-spacing-1', px: '4' },
+  { id: 2, token: 'synth-spacing-2', px: '8' },
+  { id: 3, token: 'synth-spacing-3', px: '12' },
+  { id: 4, token: 'synth-spacing-4', px: '16' },
+  { id: 5, token: 'synth-spacing-5', px: '20' },
+  { id: 6, token: 'synth-spacing-6', px: '24' },
+  { id: 7, token: 'synth-spacing-7', px: '28' },
+  { id: 8, token: 'synth-spacing-8', px: '32' },
+  { id: 9, token: 'synth-spacing-9', px: '36' },
+  { id: 10, token: 'synth-spacing-10', px: '40' },
+  { id: 11, token: 'synth-spacing-11', px: '44' },
+  { id: 12, token: 'synth-spacing-12', px: '48' },
 ];
 
 export const Spacing = () => (
@@ -30,10 +37,10 @@ export const Spacing = () => (
     <TableBody>
       {data.map(((row) => (
         <TableRow key={row.id}>
-          <TableCell><code>{row.token}</code></TableCell>
+          <TableCell><code>${row.token}</code></TableCell>
           <TableCell>{row.px}</TableCell>
           <TableCell>
-            <div style={{ height: `${row.px}px`, width: `${row.px}px`, backgroundColor: colors.UX_PURPLE }} />
+            <div className={classNames('spacing-example', row.token)} />
           </TableCell>
         </TableRow>
       )))}