Idea: Bulk Import and Export "Colors" Assets as CSS Variables

Hello! I’m working on some custom themes for an app I use which allows for custom CSS.

The app has inbuilt colour variables that can be overridden, and I would love the ability to bulk import these CSS variables in Penpot, tweak them, and then export them as CSS variables all at once in the Inspect tab.

Right now, the Inspect tab recognizes the use of Assets as potential variables, but I can only copy them one by one, and the variable name isn’t copied…

Additionally, despite specifying HEX, the value copied is in RGBA.

5 Likes

This might be one of those plugin types of features. But I like the idea.

Hello Candide:
That’s a very good idea what you say. I will discuss it with the team to take it into account.
About the bug that you mention, I registered it a few weeks ago, I hope we can solve it soon, I leave you the link in case you want to follow it up.

Thanks

1 Like

Thank you for your reply Eva! Even just having the ability to export/copy color assets as CSS variables (using the asset name) all at once would make a huge difference.

I found a figma plugin today that does similar thing: Export styles to CSS variables | Figma Community

You can export at least the values so you don’t have to manually copy them out of penpot by exporting it as (.svg + .json) and inside the folder of the zip file there are colors.json and typographies.json files where you have easy access to them.
Hope that helps.

1 Like

Thank you @Nitwel ! This might be a good basis for a potential plugin…