fix: AccentBaseColor.WithDefault throws exception

[runeterp]

🐛 Bug Report

When using the design token AccentBaseColor and calling WithDefault("#005AD2"), an exception is thrown, and the --accent-base-color css variable has not been changed.

It might be related the following issue: #2158

💻 Repro or Code Sample

@using Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inherits LayoutComponentBase

<div class="page">
    <main>
        <div>
            @Body
        </div>
    </main>
</div>

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

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var accentColor = "#005AD2";
            await AccentBaseColor.WithDefault(accentColor);
            StateHasChanged();
        }
    }
}

🤔 Expected Behavior

An exception should not be thrown.

😯 Current Behavior

The following exception is thrown in the console on the first render:

  crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'roundToPrecision')
      TypeError: Cannot read properties of null (reading 'roundToPrecision')
          at i.createHighResolutionPalette (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:251199)
          at i.createColorPaletteByContrast (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:252188)
          at i.from (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:252751)
          at Object.up [as from] (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:249984)
          at h.<anonymous> (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:261204)
          at h.observe (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:4866)
          at jn.handleChange (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:139320)
          at h.notify (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3148)
          at h.call (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:5449)
          at ri.notify (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3148)
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'roundToPrecision')
TypeError: Cannot read properties of null (reading 'roundToPrecision')
    at i.createHighResolutionPalette (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:251199)
    at i.createColorPaletteByContrast (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:252188)
    at i.from (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:252751)
    at Object.up [as from] (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:249984)
    at h.<anonymous> (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:261204)
    at h.observe (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:4866)
    at jn.handleChange (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:139320)
    at h.notify (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3148)
    at h.call (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:5449)
    at ri.notify (https://localhost:7299/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:1:3148)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Microsoft.FluentUI.AspNetCore.Components.DesignTokens.DesignToken`1.<WithDefault>d__30[[Microsoft.FluentUI.AspNetCore.Components.DesignTokens.Swatch, Microsoft.FluentUI.AspNetCore.Components, Version=4.11.6.25064, Culture=neutral, PublicKeyToken=null]].MoveNext() in /_/src/Core/DesignTokens/DesignToken.razor.cs:line 87
   at DeviceMatrix.Layout.MainLayout.OnAfterRenderAsync(Boolean firstRender) in /Users/dk8runte/work/ColleagueDevices_DeviceMatrixFrontend/Source/DeviceMatrix/DeviceMatrix/Layout/MainLayout.razor:line 31
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

🔦 Context

I'm unable to change to change the AccentBaseColor to a color that matches my application's color palette.

🌍 Your Environment

• OS & Device: MacOS
• Browser: Microsoft Edge
• .NET 8 and Fluent UI Blazor library Version 4.11.6

[vnbaaij]

You need to use the ToSwatch() extension method. See https://www.fluentui-blazor.net/DesignTokens#example

[runeterp]

Using ToSwatch makes the value of --accent-base-color becomes [Object object] as described in this issue: #2158.

[vnbaaij]

Yes, it sets the value to [Object object] for that token but it also sets the individual tokens that derive from that one. Taking the code I linked to earlier and then changing it to use WithDefault instead of SetValueFor for the AccentBaseColor, you can see in the DevTools:

Also, you can see int the site (in this case the demo site running locally), that the accent color is changed:

The script is using the --accent-fill-rest etc for this. Those values get determined based on the color value you set in the base color.

Note that the web components script will always apply a recipe to the colors (it is called Adaptive Colors, takes contrast etc into account) so you will almost never get the exact input color in the CSS variables.

[runeterp]

Okay, that is why I was unable to find the correct color, when using ToSwatch. Thank you for the explanation. :)