Consuming tokens from code

Reading and writing tokens as CSS custom properties

You can reference the tokens you create as CSS custom properties in your own code.

You can furthermore override these from your own code as well, to dynamically change the values of tokens.

The tokens are exposed in the .plasmic_tokens class selector inside the generated CSS, and generated with the naming format: --plasmic-token-${tokenName}.

Note: Be careful with multiple tokens having the same name. Tokens with identical names aren’t allowed in the same project, but they can happen when working on more than one project.

To reference the tokens, you just need to import the project CSS file, add the .plasmic_tokens class to some element, and you’re ready to start referencing your tokens in your own code.

This is a simplified example of what the generated CSS looks like:

Copy
.plasmic_tokens {
--plasmic-token-red: #ff0000;
}

And this is how you would consume that from your code:

Copy
// Your own JSX code.
import projectcss from './path/to/project/css/file';
// ...
<div className={projectcss.plasmic_tokens} style={{ color: 'var(--plasmic-token-red)' }}>
<p>Text colored by the token.</p>
</div>;

Generating Theo files

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