Design tokens pipeline

[dvanleeuwen]

Hi,
Our UX designers can make changes to the design tokens that came with the Figma UI kit 2.1.1 (using Tokens Studio in Figma). When they commit such changes to our GitHub repository, we want to automatically map them onto the theme (css) which we use for our PrimeNG components.

We have been looking into the Tokens Studio documentation on Transforming design tokens (with StyleDictionary): https://docs.tokens.studio/transforming/style-dictionary

We have also been looking into the PrimeNG documentation on custom theming: https://primeng.org/theming#customtheme

However, there seems to be quite a mismatch between the variables that are used by the theme and the variables we get when we map the tokens onto variables. The names don't match. Any help is much appreciated.
Hope to here from you, Diederik

[onursenture]

Hello, as of now, our token structure is not in a position to easily convert your design system into CSS. However, almost all tokens have their counterparts in _variables.scss in the lara-light or lara-dark of the primeng-sass-theme project. We are working on modifying both the theming engine and the token structure to make this conversion easier.

After we have made the theming engine and token structures compatible with each other, our goal is to present this to you with a new Theme Designer application. This is currently one of our most important projects. 🤞

For now, we suggest matching the variables in _variables.scss with tokens on your own.