search

ONSdigital / dp-design-system

Design System for Digital Publishing
MIT License
6 stars 3 forks source link

Design token generation tools #20

Open rav-pradhan opened 3 years ago

rav-pradhan commented 3 years ago

Something that was picked up on recently was how we do not have a single source of truth for our design tokens. In the repo currently, we have our variables set in scss. However, for the colours documentation page we have had to lift the colours variables and convert them into a JS module for ease-of-use in 11ty.

I think it could be useful for us to consider storing all design tokens (variables) in a language agnostic format - YAML/JSON - and then leverage a design token generation tool that could let us translate those files into the formats we require.

I imagine there could already be a tool out there we could use that fits our use cases; but if not, there may be value in building one ourselves.

armstrongb commented 3 years ago

https://heydonworks.com/article/design-tokens-in-eleventy/ (you'll need js off as it's Heydon's site) has some info how to use design tokens in 11ty...

armstrongb commented 3 years ago

https://piccalil.li/tutorial/what-are-design-tokens/ - plenty of reading materials and token tools listed here... going to take a bit of evaluation though to pick the right path.

rav-pradhan commented 3 years ago

https://piccalil.li/tutorial/what-are-design-tokens/ - plenty of reading materials and token tools listed here... going to take a bit of evaluation though to pick the right path.

Thanks, Andy's article in particular looks pertinent. Trevor mentioned Theo to me yesterday, so I'm hoping at some point in the coming weeks I / another dev will take a look at how it works. The Sketch/Figma plugins look quite handy as a quick way to produce a universal JSON for us to use, as well

designorant commented 2 years ago

Shouldn't this be raised over at https://github.com/ONSdigital/design-system?

I'm over at Find Insights where we loosely ported parts of the Design System into Svelte, and the only way to build upon it while staying respectful to all the base variables (without duplicating them) is to stick to Sass and import _vars.scss directly.

Unfortunately Sass is where the build performance takes a massive hit that we cannot really afford. We're settling on PostCSS for performance and ecosystem which is why I'm copying everything over manually with a long term goal to automate this process to stay synchronised with upstream. Not that I expect any fundamental changes often but still, Design System is a living organism after all, and redesigns and rebrands do happen. A JSON based list of tokens available in @ons/design-system npm module would make incorporating design tokens into any project a breeze.