From 4476f714d7385d9939323683356dd0339090e721 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Fri, 9 Jul 2021 16:30:15 +0100 Subject: [PATCH] 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 | 3 +- config.json | 9 ++++ src/build/css/colours.css | 2 +- src/build/js/colours.d.ts | 90 +++++++++++++++++++++++++++++++++ src/build/js/colours.js | 2 +- src/stories/Colours.stories.mdx | 8 +-- src/stories/Colours.stories.tsx | 8 +-- tsconfig.json | 5 +- 8 files changed, 113 insertions(+), 14 deletions(-) create mode 100644 src/build/js/colours.d.ts diff --git a/.gitignore b/.gitignore index f326b25..902960d 100644 --- a/.gitignore +++ b/.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 \ No newline at end of file diff --git a/config.json b/config.json index e11d165..77cd699 100644 --- a/config.json +++ b/config.json @@ -16,6 +16,15 @@ "category": "colour" } } + }, + { + "destination": "colours.d.ts", + "format": "typescript/es6-declarations", + "filter": { + "attributes": { + "category": "colour" + } + } } ] }, diff --git a/src/build/css/colours.css b/src/build/css/colours.css index 1f71e04..4621ca0 100644 --- a/src/build/css/colours.css +++ b/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 { diff --git a/src/build/js/colours.d.ts b/src/build/js/colours.d.ts new file mode 100644 index 0000000..a828aa9 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/build/js/colours.js b/src/build/js/colours.js index 24390d5..b24de66 100644 --- a/src/build/js/colours.js +++ b/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 = { diff --git a/src/stories/Colours.stories.mdx b/src/stories/Colours.stories.mdx index b4f0dd1..087bcb5 100644 --- a/src/stories/Colours.stories.mdx +++ b/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'; # Colour palette - - - - + diff --git a/src/stories/Colours.stories.tsx b/src/stories/Colours.stories.tsx index 06d4385..a2d8f89 100644 --- a/src/stories/Colours.stories.tsx +++ b/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; - const tokenKeys = Object.keys(tokens); + const tokenKeys = Object.keys(colourTokens) as Array; return ( @@ -22,7 +23,6 @@ export const ColourVariables = ({ tokens }: TokensProps) => { - {/* {tokenKeys.map((key: keyof typeof colourTokens) => { */} {tokenKeys.map((key) => { const value = colourTokens[key]; const cssValue = /rgb/i.test(key) ? `rgb(${value})` : value; diff --git a/tsconfig.json b/tsconfig.json index a6a0df9..ce6125c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,12 +8,15 @@ "/", "components/*", ], + "build/*": [ + "build/*" + ], "data/*": [ "data/*" ], "utils/*": [ "utils/*" - ], + ] }, "moduleResolution": "node", "noImplicitAny": true,