yang · February 9, 2022 00:58 · Feb 9, 2022
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,75 @@
+/*
+
+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,
+      })
+    }
+  })
+}
+
+}