How can I set specific neutrallayer to a component?

[gitvadim]

Hi all,

I have a part of my app that I want to have a different neutral layer so that it appears highlighted and yet uses the same theme and follows the same design. That part is represented by the following code:

<FluentStack Orientation="Orientation.Vertical" VerticalGap="32" Style="padding: 30px">
    <FluentToolbar Orientation="Orientation.Horizontal" HorizontalGap="32" Style="width: 100%;">
        <FluentAnchor ... >Back</FluentAnchor>
        <FluentLabel ...>...</FluentLabel>
    </FluentToolbar>
    <FluentToolbar Orientation="Orientation.Horizontal" Style="width:100%;">
        <FluentTextField ...>
            <FluentIcon ..." />
        </FluentTextField>
        <FluentButton ...>...</FluentButton>
    </FluentToolbar>
</FluentStack>

Is this a supported use case? If it is, how do I do it properly? Unfortunately, the design tokens documentation isn't particularly helpful. I've tried wrapping the outer stack with FillColor but to no avail. Technically, I could do with a css variable or a class name but I have no idea what they could be and/or where to find the list of supported ones.

Thank you,

[vnbaaij]

Why are the docs not helpful? What have you tried already? Did you try to find more general (as in Not specific for Blazor) design tokens documentation?
FillColor is not used for a layer

[gitvadim]

If FillColor is not used for a layer, then how do I set a different neutral layer for the code above? I've tried wrapping it with BaseLayerLuminance with different values and assigning the parent reference too, but that didn't help either.

[vnbaaij]

You want to set the background color for the stack to a different color, right?
If so, is it a completely different one or in line with the normal background?
If it is in line, you can use the css variables --neutral-layer-1 till --neutral-layer-4 to change it. You can either define a class in your css file and use the Class parameter of the stack or use its Style parameter directly.

[gitvadim]

Thanks for the explanation, however, what I want to change is not just the background color. Instead I'm looking for an option to have all the nested element of the stack adjust their styling automatically based on the layer the stack is on. Take neutralLayerL4 from the fast color example site for example: not only is the column background color different but certain other elements on that layer have different styling too.
I thought I was supposed to use design tokens for that. If it's not the case and the behavior I'm looking for is a CSS styling thing, where can I see the list of all variables that are used throughout the fluent UI design system, assuming they'll still work with the Blazor component library?

[vnbaaij]

Yes, you should use the Design Tokens for that. All the neutrals come from setting the value for the NeutralLayerX (x=1-4) design token to a specific swatch
Finding which tokens there are, setting tokens from code, css variables used, is all described at https://www.fluentui-blazor.net/DesignTokens.

So I ask again, what is not clear about that? What have you tried? What have you researched on that FAST Color explorer and the FAST Design Tokens?

[gitvadim]

Here's what I've tried:

1. I took the NeutralLayer4 design token and used it as a component, just like the documentation mentions:

<NeutralLayer4>
    <FluentStack ... ParentReference="@context">
        ...
    </FluentStack>
</NeutralLayer4>

2. After hot reloading my app, I expected to see the background color of my stack change, but this didn't happen.
3. I've tried passing different color values to the Value property of the NeutralLayer4 component, i.e.: Value="@("#000".ToSwatch())" but that didn't help either.
4. I've tried NeutralLayer1 but to no avail.
5. I've inspected the resulting HTML and I can see that the stack gets a big style attribute containing various CSS variables, but they don't seem to change depending on the NeutralLayer component the stack is placed in.
6. I've searched StackOverflow, but didn't find a relevant answer. The ones that I did find were about changing the actual token value or switching the dark mode.

I've gone over the DesignTokens documentation multiple times, but I still can't figure out what I am doing wrong.

[vnbaaij]

Ok, here is what I have found.

• You cannot use the NeutralLayer... tokens in a declarative way (ie as a component). You must set those tokens from code. Otherwise the css variables are not set at the correct time nor to the correct value.
• You should not set a value just for NeutralLayer4. All those tokens are calculated based on 1 base value that you supply. As said on the doc page:

Adjust neutral or accent colors

NeutralBaseColor: Set to a custom swatch to use for color recipes for layers and other neutral components. Ex: SwatchRGB.from(parseColorHexRGB('#A90000')!)
AccentBaseColor: Set to a custom swatch to use for color recipes for accent buttons, checkboxes, etc.

• If you try to set just a value for the NeutralLayer4 token, it will not work. Because the script internally uses a (what they call) 'recipe' to determine the final colors, setting that vaue separately leads to it being set to object [Object] value on the css side.

• You apparently cannot set the NeutralBaseColor on just 1 element (with SetValueFor). You must set this value globally with the WithDefault method (did not know that one yet!)

Combining all of this, I adapted the code example from the Design Token docs page (which also shows how to use some other tokens from code) and came up with this. I've put it in a template generated site on the homepage:

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens

<FluentStack @ref="@stackRef" Orientation="Orientation.Vertical" VerticalGap="32" Style="padding: 30px">
    <FluentToolbar Orientation="Orientation.Horizontal" HorizontalGap="32" Style="width: 100%;">
        <FluentAnchor Href="/">Back</FluentAnchor>
        <FluentLabel>Test</FluentLabel>
    </FluentToolbar>
    <FluentToolbar Orientation="Orientation.Horizontal" Style="width:100%;">
        <FluentTextField Label="Text field">
            <FluentIcon Value="@(new Icons.Regular.Size24.Save())" />
        </FluentTextField>
        <FluentButton @ref="buttonRef" Appearance="Appearance.Accent">Click me!</FluentButton>
    </FluentToolbar>
</FluentStack>

<FluentButton @ref="ref1">A button</FluentButton>
<FluentButton @ref="ref2" Appearance="Appearance.Accent">Another button</FluentButton>
<FluentButton @ref="ref3">And one more</FluentButton>
<FluentButton @ref="ref4" @onclick=OnClick>Last button</FluentButton>


@code {

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

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

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


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

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

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



    private FluentStack? stackRef;
    private FluentButton? buttonRef;
    private FluentButton? ref1;
    private FluentButton? ref2;
    private FluentButton? ref3;
    private FluentButton? ref4;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //Set to dark mode
            await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15);

            //Set to Excel color
            await AccentBaseColor.SetValueFor(ref2!.Element, "#b7472a".ToSwatch());


            await NeutralBaseColor.WithDefault("#f2c811".ToSwatch());


            //Set the font
            await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS");

            //Set 'border' width for ref4
            await StrokeWidth.SetValueFor(ref4!.Element, 7);
            //And change conrner radius as well
            await ControlCornerRadius.SetValueFor(ref4!.Element, 15);

            // If you would like to change the BaseLayerLuminance  value for the whole site, you can use the WithDefault method
            //await BaseLayerLuminance.WithDefault((float)0.15);

            StateHasChanged();
        }
    }

    public async Task OnClick()
    {
        //Remove the wide border
        await StrokeWidth.DeleteValueFor(ref4!.Element);
    }

}

Which results in:

• The accent color for the app remains on the default blue color. The accent color for the 'Another button' has been set to a different color using the AccentBaseColor design token with SetValueFor,
• The NeutralBaseColor has been adjusted to a differenty color globally with the WithDefault method. You can see it has effect on both the footer (which uses --neutralLayer4 variable) but also on the card and menu (which use a different css variable.

The effect of setting the NeutralBaseColor can be seen in the Dev Tools:

[gitvadim]

Okay, so I've adapted my code as follows:

<FluentStack Orientation="Orientation.Vertical" VerticalGap="32" Style="padding: 30px" @ref="@stackRef">
</FluentStack>

@code {
    FluentStack stackRef;
    [Inject]
    NeutralLayer4 nl4 { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await nl4.SetValueFor(stackRef.Element, "#abc".ToSwatch()); //Tried removing this, tried changing values, but to no avail
            StateHasChanged();
        }
    }
}

but it didn't work, The stack panel didn't change.

Additionally, I think there's a misunderstanding, I'm not exactly trying to change the color of a neutral layer, I am trying to put an element onto its own neutral layer so it would stand out keeping all the styling of that element (and that element alone) adjusted to the new layer's rules.

I've even went to check the Blazor source code for the Card component (because it has its own layer) to see what I'm missing, but I couldn't find anywhere where it would have its neutral layer defined.

[vnbaaij]

That doesn't work. As i mentioned:

You should not set a value just for NeutralLayer4. All those tokens are calculated based on 1 base value that you supply.

This is the NeutralBaseColor value

[gitvadim]

Thanks for the help. I think Fluent UI just doesn't work for the use case I have.