Created
February 9, 2022 00:58
-
-
Save yang/2e3dfe34e1e78040e28dfab8aadbc893 to your computer and use it in GitHub Desktop.
Import tokens into Plasmic Studio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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, | |
| }) | |
| } | |
| }) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment