You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using .WithDefault on a color value Design Token, the related css variable is set with an invalid value [object Object]
馃捇 Repro or Code Sample
<FluentCard>
Test
</FluentCard>
<FluentDivider />
<FluentButtonOnClick="ChangeUsingCsharp">
WithDefault (C#)
</FluentButton>
<FluentButtonOnClick="ChangeUsingJs">
WithDefault (JS)
</FluentButton>
@code{
[Inject]
publicNeutralStrokeLayerRestNeutralStrokeLayerRest{get; set; }=default!;
[Inject]
publicIJSRuntimeJSRuntime{get; set; }=default!;
// This produces invalid css variable valueprivateasyncTaskChangeUsingCsharp()
{awaitNeutralStrokeLayerRest.WithDefault("red".ToSwatch());
}// This one works correctlyprivateasyncTaskChangeUsingJs()
{varmodule=awaitJSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js");
awaitmodule.InvokeVoidAsync("neutralStrokeLayerRest.withDefault", "red");
}}
馃 Expected Behavior
When clicking "WithDefault (C#)" the --neutral-stroke-layer-rest should be set to red:
馃槸 Current Behavior
--neutral-stroke-layer-rest is set to [object Object]
馃拋 Possible Solution
I currently don't have a suggestion for the fix.
But as a warkaround it is possible to load the JS module and call the design token .withDefault directly:
For Design Tokens that work with a color value, you must call the聽ToSwatch()聽extension method on a string value or use one of the Swatch constructors. This makes sure the color is using a format that Design Tokens can handle. A Swatch has a lot of commonality with the聽System.Drawing.Color聽struct. Instead of the values of the components being between 0 and 255, in a Swatch the components are expressed as a value between 0 and 1.
What it does not mention but should be clear, is that this won't work on a 'named' color. So instead of "red" use "#ff0000" and it should work.
Apparently, there is an issue when passing a Swatch to WithDefault. I addded an overload that takes a string value (see PR #2159). Your code will work once this addition is released.
馃悰 Bug Report
When using
![image](https://private-user-images.githubusercontent.com/16648655/337012989-6fd6d919-514e-4582-bfb1-66a7968cfa55.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NzE3MTYsIm5iZiI6MTcxOTY3MTQxNiwicGF0aCI6Ii8xNjY0ODY1NS8zMzcwMTI5ODktNmZkNmQ5MTktNTE0ZS00NTgyLWJmYjEtNjZhNzk2OGNmYTU1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDE0MzAxNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY3OGFlNmJlYTZlMWRkOWI4NTQyN2M3MTk5ZTU3NzUzYmQ4ODNmYzA0ZDM5MzQ5YWMwNmNkMWVjMGJjMzViNGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5X-0cyIzkesYBN3EF82A8b_cE2Ki1XkawCMrkUH1zPk)
.WithDefault
on a color value Design Token, the related css variable is set with an invalid value[object Object]
馃捇 Repro or Code Sample
馃 Expected Behavior
When clicking "WithDefault (C#)" the
![image](https://private-user-images.githubusercontent.com/16648655/337019561-3def6f4f-74d1-4217-932b-a76611a9fff2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NzE3MTYsIm5iZiI6MTcxOTY3MTQxNiwicGF0aCI6Ii8xNjY0ODY1NS8zMzcwMTk1NjEtM2RlZjZmNGYtNzRkMS00MjE3LTkzMmItYTc2NjExYTlmZmYyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDE0MzAxNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBlZmEzMjYzNWViZjA4NzJhNDIxY2NmNWUwMGU2ZDdhNmQ1ZmFlMTVkMTc0MDFkZGUzNWYyMjJlYzVkYmY2YTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.mYhtNuS43LMTOSehhPch_3DDVAt8TeUXU1ugh2U02Nc)
--neutral-stroke-layer-rest
should be set tored
:馃槸 Current Behavior
--neutral-stroke-layer-rest
is set to[object Object]
馃拋 Possible Solution
I currently don't have a suggestion for the fix.
But as a warkaround it is possible to load the JS module and call the design token
.withDefault
directly:馃敠 Context
馃實 Your Environment
The text was updated successfully, but these errors were encountered: