Merge pull request #193 from microsoft/token-accent

Fix Design Tokens handling Color values

Author: vnbaaij

README.md

@@ -140,7 +140,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 		await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15);
 
 		//Set to Excel color
-		await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToColor());
+		await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToSwatch());
 
 		//Set the font
 		await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS");
@@ -163,7 +163,7 @@ public async Task OnClick()
 ```
 As can be seen in the code above (with the `ref4.Element`), it is posible to apply multiple tokens to the same component. 
 
-For Design Tokens that work with a color value, it is needed to add the `ToColor()` extension method on the string value. This converts the string into a RGB value that the Design Token can operate with. Internally we are using the `System.Drawing.Color` struct for this and this means you can use all the available methods, operators, etc from that namespace in your code too.
+For Design Tokens that work with a color value, it is needed to add the `ToSwatch()` extension method on the string value or use one of the `Swatch` constructors. This to make 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` they are expressed as a value between 0 and 1. 
 
 > :notebook: **Note**
 > 

examples/FluentUI.Demo.Shared/Pages/CardPage.razor

@@ -44,7 +44,7 @@
         </FluentCard>
     </BaseLayerLuminance>
 
-    <FillColor Value=@("#D6D6D6".ToColor())>
+    <FillColor Value=@(new Swatch("#D6D6D6"))>
         <FluentCard neutral-palette-source="#CABA8C" BackReference="@context">
             <div class="contents">
                 Tinted neutral, light

examples/FluentUI.Demo.Shared/Pages/Index.razor

@@ -9,3 +9,29 @@
 <FluentAnchor @ref="ref3" Appearance="Appearance.Filled" Href="componentbindings" >Blazor component bindings</FluentAnchor>
 <FluentButton @ref="ref4" Appearance="Appearance.Filled" @onclick=OnClick>FluentButton</FluentButton>
 
+<h2>Color Test</h2>
+
+<div>
+    <div style="margin-top: 12px; display: flex;">
+        <div style="height: 32px; width: 124px; margin-right: 5px; padding: 9px 0; font-size: small; text-align: center;">Accent</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #D83B01;">#D83B01</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #185ABD;">#185ABD</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #107C41;">#107C41</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #C43E1C;">#C43E1C</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #6264A7;">#6264A7</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #7719AA;">#7719AA</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #03787C;">#03787C</div>
+        <div style="height: 32px; width: 95px; margin-right: 5px; font-size: small; display: flex;align-items: center;justify-content: center; color:white; background-color: #BC1948;">#BC1948</div>
+    </div>
+    <div style="margin-top: 12px; display: flex;">
+        <div style="height: 32px; width: 124px; margin-right: 5px; padding: 9px 0; font-size: small; text-align: center;">Result</div>
+        <FluentButton @ref="cref1" id="office" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">Office</FluentButton>
+        <FluentButton @ref="cref2" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">Word</FluentButton>
+        <FluentButton @ref="cref3" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">Excel</FluentButton>
+        <FluentButton @ref="cref4" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">PowerPoint</FluentButton>
+        <FluentButton @ref="cref5" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">Teams</FluentButton>
+        <FluentButton @ref="cref6" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">OneNote</FluentButton>
+        <FluentButton @ref="cref7" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">SharePoint</FluentButton>
+        <FluentButton @ref="cref8" Appearance="Appearance.Accent" style="margin-right: 5px; width: 95px;">Stream</FluentButton>
+    </div>
+</div>

examples/FluentUI.Demo.Shared/Pages/Index.razor.cs

@@ -26,14 +26,23 @@ public partial class Index
     private FluentAnchor? ref3;
     private FluentButton? ref4;
 
+    private FluentButton? cref1;
+    private FluentButton? cref2;
+    private FluentButton? cref3;
+    private FluentButton? cref4;
+    private FluentButton? cref5;
+    private FluentButton? cref6;
+    private FluentButton? cref7;
+    private FluentButton? cref8;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
             //Set to dark mode
             await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15);
 
-            await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToColor());
+            await AccentBaseColor.SetValueFor(ref2!.Element, "#107C41".ToSwatch());
 
             await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS");
 
@@ -42,6 +51,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             //And change conrner radius as well
             await ControlCornerRadius.SetValueFor(ref4!.Element, 15);
 
+
+            await AccentBaseColor.SetValueFor(cref1!.Element, "#D83B01".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref2!.Element, "#185ABD".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref3!.Element, "#107C41".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref4!.Element, "#C43E1C".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref5!.Element, "#6264A7".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref6!.Element, "#7719AA".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref7!.Element, "#03787C".ToSwatch());
+            await AccentBaseColor.SetValueFor(cref8!.Element, "#BC1948".ToSwatch());
+
             StateHasChanged();
         }
 

examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor

@@ -1,5 +1,5 @@
 @page "/ToolbarPage"
-@using System.Drawing
+
 @inject FillColor FillColor
 @inject BaseLayerLuminance BaseLayerLuminance
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
@@ -184,8 +184,8 @@
     {
         if (firstRender)
         {
-            await FillColor.SetValueFor(Toolbar1!.Element, "#333".ToColor());
-            await FillColor.SetValueFor(Toolbar2!.Element, "#333".ToColor());
+            await FillColor.SetValueFor(Toolbar1!.Element, "#333".ToSwatch());
+            await FillColor.SetValueFor(Toolbar2!.Element, "#333".ToSwatch());
             await BaseLayerLuminance.SetValueFor(Toolbar1!.Element, (float)0.15);
             await BaseLayerLuminance.SetValueFor(Toolbar2!.Element, (float)0.15);
 

src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs

@@ -114,151 +114,151 @@ public class DesignTokenConstants
     public const string neutralStrokeStrongFocusDelta = "int?";
 
     // Color recipes
-    public const string neutralBaseColor = "System.Drawing.Color";
-    public const string accentBaseColor = "System.Drawing.Color";
+    public const string neutralBaseColor = "Swatch";
+    public const string accentBaseColor = "Swatch";
 
     // Neutral Layer Card Container
-    public const string neutralLayerCardContainer = "System.Drawing.Color";
+    public const string neutralLayerCardContainer = "Swatch";
 
     // Neutral Layer Floating
-    public const string neutralLayerFloating = "System.Drawing.Color";
+    public const string neutralLayerFloating = "Swatch";
 
     // Neutral Layer 1
-    public const string neutralLayer1 = "System.Drawing.Color";
+    public const string neutralLayer1 = "Swatch";
 
     // Neutral Layer 2
-    public const string neutralLayer2 = "System.Drawing.Color";
+    public const string neutralLayer2 = "Swatch";
 
     // Neutral Layer 3
-    public const string neutralLayer3 = "System.Drawing.Color";
+    public const string neutralLayer3 = "Swatch";
 
     // Neutral Layer 4
-    public const string neutralLayer4 = "System.Drawing.Color";
+    public const string neutralLayer4 = "Swatch";
 
-    public const string fillColor = "System.Drawing.Color";
+    public const string fillColor = "Swatch";
 
     // Accent Fill
-    public const string accentFillRest = "System.Drawing.Color";
-    public const string accentFillHover = "System.Drawing.Color";
-    public const string accentFillActive = "System.Drawing.Color";
-    public const string accentFillFocus = "System.Drawing.Color";
+    public const string accentFillRest = "Swatch";
+    public const string accentFillHover = "Swatch";
+    public const string accentFillActive = "Swatch";
+    public const string accentFillFocus = "Swatch";
 
     // Foreground On Accent
-    public const string foregroundOnAccentRest = "System.Drawing.Color";
-    public const string foregroundOnAccentHover = "System.Drawing.Color";
-    public const string foregroundOnAccentActive = "System.Drawing.Color";
-    public const string foregroundOnAccentFocus = "System.Drawing.Color";
+    public const string foregroundOnAccentRest = "Swatch";
+    public const string foregroundOnAccentHover = "Swatch";
+    public const string foregroundOnAccentActive = "Swatch";
+    public const string foregroundOnAccentFocus = "Swatch";
 
     // Accent Foreground
-    public const string accentForegroundRest = "System.Drawing.Color";
-    public const string accentForegroundHover = "System.Drawing.Color";
-    public const string accentForegroundActive = "System.Drawing.Color";
-    public const string accentForegroundFocus = "System.Drawing.Color";
+    public const string accentForegroundRest = "Swatch";
+    public const string accentForegroundHover = "Swatch";
+    public const string accentForegroundActive = "Swatch";
+    public const string accentForegroundFocus = "Swatch";
 
     // Accent Stroke Control
-    public const string accentStrokeControlRest = "System.Drawing.Color";
-    public const string accentStrokeControlHover = "System.Drawing.Color";
-    public const string accentStrokeControlActive = "System.Drawing.Color";
-    public const string accentStrokeControlFocus = "System.Drawing.Color";
+    public const string accentStrokeControlRest = "Swatch";
+    public const string accentStrokeControlHover = "Swatch";
+    public const string accentStrokeControlActive = "Swatch";
+    public const string accentStrokeControlFocus = "Swatch";
 
     // Neutral Fill
-    public const string neutralFillRest = "System.Drawing.Color";
-    public const string neutralFillHover = "System.Drawing.Color";
-    public const string neutralFillActive = "System.Drawing.Color";
-    public const string neutralFillFocus = "System.Drawing.Color";
+    public const string neutralFillRest = "Swatch";
+    public const string neutralFillHover = "Swatch";
+    public const string neutralFillActive = "Swatch";
+    public const string neutralFillFocus = "Swatch";
 
     // Neutral Fill Input
-    public const string neutralFillInputRest = "System.Drawing.Color";
-    public const string neutralFillInputHover = "System.Drawing.Color";
-    public const string neutralFillInputActive = "System.Drawing.Color";
-    public const string neutralFillInputFocus = "System.Drawing.Color";
+    public const string neutralFillInputRest = "Swatch";
+    public const string neutralFillInputHover = "Swatch";
+    public const string neutralFillInputActive = "Swatch";
+    public const string neutralFillInputFocus = "Swatch";
 
     // Neutral Fill Input Alt
-    public const string neutralFillInputAltRest = "System.Drawing.Color";
-    public const string neutralFillInputAltHover = "System.Drawing.Color";
-    public const string neutralFillInputAltActive = "System.Drawing.Color";
-    public const string neutralFillInputAltFocus = "System.Drawing.Color";
+    public const string neutralFillInputAltRest = "Swatch";
+    public const string neutralFillInputAltHover = "Swatch";
+    public const string neutralFillInputAltActive = "Swatch";
+    public const string neutralFillInputAltFocus = "Swatch";
 
     // Neutral Fill Layer
-    public const string neutralFillLayerRest = "System.Drawing.Color";
-    public const string neutralFillLayerHover = "System.Drawing.Color";
-    public const string neutralFillLayerActive = "System.Drawing.Color";
+    public const string neutralFillLayerRest = "Swatch";
+    public const string neutralFillLayerHover = "Swatch";
+    public const string neutralFillLayerActive = "Swatch";
 
     // Neutral Fill Layer Alt
-    public const string neutralFillLayerAltRest = "System.Drawing.Color";
+    public const string neutralFillLayerAltRest = "Swatch";
 
     // Neutral Fill Secondary
-    public const string neutralFillSecondaryRest = "System.Drawing.Color";
-    public const string neutralFillSecondaryHover = "System.Drawing.Color";
-    public const string neutralFillSecondaryActive = "System.Drawing.Color";
-    public const string neutralFillSecondaryFocus = "System.Drawing.Color";
+    public const string neutralFillSecondaryRest = "Swatch";
+    public const string neutralFillSecondaryHover = "Swatch";
+    public const string neutralFillSecondaryActive = "Swatch";
+    public const string neutralFillSecondaryFocus = "Swatch";
 
     // Neutral Fill Stealth
-    public const string neutralFillStealthRest = "System.Drawing.Color";
-    public const string neutralFillStealthHover = "System.Drawing.Color";
-    public const string neutralFillStealthActive = "System.Drawing.Color";
-    public const string neutralFillStealthFocus = "System.Drawing.Color";
+    public const string neutralFillStealthRest = "Swatch";
+    public const string neutralFillStealthHover = "Swatch";
+    public const string neutralFillStealthActive = "Swatch";
+    public const string neutralFillStealthFocus = "Swatch";
 
     // Neutral Fill Strong
-    public const string neutralFillStrongRest = "System.Drawing.Color";
+    public const string neutralFillStrongRest = "Swatch";
 
-    public const string neutralFillStrongHover = "System.Drawing.Color";
+    public const string neutralFillStrongHover = "Swatch";
 
-    public const string neutralFillStrongActive = "System.Drawing.Color";
+    public const string neutralFillStrongActive = "Swatch";
 
-    public const string neutralFillStrongFocus = "System.Drawing.Color";
+    public const string neutralFillStrongFocus = "Swatch";
 
 
     // Neutral Foreground
-    public const string neutralForegroundRest = "System.Drawing.Color";
+    public const string neutralForegroundRest = "Swatch";
 
-    public const string neutralForegroundHover = "System.Drawing.Color";
+    public const string neutralForegroundHover = "Swatch";
 
-    public const string neutralForegroundActive = "System.Drawing.Color";
+    public const string neutralForegroundActive = "Swatch";
 
-    public const string neutralForegroundFocus = "System.Drawing.Color";
+    public const string neutralForegroundFocus = "Swatch";
 
 
     // Neutral Foreground Hint
-    public const string neutralForegroundHint = "System.Drawing.Color";
+    public const string neutralForegroundHint = "Swatch";
 
 
     // Neutral Stroke
-    public const string neutralStrokeRest = "System.Drawing.Color";
-    public const string neutralStrokeHover = "System.Drawing.Color";
-    public const string neutralStrokeActive = "System.Drawing.Color";
-    public const string neutralStrokeFocus = "System.Drawing.Color";
+    public const string neutralStrokeRest = "Swatch";
+    public const string neutralStrokeHover = "Swatch";
+    public const string neutralStrokeActive = "Swatch";
+    public const string neutralStrokeFocus = "Swatch";
 
     // Neutral Stroke Control
-    public const string neutralStrokeControlRest = "System.Drawing.Color";
-    public const string neutralStrokeControlHover = "System.Drawing.Color";
-    public const string neutralStrokeControlActive = "System.Drawing.Color";
-    public const string neutralStrokeControlFocus = "System.Drawing.Color";
+    public const string neutralStrokeControlRest = "Swatch";
+    public const string neutralStrokeControlHover = "Swatch";
+    public const string neutralStrokeControlActive = "Swatch";
+    public const string neutralStrokeControlFocus = "Swatch";
 
 
     // Neutral Stroke Divider
-    public const string neutralStrokeDividerRest = "System.Drawing.Color";
+    public const string neutralStrokeDividerRest = "Swatch";
 
     // Neutral Stroke Input
-    public const string neutralStrokeInputRest = "System.Drawing.Color";
-    public const string neutralStrokeInputHover = "System.Drawing.Color";
-    public const string neutralStrokeInputActive = "System.Drawing.Color";
-    public const string neutralStrokeInputFocus = "System.Drawing.Color";
+    public const string neutralStrokeInputRest = "Swatch";
+    public const string neutralStrokeInputHover = "Swatch";
+    public const string neutralStrokeInputActive = "Swatch";
+    public const string neutralStrokeInputFocus = "Swatch";
 
     // Neutral Stroke Layer
-    public const string neutralStrokeLayerRest = "System.Drawing.Color";
-    public const string neutralStrokeLayerHover = "System.Drawing.Color";
-    public const string neutralStrokeLayerActive = "System.Drawing.Color";
+    public const string neutralStrokeLayerRest = "Swatch";
+    public const string neutralStrokeLayerHover = "Swatch";
+    public const string neutralStrokeLayerActive = "Swatch";
 
     // Neutral Stroke Strong
-    public const string neutralStrokeStrongRest = "System.Drawing.Color";
-    public const string neutralStrokeStrongHover = "System.Drawing.Color";
-    public const string neutralStrokeStrongActive = "System.Drawing.Color";
-    public const string neutralStrokeStrongFocus = "System.Drawing.Color";
+    public const string neutralStrokeStrongRest = "Swatch";
+    public const string neutralStrokeStrongHover = "Swatch";
+    public const string neutralStrokeStrongActive = "Swatch";
+    public const string neutralStrokeStrongFocus = "Swatch";
 
     // Focus Stroke Outer
-    public const string focusStrokeOuter = "System.Drawing.Color";
+    public const string focusStrokeOuter = "Swatch";
 
     // Focus Stroke Inner
-    public const string focusStrokeInner = "System.Drawing.Color";
+    public const string focusStrokeInner = "Swatch";
 }

src/Microsoft.Fast.Components.FluentUI/ColorHelpers.cs

@@ -129,6 +129,17 @@ public async ValueTask<T> GetValueFor(ElementReference element)
         return await module.InvokeAsync<T>(Name + ".getValueFor", element);
     }
 
+    /// <summary>
+    /// Convert a hex color string to a value the DesignToken can work with
+    /// </summary>
+    /// <returns>the value</returns>
+    public async ValueTask<object> ParseColorHex(string color)
+    {
+        IJSObjectReference module = await moduleTask!.Value;
+        return await module.InvokeAsync<object>("parseColorHexRGB", color);
+    }
+
+
     [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "Not needed")]
     public async ValueTask DisposeAsync()
     {