Design Tokens creation, integration, and documentation

[sturobson]

What

Import or compile the .json from the Design Tokens in the front-end toolkits repo.

Then create necessary tooling to create relevant documentation pages in Elements

Why

Currently the documentation for colours, fonts, and spacing are created by hand. As we are using .hbs as a templating language it should be possible to import the .json files of Design Tokens to auto-generate the pages needed for each brand.

Done when

• [ ] Naming conventions defined, agreed, and documented.
• [ ] Creation of tooling using Style Dictionary.
• [ ] Creation of the various levels of Design Tokens as defined in their naming conventions.
• [ ] Integration with the front-end toolkits.
• [ ] Design Tokens package is installed into the relevant Elements repo.
• [ ] When Colours, Typography, and Spacing tokens are creating the relevant documentation for all four brands (global, springer, springer nature, and nature).
• [ ] Documentation on what is happening, and what needs to happened to keep this updated.

Anything else

• investigate what automation can be done in regards to pulling the latest version automatically as part of Elements twice daily build processes.

[sturobson]

This has been split out into three separate issues on github, and cards in the project board and can now be close

• creation
• integration
• documentation