How to create style tokens or mixins from code?

is it possible to / is there a recommended way to create style tokens or mixins from the code? e.g. if I have a color defined in my database that I want to import into plasmic and use as a token?

Hi @reasonable_sheep, tokens must be defined in plasmic but values can be overridden from code, using CSS custom properties:

We do have some scripts you can run in the browser for defining/importing a set of tokens

sweet, i would be interested in seeing those.

for context, I’m trying to understand if it would be possible to essentially import the values from a chakra theme into plasmic and use them in plasmic components, to set defaults on border radius / background color / font / padding / etc

Please try this out on a throwaway project. You can press ctrl-z to undo an import and try it again.


Customize the inputs in the `normalized` variable, then:

0. open your project in Plasmic Studio
1. open chrome devtools
2. use the top/left most button (the mouse selector) to inspect an element in the studio, such as the logo - this sets the focus on the correct iframe (rather than the outermost iframe)
3. switch to the console tab
4. paste the included snippet to populate the tokens


const normalized = {
  colors: {
    accent: '#00f',
    secondary: '#f00',
  spacing: {
    cardSpace: '4px',
    sectionGap: '16px',
  fontFamily: {
    title: 'Inter',
    snippet: 'IBM Plex Mono',

const tokenTypes = {
  colors: 'Color',
  spacing: 'Spacing',
  fontFamily: 'FontFamily',

for (const [key, entry] of Object.entries(normalized)) {
  const tokenType = tokenTypes[key]

  const inputs = entry

  const _ = dbg.deps._

  const baseStyles = Object.entries(inputs).filter(([k, v]) => !v.startsWith('var('))
  const secondaryStyles = Object.entries(inputs).filter(([k, v]) => v.startsWith('var('))

  function normalize(text) {
    return text

  const { studioCtx } = dbg
  studioCtx.changeUnsafe(() => {
    for (const [key, value] of [...baseStyles, ...secondaryStyles]) {
      const match = /var\((.+)\)/.exec(value)
      let definition = value
      if (match) {
        const name = match[1]
        const referenced =
          (token) => === normalize(name)
        definition = \`var(--token-\${referenced.uuid})\`
        name: normalize(key),
        value: definition,
        name: normalize(key),
        value: definition,