8709 task: design tokens used to output styles and documentation (colours)

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 # Build/output files
 .dist/
 *.sass-cache*
+/build
 dist
 /ssr
 coverage

.storybook/styles/_storybook-swatches.scss

@@ -0,0 +1,34 @@
+.sb-table {
+  border-collapse: collapse;
+  width: 100%;
+
+  td,
+  th {
+    padding: var(--space-md);
+    text-align: left;
+  }
+
+  tbody tr:nth-child(odd) {
+    background-color: var(--colour-grey-05);
+  }
+}
+
+.sb-swatch {
+  align-items: center;
+  display: flex;
+  margin: 0;
+}
+
+.sb-swatch__colour {
+  border: 1px solid var(--colour-grey-20);
+  flex-shrink: 0;
+  height: calc(6 * var(--space-unit));
+  width: calc(6 * var(--space-unit));
+}
+
+.sb-swatch__name {
+  color: var(--colour-grey-60);
+  display: block;
+  font-size: var(--font-size-body-xs);
+  margin-left: var(--space-lg)
+}

.storybook/styles/storybook-app.scss

@@ -1,5 +1,7 @@
 @import 'styles/core';
 @import 'styles/theme';
 @import 'styles/common';
+
 @import './storybook-global';
 @import './storybook-icons';
+@import './storybook-swatches';

config.json

@@ -0,0 +1,50 @@
+{
+  "source": ["src/tokens/**/*.json"],
+  "platforms": {
+    "js": {
+      "transformGroup": "js",
+      "buildPath": "src/build/js/",
+      "files": [
+        {
+          "destination": "colours.js",
+          "format": "javascript/module-flat",
+          "options": {
+            "outputReferences": true
+          },
+          "filter": {
+            "attributes": {
+              "category": "colour"
+            }
+          }
+        },
+        {
+          "destination": "colours.d.ts",
+          "format": "typescript/es6-declarations",
+          "filter": {
+            "attributes": {
+              "category": "colour"
+            }
+          }
+        }
+      ]
+    },
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "src/build/css/",
+      "files": [
+        {
+          "destination": "colours.css",
+          "format": "css/variables",
+          "options": {
+            "outputReferences": true
+          },
+          "filter": {
+            "attributes": {
+              "category": "colour"
+            }
+          }
+        }
+      ]
+    }
+  }
+}