fix: AccentFillRest(and possibly others) in DesignTokens

[SPWizard01]

🐛 Bug Report

When calling SetValueFor from AccentFillRest design token, a javascript error is thrown:

💻 Repro or Code Sample

@using Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inherits LayoutComponentBase
<FluentLayout @ref="_fluentLayout">
    <FluentHeader>
        Some Header Text
        <FluentSpacer />
        Aligned to the end
    </FluentHeader>
    <FluentBodyContent>
        @Body
    </FluentBodyContent>
</FluentLayout>

@code {
    private FluentLayout _fluentLayout;
    [Inject]
    public AccentBaseColor AccentBaseClr { get; set; }
    [Inject]
    public AccentFillRest AccentFillRest { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            //Works
            await AccentBaseClr.SetValueFor(_fluentLayout.Element, "#DEDBEF".ToSwatch());
            //Error
            await AccentFillRest.SetValueFor(_fluentLayout.Element, "#DEDBEF".ToSwatch());
        }
    }
}

🤔 Expected Behavior

css variable --accent-fill-rest should change? or the method should be unavailable for this design token.

😯 Current Behavior

Microsoft.JSInterop.JSException: t.contrast is not a function
TypeError: t.contrast is not a function
    at n (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:21:87737)
    at qn (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:21:87761)
    at Object.evaluate (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:21:97614)
    at c.<anonymous> (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:21:97770)
    at c.observe (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:1:4877)
    at uo.handleChange (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:16:93313)
    at c.notify (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:1:3138)
    at c.call (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:1:5462)
    at u.notify (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:1:3229)
    at p.notify (https://localhost:7075/_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js:1:3391)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Microsoft.FluentUI.AspNetCore.Components.DesignTokens.DesignToken`1.SetValueFor(ElementReference element, T value) in /_/src/Core/DesignTokens/DesignToken.razor.cs:line 102
   at BlazorApp2.Components.Layout.MainLayout.OnAfterRenderAsync(Boolean firstRender) in E:\Proj\BlazorApp2\Components\Layout\MainLayout.razor:line 25
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

💁 Possible Solution

set variable through css directly

🔦 Context

I do not want design system to calculate the color based on my primary color, i want to use the primary color directly and via code

🌍 Your Environment

• OS & Device: Windows 11
• Browser Microsoft Edge
• .NET 8.0-rc.2
• Microsoft.FluentUI.AspNetCore.Components 4.0.0-rc.2

[vnbaaij]

I do not want design system to calculate the color based on my primary color, i want to use the primary color directly and via code

It does not work like that. The AccentBaseColor design token will always use a so called recipe to define the fill/rest/active colors. That is just how it is. We can't change that

[SPWizard01]

Hello :)
So are you saying that if within my company I have a design that i need to follow strictly and we use Microsoft products(of course we are), i cannot merge Fluent UI (the looks) with the colors that my company uses?

Which I can do with the React based framework :)

[vnbaaij]

No, I am saying you can't do it with the design tokens. If you need to do this, you need to define your own colors with css variables, etc. Bit of a pain, I know.

[SPWizard01]

Got it, well this almost makes me want to write something for this library, but design and all that know-how with FAST, uh is just not my cup of tea :)

I tried mudblazor today and boy it's so much better in terms of the theming, i just don't like the material design, i like fluent ui better.

[dvoituron]

Why not use the <FluentDesignSystemProvider AccentBaseColor="#dedbef">?
You have also other attribute with this FluentDesignSystemProvider component
And you could wrap the <Router AppAssembly="@typeof(App).Assembly"> with this provider component.

Isn't that enough for your design?

Example:

<FluentDesignSystemProvider AccentBaseColor="#dedbef">
    <FluentLayout>
        <FluentHeader>
            Some Header Text
            <FluentSpacer />
            Aligned to the end
        </FluentHeader>
        <FluentBodyContent>
            @Body
        </FluentBodyContent>
    </FluentLayout>
</FluentDesignSystemProvider>

[dvoituron]

@SPWizard01 We've added this discussion topic #1049, about design... give us your feedback.