Unable to set Design Token with Swatch

[DavidM29]

Hello,
I am working on a MAUI Blazor Hybrid app. I am quite new to Blazor and I am getting the hang of it at the moment.
The problem I was not able to figure out is that, I am setting NeutralStrokeInputRest and NeutralStrokeInputHover for a FluentTextField, however the tokens are not being set correctly.

Here is the razor file:

@page "/"
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@layout EmptyLayout
@inject NavigationManager Navigation

<div class="body">
    <div class="content">
        <div>
            <FluentTextField @ref="_emailOrPhoneField" Placeholder="Email or Phone Number" Label="Email or Phone Number" Appearance="FluentInputAppearance.Outline" Class="input" />
        </div>
        <div>
            <FluentTextField Placeholder="Password" Label="Password" Appearance="FluentInputAppearance.Outline" Class="input"/>
        </div>
        <FluentButton OnClick="@OnClick">Log In</FluentButton>
        <FluentButton>Registration</FluentButton>
    </div>
</div>

@code {
    [Inject]
    private NeutralStrokeInputRest NeutralStrokeInputRest { get; set; } = null!;

    [Inject]
    private NeutralStrokeInputHover NeutralStrokeInputHover { get; set; } = null!;

    [Inject]
    private FocusStrokeWidth FocusStrokeWidth { get; set; } = null!;

    private FluentTextField? _emailOrPhoneField;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await NeutralStrokeInputRest.SetValueFor(_emailOrPhoneField!.Element, "#E7E7E7".ToSwatch());
            await NeutralStrokeInputHover.SetValueFor(_emailOrPhoneField.Element, "#E7E7E7".ToSwatch());
            await FocusStrokeWidth.SetValueFor(_emailOrPhoneField.Element, 1);
            StateHasChanged();
        }
    }

    private void OnClick()
    {
        Navigation.NavigateTo("/home");
    }
}

Here is the screenshot of the tokens:

I found this as well, it seems to be the same problem.

Thanks in advance.

[vnbaaij]

Hi, We are currently not able to address that error. I believe it is still applying the correct value though.

[DavidM29]

It did not apply any color, however I decided to modify the tokens through css with the help from this discussion like this:

::deep fluent-text-field.login-field {
    width: 100%;
    --neutral-stroke-input-rest: var(--neutral-stroke-rest);
    --neutral-stroke-input-hover: var(--neutral-stroke-hover);
    --focus-stroke-width: 0;
}