8690 task: Added colours to storybook

[creido-welly]

Initial commit for adding colour documentation to Storybook based on existing Sketch designs https://app.zeplin.io/project/5b4e06b48ae4580d4871178a/screen/5ea86a03c8963abb60b549cd

To test

1. Checkout this branch
2. npm run install
3. npm run storybook

[creido-welly]

This file is taken from the token build process from this work in progress PR
#2

[chriddell]

Would an aim be to eventually remove this file and rely on design tokens from an external source?

[creido-welly]

Yes this file is a stop-gap. The idea is to remove this and any similar build files from the codebase in favour of an npm process which uses tokens in JSON format to generate all outputs needed.

For more context, this file was generated by Style Dictionary using config and colour/base.json from the afore mentioned PR.

Are you specifically talking about an external source from a product theming standpoint?

[chriddell]

Yep. Was concerned that we're defining tokens within the npm package itself (design-system), which seems like duplication (was imagining a single source of truth somewhere, probably a JSON file, which could be edited by designers to update values, which then permeate through the many apps which consume the design tokens).

[creido-welly]

Yes, the end result will be the single source of truth you speak of

[chriddell]

I must admit I struggle to see the argument for using "colour" over "color"... I find when I'm writing code that "color" is the first spelling I opt for, before realising that the variables don't use that spelling.

I would prefer if we used "color" for consistency (with CSS property), unless there is a reason for using the UK spelling?

[creido-welly]

I must admit I struggle to see the argument for using "colour" over "color"... I find when I'm writing code that "color" is the first spelling I opt for, before realising that the variables don't use that spelling.

I would prefer if we used "color" for consistency (with CSS property), unless there is a reason for using the UK spelling?

It's a fair point. This has been carried across from CC and I think the reason we used "colour" was because that was what the original designs used. I'll add a comment to the ticket for discussion.

[creido-welly]

All instances of colour which are not documentation based (I include Storybook file names in that) have been changed to color.

[chriddell]

Was it a conscious decision not to change filenames to US spelling (colors)?

[creido-welly]

Was it a conscious decision not to change filenames to US spelling (colors)?

For Colours.stories.tsx and Colours.stories.mdx yes. I was on the point of changing them but in the file system they almost read as the headings in Storybook.

I'll change them if you like?

[chriddell]

No suggestion from me either way, just checking whether it was an oversight!