terrazzoapp / terrazzo

Use DTCG tokens JSON to generate code for web, mobile, native apps, and more
https://terrazzo.app
MIT License
147 stars 25 forks source link

pluginMAUI #251

Closed pws-pm closed 2 months ago

pws-pm commented 4 months ago
Not a coder :)

I built with the aid of GPT4 a plugin to export tokens in MAUI (XAML), i am not familiar with the proper contribution workflow and probably i would mess up something so it's better if i share it here.

I tested the plugin with our tokens and it appears to be working correctly. It generates a base theme.xaml file with all tokens at their default values, then it generates additional files for each token collection that has more than one mode, allowing overrides for different modes. It supports: color, dimension, typography, and shadow tokens. Shadow tokens are tricky, since MAUI doesn't support multiple shadows by default if a Token has more than one shadow an index is appended to the token name such as:

<Shadow x:Key="Effects.shadow-100-1" Color="#0000000a" Radius="4" Opacity="1" OffsetX="0" OffsetY="1"/>
<Shadow x:Key="Effects.shadow-100-2" Color="#ffffff33" Radius="0.25" Opacity="1" OffsetX="0" OffsetY="-0.5"/>

<Shadow x:Key="Effects.shadow-200-1" Color="#0000000d" Radius="8" Opacity="1" OffsetX="0" OffsetY="3"/>
<Shadow x:Key="Effects.shadow-200-2" Color="#ffffff33" Radius="0.25" Opacity="1" OffsetX="0" OffsetY="-0.5"/>

In code then shadow-100 should be handled accordingly

you can find the plugin attached

pluginMAUI.zip

drwpow commented 4 months ago

This is awesome! Thanks so much for putting this together!

i am not familiar with the proper contribution workflow and probably i would mess up something so it's better if i share it here.

Understandable—sometimes open source can seem intimidating and confusing, but opening issues and starting conversations is where it all starts! And sharing what you’re working on in the open is the heart of open source. So you’re off to a great start. 🙂

In order to really share your work, I’d recommend making a free repo on your GitHub account and pasting that .js file there so people can see your code without having to download ZIP files which can be a security issue. But more importantly you own the code you wrote unless you authorize others to use it. So people can maybe see your code, but they can’t use it themselves if you haven’t given it a public license for free use & redistribution. People can use Cobalt because of its open MIT license, but by default software is yours unless you specifically give it away.

If you have a GitHub repo with this code on there and it has an open-source license (e.g. MIT), I’d be happy to link it in the docs so others can find it and use it.

pws-pm commented 4 months ago

Great! here's the link to the repo: https://github.com/luigichelli/cobaltui-plugin