Fluent UI v2 CSS provider

[stsrki]

Closes #4135
Closes #5287
Closes #5292

[stsrki]

Leaving what was left to do

UI Review based on our Demo:

10. Table Fixed Columns seems to be broken
    

11. Datagrid Column filters don't look too good
    

12. DataGrid Multiple : Clicking the checkbox does not check it
    

[David-Moreira]

12. Fixed

Can you do 11? You probably better suited since it's styling. And you're already used to the fluent styling?

[stsrki]

12. Fixed

Can you do 11? You probably better suited since it's styling. And you're already used to the fluent styling?

Much better, I think

[David-Moreira]

12. Fixed
Can you do 11? You probably better suited since it's styling. And you're already used to the fluent styling?

Much better, I think

Yep, you the man!!

[stsrki]

I'm eager to merge. Wanna QA fast and not tell me a thing? 🤣🤣

[David-Moreira]

1. I still see no visible changes when trying to change the theme?
   

2. Is this the expected Modal look? Doesn't look like the header & footer are noticeably separate from the body.

3. The pagination has no hover look, usually clickable / interactible items have some visual hint to them. Does fluent ui not have that? Regular buttons seem to have it.

4. I don't see anything in the 2 pixels?

All in all, everything acts and looks better to me.

[David-Moreira]

LGTM, most of the files I glanced over. Too many files...

[stsrki]

1. as I have mentioned before. For now I'm not gonna do the theme generator. As an alternative, users could use Fluent design tokens, which I will document before release.
2. Yes, this is how it looks natively. In fact it works even worse. In our version we at least have some spacings.
3. Fixed it
4. This works, but since Secondary color has a low contrast compared to background it is not so much visible.

[stsrki]

Regarding the theme generator. Basically, this is my idea:

• Goto https://react.fluentui.dev/?path=/docs/theme-theme-designer--page
• Configure theme
• Export
• Copy tokens
• Apply tokens in Blazorise somehow
• Generate CSS variables from JSON tokens

---

That is how it is done manually.

We can expand from there and automate it a little. Generate a C# model from the JSON object with all of the token fields. Then, in Blazorise, the theme generator applies colors and other variables to regenerate new JSON object, and in turn, it generates CSS new variables.

[David-Moreira]

I see ok than. I guess we can improve that later.