8709 task: design token prototyping (WIP)

* initial work with using design tokens and style dictionary to output css variables for styling and js modules for documentation

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 # Build/output files
 .dist/
 *.sass-cache*
+/build
 dist
 /ssr
 coverage
@@ -26,4 +27,4 @@ storybook-static
 
 # Misc
 temp/
-audit.txt
+audit.txt

config.json

@@ -16,6 +16,15 @@
               "category": "colour"
             }
           }
+        },
+        {
+          "destination": "colours.d.ts",
+          "format": "typescript/es6-declarations",
+          "filter": {
+            "attributes": {
+              "category": "colour"
+            }
+          }
         }
       ]
     },

src/build/css/colours.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Jul 2021 17:30:59 GMT
+ * Generated on Fri, 09 Jul 2021 15:05:58 GMT
  */
 
 :root {

src/build/js/colours.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 09 Jul 2021 15:05:58 GMT
+ */
+
+export const ColourBlack : string;
+export const ColourBlackRgb : string;
+export const ColourWhite : string;
+export const ColourWhiteRgb : string;
+export const ColourAmber10 : string;
+export const ColourAmber20 : string;
+export const ColourAmber30 : string;
+export const ColourAmber40 : string;
+export const ColourAmber50 : string;
+export const ColourAmber60 : string;
+export const ColourAmber70 : string;
+export const ColourAmber80 : string;
+export const ColourAmber90 : string;
+export const ColourAmber05 : string;
+export const ColourBlue10 : string;
+export const ColourBlue20 : string;
+export const ColourBlue30 : string;
+export const ColourBlue40 : string;
+export const ColourBlue50 : string;
+export const ColourBlue60 : string;
+export const ColourBlue70 : string;
+export const ColourBlue80 : string;
+export const ColourBlue90 : string;
+export const ColourBlue05 : string;
+export const ColourCyan10 : string;
+export const ColourCyan20 : string;
+export const ColourCyan30 : string;
+export const ColourCyan40 : string;
+export const ColourCyan50 : string;
+export const ColourCyan60 : string;
+export const ColourCyan70 : string;
+export const ColourCyan80 : string;
+export const ColourCyan90 : string;
+export const ColourCyan05 : string;
+export const ColourGreen10 : string;
+export const ColourGreen20 : string;
+export const ColourGreen30 : string;
+export const ColourGreen40 : string;
+export const ColourGreen50 : string;
+export const ColourGreen60 : string;
+export const ColourGreen70 : string;
+export const ColourGreen80 : string;
+export const ColourGreen90 : string;
+export const ColourGreen05 : string;
+export const ColourGrey10 : string;
+export const ColourGrey20 : string;
+export const ColourGrey30 : string;
+export const ColourGrey40 : string;
+export const ColourGrey50 : string;
+export const ColourGrey60 : string;
+export const ColourGrey70 : string;
+export const ColourGrey80 : string;
+export const ColourGrey90 : string;
+export const ColourGrey60Rgb : string;
+export const ColourGrey05 : string;
+export const ColourOrange10 : string;
+export const ColourOrange20 : string;
+export const ColourOrange30 : string;
+export const ColourOrange40 : string;
+export const ColourOrange50 : string;
+export const ColourOrange60 : string;
+export const ColourOrange70 : string;
+export const ColourOrange80 : string;
+export const ColourOrange90 : string;
+export const ColourOrange05 : string;
+export const ColourRed10 : string;
+export const ColourRed20 : string;
+export const ColourRed30 : string;
+export const ColourRed40 : string;
+export const ColourRed50 : string;
+export const ColourRed60 : string;
+export const ColourRed70 : string;
+export const ColourRed80 : string;
+export const ColourRed90 : string;
+export const ColourRed05 : string;
+export const ColourYellow10 : string;
+export const ColourYellow20 : string;
+export const ColourYellow30 : string;
+export const ColourYellow40 : string;
+export const ColourYellow50 : string;
+export const ColourYellow60 : string;
+export const ColourYellow70 : string;
+export const ColourYellow80 : string;
+export const ColourYellow90 : string;
+export const ColourYellow05 : string;

src/build/js/colours.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Jul 2021 17:30:59 GMT
+ * Generated on Fri, 09 Jul 2021 15:05:58 GMT
  */
 
 module.exports = {

src/stories/Colours.stories.mdx

@@ -1,13 +1,9 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
-import { ColoursPaletteStatus, ColourVariables } from './Colours.stories';
-import colourTokens from '../../build/js/colours';
+import { ColourVariables } from './Colours.stories';
 
 <Meta title={`Global/Colours`} />
 
 # Colour palette
 
-<ColourVariables tokens={colourTokens} />
-
-<ColoursPaletteStatus />
-
+<ColourVariables />

src/stories/Colours.stories.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 
-import colourTokens from 'src/build/js/colours';
+import colourTokens from 'build/js/colours';
 import { toCssVariable } from 'utils/change-case';
 
 type TokensProps = {
   [key: string]: string;
 };
 
+// TODO: Ideally we would import tokens as a prop but type declarations
+// are not implicit at the node level i.e. `tokenKeys.map((key) =>`
 export const ColourVariables = ({ tokens }: TokensProps) => {
-  // const tokenKeys = Object.keys(colourTokens) as Array<keyof typeof colourTokens>;
-  const tokenKeys = Object.keys(tokens);
+  const tokenKeys = Object.keys(colourTokens) as Array<keyof typeof colourTokens>;
 
   return (
     <table className="sb-table sb-table--swatches">
@@ -22,7 +23,6 @@ export const ColourVariables = ({ tokens }: TokensProps) => {
         </tr>
       </thead>
       <tbody>
-        {/* {tokenKeys.map((key: keyof typeof colourTokens) => { */}
         {tokenKeys.map((key) => {
           const value = colourTokens[key];
           const cssValue = /rgb/i.test(key) ? `rgb(${value})` : value;

tsconfig.json

@@ -8,12 +8,15 @@
                 "/",
                 "components/*",
             ],
+            "build/*": [
+                "build/*"
+            ],
             "data/*": [
                 "data/*"
             ],
             "utils/*": [
                 "utils/*"
-            ],
+            ]
         },
         "moduleResolution": "node",
         "noImplicitAny": true,