Design tokens are confusing

[garrenf]

How do I do something as simple as change the font style for a FluentHeader in Blazor? I have followed the documentation verbatim and the font does not change.

I've used the documentation to guide me through the steps using design tokens from code as well and does not work. The only way I can get the font to change on a FluentHeader is to change --body-font in the css, but it changes the font for everything else. What should I do?

[khmakoto]

FYI @chrisdholt

[chrisdholt]

Tagging @vnbaaij for the Blazor implementation.

[vnbaaij]

I wonder which documentation you followed...
There is an example that does exactly what you want in the documentation right here: https://www.fluentui-blazor.net/DesignTokens#using-design-tokens-from-code

[garrenf]

I wonder which documentation you followed... There is an example that does exactly what you want in the documentation right here: https://www.fluentui-blazor.net/DesignTokens#using-design-tokens-from-code

Yes. This is the documentation I followed. I tried using BodyFont to change the font style for a FluentHeader and it does not work. It seems it works for buttons though. Here is my code that attempts to change the font of a header and a button, and only the button works.

@page "/"

<FluentHeader @ref="@headerRef">Header
<FluentButton @ref="@buttonRef">Button

@code{

[Inject]
private BodyFont BodyFont { get; set; } = default!;

private FluentHeader? headerRef;
private FluentButton? buttonRef;

protected override async Task OnAfterRenderAsync(bool firstRender)
{

	if (firstRender)
	{
		await BodyFont.SetValueFor(headerRef!.Element, "Tahoma");
		await BodyFont.SetValueFor(buttonRef!.Element, "Tahoma");
		StateHasChanged();
	}

}

}

[vnbaaij]

Ok, I found out what was going wrong...

The FluentHeader component is an addition to the Blazor library that doesn't have an underlying web component (which FluentButton does have). When adding the FluentHeader to the library (as well as others like FluentBodyContent and FluentFooter), we forgot to put the ref element (your headerRef.Element) in the rendered element. This means the Design Tokens never get 'connected' to the component. After adding the needed @ref= Element to the components, everything works as expected.
We are rolling out a fix for this with 3.2.1 release of the Blazor library.

A small suggestion...if you would like to change the font for the whole application, you could just call:

protected override async Task OnAfterRenderAsync(bool firstRender)
 {
        if (firstRender)
        {
            await BodyFont.WithDefault("Comic Sans MS");
            StateHasChanged();
        }
 }

This is a fix also coming with the 3.2.1 release.

[garrenf]

Thanks Vincent! This is the answer I was looking for. I'm assuming that's where the error pointing to the js file comes from when trying to set the bodyfont for a header.

Thanks for your help and great work!