Created
January 29, 2022 07:43
-
-
Save yang/c9c3576d86a0c157a715e97ebb848373 to your computer and use it in GitHub Desktop.
Import Tailwind tokens
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
| // Run this script in your directory containing tailwind.config.js, and follow the printed instructions to import them into your project. | |
| const defaultTheme = require('tailwindcss/defaultTheme') | |
| const colors = require('tailwindcss/colors') | |
| const config = require('./tailwind.config') | |
| const extended = { | |
| spacing: Object.assign({}, defaultTheme.spacing, config.theme.extend.spacing), | |
| fontFamily: Object.assign({}, defaultTheme.fontFamily, config.theme.extend.fontFamily), | |
| colors: Object.assign({}, defaultTheme.colors, config.theme.extend.colors), | |
| } | |
| // console.log(extended) | |
| const normalized = { | |
| spacing: extended.spacing, | |
| fontFamily: Object.fromEntries( | |
| Object.entries(extended.fontFamily).map(([key, value]) => [key, value[0]]) | |
| ), | |
| colors: Object.fromEntries( | |
| Object.entries(extended.colors).flatMap(([key, value]) => | |
| typeof value === 'string' | |
| ? [[key, value]] | |
| : Object.entries(value).map(([key2, value2]) => [`${key}-${key2}`, value2]) | |
| ) | |
| ), | |
| } | |
| // console.log(normalized) | |
| console.log(` | |
| 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 = ${JSON.stringify(normalized, null, 2)} | |
| 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