material-design-3-import-export-ext

Basic Material Design 3 Import Export Utility.

Docs

• Docs
• Demo - Import-Export

Export - One Liner

1. Material Design Theme Builder
2. Open Chrome Console and Copy/Paste the following code

{function o(o,e){return e.querySelector("body > mio-root > mio-theme-builder > theme-builder").shadowRoot.querySelector("main > root-page > custom-base").shadowRoot.querySelector("main > section.options > article > div:nth-child(2) > core-colors").shadowRoot.querySelector(`section > div.colors > div:nth-child(${o}) > core-color-input`).shadowRoot.querySelector("#root > color-input").shadowRoot.querySelector("div").getAttribute("style").match(/--value: (.+?);/)[1]}let e=[{key:"primary",i:1},{key:"secondary",i:2},{key:"tertiary",i:3},{key:"neutral",i:4}];var t={};for(let{key:r,i:i}of e){let l=o(i,document);t[r]=l}t;}

Preview

material_theme_design_json_2023-06-21.23-57-51.mp4

pupp_replay_run_2023-06-22.00-42-51.mp4

Background

This is a simple utility to import and export Material Design 3 color palettes. Figma has a built-in utility to import and export themes, but it's extremely slow or just hangs.

Especially when the builder doesn't allow bookmarking...

• Assuming Chrome console
• Using 'puppeteer-core' to automate the process
  • use 'puppeteer' instead to automate the process if you don't want to link to your profile

Related Links

• Related Links
  • BrowserStack
  • Stackblitz