Uno Fluent

[kazo0]

We should have a new library for Uno.Fluent that will take the semantic resource names for the styles and colors that are currently used in Uno Themes and apply them to the Fluent theme.

There are two major steps for this:

1. Colors
2. Styles

Colors

Uno Themes defines a set of shared brush resources that are used by the underlying styles, currently implemented in Uno.Material, and soon to be implemented in Uno.Fluent.

We need to be able to find some sort of mapping between these brushes and what their counterparts would be in the Fluent system within Windows. The Windows UI specs, including all colors, can be found here (figma)

For example, if someone were to override the Uno.Themes PrimaryColor to Red, then we would need to make sure that all Accent, Default, or Primary type of colors are Red, at least the for those that make sense.

So most resources that are currently blue-ish would need to change to Red and be driven by PrimaryColor:

Styles

Current Style matrix

For styles, we will need analysis of the gaps between what already exists in WinUI and what new styles would need to be created. For example, something like a ContainedButtonStyle would most probably map to an Accent Button in WinUI-land:

Whereas an ElevatedButtonStyle may map to the Standard button as the WinUI button are elevated by default:

But, things like OutlinedTextBoxStyle and FilledTextBoxStyle don't have clear mappings to WinUI as there is only a single, default, TextBox style:

Which looks to be more of an "outlined' style, so we may need to fill the gap here and provide some sort of textbox style that is "filled" in a way or we leave this as a gap in the design system.

Please add more input and brainstorming to this issue as it evolves

/cc: @francoistanguay @NVLudwig @Xiaoy312 @agneszitte @carldebilly

[kazo0]

Following up from our conversation about Fluent Theme Editor (@jeromelaban / @nickrandolph )

One interesting thing that I noticed that the Fluent Theme Editor does is it utilizes this ColorPaletteResources class.

We don't have it supported in Uno right now but it looks to be a nice contained way to override all necessary Fluent color resources

Either way, it looks like we can indeed go this route for aliasing and overriding the Fluent color resource keys.

Having something like:

<ResourceDictionary.ThemeDictionaries>
	<ResourceDictionary x:Key="Default">
		<Color x:Key="PrimaryColor">Green</Color>
		<StaticResource x:Key="SystemAccentColor" ResourceKey="PrimaryColor" />


	</ResourceDictionary>
	<ResourceDictionary x:Key="Light">
		<Color x:Key="PrimaryColor">Red</Color>
		<StaticResource x:Key="SystemAccentColor" ResourceKey="PrimaryColor" />
	</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Results in the default Fluent style properly using Green/Red as the accent color