fix: Cannot instantiate a design token just using an example in documentation

[ABIOLI-COM]

I'm just using the code copied from the Design Tokens page, trying to use one of them directly as a component in the page, like in:

    <BaseLayerLuminance Value="(float?)0.15">
        <FluentCard ParentReference="@context">
            <div class="contents">
                Dark
                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
            </div>
        </FluentCard>
    </BaseLayerLuminance>

The page already contains other fluent ui components, so everything should be set up correctly, but adding this code I receive this error:

[2025-01-19T11:35:10.983Z] Error: System.InvalidOperationException: Multiple constructors accepting all given argument types have been found in type 'Microsoft.FluentUI.AspNetCore.Components.DesignTokens.BaseLayerLuminance'. There should only be one applicable constructor.
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.TryFindMatchingConstructor(Type instanceType, Type[] argumentTypes, ConstructorInfo& matchingConstructor, Nullable`1[]& parameterMap)
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.FindApplicableConstructor(Type instanceType, Type[] argumentTypes, ConstructorInfoEx[] constructors, ConstructorInfo& matchingConstructor, Nullable`1[]& matchingParameterMap)
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.CreateFactoryInternal(Type instanceType, Type[] argumentTypes, ParameterExpression& provider, ParameterExpression& argumentArray, Expression& factoryExpressionBody)
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.CreateFactory(Type instanceType, Type[] argumentTypes)
   at Microsoft.AspNetCore.Components.DefaultComponentActivator.GetObjectFactory(Type componentType)
   at Microsoft.AspNetCore.Components.DefaultComponentActivator.CreateInstance(Type componentType)
   at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType, IComponentRenderMode callerSpecifiedRenderMode, Nullable`1 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame[] frames, Int32 frameIndex, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

I cannot understand if there is something to be initialized, or what...
Thank you in advance.
AB

[rpodevns]

@ABIOLI-COM I don't encounter that error when I copy and paste the provided code. Can you share a repository or provide sample code that I can copy and paste to replicate the issue?

[vnbaaij]

I can repro it locally. But @ABIOLI-COM and I had a discussion this weekend. He concluded the library is not for him (yet). Still want to try to solve this though

[ABIOLI-COM]

:-) ...but I still keep an eye here... I like most of the functionalities... ;-)

[vnbaaij]

I think the issue is caused by the source generator that creates the Design Token classes. Need to investigate a bit more (when I can find the time). This is one of the lesser used functionalities so it has a bit lower priority for me.

[vnbaaij]

I was able to fix the generator code so the reported error does not occur anymore.

Unfortunately, there is still something wrong with the BaseLayerLuminance token. Using it with the reproduction code does not make the card appear in dark theme.
Changing it to say the BodyFont token. shows that the token code is working now. Using:

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens

<BodyFont Value="Comic Sans MS">
    <FluentCard ParentReference="@context">
        Dark
        <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
        <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
        <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
        <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
    </FluentCard>
</BodyFont>

gives you:

Fixed code will be in next release.

[vnbaaij]

To get the BaseLayerLuminance to work, you need to a a <FluentDesignSystemProvider /> component before your code. I'd suggest to put it somewhere higher up the rendertree (like in MainLayout).

<FluentDesignSystemProvider />
<BaseLayerLuminance Value="(float?)0.15">
    <FluentCard ParentReference="@context">
        <div class="contents">
            Dark
            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
        </div>
    </FluentCard>
</BaseLayerLuminance>

Gives you: