Registering style tokens

If you have style tokens that you would like to use in Plasmic Studio, you can register them from your custom host. Note that these tokens are presumed to be “owned” by the app host — the Studio user will be able to use them from the editor, but will not be able to change their values.

Token registration

You are able to register tokens to be explicit values — for example, a hex string like #006ADC for color tokens, or 12px for spacing tokens.

But you can also register tokens to reference existing css variables in the custom host instead — like var(--my-special-token). If your application is already making use of css tokens for styling, this allows you to use those very same css variables from within Plasmic Studio as well. You should make sure that those css tokens are available and defined everywhere you are using Plasmic content — including the /plasmic-host page.

Copy
// You can register tokens with explicit values
PLASMIC.registerToken({
  name: 'primary',
  displayName: 'Primary',
  value: '#006ADC',
  type: 'color'
});


// Or you can reference css variables provided by your custom host
PLASMIC.registerToken({
  name: 'primary-background',
  displayName: 'Primary background',
  value: 'var(--my-primary-background)',
  type: 'color'
});

registerToken API

registerToken() is called with an object with these fields:

FieldRequired?Description
nameYesA stable, unique name / “key” for the token.
valueYesThe value for the token; can either be an explicit value like 12px or #006ADC, or a reference to a css variable like var(--my-variable).
typeYesThe type of token, corresponding to the token types supported by Plasmic today. They are color, spacing, font-family, font-size, line-height, opacity.
displayNameNoA human-friendly name for the token, if you want to use display a different name in the UI to the user than name; otherwise name will be displayed as the name of the token.
Was this page helpful?

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