For easier use inside Breakdance builder, Headspin UI provides small context menu which will populate fields inside Breakdance builder with CSS variables.
To access helper context menu, you need to right click on Breakdance input field.
Following problem will happen if you install Headspin and you go inside Breakdance and by doing right click on supported Breakdance field. This is because you haven’t saved yet anything in Headspin UI panel, and you need just to go to WordPress Admin > Headspin > click on Save button.
After saving by right clicking on supported field you should see CSS variable suggestions.
Color sync works like password auto-fill. It needs to have some page opened in Breakdance to operate, user should also open global settings and have at least on color there (you could delete it after sync).
NOTE: Breakdance builder and Headspin Copilot (app in dashboard) should be opened as tabs in the same browser.
How sync works:
It does work in fashion that there are two apps running (Headspin Copilot (main app, dashboard) and tiny helper inside Breakdance). They are doing communication in realtime 1-2 needed. That is why we need to have theme opened at the same time.
Step 3 – is needed so helper app could fill global settings
Step 4 – is needed for data compatibility check, so if Breakdance changes color data model it won’t run and make errors. We check that one color is like okey data looks as expected, so we could import colors without doing problems.