Hi, I saw that there’s a way to sync style tokens from Plasmic over to code (https://docs.plasmic.app/learn/tokens/). However, it seems to require code generation? Is there a way to use style tokens with the Headless API instead?
you can consume them with the Headless API as well! It also loads the CSS containing the token variables.
You will just need to use plasmic_tokens
class and reference the CSS variable for the token (e.g. var(--plasmic-token-red)
)
Thanks that worked! BTW is using style tokens the recommended way to share text variants across studio and code? Or would it be better to create a custom component for Text with multiple variants?
I think it depends on the elements you want to apply those styles, and the changes among variants: the tokens are only about CSS values that might change depending on global variants, but can be applied to any DOM element and style you want; components on the other hand would give you control over element states, DOM elements inside the components, etc. So I think it really depends on the case probably tokens are fine if it’s all about CSS values