How to create style tokens or mixins from code?

Developer Support
6

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 = studioCtx.site.styleTokens.find(
          (token) => token.name === normalize(name)
        )
        definition = \`var(--token-\${referenced.uuid})\`
      }
      console.log({
        tokenType,
        name: normalize(key),
        value: definition,
      })
      studioCtx.tplMgr().addToken({
        tokenType,
        name: normalize(key),
        value: definition,
      })
    }
  })
}

}