Get Zulip color palette from Figma design

[gnprice]

There's a new color palette for Zulip's UIs, designed recently by @terpimost: https://www.figma.com/design/msWyAJ8cnMHgOMPxi7BUvA/Zulip-Web-UI-kit?node-id=900-1861&t=7OnwOYAxWXBEtYXW-0

We should export that and turn it into some generated Dart code, so that our UI code can refer to it.

[gnprice]

The steps for implementing this will basically be:

• Export the variables of the color palette into a file in any halfway-reasonable format, using some Figma plugin.
• Have a little script of our own that transforms that into the desired generated Dart code.

For the plugin, after searching through Figma's store of plugins for a bit, we're basically doomed to using some code that a random person on the Internet put together and decided to publish. That's a lot more palatable if the code is at least open source. There don't seem to be very many open-source Figma plugins, but here's two that should be able to do the job: https://github.com/tokens-bruecke/figma-plugin https://www.figma.com/community/plugin/1254538877056388290/tokensbrucke and https://github.com/lukasoppermann/design-tokens https://www.figma.com/community/plugin/888356646278934516/design-tokens

Here's another plugin I ran across that is open source and does almost the right job, but in reverse: https://github.com/microsoft/figma-variables-import https://www.figma.com/community/plugin/1253424530216967528/variables-import

[gnprice]

Oh and about running plugins that are from a random person on the Internet:

Figma has a pretty credible-seeming story for how plugins are contained in what they can do: https://www.figma.com/blog/an-update-on-plugin-security/

But even the intended security model means that when you choose to run a plugin, it can "modify any data in your Figma document" and "communicate with any server over the internet": https://www.figma.com/blog/an-update-on-plugin-security/#background

So that remains quite a lot of trust. It's not more trust than any of the numerous tools one ordinarily runs on a development machine, published by a variety of people on the Internet to pub.dev or npmjs.com or pypi.python.org… but it's not clear it's really any less trust, either. So it's good for the plugins we use to be open source, just like those other tools are, as that's a key layer of protection we're used to relying on.

[alya]

The colors were added in the web app in https://github.com/zulip/zulip/pull/30663/commits/44051107a19ef25ac5c174c5d36a759bec75f89d , in case that's helpful.

[terpimost]

There is a difference between color palette and color variables in a figma document. Color variables may link to colors from the palette or may not. Color palette is just json values:

From time to time this color palette might have some updates.

[gnprice]

Right, this issue is about the color palette.

As a follow-up to this we might also automate exporting the variables from your Figma document for mobile and generating Dart code for those too. That would re-use the same plugin and much of the same other code as for this issue. But I'm content for now with the status quo where we pull those variables' values one by one when we need them.

When we do pull those variables manually (or in the future automatically), it will be convenient if they can refer to the color palette where applicable, rather than spell out the color in hex. That's what this issue is for.