Syncing style tokens

Plasmic supports generating design tokens into a codebase. This is so you can, for instance, reuse your color and spacing tokens as variables in CSS, Sass, and many other languages. We specifically emit Salesforce Theo JSON files, which can in turn generate Sass variables, CSS custom properties, etc. by running the theo tool.

For example, here’s how you can generate Sass variables from the JSON file:

Copy
npm install --save-dev theo # or: yarn add theo
npm run theo plasmic-tokens.theo.json --transform web --format sass

Note that even if your Plasmic components use style tokens, the generated Plasmic* components do not directly use the values in the Theo file — so if you manually edit the Theo file, it will not be reflected in the rendered component. Instead, the generated Theo file is intended for you to reuse the style tokens defined in Plasmic in the rest of your application. For example, you can import them as sass variables into your own sass files, or reference the token values as javascript variables.

By default, when you run plasmic sync, the tokens that are used by the components you are syncing will be exported to your tokens file. You can also explicitly sync down all tokens of a project this way:

Copy
plasmic sync-style-tokens --projects PROJECTID

Note: Since tokens produce a Theo file for further processing, this is done via the codegen CLI; there is no PlasmicLoader mechanism for this.

Note: Plasmic Studio supports defining mixins, but we do not yet currently support emitting mixins into your codebase. If you have ideas about how you want to reuse mixins defined in Plasmic, please let us know!

Give feedback on this page