How to implement Fluid Design colors/tokens in XAML in Maui target Windows

Question

I'm thinking how to add color codes/tokens for Fluent Design to a Maui application when it targets WinUI 3 (Windows 10 and 11). Specifically I think it would helpful to have a list of tokens for colors like at https://github.com/albi005/MaterialColorUtilities at (optional) Add placeholders to your App.xaml for suggestions when writing XAML.

I found https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html and found a color combination I like. However, this seem to target web and does not output XAML. I'm unsure how could I go on to generate XAML that is more like Fluent Design from that. I also found https://github.com/microsoft/fluent-xaml-theme-editor, but this looks outdated and certainly I can't out-of-the-box have as nice color combination as I can do with the web designer. Maybe If I took out the generated tokens in XAML and enhanced it manually. Though I'm quite new with Maui, Fluent Design and XAML.

I asked this question already in Stackoverflow at https://stackoverflow.com/questions/73241851/how-to-properly-add-microsoft-fluent-design-colors-to-maui-application, but it appears this forum has some good answers regarding Fluent Design and e.g. MICA such as https://learn.microsoft.com/en-us/answers/questions/893109/how-can-i-add-acrylicmica-materials-in-a-maui-app.html that helps a bit forwards. So, maybe this question fits here too. If nothing else, maybe helps someone else a bit.

Answer 1

@Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)

I would like to either have a representative example list of color codes that would work with WinUI or much better, a tool where I can put in color codes and receive a back such a list. A very small, concrete example of a list of tokens I mean can be found the already mentioned https://github.com/albi005/MaterialColorUtilities, i.e.

   <Application.Resources>  
   <Color x:Key="Primary" />  
   <Color x:Key="PrimaryContainer" />  
   <Color x:Key="Secondary" />  
   <Color x:Key="SecondaryContainer" />  
   [...]  

Also both the mentioned tools XAML Theme Editor and Fluent Theme Designer (https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html) has an option to export such a list of color tokens. With the caveat that XAML Theme editor is a bit dated and Fluent Design Theme Editor does not give XAML.

Yet another example is https://m3.material.io/theme-builder#/custom.

So the benefit is that one defines some main colors and the tool creates tens of other colors coded as tokens so that they're easier to map into components where needed, since they are descriptive. At minimum it would be nice to have such a descriptive list where one could plug in color codes.

However, I think @Lance McCarthy explained at https://gist.github.com/LanceMcCarthy/4954ab92ca44c19eb4316d9d683efd50?permalink_comment_id=4258132#gistcomment-4258132 @Lance McCarthy quite well this and I seem to concur with him. There does not seem to exist a list like this nor a tool to do it. But one can e.g. take Fluent Design Theme Editor and translate the tokens it generates to XAML. It may be that Fluent Design Theme Editor has option to export to XAML in the future: https://github.com/microsoft/fluentui/pull/23994.

Over at that linked thread on Lance's gist, I explain also some more nuanced issues, such as overwriting system XAML, picking AcrylicBrush or other such things for which it would help to have a list of color tokens that one can then map to UI components. E.g. using Acrylic brush for backgroun colors since that seem to be the Fluent Design style.

Fluent-xaml-theme-editor is working for UWP platform, for WinUI3, you could use microsoft/WinUI-Gallery.

So that's not what I'm looking for. I'd like someting to define colors an export them to XAML. Maybe it'll come sometime in the future, as per https://github.com/microsoft/fluentui/pull/23994.