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

Help us improve Penpot Feature requests
1

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…

image
image1746×817 65.9 KB

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

5 Likes
2

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

3

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
4

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

5

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
6

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