UX, in my case, defined multiple (let's say N) Figma files with N sets of tokens for each theme. In case of some color tokens, some values have transparent values (ie. no paint, or rgba(0, 0, 0, 0))
For example
Background/Button/Secondary has value #CCC in and transparent in . The example here is just for the sake of providing an example, so please don't judge the UX approach.
For more context, tokens from figma are exported through design tokens, transformed with style-dictionary into CSS files, and then used in our web app. We have a default theme, defined in :root, so in order to make something transparent we need to override the values defined in the default.
The problem(s)
The Design Tokens plugin ignores Color tokens without paint. Adding a 0 opacity, because of some default values using || the value ends up being 1 (full opaque).
Proposed solution
tokens without paints => export value rgba(0, 0, 0, 0)
tokens with paints, but opacity 0 => rgba(<r>, <g>, <b>, 0);
⚠️ I have already worked on a fix and I'm ready to open a PR if you agree it's indeed a valid use case.
lukasoppermann
commented
2 years ago
UX, in my case, defined multiple (let's say N) Figma files with N sets of tokens for each theme. In case of some
colortokens, some values have transparent values (ie. no paint, orrgba(0, 0, 0, 0))For example
Background/Button/Secondaryhas value #CCC intransparentinFor more context, tokens from figma are exported through
design tokens, transformed withstyle-dictionaryinto CSS files, and then used in our web app. We have a default theme, defined in:root, so in order to make somethingtransparentwe need to override the values defined in the default.The problem(s)
The Design Tokens plugin ignores Color tokens without paint. Adding a
0opacity, because of some default values using||the value ends up being 1 (full opaque).Proposed solution
rgba(0, 0, 0, 0)rgba(<r>, <g>, <b>, 0);⚠️ I have already worked on a fix and I'm ready to open a PR if you agree it's indeed a valid use case.