Integrating style tokens with code

Reading and writing tokens as CSS custom properties

You can reference the tokens you create as CSS custom properties in your own code. This works in both headless API and codegen.

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:

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

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

// 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:

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.

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 style presets, but we do not yet currently support emitting style presets into your codebase. If you have ideas about how you want to reuse style presets defined in Plasmic, please let us know!

Using your existing style tokens in Plasmic

If you already have an existing token system that you would like to use in Plasmic studio, then you can register them from your custom host page. See registering style tokens for details.

Have feedback on this page? Let us know on our forum.