Creating design tokens matching fluentui react library.

[subratb]

How would I create custom color specific design tokens like "colorPaletteBlueBackground2" in FluentUI React using fluentui-blazor?

[vnbaaij]

You can't. At least not yet.

We use the Fluent UI Web Components verson 2 script internally and that is exposing the Fluent desing version 1.

The tokens you are referring to are from Fluent design v2. Support for that is coming in the Web Components v3. We are working with the web components team to get a version where we can start implementing with.

[subratb]

Thank you for your quick response. When can we expect the first version of these changes? Also, what approach should we take to implement the same behavior now until we get these?

[vnbaaij]

We dont have a timeline yet. What is the behavior you want to get?
In general the approach would be to add CSS variables and us those.

[subratb]

To be able to use custom fill colors as background of elements.