design system accent-base-color not fit accent-fill-rest

[Eweol]

Hi all,

I had a look to that nice repo including the Nuget package and tried to include it in my current still existing wasm application.
This worked pretty nice and straight forward, but as I tried to that the right coloring I came into a problem.
I included the FluentSystemDesignProvider and set there the AccentBaseColor.
The problem is that the AccentFillRest-Color not fit the AccentBaseColor which should be the case, based on that https://color.fast.design/ website!

Can anyone help?

[Eweol]

This are the values which were calculated be FluentUI design system with "base-accent-color: #a7ce34" and "base-layer-luminance: 1"

[Eweol]

Hi @EisenbergEffect,

This issue hasn't something to do with my PR.
This is a different problem.

The PR only solves the BaseLayerLuminance.

The problem of that issue is a wrong calculation from the AccentBaseColor to the AccentFillRest color because on BaseLayerLuminance = 1 both values should be the same right?

[EisenbergEffect]

Oops! Thanks!

[EisenbergEffect]

@bheston Can you provide some insight on this?

[bheston]

It looks like the accent fill is being generated for the green accent color you're using. The colors site you reference isn't configured for the latest Fluent UI recipes though, so while the functionality is still similar, the colors will not be exactly the same.

You can trust that the implemented components are current though and use those colors out-of-the-box.

We're working on adding a new colors site that's configured for the new Fluent UI recipes.

[Eweol]

Hi @bheston,

Thank you for explanation.

I expected that if I add a BaseAccentColor, this will be the base Color on BaseLayerLuminance 1 and be calculate to other colors depending on percentage of BaseLayerLuminance.

This mean, to have the green I want to have on baseLayerLuminance 1 I need to find another green which have the green I want to as calculation result?

Is there a chance to get Infos here how I can calculate it?

[bheston]

If you want to follow the new (Windows 11) Fluent UI color model, you should set the accent base color to a hue and saturation of a green that you want. The color system will adjust that as necessary to meet the design intent and maintain contrast. It will not match the current color explorer because that site currently shows the old FAST recipes.

If you do not want to coordinate with the Fluent UI color model, you may want to redefine the accent fill color recipe. For instance, in #5470 I add an "ideal" color recipe algorithm. This treats the base color as the color to stay closest to, or use exactly if it meets any contrast requirements. Keep in mind that this will result in some color combinations that may not have a lot of differentiation, for instance, the default Windows blue in dark mode doesn't stand out as much as the new algorithm.

The algorithmic approach is a new way of thinking about color, but once you grasp the details of how it works and how the pieces fit together it becomes clear why it's necessary and the limitations of manual color picking.

[Eweol]

Hi @bheston,

Thank you very much for your explanations.