Hello folks! Welcome to my pet project – a tool to display design tokens as outlined in the W3C Community Group Draft.
Design tokens are the tiny visual atoms (think colors, fonts, margins, etc.) that make up a design system. The idea here is to visualize these tokens in a neat little UI. The image above is an example of what you'll see when you run this project.
Ultimately, I dream of transforming this tool into a mighty editor for these design tokens. Sounds fun, right?
But, let's keep it real. My time to work on it is as rare as an undiscovered meme on the internet.
So, will this tool become the next big thing in design token management or will it join the noble league of admirable yet abandoned projects? Only time (and my motivation level) will tell. 😅
- Navigate to the project directory and run
npm installto install the dependencies. - Once the installation is complete, run
npm run devto start the project. - Now, you can edit the
tokens.jsonfile to change the visualized design tokens.
Note: Currently, this project does not support Composite Types from the Design Tokens Community Group Draft.
Join me on this journey of excitement, code, occasional despair, and a lot of fun. Whether we succeed or fail, we'll do it with flair!
Next up
Happy coding! 🚀💻