Info on styling HTML elements

[ABIOLI-COM]

I couldn't find anything about styling 'normal' HTML components, div, code and the others...
Do you expect developers to use 'external' libraries like Bootstrap or Tailwind? I hope not, because there would be problems in maintaining the alignment (for example in colors...).
Just a simple example: I would like to style a div with the accent color, like the background header color in the template; and by the way, I would also like to be able to change that color once and for all...
Sorry, I'm just approaching the library, that looks very good, but I couldn't find any information about styling and typography...
Thank you in advance.

[vnbaaij]

Hi,

Converted this to a discussion item as it is not really an issue. Did you see the page about Reboot?

[ABIOLI-COM]

The page about Reboot explains how elements are styled by default, but not how to change the defaults, and not how to define new styles.
For example, I tried to modify the header background color to a green (and the accent color for the whole application), just as an example, and I imagined that I could just define the new value for the variable like in

body {
    ...
    --accent-fill-rest: green !important;
}

But when I run the application, the header becomes green for an instant, and then it goes back to that blue again...

[vnbaaij]

Those things are controlled by the design tokens. That page has examples on how you can set and apply tokens to elements

[ABIOLI-COM]

Design tokens are treated... ehm... on the Design Tokens page... :-)
I'm trying to study it, but it's not very clear, honestly... for example, browsing here and there I found a BodyFont element, that could be helpful to set the font in a page, but when I use it on a page like this:

<BodyFont Value="Arial" />

, it gives me the error:

InvalidOperationException: Multiple constructors accepting all given argument types have been found in type 'Microsoft.FluentUI.AspNetCore.Components.DesignTokens.BodyFont'. There should only be one applicable constructor.

I'm not criticizing, but if I find the way to implement these concepts, I will come back with examples for everybody, I think that it would help...

[vnbaaij]

You need to do it as described in the 'examples' part of that page.
I.E. Inject BaseFont, add a @ref to the body, etc.

[ABIOLI-COM]

I'm not complaining, and indeed, after spending a lot of time, I discovered that to change the background color for the whole page I had to set the color in the token called 'NeutralFillLayerRest'.
I hope you can understand that without a proper documentation, this process can quickly become very frustrating for the average developer new to these concepts...
Unless I missed some really important point, of course... :-)

[vnbaaij]

You are right that we don't really have extensive and thorough documentation on this. 3 reasons for that

• We need to balance on what we spend our time on
• This is a fairly advanced topic that not a lot of people work with/on
• We focus on delivering components that implement the Fluent Design System. The technology has options to deviate from that but that is not something we want to actively highlight/promote

[ABIOLI-COM]

...and they are all valid points, of course... I perfectly understand you, we all work with the same constraints :-)