How to create style tokens or mixins from code?

Developer Support
1

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?

2

Hi @reasonable_sheep, tokens must be defined in plasmic but values can be overridden from code, using CSS custom properties: https://plasmic.substack.com/p/grid-tokens-as-css-variables-suspense?s=r

3

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

4

sweet, i would be interested in seeing those.

5

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

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,
      })
    }
  })
}

}
7

@Yang, will it work for mixins? Im asking because it would be a pain for me to try myself coz its hard for me to understand coding.