This project is a demonstration of a (possible) setup of Style Dictionary for the generation of design tokens. It's been created as a companion to a Medium article that I have written to share my experience in setting up Style Dictionary for our Cosmos Design System in Badoo.
Notice: Feel free to use this code as reference, or clone it and tailor it to your needs. But keep in mind that I have done in this project is not what I suggest you to do, unless you have a very clear idea of what you need and what you want to achieve. Style Dictionary comes with a lot of pre-defined defaults, that most probably will work for you. Before starting to dig into all the possible customisations that you can have, try the default settings offered by the library, look at the output files, and see if they can suit your needs. Probably they will do. If they don't, think how you want the output files generated, and see which one of the API methods you can use for that specific scope.
Install the project dependencies via the CLI command:
npm install
The project is made of these files and folders:
/srccontains the design tokens input files (in JSON format)/templatescontains the templates used to generate the output files/distcontains the generated output files (in different formats)build.jsis the script used to generate the output files
You can build the design tokens from the /src/ folder using the CLI command:
npm run build
of you can automatically re-build the tokens at every change using the command:
npm run watch
The generated tokens are saved in the /dist folder, and organised by target platform.
This project is under MIT license.