From 11bd47c728556a902546267e2a91d5402dc0ae30 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Wed, 1 Dec 2021 13:04:33 +0100 Subject: [PATCH 01/34] Initial design token work --- .../FluentUI.Demo.Shared/Pages/Index.razor | 23 ++++++- .../DesignToken.cs | 62 +++++++++++++++++++ .../DesignTokenValue.cs | 15 +++++ ...oft.Fast.Components.FluentUI.lib.module.js | 6 +- 4 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignToken.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 0c9215667b..136c8bb30a 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -1,8 +1,27 @@ @page "/" + + FluentUI WC home page

Blazor Fluent UI Web Components home page

-Web components handlers +Web components handlers Web components bindings -Blazor component bindings +Blazor component bindings + + +@code{ + //DesignToken specialColor = new DesignToken("special-color"); + + FluentAnchor ancestor; + FluentAnchor decendant; + + //protected override void OnInitialized() + //{ + // specialColor.SetValueFor(ancestor, "#FFFFFF"); + // specialColor.SetValueFor(decendant, "#F7F7F7"); + + // base.OnInitialized(); + //} + +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs new file mode 100644 index 0000000000..68c6e5f633 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -0,0 +1,62 @@ +using Microsoft.AspNetCore.Components; + +namespace Microsoft.Fast.Components.FluentUI; + + +public class DesignToken +{ + /// + /// The value of the token + /// + public T? DefaultValue { get; set; } + + /// + /// The name of the token + /// + public string Name { get; set; } = ""; + + /// + /// A list of elements for which the DesignToken has a value set + /// + public List>? AppliedTo { get; set; } + + public DesignToken() + { + AppliedTo = new List>(); + } + + public DesignToken(string name) + { + Name = name; + AppliedTo = new List>(); + } + + public void SetValueFor(ElementReference element, T value) + { + if (AppliedTo! != null) + AppliedTo.Add(new(element, value)); + } + + public T? GetValueFor(ElementReference element) + { + if (AppliedTo != null) + { + DesignTokenValue? x = AppliedTo.First(x => x.Element.Equals(element)); + return x.Value; + } + + return DefaultValue; + } + + //DeleteValueFor + + //WithDefault + + //Subscribe + //Unsubscribe +} + +public class CSSDesignToken : DesignToken +{ + public string? CSSCustomProperty { get; set; } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs new file mode 100644 index 0000000000..7e3a309af5 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs @@ -0,0 +1,15 @@ +using Microsoft.AspNetCore.Components; + +namespace Microsoft.Fast.Components.FluentUI; + +public class DesignTokenValue +{ + public ElementReference Element { get; set; } + public T? Value { get; set; } + + public DesignTokenValue(ElementReference element, T value) + { + Element = element; + Value = value; + } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js index cc03e37135..8734274609 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js @@ -1,4 +1,6 @@ -export function afterStarted(Blazor) { + + +export function afterStarted(Blazor) { Blazor.registerCustomEventType('fluentcheckedchange', { browserEventName: 'change', createEventArgs: event => { @@ -7,4 +9,6 @@ }; } }); + let body = document.body; + direction.setValueFor(body, 'rtl'); } \ No newline at end of file From 2964474d0bbfc44a9494fa0aa0b1b7af4b802312 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Wed, 1 Dec 2021 13:14:04 +0100 Subject: [PATCH 02/34] housekeeping --- examples/FluentUI.Demo.Client/wwwroot/index.html | 2 +- examples/FluentUI.Demo.Server/Pages/_Layout.cshtml | 2 +- .../Microsoft.Fast.Components.FluentUI.lib.module.js | 6 +----- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/examples/FluentUI.Demo.Client/wwwroot/index.html b/examples/FluentUI.Demo.Client/wwwroot/index.html index 790ab73ff2..081bfe6daa 100644 --- a/examples/FluentUI.Demo.Client/wwwroot/index.html +++ b/examples/FluentUI.Demo.Client/wwwroot/index.html @@ -23,7 +23,7 @@ Reload 🗙 - + diff --git a/examples/FluentUI.Demo.Server/Pages/_Layout.cshtml b/examples/FluentUI.Demo.Server/Pages/_Layout.cshtml index 61a7526404..6dd0eb53d9 100644 --- a/examples/FluentUI.Demo.Server/Pages/_Layout.cshtml +++ b/examples/FluentUI.Demo.Server/Pages/_Layout.cshtml @@ -32,6 +32,6 @@ - + \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js index 8734274609..cc03e37135 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js @@ -1,6 +1,4 @@ - - -export function afterStarted(Blazor) { +export function afterStarted(Blazor) { Blazor.registerCustomEventType('fluentcheckedchange', { browserEventName: 'change', createEventArgs: event => { @@ -9,6 +7,4 @@ export function afterStarted(Blazor) { }; } }); - let body = document.body; - direction.setValueFor(body, 'rtl'); } \ No newline at end of file From 1a5f226b567d6e1a82add3ec95edc44c734b4441 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 2 Dec 2021 11:48:41 +0100 Subject: [PATCH 03/34] wip --- .../FluentUI.Demo.Shared/Pages/Index.razor | 17 +---- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 30 +++++++++ .../Components/FluentAnchor.razor | 3 +- .../DesignToken.cs | 35 +++++----- .../DesignTokenManagerJSObjectReference.cs | 33 ++++++++++ .../wwwroot/designTokenManager.js | 66 +++++++++++++++++++ 6 files changed, 151 insertions(+), 33 deletions(-) create mode 100644 examples/FluentUI.Demo.Shared/Pages/Index.razor.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 136c8bb30a..19a2d58588 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -5,23 +5,8 @@

Blazor Fluent UI Web Components home page

-Web components handlers +Web components handlers Web components bindings Blazor component bindings -@code{ - //DesignToken specialColor = new DesignToken("special-color"); - - FluentAnchor ancestor; - FluentAnchor decendant; - - //protected override void OnInitialized() - //{ - // specialColor.SetValueFor(ancestor, "#FFFFFF"); - // specialColor.SetValueFor(decendant, "#F7F7F7"); - - // base.OnInitialized(); - //} - -} \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs new file mode 100644 index 0000000000..9cc9fb7076 --- /dev/null +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -0,0 +1,30 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.Fast.Components.FluentUI; +using Microsoft.JSInterop; + +namespace FluentUI.Demo.Shared.Pages +{ + public partial class Index : ComponentBase + { + [Inject] IJSRuntime? JSRuntime { get; set; } + DesignToken specialColor = new DesignToken("special-color"); + ElementReference ancestor; + FluentAnchor? decendant; + protected override void OnInitialized() + { + //specialColor.SetValueFor(ancestor, "#FFFFFF"); + //specialColor.SetValueFor(decendant!, "#F7F7F7"); + //DesignToken baseLayerLuminance = new(); + //baseLayerLuminance.SetValueFor(ancestor, 0); + + base.OnInitialized(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + DesignToken baseHeightMultiplier = new(); + await baseHeightMultiplier.SetValueFor(ancestor, 48); + await base.OnAfterRenderAsync(firstRender); + } + } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor index 45817f2c60..1e64f7d177 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor @@ -1,6 +1,7 @@ -@ChildContent +@ChildContent @code { + [Parameter] public ElementReference TagReference { get; set; } [Parameter] public string? Href { get; set; } [Parameter] public Appearance? Appearance { get; set; } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 68c6e5f633..30894e0ca2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -5,11 +5,17 @@ namespace Microsoft.Fast.Components.FluentUI; public class DesignToken { + /// - /// The value of the token + /// The default value of the token /// public T? DefaultValue { get; set; } + /// + /// The value of the token + /// + public T? Value { get; set; } + /// /// The name of the token /// @@ -18,34 +24,31 @@ public class DesignToken /// /// A list of elements for which the DesignToken has a value set /// - public List>? AppliedTo { get; set; } + public List? AppliedTo { get; set; } = new(); public DesignToken() { - AppliedTo = new List>(); + } public DesignToken(string name) { Name = name; - AppliedTo = new List>(); } - public void SetValueFor(ElementReference element, T value) + public async Task SetValueFor(ElementReference element, T value) { + Value = value; if (AppliedTo! != null) - AppliedTo.Add(new(element, value)); + AppliedTo.Add(element); + + } public T? GetValueFor(ElementReference element) { - if (AppliedTo != null) - { - DesignTokenValue? x = AppliedTo.First(x => x.Element.Equals(element)); - return x.Value; - } + return Value; - return DefaultValue; } //DeleteValueFor @@ -56,7 +59,7 @@ public void SetValueFor(ElementReference element, T value) //Unsubscribe } -public class CSSDesignToken : DesignToken -{ - public string? CSSCustomProperty { get; set; } -} \ No newline at end of file +//public class CSSDesignToken : DesignToken +//{ +// public string? CSSCustomProperty { get; set; } +//} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs new file mode 100644 index 0000000000..ccf23a49cd --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs @@ -0,0 +1,33 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI; + +internal class DesignTokenManagerJSObjectReference +{ + private const string ScriptPath = "./_content/Microsoft.Fast.Components.FluentUI/designTokenManager.js"; + private readonly IJSRuntime _jsRuntime; + private Task? _scriptManager; + + public DesignTokenManagerJSObjectReference(IJSRuntime jsRuntime) + { + _jsRuntime = jsRuntime; + } + + public Task ScriptManager => + _scriptManager ??= _jsRuntime.InvokeAsync("import", ScriptPath).AsTask(); + + public async ValueTask SetTitleAsync(string title) + { + + var scriptManager = await ScriptManager; + await scriptManager.InvokeVoidAsync("setTitle", title); + } + + public async ValueTask SetValueFor(ElementReference element, object value) + { + var scriptManager = await ScriptManager; + await scriptManager.InvokeVoidAsync("setBaseHeightMultiplier", element, value); + } +} + diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js new file mode 100644 index 0000000000..54bcbf5e5f --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js @@ -0,0 +1,66 @@ +import { + StandardLuminance, + bodyFont, + baseHeightMultiplier, + baseHorizontalSpacingMultiplier, + baseLayerLuminance, + controlCornerRadius, + density, + designUnit, + direction, + disabledOpacity, + strokeWidth, + focusStrokeWidth, + typeRampBaseFontSize, + typeRampBaseLineHeight, + typeRampMinus1FontSize, + typeRampMinus1LineHeight, + typeRampMinus2FontSize, + typeRampMinus2LineHeight, + typeRampPlus1FontSize, + typeRampPlus1LineHeight, + typeRampPlus2FontSize, + typeRampPlus2LineHeight, + typeRampPlus3FontSize, + typeRampPlus3LineHeight, + typeRampPlus4FontSize, + typeRampPlus4LineHeight, + typeRampPlus5FontSize, + typeRampPlus5LineHeight, + typeRampPlus6FontSize, + typeRampPlus6LineHeight, + accentFillRestDelta, + accentFillHoverDelta, + accentFillActiveDelta, + accentFillFocusDelta, + accentForegroundRestDelta, + accentForegroundHoverDelta, + accentForegroundActiveDelta, + accentForegroundFocusDelta, + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + neutralFillFocusDelta, + neutralFillInputRestDelta, + neutralFillInputHoverDelta, + neutralFillInputActiveDelta, + neutralFillInputFocusDelta, + neutralFillStealthRestDelta, + neutralFillStealthHoverDelta, + neutralFillStealthActiveDelta, + neutralFillStealthFocusDelta, + neutralFillStrongRestDelta, + neutralFillStrongHoverDelta, + neutralFillStrongActiveDelta, + neutralFillStrongFocusDelta, + neutralFillLayerRestDelta, + neutralStrokeRestDelta, + neutralStrokeHoverDelta, + neutralStrokeActiveDelta, + neutralStrokeFocusDelta, + neutralStrokeDividerRestDelta +} from 'https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js' + +export function setBaseHeightMultiplier(element, value) { + baseHeightMultiplier.setValueFor(element, value); +} \ No newline at end of file From c1746cc9a5adaf3dd6340b980671fdafc77bd97b Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 2 Dec 2021 22:35:39 +0100 Subject: [PATCH 04/34] wip --- Microsoft.Fast.sln | 2 +- .../FluentUI.Demo.Shared/Pages/Index.razor | 7 +- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 33 ++--- .../Components/FluentAnchor.razor.cs | 7 +- .../Components/_Imports.razor | 2 + .../DesignToken.cs | 114 ++++++++---------- .../DesignTokenManagerJSObjectReference.cs | 33 ----- .../DesignTokenValue.cs | 15 --- ...nTokenManager.js => DesignTokenInterop.js} | 10 +- 9 files changed, 85 insertions(+), 138 deletions(-) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs rename src/Microsoft.Fast.Components.FluentUI/wwwroot/{designTokenManager.js => DesignTokenInterop.js} (87%) diff --git a/Microsoft.Fast.sln b/Microsoft.Fast.sln index a41fa40d8b..b9a98a4a59 100644 --- a/Microsoft.Fast.sln +++ b/Microsoft.Fast.sln @@ -13,7 +13,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentUI.Demo.Server", "exa EndProject Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentUI.Demo.Shared", "examples\FluentUI.Demo.Shared\FluentUI.Demo.Shared.csproj", "{CEE536EE-1F7E-4B50-8397-27E8C287C7A1}" EndProject -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FluentUI.Demo.Client", "examples\FluentUI.Demo.Client\FluentUI.Demo.Client.csproj", "{57790DB9-2EE1-4D78-BA73-9F63D8466F02}" +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentUI.Demo.Client", "examples\FluentUI.Demo.Client\FluentUI.Demo.Client.csproj", "{57790DB9-2EE1-4D78-BA73-9F63D8466F02}" EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 19a2d58588..2f839b9ddc 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -5,8 +5,9 @@

Blazor Fluent UI Web Components home page

-Web components handlers -Web components bindings -Blazor component bindings +Web components handlers +Web components bindings +Blazor component bindings + diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 9cc9fb7076..d30274d38d 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -2,29 +2,18 @@ using Microsoft.Fast.Components.FluentUI; using Microsoft.JSInterop; -namespace FluentUI.Demo.Shared.Pages +namespace FluentUI.Demo.Shared.Pages; + +public partial class Index { - public partial class Index : ComponentBase - { - [Inject] IJSRuntime? JSRuntime { get; set; } - DesignToken specialColor = new DesignToken("special-color"); - ElementReference ancestor; - FluentAnchor? decendant; - protected override void OnInitialized() - { - //specialColor.SetValueFor(ancestor, "#FFFFFF"); - //specialColor.SetValueFor(decendant!, "#F7F7F7"); - //DesignToken baseLayerLuminance = new(); - //baseLayerLuminance.SetValueFor(ancestor, 0); + [Inject] IJSRuntime? jsRuntime { get; set; } = default!; - base.OnInitialized(); - } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + DesignToken baseHeightMultiplier = new(); + await baseHeightMultiplier.SetValueFor("#secondanchor", 52); + //await baseHeightMultiplier.SetValueFor(".bigbutton", 48); - protected override async Task OnAfterRenderAsync(bool firstRender) - { - DesignToken baseHeightMultiplier = new(); - await baseHeightMultiplier.SetValueFor(ancestor, 48); - await base.OnAfterRenderAsync(firstRender); - } + await base.OnAfterRenderAsync(firstRender); } -} \ No newline at end of file +} diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs index 1af694091a..e4f56cf6fd 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs @@ -1,6 +1,7 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; + public partial class FluentAnchor { [Parameter] @@ -12,6 +13,8 @@ public partial class FluentAnchor [Parameter] public RenderFragment? ChildContent { get; set; } - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } + /// + /// Gets or sets a collection of additional attributes that will be applied to the created element. + /// + [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/_Imports.razor b/src/Microsoft.Fast.Components.FluentUI/Components/_Imports.razor index e3058c9c61..126bba94c3 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/_Imports.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/_Imports.razor @@ -2,3 +2,5 @@ @using System @using System.Diagnostics.CodeAnalysis @using Microsoft.AspNetCore.Components.Web +@using Microsoft.JSInterop + diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 30894e0ca2..07fafe7d76 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -1,65 +1,57 @@ -using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; -namespace Microsoft.Fast.Components.FluentUI; - - -public class DesignToken +namespace Microsoft.Fast.Components.FluentUI { - - /// - /// The default value of the token - /// - public T? DefaultValue { get; set; } - - /// - /// The value of the token - /// - public T? Value { get; set; } - - /// - /// The name of the token - /// - public string Name { get; set; } = ""; - - /// - /// A list of elements for which the DesignToken has a value set - /// - public List? AppliedTo { get; set; } = new(); - - public DesignToken() - { - - } - - public DesignToken(string name) - { - Name = name; - } - - public async Task SetValueFor(ElementReference element, T value) - { - Value = value; - if (AppliedTo! != null) - AppliedTo.Add(element); - - - } - - public T? GetValueFor(ElementReference element) + public class DesignToken : ComponentBase, IAsyncDisposable { - return Value; - + private readonly Lazy>? moduleTask; + + [Inject] + public IJSRuntime JSRuntime { get; set; } = default!; + + [Parameter] + public Func? GetControl { get; set; } + + [Parameter] + public string? Element { get; set; } + + [Parameter] + public T? Value { get; set; } + + public DesignToken() + { + moduleTask = new(() => JSRuntime.InvokeAsync( + "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + //if (GetControl is null) + // throw new ArgumentNullException(nameof(GetControl)); + if (firstRender) + { + var module = await moduleTask!.Value; + //await module.InvokeVoidAsync("setBaseHeightMultiplier", GetControl(), Value); + + await module.InvokeVoidAsync("setBaseHeightMultiplier", Element, Value); + } + + } + + public async ValueTask SetValueFor(string element, T value) + { + var module = await moduleTask!.Value; + await module.InvokeVoidAsync("setBaseHeightMultiplier", element, value); + + } + public async ValueTask DisposeAsync() + { + if (moduleTask is not null && moduleTask.IsValueCreated) + { + var module = await moduleTask.Value; + await module.DisposeAsync(); + } + } } - - //DeleteValueFor - - //WithDefault - - //Subscribe - //Unsubscribe -} - -//public class CSSDesignToken : DesignToken -//{ -// public string? CSSCustomProperty { get; set; } -//} \ No newline at end of file +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs deleted file mode 100644 index ccf23a49cd..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokenManagerJSObjectReference.cs +++ /dev/null @@ -1,33 +0,0 @@ -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI; - -internal class DesignTokenManagerJSObjectReference -{ - private const string ScriptPath = "./_content/Microsoft.Fast.Components.FluentUI/designTokenManager.js"; - private readonly IJSRuntime _jsRuntime; - private Task? _scriptManager; - - public DesignTokenManagerJSObjectReference(IJSRuntime jsRuntime) - { - _jsRuntime = jsRuntime; - } - - public Task ScriptManager => - _scriptManager ??= _jsRuntime.InvokeAsync("import", ScriptPath).AsTask(); - - public async ValueTask SetTitleAsync(string title) - { - - var scriptManager = await ScriptManager; - await scriptManager.InvokeVoidAsync("setTitle", title); - } - - public async ValueTask SetValueFor(ElementReference element, object value) - { - var scriptManager = await ScriptManager; - await scriptManager.InvokeVoidAsync("setBaseHeightMultiplier", element, value); - } -} - diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs deleted file mode 100644 index 7e3a309af5..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokenValue.cs +++ /dev/null @@ -1,15 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; - -public class DesignTokenValue -{ - public ElementReference Element { get; set; } - public T? Value { get; set; } - - public DesignTokenValue(ElementReference element, T value) - { - Element = element; - Value = value; - } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js similarity index 87% rename from src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js rename to src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js index 54bcbf5e5f..2133cdea81 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/designTokenManager.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js @@ -62,5 +62,13 @@ } from 'https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js' export function setBaseHeightMultiplier(element, value) { - baseHeightMultiplier.setValueFor(element, value); + + var x = document.querySelectorAll(element); + var i; + for (i = 0; i < x.length; i++) { + baseHeightMultiplier.setValueFor(x[i], value); + } + + //var x = document.querySelector(element); + //baseHeightMultiplier.setValueFor(x, value); } \ No newline at end of file From a912ebe4c4d5141b455afb022339cc4387df4a8b Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 3 Dec 2021 17:03:24 +0100 Subject: [PATCH 05/34] Sort of working... --- .../FluentUI.Demo.Shared/Pages/Index.razor | 5 +- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 13 ++++-- .../DesignToken.cs | 46 +++++++++---------- .../Microsoft.Fast.Components.FluentUI.csproj | 2 +- .../wwwroot/DesignTokenInterop.js | 12 +++++ 5 files changed, 45 insertions(+), 33 deletions(-) diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 2f839b9ddc..f8af485f97 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -7,7 +7,4 @@ Web components handlers Web components bindings -Blazor component bindings - - - +Blazor component bindings \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index d30274d38d..3c824387ec 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -6,14 +6,17 @@ namespace FluentUI.Demo.Shared.Pages; public partial class Index { - [Inject] IJSRuntime? jsRuntime { get; set; } = default!; + [Inject] + private IJSRuntime? jsRuntime { get; set; } protected override async Task OnAfterRenderAsync(bool firstRender) { - DesignToken baseHeightMultiplier = new(); - await baseHeightMultiplier.SetValueFor("#secondanchor", 52); - //await baseHeightMultiplier.SetValueFor(".bigbutton", 48); + DesignToken? dt = new(jsRuntime!, "baseHeightMultiplier"); + await dt.SetValueFor("#secondanchor", 52); + + DesignToken? dt2 = new(jsRuntime!, "baseLayerLuminance"); + await dt2.SetValueFor(".bigbutton", 0); await base.OnAfterRenderAsync(firstRender); } -} +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 07fafe7d76..88f6dd481d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -3,55 +3,55 @@ namespace Microsoft.Fast.Components.FluentUI { - public class DesignToken : ComponentBase, IAsyncDisposable + public class DesignToken : IAsyncDisposable { + private readonly Lazy>? moduleTask; - [Inject] - public IJSRuntime JSRuntime { get; set; } = default!; + private IJSObjectReference? module; - [Parameter] - public Func? GetControl { get; set; } + + private IJSRuntime JSRuntime { get; set; } = default!; [Parameter] - public string? Element { get; set; } + public string? Selector { get; set; } [Parameter] public T? Value { get; set; } + [Parameter] + public string? Name { get; set; } + + /// + /// Constructs an instance of DesignToken"/>. + /// public DesignToken() { - moduleTask = new(() => JSRuntime.InvokeAsync( - "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); } - protected override async Task OnAfterRenderAsync(bool firstRender) - { - //if (GetControl is null) - // throw new ArgumentNullException(nameof(GetControl)); - if (firstRender) - { - var module = await moduleTask!.Value; - //await module.InvokeVoidAsync("setBaseHeightMultiplier", GetControl(), Value); - await module.InvokeVoidAsync("setBaseHeightMultiplier", Element, Value); - } + public DesignToken(IJSRuntime jsRuntime, string name) + { + moduleTask = new(() => jsRuntime.InvokeAsync( + "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); + Name = name; } - public async ValueTask SetValueFor(string element, T value) + public async ValueTask SetValueFor(string selector, T value) { - var module = await moduleTask!.Value; - await module.InvokeVoidAsync("setBaseHeightMultiplier", element, value); + module = await moduleTask!.Value; + await module.InvokeVoidAsync("setValueFor", Name, selector, value); } + public async ValueTask DisposeAsync() { - if (moduleTask is not null && moduleTask.IsValueCreated) + if (module is not null) { - var module = await moduleTask.Value; await module.DisposeAsync(); } + } } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index f6b262e71d..9e06818257 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -52,7 +52,7 @@ - + diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js index 2133cdea81..cbef2733bc 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js @@ -69,6 +69,18 @@ export function setBaseHeightMultiplier(element, value) { baseHeightMultiplier.setValueFor(x[i], value); } + //var x = document.querySelector(element); + //baseHeightMultiplier.setValueFor(x, value); +} + +export function setValueFor(designtoken, element, value) { + + var x = document.querySelectorAll(element); + var i; + for (i = 0; i < x.length; i++) { + eval(designtoken).setValueFor(x[i], value); + } + //var x = document.querySelector(element); //baseHeightMultiplier.setValueFor(x, value); } \ No newline at end of file From 61170510a4cad7336da127b0d000a744819a2b23 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 12:34:19 +0100 Subject: [PATCH 06/34] Works with ElementReference now as well --- .../FluentUI.Demo.Shared/Pages/Index.razor | 2 +- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 5 ++++ .../Components/FluentAnchor.razor | 7 +++++- .../Components/FluentAnchor.razor.cs | 2 ++ .../DesignToken.cs | 9 +++++++- .../wwwroot/DesignTokenInterop.js | 23 ++++++++----------- 6 files changed, 31 insertions(+), 17 deletions(-) diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index f8af485f97..46d8de802b 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -7,4 +7,4 @@ Web components handlers Web components bindings -Blazor component bindings \ No newline at end of file +Blazor component bindings \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 3c824387ec..690920d767 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -9,6 +9,8 @@ public partial class Index [Inject] private IJSRuntime? jsRuntime { get; set; } + private FluentAnchor anchorRef = default!; + protected override async Task OnAfterRenderAsync(bool firstRender) { DesignToken? dt = new(jsRuntime!, "baseHeightMultiplier"); @@ -17,6 +19,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender) DesignToken? dt2 = new(jsRuntime!, "baseLayerLuminance"); await dt2.SetValueFor(".bigbutton", 0); + DesignToken? dt3 = new(jsRuntime!, "baseHeightMultiplier"); + await dt3.SetValueFor(anchorRef.Element, 25); + await base.OnAfterRenderAsync(firstRender); } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor index 2661481775..2ce7ac7505 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor @@ -1 +1,6 @@ -@ChildContent + + @ChildContent + diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs index e4f56cf6fd..271a7f8de7 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs @@ -4,6 +4,8 @@ namespace Microsoft.Fast.Components.FluentUI; public partial class FluentAnchor { + public ElementReference Element { get; protected set; } + [Parameter] public string? Href { get; set; } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 88f6dd481d..6588c19b9e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -41,7 +41,14 @@ public DesignToken(IJSRuntime jsRuntime, string name) public async ValueTask SetValueFor(string selector, T value) { module = await moduleTask!.Value; - await module.InvokeVoidAsync("setValueFor", Name, selector, value); + await module.InvokeVoidAsync("setValueForSelector", Name, selector, value); + + } + + public async ValueTask SetValueFor(ElementReference? element, T value) + { + module = await moduleTask!.Value; + await module.InvokeVoidAsync("setValueFor", Name, element, value); } diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js index cbef2733bc..e57ea7b033 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js @@ -61,26 +61,21 @@ neutralStrokeDividerRestDelta } from 'https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js' -export function setBaseHeightMultiplier(element, value) { - var x = document.querySelectorAll(element); +export function setValueForSelector(designtoken, selector, value) { + + var x = document.querySelectorAll(selector); var i; for (i = 0; i < x.length; i++) { - baseHeightMultiplier.setValueFor(x[i], value); + eval(designtoken).setValueFor(x[i], value); } - - //var x = document.querySelector(element); - //baseHeightMultiplier.setValueFor(x, value); } export function setValueFor(designtoken, element, value) { - - var x = document.querySelectorAll(element); - var i; - for (i = 0; i < x.length; i++) { - eval(designtoken).setValueFor(x[i], value); + if (element instanceof HTMLElement) { + eval(designtoken).setValueFor(element, value); + } + else { + throw new Error('Unable to set value for an invalid element.'); } - - //var x = document.querySelector(element); - //baseHeightMultiplier.setValueFor(x, value); } \ No newline at end of file From fec43e6694873380a227aa5cd56970057a41af91 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 17:12:13 +0100 Subject: [PATCH 07/34] Add FluentComponentBase Clean up DesignToken --- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 6 +++--- .../Components/FluentAnchor.razor | 1 + .../Components/FluentAnchor.razor.cs | 10 ++-------- .../DesignToken.cs | 19 +++++++----------- .../FluentComponentBase.cs | 20 +++++++++++++++++++ 5 files changed, 33 insertions(+), 23 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 690920d767..7008804136 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -13,13 +13,13 @@ public partial class Index protected override async Task OnAfterRenderAsync(bool firstRender) { - DesignToken? dt = new(jsRuntime!, "baseHeightMultiplier"); + DesignToken dt = new(jsRuntime!, "baseHeightMultiplier"); await dt.SetValueFor("#secondanchor", 52); - DesignToken? dt2 = new(jsRuntime!, "baseLayerLuminance"); + DesignToken dt2 = new(jsRuntime!, "baseLayerLuminance"); await dt2.SetValueFor(".bigbutton", 0); - DesignToken? dt3 = new(jsRuntime!, "baseHeightMultiplier"); + DesignToken dt3 = new(jsRuntime!, "baseHeightMultiplier"); await dt3.SetValueFor(anchorRef.Element, 25); await base.OnAfterRenderAsync(firstRender); diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor index 2ce7ac7505..3464b97d03 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase - /// Gets or sets a collection of additional attributes that will be applied to the created element. - /// - [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 6588c19b9e..2dc2e5aa8c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -5,14 +5,9 @@ namespace Microsoft.Fast.Components.FluentUI { public class DesignToken : IAsyncDisposable { - private readonly Lazy>? moduleTask; - private IJSObjectReference? module; - - - private IJSRuntime JSRuntime { get; set; } = default!; - + [Parameter] public string? Selector { get; set; } @@ -25,16 +20,15 @@ public class DesignToken : IAsyncDisposable /// /// Constructs an instance of DesignToken"/>. /// - public DesignToken() + public DesignToken(IJSRuntime jsRuntime) { + moduleTask = new(() => jsRuntime.InvokeAsync( + "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); } - public DesignToken(IJSRuntime jsRuntime, string name) + public DesignToken(IJSRuntime jsRuntime, string name) : this(jsRuntime) { - moduleTask = new(() => jsRuntime.InvokeAsync( - "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); - Name = name; } @@ -45,12 +39,13 @@ public async ValueTask SetValueFor(string selector, T value) } - public async ValueTask SetValueFor(ElementReference? element, T value) + public async ValueTask SetValueFor(ElementReference element, T value) { module = await moduleTask!.Value; await module.InvokeVoidAsync("setValueFor", Name, element, value); } + public async ValueTask DisposeAsync() { diff --git a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs new file mode 100644 index 0000000000..40554b06dc --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs @@ -0,0 +1,20 @@ +using Microsoft.AspNetCore.Components; + +namespace Microsoft.Fast.Components.FluentUI; + +public class FluentComponentBase : ComponentBase +{ + /// + /// Gets or sets the associated . + /// + /// May be if accessed before the component is rendered. + /// + /// + public ElementReference Element { get; protected set; } + + /// + /// Gets or sets a collection of additional attributes that will be applied to the created element. + /// + [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary? AdditionalAttributes { get; set; } +} + From 8b0b988cf4cf34cd1b95d9f77f961718a7651d0f Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 20:29:00 +0100 Subject: [PATCH 08/34] -Let all components inhert from FluentComponentBase -Move ChildContent and AdditionalAttributes to FluentComponentBase -Remove empty code behind files --- .../Components/FluentAccordion.razor | 1 + .../Components/FluentAccordion.razor.cs | 8 +------- .../Components/FluentAccordionItem.razor | 1 + .../Components/FluentAccordionItem.razor.cs | 8 +------- .../Components/FluentAnchor.razor.cs | 5 ++--- .../Components/FluentAnchoredRegion.razor | 1 + .../Components/FluentAnchoredRegion.razor.cs | 7 +------ .../Components/FluentBadge.razor | 1 + .../Components/FluentBadge.razor.cs | 8 +------- .../Components/FluentBreadcrumb.razor | 1 + .../Components/FluentBreadcrumb.razor.cs | 11 ----------- .../Components/FluentBreadcrumbItem.razor | 1 + .../Components/FluentBreadcrumbItem.razor.cs | 8 +------- .../Components/FluentButton.razor | 1 + .../Components/FluentButton.razor.cs | 8 +------- .../Components/FluentCard.razor | 1 + .../Components/FluentCard.razor.cs | 12 ------------ .../Components/FluentCheckbox.razor.cs | 5 +---- .../Components/FluentCombobox.razor | 2 +- .../Components/FluentCombobox.razor.cs | 8 +------- .../Components/FluentDataGrid.razor | 12 +++++------- .../Components/FluentDataGrid.razor.cs | 8 +------- .../Components/FluentDataGridCell.razor | 3 ++- .../Components/FluentDataGridCell.razor.cs | 9 +-------- .../Components/FluentDataGridRow.razor | 3 ++- .../Components/FluentDataGridRow.razor.cs | 9 +-------- .../Components/FluentDesignSystemProvider.razor | 1 + .../Components/FluentDesignSystemProvider.razor.cs | 8 +------- .../Components/FluentDialog.razor | 1 + .../Components/FluentDialog.razor.cs | 9 ++------- .../Components/FluentDivider.razor | 1 + .../Components/FluentDivider.razor.cs | 12 ------------ .../Components/FluentFlipper.razor | 1 + .../Components/FluentFlipper.razor.cs | 8 +------- .../Components/FluentHorizontalScroll.razor | 1 + .../Components/FluentHorizontalScroll.razor.cs | 8 +------- .../Components/FluentListbox.razor | 2 +- .../Components/FluentListbox.razor.cs | 11 ++--------- .../Components/FluentMenu.razor | 1 + .../Components/FluentMenu.razor.cs | 12 ------------ .../Components/FluentMenuItem.razor | 1 + .../Components/FluentMenuItem.razor.cs | 8 +------- .../Components/FluentNumberField.razor | 1 - .../Components/FluentNumberField.razor.cs | 8 +++----- .../Components/FluentOption.razor | 1 + .../Components/FluentOption.razor.cs | 8 +------- .../Components/FluentProgress.razor | 1 + .../Components/FluentProgress.razor.cs | 8 +------- .../Components/FluentProgressRing.razor | 1 + .../Components/FluentProgressRing.razor.cs | 8 +------- .../Components/FluentRadio.razor | 1 + .../Components/FluentRadio.razor.cs | 8 +------- .../Components/FluentRadioGroup.razor | 1 - .../Components/FluentRadioGroup.razor.cs | 5 +---- .../Components/FluentSelect.razor.cs | 8 +------- .../Components/FluentSkeleton.razor | 1 + .../Components/FluentSkeleton.razor.cs | 8 +------- .../Components/FluentSlider.razor | 1 - .../Components/FluentSlider.razor.cs | 5 +---- .../Components/FluentSliderLabel.razor | 1 + .../Components/FluentSliderLabel.razor.cs | 8 +------- .../Components/FluentSwitch.razor.cs | 5 +---- .../Components/FluentTab.razor | 1 + .../Components/FluentTab.razor.cs | 12 ------------ .../Components/FluentTabPanel.razor | 1 + .../Components/FluentTabPanel.razor.cs | 12 ------------ .../Components/FluentTabs.razor | 1 + .../Components/FluentTabs.razor.cs | 8 +------- .../Components/FluentTextArea.razor.cs | 5 +---- .../Components/FluentTextField.razor.cs | 8 +------- .../Components/FluentToolbar.razor | 1 + .../Components/FluentToolbar.razor.cs | 7 +------ .../Components/FluentTooltip.razor | 1 + .../Components/FluentTooltip.razor.cs | 7 +------ .../Components/FluentTreeItem.razor | 1 + .../Components/FluentTreeItem.razor.cs | 8 +------- .../Components/FluentTreeView.razor | 1 + .../Components/FluentTreeView.razor.cs | 8 +------- .../FluentComponentBase.cs | 6 ++++++ .../FluentInputBase.cs | 7 +------ 80 files changed, 87 insertions(+), 323 deletions(-) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor.cs diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor index a3e3d320e1..3d50ec6722 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs index 8f2803edfb..26bc0a8130 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs @@ -2,14 +2,8 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentAccordion +public partial class FluentAccordion : FluentComponentBase { - [Parameter] - public RenderFragment? ChildContent { get; set; } - [Parameter] public ExpandMode? ExpandMode { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor index b6216c6682..d6a90d8ae4 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor.cs index b03fd1bd38..89968b36fa 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor.cs @@ -2,14 +2,8 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentAccordionItem +public partial class FluentAccordionItem : FluentComponentBase { - [Parameter] - public RenderFragment? ChildContent { get; set; } - [Parameter] public bool? Expanded { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs index 2b876a72c9..ae10b580a1 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchor.razor.cs @@ -3,7 +3,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentAnchor : FluentComponentBase +public partial class FluentAnchor : FluentComponentBase { [Parameter] public string? Href { get; set; } @@ -11,6 +11,5 @@ public partial class FluentAnchor : FluentComponentBase [Parameter] public Appearance? Appearance { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } + } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor index 386725f3a2..418feee5c3 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase /// The html id of the HTMLElement used as the anchor around which the positioning region is placed. This must be set for the component's positioning logic to be active. @@ -80,9 +80,4 @@ public partial class FluentAnchoredRegion /// [Parameter] public UpdateMode? AutoUpdateMode { get; set; } = UpdateMode.Anchor; - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor index 1610468a99..9be3a45012 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor.cs index 8917cdbabd..efcbd00d44 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBadge.razor.cs @@ -1,7 +1,7 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentBadge +public partial class FluentBadge : FluentComponentBase { [Parameter] public Color? Color { get; set; } @@ -11,10 +11,4 @@ public partial class FluentBadge [Parameter] public Appearance? Appearance { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor index 62a384c28d..f025b6a044 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor.cs deleted file mode 100644 index 314d639553..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor.cs +++ /dev/null @@ -1,11 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentBreadcrumb -{ - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor index 3535fafd80..5be816b353 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor.cs index 675f828899..c566ea6cfa 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor.cs @@ -1,14 +1,8 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentBreadcrumbItem +public partial class FluentBreadcrumbItem : FluentComponentBase { [Parameter] public string? Href { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor index dc28d5bda6..456b2cd9f1 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor.cs index c3737b290f..6f0f8d8b92 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor.cs @@ -1,7 +1,7 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentButton +public partial class FluentButton : FluentComponentBase { [Parameter] public Appearance? Appearance { get; set; } @@ -11,10 +11,4 @@ public partial class FluentButton [Parameter] public bool? Autofocus { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor index 963c34f954..862a0abb72 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor.cs deleted file mode 100644 index 8f171b927c..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor.cs +++ /dev/null @@ -1,12 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; - -public partial class FluentCard -{ - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor.cs index 5187c81617..774b77d2d8 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor.cs @@ -3,7 +3,7 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentCheckbox +public partial class FluentCheckbox : FluentInputBase { [Parameter] public bool? Disabled { get; set; } @@ -14,8 +14,5 @@ public partial class FluentCheckbox [Parameter] public bool? Readonly { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - protected override bool TryParseValueFromString(string? value, out bool result, [NotNullWhen(false)] out string? validationErrorMessage) => throw new NotSupportedException($"This component does not parse string inputs. Bind to the '{nameof(CurrentValue)}' property, not '{nameof(CurrentValueAsString)}'."); } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor index a74181e673..8bd2762b3b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor @@ -1,6 +1,6 @@ @inherits FluentInputBase - { private readonly string _defaultSelectName = Guid.NewGuid().ToString("N"); private FluentOptionContext? _context; @@ -30,12 +30,6 @@ public partial class FluentCombobox [Parameter] public Position? Position { get; set; } - /// - /// Gets or sets the child content to be rendering inside the . - /// - [Parameter] - public RenderFragment? ChildContent { get; set; } - [CascadingParameter] private FluentOptionContext? CascadedContext { get; set; } diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor index 200b0bcff8..25a81ddeae 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor @@ -1,4 +1,5 @@ @typeparam TItem +@inherits FluentComponentBase @@ -7,13 +8,12 @@ DataGridRowType headerType = DataGridRowType.Header; if (GenerateHeader == GenerateHeaderOptions.Sticky) headerType = DataGridRowType.StickyHeader; - - + @{ int gridColumn = 1; foreach (ColumnDefinition column in ColumnDefinitions!) { - + @if (HeaderCellTemplate != null) { @HeaderCellTemplate(column) @@ -43,10 +43,8 @@ } else { - + } } } - - - + \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor.cs index 94a6ffeb2a..beae53744c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGrid.razor.cs @@ -1,7 +1,7 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentDataGrid +public partial class FluentDataGrid : FluentComponentBase { // FAST Attributes [Parameter] @@ -19,10 +19,4 @@ public partial class FluentDataGrid public RenderFragment>? HeaderCellTemplate { get; set; } = null; [Parameter] public RenderFragment? RowItemTemplate { get; set; } = null; - // General Blazor parameters - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor index 12ad19a94d..01d827b7b5 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor @@ -1,4 +1,5 @@ - @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor.cs index c18218fc2c..4ab6c4c7b1 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor.cs @@ -1,18 +1,11 @@ using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentDataGridCell +public partial class FluentDataGridCell : FluentComponentBase { // FAST Attributes [Parameter] public DataGridCellType? CellType { get; set; } = DataGridCellType.Default; [Parameter] public int GridColumn { get; set; } - - // General Blazor parameters - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor index 32d24451b6..225bc594f0 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor @@ -1,4 +1,5 @@ @typeparam TItem +@inherits FluentComponentBase column = ColumnDefinitions!.ElementAt(index); - @(column.FieldSelector!(RowData!)?.ToString()) + @(column.FieldSelector!(RowData!)?.ToString()) } @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor.cs index 1310571223..f221c6882c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor.cs @@ -2,7 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentDataGridRow +public partial class FluentDataGridRow : FluentComponentBase { // FAST Attributes [Parameter] @@ -18,11 +18,4 @@ public partial class FluentDataGridRow [Parameter] public IEnumerable>? ColumnDefinitions { get; set; } - - // General Blazor parameters - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor index 25afbfad97..2a4442cf41 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase ? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor index 875f675a21..dc4493f2b5 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor.cs index 3cf8e3b640..44404e6d88 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDialog.razor.cs @@ -2,19 +2,14 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentDialog +public partial class FluentDialog : FluentComponentBase { [Parameter] public bool? Modal { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } - [Parameter] public bool Hidden { get; set; } = false; + public void Show() => Hidden = false; public void Hide() => Hidden = true; } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor index 9af39a8119..85ffbca201 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor.cs deleted file mode 100644 index 91b5af1db2..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDivider.razor.cs +++ /dev/null @@ -1,12 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; - -public partial class FluentDivider -{ - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor index 23e3c3b512..58d78edf5a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor.cs index ebb1373c72..87e0c8e67e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentFlipper.razor.cs @@ -2,17 +2,11 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentFlipper +public partial class FluentFlipper : FluentComponentBase { [Parameter] public bool? Disabled { get; set; } [Parameter] public Direction? Direction { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor index 1c5e414c68..bb3deafe62 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor.cs index 719a317d4a..271f585d81 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentHorizontalScroll.razor.cs @@ -2,7 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentHorizontalScroll +public partial class FluentHorizontalScroll : FluentComponentBase { /// /// Description: Scroll speed in pixels per second @@ -15,10 +15,4 @@ public partial class FluentHorizontalScroll /// [Parameter] public string? Easing { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor index e80bfe87dc..253beed311 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor @@ -1,6 +1,6 @@ @inherits FluentInputBase - diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs index e21962f926..f8a8d510a8 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs @@ -4,7 +4,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentListbox +public partial class FluentListbox : FluentInputBase { private readonly string _defaultSelectName = Guid.NewGuid().ToString("N"); private FluentOptionContext? _context; @@ -15,14 +15,7 @@ public partial class FluentListbox [Parameter] public string? Name { get; set; } - /// - /// Gets or sets the child content to be rendering inside the . - /// - [Parameter] - public RenderFragment? ChildContent { get; set; } - - - [CascadingParameter] private FluentOptionContext? CascadedContext { get; set; } + [CascadingParameter] private FluentOptionContext? CascadedContext { get; set; } /// protected override void OnParametersSet() diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor index 8626a02ea9..c7ad9f8661 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor.cs deleted file mode 100644 index 268d7076b4..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenu.razor.cs +++ /dev/null @@ -1,12 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; - -public partial class FluentMenu -{ - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor index 2b311b99ec..3332d12de1 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor.cs index 28dcdd8cc3..fb5c2cc526 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentMenuItem.razor.cs @@ -2,17 +2,11 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentMenuItem +public partial class FluentMenuItem : FluentComponentBase { [Parameter] public bool? Disabled { get; set; } [Parameter] public bool? Checked { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor index 0e860cb0a2..3325dad93e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor @@ -2,7 +2,6 @@ @typeparam TValue @using System.Globalization; @using System.Reflection; - +public partial class FluentNumberField : FluentInputBase { [Parameter] public bool? Disabled { get; set; } @@ -29,9 +29,7 @@ public partial class FluentNumberField [Parameter] public string ParsingErrorMessage { get; set; } = "The {0} field must be a number."; - [Parameter] - public RenderFragment? ChildContent { get; set; } - + [Parameter] public string? Min { get; set; } = GetMinOrMaxValue("MinValue"); [Parameter] @@ -58,7 +56,7 @@ static FluentNumberField() } } - protected override bool TryParseValueFromString(string? value, out TValue? result, [NotNullWhen(false)] out string? validationErrorMessage) + protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage) { if (BindConverter.TryConvertTo(value, CultureInfo.InvariantCulture, out result)) { diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor index fcad46129b..e3882e4292 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase ? AdditionalAttributes { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - [CascadingParameter] private FluentOptionContext? CascadedContext { get; set; } /// diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor index a4443a1ee6..e0b9318612 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor.cs index aafe28bdfc..752f281dca 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgress.razor.cs @@ -2,7 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentProgress +public partial class FluentProgress : FluentComponentBase { [Parameter] public int? Min { get; set; } @@ -15,10 +15,4 @@ public partial class FluentProgress [Parameter] public bool? Paused { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor index 6e5ecba925..0c7a317149 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor.cs index b9697f4c5a..00dc95a582 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentProgressRing.razor.cs @@ -2,7 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentProgressRing +public partial class FluentProgressRing : FluentComponentBase { [Parameter] public int? Min { get; set; } @@ -15,10 +15,4 @@ public partial class FluentProgressRing [Parameter] public bool? Paused { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadio.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadio.razor index cd728e1a50..141db6759b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadio.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadio.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase ? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor index 7a224de56b..dfa0ad0fed 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor @@ -1,5 +1,4 @@ @inherits FluentInputBase - { [Parameter] public string? Name { get; set; } @@ -15,9 +15,6 @@ public partial class FluentRadioGroup [Parameter] public Orientation? Orientation { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage) { result = value; diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs index bbd6a05d63..9c851c2720 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs @@ -3,7 +3,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentSelect +public partial class FluentSelect : FluentInputBase { private readonly string _defaultSelectName = Guid.NewGuid().ToString("N"); private FluentOptionContext? _context; @@ -23,12 +23,6 @@ public partial class FluentSelect [Parameter] public Position? Position { get; set; } - /// - /// Gets or sets the child content to be rendering inside the . - /// - [Parameter] - public RenderFragment? ChildContent { get; set; } - [CascadingParameter] private FluentOptionContext? CascadedContext { get; set; } diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor index 932b598089..43f17e978a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor.cs index 959f1fc664..190e1c860b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSkeleton.razor.cs @@ -2,7 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentSkeleton +public partial class FluentSkeleton : FluentComponentBase { [Parameter] public Shape? Shape { get; set; } @@ -12,10 +12,4 @@ public partial class FluentSkeleton [Parameter] public string? Pattern { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor index 40f0fe28fc..1a565b44eb 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor @@ -1,5 +1,4 @@ @inherits FluentInputBase -@using System.Globalization { [Parameter] public Orientation? Orientation { get; set; } @@ -25,9 +25,6 @@ public partial class FluentSlider [Parameter] public bool? Readonly { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - protected override bool TryParseValueFromString(string? value, out int result, [NotNullWhen(false)] out string? validationErrorMessage) { if (BindConverter.TryConvertTo(value, CultureInfo.InvariantCulture, out result)) diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor index ba3dcc57ae..8e9c16985e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor.cs index dde87b1ca4..275572755a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSliderLabel.razor.cs @@ -2,17 +2,11 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentSliderLabel +public partial class FluentSliderLabel : FluentComponentBase { - [Parameter] - public RenderFragment? ChildContent { get; set; } - [Parameter] public int? Position { get; set; } [Parameter] public bool? HideMark { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor.cs index e9f04cc8ed..3b98a5bcc2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor.cs @@ -3,7 +3,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentSwitch +public partial class FluentSwitch : FluentInputBase { [Parameter] public bool? Disabled { get; set; } @@ -14,8 +14,5 @@ public partial class FluentSwitch [Parameter] public bool? Required { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - protected override bool TryParseValueFromString(string? value, out bool result, [NotNullWhen(false)] out string? validationErrorMessage) => throw new NotSupportedException($"This component does not parse string inputs. Bind to the '{nameof(CurrentValue)}' property, not '{nameof(CurrentValueAsString)}'."); } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor index 913f460714..d26102fba2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor.cs deleted file mode 100644 index c3752f9aa8..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTab.razor.cs +++ /dev/null @@ -1,12 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; - -public partial class FluentTab -{ - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor index a16b769b6a..5e0063730d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor.cs deleted file mode 100644 index 2eb095ffe3..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabPanel.razor.cs +++ /dev/null @@ -1,12 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Microsoft.Fast.Components.FluentUI; - -public partial class FluentTabPanel -{ - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor index 6f039cb4f6..4c5e35b70d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor.cs index 95c3e90c9a..28087bee90 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTabs.razor.cs @@ -2,17 +2,11 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentTabs +public partial class FluentTabs : FluentComponentBase { [Parameter] public bool? ActiveIndicator { get; set; } [Parameter] public Orientation? Orientation { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextArea.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextArea.razor.cs index bf3d0e5f0a..b56a2d2ad2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextArea.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextArea.razor.cs @@ -4,7 +4,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentTextArea +public partial class FluentTextArea : FluentInputBase { [Parameter] public bool? Disabled { get; set; } @@ -27,9 +27,6 @@ public partial class FluentTextArea [Parameter] public string? Placeholder { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage) { result = value; diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextField.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextField.razor.cs index 456e69731f..67f8df4722 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextField.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTextField.razor.cs @@ -1,10 +1,9 @@ using System.Diagnostics.CodeAnalysis; - using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentTextField +public partial class FluentTextField : FluentInputBase { [Parameter] public bool? Disabled { get; set; } @@ -39,11 +38,6 @@ public partial class FluentTextField [Parameter] public bool? Spellcheck { get; set; } - //Pattern - //List - [Parameter] - public RenderFragment? ChildContent { get; set; } - protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage) { result = value; diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor index 0cc3329d5b..7cc3ef35af 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor.cs index 2903cc362f..3a8585940a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentToolbar.razor.cs @@ -2,13 +2,8 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentToolbar +public partial class FluentToolbar : FluentComponentBase { [Parameter] public Orientation? Orientation { get; set; } = FluentUI.Orientation.Horizontal; - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor index d92538ee91..f23205c627 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor @@ -1,3 +1,4 @@ +@inherits FluentComponentBase ? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor index 4eb1c4b1b6..f11edd2823 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor.cs index 775a569f2b..b702f3f5fd 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor.cs @@ -2,11 +2,8 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentTreeItem +public partial class FluentTreeItem : FluentComponentBase { - [Parameter] - public RenderFragment? ChildContent { get; set; } - [Parameter] public bool? Disabled { get; set; } @@ -15,7 +12,4 @@ public partial class FluentTreeItem [Parameter] public bool? Expanded { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor index ea6904cae8..2179732d50 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor @@ -1 +1,2 @@ +@inherits FluentComponentBase @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor.cs index b5ea2acec4..905e0637a6 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor.cs @@ -2,14 +2,8 @@ namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentTreeView +public partial class FluentTreeView : FluentComponentBase { - [Parameter] - public RenderFragment? ChildContent { get; set; } - [Parameter] public bool? RenderCollapsedNodes { get; set; } - - [Parameter(CaptureUnmatchedValues = true)] - public IDictionary? AdditionalAttributes { get; set; } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs index 40554b06dc..1682dce563 100644 --- a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs +++ b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs @@ -12,6 +12,12 @@ public class FluentComponentBase : ComponentBase /// public ElementReference Element { get; protected set; } + /// + /// Gets or sets the child content to be rendered inside the component + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + /// /// Gets or sets a collection of additional attributes that will be applied to the created element. /// diff --git a/src/Microsoft.Fast.Components.FluentUI/FluentInputBase.cs b/src/Microsoft.Fast.Components.FluentUI/FluentInputBase.cs index 72d52f3ff1..e5359f31e1 100644 --- a/src/Microsoft.Fast.Components.FluentUI/FluentInputBase.cs +++ b/src/Microsoft.Fast.Components.FluentUI/FluentInputBase.cs @@ -6,7 +6,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public abstract class FluentInputBase : ComponentBase, IDisposable +public abstract class FluentInputBase : FluentComponentBase, IDisposable { private readonly EventHandler _validationStateChangedHandler; private bool _previousParsingAttemptFailed; @@ -15,11 +15,6 @@ public abstract class FluentInputBase : ComponentBase, IDisposable [CascadingParameter] private EditContext? CascadedEditContext { get; set; } - /// - /// Gets or sets a collection of additional attributes that will be applied to the created element. - /// - [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary? AdditionalAttributes { get; set; } - /// /// Gets or sets the value of the input. This should be used with two-way binding. /// From b979c9e81d11bf4ee9b879a07fc59122587fb503 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 20:50:19 +0100 Subject: [PATCH 09/34] -Add @ref to all components -Housekeeping (fix compiler warnings) --- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 8 +++--- .../Components/FluentAccordion.razor | 2 +- .../Components/FluentAccordionItem.razor | 2 +- .../Components/FluentAnchoredRegion.razor | 3 +- .../Components/FluentBadge.razor | 2 +- .../Components/FluentBreadcrumb.razor | 2 +- .../Components/FluentBreadcrumbItem.razor | 2 +- .../Components/FluentButton.razor | 2 +- .../Components/FluentCard.razor | 2 +- .../Components/FluentCheckbox.razor | 3 +- .../Components/FluentCombobox.razor | 3 +- .../Components/FluentDataGrid.razor | 3 +- .../Components/FluentDataGridCell.razor | 9 +++--- .../Components/FluentDataGridRow.razor | 3 +- .../FluentDesignSystemProvider.razor | 3 +- .../Components/FluentDialog.razor | 2 +- .../Components/FluentDivider.razor | 2 +- .../Components/FluentFlipper.razor | 2 +- .../Components/FluentHorizontalScroll.razor | 3 +- .../Components/FluentListbox.razor | 3 +- .../Components/FluentMenu.razor | 2 +- .../Components/FluentMenuItem.razor | 2 +- .../Components/FluentNumberField.razor | 3 +- .../Components/FluentNumberField.razor.cs | 28 +++++++------------ .../Components/FluentOption.razor | 3 +- .../Components/FluentProgress.razor | 2 +- .../Components/FluentProgressRing.razor | 2 +- .../Components/FluentRadio.razor | 3 +- .../Components/FluentRadioGroup.razor | 3 +- .../Components/FluentSelect.razor | 3 +- .../Components/FluentSkeleton.razor | 2 +- .../Components/FluentSlider.razor | 3 +- .../Components/FluentSliderLabel.razor | 2 +- .../Components/FluentSwitch.razor | 3 +- .../Components/FluentTab.razor | 2 +- .../Components/FluentTabPanel.razor | 2 +- .../Components/FluentTabs.razor | 2 +- .../Components/FluentTextArea.razor | 3 +- .../Components/FluentTextField.razor | 3 +- .../Components/FluentToolbar.razor | 3 +- .../Components/FluentTooltip.razor | 15 +++++----- .../Components/FluentTreeItem.razor | 2 +- .../Components/FluentTreeView.razor | 2 +- .../FluentComponentBase.cs | 4 +-- 44 files changed, 86 insertions(+), 74 deletions(-) diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 7008804136..d5ca0ff5ee 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -7,19 +7,19 @@ namespace FluentUI.Demo.Shared.Pages; public partial class Index { [Inject] - private IJSRuntime? jsRuntime { get; set; } + private IJSRuntime? JSRuntime { get; set; } private FluentAnchor anchorRef = default!; protected override async Task OnAfterRenderAsync(bool firstRender) { - DesignToken dt = new(jsRuntime!, "baseHeightMultiplier"); + DesignToken dt = new(JSRuntime!, "baseHeightMultiplier"); await dt.SetValueFor("#secondanchor", 52); - DesignToken dt2 = new(jsRuntime!, "baseLayerLuminance"); + DesignToken dt2 = new(JSRuntime!, "baseLayerLuminance"); await dt2.SetValueFor(".bigbutton", 0); - DesignToken dt3 = new(jsRuntime!, "baseHeightMultiplier"); + DesignToken dt3 = new(JSRuntime!, "baseHeightMultiplier"); await dt3.SetValueFor(anchorRef.Element, 25); await base.OnAfterRenderAsync(firstRender); diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor index 3d50ec6722..cb9343ca36 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor index d6a90d8ae4..4b24e1bcd2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordionItem.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor index 418feee5c3..7d6d4846eb 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAnchoredRegion.razor @@ -1,5 +1,6 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor index f025b6a044..4feb24d0ce 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumb.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor index 5be816b353..eb008e386e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentBreadcrumbItem.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor index 456b2cd9f1..87bd716024 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentButton.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor index 862a0abb72..85f4292b18 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCard.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor index 8e38373c12..1d991111cb 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor @@ -1,5 +1,6 @@ @inherits FluentInputBase - - @if (GenerateHeader != GenerateHeaderOptions.None) diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor index 01d827b7b5..cd55255b03 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridCell.razor @@ -1,6 +1,7 @@ @inherits FluentComponentBase - - @ChildContent + + @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor index 225bc594f0..65c319e4f8 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDataGridRow.razor @@ -1,6 +1,7 @@ @typeparam TItem @inherits FluentComponentBase - diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor index 2a4442cf41..4c880aadfa 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor @@ -1,5 +1,6 @@ @inherits FluentComponentBase - diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor index f23205c627..37c179606f 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTooltip.razor @@ -1,10 +1,11 @@ @inherits FluentComponentBase - + @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor index f11edd2823..9a497b278d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeItem.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor index 2179732d50..9c43fefc89 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentTreeView.razor @@ -1,2 +1,2 @@ @inherits FluentComponentBase -@ChildContent +@ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs index 1682dce563..d291beaa05 100644 --- a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs +++ b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs @@ -2,7 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; -public class FluentComponentBase : ComponentBase +public abstract class FluentComponentBase : ComponentBase { /// /// Gets or sets the associated . @@ -13,7 +13,7 @@ public class FluentComponentBase : ComponentBase public ElementReference Element { get; protected set; } /// - /// Gets or sets the child content to be rendered inside the component + /// Gets or sets the content to be rendered inside the component /// [Parameter] public RenderFragment? ChildContent { get; set; } From 16c4e1d90612ec8775e76c0441f9efc219b36b63 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 22:24:47 +0100 Subject: [PATCH 10/34] Implement GetValueFor, DeleteValueFor and WithDefault --- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 12 +++- .../DesignToken.cs | 61 +++++++++++++++++-- .../wwwroot/DesignTokenInterop.js | 42 +++++++++++++ 3 files changed, 108 insertions(+), 7 deletions(-) diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index d5ca0ff5ee..e9018e8c74 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -19,8 +19,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender) DesignToken dt2 = new(JSRuntime!, "baseLayerLuminance"); await dt2.SetValueFor(".bigbutton", 0); - DesignToken dt3 = new(JSRuntime!, "baseHeightMultiplier"); - await dt3.SetValueFor(anchorRef.Element, 25); + DesignToken dt3 = new DesignToken(JSRuntime!, "baseHeightMultiplier").WithDefault(25); + await dt3.SetValueFor(anchorRef.Element); + + int x = await dt3.GetValueFor(anchorRef.Element); + + await dt3.DeleteValueFor(anchorRef.Element); + + //DesignToken dt4 = new DesignToken(JSRuntime!, "baseHeightMultiplier"); + // Throws error; no DefaultValue set and no Value supplied as parameter + //await dt4.SetValueFor(anchorRef.Element); await base.OnAfterRenderAsync(firstRender); } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 2dc2e5aa8c..91db68280a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -1,3 +1,4 @@ +using System.Diagnostics.CodeAnalysis; using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; @@ -9,16 +10,16 @@ public class DesignToken : IAsyncDisposable private IJSObjectReference? module; [Parameter] - public string? Selector { get; set; } + public T? Value { get; set; } [Parameter] - public T? Value { get; set; } + public T? DefaultValue { get; set; } [Parameter] public string? Name { get; set; } /// - /// Constructs an instance of DesignToken"/>. + /// Constructs an instance of a DesignToken"/>. /// public DesignToken(IJSRuntime jsRuntime) { @@ -26,12 +27,27 @@ public DesignToken(IJSRuntime jsRuntime) "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); } - public DesignToken(IJSRuntime jsRuntime, string name) : this(jsRuntime) { Name = name; } + public DesignToken WithDefault(T value) + { + this.DefaultValue = value; + return this; + } + + public async ValueTask SetValueFor(string selector) + { + if (DefaultValue == null) + throw new ArgumentNullException(nameof(DefaultValue), $"{nameof(DefaultValue)} should be set before calling SetValueFor"); + + module = await moduleTask!.Value; + await module.InvokeVoidAsync("setValueForSelector", Name, selector, DefaultValue); + + } + public async ValueTask SetValueFor(string selector, T value) { module = await moduleTask!.Value; @@ -39,14 +55,49 @@ public async ValueTask SetValueFor(string selector, T value) } + public async ValueTask SetValueFor(ElementReference element) + { + if (DefaultValue == null) + throw new ArgumentNullException(nameof(DefaultValue), $"{nameof(DefaultValue)} should be set before calling SetValueFor"); + + module = await moduleTask!.Value; + await module.InvokeVoidAsync("setValueFor", Name, element, DefaultValue); + + } + public async ValueTask SetValueFor(ElementReference element, T value) { module = await moduleTask!.Value; await module.InvokeVoidAsync("setValueFor", Name, element, value); } - + public async ValueTask DeleteValueFor(string selector) + { + module = await moduleTask!.Value; + await module.InvokeVoidAsync("deleteValueForSelector", Name, selector); + } + + public async ValueTask DeleteValueFor(ElementReference element) + { + module = await moduleTask!.Value; + await module.InvokeVoidAsync("deleteValueFor", Name, element); + } + + public async ValueTask GetValueFor(string selector) + { + module = await moduleTask!.Value; + return await module.InvokeAsync("getValueForSelector", Name, selector); + } + + public async ValueTask GetValueFor(ElementReference element) + { + module = await moduleTask!.Value; + return await module.InvokeAsync("getValueFor", Name, element); + } + + + [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "")] public async ValueTask DisposeAsync() { if (module is not null) diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js index e57ea7b033..4ba5bb3044 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js @@ -78,4 +78,46 @@ export function setValueFor(designtoken, element, value) { else { throw new Error('Unable to set value for an invalid element.'); } +} + +export function deleteValueForSelector(designtoken, selector) { + + var x = document.querySelectorAll(selector); + var i; + for (i = 0; i < x.length; i++) { + eval(designtoken).deleteValueFor(x[i]); + } +} + +export function deleteValueFor(designtoken, element) { + if (element instanceof HTMLElement) { + eval(designtoken).deleteValueFor(element); + } + else { + throw new Error('Unable to delete value for an invalid element.'); + } +} + +export function getValueForSelector(designtoken, selector) { + + var x = document.querySelector(selector); + + const value = eval(designtoken).getValueFor(x); + + if (value !== undefined) { + return value; + } +} + +export function getValueFor(designtoken, element) { + if (element instanceof HTMLElement) { + const value = eval(designtoken).getValueFor(element); + + if (value !== undefined) { + return value; + } + } + else { + throw new Error('Unable to delete value for an invalid element.'); + } } \ No newline at end of file From f25326bbfd4a9a87175c9a66a907f95fe873aff1 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 22:40:06 +0100 Subject: [PATCH 11/34] Add StandardDesignTokens --- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 6 +- .../StandardDesignTokens.cs | 66 +++++++++++++++++++ .../wwwroot/DesignTokenInterop.js | 1 + 3 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index e9018e8c74..7200d759af 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -13,13 +13,13 @@ public partial class Index protected override async Task OnAfterRenderAsync(bool firstRender) { - DesignToken dt = new(JSRuntime!, "baseHeightMultiplier"); + DesignToken dt = new(JSRuntime!, StandardDesignTokens.BaseHeightMultiplier); await dt.SetValueFor("#secondanchor", 52); - DesignToken dt2 = new(JSRuntime!, "baseLayerLuminance"); + DesignToken dt2 = new(JSRuntime!, StandardDesignTokens.BaseLayerLuminance); await dt2.SetValueFor(".bigbutton", 0); - DesignToken dt3 = new DesignToken(JSRuntime!, "baseHeightMultiplier").WithDefault(25); + DesignToken dt3 = new DesignToken(JSRuntime!, StandardDesignTokens.BaseHeightMultiplier).WithDefault(25); await dt3.SetValueFor(anchorRef.Element); int x = await dt3.GetValueFor(anchorRef.Element); diff --git a/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs new file mode 100644 index 0000000000..193cc111cf --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs @@ -0,0 +1,66 @@ +namespace Microsoft.Fast.Components.FluentUI +{ + public static class StandardDesignTokens + { + public const string BaseHeightMultiplier = "baseHeightMultiplier"; + public const string BaseWidthMultiplier = "baseWidthMultiplier"; + public const string BodyFont = "bodyFont"; + public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; + public const string BaseLayerLuminance = "baseLayerLuminance"; + public const string ControlCornerRadius = "controlCornerRadius"; + public const string Density = "density"; + public const string DesignUnit = "designUnit"; + public const string Direction = "direction"; + public const string DisabledOpacity = "disabledOpacity"; + public const string StrokeWidth = "strokeWidth"; + public const string FocusStrokeWidth = "focusStrokeWidth"; + public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; + public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; + public const string TypeRampMinus1FontSize = "typeRampMinus1FontSize"; + public const string TypeRampMinus1LineHeight = "typeRampMinus1LineHeight"; + public const string TypeRampMinus2FontSize = "typeRampMinus2FontSize"; + public const string TypeRampMinus2LineHeight = "typeRampMinus2LineHeight"; + public const string TypeRampPlus1FontSize = "typeRampPlus1FontSize"; + public const string TypeRampPlus1LineHeight = "typeRampPlus1LineHeight"; + public const string TypeRampPlus2FontSize = "typeRampPlus2FontSize"; + public const string TypeRampPlus2LineHeight = "typeRampPlus2LineHeight"; + public const string TypeRampPlus3FontSize = "typeRampPlus3FontSize"; + public const string TypeRampPlus3LineHeight = "typeRampPlus3LineHeight"; + public const string TypeRampPlus4FontSize = "typeRampPlus4FontSize"; + public const string TypeRampPlus4LineHeight = "typeRampPlus4LineHeight"; + public const string TypeRampPlus5FontSize = "typeRampPlus5FontSize"; + public const string TypeRampPlus5LineHeight = "typeRampPlus5LineHeight"; + public const string TypeRampPlus6FontSize = "typeRampPlus6FontSize"; + public const string TypeRampPlus6LineHeight = "typeRampPlus6LineHeight"; + public const string AccentFillRestDelta = "accentFillRestDelta"; + public const string AccentFillHoverDelta = "accentFillHoverDelta"; + public const string AccentFillActiveDelta = "accentFillActiveDelta"; + public const string AccentFillFocusDelta = "accentFillFocusDelta"; + public const string AccentForegroundRestDelta = "accentForegroundRestDelta"; + public const string AccentForegroundHoverDelta = "accentForegroundHoverDelta"; + public const string AccentForegroundActiveDelta = "accentForegroundActiveDelta"; + public const string AccentForegroundFocusDelta = "accentForegroundFocusDelta"; + public const string NeutralFillRestDelta = "neutralFillRestDelta"; + public const string NeutralFillHoverDelta = "neutralFillHoverDelta"; + public const string NeutralFillActiveDelta = "neutralFillActiveDelta"; + public const string NeutralFillFocusDelta = "neutralFillFocusDelta"; + public const string NeutralFillInputRestDelta = "neutralFillInputRestDelta"; + public const string NeutralFillInputHoverDelta = "neutralFillInputHoverDelta"; + public const string NeutralFillInputActiveDelta = "neutralFillInputActiveDelta"; + public const string NeutralFillInputFocusDelta = "neutralFillInputFocusDelta"; + public const string NeutralFillStealthRestDelta = "neutralFillStealthRestDelta"; + public const string NeutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; + public const string NeutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; + public const string NeutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; + public const string NeutralFillStrongRestDelta = "neutralFillStrongRestDelta"; + public const string NeutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; + public const string NeutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; + public const string NeutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; + public const string NeutralFillLayerRestDelta = "neutralFillLayerRestDelta"; + public const string NeutralStrokeRestDelta = "neutralStrokeRestDelta"; + public const string NeutralStrokeHoverDelta = "neutralStrokeHoverDelta"; + public const string NeutralStrokeActiveDelta = "neutralStrokeActiveDelta"; + public const string NeutralStrokeFocusDelta = "neutralStrokeFocusDelta"; + public const string NeutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js index 4ba5bb3044..d715934406 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js @@ -2,6 +2,7 @@ StandardLuminance, bodyFont, baseHeightMultiplier, + baseWidthMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, controlCornerRadius, From f7f40103a9f7ba95a60167ec9f98bde1b51fd6f9 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 9 Dec 2021 22:44:20 +0100 Subject: [PATCH 12/34] Remove BaseWidthModifier --- src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs | 3 +-- .../wwwroot/DesignTokenInterop.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs index 193cc111cf..939ccdea3b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs +++ b/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs @@ -2,9 +2,8 @@ { public static class StandardDesignTokens { - public const string BaseHeightMultiplier = "baseHeightMultiplier"; - public const string BaseWidthMultiplier = "baseWidthMultiplier"; public const string BodyFont = "bodyFont"; + public const string BaseHeightMultiplier = "baseHeightMultiplier"; public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; public const string BaseLayerLuminance = "baseLayerLuminance"; public const string ControlCornerRadius = "controlCornerRadius"; diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js index d715934406..4ba5bb3044 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js @@ -2,7 +2,6 @@ StandardLuminance, bodyFont, baseHeightMultiplier, - baseWidthMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, controlCornerRadius, From 43e672c2ca2c1597aab831c3aec5ce437f90746b Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 10 Dec 2021 15:40:19 +0100 Subject: [PATCH 13/34] Add predifined tokens wrapper. Needs to be added to the ServiceCollection at start up (with added extension method). --- examples/FluentUI.Demo.Client/Program.cs | 2 + examples/FluentUI.Demo.Server/Program.cs | 3 + .../FluentUI.Demo.Shared/Pages/Index.razor | 2 +- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 28 +-- .../Shared/MainLayout.razor | 70 ++++--- .../Shared/MainLayout.razor.cs | 19 +- .../DesignTokens.cs | 189 ++++++++++++++++++ .../ServiceCollectionExtensions.cs | 17 ++ .../StandardDesignTokens.cs | 65 ------ 9 files changed, 276 insertions(+), 119 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs diff --git a/examples/FluentUI.Demo.Client/Program.cs b/examples/FluentUI.Demo.Client/Program.cs index 4194742284..297146b2e6 100644 --- a/examples/FluentUI.Demo.Client/Program.cs +++ b/examples/FluentUI.Demo.Client/Program.cs @@ -1,11 +1,13 @@ using FluentUI.Demo.Shared; using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Fast.Components.FluentUI; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); builder.RootComponents.Add("head::after"); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); +builder.Services.AddFluentUIComponents(); await builder.Build().RunAsync(); diff --git a/examples/FluentUI.Demo.Server/Program.cs b/examples/FluentUI.Demo.Server/Program.cs index be7f9333c2..7b8cf287fb 100644 --- a/examples/FluentUI.Demo.Server/Program.cs +++ b/examples/FluentUI.Demo.Server/Program.cs @@ -1,8 +1,11 @@ +using Microsoft.Fast.Components.FluentUI; + var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); +builder.Services.AddFluentUIComponents(); var app = builder.Build(); diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 46d8de802b..9ed3f0501d 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -3,7 +3,7 @@ FluentUI WC home page -

Blazor Fluent UI Web Components home page

+

Blazor Fluent UI Web Components home page!

Web components handlers Web components bindings diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 7200d759af..dff0d9b454 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -6,6 +6,9 @@ namespace FluentUI.Demo.Shared.Pages; public partial class Index { + [Inject] + private DesignTokens? DesignTokens { get; set; } + [Inject] private IJSRuntime? JSRuntime { get; set; } @@ -13,23 +16,22 @@ public partial class Index protected override async Task OnAfterRenderAsync(bool firstRender) { - DesignToken dt = new(JSRuntime!, StandardDesignTokens.BaseHeightMultiplier); - await dt.SetValueFor("#secondanchor", 52); - - DesignToken dt2 = new(JSRuntime!, StandardDesignTokens.BaseLayerLuminance); - await dt2.SetValueFor(".bigbutton", 0); - - DesignToken dt3 = new DesignToken(JSRuntime!, StandardDesignTokens.BaseHeightMultiplier).WithDefault(25); - await dt3.SetValueFor(anchorRef.Element); + if (DesignTokens is not null) + { + await DesignTokens.BaseHeightMultiplier.SetValueFor("#secondanchor", 52); + await DesignTokens.BaseLayerLuminance.SetValueFor(".bigbutton", 0); - int x = await dt3.GetValueFor(anchorRef.Element); + await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(anchorRef.Element); - await dt3.DeleteValueFor(anchorRef.Element); + //int x = await DesignTokens.BaseHeightMultiplier.GetValueFor(anchorRef.Element); - //DesignToken dt4 = new DesignToken(JSRuntime!, "baseHeightMultiplier"); - // Throws error; no DefaultValue set and no Value supplied as parameter - //await dt4.SetValueFor(anchorRef.Element); + //await DesignTokens.BaseHeightMultiplier.DeleteValueFor(anchorRef.Element); + //await DesignTokens.BaseHeightMultiplier.SetValueFor(anchorRef.Element); + //Create your own DesingToken + //DesignToken specialColor = new(JSRuntime!, "special-color"); + //await specialColor.SetValueFor("#secondanchor", "green"); + } await base.OnAfterRenderAsync(firstRender); } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor index ad6b44f971..8a7b114c90 100644 --- a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor +++ b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor @@ -5,43 +5,41 @@ Fluent UI WC demo page - -
-
- Home - About +
+
+ Home + About +
+
+
+
-
-
- -
-
-
-
-
- - Direction - ltr - rtl - - - Theme - Dark - Light - -
- - - @Body - - -

@ex.Message

- - -
-
-
+
+
+
+
+ + Direction + ltr + rtl + + + Theme + Dark + Light + +
+ + + @Body + + +

@ex.Message

+ + +
+
- +
diff --git a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs index 81b148116d..e8fe170fd1 100644 --- a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs +++ b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs @@ -7,19 +7,23 @@ namespace FluentUI.Demo.Shared { public partial class MainLayout { - [Inject] IJSRuntime? JSRuntime { get; set; } + [Inject] + IJSRuntime? JSRuntime { get; set; } + + [Inject] + DesignTokens? DesignTokens { get; set; } ErrorBoundary? errorBoundary; - FluentDesignSystemProvider fdsp = new(); + LocalizationDirection? dir; - float? baseLayerLuminance; + float baseLayerLuminance=1; public async Task SwitchDirectionAsync() { dir = dir == LocalizationDirection.rtl ? LocalizationDirection.ltr : LocalizationDirection.rtl; await JSRuntime!.InvokeVoidAsync("switchDirection", dir.ToString()); } - + public void SwitchTheme() { baseLayerLuminance = baseLayerLuminance == 0 ? 1 : 0; @@ -29,5 +33,12 @@ protected override void OnParametersSet() { errorBoundary?.Recover(); } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await DesignTokens!.BaseLayerLuminance.SetValueFor(".container", baseLayerLuminance); + await DesignTokens!.Direction.SetValueFor(".container", dir == LocalizationDirection.ltr ? "ltr" : "rtl"); + await base.OnAfterRenderAsync(firstRender); + } } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs new file mode 100644 index 0000000000..d9e0dca2fb --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs @@ -0,0 +1,189 @@ +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI; + +public class DesignTokens +{ + public const string bodyFont = "bodyFont"; + public const string baseHeightMultiplier = "baseHeightMultiplier"; + public const string baseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; + public const string baseLayerLuminance = "baseLayerLuminance"; + public const string controlCornerRadius = "controlCornerRadius"; + public const string density = "density"; + public const string designUnit = "designUnit"; + public const string direction = "direction"; + public const string disabledOpacity = "disabledOpacity"; + public const string strokeWidth = "strokeWidth"; + public const string focusStrokeWidth = "focusStrokeWidth"; + public const string typeRampBaseFontSize = "typeRampBaseFontSize"; + public const string typeRampBaseLineHeight = "typeRampBaseLineHeight"; + public const string typeRampMinus1FontSize = "typeRampMinus1FontSize"; + public const string typeRampMinus1LineHeight = "typeRampMinus1LineHeight"; + public const string typeRampMinus2FontSize = "typeRampMinus2FontSize"; + public const string typeRampMinus2LineHeight = "typeRampMinus2LineHeight"; + public const string typeRampPlus1FontSize = "typeRampPlus1FontSize"; + public const string typeRampPlus1LineHeight = "typeRampPlus1LineHeight"; + public const string typeRampPlus2FontSize = "typeRampPlus2FontSize"; + public const string typeRampPlus2LineHeight = "typeRampPlus2LineHeight"; + public const string typeRampPlus3FontSize = "typeRampPlus3FontSize"; + public const string typeRampPlus3LineHeight = "typeRampPlus3LineHeight"; + public const string typeRampPlus4FontSize = "typeRampPlus4FontSize"; + public const string typeRampPlus4LineHeight = "typeRampPlus4LineHeight"; + public const string typeRampPlus5FontSize = "typeRampPlus5FontSize"; + public const string typeRampPlus5LineHeight = "typeRampPlus5LineHeight"; + public const string typeRampPlus6FontSize = "typeRampPlus6FontSize"; + public const string typeRampPlus6LineHeight = "typeRampPlus6LineHeight"; + public const string accentFillRestDelta = "accentFillRestDelta"; + public const string accentFillHoverDelta = "accentFillHoverDelta"; + public const string accentFillActiveDelta = "accentFillActiveDelta"; + public const string accentFillFocusDelta = "accentFillFocusDelta"; + public const string accentForegroundRestDelta = "accentForegroundRestDelta"; + public const string accentForegroundHoverDelta = "accentForegroundHoverDelta"; + public const string accentForegroundActiveDelta = "accentForegroundActiveDelta"; + public const string accentForegroundFocusDelta = "accentForegroundFocusDelta"; + public const string neutralFillRestDelta = "neutralFillRestDelta"; + public const string neutralFillHoverDelta = "neutralFillHoverDelta"; + public const string neutralFillActiveDelta = "neutralFillActiveDelta"; + public const string neutralFillFocusDelta = "neutralFillFocusDelta"; + public const string neutralFillInputRestDelta = "neutralFillInputRestDelta"; + public const string neutralFillInputHoverDelta = "neutralFillInputHoverDelta"; + public const string neutralFillInputActiveDelta = "neutralFillInputActiveDelta"; + public const string neutralFillInputFocusDelta = "neutralFillInputFocusDelta"; + public const string neutralFillStealthRestDelta = "neutralFillStealthRestDelta"; + public const string neutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; + public const string neutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; + public const string neutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; + public const string neutralFillStrongRestDelta = "neutralFillStrongRestDelta"; + public const string neutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; + public const string neutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; + public const string neutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; + public const string neutralFillLayerRestDelta = "neutralFillLayerRestDelta"; + public const string neutralStrokeRestDelta = "neutralStrokeRestDelta"; + public const string neutralStrokeHoverDelta = "neutralStrokeHoverDelta"; + public const string neutralStrokeActiveDelta = "neutralStrokeActiveDelta"; + public const string neutralStrokeFocusDelta = "neutralStrokeFocusDelta"; + public const string neutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; + + public DesignToken BodyFont { get; set; } + public DesignToken BaseHeightMultiplier { get; set; } + public DesignToken BaseHorizontalSpacingMultiplier { get; set; } + public DesignToken BaseLayerLuminance { get; set; } + public DesignToken ControlCornerRadius { get; set; } + public DesignToken Density { get; set; } + public DesignToken DesignUnit { get; set; } + public DesignToken Direction { get; set; } + public DesignToken DisabledOpacity { get; set; } + public DesignToken StrokeWidth { get; set; } + public DesignToken FocusStrokeWidth { get; set; } + public DesignToken TypeRampBaseFontSize { get; set; } + public DesignToken TypeRampBaseLineHeight { get; set; } + public DesignToken TypeRampMinus1FontSize { get; set; } + public DesignToken TypeRampMinus1LineHeight { get; set; } + public DesignToken TypeRampMinus2FontSize { get; set; } + public DesignToken TypeRampMinus2LineHeight { get; set; } + public DesignToken TypeRampPlus1FontSize { get; set; } + public DesignToken TypeRampPlus1LineHeight { get; set; } + public DesignToken TypeRampPlus2FontSize { get; set; } + public DesignToken TypeRampPlus2LineHeight { get; set; } + public DesignToken TypeRampPlus3FontSize { get; set; } + public DesignToken TypeRampPlus3LineHeight { get; set; } + public DesignToken TypeRampPlus4FontSize { get; set; } + public DesignToken TypeRampPlus4LineHeight { get; set; } + public DesignToken TypeRampPlus5FontSize { get; set; } + public DesignToken TypeRampPlus5LineHeight { get; set; } + public DesignToken TypeRampPlus6FontSize { get; set; } + public DesignToken TypeRampPlus6LineHeight { get; set; } + public DesignToken AccentFillRestDelta { get; set; } + public DesignToken AccentFillHoverDelta { get; set; } + public DesignToken AccentFillActiveDelta { get; set; } + public DesignToken AccentFillFocusDelta { get; set; } + public DesignToken AccentForegroundRestDelta { get; set; } + public DesignToken AccentForegroundHoverDelta { get; set; } + public DesignToken AccentForegroundActiveDelta { get; set; } + public DesignToken AccentForegroundFocusDelta { get; set; } + public DesignToken NeutralFillRestDelta { get; set; } + public DesignToken NeutralFillHoverDelta { get; set; } + public DesignToken NeutralFillActiveDelta { get; set; } + public DesignToken NeutralFillFocusDelta { get; set; } + public DesignToken NeutralFillInputRestDelta { get; set; } + public DesignToken NeutralFillInputHoverDelta { get; set; } + public DesignToken NeutralFillInputActiveDelta { get; set; } + public DesignToken NeutralFillInputFocusDelta { get; set; } + public DesignToken NeutralFillStealthRestDelta { get; set; } + public DesignToken NeutralFillStealthHoverDelta { get; set; } + public DesignToken NeutralFillStealthActiveDelta { get; set; } + public DesignToken NeutralFillStealthFocusDelta { get; set; } + public DesignToken NeutralFillStrongRestDelta { get; set; } + public DesignToken NeutralFillStrongHoverDelta { get; set; } + public DesignToken NeutralFillStrongActiveDelta { get; set; } + public DesignToken NeutralFillStrongFocusDelta { get; set; } + public DesignToken NeutralFillLayerRestDelta { get; set; } + public DesignToken NeutralStrokeRestDelta { get; set; } + public DesignToken NeutralStrokeHoverDelta { get; set; } + public DesignToken NeutralStrokeActiveDelta { get; set; } + public DesignToken NeutralStrokeFocusDelta { get; set; } + public DesignToken NeutralStrokeDividerRestDelta { get; set; } + + public DesignTokens(IJSRuntime runtime) + { + BodyFont = new(runtime, bodyFont); + BaseHeightMultiplier = new(runtime, baseHeightMultiplier); + BaseHorizontalSpacingMultiplier = new(runtime, baseHorizontalSpacingMultiplier); + BaseLayerLuminance = new(runtime, baseLayerLuminance); + ControlCornerRadius = new(runtime, controlCornerRadius); + Density = new(runtime, density); + DesignUnit = new(runtime, designUnit); + Direction = new(runtime, direction); + DisabledOpacity = new(runtime, disabledOpacity); + StrokeWidth = new(runtime, strokeWidth); + FocusStrokeWidth = new(runtime, focusStrokeWidth); + TypeRampBaseFontSize = new(runtime, typeRampBaseFontSize); + TypeRampBaseLineHeight = new(runtime, typeRampBaseLineHeight); + TypeRampMinus1FontSize = new(runtime, typeRampMinus1FontSize); + TypeRampMinus1LineHeight = new(runtime, typeRampMinus1LineHeight); + TypeRampMinus2FontSize = new(runtime, typeRampMinus2FontSize); + TypeRampMinus2LineHeight = new(runtime, typeRampMinus2LineHeight); + TypeRampPlus1FontSize = new(runtime, typeRampPlus1FontSize); + TypeRampPlus1LineHeight = new(runtime, typeRampPlus1LineHeight); + TypeRampPlus2FontSize = new(runtime, typeRampPlus2FontSize); + TypeRampPlus2LineHeight = new(runtime, typeRampPlus2LineHeight); + TypeRampPlus3FontSize = new(runtime, typeRampPlus3FontSize); + TypeRampPlus3LineHeight = new(runtime, typeRampPlus3LineHeight); + TypeRampPlus4FontSize = new(runtime, typeRampPlus4FontSize); + TypeRampPlus4LineHeight = new(runtime, typeRampPlus4LineHeight); + TypeRampPlus5FontSize = new(runtime, typeRampPlus5FontSize); + TypeRampPlus5LineHeight = new(runtime, typeRampPlus5LineHeight); + TypeRampPlus6FontSize = new(runtime, typeRampPlus6FontSize); + TypeRampPlus6LineHeight = new(runtime, typeRampPlus6LineHeight); + AccentFillRestDelta = new(runtime, accentFillRestDelta); + AccentFillHoverDelta = new(runtime, accentFillHoverDelta); + AccentFillActiveDelta = new(runtime, accentFillActiveDelta); + AccentFillFocusDelta = new(runtime, accentFillFocusDelta); + AccentForegroundRestDelta = new(runtime, accentForegroundRestDelta); + AccentForegroundHoverDelta = new(runtime, accentForegroundHoverDelta); + AccentForegroundActiveDelta = new(runtime, accentForegroundActiveDelta); + AccentForegroundFocusDelta = new(runtime, accentForegroundFocusDelta); + NeutralFillRestDelta = new(runtime, neutralFillRestDelta); + NeutralFillHoverDelta = new(runtime, neutralFillHoverDelta); + NeutralFillActiveDelta = new(runtime, neutralFillActiveDelta); + NeutralFillFocusDelta = new(runtime, neutralFillFocusDelta); + NeutralFillInputRestDelta = new(runtime, neutralFillInputRestDelta); + NeutralFillInputHoverDelta = new(runtime, neutralFillInputHoverDelta); + NeutralFillInputActiveDelta = new(runtime, neutralFillInputActiveDelta); + NeutralFillInputFocusDelta = new(runtime, neutralFillInputFocusDelta); + NeutralFillStealthRestDelta = new(runtime, neutralFillStealthRestDelta); + NeutralFillStealthHoverDelta = new(runtime, neutralFillStealthHoverDelta); + NeutralFillStealthActiveDelta = new(runtime, neutralFillStealthActiveDelta); + NeutralFillStealthFocusDelta = new(runtime, neutralFillStealthFocusDelta); + NeutralFillStrongRestDelta = new(runtime, neutralFillStrongRestDelta); + NeutralFillStrongHoverDelta = new(runtime, neutralFillStrongHoverDelta); + NeutralFillStrongActiveDelta = new(runtime, neutralFillStrongActiveDelta); + NeutralFillStrongFocusDelta = new(runtime, neutralFillStrongFocusDelta); + NeutralFillLayerRestDelta = new(runtime, neutralFillLayerRestDelta); + NeutralStrokeRestDelta = new(runtime, neutralStrokeRestDelta); + NeutralStrokeHoverDelta = new(runtime, neutralStrokeHoverDelta); + NeutralStrokeActiveDelta = new(runtime, neutralStrokeActiveDelta); + NeutralStrokeFocusDelta = new(runtime, neutralStrokeFocusDelta); + NeutralStrokeDividerRestDelta = new(runtime, neutralStrokeDividerRestDelta); + } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs new file mode 100644 index 0000000000..f30d46d2b3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -0,0 +1,17 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Runtime.CompilerServices; +using System.Text; +using System.Threading.Tasks; +using Microsoft.Extensions.DependencyInjection; + +namespace Microsoft.Fast.Components.FluentUI; + +public static class ServiceCollectionExtensions +{ + public static void AddFluentUIComponents(this IServiceCollection services) + { + services.AddScoped(); + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs deleted file mode 100644 index 939ccdea3b..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/StandardDesignTokens.cs +++ /dev/null @@ -1,65 +0,0 @@ -namespace Microsoft.Fast.Components.FluentUI -{ - public static class StandardDesignTokens - { - public const string BodyFont = "bodyFont"; - public const string BaseHeightMultiplier = "baseHeightMultiplier"; - public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; - public const string BaseLayerLuminance = "baseLayerLuminance"; - public const string ControlCornerRadius = "controlCornerRadius"; - public const string Density = "density"; - public const string DesignUnit = "designUnit"; - public const string Direction = "direction"; - public const string DisabledOpacity = "disabledOpacity"; - public const string StrokeWidth = "strokeWidth"; - public const string FocusStrokeWidth = "focusStrokeWidth"; - public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; - public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; - public const string TypeRampMinus1FontSize = "typeRampMinus1FontSize"; - public const string TypeRampMinus1LineHeight = "typeRampMinus1LineHeight"; - public const string TypeRampMinus2FontSize = "typeRampMinus2FontSize"; - public const string TypeRampMinus2LineHeight = "typeRampMinus2LineHeight"; - public const string TypeRampPlus1FontSize = "typeRampPlus1FontSize"; - public const string TypeRampPlus1LineHeight = "typeRampPlus1LineHeight"; - public const string TypeRampPlus2FontSize = "typeRampPlus2FontSize"; - public const string TypeRampPlus2LineHeight = "typeRampPlus2LineHeight"; - public const string TypeRampPlus3FontSize = "typeRampPlus3FontSize"; - public const string TypeRampPlus3LineHeight = "typeRampPlus3LineHeight"; - public const string TypeRampPlus4FontSize = "typeRampPlus4FontSize"; - public const string TypeRampPlus4LineHeight = "typeRampPlus4LineHeight"; - public const string TypeRampPlus5FontSize = "typeRampPlus5FontSize"; - public const string TypeRampPlus5LineHeight = "typeRampPlus5LineHeight"; - public const string TypeRampPlus6FontSize = "typeRampPlus6FontSize"; - public const string TypeRampPlus6LineHeight = "typeRampPlus6LineHeight"; - public const string AccentFillRestDelta = "accentFillRestDelta"; - public const string AccentFillHoverDelta = "accentFillHoverDelta"; - public const string AccentFillActiveDelta = "accentFillActiveDelta"; - public const string AccentFillFocusDelta = "accentFillFocusDelta"; - public const string AccentForegroundRestDelta = "accentForegroundRestDelta"; - public const string AccentForegroundHoverDelta = "accentForegroundHoverDelta"; - public const string AccentForegroundActiveDelta = "accentForegroundActiveDelta"; - public const string AccentForegroundFocusDelta = "accentForegroundFocusDelta"; - public const string NeutralFillRestDelta = "neutralFillRestDelta"; - public const string NeutralFillHoverDelta = "neutralFillHoverDelta"; - public const string NeutralFillActiveDelta = "neutralFillActiveDelta"; - public const string NeutralFillFocusDelta = "neutralFillFocusDelta"; - public const string NeutralFillInputRestDelta = "neutralFillInputRestDelta"; - public const string NeutralFillInputHoverDelta = "neutralFillInputHoverDelta"; - public const string NeutralFillInputActiveDelta = "neutralFillInputActiveDelta"; - public const string NeutralFillInputFocusDelta = "neutralFillInputFocusDelta"; - public const string NeutralFillStealthRestDelta = "neutralFillStealthRestDelta"; - public const string NeutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; - public const string NeutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; - public const string NeutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; - public const string NeutralFillStrongRestDelta = "neutralFillStrongRestDelta"; - public const string NeutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; - public const string NeutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; - public const string NeutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; - public const string NeutralFillLayerRestDelta = "neutralFillLayerRestDelta"; - public const string NeutralStrokeRestDelta = "neutralStrokeRestDelta"; - public const string NeutralStrokeHoverDelta = "neutralStrokeHoverDelta"; - public const string NeutralStrokeActiveDelta = "neutralStrokeActiveDelta"; - public const string NeutralStrokeFocusDelta = "neutralStrokeFocusDelta"; - public const string NeutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; - } -} From ac8669b7bb9e7818a2919c3435fea921892adfd5 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 10 Dec 2021 17:43:03 +0100 Subject: [PATCH 14/34] Some refinements --- .../DesignToken.cs | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs index 91db68280a..a0bc4fda46 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs @@ -6,8 +6,7 @@ namespace Microsoft.Fast.Components.FluentUI { public class DesignToken : IAsyncDisposable { - private readonly Lazy>? moduleTask; - private IJSObjectReference? module; + private readonly Lazy> moduleTask; [Parameter] public T? Value { get; set; } @@ -34,7 +33,7 @@ public DesignToken(IJSRuntime jsRuntime, string name) : this(jsRuntime) public DesignToken WithDefault(T value) { - this.DefaultValue = value; + DefaultValue = value; return this; } @@ -43,14 +42,14 @@ public async ValueTask SetValueFor(string selector) if (DefaultValue == null) throw new ArgumentNullException(nameof(DefaultValue), $"{nameof(DefaultValue)} should be set before calling SetValueFor"); - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; await module.InvokeVoidAsync("setValueForSelector", Name, selector, DefaultValue); } public async ValueTask SetValueFor(string selector, T value) { - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; await module.InvokeVoidAsync("setValueForSelector", Name, selector, value); } @@ -60,39 +59,39 @@ public async ValueTask SetValueFor(ElementReference element) if (DefaultValue == null) throw new ArgumentNullException(nameof(DefaultValue), $"{nameof(DefaultValue)} should be set before calling SetValueFor"); - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; await module.InvokeVoidAsync("setValueFor", Name, element, DefaultValue); } public async ValueTask SetValueFor(ElementReference element, T value) { - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; await module.InvokeVoidAsync("setValueFor", Name, element, value); } public async ValueTask DeleteValueFor(string selector) { - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; await module.InvokeVoidAsync("deleteValueForSelector", Name, selector); } public async ValueTask DeleteValueFor(ElementReference element) { - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; await module.InvokeVoidAsync("deleteValueFor", Name, element); } public async ValueTask GetValueFor(string selector) { - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; return await module.InvokeAsync("getValueForSelector", Name, selector); } public async ValueTask GetValueFor(ElementReference element) { - module = await moduleTask!.Value; + IJSObjectReference module = await moduleTask.Value; return await module.InvokeAsync("getValueFor", Name, element); } @@ -100,8 +99,9 @@ public async ValueTask GetValueFor(ElementReference element) [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "")] public async ValueTask DisposeAsync() { - if (module is not null) + if (moduleTask.IsValueCreated) { + IJSObjectReference module = await moduleTask.Value; await module.DisposeAsync(); } From 034e7fbd69ea032919ead09e154e0db3ae1da4c5 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 3 Jan 2022 15:26:20 +0100 Subject: [PATCH 15/34] Split out design token names to separate class --- .../DesignTokenNames.cs | 64 +++++++ .../DesignTokens.cs | 178 ++++++------------ 2 files changed, 123 insertions(+), 119 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs new file mode 100644 index 0000000000..e905254968 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs @@ -0,0 +1,64 @@ +namespace Microsoft.Fast.Components.FluentUI; + +public class DesignTokenNames +{ + public const string bodyFont = "bodyFont"; + public const string baseHeightMultiplier = "baseHeightMultiplier"; + public const string baseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; + public const string baseLayerLuminance = "baseLayerLuminance"; + public const string controlCornerRadius = "controlCornerRadius"; + public const string density = "density"; + public const string designUnit = "designUnit"; + public const string direction = "direction"; + public const string disabledOpacity = "disabledOpacity"; + public const string strokeWidth = "strokeWidth"; + public const string focusStrokeWidth = "focusStrokeWidth"; + public const string typeRampBaseFontSize = "typeRampBaseFontSize"; + public const string typeRampBaseLineHeight = "typeRampBaseLineHeight"; + public const string typeRampMinus1FontSize = "typeRampMinus1FontSize"; + public const string typeRampMinus1LineHeight = "typeRampMinus1LineHeight"; + public const string typeRampMinus2FontSize = "typeRampMinus2FontSize"; + public const string typeRampMinus2LineHeight = "typeRampMinus2LineHeight"; + public const string typeRampPlus1FontSize = "typeRampPlus1FontSize"; + public const string typeRampPlus1LineHeight = "typeRampPlus1LineHeight"; + public const string typeRampPlus2FontSize = "typeRampPlus2FontSize"; + public const string typeRampPlus2LineHeight = "typeRampPlus2LineHeight"; + public const string typeRampPlus3FontSize = "typeRampPlus3FontSize"; + public const string typeRampPlus3LineHeight = "typeRampPlus3LineHeight"; + public const string typeRampPlus4FontSize = "typeRampPlus4FontSize"; + public const string typeRampPlus4LineHeight = "typeRampPlus4LineHeight"; + public const string typeRampPlus5FontSize = "typeRampPlus5FontSize"; + public const string typeRampPlus5LineHeight = "typeRampPlus5LineHeight"; + public const string typeRampPlus6FontSize = "typeRampPlus6FontSize"; + public const string typeRampPlus6LineHeight = "typeRampPlus6LineHeight"; + public const string accentFillRestDelta = "accentFillRestDelta"; + public const string accentFillHoverDelta = "accentFillHoverDelta"; + public const string accentFillActiveDelta = "accentFillActiveDelta"; + public const string accentFillFocusDelta = "accentFillFocusDelta"; + public const string accentForegroundRestDelta = "accentForegroundRestDelta"; + public const string accentForegroundHoverDelta = "accentForegroundHoverDelta"; + public const string accentForegroundActiveDelta = "accentForegroundActiveDelta"; + public const string accentForegroundFocusDelta = "accentForegroundFocusDelta"; + public const string neutralFillRestDelta = "neutralFillRestDelta"; + public const string neutralFillHoverDelta = "neutralFillHoverDelta"; + public const string neutralFillActiveDelta = "neutralFillActiveDelta"; + public const string neutralFillFocusDelta = "neutralFillFocusDelta"; + public const string neutralFillInputRestDelta = "neutralFillInputRestDelta"; + public const string neutralFillInputHoverDelta = "neutralFillInputHoverDelta"; + public const string neutralFillInputActiveDelta = "neutralFillInputActiveDelta"; + public const string neutralFillInputFocusDelta = "neutralFillInputFocusDelta"; + public const string neutralFillStealthRestDelta = "neutralFillStealthRestDelta"; + public const string neutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; + public const string neutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; + public const string neutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; + public const string neutralFillStrongRestDelta = "neutralFillStrongRestDelta"; + public const string neutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; + public const string neutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; + public const string neutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; + public const string neutralFillLayerRestDelta = "neutralFillLayerRestDelta"; + public const string neutralStrokeRestDelta = "neutralStrokeRestDelta"; + public const string neutralStrokeHoverDelta = "neutralStrokeHoverDelta"; + public const string neutralStrokeActiveDelta = "neutralStrokeActiveDelta"; + public const string neutralStrokeFocusDelta = "neutralStrokeFocusDelta"; + public const string neutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs index d9e0dca2fb..7ce97744be 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs @@ -4,66 +4,6 @@ namespace Microsoft.Fast.Components.FluentUI; public class DesignTokens { - public const string bodyFont = "bodyFont"; - public const string baseHeightMultiplier = "baseHeightMultiplier"; - public const string baseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; - public const string baseLayerLuminance = "baseLayerLuminance"; - public const string controlCornerRadius = "controlCornerRadius"; - public const string density = "density"; - public const string designUnit = "designUnit"; - public const string direction = "direction"; - public const string disabledOpacity = "disabledOpacity"; - public const string strokeWidth = "strokeWidth"; - public const string focusStrokeWidth = "focusStrokeWidth"; - public const string typeRampBaseFontSize = "typeRampBaseFontSize"; - public const string typeRampBaseLineHeight = "typeRampBaseLineHeight"; - public const string typeRampMinus1FontSize = "typeRampMinus1FontSize"; - public const string typeRampMinus1LineHeight = "typeRampMinus1LineHeight"; - public const string typeRampMinus2FontSize = "typeRampMinus2FontSize"; - public const string typeRampMinus2LineHeight = "typeRampMinus2LineHeight"; - public const string typeRampPlus1FontSize = "typeRampPlus1FontSize"; - public const string typeRampPlus1LineHeight = "typeRampPlus1LineHeight"; - public const string typeRampPlus2FontSize = "typeRampPlus2FontSize"; - public const string typeRampPlus2LineHeight = "typeRampPlus2LineHeight"; - public const string typeRampPlus3FontSize = "typeRampPlus3FontSize"; - public const string typeRampPlus3LineHeight = "typeRampPlus3LineHeight"; - public const string typeRampPlus4FontSize = "typeRampPlus4FontSize"; - public const string typeRampPlus4LineHeight = "typeRampPlus4LineHeight"; - public const string typeRampPlus5FontSize = "typeRampPlus5FontSize"; - public const string typeRampPlus5LineHeight = "typeRampPlus5LineHeight"; - public const string typeRampPlus6FontSize = "typeRampPlus6FontSize"; - public const string typeRampPlus6LineHeight = "typeRampPlus6LineHeight"; - public const string accentFillRestDelta = "accentFillRestDelta"; - public const string accentFillHoverDelta = "accentFillHoverDelta"; - public const string accentFillActiveDelta = "accentFillActiveDelta"; - public const string accentFillFocusDelta = "accentFillFocusDelta"; - public const string accentForegroundRestDelta = "accentForegroundRestDelta"; - public const string accentForegroundHoverDelta = "accentForegroundHoverDelta"; - public const string accentForegroundActiveDelta = "accentForegroundActiveDelta"; - public const string accentForegroundFocusDelta = "accentForegroundFocusDelta"; - public const string neutralFillRestDelta = "neutralFillRestDelta"; - public const string neutralFillHoverDelta = "neutralFillHoverDelta"; - public const string neutralFillActiveDelta = "neutralFillActiveDelta"; - public const string neutralFillFocusDelta = "neutralFillFocusDelta"; - public const string neutralFillInputRestDelta = "neutralFillInputRestDelta"; - public const string neutralFillInputHoverDelta = "neutralFillInputHoverDelta"; - public const string neutralFillInputActiveDelta = "neutralFillInputActiveDelta"; - public const string neutralFillInputFocusDelta = "neutralFillInputFocusDelta"; - public const string neutralFillStealthRestDelta = "neutralFillStealthRestDelta"; - public const string neutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; - public const string neutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; - public const string neutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; - public const string neutralFillStrongRestDelta = "neutralFillStrongRestDelta"; - public const string neutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; - public const string neutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; - public const string neutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; - public const string neutralFillLayerRestDelta = "neutralFillLayerRestDelta"; - public const string neutralStrokeRestDelta = "neutralStrokeRestDelta"; - public const string neutralStrokeHoverDelta = "neutralStrokeHoverDelta"; - public const string neutralStrokeActiveDelta = "neutralStrokeActiveDelta"; - public const string neutralStrokeFocusDelta = "neutralStrokeFocusDelta"; - public const string neutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; - public DesignToken BodyFont { get; set; } public DesignToken BaseHeightMultiplier { get; set; } public DesignToken BaseHorizontalSpacingMultiplier { get; set; } @@ -126,64 +66,64 @@ public class DesignTokens public DesignTokens(IJSRuntime runtime) { - BodyFont = new(runtime, bodyFont); - BaseHeightMultiplier = new(runtime, baseHeightMultiplier); - BaseHorizontalSpacingMultiplier = new(runtime, baseHorizontalSpacingMultiplier); - BaseLayerLuminance = new(runtime, baseLayerLuminance); - ControlCornerRadius = new(runtime, controlCornerRadius); - Density = new(runtime, density); - DesignUnit = new(runtime, designUnit); - Direction = new(runtime, direction); - DisabledOpacity = new(runtime, disabledOpacity); - StrokeWidth = new(runtime, strokeWidth); - FocusStrokeWidth = new(runtime, focusStrokeWidth); - TypeRampBaseFontSize = new(runtime, typeRampBaseFontSize); - TypeRampBaseLineHeight = new(runtime, typeRampBaseLineHeight); - TypeRampMinus1FontSize = new(runtime, typeRampMinus1FontSize); - TypeRampMinus1LineHeight = new(runtime, typeRampMinus1LineHeight); - TypeRampMinus2FontSize = new(runtime, typeRampMinus2FontSize); - TypeRampMinus2LineHeight = new(runtime, typeRampMinus2LineHeight); - TypeRampPlus1FontSize = new(runtime, typeRampPlus1FontSize); - TypeRampPlus1LineHeight = new(runtime, typeRampPlus1LineHeight); - TypeRampPlus2FontSize = new(runtime, typeRampPlus2FontSize); - TypeRampPlus2LineHeight = new(runtime, typeRampPlus2LineHeight); - TypeRampPlus3FontSize = new(runtime, typeRampPlus3FontSize); - TypeRampPlus3LineHeight = new(runtime, typeRampPlus3LineHeight); - TypeRampPlus4FontSize = new(runtime, typeRampPlus4FontSize); - TypeRampPlus4LineHeight = new(runtime, typeRampPlus4LineHeight); - TypeRampPlus5FontSize = new(runtime, typeRampPlus5FontSize); - TypeRampPlus5LineHeight = new(runtime, typeRampPlus5LineHeight); - TypeRampPlus6FontSize = new(runtime, typeRampPlus6FontSize); - TypeRampPlus6LineHeight = new(runtime, typeRampPlus6LineHeight); - AccentFillRestDelta = new(runtime, accentFillRestDelta); - AccentFillHoverDelta = new(runtime, accentFillHoverDelta); - AccentFillActiveDelta = new(runtime, accentFillActiveDelta); - AccentFillFocusDelta = new(runtime, accentFillFocusDelta); - AccentForegroundRestDelta = new(runtime, accentForegroundRestDelta); - AccentForegroundHoverDelta = new(runtime, accentForegroundHoverDelta); - AccentForegroundActiveDelta = new(runtime, accentForegroundActiveDelta); - AccentForegroundFocusDelta = new(runtime, accentForegroundFocusDelta); - NeutralFillRestDelta = new(runtime, neutralFillRestDelta); - NeutralFillHoverDelta = new(runtime, neutralFillHoverDelta); - NeutralFillActiveDelta = new(runtime, neutralFillActiveDelta); - NeutralFillFocusDelta = new(runtime, neutralFillFocusDelta); - NeutralFillInputRestDelta = new(runtime, neutralFillInputRestDelta); - NeutralFillInputHoverDelta = new(runtime, neutralFillInputHoverDelta); - NeutralFillInputActiveDelta = new(runtime, neutralFillInputActiveDelta); - NeutralFillInputFocusDelta = new(runtime, neutralFillInputFocusDelta); - NeutralFillStealthRestDelta = new(runtime, neutralFillStealthRestDelta); - NeutralFillStealthHoverDelta = new(runtime, neutralFillStealthHoverDelta); - NeutralFillStealthActiveDelta = new(runtime, neutralFillStealthActiveDelta); - NeutralFillStealthFocusDelta = new(runtime, neutralFillStealthFocusDelta); - NeutralFillStrongRestDelta = new(runtime, neutralFillStrongRestDelta); - NeutralFillStrongHoverDelta = new(runtime, neutralFillStrongHoverDelta); - NeutralFillStrongActiveDelta = new(runtime, neutralFillStrongActiveDelta); - NeutralFillStrongFocusDelta = new(runtime, neutralFillStrongFocusDelta); - NeutralFillLayerRestDelta = new(runtime, neutralFillLayerRestDelta); - NeutralStrokeRestDelta = new(runtime, neutralStrokeRestDelta); - NeutralStrokeHoverDelta = new(runtime, neutralStrokeHoverDelta); - NeutralStrokeActiveDelta = new(runtime, neutralStrokeActiveDelta); - NeutralStrokeFocusDelta = new(runtime, neutralStrokeFocusDelta); - NeutralStrokeDividerRestDelta = new(runtime, neutralStrokeDividerRestDelta); + BodyFont = new(runtime, DesignTokenNames.bodyFont); + BaseHeightMultiplier = new(runtime, DesignTokenNames.baseHeightMultiplier); + BaseHorizontalSpacingMultiplier = new(runtime, DesignTokenNames.baseHorizontalSpacingMultiplier); + BaseLayerLuminance = new(runtime, DesignTokenNames.baseLayerLuminance); + ControlCornerRadius = new(runtime, DesignTokenNames.controlCornerRadius); + Density = new(runtime, DesignTokenNames.density); + DesignUnit = new(runtime, DesignTokenNames.designUnit); + Direction = new(runtime, DesignTokenNames.direction); + DisabledOpacity = new(runtime, DesignTokenNames.disabledOpacity); + StrokeWidth = new(runtime, DesignTokenNames.strokeWidth); + FocusStrokeWidth = new(runtime, DesignTokenNames.focusStrokeWidth); + TypeRampBaseFontSize = new(runtime, DesignTokenNames.typeRampBaseFontSize); + TypeRampBaseLineHeight = new(runtime, DesignTokenNames.typeRampBaseLineHeight); + TypeRampMinus1FontSize = new(runtime, DesignTokenNames.typeRampMinus1FontSize); + TypeRampMinus1LineHeight = new(runtime, DesignTokenNames.typeRampMinus1LineHeight); + TypeRampMinus2FontSize = new(runtime, DesignTokenNames.typeRampMinus2FontSize); + TypeRampMinus2LineHeight = new(runtime, DesignTokenNames.typeRampMinus2LineHeight); + TypeRampPlus1FontSize = new(runtime, DesignTokenNames.typeRampPlus1FontSize); + TypeRampPlus1LineHeight = new(runtime, DesignTokenNames.typeRampPlus1LineHeight); + TypeRampPlus2FontSize = new(runtime, DesignTokenNames.typeRampPlus2FontSize); + TypeRampPlus2LineHeight = new(runtime, DesignTokenNames.typeRampPlus2LineHeight); + TypeRampPlus3FontSize = new(runtime, DesignTokenNames.typeRampPlus3FontSize); + TypeRampPlus3LineHeight = new(runtime, DesignTokenNames.typeRampPlus3LineHeight); + TypeRampPlus4FontSize = new(runtime, DesignTokenNames.typeRampPlus4FontSize); + TypeRampPlus4LineHeight = new(runtime, DesignTokenNames.typeRampPlus4LineHeight); + TypeRampPlus5FontSize = new(runtime, DesignTokenNames.typeRampPlus5FontSize); + TypeRampPlus5LineHeight = new(runtime, DesignTokenNames.typeRampPlus5LineHeight); + TypeRampPlus6FontSize = new(runtime, DesignTokenNames.typeRampPlus6FontSize); + TypeRampPlus6LineHeight = new(runtime, DesignTokenNames.typeRampPlus6LineHeight); + AccentFillRestDelta = new(runtime, DesignTokenNames.accentFillRestDelta); + AccentFillHoverDelta = new(runtime, DesignTokenNames.accentFillHoverDelta); + AccentFillActiveDelta = new(runtime, DesignTokenNames.accentFillActiveDelta); + AccentFillFocusDelta = new(runtime, DesignTokenNames.accentFillFocusDelta); + AccentForegroundRestDelta = new(runtime, DesignTokenNames.accentForegroundRestDelta); + AccentForegroundHoverDelta = new(runtime, DesignTokenNames.accentForegroundHoverDelta); + AccentForegroundActiveDelta = new(runtime, DesignTokenNames.accentForegroundActiveDelta); + AccentForegroundFocusDelta = new(runtime, DesignTokenNames.accentForegroundFocusDelta); + NeutralFillRestDelta = new(runtime, DesignTokenNames.neutralFillRestDelta); + NeutralFillHoverDelta = new(runtime, DesignTokenNames.neutralFillHoverDelta); + NeutralFillActiveDelta = new(runtime, DesignTokenNames.neutralFillActiveDelta); + NeutralFillFocusDelta = new(runtime, DesignTokenNames.neutralFillFocusDelta); + NeutralFillInputRestDelta = new(runtime, DesignTokenNames.neutralFillInputRestDelta); + NeutralFillInputHoverDelta = new(runtime, DesignTokenNames.neutralFillInputHoverDelta); + NeutralFillInputActiveDelta = new(runtime, DesignTokenNames.neutralFillInputActiveDelta); + NeutralFillInputFocusDelta = new(runtime, DesignTokenNames.neutralFillInputFocusDelta); + NeutralFillStealthRestDelta = new(runtime, DesignTokenNames.neutralFillStealthRestDelta); + NeutralFillStealthHoverDelta = new(runtime, DesignTokenNames.neutralFillStealthHoverDelta); + NeutralFillStealthActiveDelta = new(runtime, DesignTokenNames.neutralFillStealthActiveDelta); + NeutralFillStealthFocusDelta = new(runtime, DesignTokenNames.neutralFillStealthFocusDelta); + NeutralFillStrongRestDelta = new(runtime, DesignTokenNames.neutralFillStrongRestDelta); + NeutralFillStrongHoverDelta = new(runtime, DesignTokenNames.neutralFillStrongHoverDelta); + NeutralFillStrongActiveDelta = new(runtime, DesignTokenNames.neutralFillStrongActiveDelta); + NeutralFillStrongFocusDelta = new(runtime, DesignTokenNames.neutralFillStrongFocusDelta); + NeutralFillLayerRestDelta = new(runtime, DesignTokenNames.neutralFillLayerRestDelta); + NeutralStrokeRestDelta = new(runtime, DesignTokenNames.neutralStrokeRestDelta); + NeutralStrokeHoverDelta = new(runtime, DesignTokenNames.neutralStrokeHoverDelta); + NeutralStrokeActiveDelta = new(runtime, DesignTokenNames.neutralStrokeActiveDelta); + NeutralStrokeFocusDelta = new(runtime, DesignTokenNames.neutralStrokeFocusDelta); + NeutralStrokeDividerRestDelta = new(runtime, DesignTokenNames.neutralStrokeDividerRestDelta); } } \ No newline at end of file From 564c1cbe0f255834f7162ec6a94f17e6a794e308 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 12 Apr 2022 15:17:36 +0200 Subject: [PATCH 16/34] Merge main --- .../Components/FluentCombobox.razor.cs | 9 +++++---- .../Components/FluentListbox.razor.cs | 11 ++++------- .../Components/FluentNumberField.razor.cs | 9 +++++---- .../Components/FluentOption.razor.cs | 2 ++ .../Components/FluentSelect.razor.cs | 3 +++ .../Microsoft.Fast.Components.FluentUI.csproj | 4 ++-- 6 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor.cs index 64c657ff6c..8f42aa762f 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCombobox.razor.cs @@ -1,3 +1,6 @@ +using System.Diagnostics.CodeAnalysis; +using Microsoft.AspNetCore.Components; + namespace Microsoft.Fast.Components.FluentUI; public partial class FluentCombobox : FluentInputBase @@ -26,11 +29,9 @@ public partial class FluentCombobox : FluentInputBase [Parameter] public Position? Position { get; set; } - /// - /// Gets or sets the child content to be rendering inside the . - /// [Parameter] - public RenderFragment? ChildContent { get; set; } + public IEnumerable>? Items { get; set; } + [CascadingParameter] private FluentOptionContext? CascadedContext { get; set; } diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs index 49a10e2c0f..f0a1057775 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentListbox.razor.cs @@ -1,6 +1,9 @@ +using System.Diagnostics.CodeAnalysis; +using Microsoft.AspNetCore.Components; + namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentListbox +public partial class FluentListbox : FluentInputBase { private readonly string _defaultSelectName = Guid.NewGuid().ToString("N"); private FluentOptionContext? _context; @@ -11,12 +14,6 @@ public partial class FluentListbox [Parameter] public string? Name { get; set; } - /// - /// Gets or sets the child content to be rendering inside the . - /// - [Parameter] - public RenderFragment? ChildContent { get; set; } - [Parameter] public IEnumerable>? Items { get; set; } diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor.cs index 6012798ba1..ac8bfb1fde 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor.cs @@ -1,3 +1,8 @@ +using System.Diagnostics.CodeAnalysis; +using System.Globalization; +using System.Reflection; +using Microsoft.AspNetCore.Components; + namespace Microsoft.Fast.Components.FluentUI; public partial class FluentNumberField : FluentInputBase @@ -50,10 +55,6 @@ public partial class FluentNumberField : FluentInputBase [Parameter] public string ParsingErrorMessage { get; set; } = "The {0} field must be a number."; - - [Parameter] - public RenderFragment? ChildContent { get; set; } - /// /// Gets or sets the minimum value /// diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor.cs index f1444733a0..3848b11285 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentOption.razor.cs @@ -1,3 +1,5 @@ +using Microsoft.AspNetCore.Components; + namespace Microsoft.Fast.Components.FluentUI; public partial class FluentOption : FluentComponentBase diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs index c829eab884..00dc310de7 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSelect.razor.cs @@ -1,3 +1,6 @@ +using System.Diagnostics.CodeAnalysis; +using Microsoft.AspNetCore.Components; + namespace Microsoft.Fast.Components.FluentUI; public partial class FluentSelect : FluentInputBase diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index 5832833d17..7880e70f70 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -14,8 +14,8 @@ Microsoft Fluent UI Components Library for Blazor on FAST Authored by the Microsoft FAST team. true - 1.2.1 - 1.2.1 + 1.4.0 + 1.4.0 false enable enable From 27296b416cc2b76b18c03cf766581a4bc6ea8033 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 14 Apr 2022 17:37:20 +0200 Subject: [PATCH 17/34] Make it work without extra interop calls! --- .../FluentUI.Demo.Client/wwwroot/css/site.css | 2 + .../FluentUI.Demo.Server/wwwroot/css/site.css | 2 + .../FluentUI.Demo.Shared/Pages/Index.razor | 13 +- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 47 +++++-- .../Shared/MainLayout.razor | 6 +- .../Shared/MainLayout.razor.cs | 25 ++-- .../DesignToken.cs | 110 --------------- .../DesignTokenNames.cs | 64 --------- .../DesignTokens.cs | 129 ------------------ .../DesignTokens/Constant.cs | 64 +++++++++ .../DesignTokens/DesignToken.cs | 117 ++++++++++++++++ .../DesignTokens/DesignTokens.cs | 129 ++++++++++++++++++ .../ServiceCollectionExtensions.cs | 10 +- .../wwwroot/DesignTokenInterop.js | 123 ----------------- 14 files changed, 379 insertions(+), 462 deletions(-) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignToken.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js diff --git a/examples/FluentUI.Demo.Client/wwwroot/css/site.css b/examples/FluentUI.Demo.Client/wwwroot/css/site.css index 536db00dcc..76b02a3643 100644 --- a/examples/FluentUI.Demo.Client/wwwroot/css/site.css +++ b/examples/FluentUI.Demo.Client/wwwroot/css/site.css @@ -77,6 +77,7 @@ background-color: var(--fill-color); color: var(--neutral-foreground-rest); padding-inline-start: calc(var(--design-unit) * 6px); + padding-inline-end: calc(var(--design-unit) * 6px); } @@ -90,6 +91,7 @@ position: fixed; width: 100%; z-index: 1000; + margin: 20px 0; } #blazor-error-ui .dismiss { diff --git a/examples/FluentUI.Demo.Server/wwwroot/css/site.css b/examples/FluentUI.Demo.Server/wwwroot/css/site.css index c1118c60f1..b657c6b40f 100644 --- a/examples/FluentUI.Demo.Server/wwwroot/css/site.css +++ b/examples/FluentUI.Demo.Server/wwwroot/css/site.css @@ -76,6 +76,7 @@ background-color: var(--fill-color); color: var(--neutral-foreground-rest); padding-inline-start: calc(var(--design-unit) * 6px); + padding-inline-end: calc(var(--design-unit) * 6px); } @@ -89,6 +90,7 @@ position: fixed; width: 100%; z-index: 1000; + margin: 20px 0; } #blazor-error-ui .dismiss { diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 9ed3f0501d..4de19ab5d8 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -1,10 +1,15 @@ @page "/" - FluentUI WC home page

Blazor Fluent UI Web Components home page!

-Web components handlers -Web components bindings -Blazor component bindings \ No newline at end of file +Web components handlers +Web components bindings +Blazor component bindings +FluentButton + +

+The value before calling Delete: @theValueBeforeDelete +The value after calling Delete: @theValueAfterDelete +

\ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index dff0d9b454..da70df5fdc 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -1,5 +1,6 @@ using Microsoft.AspNetCore.Components; using Microsoft.Fast.Components.FluentUI; +using Microsoft.Fast.Components.FluentUI.DesignTokens; using Microsoft.JSInterop; namespace FluentUI.Demo.Shared.Pages; @@ -10,28 +11,48 @@ public partial class Index private DesignTokens? DesignTokens { get; set; } [Inject] - private IJSRuntime? JSRuntime { get; set; } + private IJSRuntime? jsRuntime { get; set; } - private FluentAnchor anchorRef = default!; + private FluentAnchor ref1 = default!; + private FluentAnchor ref2 = default!; + private FluentAnchor ref3 = default!; + private FluentButton ref4 = default!; + + private int? theValueBeforeDelete; + private int? theValueAfterDelete; protected override async Task OnAfterRenderAsync(bool firstRender) { - if (DesignTokens is not null) + if (firstRender && DesignTokens is not null) { - await DesignTokens.BaseHeightMultiplier.SetValueFor("#secondanchor", 52); - await DesignTokens.BaseLayerLuminance.SetValueFor(".bigbutton", 0); + await DesignTokens.BaseLayerLuminance.SetValueFor(ref1.Element, 0); + + //Enabling this line below will generate an error because no default is set + //await DesignTokens.BaseHeightMultiplier.SetValueFor(ref2.Element); + + await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); - await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(anchorRef.Element); - //int x = await DesignTokens.BaseHeightMultiplier.GetValueFor(anchorRef.Element); - //await DesignTokens.BaseHeightMultiplier.DeleteValueFor(anchorRef.Element); - //await DesignTokens.BaseHeightMultiplier.SetValueFor(anchorRef.Element); + theValueBeforeDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element); + + await DesignTokens.BaseHeightMultiplier.SetValueFor(ref4.Element, 52); + + //ToDo: Create your own DesingToken + //DesignToken specialColor = new(jsRuntime!, "specialColor"); + //await specialColor.SetValueFor(ref3.Element, "#FF0000"); + StateHasChanged(); + } + + } + + public async Task OnClick() + { + if (DesignTokens is not null) + { + await DesignTokens.BaseHeightMultiplier.DeleteValueFor(ref4.Element); - //Create your own DesingToken - //DesignToken specialColor = new(JSRuntime!, "special-color"); - //await specialColor.SetValueFor("#secondanchor", "green"); + theValueAfterDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element); } - await base.OnAfterRenderAsync(firstRender); } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor index 8a7b114c90..c7f09d4b0f 100644 --- a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor +++ b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor @@ -5,7 +5,7 @@ Fluent UI WC demo page -
+
Home About @@ -19,7 +19,7 @@
- + Direction ltr rtl @@ -35,7 +35,7 @@ @Body -

@ex.Message

+
@ex.Message
diff --git a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs index 292b885670..9d31411ed0 100644 --- a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs +++ b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs @@ -1,29 +1,32 @@ using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; using Microsoft.Fast.Components.FluentUI; +using Microsoft.Fast.Components.FluentUI.DesignTokens; using Microsoft.JSInterop; namespace FluentUI.Demo.Shared { public partial class MainLayout { - [Inject] + [Inject] IJSRuntime? JSRuntime { get; set; } [Inject] DesignTokens? DesignTokens { get; set; } + ElementReference container; + ErrorBoundary? errorBoundary; - - LocalizationDirection? dir; - float baseLayerLuminance=1; - public async Task SwitchDirectionAsync() + LocalizationDirection dir; + float baseLayerLuminance = 1; + + public async Task SwitchDirection() { dir = dir == LocalizationDirection.rtl ? LocalizationDirection.ltr : LocalizationDirection.rtl; await JSRuntime!.InvokeVoidAsync("switchDirection", dir.ToString()); } - + public void SwitchTheme() { baseLayerLuminance = baseLayerLuminance == 0.2f ? 1 : 0.2f; @@ -36,9 +39,15 @@ protected override void OnParametersSet() protected override async Task OnAfterRenderAsync(bool firstRender) { - await DesignTokens!.BaseLayerLuminance.SetValueFor(".container", baseLayerLuminance); - await DesignTokens!.Direction.SetValueFor(".container", dir == LocalizationDirection.ltr ? "ltr" : "rtl"); + + if (!firstRender && DesignTokens is not null) + { + await DesignTokens.BaseLayerLuminance.SetValueFor(container, baseLayerLuminance); + //await DesignTokens.Direction.SetValueFor(container, dir.ToString()); + } + await base.OnAfterRenderAsync(firstRender); } + } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs deleted file mode 100644 index a0bc4fda46..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignToken.cs +++ /dev/null @@ -1,110 +0,0 @@ -using System.Diagnostics.CodeAnalysis; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI -{ - public class DesignToken : IAsyncDisposable - { - private readonly Lazy> moduleTask; - - [Parameter] - public T? Value { get; set; } - - [Parameter] - public T? DefaultValue { get; set; } - - [Parameter] - public string? Name { get; set; } - - /// - /// Constructs an instance of a DesignToken"/>. - /// - public DesignToken(IJSRuntime jsRuntime) - { - moduleTask = new(() => jsRuntime.InvokeAsync( - "import", "./_content/Microsoft.Fast.Components.FluentUI/DesignTokenInterop.js").AsTask()); - } - - public DesignToken(IJSRuntime jsRuntime, string name) : this(jsRuntime) - { - Name = name; - } - - public DesignToken WithDefault(T value) - { - DefaultValue = value; - return this; - } - - public async ValueTask SetValueFor(string selector) - { - if (DefaultValue == null) - throw new ArgumentNullException(nameof(DefaultValue), $"{nameof(DefaultValue)} should be set before calling SetValueFor"); - - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync("setValueForSelector", Name, selector, DefaultValue); - - } - - public async ValueTask SetValueFor(string selector, T value) - { - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync("setValueForSelector", Name, selector, value); - - } - - public async ValueTask SetValueFor(ElementReference element) - { - if (DefaultValue == null) - throw new ArgumentNullException(nameof(DefaultValue), $"{nameof(DefaultValue)} should be set before calling SetValueFor"); - - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync("setValueFor", Name, element, DefaultValue); - - } - - public async ValueTask SetValueFor(ElementReference element, T value) - { - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync("setValueFor", Name, element, value); - - } - - public async ValueTask DeleteValueFor(string selector) - { - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync("deleteValueForSelector", Name, selector); - } - - public async ValueTask DeleteValueFor(ElementReference element) - { - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync("deleteValueFor", Name, element); - } - - public async ValueTask GetValueFor(string selector) - { - IJSObjectReference module = await moduleTask.Value; - return await module.InvokeAsync("getValueForSelector", Name, selector); - } - - public async ValueTask GetValueFor(ElementReference element) - { - IJSObjectReference module = await moduleTask.Value; - return await module.InvokeAsync("getValueFor", Name, element); - } - - - [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "")] - public async ValueTask DisposeAsync() - { - if (moduleTask.IsValueCreated) - { - IJSObjectReference module = await moduleTask.Value; - await module.DisposeAsync(); - } - - } - } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs deleted file mode 100644 index e905254968..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokenNames.cs +++ /dev/null @@ -1,64 +0,0 @@ -namespace Microsoft.Fast.Components.FluentUI; - -public class DesignTokenNames -{ - public const string bodyFont = "bodyFont"; - public const string baseHeightMultiplier = "baseHeightMultiplier"; - public const string baseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; - public const string baseLayerLuminance = "baseLayerLuminance"; - public const string controlCornerRadius = "controlCornerRadius"; - public const string density = "density"; - public const string designUnit = "designUnit"; - public const string direction = "direction"; - public const string disabledOpacity = "disabledOpacity"; - public const string strokeWidth = "strokeWidth"; - public const string focusStrokeWidth = "focusStrokeWidth"; - public const string typeRampBaseFontSize = "typeRampBaseFontSize"; - public const string typeRampBaseLineHeight = "typeRampBaseLineHeight"; - public const string typeRampMinus1FontSize = "typeRampMinus1FontSize"; - public const string typeRampMinus1LineHeight = "typeRampMinus1LineHeight"; - public const string typeRampMinus2FontSize = "typeRampMinus2FontSize"; - public const string typeRampMinus2LineHeight = "typeRampMinus2LineHeight"; - public const string typeRampPlus1FontSize = "typeRampPlus1FontSize"; - public const string typeRampPlus1LineHeight = "typeRampPlus1LineHeight"; - public const string typeRampPlus2FontSize = "typeRampPlus2FontSize"; - public const string typeRampPlus2LineHeight = "typeRampPlus2LineHeight"; - public const string typeRampPlus3FontSize = "typeRampPlus3FontSize"; - public const string typeRampPlus3LineHeight = "typeRampPlus3LineHeight"; - public const string typeRampPlus4FontSize = "typeRampPlus4FontSize"; - public const string typeRampPlus4LineHeight = "typeRampPlus4LineHeight"; - public const string typeRampPlus5FontSize = "typeRampPlus5FontSize"; - public const string typeRampPlus5LineHeight = "typeRampPlus5LineHeight"; - public const string typeRampPlus6FontSize = "typeRampPlus6FontSize"; - public const string typeRampPlus6LineHeight = "typeRampPlus6LineHeight"; - public const string accentFillRestDelta = "accentFillRestDelta"; - public const string accentFillHoverDelta = "accentFillHoverDelta"; - public const string accentFillActiveDelta = "accentFillActiveDelta"; - public const string accentFillFocusDelta = "accentFillFocusDelta"; - public const string accentForegroundRestDelta = "accentForegroundRestDelta"; - public const string accentForegroundHoverDelta = "accentForegroundHoverDelta"; - public const string accentForegroundActiveDelta = "accentForegroundActiveDelta"; - public const string accentForegroundFocusDelta = "accentForegroundFocusDelta"; - public const string neutralFillRestDelta = "neutralFillRestDelta"; - public const string neutralFillHoverDelta = "neutralFillHoverDelta"; - public const string neutralFillActiveDelta = "neutralFillActiveDelta"; - public const string neutralFillFocusDelta = "neutralFillFocusDelta"; - public const string neutralFillInputRestDelta = "neutralFillInputRestDelta"; - public const string neutralFillInputHoverDelta = "neutralFillInputHoverDelta"; - public const string neutralFillInputActiveDelta = "neutralFillInputActiveDelta"; - public const string neutralFillInputFocusDelta = "neutralFillInputFocusDelta"; - public const string neutralFillStealthRestDelta = "neutralFillStealthRestDelta"; - public const string neutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; - public const string neutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; - public const string neutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; - public const string neutralFillStrongRestDelta = "neutralFillStrongRestDelta"; - public const string neutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; - public const string neutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; - public const string neutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; - public const string neutralFillLayerRestDelta = "neutralFillLayerRestDelta"; - public const string neutralStrokeRestDelta = "neutralStrokeRestDelta"; - public const string neutralStrokeHoverDelta = "neutralStrokeHoverDelta"; - public const string neutralStrokeActiveDelta = "neutralStrokeActiveDelta"; - public const string neutralStrokeFocusDelta = "neutralStrokeFocusDelta"; - public const string neutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs deleted file mode 100644 index 7ce97744be..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs +++ /dev/null @@ -1,129 +0,0 @@ -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI; - -public class DesignTokens -{ - public DesignToken BodyFont { get; set; } - public DesignToken BaseHeightMultiplier { get; set; } - public DesignToken BaseHorizontalSpacingMultiplier { get; set; } - public DesignToken BaseLayerLuminance { get; set; } - public DesignToken ControlCornerRadius { get; set; } - public DesignToken Density { get; set; } - public DesignToken DesignUnit { get; set; } - public DesignToken Direction { get; set; } - public DesignToken DisabledOpacity { get; set; } - public DesignToken StrokeWidth { get; set; } - public DesignToken FocusStrokeWidth { get; set; } - public DesignToken TypeRampBaseFontSize { get; set; } - public DesignToken TypeRampBaseLineHeight { get; set; } - public DesignToken TypeRampMinus1FontSize { get; set; } - public DesignToken TypeRampMinus1LineHeight { get; set; } - public DesignToken TypeRampMinus2FontSize { get; set; } - public DesignToken TypeRampMinus2LineHeight { get; set; } - public DesignToken TypeRampPlus1FontSize { get; set; } - public DesignToken TypeRampPlus1LineHeight { get; set; } - public DesignToken TypeRampPlus2FontSize { get; set; } - public DesignToken TypeRampPlus2LineHeight { get; set; } - public DesignToken TypeRampPlus3FontSize { get; set; } - public DesignToken TypeRampPlus3LineHeight { get; set; } - public DesignToken TypeRampPlus4FontSize { get; set; } - public DesignToken TypeRampPlus4LineHeight { get; set; } - public DesignToken TypeRampPlus5FontSize { get; set; } - public DesignToken TypeRampPlus5LineHeight { get; set; } - public DesignToken TypeRampPlus6FontSize { get; set; } - public DesignToken TypeRampPlus6LineHeight { get; set; } - public DesignToken AccentFillRestDelta { get; set; } - public DesignToken AccentFillHoverDelta { get; set; } - public DesignToken AccentFillActiveDelta { get; set; } - public DesignToken AccentFillFocusDelta { get; set; } - public DesignToken AccentForegroundRestDelta { get; set; } - public DesignToken AccentForegroundHoverDelta { get; set; } - public DesignToken AccentForegroundActiveDelta { get; set; } - public DesignToken AccentForegroundFocusDelta { get; set; } - public DesignToken NeutralFillRestDelta { get; set; } - public DesignToken NeutralFillHoverDelta { get; set; } - public DesignToken NeutralFillActiveDelta { get; set; } - public DesignToken NeutralFillFocusDelta { get; set; } - public DesignToken NeutralFillInputRestDelta { get; set; } - public DesignToken NeutralFillInputHoverDelta { get; set; } - public DesignToken NeutralFillInputActiveDelta { get; set; } - public DesignToken NeutralFillInputFocusDelta { get; set; } - public DesignToken NeutralFillStealthRestDelta { get; set; } - public DesignToken NeutralFillStealthHoverDelta { get; set; } - public DesignToken NeutralFillStealthActiveDelta { get; set; } - public DesignToken NeutralFillStealthFocusDelta { get; set; } - public DesignToken NeutralFillStrongRestDelta { get; set; } - public DesignToken NeutralFillStrongHoverDelta { get; set; } - public DesignToken NeutralFillStrongActiveDelta { get; set; } - public DesignToken NeutralFillStrongFocusDelta { get; set; } - public DesignToken NeutralFillLayerRestDelta { get; set; } - public DesignToken NeutralStrokeRestDelta { get; set; } - public DesignToken NeutralStrokeHoverDelta { get; set; } - public DesignToken NeutralStrokeActiveDelta { get; set; } - public DesignToken NeutralStrokeFocusDelta { get; set; } - public DesignToken NeutralStrokeDividerRestDelta { get; set; } - - public DesignTokens(IJSRuntime runtime) - { - BodyFont = new(runtime, DesignTokenNames.bodyFont); - BaseHeightMultiplier = new(runtime, DesignTokenNames.baseHeightMultiplier); - BaseHorizontalSpacingMultiplier = new(runtime, DesignTokenNames.baseHorizontalSpacingMultiplier); - BaseLayerLuminance = new(runtime, DesignTokenNames.baseLayerLuminance); - ControlCornerRadius = new(runtime, DesignTokenNames.controlCornerRadius); - Density = new(runtime, DesignTokenNames.density); - DesignUnit = new(runtime, DesignTokenNames.designUnit); - Direction = new(runtime, DesignTokenNames.direction); - DisabledOpacity = new(runtime, DesignTokenNames.disabledOpacity); - StrokeWidth = new(runtime, DesignTokenNames.strokeWidth); - FocusStrokeWidth = new(runtime, DesignTokenNames.focusStrokeWidth); - TypeRampBaseFontSize = new(runtime, DesignTokenNames.typeRampBaseFontSize); - TypeRampBaseLineHeight = new(runtime, DesignTokenNames.typeRampBaseLineHeight); - TypeRampMinus1FontSize = new(runtime, DesignTokenNames.typeRampMinus1FontSize); - TypeRampMinus1LineHeight = new(runtime, DesignTokenNames.typeRampMinus1LineHeight); - TypeRampMinus2FontSize = new(runtime, DesignTokenNames.typeRampMinus2FontSize); - TypeRampMinus2LineHeight = new(runtime, DesignTokenNames.typeRampMinus2LineHeight); - TypeRampPlus1FontSize = new(runtime, DesignTokenNames.typeRampPlus1FontSize); - TypeRampPlus1LineHeight = new(runtime, DesignTokenNames.typeRampPlus1LineHeight); - TypeRampPlus2FontSize = new(runtime, DesignTokenNames.typeRampPlus2FontSize); - TypeRampPlus2LineHeight = new(runtime, DesignTokenNames.typeRampPlus2LineHeight); - TypeRampPlus3FontSize = new(runtime, DesignTokenNames.typeRampPlus3FontSize); - TypeRampPlus3LineHeight = new(runtime, DesignTokenNames.typeRampPlus3LineHeight); - TypeRampPlus4FontSize = new(runtime, DesignTokenNames.typeRampPlus4FontSize); - TypeRampPlus4LineHeight = new(runtime, DesignTokenNames.typeRampPlus4LineHeight); - TypeRampPlus5FontSize = new(runtime, DesignTokenNames.typeRampPlus5FontSize); - TypeRampPlus5LineHeight = new(runtime, DesignTokenNames.typeRampPlus5LineHeight); - TypeRampPlus6FontSize = new(runtime, DesignTokenNames.typeRampPlus6FontSize); - TypeRampPlus6LineHeight = new(runtime, DesignTokenNames.typeRampPlus6LineHeight); - AccentFillRestDelta = new(runtime, DesignTokenNames.accentFillRestDelta); - AccentFillHoverDelta = new(runtime, DesignTokenNames.accentFillHoverDelta); - AccentFillActiveDelta = new(runtime, DesignTokenNames.accentFillActiveDelta); - AccentFillFocusDelta = new(runtime, DesignTokenNames.accentFillFocusDelta); - AccentForegroundRestDelta = new(runtime, DesignTokenNames.accentForegroundRestDelta); - AccentForegroundHoverDelta = new(runtime, DesignTokenNames.accentForegroundHoverDelta); - AccentForegroundActiveDelta = new(runtime, DesignTokenNames.accentForegroundActiveDelta); - AccentForegroundFocusDelta = new(runtime, DesignTokenNames.accentForegroundFocusDelta); - NeutralFillRestDelta = new(runtime, DesignTokenNames.neutralFillRestDelta); - NeutralFillHoverDelta = new(runtime, DesignTokenNames.neutralFillHoverDelta); - NeutralFillActiveDelta = new(runtime, DesignTokenNames.neutralFillActiveDelta); - NeutralFillFocusDelta = new(runtime, DesignTokenNames.neutralFillFocusDelta); - NeutralFillInputRestDelta = new(runtime, DesignTokenNames.neutralFillInputRestDelta); - NeutralFillInputHoverDelta = new(runtime, DesignTokenNames.neutralFillInputHoverDelta); - NeutralFillInputActiveDelta = new(runtime, DesignTokenNames.neutralFillInputActiveDelta); - NeutralFillInputFocusDelta = new(runtime, DesignTokenNames.neutralFillInputFocusDelta); - NeutralFillStealthRestDelta = new(runtime, DesignTokenNames.neutralFillStealthRestDelta); - NeutralFillStealthHoverDelta = new(runtime, DesignTokenNames.neutralFillStealthHoverDelta); - NeutralFillStealthActiveDelta = new(runtime, DesignTokenNames.neutralFillStealthActiveDelta); - NeutralFillStealthFocusDelta = new(runtime, DesignTokenNames.neutralFillStealthFocusDelta); - NeutralFillStrongRestDelta = new(runtime, DesignTokenNames.neutralFillStrongRestDelta); - NeutralFillStrongHoverDelta = new(runtime, DesignTokenNames.neutralFillStrongHoverDelta); - NeutralFillStrongActiveDelta = new(runtime, DesignTokenNames.neutralFillStrongActiveDelta); - NeutralFillStrongFocusDelta = new(runtime, DesignTokenNames.neutralFillStrongFocusDelta); - NeutralFillLayerRestDelta = new(runtime, DesignTokenNames.neutralFillLayerRestDelta); - NeutralStrokeRestDelta = new(runtime, DesignTokenNames.neutralStrokeRestDelta); - NeutralStrokeHoverDelta = new(runtime, DesignTokenNames.neutralStrokeHoverDelta); - NeutralStrokeActiveDelta = new(runtime, DesignTokenNames.neutralStrokeActiveDelta); - NeutralStrokeFocusDelta = new(runtime, DesignTokenNames.neutralStrokeFocusDelta); - NeutralStrokeDividerRestDelta = new(runtime, DesignTokenNames.neutralStrokeDividerRestDelta); - } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs new file mode 100644 index 0000000000..d5e1f17119 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs @@ -0,0 +1,64 @@ +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +public class Constants +{ + public const string BodyFont = "bodyFont"; + public const string BaseHeightMultiplier = "baseHeightMultiplier"; + public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; + public const string BaseLayerLuminance = "baseLayerLuminance"; + public const string ControlCornerRadius = "controlCornerRadius"; + public const string Density = "density"; + public const string DesignUnit = "designUnit"; + public const string Direction = "direction"; + public const string DisabledOpacity = "disabledOpacity"; + public const string StrokeWidth = "strokeWidth"; + public const string FocusStrokeWidth = "focusStrokeWidth"; + public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; + public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; + public const string TypeRampMinus1FontSize = "typeRampMinus1FontSize"; + public const string TypeRampMinus1LineHeight = "typeRampMinus1LineHeight"; + public const string TypeRampMinus2FontSize = "typeRampMinus2FontSize"; + public const string TypeRampMinus2LineHeight = "typeRampMinus2LineHeight"; + public const string TypeRampPlus1FontSize = "typeRampPlus1FontSize"; + public const string TypeRampPlus1LineHeight = "typeRampPlus1LineHeight"; + public const string TypeRampPlus2FontSize = "typeRampPlus2FontSize"; + public const string TypeRampPlus2LineHeight = "typeRampPlus2LineHeight"; + public const string TypeRampPlus3FontSize = "typeRampPlus3FontSize"; + public const string TypeRampPlus3LineHeight = "typeRampPlus3LineHeight"; + public const string TypeRampPlus4FontSize = "typeRampPlus4FontSize"; + public const string TypeRampPlus4LineHeight = "typeRampPlus4LineHeight"; + public const string TypeRampPlus5FontSize = "typeRampPlus5FontSize"; + public const string TypeRampPlus5LineHeight = "typeRampPlus5LineHeight"; + public const string TypeRampPlus6FontSize = "typeRampPlus6FontSize"; + public const string TypeRampPlus6LineHeight = "typeRampPlus6LineHeight"; + public const string AccentFillRestDelta = "accentFillRestDelta"; + public const string AccentFillHoverDelta = "accentFillHoverDelta"; + public const string AccentFillActiveDelta = "accentFillActiveDelta"; + public const string AccentFillFocusDelta = "accentFillFocusDelta"; + public const string AccentForegroundRestDelta = "accentForegroundRestDelta"; + public const string AccentForegroundHoverDelta = "accentForegroundHoverDelta"; + public const string AccentForegroundActiveDelta = "accentForegroundActiveDelta"; + public const string AccentForegroundFocusDelta = "accentForegroundFocusDelta"; + public const string NeutralFillRestDelta = "neutralFillRestDelta"; + public const string NeutralFillHoverDelta = "neutralFillHoverDelta"; + public const string NeutralFillActiveDelta = "neutralFillActiveDelta"; + public const string NeutralFillFocusDelta = "neutralFillFocusDelta"; + public const string NeutralFillInputRestDelta = "neutralFillInputRestDelta"; + public const string NeutralFillInputHoverDelta = "neutralFillInputHoverDelta"; + public const string NeutralFillInputActiveDelta = "neutralFillInputActiveDelta"; + public const string NeutralFillInputFocusDelta = "neutralFillInputFocusDelta"; + public const string NeutralFillStealthRestDelta = "neutralFillStealthRestDelta"; + public const string NeutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; + public const string NeutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; + public const string NeutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; + public const string NeutralFillStrongRestDelta = "neutralFillStrongRestDelta"; + public const string NeutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; + public const string NeutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; + public const string NeutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; + public const string NeutralFillLayerRestDelta = "neutralFillLayerRestDelta"; + public const string NeutralStrokeRestDelta = "neutralStrokeRestDelta"; + public const string NeutralStrokeHoverDelta = "neutralStrokeHoverDelta"; + public const string NeutralStrokeActiveDelta = "neutralStrokeActiveDelta"; + public const string NeutralStrokeFocusDelta = "neutralStrokeFocusDelta"; + public const string NeutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs new file mode 100644 index 0000000000..b08e9f79d1 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs @@ -0,0 +1,117 @@ +using System.Diagnostics.CodeAnalysis; +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens +{ + public class DesignToken : IAsyncDisposable + { + private readonly Lazy> moduleTask; + + private T? _defaultValue; + + /// + /// Gets the name of this design token + /// + public string? Name { get; private set; } + + private DesignToken(IJSRuntime jsRuntime) + { + moduleTask = new(() => jsRuntime.InvokeAsync( + "import", "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js").AsTask()); + } + + /// + /// Constructs an instance of a DesignToken. + /// + public DesignToken(IJSRuntime jsRuntime, string name) : this(jsRuntime) + { + Name = name; + + + //WIP: Create your own token + //bool hasField = typeof(Constants).GetFields(BindingFlags.Public | BindingFlags.Static). + // Select(x => x.GetRawConstantValue()?.ToString()).Contains(name); + + //if (!hasField) + //{ + // Create(name); + //} + + } + + //WIP: Create your own token + //private async ValueTask Create(string name) + //{ + // IJSObjectReference module = await moduleTask.Value; + // await module.InvokeVoidAsync(Name + ".create", typeof(T), name); + //} + + /// + /// Sets the default value of this token + /// + public DesignToken WithDefault(T value) + { + _defaultValue = value; + return this; + } + + /// + /// Sets the value of the for the associated to the default value + /// + /// the associated + /// + public async ValueTask SetValueFor(ElementReference element) + { + if (_defaultValue == null) + throw new Exception("WithDefault should be called before calling SetValueFor"); + + await SetValueFor(element, _defaultValue); + } + + /// + /// Sets the value of the for the associated to the supplied value + /// + /// the associated + /// the value to set + /// + public async ValueTask SetValueFor(ElementReference element, T value) + { + IJSObjectReference module = await moduleTask.Value; + await module.InvokeVoidAsync(Name + ".setValueFor", element, value); + } + + /// + /// Deletes the set value for the associated + /// + /// the associated + /// + public async ValueTask DeleteValueFor(ElementReference element) + { + IJSObjectReference module = await moduleTask.Value; + await module.InvokeVoidAsync(Name + ".deleteValueFor", element); + } + + /// + /// Gets the set value for the associated + /// + /// the associated + /// the value + public async ValueTask GetValueFor(ElementReference element) + { + IJSObjectReference module = await moduleTask.Value; + return await module.InvokeAsync(Name + ".getValueFor", element); + } + + [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "Not needed")] + public async ValueTask DisposeAsync() + { + if (moduleTask.IsValueCreated) + { + IJSObjectReference module = await moduleTask.Value; + await module.DisposeAsync(); + } + + } + } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs new file mode 100644 index 0000000000..583f353fb3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs @@ -0,0 +1,129 @@ +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +public class DesignTokens +{ + public DesignToken BodyFont { get; set; } + public DesignToken BaseHeightMultiplier { get; set; } + public DesignToken BaseHorizontalSpacingMultiplier { get; set; } + public DesignToken BaseLayerLuminance { get; set; } + public DesignToken ControlCornerRadius { get; set; } + public DesignToken Density { get; set; } + public DesignToken DesignUnit { get; set; } + public DesignToken Direction { get; set; } + public DesignToken DisabledOpacity { get; set; } + public DesignToken StrokeWidth { get; set; } + public DesignToken FocusStrokeWidth { get; set; } + public DesignToken TypeRampBaseFontSize { get; set; } + public DesignToken TypeRampBaseLineHeight { get; set; } + public DesignToken TypeRampMinus1FontSize { get; set; } + public DesignToken TypeRampMinus1LineHeight { get; set; } + public DesignToken TypeRampMinus2FontSize { get; set; } + public DesignToken TypeRampMinus2LineHeight { get; set; } + public DesignToken TypeRampPlus1FontSize { get; set; } + public DesignToken TypeRampPlus1LineHeight { get; set; } + public DesignToken TypeRampPlus2FontSize { get; set; } + public DesignToken TypeRampPlus2LineHeight { get; set; } + public DesignToken TypeRampPlus3FontSize { get; set; } + public DesignToken TypeRampPlus3LineHeight { get; set; } + public DesignToken TypeRampPlus4FontSize { get; set; } + public DesignToken TypeRampPlus4LineHeight { get; set; } + public DesignToken TypeRampPlus5FontSize { get; set; } + public DesignToken TypeRampPlus5LineHeight { get; set; } + public DesignToken TypeRampPlus6FontSize { get; set; } + public DesignToken TypeRampPlus6LineHeight { get; set; } + public DesignToken AccentFillRestDelta { get; set; } + public DesignToken AccentFillHoverDelta { get; set; } + public DesignToken AccentFillActiveDelta { get; set; } + public DesignToken AccentFillFocusDelta { get; set; } + public DesignToken AccentForegroundRestDelta { get; set; } + public DesignToken AccentForegroundHoverDelta { get; set; } + public DesignToken AccentForegroundActiveDelta { get; set; } + public DesignToken AccentForegroundFocusDelta { get; set; } + public DesignToken NeutralFillRestDelta { get; set; } + public DesignToken NeutralFillHoverDelta { get; set; } + public DesignToken NeutralFillActiveDelta { get; set; } + public DesignToken NeutralFillFocusDelta { get; set; } + public DesignToken NeutralFillInputRestDelta { get; set; } + public DesignToken NeutralFillInputHoverDelta { get; set; } + public DesignToken NeutralFillInputActiveDelta { get; set; } + public DesignToken NeutralFillInputFocusDelta { get; set; } + public DesignToken NeutralFillStealthRestDelta { get; set; } + public DesignToken NeutralFillStealthHoverDelta { get; set; } + public DesignToken NeutralFillStealthActiveDelta { get; set; } + public DesignToken NeutralFillStealthFocusDelta { get; set; } + public DesignToken NeutralFillStrongRestDelta { get; set; } + public DesignToken NeutralFillStrongHoverDelta { get; set; } + public DesignToken NeutralFillStrongActiveDelta { get; set; } + public DesignToken NeutralFillStrongFocusDelta { get; set; } + public DesignToken NeutralFillLayerRestDelta { get; set; } + public DesignToken NeutralStrokeRestDelta { get; set; } + public DesignToken NeutralStrokeHoverDelta { get; set; } + public DesignToken NeutralStrokeActiveDelta { get; set; } + public DesignToken NeutralStrokeFocusDelta { get; set; } + public DesignToken NeutralStrokeDividerRestDelta { get; set; } + + public DesignTokens(IJSRuntime jsRuntime) + { + BodyFont = new(jsRuntime, Constants.BodyFont); + BaseHeightMultiplier = new(jsRuntime, Constants.BaseHeightMultiplier); + BaseHorizontalSpacingMultiplier = new(jsRuntime, Constants.BaseHorizontalSpacingMultiplier); + BaseLayerLuminance = new(jsRuntime, Constants.BaseLayerLuminance); + ControlCornerRadius = new(jsRuntime, Constants.ControlCornerRadius); + Density = new(jsRuntime, Constants.Density); + DesignUnit = new(jsRuntime, Constants.DesignUnit); + Direction = new(jsRuntime, Constants.Direction); + DisabledOpacity = new(jsRuntime, Constants.DisabledOpacity); + StrokeWidth = new(jsRuntime, Constants.StrokeWidth); + FocusStrokeWidth = new(jsRuntime, Constants.FocusStrokeWidth); + TypeRampBaseFontSize = new(jsRuntime, Constants.TypeRampBaseFontSize); + TypeRampBaseLineHeight = new(jsRuntime, Constants.TypeRampBaseLineHeight); + TypeRampMinus1FontSize = new(jsRuntime, Constants.TypeRampMinus1FontSize); + TypeRampMinus1LineHeight = new(jsRuntime, Constants.TypeRampMinus1LineHeight); + TypeRampMinus2FontSize = new(jsRuntime, Constants.TypeRampMinus2FontSize); + TypeRampMinus2LineHeight = new(jsRuntime, Constants.TypeRampMinus2LineHeight); + TypeRampPlus1FontSize = new(jsRuntime, Constants.TypeRampPlus1FontSize); + TypeRampPlus1LineHeight = new(jsRuntime, Constants.TypeRampPlus1LineHeight); + TypeRampPlus2FontSize = new(jsRuntime, Constants.TypeRampPlus2FontSize); + TypeRampPlus2LineHeight = new(jsRuntime, Constants.TypeRampPlus2LineHeight); + TypeRampPlus3FontSize = new(jsRuntime, Constants.TypeRampPlus3FontSize); + TypeRampPlus3LineHeight = new(jsRuntime, Constants.TypeRampPlus3LineHeight); + TypeRampPlus4FontSize = new(jsRuntime, Constants.TypeRampPlus4FontSize); + TypeRampPlus4LineHeight = new(jsRuntime, Constants.TypeRampPlus4LineHeight); + TypeRampPlus5FontSize = new(jsRuntime, Constants.TypeRampPlus5FontSize); + TypeRampPlus5LineHeight = new(jsRuntime, Constants.TypeRampPlus5LineHeight); + TypeRampPlus6FontSize = new(jsRuntime, Constants.TypeRampPlus6FontSize); + TypeRampPlus6LineHeight = new(jsRuntime, Constants.TypeRampPlus6LineHeight); + AccentFillRestDelta = new(jsRuntime, Constants.AccentFillRestDelta); + AccentFillHoverDelta = new(jsRuntime, Constants.AccentFillHoverDelta); + AccentFillActiveDelta = new(jsRuntime, Constants.AccentFillActiveDelta); + AccentFillFocusDelta = new(jsRuntime, Constants.AccentFillFocusDelta); + AccentForegroundRestDelta = new(jsRuntime, Constants.AccentForegroundRestDelta); + AccentForegroundHoverDelta = new(jsRuntime, Constants.AccentForegroundHoverDelta); + AccentForegroundActiveDelta = new(jsRuntime, Constants.AccentForegroundActiveDelta); + AccentForegroundFocusDelta = new(jsRuntime, Constants.AccentForegroundFocusDelta); + NeutralFillRestDelta = new(jsRuntime, Constants.NeutralFillRestDelta); + NeutralFillHoverDelta = new(jsRuntime, Constants.NeutralFillHoverDelta); + NeutralFillActiveDelta = new(jsRuntime, Constants.NeutralFillActiveDelta); + NeutralFillFocusDelta = new(jsRuntime, Constants.NeutralFillFocusDelta); + NeutralFillInputRestDelta = new(jsRuntime, Constants.NeutralFillInputRestDelta); + NeutralFillInputHoverDelta = new(jsRuntime, Constants.NeutralFillInputHoverDelta); + NeutralFillInputActiveDelta = new(jsRuntime, Constants.NeutralFillInputActiveDelta); + NeutralFillInputFocusDelta = new(jsRuntime, Constants.NeutralFillInputFocusDelta); + NeutralFillStealthRestDelta = new(jsRuntime, Constants.NeutralFillStealthRestDelta); + NeutralFillStealthHoverDelta = new(jsRuntime, Constants.NeutralFillStealthHoverDelta); + NeutralFillStealthActiveDelta = new(jsRuntime, Constants.NeutralFillStealthActiveDelta); + NeutralFillStealthFocusDelta = new(jsRuntime, Constants.NeutralFillStealthFocusDelta); + NeutralFillStrongRestDelta = new(jsRuntime, Constants.NeutralFillStrongRestDelta); + NeutralFillStrongHoverDelta = new(jsRuntime, Constants.NeutralFillStrongHoverDelta); + NeutralFillStrongActiveDelta = new(jsRuntime, Constants.NeutralFillStrongActiveDelta); + NeutralFillStrongFocusDelta = new(jsRuntime, Constants.NeutralFillStrongFocusDelta); + NeutralFillLayerRestDelta = new(jsRuntime, Constants.NeutralFillLayerRestDelta); + NeutralStrokeRestDelta = new(jsRuntime, Constants.NeutralStrokeRestDelta); + NeutralStrokeHoverDelta = new(jsRuntime, Constants.NeutralStrokeHoverDelta); + NeutralStrokeActiveDelta = new(jsRuntime, Constants.NeutralStrokeActiveDelta); + NeutralStrokeFocusDelta = new(jsRuntime, Constants.NeutralStrokeFocusDelta); + NeutralStrokeDividerRestDelta = new(jsRuntime, Constants.NeutralStrokeDividerRestDelta); + } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs index f30d46d2b3..5cb518e378 100644 --- a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -1,10 +1,4 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Runtime.CompilerServices; -using System.Text; -using System.Threading.Tasks; -using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.DependencyInjection; namespace Microsoft.Fast.Components.FluentUI; @@ -12,6 +6,6 @@ public static class ServiceCollectionExtensions { public static void AddFluentUIComponents(this IServiceCollection services) { - services.AddScoped(); + services.AddScoped(); } } diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js deleted file mode 100644 index 4ba5bb3044..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js +++ /dev/null @@ -1,123 +0,0 @@ -import { - StandardLuminance, - bodyFont, - baseHeightMultiplier, - baseHorizontalSpacingMultiplier, - baseLayerLuminance, - controlCornerRadius, - density, - designUnit, - direction, - disabledOpacity, - strokeWidth, - focusStrokeWidth, - typeRampBaseFontSize, - typeRampBaseLineHeight, - typeRampMinus1FontSize, - typeRampMinus1LineHeight, - typeRampMinus2FontSize, - typeRampMinus2LineHeight, - typeRampPlus1FontSize, - typeRampPlus1LineHeight, - typeRampPlus2FontSize, - typeRampPlus2LineHeight, - typeRampPlus3FontSize, - typeRampPlus3LineHeight, - typeRampPlus4FontSize, - typeRampPlus4LineHeight, - typeRampPlus5FontSize, - typeRampPlus5LineHeight, - typeRampPlus6FontSize, - typeRampPlus6LineHeight, - accentFillRestDelta, - accentFillHoverDelta, - accentFillActiveDelta, - accentFillFocusDelta, - accentForegroundRestDelta, - accentForegroundHoverDelta, - accentForegroundActiveDelta, - accentForegroundFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, - neutralFillInputRestDelta, - neutralFillInputHoverDelta, - neutralFillInputActiveDelta, - neutralFillInputFocusDelta, - neutralFillStealthRestDelta, - neutralFillStealthHoverDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, - neutralFillStrongRestDelta, - neutralFillStrongHoverDelta, - neutralFillStrongActiveDelta, - neutralFillStrongFocusDelta, - neutralFillLayerRestDelta, - neutralStrokeRestDelta, - neutralStrokeHoverDelta, - neutralStrokeActiveDelta, - neutralStrokeFocusDelta, - neutralStrokeDividerRestDelta -} from 'https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js' - - -export function setValueForSelector(designtoken, selector, value) { - - var x = document.querySelectorAll(selector); - var i; - for (i = 0; i < x.length; i++) { - eval(designtoken).setValueFor(x[i], value); - } -} - -export function setValueFor(designtoken, element, value) { - if (element instanceof HTMLElement) { - eval(designtoken).setValueFor(element, value); - } - else { - throw new Error('Unable to set value for an invalid element.'); - } -} - -export function deleteValueForSelector(designtoken, selector) { - - var x = document.querySelectorAll(selector); - var i; - for (i = 0; i < x.length; i++) { - eval(designtoken).deleteValueFor(x[i]); - } -} - -export function deleteValueFor(designtoken, element) { - if (element instanceof HTMLElement) { - eval(designtoken).deleteValueFor(element); - } - else { - throw new Error('Unable to delete value for an invalid element.'); - } -} - -export function getValueForSelector(designtoken, selector) { - - var x = document.querySelector(selector); - - const value = eval(designtoken).getValueFor(x); - - if (value !== undefined) { - return value; - } -} - -export function getValueFor(designtoken, element) { - if (element instanceof HTMLElement) { - const value = eval(designtoken).getValueFor(element); - - if (value !== undefined) { - return value; - } - } - else { - throw new Error('Unable to delete value for an invalid element.'); - } -} \ No newline at end of file From 335ac85c7680a5c48c80b3a3b8668b899fd28324 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 15 Apr 2022 12:15:51 +0200 Subject: [PATCH 18/34] Read script source from appsettings --- .../wwwroot/appsettings.json | 3 + .../FluentUI.Demo.Server/appsettings.json | 3 +- .../DesignTokens/DesignToken.cs | 9 +- .../DesignTokens/DesignTokens.cs | 123 +++++++++--------- .../Microsoft.Fast.Components.FluentUI.csproj | 3 +- 5 files changed, 75 insertions(+), 66 deletions(-) create mode 100644 examples/FluentUI.Demo.Client/wwwroot/appsettings.json diff --git a/examples/FluentUI.Demo.Client/wwwroot/appsettings.json b/examples/FluentUI.Demo.Client/wwwroot/appsettings.json new file mode 100644 index 0000000000..ca9f6c0791 --- /dev/null +++ b/examples/FluentUI.Demo.Client/wwwroot/appsettings.json @@ -0,0 +1,3 @@ +{ + "FluentWebComponentsScriptSource": "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js" +} diff --git a/examples/FluentUI.Demo.Server/appsettings.json b/examples/FluentUI.Demo.Server/appsettings.json index 10f68b8c8b..b03343652b 100644 --- a/examples/FluentUI.Demo.Server/appsettings.json +++ b/examples/FluentUI.Demo.Server/appsettings.json @@ -5,5 +5,6 @@ "Microsoft.AspNetCore": "Warning" } }, - "AllowedHosts": "*" + "AllowedHosts": "*", + "FluentWebComponentsScriptSource": "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js" } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs index b08e9f79d1..56b83c331b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs @@ -1,11 +1,13 @@ using System.Diagnostics.CodeAnalysis; using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Configuration; using Microsoft.JSInterop; namespace Microsoft.Fast.Components.FluentUI.DesignTokens { public class DesignToken : IAsyncDisposable { + private readonly Lazy> moduleTask; private T? _defaultValue; @@ -15,16 +17,17 @@ public class DesignToken : IAsyncDisposable ///
public string? Name { get; private set; } - private DesignToken(IJSRuntime jsRuntime) + private DesignToken(IJSRuntime jsRuntime, IConfiguration configuration) { + moduleTask = new(() => jsRuntime.InvokeAsync( - "import", "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js").AsTask()); + "import", configuration["FluentWebComponentsScriptSource"]).AsTask()); } /// /// Constructs an instance of a DesignToken. /// - public DesignToken(IJSRuntime jsRuntime, string name) : this(jsRuntime) + public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration, string name) : this(jsRuntime, configuration) { Name = name; diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs index 583f353fb3..2be3e800ab 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs @@ -1,4 +1,5 @@ -using Microsoft.JSInterop; +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; namespace Microsoft.Fast.Components.FluentUI.DesignTokens; @@ -64,66 +65,66 @@ public class DesignTokens public DesignToken NeutralStrokeFocusDelta { get; set; } public DesignToken NeutralStrokeDividerRestDelta { get; set; } - public DesignTokens(IJSRuntime jsRuntime) + public DesignTokens(IJSRuntime jsRuntime, IConfiguration configuration) { - BodyFont = new(jsRuntime, Constants.BodyFont); - BaseHeightMultiplier = new(jsRuntime, Constants.BaseHeightMultiplier); - BaseHorizontalSpacingMultiplier = new(jsRuntime, Constants.BaseHorizontalSpacingMultiplier); - BaseLayerLuminance = new(jsRuntime, Constants.BaseLayerLuminance); - ControlCornerRadius = new(jsRuntime, Constants.ControlCornerRadius); - Density = new(jsRuntime, Constants.Density); - DesignUnit = new(jsRuntime, Constants.DesignUnit); - Direction = new(jsRuntime, Constants.Direction); - DisabledOpacity = new(jsRuntime, Constants.DisabledOpacity); - StrokeWidth = new(jsRuntime, Constants.StrokeWidth); - FocusStrokeWidth = new(jsRuntime, Constants.FocusStrokeWidth); - TypeRampBaseFontSize = new(jsRuntime, Constants.TypeRampBaseFontSize); - TypeRampBaseLineHeight = new(jsRuntime, Constants.TypeRampBaseLineHeight); - TypeRampMinus1FontSize = new(jsRuntime, Constants.TypeRampMinus1FontSize); - TypeRampMinus1LineHeight = new(jsRuntime, Constants.TypeRampMinus1LineHeight); - TypeRampMinus2FontSize = new(jsRuntime, Constants.TypeRampMinus2FontSize); - TypeRampMinus2LineHeight = new(jsRuntime, Constants.TypeRampMinus2LineHeight); - TypeRampPlus1FontSize = new(jsRuntime, Constants.TypeRampPlus1FontSize); - TypeRampPlus1LineHeight = new(jsRuntime, Constants.TypeRampPlus1LineHeight); - TypeRampPlus2FontSize = new(jsRuntime, Constants.TypeRampPlus2FontSize); - TypeRampPlus2LineHeight = new(jsRuntime, Constants.TypeRampPlus2LineHeight); - TypeRampPlus3FontSize = new(jsRuntime, Constants.TypeRampPlus3FontSize); - TypeRampPlus3LineHeight = new(jsRuntime, Constants.TypeRampPlus3LineHeight); - TypeRampPlus4FontSize = new(jsRuntime, Constants.TypeRampPlus4FontSize); - TypeRampPlus4LineHeight = new(jsRuntime, Constants.TypeRampPlus4LineHeight); - TypeRampPlus5FontSize = new(jsRuntime, Constants.TypeRampPlus5FontSize); - TypeRampPlus5LineHeight = new(jsRuntime, Constants.TypeRampPlus5LineHeight); - TypeRampPlus6FontSize = new(jsRuntime, Constants.TypeRampPlus6FontSize); - TypeRampPlus6LineHeight = new(jsRuntime, Constants.TypeRampPlus6LineHeight); - AccentFillRestDelta = new(jsRuntime, Constants.AccentFillRestDelta); - AccentFillHoverDelta = new(jsRuntime, Constants.AccentFillHoverDelta); - AccentFillActiveDelta = new(jsRuntime, Constants.AccentFillActiveDelta); - AccentFillFocusDelta = new(jsRuntime, Constants.AccentFillFocusDelta); - AccentForegroundRestDelta = new(jsRuntime, Constants.AccentForegroundRestDelta); - AccentForegroundHoverDelta = new(jsRuntime, Constants.AccentForegroundHoverDelta); - AccentForegroundActiveDelta = new(jsRuntime, Constants.AccentForegroundActiveDelta); - AccentForegroundFocusDelta = new(jsRuntime, Constants.AccentForegroundFocusDelta); - NeutralFillRestDelta = new(jsRuntime, Constants.NeutralFillRestDelta); - NeutralFillHoverDelta = new(jsRuntime, Constants.NeutralFillHoverDelta); - NeutralFillActiveDelta = new(jsRuntime, Constants.NeutralFillActiveDelta); - NeutralFillFocusDelta = new(jsRuntime, Constants.NeutralFillFocusDelta); - NeutralFillInputRestDelta = new(jsRuntime, Constants.NeutralFillInputRestDelta); - NeutralFillInputHoverDelta = new(jsRuntime, Constants.NeutralFillInputHoverDelta); - NeutralFillInputActiveDelta = new(jsRuntime, Constants.NeutralFillInputActiveDelta); - NeutralFillInputFocusDelta = new(jsRuntime, Constants.NeutralFillInputFocusDelta); - NeutralFillStealthRestDelta = new(jsRuntime, Constants.NeutralFillStealthRestDelta); - NeutralFillStealthHoverDelta = new(jsRuntime, Constants.NeutralFillStealthHoverDelta); - NeutralFillStealthActiveDelta = new(jsRuntime, Constants.NeutralFillStealthActiveDelta); - NeutralFillStealthFocusDelta = new(jsRuntime, Constants.NeutralFillStealthFocusDelta); - NeutralFillStrongRestDelta = new(jsRuntime, Constants.NeutralFillStrongRestDelta); - NeutralFillStrongHoverDelta = new(jsRuntime, Constants.NeutralFillStrongHoverDelta); - NeutralFillStrongActiveDelta = new(jsRuntime, Constants.NeutralFillStrongActiveDelta); - NeutralFillStrongFocusDelta = new(jsRuntime, Constants.NeutralFillStrongFocusDelta); - NeutralFillLayerRestDelta = new(jsRuntime, Constants.NeutralFillLayerRestDelta); - NeutralStrokeRestDelta = new(jsRuntime, Constants.NeutralStrokeRestDelta); - NeutralStrokeHoverDelta = new(jsRuntime, Constants.NeutralStrokeHoverDelta); - NeutralStrokeActiveDelta = new(jsRuntime, Constants.NeutralStrokeActiveDelta); - NeutralStrokeFocusDelta = new(jsRuntime, Constants.NeutralStrokeFocusDelta); - NeutralStrokeDividerRestDelta = new(jsRuntime, Constants.NeutralStrokeDividerRestDelta); + BodyFont = new(jsRuntime, configuration, Constants.BodyFont); + BaseHeightMultiplier = new(jsRuntime, configuration, Constants.BaseHeightMultiplier); + BaseHorizontalSpacingMultiplier = new(jsRuntime, configuration, Constants.BaseHorizontalSpacingMultiplier); + BaseLayerLuminance = new(jsRuntime, configuration, Constants.BaseLayerLuminance); + ControlCornerRadius = new(jsRuntime, configuration, Constants.ControlCornerRadius); + Density = new(jsRuntime, configuration, Constants.Density); + DesignUnit = new(jsRuntime, configuration, Constants.DesignUnit); + Direction = new(jsRuntime, configuration, Constants.Direction); + DisabledOpacity = new(jsRuntime, configuration, Constants.DisabledOpacity); + StrokeWidth = new(jsRuntime, configuration, Constants.StrokeWidth); + FocusStrokeWidth = new(jsRuntime, configuration, Constants.FocusStrokeWidth); + TypeRampBaseFontSize = new(jsRuntime, configuration, Constants.TypeRampBaseFontSize); + TypeRampBaseLineHeight = new(jsRuntime, configuration, Constants.TypeRampBaseLineHeight); + TypeRampMinus1FontSize = new(jsRuntime, configuration, Constants.TypeRampMinus1FontSize); + TypeRampMinus1LineHeight = new(jsRuntime, configuration, Constants.TypeRampMinus1LineHeight); + TypeRampMinus2FontSize = new(jsRuntime, configuration, Constants.TypeRampMinus2FontSize); + TypeRampMinus2LineHeight = new(jsRuntime, configuration, Constants.TypeRampMinus2LineHeight); + TypeRampPlus1FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus1FontSize); + TypeRampPlus1LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus1LineHeight); + TypeRampPlus2FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus2FontSize); + TypeRampPlus2LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus2LineHeight); + TypeRampPlus3FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus3FontSize); + TypeRampPlus3LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus3LineHeight); + TypeRampPlus4FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus4FontSize); + TypeRampPlus4LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus4LineHeight); + TypeRampPlus5FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus5FontSize); + TypeRampPlus5LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus5LineHeight); + TypeRampPlus6FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus6FontSize); + TypeRampPlus6LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus6LineHeight); + AccentFillRestDelta = new(jsRuntime, configuration, Constants.AccentFillRestDelta); + AccentFillHoverDelta = new(jsRuntime, configuration, Constants.AccentFillHoverDelta); + AccentFillActiveDelta = new(jsRuntime, configuration, Constants.AccentFillActiveDelta); + AccentFillFocusDelta = new(jsRuntime, configuration, Constants.AccentFillFocusDelta); + AccentForegroundRestDelta = new(jsRuntime, configuration, Constants.AccentForegroundRestDelta); + AccentForegroundHoverDelta = new(jsRuntime, configuration, Constants.AccentForegroundHoverDelta); + AccentForegroundActiveDelta = new(jsRuntime, configuration, Constants.AccentForegroundActiveDelta); + AccentForegroundFocusDelta = new(jsRuntime, configuration, Constants.AccentForegroundFocusDelta); + NeutralFillRestDelta = new(jsRuntime, configuration, Constants.NeutralFillRestDelta); + NeutralFillHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillHoverDelta); + NeutralFillActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillActiveDelta); + NeutralFillFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillFocusDelta); + NeutralFillInputRestDelta = new(jsRuntime, configuration, Constants.NeutralFillInputRestDelta); + NeutralFillInputHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillInputHoverDelta); + NeutralFillInputActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillInputActiveDelta); + NeutralFillInputFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillInputFocusDelta); + NeutralFillStealthRestDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthRestDelta); + NeutralFillStealthHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthHoverDelta); + NeutralFillStealthActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthActiveDelta); + NeutralFillStealthFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthFocusDelta); + NeutralFillStrongRestDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongRestDelta); + NeutralFillStrongHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongHoverDelta); + NeutralFillStrongActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongActiveDelta); + NeutralFillStrongFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongFocusDelta); + NeutralFillLayerRestDelta = new(jsRuntime, configuration, Constants.NeutralFillLayerRestDelta); + NeutralStrokeRestDelta = new(jsRuntime, configuration, Constants.NeutralStrokeRestDelta); + NeutralStrokeHoverDelta = new(jsRuntime, configuration, Constants.NeutralStrokeHoverDelta); + NeutralStrokeActiveDelta = new(jsRuntime, configuration, Constants.NeutralStrokeActiveDelta); + NeutralStrokeFocusDelta = new(jsRuntime, configuration, Constants.NeutralStrokeFocusDelta); + NeutralStrokeDividerRestDelta = new(jsRuntime, configuration, Constants.NeutralStrokeDividerRestDelta); } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index 7880e70f70..184f119ace 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -51,7 +51,8 @@ - + + From ea507d1f0abd582726c9a5c188884f51e73c625f Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 18 Apr 2022 11:15:43 +0200 Subject: [PATCH 19/34] Use .NET 6.0.4 --- examples/FluentUI.Demo.Client/FluentUI.Demo.Client.csproj | 4 ++-- examples/FluentUI.Demo.Shared/FluentUI.Demo.Shared.csproj | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/FluentUI.Demo.Client/FluentUI.Demo.Client.csproj b/examples/FluentUI.Demo.Client/FluentUI.Demo.Client.csproj index ddb94e4ac6..cb177c5f24 100644 --- a/examples/FluentUI.Demo.Client/FluentUI.Demo.Client.csproj +++ b/examples/FluentUI.Demo.Client/FluentUI.Demo.Client.csproj @@ -7,8 +7,8 @@ - - + + diff --git a/examples/FluentUI.Demo.Shared/FluentUI.Demo.Shared.csproj b/examples/FluentUI.Demo.Shared/FluentUI.Demo.Shared.csproj index 37a44e694f..bb8a30956f 100644 --- a/examples/FluentUI.Demo.Shared/FluentUI.Demo.Shared.csproj +++ b/examples/FluentUI.Demo.Shared/FluentUI.Demo.Shared.csproj @@ -12,7 +12,7 @@ - + From 6ead97417f3aa6869d438c3a7ceeb6f6a8d19f9a Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 18 Apr 2022 22:31:52 +0200 Subject: [PATCH 20/34] fix merging main --- .../ServiceCollectionExtensions.cs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs index a264f54135..a35b70faf5 100644 --- a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -1,4 +1,6 @@ -namespace Microsoft.Fast.Components.FluentUI; +using Microsoft.Extensions.DependencyInjection; + +namespace Microsoft.Fast.Components.FluentUI; public static class ServiceCollectionExtensions { From 111748a13585635f8e31a812ef995dba74115a46 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 18 Apr 2022 23:25:38 +0200 Subject: [PATCH 21/34] DI / Nullable work --- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 15 ++--- .../Shared/MainLayout.razor.cs | 11 ++- .../Components/FluentIcon.razor.cs | 67 +++++++++---------- 3 files changed, 41 insertions(+), 52 deletions(-) diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index da70df5fdc..0dc85632bb 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -1,17 +1,13 @@ using Microsoft.AspNetCore.Components; using Microsoft.Fast.Components.FluentUI; using Microsoft.Fast.Components.FluentUI.DesignTokens; -using Microsoft.JSInterop; namespace FluentUI.Demo.Shared.Pages; public partial class Index { [Inject] - private DesignTokens? DesignTokens { get; set; } - - [Inject] - private IJSRuntime? jsRuntime { get; set; } + private DesignTokens DesignTokens { get; set; } = default!; private FluentAnchor ref1 = default!; private FluentAnchor ref2 = default!; @@ -23,7 +19,7 @@ public partial class Index protected override async Task OnAfterRenderAsync(bool firstRender) { - if (firstRender && DesignTokens is not null) + if (firstRender) { await DesignTokens.BaseLayerLuminance.SetValueFor(ref1.Element, 0); @@ -48,11 +44,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender) public async Task OnClick() { - if (DesignTokens is not null) - { - await DesignTokens.BaseHeightMultiplier.DeleteValueFor(ref4.Element); + await DesignTokens.BaseHeightMultiplier.DeleteValueFor(ref4.Element); - theValueAfterDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element); - } + theValueAfterDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element); } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs index 9d31411ed0..27ce6032ca 100644 --- a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs +++ b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs @@ -9,10 +9,10 @@ namespace FluentUI.Demo.Shared public partial class MainLayout { [Inject] - IJSRuntime? JSRuntime { get; set; } + IJSRuntime JSRuntime { get; set; } = default!; [Inject] - DesignTokens? DesignTokens { get; set; } + DesignTokens DesignTokens { get; set; } = default!; ElementReference container; @@ -24,7 +24,7 @@ public partial class MainLayout public async Task SwitchDirection() { dir = dir == LocalizationDirection.rtl ? LocalizationDirection.ltr : LocalizationDirection.rtl; - await JSRuntime!.InvokeVoidAsync("switchDirection", dir.ToString()); + await JSRuntime.InvokeVoidAsync("switchDirection", dir.ToString()); } public void SwitchTheme() @@ -40,14 +40,11 @@ protected override void OnParametersSet() protected override async Task OnAfterRenderAsync(bool firstRender) { - if (!firstRender && DesignTokens is not null) + if (!firstRender) { await DesignTokens.BaseLayerLuminance.SetValueFor(container, baseLayerLuminance); //await DesignTokens.Direction.SetValueFor(container, dir.ToString()); } - - await base.OnAfterRenderAsync(firstRender); } - } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentIcon.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentIcon.razor.cs index 006e5972b7..e8ac99f52b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentIcon.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentIcon.razor.cs @@ -5,7 +5,8 @@ namespace Microsoft.Fast.Components.FluentUI; public partial class FluentIcon { [Inject] - private IconService? IconService { get; set; } + private IconService IconService { get; set; } = default!; + private MarkupString svg; /// @@ -55,52 +56,50 @@ public partial class FluentIcon protected override async Task OnParametersSetAsync() { - if (IconService is not null) - { - const string iconpath = "_content/Microsoft.Fast.Components.FluentUI/icons"; - string result = string.Empty; + const string iconpath = "_content/Microsoft.Fast.Components.FluentUI/icons"; + string result = string.Empty; - string? nc = NeutralCultureName ?? null; + string? nc = NeutralCultureName ?? null; - string folder = FluentIcons.IconMap.First(x => x.Name == Name).Folder; + string folder = FluentIcons.IconMap.First(x => x.Name == Name).Folder; - string url = $"{iconpath}/{folder}"; + string url = $"{iconpath}/{folder}"; - if (nc is not null) - url += $"/{nc}"; + if (nc is not null) + url += $"/{nc}"; - url += $"/{ComposedName}.svg"; + url += $"/{ComposedName}.svg"; - try - { + try + { - HttpResponseMessage? response = await IconService.HttpClient.GetAsync(url); - if (response.IsSuccessStatusCode) - { - result = await response.Content.ReadAsStringAsync(); - } - else - { - // Fall back to original icon - url = $"{iconpath}/{folder}/{ComposedName}.svg"; - response = await IconService.HttpClient.GetAsync(url); - result = await response.Content.ReadAsStringAsync(); - - } + HttpResponseMessage? response = await IconService.HttpClient.GetAsync(url); + if (response.IsSuccessStatusCode) + { + result = await response.Content.ReadAsStringAsync(); } - catch (Exception) + else { - result = "Icon not found"; + // Fall back to original icon + url = $"{iconpath}/{folder}/{ComposedName}.svg"; + response = await IconService.HttpClient.GetAsync(url); + result = await response.Content.ReadAsStringAsync(); + } + } + catch (Exception) + { + result = "Icon not found"; + } - if (UseAccentColor) - result = result.Replace(" Date: Mon, 18 Apr 2022 23:45:30 +0200 Subject: [PATCH 22/34] Make appsettings config for script source optional --- examples/FluentUI.Demo.Client/wwwroot/appsettings.json | 2 +- .../DesignTokens/DesignToken.cs | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/examples/FluentUI.Demo.Client/wwwroot/appsettings.json b/examples/FluentUI.Demo.Client/wwwroot/appsettings.json index ca9f6c0791..b70017b1eb 100644 --- a/examples/FluentUI.Demo.Client/wwwroot/appsettings.json +++ b/examples/FluentUI.Demo.Client/wwwroot/appsettings.json @@ -1,3 +1,3 @@ { - "FluentWebComponentsScriptSource": "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js" + "_FluentWebComponentsScriptSource": "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js" } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs index 56b83c331b..d5dfd07e5d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs @@ -19,9 +19,12 @@ public class DesignToken : IAsyncDisposable private DesignToken(IJSRuntime jsRuntime, IConfiguration configuration) { + string scriptSource = "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"; + if (!string.IsNullOrEmpty(configuration["FluentWebComponentsScriptSource"])) + scriptSource = configuration["FluentWebComponentsScriptSource"]; moduleTask = new(() => jsRuntime.InvokeAsync( - "import", configuration["FluentWebComponentsScriptSource"]).AsTask()); + "import", scriptSource).AsTask()); } /// From 1d872ed30cf54f3ffa68d1182126ee63d8d18696 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 19 Apr 2022 20:41:13 +0200 Subject: [PATCH 23/34] Move to class per design token Add ControlCornerRadius example --- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 27 ++- .../Shared/MainLayout.razor.cs | 6 +- .../DesignTokens/AccentFillActiveDelta.cs | 20 ++ .../DesignTokens/AccentFillFocusDelta.cs | 20 ++ .../DesignTokens/AccentFillHoverDelta.cs | 20 ++ .../DesignTokens/AccentFillRestDelta.cs | 20 ++ .../AccentForegroundActiveDelta.cs | 20 ++ .../AccentForegroundFocusDelta.cs | 20 ++ .../AccentForegroundHoverDelta.cs | 20 ++ .../DesignTokens/AccentForegroundRestDelta.cs | 20 ++ .../DesignTokens/BaseHeightMultiplier.cs | 20 ++ .../BaseHorizontalSpacingMultiplier.cs | 20 ++ .../DesignTokens/BaseLayerLuminance.cs | 20 ++ .../DesignTokens/BodyFont.cs | 20 ++ .../DesignTokens/ControlCornerRadius.cs | 20 ++ .../DesignTokens/Density.cs | 20 ++ .../DesignTokens/DesignToken.cs | 177 ++++++++---------- .../DesignTokens/DesignTokens.cs | 112 +++++------ .../DesignTokens/DesignUnit.cs | 20 ++ .../DesignTokens/Direction.cs | 20 ++ .../DesignTokens/DisabledOpacity.cs | 20 ++ .../DesignTokens/FocusStrokeWidth.cs | 20 ++ .../DesignTokens/IDesignToken.cs | 14 ++ .../DesignTokens/NeutralFillActiveDelta.cs | 20 ++ .../DesignTokens/NeutralFillFocusDelta.cs | 20 ++ .../DesignTokens/NeutralFillHoverDelta.cs | 20 ++ .../NeutralFillInputActiveDelta.cs | 20 ++ .../NeutralFillInputFocusDelta.cs | 20 ++ .../NeutralFillInputHoverDelta.cs | 20 ++ .../DesignTokens/NeutralFillInputRestDelta.cs | 20 ++ .../DesignTokens/NeutralFillLayerRestDelta.cs | 20 ++ .../DesignTokens/NeutralFillRestDelta.cs | 20 ++ .../NeutralFillStealthActiveDelta.cs | 20 ++ .../NeutralFillStealthFocusDelta.cs | 20 ++ .../NeutralFillStealthHoverDelta.cs | 20 ++ .../NeutralFillStealthRestDelta.cs | 20 ++ .../NeutralFillStrongActiveDelta.cs | 20 ++ .../NeutralFillStrongFocusDelta.cs | 20 ++ .../NeutralFillStrongHoverDelta.cs | 20 ++ .../NeutralFillStrongRestDelta.cs | 20 ++ .../DesignTokens/NeutralStrokeActiveDelta.cs | 20 ++ .../NeutralStrokeDividerRestDelta.cs | 20 ++ .../DesignTokens/NeutralStrokeFocusDelta.cs | 20 ++ .../DesignTokens/NeutralStrokeHoverDelta.cs | 20 ++ .../DesignTokens/NeutralStrokeRestDelta.cs | 20 ++ .../DesignTokens/StrokeWidth.cs | 20 ++ .../DesignTokens/TypeRampBaseFontSize.cs | 20 ++ .../DesignTokens/TypeRampBaseLineHeight.cs | 20 ++ .../DesignTokens/TypeRampMinus1FontSize.cs | 20 ++ .../DesignTokens/TypeRampMinus1LineHeight.cs | 20 ++ .../DesignTokens/TypeRampMinus2FontSize.cs | 20 ++ .../DesignTokens/TypeRampMinus2LineHeight.cs | 20 ++ .../DesignTokens/TypeRampPlus1FontSize.cs | 20 ++ .../DesignTokens/TypeRampPlus1LineHeight.cs | 20 ++ .../DesignTokens/TypeRampPlus2FontSize.cs | 20 ++ .../DesignTokens/TypeRampPlus2LineHeight.cs | 20 ++ .../DesignTokens/TypeRampPlus3FontSize.cs | 20 ++ .../DesignTokens/TypeRampPlus3LineHeight.cs | 20 ++ .../DesignTokens/TypeRampPlus4FontSize.cs | 20 ++ .../DesignTokens/TypeRampPlus4LineHeight.cs | 20 ++ .../DesignTokens/TypeRampPlus5FontSize.cs | 20 ++ .../DesignTokens/TypeRampPlus5LineHeight.cs | 20 ++ .../DesignTokens/TypeRampPlus6FontSize.cs | 20 ++ .../DesignTokens/TypeRampPlus6LineHeight.cs | 20 ++ .../Microsoft.Fast.Components.FluentUI.csproj | 4 + .../ServiceCollectionExtensions.cs | 62 +++++- 66 files changed, 1415 insertions(+), 167 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 0dc85632bb..96c8250513 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -7,7 +7,13 @@ namespace FluentUI.Demo.Shared.Pages; public partial class Index { [Inject] - private DesignTokens DesignTokens { get; set; } = default!; + private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; + + [Inject] + private BaseHeightMultiplier BaseHeightMultiplier { get; set; } = default!; + + [Inject] + private ControlCornerRadius ControlCornerRadius { get; set; } = default!; private FluentAnchor ref1 = default!; private FluentAnchor ref2 = default!; @@ -21,22 +27,23 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { - await DesignTokens.BaseLayerLuminance.SetValueFor(ref1.Element, 0); + await BaseLayerLuminance.SetValueFor(ref1.Element, 0); //Enabling this line below will generate an error because no default is set //await DesignTokens.BaseHeightMultiplier.SetValueFor(ref2.Element); - await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + //await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + await BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + + + theValueBeforeDelete = await BaseHeightMultiplier.GetValueFor(ref4.Element); + await BaseHeightMultiplier.SetValueFor(ref4.Element, 52); - theValueBeforeDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element); + await ControlCornerRadius.SetValueFor(ref4.Element, 15); - await DesignTokens.BaseHeightMultiplier.SetValueFor(ref4.Element, 52); - //ToDo: Create your own DesingToken - //DesignToken specialColor = new(jsRuntime!, "specialColor"); - //await specialColor.SetValueFor(ref3.Element, "#FF0000"); StateHasChanged(); } @@ -44,8 +51,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender) public async Task OnClick() { - await DesignTokens.BaseHeightMultiplier.DeleteValueFor(ref4.Element); + await BaseHeightMultiplier.DeleteValueFor(ref4.Element); - theValueAfterDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element); + theValueAfterDelete = await BaseHeightMultiplier.GetValueFor(ref4.Element); } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs index 27ce6032ca..0da02c6832 100644 --- a/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs +++ b/examples/FluentUI.Demo.Shared/Shared/MainLayout.razor.cs @@ -9,10 +9,10 @@ namespace FluentUI.Demo.Shared public partial class MainLayout { [Inject] - IJSRuntime JSRuntime { get; set; } = default!; + private IJSRuntime JSRuntime { get; set; } = default!; [Inject] - DesignTokens DesignTokens { get; set; } = default!; + private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; ElementReference container; @@ -42,7 +42,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (!firstRender) { - await DesignTokens.BaseLayerLuminance.SetValueFor(container, baseLayerLuminance); + await BaseLayerLuminance.SetValueFor(container, baseLayerLuminance); //await DesignTokens.Direction.SetValueFor(container, dir.ToString()); } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs new file mode 100644 index 0000000000..90537c3065 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillActiveDelta design token +/// +public sealed class AccentFillActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentFillActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs new file mode 100644 index 0000000000..5cc1419bd3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillFocusDelta design token +/// +public sealed class AccentFillFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentFillFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs new file mode 100644 index 0000000000..639e5d902f --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillHoverDelta design token +/// +public sealed class AccentFillHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentFillHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs new file mode 100644 index 0000000000..f02d0f3f27 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillRestDelta design token +/// +public sealed class AccentFillRestDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentFillRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs new file mode 100644 index 0000000000..e328b8c03b --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentForegroundActiveDelta design token +/// +public sealed class AccentForegroundActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentForegroundActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentForegroundActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentForegroundActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs new file mode 100644 index 0000000000..cbb4611dd1 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentForegroundFocusDelta design token +/// +public sealed class AccentForegroundFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentForegroundFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentForegroundFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentForegroundFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs new file mode 100644 index 0000000000..c5df05850c --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentForegroundHoverDelta design token +/// +public sealed class AccentForegroundHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentForegroundHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentForegroundHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentForegroundHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs new file mode 100644 index 0000000000..87be0c9170 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentForegroundRestDelta design token +/// +public sealed class AccentForegroundRestDelta : DesignToken +{ + /// + /// Constructs an instance of the AccentForegroundRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentForegroundRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentForegroundRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs new file mode 100644 index 0000000000..6870d984b0 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The BaseHeightMultiplier design token +/// +public sealed class BaseHeightMultiplier : DesignToken +{ + /// + /// Constructs an instance of a BaseHeightMultiplier design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public BaseHeightMultiplier(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.BaseHeightMultiplier; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs new file mode 100644 index 0000000000..8d5d4fc51e --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The BaseHorizontalSpacingMultiplier design token +/// +public sealed class BaseHorizontalSpacingMultiplier : DesignToken +{ + /// + /// Constructs an instance of the BaseHorizontalSpacingMultiplier design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public BaseHorizontalSpacingMultiplier(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.BaseHorizontalSpacingMultiplier; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs new file mode 100644 index 0000000000..3e4dcccc76 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The BaseLayerLuminance design token +/// +public sealed class BaseLayerLuminance : DesignToken +{ + /// + /// Constructs an instance of the BaseLayerLuminance design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public BaseLayerLuminance(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.BaseLayerLuminance; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs new file mode 100644 index 0000000000..de3da5f20d --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The BodyFont design token +/// +public class BodyFont : DesignToken +{ + /// + /// Constructs an instance of the BodyFont design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public BodyFont(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.BodyFont; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs new file mode 100644 index 0000000000..04e0c8d7f4 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The ControlCornerRadius design token +/// +public sealed class ControlCornerRadius : DesignToken +{ + /// + /// Constructs an instance of the ControlCornerRadius design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public ControlCornerRadius(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.ControlCornerRadius; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs new file mode 100644 index 0000000000..e403e2fc72 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The Density design token +/// +public sealed class Density : DesignToken +{ + /// + /// Constructs an instance of the Density design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public Density(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.Density; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs index d5dfd07e5d..38ebf80dd3 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs @@ -3,121 +3,104 @@ using Microsoft.Extensions.Configuration; using Microsoft.JSInterop; -namespace Microsoft.Fast.Components.FluentUI.DesignTokens +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +public class DesignToken : IDesignToken, IAsyncDisposable { - public class DesignToken : IAsyncDisposable - { - private readonly Lazy> moduleTask; + private readonly Lazy> moduleTask; - private T? _defaultValue; + private T? _defaultValue; - /// - /// Gets the name of this design token - /// - public string? Name { get; private set; } + /// + /// Gets the name of this design token + /// + public string? Name { get; init; } - private DesignToken(IJSRuntime jsRuntime, IConfiguration configuration) - { - string scriptSource = "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"; - if (!string.IsNullOrEmpty(configuration["FluentWebComponentsScriptSource"])) - scriptSource = configuration["FluentWebComponentsScriptSource"]; - - moduleTask = new(() => jsRuntime.InvokeAsync( - "import", scriptSource).AsTask()); - } - - /// - /// Constructs an instance of a DesignToken. - /// - public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration, string name) : this(jsRuntime, configuration) - { - Name = name; + /// + /// Constructs an instance of a DesignToken. + /// + public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration) + { + string scriptSource = configuration["FluentWebComponentsScriptSource"] ?? "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"; - //WIP: Create your own token - //bool hasField = typeof(Constants).GetFields(BindingFlags.Public | BindingFlags.Static). - // Select(x => x.GetRawConstantValue()?.ToString()).Contains(name); + moduleTask = new(() => jsRuntime.InvokeAsync( + "import", scriptSource).AsTask()); + } - //if (!hasField) - //{ - // Create(name); - //} + /// + /// Constructs an instance of a DesignToken. + /// + public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration, string name) : this(jsRuntime, configuration) + { + Name = name; + } - } + /// + /// Sets the default value of this token + /// + public DesignToken WithDefault(T value) + { + _defaultValue = value; + return this; + } - //WIP: Create your own token - //private async ValueTask Create(string name) - //{ - // IJSObjectReference module = await moduleTask.Value; - // await module.InvokeVoidAsync(Name + ".create", typeof(T), name); - //} - - /// - /// Sets the default value of this token - /// - public DesignToken WithDefault(T value) - { - _defaultValue = value; - return this; - } + /// + /// Sets the value of the for the associated to the default value + /// + /// the associated + /// + public async ValueTask SetValueFor(ElementReference element) + { + if (_defaultValue == null) + throw new Exception("WithDefault should be called before calling SetValueFor"); - /// - /// Sets the value of the for the associated to the default value - /// - /// the associated - /// - public async ValueTask SetValueFor(ElementReference element) - { - if (_defaultValue == null) - throw new Exception("WithDefault should be called before calling SetValueFor"); + await SetValueFor(element, _defaultValue); + } - await SetValueFor(element, _defaultValue); - } + /// + /// Sets the value of the for the associated to the supplied value + /// + /// the associated + /// the value to set + /// + public async ValueTask SetValueFor(ElementReference element, T value) + { + IJSObjectReference module = await moduleTask.Value; + await module.InvokeVoidAsync(Name + ".setValueFor", element, value); + } - /// - /// Sets the value of the for the associated to the supplied value - /// - /// the associated - /// the value to set - /// - public async ValueTask SetValueFor(ElementReference element, T value) - { - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync(Name + ".setValueFor", element, value); - } + /// + /// Deletes the set value for the associated + /// + /// the associated + /// + public async ValueTask DeleteValueFor(ElementReference element) + { + IJSObjectReference module = await moduleTask.Value; + await module.InvokeVoidAsync(Name + ".deleteValueFor", element); + } - /// - /// Deletes the set value for the associated - /// - /// the associated - /// - public async ValueTask DeleteValueFor(ElementReference element) - { - IJSObjectReference module = await moduleTask.Value; - await module.InvokeVoidAsync(Name + ".deleteValueFor", element); - } + /// + /// Gets the set value for the associated + /// + /// the associated + /// the value + public async ValueTask GetValueFor(ElementReference element) + { + IJSObjectReference module = await moduleTask.Value; + return await module.InvokeAsync(Name + ".getValueFor", element); + } - /// - /// Gets the set value for the associated - /// - /// the associated - /// the value - public async ValueTask GetValueFor(ElementReference element) + [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "Not needed")] + public async ValueTask DisposeAsync() + { + if (moduleTask.IsValueCreated) { IJSObjectReference module = await moduleTask.Value; - return await module.InvokeAsync(Name + ".getValueFor", element); + await module.DisposeAsync(); } - [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "Not needed")] - public async ValueTask DisposeAsync() - { - if (moduleTask.IsValueCreated) - { - IJSObjectReference module = await moduleTask.Value; - await module.DisposeAsync(); - } - - } } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs index 2be3e800ab..f0dc9680b5 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs @@ -7,63 +7,63 @@ public class DesignTokens { public DesignToken BodyFont { get; set; } public DesignToken BaseHeightMultiplier { get; set; } - public DesignToken BaseHorizontalSpacingMultiplier { get; set; } - public DesignToken BaseLayerLuminance { get; set; } - public DesignToken ControlCornerRadius { get; set; } - public DesignToken Density { get; set; } - public DesignToken DesignUnit { get; set; } + public DesignToken BaseHorizontalSpacingMultiplier { get; set; } + public DesignToken BaseLayerLuminance { get; set; } + public DesignToken ControlCornerRadius { get; set; } + public DesignToken Density { get; set; } + public DesignToken DesignUnit { get; set; } public DesignToken Direction { get; set; } - public DesignToken DisabledOpacity { get; set; } - public DesignToken StrokeWidth { get; set; } - public DesignToken FocusStrokeWidth { get; set; } - public DesignToken TypeRampBaseFontSize { get; set; } - public DesignToken TypeRampBaseLineHeight { get; set; } - public DesignToken TypeRampMinus1FontSize { get; set; } - public DesignToken TypeRampMinus1LineHeight { get; set; } - public DesignToken TypeRampMinus2FontSize { get; set; } - public DesignToken TypeRampMinus2LineHeight { get; set; } - public DesignToken TypeRampPlus1FontSize { get; set; } - public DesignToken TypeRampPlus1LineHeight { get; set; } - public DesignToken TypeRampPlus2FontSize { get; set; } - public DesignToken TypeRampPlus2LineHeight { get; set; } - public DesignToken TypeRampPlus3FontSize { get; set; } - public DesignToken TypeRampPlus3LineHeight { get; set; } - public DesignToken TypeRampPlus4FontSize { get; set; } - public DesignToken TypeRampPlus4LineHeight { get; set; } - public DesignToken TypeRampPlus5FontSize { get; set; } - public DesignToken TypeRampPlus5LineHeight { get; set; } - public DesignToken TypeRampPlus6FontSize { get; set; } - public DesignToken TypeRampPlus6LineHeight { get; set; } - public DesignToken AccentFillRestDelta { get; set; } - public DesignToken AccentFillHoverDelta { get; set; } - public DesignToken AccentFillActiveDelta { get; set; } - public DesignToken AccentFillFocusDelta { get; set; } - public DesignToken AccentForegroundRestDelta { get; set; } - public DesignToken AccentForegroundHoverDelta { get; set; } - public DesignToken AccentForegroundActiveDelta { get; set; } - public DesignToken AccentForegroundFocusDelta { get; set; } - public DesignToken NeutralFillRestDelta { get; set; } - public DesignToken NeutralFillHoverDelta { get; set; } - public DesignToken NeutralFillActiveDelta { get; set; } - public DesignToken NeutralFillFocusDelta { get; set; } - public DesignToken NeutralFillInputRestDelta { get; set; } - public DesignToken NeutralFillInputHoverDelta { get; set; } - public DesignToken NeutralFillInputActiveDelta { get; set; } - public DesignToken NeutralFillInputFocusDelta { get; set; } - public DesignToken NeutralFillStealthRestDelta { get; set; } - public DesignToken NeutralFillStealthHoverDelta { get; set; } - public DesignToken NeutralFillStealthActiveDelta { get; set; } - public DesignToken NeutralFillStealthFocusDelta { get; set; } - public DesignToken NeutralFillStrongRestDelta { get; set; } - public DesignToken NeutralFillStrongHoverDelta { get; set; } - public DesignToken NeutralFillStrongActiveDelta { get; set; } - public DesignToken NeutralFillStrongFocusDelta { get; set; } - public DesignToken NeutralFillLayerRestDelta { get; set; } - public DesignToken NeutralStrokeRestDelta { get; set; } - public DesignToken NeutralStrokeHoverDelta { get; set; } - public DesignToken NeutralStrokeActiveDelta { get; set; } - public DesignToken NeutralStrokeFocusDelta { get; set; } - public DesignToken NeutralStrokeDividerRestDelta { get; set; } + public DesignToken DisabledOpacity { get; set; } + public DesignToken StrokeWidth { get; set; } + public DesignToken FocusStrokeWidth { get; set; } + public DesignToken TypeRampBaseFontSize { get; set; } + public DesignToken TypeRampBaseLineHeight { get; set; } + public DesignToken TypeRampMinus1FontSize { get; set; } + public DesignToken TypeRampMinus1LineHeight { get; set; } + public DesignToken TypeRampMinus2FontSize { get; set; } + public DesignToken TypeRampMinus2LineHeight { get; set; } + public DesignToken TypeRampPlus1FontSize { get; set; } + public DesignToken TypeRampPlus1LineHeight { get; set; } + public DesignToken TypeRampPlus2FontSize { get; set; } + public DesignToken TypeRampPlus2LineHeight { get; set; } + public DesignToken TypeRampPlus3FontSize { get; set; } + public DesignToken TypeRampPlus3LineHeight { get; set; } + public DesignToken TypeRampPlus4FontSize { get; set; } + public DesignToken TypeRampPlus4LineHeight { get; set; } + public DesignToken TypeRampPlus5FontSize { get; set; } + public DesignToken TypeRampPlus5LineHeight { get; set; } + public DesignToken TypeRampPlus6FontSize { get; set; } + public DesignToken TypeRampPlus6LineHeight { get; set; } + public DesignToken AccentFillRestDelta { get; set; } + public DesignToken AccentFillHoverDelta { get; set; } + public DesignToken AccentFillActiveDelta { get; set; } + public DesignToken AccentFillFocusDelta { get; set; } + public DesignToken AccentForegroundRestDelta { get; set; } + public DesignToken AccentForegroundHoverDelta { get; set; } + public DesignToken AccentForegroundActiveDelta { get; set; } + public DesignToken AccentForegroundFocusDelta { get; set; } + public DesignToken NeutralFillRestDelta { get; set; } + public DesignToken NeutralFillHoverDelta { get; set; } + public DesignToken NeutralFillActiveDelta { get; set; } + public DesignToken NeutralFillFocusDelta { get; set; } + public DesignToken NeutralFillInputRestDelta { get; set; } + public DesignToken NeutralFillInputHoverDelta { get; set; } + public DesignToken NeutralFillInputActiveDelta { get; set; } + public DesignToken NeutralFillInputFocusDelta { get; set; } + public DesignToken NeutralFillStealthRestDelta { get; set; } + public DesignToken NeutralFillStealthHoverDelta { get; set; } + public DesignToken NeutralFillStealthActiveDelta { get; set; } + public DesignToken NeutralFillStealthFocusDelta { get; set; } + public DesignToken NeutralFillStrongRestDelta { get; set; } + public DesignToken NeutralFillStrongHoverDelta { get; set; } + public DesignToken NeutralFillStrongActiveDelta { get; set; } + public DesignToken NeutralFillStrongFocusDelta { get; set; } + public DesignToken NeutralFillLayerRestDelta { get; set; } + public DesignToken NeutralStrokeRestDelta { get; set; } + public DesignToken NeutralStrokeHoverDelta { get; set; } + public DesignToken NeutralStrokeActiveDelta { get; set; } + public DesignToken NeutralStrokeFocusDelta { get; set; } + public DesignToken NeutralStrokeDividerRestDelta { get; set; } public DesignTokens(IJSRuntime jsRuntime, IConfiguration configuration) { diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs new file mode 100644 index 0000000000..0752d2bee9 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The DesignUnit design token +/// +public sealed class DesignUnit : DesignToken +{ + /// + /// Constructs an instance of the DesignUnit design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public DesignUnit(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.DesignUnit; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs new file mode 100644 index 0000000000..dce1b744d3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The Direction design token +/// +public sealed class Direction : DesignToken +{ + /// + /// Constructs an instance of the Direction design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public Direction(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.Direction; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs new file mode 100644 index 0000000000..3c70848ff8 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The DisabledOpacity design token +/// +public sealed class DisabledOpacity : DesignToken +{ + /// + /// Constructs an instance of a DisabledOpacity design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public DisabledOpacity(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.DisabledOpacity; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs new file mode 100644 index 0000000000..4be425da05 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The FocusStrokeWidth design token +/// +public sealed class FocusStrokeWidth : DesignToken +{ + /// + /// Constructs an instance of the FocusStrokeWidth design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public FocusStrokeWidth(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.FocusStrokeWidth; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs new file mode 100644 index 0000000000..36ac46c1b3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs @@ -0,0 +1,14 @@ +using Microsoft.AspNetCore.Components; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +public interface IDesignToken +{ + string? Name { get; init; } + + ValueTask DeleteValueFor(ElementReference element); + ValueTask GetValueFor(ElementReference element); + ValueTask SetValueFor(ElementReference element); + ValueTask SetValueFor(ElementReference element, T value); + DesignToken WithDefault(T value); +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs new file mode 100644 index 0000000000..e026f82d01 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillActiveDelta design token +/// +public sealed class NeutralFillActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs new file mode 100644 index 0000000000..8b993915c3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillFocusDelta design token +/// +public sealed class NeutralFillFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs new file mode 100644 index 0000000000..9fb76a7861 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillHoverDelta design token +/// +public sealed class NeutralFillHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs new file mode 100644 index 0000000000..60e176f7a8 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillInputActiveDelta design token +/// +public sealed class NeutralFillInputActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillInputActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillInputActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillInputActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs new file mode 100644 index 0000000000..e3d39bbcd6 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillInputFocusDelta design token +/// +public sealed class NeutralFillInputFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillInputFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillInputFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillInputFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs new file mode 100644 index 0000000000..9df40e8923 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillInputHoverDelta design token +/// +public sealed class NeutralFillInputHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillInputHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillInputHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillInputHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs new file mode 100644 index 0000000000..f5d693fea6 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillInputRestDelta design token +/// +public sealed class NeutralFillInputRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillInputRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillInputRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillInputRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs new file mode 100644 index 0000000000..8771d7e869 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillLayerRestDelta design token +/// +public sealed class NeutralFillLayerRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillLayerRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillLayerRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillLayerRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs new file mode 100644 index 0000000000..72e3e143f7 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillRestDelta design token +/// +public sealed class NeutralFillRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs new file mode 100644 index 0000000000..2bacfb705e --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStealthActiveDelta design token +/// +public sealed class NeutralFillStealthActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStealthActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStealthActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStealthActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs new file mode 100644 index 0000000000..2698724678 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStealthFocusDelta design token +/// +public sealed class NeutralFillStealthFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStealthFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStealthFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStealthFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs new file mode 100644 index 0000000000..20f2938b3a --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStealthHoverDelta design token +/// +public sealed class NeutralFillStealthHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStealthHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStealthHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStealthHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs new file mode 100644 index 0000000000..8fb81b504c --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStealthRestDelta design token +/// +public sealed class NeutralFillStealthRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStealthRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStealthRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStealthRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs new file mode 100644 index 0000000000..d4df3ce114 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongActiveDelta design token +/// +public sealed class NeutralFillStrongActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStrongActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs new file mode 100644 index 0000000000..b7f2246478 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongFocusDelta design token +/// +public sealed class NeutralFillStrongFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStrongFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs new file mode 100644 index 0000000000..8c409feaa4 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongHoverDelta design token +/// +public sealed class NeutralFillStrongHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStrongHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs new file mode 100644 index 0000000000..55bab398e8 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongRestDelta design token +/// +public sealed class NeutralFillStrongRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralFillStrongRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs new file mode 100644 index 0000000000..64049e198d --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeActiveDelta design token +/// +public sealed class NeutralStrokeActiveDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralStrokeActiveDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeActiveDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs new file mode 100644 index 0000000000..da42973d5a --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeDividerRestDelta design token +/// +public sealed class NeutralStrokeDividerRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralStrokeDividerRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeDividerRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeDividerRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs new file mode 100644 index 0000000000..ae9be2be14 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeFocusDelta design token +/// +public sealed class NeutralStrokeFocusDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralStrokeFocusDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeFocusDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs new file mode 100644 index 0000000000..dcf1979830 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeHoverDelta design token +/// +public sealed class NeutralStrokeHoverDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralStrokeHoverDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeHoverDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs new file mode 100644 index 0000000000..4cea18ce8d --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeRestDelta design token +/// +public sealed class NeutralStrokeRestDelta : DesignToken +{ + /// + /// Constructs an instance of the NeutralStrokeRestDelta design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeRestDelta; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs new file mode 100644 index 0000000000..0be4712418 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The StrokeWidth design token +/// +public sealed class StrokeWidth : DesignToken +{ + /// + /// Constructs an instance of the StrokeWidth design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public StrokeWidth(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.StrokeWidth; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs new file mode 100644 index 0000000000..f54e8ba44e --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampBaseFontSize design token +/// +public sealed class TypeRampBaseFontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampBaseFontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampBaseFontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampBaseFontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs new file mode 100644 index 0000000000..b71079ce9c --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampBaseLineHeight design token +/// +public sealed class TypeRampBaseLineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampBaseLineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampBaseLineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampBaseLineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs new file mode 100644 index 0000000000..43397bd658 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampMinus1FontSize design token +/// +public sealed class TypeRampMinus1FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampMinus1FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampMinus1FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampMinus1FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs new file mode 100644 index 0000000000..2ce456a1cd --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampMinus1LineHeight design token +/// +public sealed class TypeRampMinus1LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampMinus1LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampMinus1LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampMinus1LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs new file mode 100644 index 0000000000..1aaefd9fd2 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampMinus2FontSize design token +/// +public sealed class TypeRampMinus2FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampMinus2FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampMinus2FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampMinus2FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs new file mode 100644 index 0000000000..d878f4b206 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampMinus2LineHeight design token +/// +public sealed class TypeRampMinus2LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampMinus2LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampMinus2LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampMinus2LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs new file mode 100644 index 0000000000..fd2707e817 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus1FontSize design token +/// +public sealed class TypeRampPlus1FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus1FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus1FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus1FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs new file mode 100644 index 0000000000..80d195884e --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus1LineHeight design token +/// +public sealed class TypeRampPlus1LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus1LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus1LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus1LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs new file mode 100644 index 0000000000..98e20e0c95 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus2FontSize design token +/// +public sealed class TypeRampPlus2FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus2FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus2FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus2FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs new file mode 100644 index 0000000000..eec3bdd212 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus2LineHeight design token +/// +public sealed class TypeRampPlus2LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus2LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus2LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus2LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs new file mode 100644 index 0000000000..c0d43b19a8 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus3FontSize design token +/// +public sealed class TypeRampPlus3FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus3FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus3FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus3FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs new file mode 100644 index 0000000000..320dab6b1e --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus3LineHeight design token +/// +public sealed class TypeRampPlus3LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus3LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus3LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus3LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs new file mode 100644 index 0000000000..12f7461d1b --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus4FontSize design token +/// +public sealed class TypeRampPlus4FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus4FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus4FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus4FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs new file mode 100644 index 0000000000..6840249c22 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus4LineHeight design token +/// +public sealed class TypeRampPlus4LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus4LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus4LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus4LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs new file mode 100644 index 0000000000..e256032426 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus5FontSize design token +/// +public sealed class TypeRampPlus5FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus5FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus5FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus5FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs new file mode 100644 index 0000000000..e34947bc4b --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus5LineHeight design token +/// +public sealed class TypeRampPlus5LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus5LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus5LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus5LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs new file mode 100644 index 0000000000..516dd3a7b2 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus6FontSize design token +/// +public sealed class TypeRampPlus6FontSize : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus6FontSize design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus6FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus6FontSize; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs new file mode 100644 index 0000000000..c635c07e4e --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The TypeRampPlus6LineHeight design token +/// +public sealed class TypeRampPlus6LineHeight : DesignToken +{ + /// + /// Constructs an instance of the TypeRampPlus6LineHeight design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public TypeRampPlus6LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.TypeRampPlus6LineHeight; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index f8ba4da36c..3f1352bca2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -41,6 +41,10 @@ True + + + + True diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs index a35b70faf5..d468411281 100644 --- a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -1,4 +1,5 @@ using Microsoft.Extensions.DependencyInjection; +using Microsoft.Fast.Components.FluentUI.DesignTokens; namespace Microsoft.Fast.Components.FluentUI; @@ -7,6 +8,65 @@ public static class ServiceCollectionExtensions public static void AddFluentUIComponents(this IServiceCollection services) { services.AddScoped(); - services.AddScoped(); + + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); } } \ No newline at end of file From b50b71d9a270eb46a7c2afccfda1f08fea1ae98f Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 19 Apr 2022 21:31:10 +0200 Subject: [PATCH 24/34] Replace fdsp with plain div in NavMenu Replase fdsp in ToolbarPage Add missing FillColor design token --- .../Pages/FlipperPage.razor | 1 + .../Pages/ToolbarPage.razor | 29 +++++++++++++++---- .../FluentUI.Demo.Shared/Shared/NavMenu.razor | 4 +-- examples/FluentUI.Demo.Shared/_Imports.razor | 1 + .../DesignTokens/Constant.cs | 1 + .../DesignTokens/FillColor.cs | 20 +++++++++++++ .../ServiceCollectionExtensions.cs | 1 + 7 files changed, 49 insertions(+), 8 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs diff --git a/examples/FluentUI.Demo.Shared/Pages/FlipperPage.razor b/examples/FluentUI.Demo.Shared/Pages/FlipperPage.razor index d1975e0b55..66a4851ae6 100644 --- a/examples/FluentUI.Demo.Shared/Pages/FlipperPage.razor +++ b/examples/FluentUI.Demo.Shared/Pages/FlipperPage.razor @@ -1,4 +1,5 @@ @page "/FlipperPage" +@using Direction = Microsoft.Fast.Components.FluentUI.Direction

Flipper

Default

diff --git a/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor b/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor index b314c064f0..74e165944c 100644 --- a/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor +++ b/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor @@ -1,4 +1,6 @@ @page "/ToolbarPage" +@inject FillColor FillColor +@inject BaseLayerLuminance BaseLayerLuminance @@ -42,8 +44,8 @@

Dark Mode

- - +
+ Add Open @@ -61,11 +63,11 @@ - +

Slotted End Items w/ Min Width

- - +
+ Add @@ -82,7 +84,7 @@ - +

Toolbar with slotted span label

@@ -174,4 +176,19 @@ @code{ string? comboboxValue; + FluentToolbar? Toolbar1; + FluentToolbar? Toolbar2; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await FillColor.SetValueFor(Toolbar1!.Element, "#333"); + await FillColor.SetValueFor(Toolbar2!.Element, "#333"); + await BaseLayerLuminance.SetValueFor(Toolbar1!.Element, 0); + await BaseLayerLuminance.SetValueFor(Toolbar2!.Element, 0); + + StateHasChanged(); + } + } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Shared/NavMenu.razor b/examples/FluentUI.Demo.Shared/Shared/NavMenu.razor index 42825fff8a..2e8e94b4a0 100644 --- a/examples/FluentUI.Demo.Shared/Shared/NavMenu.razor +++ b/examples/FluentUI.Demo.Shared/Shared/NavMenu.razor @@ -1,7 +1,7 @@ @inject NavigationManager navigationmanager - + @code { diff --git a/examples/FluentUI.Demo.Shared/_Imports.razor b/examples/FluentUI.Demo.Shared/_Imports.razor index ad25069ee3..cb7d1220b6 100644 --- a/examples/FluentUI.Demo.Shared/_Imports.razor +++ b/examples/FluentUI.Demo.Shared/_Imports.razor @@ -4,4 +4,5 @@ @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using Microsoft.Fast.Components.FluentUI +@using Microsoft.Fast.Components.FluentUI.DesignTokens @using FluentUI.Demo.Shared.Pages \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs index d5e1f17119..2e74692699 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs @@ -12,6 +12,7 @@ public class Constants public const string Direction = "direction"; public const string DisabledOpacity = "disabledOpacity"; public const string StrokeWidth = "strokeWidth"; + public const string FillColor = "fillColor"; public const string FocusStrokeWidth = "focusStrokeWidth"; public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs new file mode 100644 index 0000000000..15361a84ee --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The FillColor design token +/// +public sealed class FillColor : DesignToken +{ + /// + /// Constructs an instance of the FillColor design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public FillColor(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.FillColor; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs index d468411281..be0fc55200 100644 --- a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -19,6 +19,7 @@ public static void AddFluentUIComponents(this IServiceCollection services) services.AddTransient(); services.AddTransient(); services.AddTransient(); + services.AddTransient(); services.AddTransient(); services.AddTransient(); services.AddTransient(); From e1ac1a3b9436bd26d626e017dae41317711719e1 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Wed, 20 Apr 2022 16:51:55 +0200 Subject: [PATCH 25/34] Make DesignToken a component so it can be used from .razor as well Add parameterless constructor to all design tokens --- .../FluentUI.Demo.Shared/Pages/CardPage.razor | 177 +++++++++--------- .../DesignTokens/AccentFillActiveDelta.cs | 5 + .../DesignTokens/AccentFillFocusDelta.cs | 5 + .../DesignTokens/AccentFillHoverDelta.cs | 5 + .../DesignTokens/AccentFillRestDelta.cs | 5 + .../AccentForegroundActiveDelta.cs | 5 + .../AccentForegroundFocusDelta.cs | 5 + .../AccentForegroundHoverDelta.cs | 5 + .../DesignTokens/AccentForegroundRestDelta.cs | 5 + .../DesignTokens/BaseHeightMultiplier.cs | 5 + .../BaseHorizontalSpacingMultiplier.cs | 5 + .../DesignTokens/BaseLayerLuminance.cs | 8 + .../DesignTokens/BodyFont.cs | 5 + .../DesignTokens/ControlCornerRadius.cs | 5 + .../DesignTokens/Density.cs | 5 + .../DesignTokens/DesignToken.razor | 5 + .../{DesignToken.cs => DesignToken.razor.cs} | 63 +++++-- .../DesignTokens/DesignUnit.cs | 5 + .../DesignTokens/Direction.cs | 5 + .../DesignTokens/DisabledOpacity.cs | 5 + .../DesignTokens/FillColor.cs | 8 + .../DesignTokens/FocusStrokeWidth.cs | 5 + .../DesignTokens/NeutralFillActiveDelta.cs | 5 + .../DesignTokens/NeutralFillFocusDelta.cs | 5 + .../DesignTokens/NeutralFillHoverDelta.cs | 5 + .../NeutralFillInputActiveDelta.cs | 5 + .../NeutralFillInputFocusDelta.cs | 5 + .../NeutralFillInputHoverDelta.cs | 5 + .../DesignTokens/NeutralFillInputRestDelta.cs | 5 + .../DesignTokens/NeutralFillLayerRestDelta.cs | 5 + .../DesignTokens/NeutralFillRestDelta.cs | 5 + .../NeutralFillStealthActiveDelta.cs | 5 + .../NeutralFillStealthFocusDelta.cs | 6 + .../NeutralFillStealthHoverDelta.cs | 5 + .../NeutralFillStealthRestDelta.cs | 5 + .../NeutralFillStrongActiveDelta.cs | 5 + .../NeutralFillStrongFocusDelta.cs | 5 + .../NeutralFillStrongHoverDelta.cs | 5 + .../NeutralFillStrongRestDelta.cs | 5 + .../DesignTokens/NeutralStrokeActiveDelta.cs | 5 + .../NeutralStrokeDividerRestDelta.cs | 5 + .../DesignTokens/NeutralStrokeFocusDelta.cs | 5 + .../DesignTokens/NeutralStrokeHoverDelta.cs | 5 + .../DesignTokens/NeutralStrokeRestDelta.cs | 5 + .../DesignTokens/StrokeWidth.cs | 5 + .../DesignTokens/TypeRampBaseFontSize.cs | 5 + .../DesignTokens/TypeRampBaseLineHeight.cs | 5 + .../DesignTokens/TypeRampMinus1FontSize.cs | 5 + .../DesignTokens/TypeRampMinus1LineHeight.cs | 5 + .../DesignTokens/TypeRampMinus2FontSize.cs | 5 + .../DesignTokens/TypeRampMinus2LineHeight.cs | 5 + .../DesignTokens/TypeRampPlus1FontSize.cs | 5 + .../DesignTokens/TypeRampPlus1LineHeight.cs | 5 + .../DesignTokens/TypeRampPlus2FontSize.cs | 5 + .../DesignTokens/TypeRampPlus2LineHeight.cs | 5 + .../DesignTokens/TypeRampPlus3FontSize.cs | 5 + .../DesignTokens/TypeRampPlus3LineHeight.cs | 5 + .../DesignTokens/TypeRampPlus4FontSize.cs | 5 + .../DesignTokens/TypeRampPlus4LineHeight.cs | 5 + .../DesignTokens/TypeRampPlus5FontSize.cs | 5 + .../DesignTokens/TypeRampPlus5LineHeight.cs | 5 + .../DesignTokens/TypeRampPlus6FontSize.cs | 5 + .../DesignTokens/TypeRampPlus6LineHeight.cs | 5 + .../FluentComponentBase.cs | 17 +- .../Reference.cs | 26 +++ 65 files changed, 492 insertions(+), 103 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{DesignToken.cs => DesignToken.razor.cs} (67%) create mode 100644 src/Microsoft.Fast.Components.FluentUI/Reference.cs diff --git a/examples/FluentUI.Demo.Shared/Pages/CardPage.razor b/examples/FluentUI.Demo.Shared/Pages/CardPage.razor index 8683968ddd..a4d477ed4e 100644 --- a/examples/FluentUI.Demo.Shared/Pages/CardPage.razor +++ b/examples/FluentUI.Demo.Shared/Pages/CardPage.razor @@ -1,114 +1,113 @@ @page "/CardPage" - - -
- Custom size and elevation on hover using CSS - - -
- Dark - Accent - Stealth - Outline - Lightweight -
- - + .contents { + display: flex; + flex-direction: column; + } + +
+ Custom size and elevation on hover using CSS - - -
- Tinted neutral, light - Accent - Stealth - Outline - Lightweight -
- - - - - -
- Tinted neutral, dark - Accent - Stealth - Outline - Lightweight -
- - + + +
+ Dark + Accent + Stealth + Outline + Lightweight +
+ + - - -
- Tinted neutral, dark - Accent - Stealth - Outline - Lightweight -
- -
- Tinted neutral, nested, dark - Accent - Stealth - Outline - Lightweight -
- - - + + +
+ Tinted neutral, light + Accent + Stealth + Outline + Lightweight +
+ + - + +
- Custom card background color + Tinted neutral, dark Accent Stealth Outline Lightweight
+ - - + + +
+ Tinted neutral, dark + Accent + Stealth + Outline + Lightweight +
+
-

Accent and neutral color by DSP

+ Tinted neutral, nested, dark Accent - Neutral Stealth Outline Lightweight
- -
- \ No newline at end of file + + + + +
+ Custom card background color + Accent + Stealth + Outline + Lightweight +
+ + + + +
+

Accent and neutral color by DSP

+ Accent + Neutral + Stealth + Outline + Lightweight +
+ + +
diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs index 90537c3065..f0cd606064 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentFillActiveDelta : DesignToken { + public AccentFillActiveDelta() + { + Name = Constants.AccentFillActiveDelta; + } + /// /// Constructs an instance of the AccentFillActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs index 5cc1419bd3..5000f70c04 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentFillFocusDelta : DesignToken { + public AccentFillFocusDelta() + { + Name = Constants.AccentFillFocusDelta; + } + /// /// Constructs an instance of the AccentFillFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs index 639e5d902f..c1789adc2d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentFillHoverDelta : DesignToken { + public AccentFillHoverDelta() + { + Name = Constants.AccentFillHoverDelta; + } + /// /// Constructs an instance of the AccentFillHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs index f02d0f3f27..45656196e7 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentFillRestDelta : DesignToken { + public AccentFillRestDelta() + { + Name = Constants.AccentFillRestDelta; + } + /// /// Constructs an instance of the AccentFillRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs index e328b8c03b..0f2d9091c7 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentForegroundActiveDelta : DesignToken { + public AccentForegroundActiveDelta() + { + Name = Constants.AccentForegroundActiveDelta; + } + /// /// Constructs an instance of the AccentForegroundActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs index cbb4611dd1..aea9f229ad 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentForegroundFocusDelta : DesignToken { + public AccentForegroundFocusDelta() + { + Name = Constants.AccentForegroundFocusDelta; + } + /// /// Constructs an instance of the AccentForegroundFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs index c5df05850c..2a9346d266 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentForegroundHoverDelta : DesignToken { + public AccentForegroundHoverDelta() + { + Name = Constants.AccentForegroundHoverDelta; + } + /// /// Constructs an instance of the AccentForegroundHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs index 87be0c9170..122b21fd1c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class AccentForegroundRestDelta : DesignToken { + public AccentForegroundRestDelta() + { + Name = Constants.AccentForegroundRestDelta; + } + /// /// Constructs an instance of the AccentForegroundRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs index 6870d984b0..e7ee3209ab 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class BaseHeightMultiplier : DesignToken { + public BaseHeightMultiplier() + { + Name = Constants.BaseHeightMultiplier; + } + /// /// Constructs an instance of a BaseHeightMultiplier design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs index 8d5d4fc51e..1a97b4397e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class BaseHorizontalSpacingMultiplier : DesignToken { + public BaseHorizontalSpacingMultiplier() + { + Name = Constants.BaseHorizontalSpacingMultiplier; + } + /// /// Constructs an instance of the BaseHorizontalSpacingMultiplier design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs index 3e4dcccc76..f34bd43cb9 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs @@ -8,6 +8,14 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class BaseLayerLuminance : DesignToken { + /// + /// Constructs an instance of the BaseLayerLuminance design token + /// + public BaseLayerLuminance() + { + Name = Constants.BaseLayerLuminance; + } + /// /// Constructs an instance of the BaseLayerLuminance design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs index de3da5f20d..f13c77fce8 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public class BodyFont : DesignToken { + public BodyFont() + { + Name = Constants.BodyFont; + } + /// /// Constructs an instance of the BodyFont design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs index 04e0c8d7f4..c060b7f433 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class ControlCornerRadius : DesignToken { + public ControlCornerRadius() + { + Name = Constants.ControlCornerRadius; + } + /// /// Constructs an instance of the ControlCornerRadius design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs index e403e2fc72..f7f2fde3f2 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class Density : DesignToken { + public Density() + { + Name = Constants.Density; + } + /// /// Constructs an instance of the Density design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor new file mode 100644 index 0000000000..5bb728f738 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor @@ -0,0 +1,5 @@ +@typeparam T +@if (ChildContent is not null) +{ + @ChildContent(Target) +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs similarity index 67% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs index 38ebf80dd3..2246bd703b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs @@ -5,10 +5,16 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; -public class DesignToken : IDesignToken, IAsyncDisposable +public partial class DesignToken : ComponentBase, IDesignToken, IAsyncDisposable { + [Inject] + private IJSRuntime JSRuntime { get; set; } = default!; - private readonly Lazy> moduleTask; + [Inject] + private IConfiguration Configuration { get; set; } = default!; + + private Lazy>? moduleTask; + private Reference Target { get; set; } = new Reference(); private T? _defaultValue; @@ -17,24 +23,55 @@ public class DesignToken : IDesignToken, IAsyncDisposable /// public string? Name { get; init; } + /// + /// Gets or sets the value of the design token + /// + [Parameter] + public T? Value { get; set; } + + /// + /// Gets or sets the content to apply this design token on + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + /// /// Constructs an instance of a DesignToken. /// - public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration) + public DesignToken() { - string scriptSource = configuration["FluentWebComponentsScriptSource"] ?? "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"; - - moduleTask = new(() => jsRuntime.InvokeAsync( - "import", scriptSource).AsTask()); } /// /// Constructs an instance of a DesignToken. /// - public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration, string name) : this(jsRuntime, configuration) + public DesignToken(IJSRuntime jsRuntime, IConfiguration configuration) { - Name = name; + JSRuntime = jsRuntime; + Configuration = configuration; + + Initialize(); + } + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && Value is not null) + { + Initialize(); + + await SetValueFor(Target.Current, Value); + StateHasChanged(); + } + } + + private void Initialize() + { + string scriptSource = Configuration["FluentWebComponentsScriptSource"] ?? "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"; + + moduleTask = new(() => JSRuntime.InvokeAsync( + "import", scriptSource).AsTask()); } /// @@ -67,7 +104,7 @@ public async ValueTask SetValueFor(ElementReference element) /// public async ValueTask SetValueFor(ElementReference element, T value) { - IJSObjectReference module = await moduleTask.Value; + IJSObjectReference module = await moduleTask!.Value; await module.InvokeVoidAsync(Name + ".setValueFor", element, value); } @@ -78,7 +115,7 @@ public async ValueTask SetValueFor(ElementReference element, T value) /// public async ValueTask DeleteValueFor(ElementReference element) { - IJSObjectReference module = await moduleTask.Value; + IJSObjectReference module = await moduleTask!.Value; await module.InvokeVoidAsync(Name + ".deleteValueFor", element); } @@ -89,14 +126,14 @@ public async ValueTask DeleteValueFor(ElementReference element) /// the value public async ValueTask GetValueFor(ElementReference element) { - IJSObjectReference module = await moduleTask.Value; + IJSObjectReference module = await moduleTask!.Value; return await module.InvokeAsync(Name + ".getValueFor", element); } [SuppressMessage("Usage", "CA1816:Dispose methods should call SuppressFinalize", Justification = "Not needed")] public async ValueTask DisposeAsync() { - if (moduleTask.IsValueCreated) + if (moduleTask!.IsValueCreated) { IJSObjectReference module = await moduleTask.Value; await module.DisposeAsync(); diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs index 0752d2bee9..25da12d5e0 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class DesignUnit : DesignToken { + public DesignUnit() + { + Name = Constants.DesignUnit; + } + /// /// Constructs an instance of the DesignUnit design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs index dce1b744d3..d8f93ff94b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class Direction : DesignToken { + public Direction() + { + Name = Constants.Direction; + } + /// /// Constructs an instance of the Direction design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs index 3c70848ff8..bb930f33eb 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class DisabledOpacity : DesignToken { + public DisabledOpacity() + { + Name = Constants.DisabledOpacity; + } + /// /// Constructs an instance of a DisabledOpacity design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs index 15361a84ee..3a94db1d62 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs @@ -8,6 +8,14 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class FillColor : DesignToken { + /// + /// Constructs an instance of the FillColor design token + /// + public FillColor() + { + Name = Constants.FillColor; + } + /// /// Constructs an instance of the FillColor design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs index 4be425da05..91e0eb5593 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class FocusStrokeWidth : DesignToken { + public FocusStrokeWidth() + { + Name = Constants.FocusStrokeWidth; + } + /// /// Constructs an instance of the FocusStrokeWidth design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs index e026f82d01..50ce2f476e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillActiveDelta : DesignToken { + public NeutralFillActiveDelta() + { + Name = Constants.NeutralFillActiveDelta; + } + /// /// Constructs an instance of the NeutralFillActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs index 8b993915c3..7b71ccb594 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillFocusDelta : DesignToken { + public NeutralFillFocusDelta() + { + Name = Constants.NeutralFillFocusDelta; + } + /// /// Constructs an instance of the NeutralFillFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs index 9fb76a7861..97d2d150bf 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillHoverDelta : DesignToken { + public NeutralFillHoverDelta() + { + Name = Constants.NeutralFillHoverDelta; + } + /// /// Constructs an instance of the NeutralFillHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs index 60e176f7a8..649abfe84f 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillInputActiveDelta : DesignToken { + public NeutralFillInputActiveDelta() + { + Name = Constants.NeutralFillInputActiveDelta; + } + /// /// Constructs an instance of the NeutralFillInputActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs index e3d39bbcd6..4037577529 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillInputFocusDelta : DesignToken { + public NeutralFillInputFocusDelta() + { + Name = Constants.NeutralFillInputFocusDelta; + } + /// /// Constructs an instance of the NeutralFillInputFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs index 9df40e8923..c689481de6 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillInputHoverDelta : DesignToken { + public NeutralFillInputHoverDelta() + { + Name = Constants.NeutralFillInputHoverDelta; + } + /// /// Constructs an instance of the NeutralFillInputHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs index f5d693fea6..08d6dea1cb 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillInputRestDelta : DesignToken { + public NeutralFillInputRestDelta() + { + Name = Constants.NeutralFillInputRestDelta; + } + /// /// Constructs an instance of the NeutralFillInputRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs index 8771d7e869..465a6d6aa0 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillLayerRestDelta : DesignToken { + public NeutralFillLayerRestDelta() + { + Name = Constants.NeutralFillLayerRestDelta; + } + /// /// Constructs an instance of the NeutralFillLayerRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs index 72e3e143f7..0838872d37 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillRestDelta : DesignToken { + public NeutralFillRestDelta() + { + Name = Constants.NeutralFillRestDelta; + } + /// /// Constructs an instance of the NeutralFillRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs index 2bacfb705e..6c961da0fe 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStealthActiveDelta : DesignToken { + public NeutralFillStealthActiveDelta() + { + Name = Constants.NeutralFillStealthActiveDelta; + } + /// /// Constructs an instance of the NeutralFillStealthActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs index 2698724678..6a73b92e75 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs @@ -8,6 +8,12 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStealthFocusDelta : DesignToken { + public NeutralFillStealthFocusDelta() + { + Name = Constants.NeutralFillStealthFocusDelta; + + } + /// /// Constructs an instance of the NeutralFillStealthFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs index 20f2938b3a..89880d840d 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStealthHoverDelta : DesignToken { + public NeutralFillStealthHoverDelta() + { + Name = Constants.NeutralFillStealthHoverDelta; + } + /// /// Constructs an instance of the NeutralFillStealthHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs index 8fb81b504c..4cb75423e9 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStealthRestDelta : DesignToken { + public NeutralFillStealthRestDelta() + { + Name = Constants.NeutralFillStealthRestDelta; + } + /// /// Constructs an instance of the NeutralFillStealthRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs index d4df3ce114..49cc94c9e8 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStrongActiveDelta : DesignToken { + public NeutralFillStrongActiveDelta() + { + Name = Constants.NeutralFillStrongActiveDelta; + } + /// /// Constructs an instance of the NeutralFillStrongActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs index b7f2246478..4f8bf99751 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStrongFocusDelta : DesignToken { + public NeutralFillStrongFocusDelta() + { + Name = Constants.NeutralFillStrongFocusDelta; + } + /// /// Constructs an instance of the NeutralFillStrongFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs index 8c409feaa4..d899926e49 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStrongHoverDelta : DesignToken { + public NeutralFillStrongHoverDelta() + { + Name = Constants.NeutralFillStrongHoverDelta; + } + /// /// Constructs an instance of the NeutralFillStrongHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs index 55bab398e8..616f5b7f44 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralFillStrongRestDelta : DesignToken { + public NeutralFillStrongRestDelta() + { + Name = Constants.NeutralFillStrongRestDelta; + } + /// /// Constructs an instance of the NeutralFillStrongRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs index 64049e198d..febf06a343 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralStrokeActiveDelta : DesignToken { + public NeutralStrokeActiveDelta() + { + Name = Constants.NeutralStrokeActiveDelta; + } + /// /// Constructs an instance of the NeutralStrokeActiveDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs index da42973d5a..3b03e547be 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralStrokeDividerRestDelta : DesignToken { + public NeutralStrokeDividerRestDelta() + { + Name = Constants.NeutralStrokeDividerRestDelta; + } + /// /// Constructs an instance of the NeutralStrokeDividerRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs index ae9be2be14..cb039377fe 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralStrokeFocusDelta : DesignToken { + public NeutralStrokeFocusDelta() + { + Name = Constants.NeutralStrokeFocusDelta; + } + /// /// Constructs an instance of the NeutralStrokeFocusDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs index dcf1979830..c7eb27fcec 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralStrokeHoverDelta : DesignToken { + public NeutralStrokeHoverDelta() + { + Name = Constants.NeutralStrokeHoverDelta; + } + /// /// Constructs an instance of the NeutralStrokeHoverDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs index 4cea18ce8d..455df9e3df 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class NeutralStrokeRestDelta : DesignToken { + public NeutralStrokeRestDelta() + { + Name = Constants.NeutralStrokeRestDelta; + } + /// /// Constructs an instance of the NeutralStrokeRestDelta design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs index 0be4712418..c0468a93cc 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class StrokeWidth : DesignToken { + public StrokeWidth() + { + Name = Constants.StrokeWidth; + } + /// /// Constructs an instance of the StrokeWidth design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs index f54e8ba44e..0db6a28491 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampBaseFontSize : DesignToken { + public TypeRampBaseFontSize() + { + Name = Constants.TypeRampBaseFontSize; + } + /// /// Constructs an instance of the TypeRampBaseFontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs index b71079ce9c..583e60be5e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampBaseLineHeight : DesignToken { + public TypeRampBaseLineHeight() + { + Name = Constants.TypeRampBaseLineHeight; + } + /// /// Constructs an instance of the TypeRampBaseLineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs index 43397bd658..2f77c352a0 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampMinus1FontSize : DesignToken { + public TypeRampMinus1FontSize() + { + Name = Constants.TypeRampMinus1FontSize; + } + /// /// Constructs an instance of the TypeRampMinus1FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs index 2ce456a1cd..39a56f383b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampMinus1LineHeight : DesignToken { + public TypeRampMinus1LineHeight() + { + Name = Constants.TypeRampMinus1LineHeight; + } + /// /// Constructs an instance of the TypeRampMinus1LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs index 1aaefd9fd2..2f9b9424d9 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampMinus2FontSize : DesignToken { + public TypeRampMinus2FontSize() + { + Name = Constants.TypeRampMinus2FontSize; + } + /// /// Constructs an instance of the TypeRampMinus2FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs index d878f4b206..dd6078f7b8 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampMinus2LineHeight : DesignToken { + public TypeRampMinus2LineHeight() + { + Name = Constants.TypeRampMinus2LineHeight; + } + /// /// Constructs an instance of the TypeRampMinus2LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs index fd2707e817..fa52e31543 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus1FontSize : DesignToken { + public TypeRampPlus1FontSize() + { + Name = Constants.TypeRampPlus1FontSize; + } + /// /// Constructs an instance of the TypeRampPlus1FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs index 80d195884e..6dc29ba64b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus1LineHeight : DesignToken { + public TypeRampPlus1LineHeight() + { + Name = Constants.TypeRampPlus1LineHeight; + } + /// /// Constructs an instance of the TypeRampPlus1LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs index 98e20e0c95..9efda0ff82 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus2FontSize : DesignToken { + public TypeRampPlus2FontSize() + { + Name = Constants.TypeRampPlus2FontSize; + } + /// /// Constructs an instance of the TypeRampPlus2FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs index eec3bdd212..774917e110 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus2LineHeight : DesignToken { + public TypeRampPlus2LineHeight() + { + Name = Constants.TypeRampPlus2LineHeight; + } + /// /// Constructs an instance of the TypeRampPlus2LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs index c0d43b19a8..c777c450d4 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus3FontSize : DesignToken { + public TypeRampPlus3FontSize() + { + Name = Constants.TypeRampPlus3FontSize; + } + /// /// Constructs an instance of the TypeRampPlus3FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs index 320dab6b1e..5802b1e7b6 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus3LineHeight : DesignToken { + public TypeRampPlus3LineHeight() + { + Name = Constants.TypeRampPlus3LineHeight; + } + /// /// Constructs an instance of the TypeRampPlus3LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs index 12f7461d1b..833171fa1e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus4FontSize : DesignToken { + public TypeRampPlus4FontSize() + { + Name = Constants.TypeRampPlus4FontSize; + } + /// /// Constructs an instance of the TypeRampPlus4FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs index 6840249c22..ec0c0cf745 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus4LineHeight : DesignToken { + public TypeRampPlus4LineHeight() + { + Name = Constants.TypeRampPlus4LineHeight; + } + /// /// Constructs an instance of the TypeRampPlus4LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs index e256032426..a4aa7edc07 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus5FontSize : DesignToken { + public TypeRampPlus5FontSize() + { + Name = Constants.TypeRampPlus5FontSize; + } + /// /// Constructs an instance of the TypeRampPlus5FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs index e34947bc4b..9423e9892a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus5LineHeight : DesignToken { + public TypeRampPlus5LineHeight() + { + Name = Constants.TypeRampPlus5LineHeight; + } + /// /// Constructs an instance of the TypeRampPlus5LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs index 516dd3a7b2..bc1474a325 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus6FontSize : DesignToken { + public TypeRampPlus6FontSize() + { + Name = Constants.TypeRampPlus6FontSize; + } + /// /// Constructs an instance of the TypeRampPlus6FontSize design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs index c635c07e4e..901a15f4d1 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs @@ -8,6 +8,11 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// public sealed class TypeRampPlus6LineHeight : DesignToken { + public TypeRampPlus6LineHeight() + { + Name = Constants.TypeRampPlus6LineHeight; + } + /// /// Constructs an instance of the TypeRampPlus6LineHeight design token /// diff --git a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs index d291beaa05..86ae3365f0 100644 --- a/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs +++ b/src/Microsoft.Fast.Components.FluentUI/FluentComponentBase.cs @@ -4,13 +4,28 @@ namespace Microsoft.Fast.Components.FluentUI; public abstract class FluentComponentBase : ComponentBase { + private ElementReference _ref; + /// /// Gets or sets the associated . /// /// May be if accessed before the component is rendered. /// /// - public ElementReference Element { get; protected set; } + public ElementReference Element + { + get => _ref; + protected set + { + _ref = value; + BackReference?.Set(value); + } + } + + [Parameter] + public Reference? BackReference { get; set; } + + /// /// Gets or sets the content to be rendered inside the component diff --git a/src/Microsoft.Fast.Components.FluentUI/Reference.cs b/src/Microsoft.Fast.Components.FluentUI/Reference.cs new file mode 100644 index 0000000000..8caf331674 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/Reference.cs @@ -0,0 +1,26 @@ +using Microsoft.AspNetCore.Components; + +namespace Microsoft.Fast.Components.FluentUI +{ + public class Reference : Reference + { + } + + + public class Reference + { + private T _current = default!; + + public T Current + { + get => _current; + set => Set(value); + } + + + public void Set(T value) + { + _current = value; + } + } +} From 9f2553f1741453f318a5dd92f8ac26760410301f Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 21 Apr 2022 12:45:05 +0200 Subject: [PATCH 26/34] Fix creating wrong design token classes and constants --- .../DesignTokens/AccentFillActive.cs | 25 ++ .../DesignTokens/AccentFillFocus.cs | 25 ++ .../DesignTokens/AccentFillHover.cs | 25 ++ .../DesignTokens/AccentFillRest.cs | 25 ++ ...tiveDelta.cs => AccentForegroundActive.cs} | 14 +- .../AccentForegroundActiveDelta.cs | 25 -- ...ctiveDelta.cs => AccentForegroundFocus.cs} | 14 +- .../AccentForegroundFocusDelta.cs | 25 -- ...FocusDelta.cs => AccentForegroundHover.cs} | 14 +- .../AccentForegroundHoverDelta.cs | 25 -- ...llRestDelta.cs => AccentForegroundRest.cs} | 14 +- .../DesignTokens/AccentForegroundRestDelta.cs | 25 -- .../DesignTokens/Constant.cs | 65 ----- .../DesignTokens/Constants.cs | 237 ++++++++++++++++++ .../DesignTokens/DesignTokens.cs | 125 +++++---- .../DesignTokens/LayerCornerRadius.cs | 25 ++ .../DesignTokens/NeutralFillActive.cs | 25 ++ .../DesignTokens/NeutralFillFocus.cs | 25 ++ .../DesignTokens/NeutralFillHover.cs | 25 ++ ...RestDelta.cs => NeutralFillInputActive.cs} | 14 +- .../NeutralFillInputActiveDelta.cs | 25 -- ...HoverDelta.cs => NeutralFillInputFocus.cs} | 14 +- .../NeutralFillInputFocusDelta.cs | 25 -- .../DesignTokens/NeutralFillInputHover.cs | 25 ++ .../NeutralFillInputHoverDelta.cs | 25 -- ...lFocusDelta.cs => NeutralFillInputRest.cs} | 14 +- .../DesignTokens/NeutralFillInputRestDelta.cs | 25 -- ...lHoverDelta.cs => NeutralFillLayerRest.cs} | 14 +- .../DesignTokens/NeutralFillLayerRestDelta.cs | 25 -- .../DesignTokens/NeutralFillRest.cs | 25 ++ ...veDelta.cs => NeutralFillStealthActive.cs} | 14 +- .../NeutralFillStealthActiveDelta.cs | 25 -- .../DesignTokens/NeutralFillStealthFocus.cs | 26 ++ .../NeutralFillStealthFocusDelta.cs | 26 -- ...cusDelta.cs => NeutralFillStealthHover.cs} | 14 +- .../NeutralFillStealthHoverDelta.cs | 25 -- .../DesignTokens/NeutralFillStealthRest.cs | 25 ++ .../NeutralFillStealthRestDelta.cs | 25 -- ...verDelta.cs => NeutralFillStrongActive.cs} | 14 +- .../NeutralFillStrongActiveDelta.cs | 25 -- .../DesignTokens/NeutralFillStrongFocus.cs | 25 ++ .../NeutralFillStrongFocusDelta.cs | 25 -- .../DesignTokens/NeutralFillStrongHover.cs | 25 ++ .../NeutralFillStrongHoverDelta.cs | 25 -- .../DesignTokens/NeutralFillStrongRest.cs | 25 ++ .../NeutralFillStrongRestDelta.cs | 25 -- ...illRestDelta.cs => NeutralStrokeActive.cs} | 14 +- .../DesignTokens/NeutralStrokeDividerRest.cs | 25 ++ .../NeutralStrokeDividerRestDelta.cs | 25 -- .../DesignTokens/NeutralStrokeFocus.cs | 25 ++ .../DesignTokens/NeutralStrokeHover.cs | 25 ++ .../DesignTokens/NeutralStrokeRest.cs | 25 ++ .../ServiceCollectionExtensions.cs | 60 ++--- 53 files changed, 888 insertions(+), 694 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralFillActiveDelta.cs => AccentForegroundActive.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{AccentFillActiveDelta.cs => AccentForegroundFocus.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralFillFocusDelta.cs => AccentForegroundHover.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralFillRestDelta.cs => AccentForegroundRest.cs} (55%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralStrokeRestDelta.cs => NeutralFillInputActive.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralFillHoverDelta.cs => NeutralFillInputFocus.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{AccentFillFocusDelta.cs => NeutralFillInputRest.cs} (55%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{AccentFillHoverDelta.cs => NeutralFillLayerRest.cs} (55%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralStrokeActiveDelta.cs => NeutralFillStealthActive.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralStrokeFocusDelta.cs => NeutralFillStealthHover.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{NeutralStrokeHoverDelta.cs => NeutralFillStrongActive.cs} (54%) delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs rename src/Microsoft.Fast.Components.FluentUI/DesignTokens/{AccentFillRestDelta.cs => NeutralStrokeActive.cs} (55%) create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs new file mode 100644 index 0000000000..a60af14087 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillActive design token +/// +public sealed class AccentFillActive : DesignToken +{ + public AccentFillActive() + { + Name = Constants.AccentFillActive; + } + + /// + /// Constructs an instance of the AccentFillActive design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillActive; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs new file mode 100644 index 0000000000..60ae694d85 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillFocus design token +/// +public sealed class AccentFillFocus : DesignToken +{ + public AccentFillFocus() + { + Name = Constants.AccentFillFocus; + } + + /// + /// Constructs an instance of the AccentFillFocus design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillFocus; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs new file mode 100644 index 0000000000..69e30d0462 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillHover design token +/// +public sealed class AccentFillHover : DesignToken +{ + public AccentFillHover() + { + Name = Constants.AccentFillHover; + } + + /// + /// Constructs an instance of the AccentFillHover design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillHover; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs new file mode 100644 index 0000000000..bbb0ef0bc2 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The AccentFillRest design token +/// +public sealed class AccentFillRest : DesignToken +{ + public AccentFillRest() + { + Name = Constants.AccentFillRest; + } + + /// + /// Constructs an instance of the AccentFillRest design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public AccentFillRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.AccentFillRest; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs index 50ce2f476e..8d1fc5cd4a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralFillActiveDelta design token +/// The AccentForegroundActive design token /// -public sealed class NeutralFillActiveDelta : DesignToken +public sealed class AccentForegroundActive : DesignToken { - public NeutralFillActiveDelta() + public AccentForegroundActive() { - Name = Constants.NeutralFillActiveDelta; + Name = Constants.AccentForegroundActive; } /// - /// Constructs an instance of the NeutralFillActiveDelta design token + /// Constructs an instance of the AccentForegroundActive design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralFillActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public AccentForegroundActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralFillActiveDelta; + Name = Constants.AccentForegroundActive; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs deleted file mode 100644 index 0f2d9091c7..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActiveDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundActiveDelta design token -/// -public sealed class AccentForegroundActiveDelta : DesignToken -{ - public AccentForegroundActiveDelta() - { - Name = Constants.AccentForegroundActiveDelta; - } - - /// - /// Constructs an instance of the AccentForegroundActiveDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundActiveDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs index f0cd606064..a49a7ddc5c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The AccentFillActiveDelta design token +/// The AccentForegroundFocus design token /// -public sealed class AccentFillActiveDelta : DesignToken +public sealed class AccentForegroundFocus : DesignToken { - public AccentFillActiveDelta() + public AccentForegroundFocus() { - Name = Constants.AccentFillActiveDelta; + Name = Constants.AccentForegroundFocus; } /// - /// Constructs an instance of the AccentFillActiveDelta design token + /// Constructs an instance of the AccentForegroundFocus design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public AccentFillActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public AccentForegroundFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.AccentFillActiveDelta; + Name = Constants.AccentForegroundFocus; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs deleted file mode 100644 index aea9f229ad..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocusDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundFocusDelta design token -/// -public sealed class AccentForegroundFocusDelta : DesignToken -{ - public AccentForegroundFocusDelta() - { - Name = Constants.AccentForegroundFocusDelta; - } - - /// - /// Constructs an instance of the AccentForegroundFocusDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundFocusDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs index 7b71ccb594..f82fdb3351 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralFillFocusDelta design token +/// The AccentForegroundHover design token /// -public sealed class NeutralFillFocusDelta : DesignToken +public sealed class AccentForegroundHover : DesignToken { - public NeutralFillFocusDelta() + public AccentForegroundHover() { - Name = Constants.NeutralFillFocusDelta; + Name = Constants.AccentForegroundHover; } /// - /// Constructs an instance of the NeutralFillFocusDelta design token + /// Constructs an instance of the AccentForegroundHover design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralFillFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public AccentForegroundHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralFillFocusDelta; + Name = Constants.AccentForegroundHover; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs deleted file mode 100644 index 2a9346d266..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHoverDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundHoverDelta design token -/// -public sealed class AccentForegroundHoverDelta : DesignToken -{ - public AccentForegroundHoverDelta() - { - Name = Constants.AccentForegroundHoverDelta; - } - - /// - /// Constructs an instance of the AccentForegroundHoverDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundHoverDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs similarity index 55% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs index 0838872d37..fb450c115e 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralFillRestDelta design token +/// The AccentForegroundRest design token /// -public sealed class NeutralFillRestDelta : DesignToken +public sealed class AccentForegroundRest : DesignToken { - public NeutralFillRestDelta() + public AccentForegroundRest() { - Name = Constants.NeutralFillRestDelta; + Name = Constants.AccentForegroundRest; } /// - /// Constructs an instance of the NeutralFillRestDelta design token + /// Constructs an instance of the AccentForegroundRest design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralFillRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public AccentForegroundRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralFillRestDelta; + Name = Constants.AccentForegroundRest; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs deleted file mode 100644 index 122b21fd1c..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRestDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundRestDelta design token -/// -public sealed class AccentForegroundRestDelta : DesignToken -{ - public AccentForegroundRestDelta() - { - Name = Constants.AccentForegroundRestDelta; - } - - /// - /// Constructs an instance of the AccentForegroundRestDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundRestDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs deleted file mode 100644 index 2e74692699..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constant.cs +++ /dev/null @@ -1,65 +0,0 @@ -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -public class Constants -{ - public const string BodyFont = "bodyFont"; - public const string BaseHeightMultiplier = "baseHeightMultiplier"; - public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; - public const string BaseLayerLuminance = "baseLayerLuminance"; - public const string ControlCornerRadius = "controlCornerRadius"; - public const string Density = "density"; - public const string DesignUnit = "designUnit"; - public const string Direction = "direction"; - public const string DisabledOpacity = "disabledOpacity"; - public const string StrokeWidth = "strokeWidth"; - public const string FillColor = "fillColor"; - public const string FocusStrokeWidth = "focusStrokeWidth"; - public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; - public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; - public const string TypeRampMinus1FontSize = "typeRampMinus1FontSize"; - public const string TypeRampMinus1LineHeight = "typeRampMinus1LineHeight"; - public const string TypeRampMinus2FontSize = "typeRampMinus2FontSize"; - public const string TypeRampMinus2LineHeight = "typeRampMinus2LineHeight"; - public const string TypeRampPlus1FontSize = "typeRampPlus1FontSize"; - public const string TypeRampPlus1LineHeight = "typeRampPlus1LineHeight"; - public const string TypeRampPlus2FontSize = "typeRampPlus2FontSize"; - public const string TypeRampPlus2LineHeight = "typeRampPlus2LineHeight"; - public const string TypeRampPlus3FontSize = "typeRampPlus3FontSize"; - public const string TypeRampPlus3LineHeight = "typeRampPlus3LineHeight"; - public const string TypeRampPlus4FontSize = "typeRampPlus4FontSize"; - public const string TypeRampPlus4LineHeight = "typeRampPlus4LineHeight"; - public const string TypeRampPlus5FontSize = "typeRampPlus5FontSize"; - public const string TypeRampPlus5LineHeight = "typeRampPlus5LineHeight"; - public const string TypeRampPlus6FontSize = "typeRampPlus6FontSize"; - public const string TypeRampPlus6LineHeight = "typeRampPlus6LineHeight"; - public const string AccentFillRestDelta = "accentFillRestDelta"; - public const string AccentFillHoverDelta = "accentFillHoverDelta"; - public const string AccentFillActiveDelta = "accentFillActiveDelta"; - public const string AccentFillFocusDelta = "accentFillFocusDelta"; - public const string AccentForegroundRestDelta = "accentForegroundRestDelta"; - public const string AccentForegroundHoverDelta = "accentForegroundHoverDelta"; - public const string AccentForegroundActiveDelta = "accentForegroundActiveDelta"; - public const string AccentForegroundFocusDelta = "accentForegroundFocusDelta"; - public const string NeutralFillRestDelta = "neutralFillRestDelta"; - public const string NeutralFillHoverDelta = "neutralFillHoverDelta"; - public const string NeutralFillActiveDelta = "neutralFillActiveDelta"; - public const string NeutralFillFocusDelta = "neutralFillFocusDelta"; - public const string NeutralFillInputRestDelta = "neutralFillInputRestDelta"; - public const string NeutralFillInputHoverDelta = "neutralFillInputHoverDelta"; - public const string NeutralFillInputActiveDelta = "neutralFillInputActiveDelta"; - public const string NeutralFillInputFocusDelta = "neutralFillInputFocusDelta"; - public const string NeutralFillStealthRestDelta = "neutralFillStealthRestDelta"; - public const string NeutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; - public const string NeutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; - public const string NeutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; - public const string NeutralFillStrongRestDelta = "neutralFillStrongRestDelta"; - public const string NeutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; - public const string NeutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; - public const string NeutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; - public const string NeutralFillLayerRestDelta = "neutralFillLayerRestDelta"; - public const string NeutralStrokeRestDelta = "neutralStrokeRestDelta"; - public const string NeutralStrokeHoverDelta = "neutralStrokeHoverDelta"; - public const string NeutralStrokeActiveDelta = "neutralStrokeActiveDelta"; - public const string NeutralStrokeFocusDelta = "neutralStrokeFocusDelta"; - public const string NeutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs new file mode 100644 index 0000000000..2d9054041a --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs @@ -0,0 +1,237 @@ +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +public class Constants +{ + //General tokens + public const string Direction = "direction"; + public const string DisabledOpacity = "disabledOpacity"; + + //Density tokens + public const string BaseHeightMultiplier = "baseHeightMultiplier"; + public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; + public const string Density = "density"; + public const string DesignUnit = "designUnit"; + + //Appearance tokens + public const string ControlCornerRadius = "controlCornerRadius"; + public const string LayerCornerRadius = "layerCornerRadius"; + public const string StrokeWidth = "strokeWidth"; + public const string FocusStrokeWidth = "focusStrokeWidth"; + + //Typography values + public const string BodyFont = "bodyFont"; + public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; + public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; + public const string TypeRampMinus1FontSize = "typeRampMinus1FontSize"; + public const string TypeRampMinus1LineHeight = "typeRampMinus1LineHeight"; + public const string TypeRampMinus2FontSize = "typeRampMinus2FontSize"; + public const string TypeRampMinus2LineHeight = "typeRampMinus2LineHeight"; + public const string TypeRampPlus1FontSize = "typeRampPlus1FontSize"; + public const string TypeRampPlus1LineHeight = "typeRampPlus1LineHeight"; + public const string TypeRampPlus2FontSize = "typeRampPlus2FontSize"; + public const string TypeRampPlus2LineHeight = "typeRampPlus2LineHeight"; + public const string TypeRampPlus3FontSize = "typeRampPlus3FontSize"; + public const string TypeRampPlus3LineHeight = "typeRampPlus3LineHeight"; + public const string TypeRampPlus4FontSize = "typeRampPlus4FontSize"; + public const string TypeRampPlus4LineHeight = "typeRampPlus4LineHeight"; + public const string TypeRampPlus5FontSize = "typeRampPlus5FontSize"; + public const string TypeRampPlus5LineHeight = "typeRampPlus5LineHeight"; + public const string TypeRampPlus6FontSize = "typeRampPlus6FontSize"; + public const string TypeRampPlus6LineHeight = "typeRampPlus6LineHeight"; + + //Color recipe values + public const string BaseLayerLuminance = "baseLayerLuminance"; + + //Color recipes + //public const string NeutralBaseColor = "neutralBaseColor"; + //public const string AccentBaseColor = "accentBaseColor"; + public const string FillColor = "fillColor"; + + //Neutral Layers + //neutralLayerCardContainer + //neutralLayerFloating + //neutralLayer1 + //neutralLayer2 + //neutralLayer3 + //neutralLayer4 + + //Accent Fill + public const string AccentFillRest = "accentFillRest"; + public const string AccentFillHover = "accentFillHover"; + public const string AccentFillActive = "accentFillActive"; + public const string AccentFillFocus = "accentFillFocus"; + + //public const string AccentFillRestDelta = "accentFillRestDelta"; + //public const string AccentFillHoverDelta = "accentFillHoverDelta"; + //public const string AccentFillActiveDelta = "accentFillActiveDelta"; + //public const string AccentFillFocusDelta = "accentFillFocusDelta"; + + //Foreground On Accent + //public const string foregroundOnAccentRest = "foregroundOnAccentRest"; + //public const string foregroundOnAccentHover = "foregroundOnAccentHover"; + //public const string foregroundOnAccentActive = "foregroundOnAccentActive"; + //public const string foregroundOnAccentFocus = "foregroundOnAccentFocus"; + + //Accent Foreground + public const string AccentForegroundRest = "accentForegroundRest"; + public const string AccentForegroundHover = "accentForegroundHover"; + public const string AccentForegroundActive = "accentForegroundActive"; + public const string AccentForegroundFocus = "accentForegroundFocus"; + + //public const string AccentForegroundRestDelta = "accentForegroundRestDelta"; + //public const string AccentForegroundHoverDelta = "accentForegroundHoverDelta"; + //public const string AccentForegroundActiveDelta = "accentForegroundActiveDelta"; + //public const string AccentForegroundFocusDelta = "accentForegroundFocusDelta"; + + + //Accent Stroke Control + //public const string AccentStrokeControlRest = "accentStrokeControlRest"; + //public const string AccentStrokeControlHover = "accentStrokeControlHover"; + //public const string AccentStrokeControlActive = "accentStrokeControlActive"; + //public const string AccentStrokeControlFocus = "accentStrokeControlFocus"; + + //Neutral Fill + public const string NeutralFillRest = "neutralFillRest"; + public const string NeutralFillHover = "neutralFillHover"; + public const string NeutralFillActive = "neutralFillActive"; + public const string NeutralFillFocus = "neutralFillFocus"; + + //public const string NeutralFillRestDelta = "neutralFillRestDelta"; + //public const string NeutralFillHoverDelta = "neutralFillHoverDelta"; + //public const string NeutralFillActiveDelta = "neutralFillActiveDelta"; + //public const string NeutralFillFocusDelta = "neutralFillFocusDelta"; + + //Neutral Fill Input + public const string NeutralFillInputRest = "neutralFillInputRest"; + public const string NeutralFillInputHover = "neutralFillInputHover"; + public const string NeutralFillInputActive = "neutralFillInputActive"; + public const string NeutralFillInputFocus = "neutralFillInputFocus"; + + //public const string NeutralFillInputRestDelta = "neutralFillInputRestDelta"; + //public const string NeutralFillInputHoverDelta = "neutralFillInputHoverDelta"; + //public const string NeutralFillInputActiveDelta = "neutralFillInputActiveDelta"; + //public const string NeutralFillInputFocusDelta = "neutralFillInputFocusDelta"; + + //Neutral Fill Input Alt + public const string NeutralFillInputAltRest = "neutralFillInputAltRest"; + public const string NeutralFillInputAltHover = "neutralFillInputAltHover"; + public const string NeutralFillInputAltActive = "neutralFillInputAltActive"; + public const string NeutralFillInputAltFocus = "neutralFillInputAltFocus"; + + //public const string NeutralFillInputAltRestDelta = "neutralFillInputAltRestDelta"; + //public const string NeutralFillInputAltHoverDelta = "neutralFillInputAltHoverDelta"; + //public const string NeutralFillInputAltActiveDelta = "neutralFillInputAltActiveDelta"; + //public const string NeutralFillInputAltFocusDelta = "neutralFillInputAltFocusDelta"; + + //Neutral Fill Layer + public const string NeutralFillLayerRest = "neutralFillLayerRest"; + public const string NeutralFillLayerHover = "neutralFillLayerHover"; + public const string NeutralFillLayerActive = "neutralFillLayerActive"; + + //public const string NeutralFillLayerRestDelta = "neutralFillLayerRestDelta"; + //public const string NeutralFillLayerHoverDelta = "neutralFillLayerHoverDelta"; + //public const string NeutralFillLayerActiveDelta = "neutralFillLayerActiveDelta"; + + //Neutral Fill Layer Alt + //public const string NeutralFillLayerAltRest = "neutralFillLayerAltRest"; + //public const string NeutralFillLayerAltRestDelta = "neutralFillLayerAltRestDelta"; + + //Neutral Fill Secondary + public const string NeutralFillSecondaryRest = "neutralFillSecondaryRest"; + public const string NeutralFillSecondaryHover = "neutralFillSecondaryHover"; + public const string NeutralFillSecondaryActive = "neutralFillSecondaryActive"; + public const string NeutralFillSecondaryFocus = "neutralFillSecondaryFocus"; + + //public const string NeutralFillSecondaryRestDelta = "neutralFillSecondaryRestDelta"; + //public const string NeutralFillSecondaryHoverDelta = "neutralFillSecondaryHoverDelta"; + //public const string NeutralFillSecondaryActiveDelta = "neutralFillSecondaryActiveDelta"; + //public const string NeutralFillSecondaryFocusDelta = "neutralFillSecondaryFocusDelta"; + + //Neutral Fill Stealth + public const string NeutralFillStealthRest = "neutralFillStealthRest"; + public const string NeutralFillStealthHover = "neutralFillStealthHover"; + public const string NeutralFillStealthActive = "neutralFillStealthActive"; + public const string NeutralFillStealthFocus = "neutralFillStealthFocus"; + + //public const string NeutralFillStealthRestDelta = "neutralFillStealthRestDelta"; + //public const string NeutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; + //public const string NeutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; + //public const string NeutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; + + //Neutral Fill Strong + public const string NeutralFillStrongRest = "neutralFillStrongRest"; + public const string NeutralFillStrongHover = "neutralFillStrongHover"; + public const string NeutralFillStrongActive = "neutralFillStrongActive"; + public const string NeutralFillStrongFocus = "neutralFillStrongFocus"; + //public const string NeutralFillStrongRestDelta = "neutralFillStrongRestDelta"; + //public const string NeutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; + //public const string NeutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; + //public const string NeutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; + + //Neutral Foreground + public const string NeutralForegroundRest = "neutralForegroundRest"; + public const string NeutralForegroundHover = "neutralForegroundHover"; + public const string NeutralForegroundActive = "neutralForegroundActive"; + public const string NeutralForegroundFocus = "neutralForegroundFocus"; + + //Neutral Foreground Hint + public const string NeutralForegroundHint = "neutralForegroundHint"; + + //Neutral Stroke + public const string NeutralStrokeRest = "neutralStrokeRest"; + public const string NeutralStrokeHover = "neutralStrokeHover"; + public const string NeutralStrokeActive = "neutralStrokeActive"; + public const string NeutralStrokeFocus = "neutralStrokeFocus"; + + //public const string NeutralStrokeRestDelta = "neutralStrokeRestDelta"; + //public const string NeutralStrokeHoverDelta = "neutralStrokeHoverDelta"; + //public const string NeutralStrokeActiveDelta = "neutralStrokeActiveDelta"; + //public const string NeutralStrokeFocusDelta = "neutralStrokeFocusDelta"; + + //Neutral Stroke Control + public const string NeutralStrokeControlRest = "neutralStrokeControlRest"; + public const string NeutralStrokeControlHover = "neutralStrokeControlHover"; + public const string NeutralStrokeControlActive = "neutralStrokeControlActive"; + public const string NeutralStrokeControlFocus = "neutralStrokeControlFocus"; + + //public const string NeutralStrokeControlRestDelta = "neutralStrokeControlRestDelta"; + //public const string NeutralStrokeControlHoverDelta = "neutralStrokeControlHoverDelta"; + //public const string NeutralStrokeControlActiveDelta = "neutralStrokeControlActiveDelta"; + //public const string NeutralStrokeControlFocusDelta = "neutralStrokeControlFocusDelta"; + + //Neutral Stroke Divider + public const string NeutralStrokeDividerRest = "neutralStrokeDividerRest"; + //public const string NeutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; + + //Neutral Stroke Input + public const string NeutralStrokeInputRest = "neutralStrokeInputRest"; + public const string NeutralStrokeInputHover = "neutralStrokeInputHover"; + public const string NeutralStrokeInputActive = "neutralStrokeInputActive"; + public const string NeutralStrokeInputFocus = "neutralStrokeInputFocus"; + + + //Neutral Stroke Layer + public const string NeutralStrokeLayerRest = "neutralStrokeLayerRest"; + public const string NeutralStrokeLayerHover = "neutralStrokeLayerHover"; + public const string NeutralStrokeLayerActive = "neutralStrokeLayerActive"; + + //public const string NeutralStrokeLayerRestDelta = "neutralStrokeLayerRestDelta"; + //public const string NeutralStrokeLayerHoverDelta = "neutralStrokeLayerHoverDelta"; + //public const string NeutralStrokeLayerActiveDelta = "neutralStrokeLayerActiveDelta"; + + //Neutral Stroke Strong + public const string NeutralStrokeStrongRest = "neutralStrokeStrongRest"; + public const string NeutralStrokeStrongHover = "neutralStrokeStrongHover"; + public const string NeutralStrokeStrongActive = "neutralStrokeStrongActive"; + public const string NeutralStrokeStrongFocus = "neutralStrokeStrongFocus"; + + //public const string NeutralStrokeStrongHoverDelta = "neutralStrokeStrongHoverDelta"; + //public const string NeutralStrokeStrongActiveDelta = "neutralStrokeStrongActiveDelta"; + //public const string NeutralStrokeStrongFocusDelta = "neutralStrokeStrongFocusDelta"; + + //Focus Stroke Outer + public const string FocusStrokeOuter = "focusStrokeOuter"; + + //Focus Stroke Inner + public const string FocusStrokeInner = "focusStrokeInner"; +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs index f0dc9680b5..2c6e44cd50 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs @@ -1,7 +1,4 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; public class DesignTokens { @@ -34,36 +31,36 @@ public class DesignTokens public DesignToken TypeRampPlus5LineHeight { get; set; } public DesignToken TypeRampPlus6FontSize { get; set; } public DesignToken TypeRampPlus6LineHeight { get; set; } - public DesignToken AccentFillRestDelta { get; set; } - public DesignToken AccentFillHoverDelta { get; set; } - public DesignToken AccentFillActiveDelta { get; set; } - public DesignToken AccentFillFocusDelta { get; set; } - public DesignToken AccentForegroundRestDelta { get; set; } - public DesignToken AccentForegroundHoverDelta { get; set; } - public DesignToken AccentForegroundActiveDelta { get; set; } - public DesignToken AccentForegroundFocusDelta { get; set; } - public DesignToken NeutralFillRestDelta { get; set; } - public DesignToken NeutralFillHoverDelta { get; set; } - public DesignToken NeutralFillActiveDelta { get; set; } - public DesignToken NeutralFillFocusDelta { get; set; } - public DesignToken NeutralFillInputRestDelta { get; set; } - public DesignToken NeutralFillInputHoverDelta { get; set; } - public DesignToken NeutralFillInputActiveDelta { get; set; } - public DesignToken NeutralFillInputFocusDelta { get; set; } - public DesignToken NeutralFillStealthRestDelta { get; set; } - public DesignToken NeutralFillStealthHoverDelta { get; set; } - public DesignToken NeutralFillStealthActiveDelta { get; set; } - public DesignToken NeutralFillStealthFocusDelta { get; set; } - public DesignToken NeutralFillStrongRestDelta { get; set; } - public DesignToken NeutralFillStrongHoverDelta { get; set; } - public DesignToken NeutralFillStrongActiveDelta { get; set; } - public DesignToken NeutralFillStrongFocusDelta { get; set; } - public DesignToken NeutralFillLayerRestDelta { get; set; } - public DesignToken NeutralStrokeRestDelta { get; set; } - public DesignToken NeutralStrokeHoverDelta { get; set; } - public DesignToken NeutralStrokeActiveDelta { get; set; } - public DesignToken NeutralStrokeFocusDelta { get; set; } - public DesignToken NeutralStrokeDividerRestDelta { get; set; } + public DesignToken AccentFillRest { get; set; } + public DesignToken AccentFillHover { get; set; } + public DesignToken AccentFillActive { get; set; } + public DesignToken AccentFillFocus { get; set; } + public DesignToken AccentForegroundRest { get; set; } + public DesignToken AccentForegroundHover { get; set; } + public DesignToken AccentForegroundActive { get; set; } + public DesignToken AccentForegroundFocus { get; set; } + public DesignToken NeutralFillRest { get; set; } + public DesignToken NeutralFillHover { get; set; } + public DesignToken NeutralFillActive { get; set; } + public DesignToken NeutralFillFocus { get; set; } + public DesignToken NeutralFillInputRest { get; set; } + public DesignToken NeutralFillInputHover { get; set; } + public DesignToken NeutralFillInputActive { get; set; } + public DesignToken NeutralFillInputFocus { get; set; } + public DesignToken NeutralFillStealthRest { get; set; } + public DesignToken NeutralFillStealthHover { get; set; } + public DesignToken NeutralFillStealthActive { get; set; } + public DesignToken NeutralFillStealthFocus { get; set; } + public DesignToken NeutralFillStrongRest { get; set; } + public DesignToken NeutralFillStrongHover { get; set; } + public DesignToken NeutralFillStrongActive { get; set; } + public DesignToken NeutralFillStrongFocus { get; set; } + public DesignToken NeutralFillLayerRest { get; set; } + public DesignToken NeutralStrokeRest { get; set; } + public DesignToken NeutralStrokeHover { get; set; } + public DesignToken NeutralStrokeActive { get; set; } + public DesignToken NeutralStrokeFocus { get; set; } + public DesignToken NeutralStrokeDividerRest { get; set; } public DesignTokens(IJSRuntime jsRuntime, IConfiguration configuration) { @@ -96,35 +93,35 @@ public DesignTokens(IJSRuntime jsRuntime, IConfiguration configuration) TypeRampPlus5LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus5LineHeight); TypeRampPlus6FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus6FontSize); TypeRampPlus6LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus6LineHeight); - AccentFillRestDelta = new(jsRuntime, configuration, Constants.AccentFillRestDelta); - AccentFillHoverDelta = new(jsRuntime, configuration, Constants.AccentFillHoverDelta); - AccentFillActiveDelta = new(jsRuntime, configuration, Constants.AccentFillActiveDelta); - AccentFillFocusDelta = new(jsRuntime, configuration, Constants.AccentFillFocusDelta); - AccentForegroundRestDelta = new(jsRuntime, configuration, Constants.AccentForegroundRestDelta); - AccentForegroundHoverDelta = new(jsRuntime, configuration, Constants.AccentForegroundHoverDelta); - AccentForegroundActiveDelta = new(jsRuntime, configuration, Constants.AccentForegroundActiveDelta); - AccentForegroundFocusDelta = new(jsRuntime, configuration, Constants.AccentForegroundFocusDelta); - NeutralFillRestDelta = new(jsRuntime, configuration, Constants.NeutralFillRestDelta); - NeutralFillHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillHoverDelta); - NeutralFillActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillActiveDelta); - NeutralFillFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillFocusDelta); - NeutralFillInputRestDelta = new(jsRuntime, configuration, Constants.NeutralFillInputRestDelta); - NeutralFillInputHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillInputHoverDelta); - NeutralFillInputActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillInputActiveDelta); - NeutralFillInputFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillInputFocusDelta); - NeutralFillStealthRestDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthRestDelta); - NeutralFillStealthHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthHoverDelta); - NeutralFillStealthActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthActiveDelta); - NeutralFillStealthFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillStealthFocusDelta); - NeutralFillStrongRestDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongRestDelta); - NeutralFillStrongHoverDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongHoverDelta); - NeutralFillStrongActiveDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongActiveDelta); - NeutralFillStrongFocusDelta = new(jsRuntime, configuration, Constants.NeutralFillStrongFocusDelta); - NeutralFillLayerRestDelta = new(jsRuntime, configuration, Constants.NeutralFillLayerRestDelta); - NeutralStrokeRestDelta = new(jsRuntime, configuration, Constants.NeutralStrokeRestDelta); - NeutralStrokeHoverDelta = new(jsRuntime, configuration, Constants.NeutralStrokeHoverDelta); - NeutralStrokeActiveDelta = new(jsRuntime, configuration, Constants.NeutralStrokeActiveDelta); - NeutralStrokeFocusDelta = new(jsRuntime, configuration, Constants.NeutralStrokeFocusDelta); - NeutralStrokeDividerRestDelta = new(jsRuntime, configuration, Constants.NeutralStrokeDividerRestDelta); + AccentFillRest = new(jsRuntime, configuration, Constants.AccentFillRest); + AccentFillHover = new(jsRuntime, configuration, Constants.AccentFillHover); + AccentFillActive = new(jsRuntime, configuration, Constants.AccentFillActive); + AccentFillFocus = new(jsRuntime, configuration, Constants.AccentFillFocus); + AccentForegroundRest = new(jsRuntime, configuration, Constants.AccentForegroundRest); + AccentForegroundHover = new(jsRuntime, configuration, Constants.AccentForegroundHover); + AccentForegroundActive = new(jsRuntime, configuration, Constants.AccentForegroundActive); + AccentForegroundFocus = new(jsRuntime, configuration, Constants.AccentForegroundFocus); + NeutralFillRest = new(jsRuntime, configuration, Constants.NeutralFillRest); + NeutralFillHover = new(jsRuntime, configuration, Constants.NeutralFillHover); + NeutralFillActive = new(jsRuntime, configuration, Constants.NeutralFillActive); + NeutralFillFocus = new(jsRuntime, configuration, Constants.NeutralFillFocus); + NeutralFillInputRest = new(jsRuntime, configuration, Constants.NeutralFillInputRest); + NeutralFillInputHover = new(jsRuntime, configuration, Constants.NeutralFillInputHover); + NeutralFillInputActive = new(jsRuntime, configuration, Constants.NeutralFillInputActive); + NeutralFillInputFocus = new(jsRuntime, configuration, Constants.NeutralFillInputFocus); + NeutralFillStealthRest = new(jsRuntime, configuration, Constants.NeutralFillStealthRest); + NeutralFillStealthHover = new(jsRuntime, configuration, Constants.NeutralFillStealthHover); + NeutralFillStealthActive = new(jsRuntime, configuration, Constants.NeutralFillStealthActive); + NeutralFillStealthFocus = new(jsRuntime, configuration, Constants.NeutralFillStealthFocus); + NeutralFillStrongRest = new(jsRuntime, configuration, Constants.NeutralFillStrongRest); + NeutralFillStrongHover = new(jsRuntime, configuration, Constants.NeutralFillStrongHover); + NeutralFillStrongActive = new(jsRuntime, configuration, Constants.NeutralFillStrongActive); + NeutralFillStrongFocus = new(jsRuntime, configuration, Constants.NeutralFillStrongFocus); + NeutralFillLayerRest = new(jsRuntime, configuration, Constants.NeutralFillLayerRest); + NeutralStrokeRest = new(jsRuntime, configuration, Constants.NeutralStrokeRest); + NeutralStrokeHover = new(jsRuntime, configuration, Constants.NeutralStrokeHover); + NeutralStrokeActive = new(jsRuntime, configuration, Constants.NeutralStrokeActive); + NeutralStrokeFocus = new(jsRuntime, configuration, Constants.NeutralStrokeFocus); + NeutralStrokeDividerRest = new(jsRuntime, configuration, Constants.NeutralStrokeDividerRest); } } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs new file mode 100644 index 0000000000..97d48c3d03 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The LayerCornerRadius design token +/// +public sealed class LayerCornerRadius : DesignToken +{ + public LayerCornerRadius() + { + Name = Constants.LayerCornerRadius; + } + + /// + /// Constructs an instance of the LayerCornerRadius design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public LayerCornerRadius(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.LayerCornerRadius; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs new file mode 100644 index 0000000000..2e0ba4af45 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillActive design token +/// +public sealed class NeutralFillActive : DesignToken +{ + public NeutralFillActive() + { + Name = Constants.NeutralFillActive; + } + + /// + /// Constructs an instance of the NeutralFillActive design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillActive; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs new file mode 100644 index 0000000000..36909abca5 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillFocus design token +/// +public sealed class NeutralFillFocus : DesignToken +{ + public NeutralFillFocus() + { + Name = Constants.NeutralFillFocus; + } + + /// + /// Constructs an instance of the NeutralFillFocus design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillFocus; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs new file mode 100644 index 0000000000..2290e48420 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillHover design token +/// +public sealed class NeutralFillHover : DesignToken +{ + public NeutralFillHover() + { + Name = Constants.NeutralFillHover; + } + + /// + /// Constructs an instance of the NeutralFillHover design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillHover; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs index 455df9e3df..2cd4f7b753 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralStrokeRestDelta design token +/// The NeutralFillInputActive design token /// -public sealed class NeutralStrokeRestDelta : DesignToken +public sealed class NeutralFillInputActive : DesignToken { - public NeutralStrokeRestDelta() + public NeutralFillInputActive() { - Name = Constants.NeutralStrokeRestDelta; + Name = Constants.NeutralFillInputActive; } /// - /// Constructs an instance of the NeutralStrokeRestDelta design token + /// Constructs an instance of the NeutralFillInputActive design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralStrokeRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillInputActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralStrokeRestDelta; + Name = Constants.NeutralFillInputActive; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs deleted file mode 100644 index 649abfe84f..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActiveDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputActiveDelta design token -/// -public sealed class NeutralFillInputActiveDelta : DesignToken -{ - public NeutralFillInputActiveDelta() - { - Name = Constants.NeutralFillInputActiveDelta; - } - - /// - /// Constructs an instance of the NeutralFillInputActiveDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputActiveDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs index 97d2d150bf..05428f5070 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralFillHoverDelta design token +/// The NeutralFillInputFocus design token /// -public sealed class NeutralFillHoverDelta : DesignToken +public sealed class NeutralFillInputFocus : DesignToken { - public NeutralFillHoverDelta() + public NeutralFillInputFocus() { - Name = Constants.NeutralFillHoverDelta; + Name = Constants.NeutralFillInputFocus; } /// - /// Constructs an instance of the NeutralFillHoverDelta design token + /// Constructs an instance of the NeutralFillInputFocus design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralFillHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillInputFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralFillHoverDelta; + Name = Constants.NeutralFillInputFocus; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs deleted file mode 100644 index 4037577529..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocusDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputFocusDelta design token -/// -public sealed class NeutralFillInputFocusDelta : DesignToken -{ - public NeutralFillInputFocusDelta() - { - Name = Constants.NeutralFillInputFocusDelta; - } - - /// - /// Constructs an instance of the NeutralFillInputFocusDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputFocusDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs new file mode 100644 index 0000000000..5362d2d0f2 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillInputHover design token +/// +public sealed class NeutralFillInputHover : DesignToken +{ + public NeutralFillInputHover() + { + Name = Constants.NeutralFillInputHover; + } + + /// + /// Constructs an instance of the NeutralFillInputHover design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillInputHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillInputHover; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs deleted file mode 100644 index c689481de6..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHoverDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputHoverDelta design token -/// -public sealed class NeutralFillInputHoverDelta : DesignToken -{ - public NeutralFillInputHoverDelta() - { - Name = Constants.NeutralFillInputHoverDelta; - } - - /// - /// Constructs an instance of the NeutralFillInputHoverDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputHoverDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs similarity index 55% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs index 5000f70c04..7b31517490 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The AccentFillFocusDelta design token +/// The NeutralFillInputRest design token /// -public sealed class AccentFillFocusDelta : DesignToken +public sealed class NeutralFillInputRest : DesignToken { - public AccentFillFocusDelta() + public NeutralFillInputRest() { - Name = Constants.AccentFillFocusDelta; + Name = Constants.NeutralFillInputRest; } /// - /// Constructs an instance of the AccentFillFocusDelta design token + /// Constructs an instance of the NeutralFillInputRest design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public AccentFillFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillInputRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.AccentFillFocusDelta; + Name = Constants.NeutralFillInputRest; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs deleted file mode 100644 index 08d6dea1cb..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRestDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputRestDelta design token -/// -public sealed class NeutralFillInputRestDelta : DesignToken -{ - public NeutralFillInputRestDelta() - { - Name = Constants.NeutralFillInputRestDelta; - } - - /// - /// Constructs an instance of the NeutralFillInputRestDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputRestDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs similarity index 55% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs index c1789adc2d..b649fa5709 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The AccentFillHoverDelta design token +/// The NeutralFillLayerRest design token /// -public sealed class AccentFillHoverDelta : DesignToken +public sealed class NeutralFillLayerRest : DesignToken { - public AccentFillHoverDelta() + public NeutralFillLayerRest() { - Name = Constants.AccentFillHoverDelta; + Name = Constants.NeutralFillLayerRest; } /// - /// Constructs an instance of the AccentFillHoverDelta design token + /// Constructs an instance of the NeutralFillLayerRest design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public AccentFillHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillLayerRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.AccentFillHoverDelta; + Name = Constants.NeutralFillLayerRest; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs deleted file mode 100644 index 465a6d6aa0..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRestDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillLayerRestDelta design token -/// -public sealed class NeutralFillLayerRestDelta : DesignToken -{ - public NeutralFillLayerRestDelta() - { - Name = Constants.NeutralFillLayerRestDelta; - } - - /// - /// Constructs an instance of the NeutralFillLayerRestDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillLayerRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillLayerRestDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs new file mode 100644 index 0000000000..c9ae09c681 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillRest design token +/// +public sealed class NeutralFillRest : DesignToken +{ + public NeutralFillRest() + { + Name = Constants.NeutralFillRest; + } + + /// + /// Constructs an instance of the NeutralFillRest design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillRest; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs index febf06a343..0ca6074413 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActiveDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralStrokeActiveDelta design token +/// The NeutralFillStealthActive design token /// -public sealed class NeutralStrokeActiveDelta : DesignToken +public sealed class NeutralFillStealthActive : DesignToken { - public NeutralStrokeActiveDelta() + public NeutralFillStealthActive() { - Name = Constants.NeutralStrokeActiveDelta; + Name = Constants.NeutralFillStealthActive; } /// - /// Constructs an instance of the NeutralStrokeActiveDelta design token + /// Constructs an instance of the NeutralFillStealthActive design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralStrokeActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillStealthActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralStrokeActiveDelta; + Name = Constants.NeutralFillStealthActive; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs deleted file mode 100644 index 6c961da0fe..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActiveDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthActiveDelta design token -/// -public sealed class NeutralFillStealthActiveDelta : DesignToken -{ - public NeutralFillStealthActiveDelta() - { - Name = Constants.NeutralFillStealthActiveDelta; - } - - /// - /// Constructs an instance of the NeutralFillStealthActiveDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthActiveDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs new file mode 100644 index 0000000000..d01b868523 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs @@ -0,0 +1,26 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStealthFocus design token +/// +public sealed class NeutralFillStealthFocus : DesignToken +{ + public NeutralFillStealthFocus() + { + Name = Constants.NeutralFillStealthFocus; + + } + + /// + /// Constructs an instance of the NeutralFillStealthFocus design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStealthFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStealthFocus; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs deleted file mode 100644 index 6a73b92e75..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocusDelta.cs +++ /dev/null @@ -1,26 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthFocusDelta design token -/// -public sealed class NeutralFillStealthFocusDelta : DesignToken -{ - public NeutralFillStealthFocusDelta() - { - Name = Constants.NeutralFillStealthFocusDelta; - - } - - /// - /// Constructs an instance of the NeutralFillStealthFocusDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthFocusDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs index cb039377fe..062950d4bd 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocusDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralStrokeFocusDelta design token +/// The NeutralFillStealthHover design token /// -public sealed class NeutralStrokeFocusDelta : DesignToken +public sealed class NeutralFillStealthHover : DesignToken { - public NeutralStrokeFocusDelta() + public NeutralFillStealthHover() { - Name = Constants.NeutralStrokeFocusDelta; + Name = Constants.NeutralFillStealthHover; } /// - /// Constructs an instance of the NeutralStrokeFocusDelta design token + /// Constructs an instance of the NeutralFillStealthHover design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralStrokeFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillStealthHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralStrokeFocusDelta; + Name = Constants.NeutralFillStealthHover; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs deleted file mode 100644 index 89880d840d..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHoverDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthHoverDelta design token -/// -public sealed class NeutralFillStealthHoverDelta : DesignToken -{ - public NeutralFillStealthHoverDelta() - { - Name = Constants.NeutralFillStealthHoverDelta; - } - - /// - /// Constructs an instance of the NeutralFillStealthHoverDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthHoverDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs new file mode 100644 index 0000000000..09bac579ef --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStealthRest design token +/// +public sealed class NeutralFillStealthRest : DesignToken +{ + public NeutralFillStealthRest() + { + Name = Constants.NeutralFillStealthRest; + } + + /// + /// Constructs an instance of the NeutralFillStealthRest design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStealthRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStealthRest; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs deleted file mode 100644 index 4cb75423e9..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRestDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthRestDelta design token -/// -public sealed class NeutralFillStealthRestDelta : DesignToken -{ - public NeutralFillStealthRestDelta() - { - Name = Constants.NeutralFillStealthRestDelta; - } - - /// - /// Constructs an instance of the NeutralFillStealthRestDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthRestDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs similarity index 54% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs index c7eb27fcec..021657c82c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHoverDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The NeutralStrokeHoverDelta design token +/// The NeutralFillStrongActive design token /// -public sealed class NeutralStrokeHoverDelta : DesignToken +public sealed class NeutralFillStrongActive : DesignToken { - public NeutralStrokeHoverDelta() + public NeutralFillStrongActive() { - Name = Constants.NeutralStrokeHoverDelta; + Name = Constants.NeutralFillStrongActive; } /// - /// Constructs an instance of the NeutralStrokeHoverDelta design token + /// Constructs an instance of the NeutralFillStrongActive design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public NeutralStrokeHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralFillStrongActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.NeutralStrokeHoverDelta; + Name = Constants.NeutralFillStrongActive; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs deleted file mode 100644 index 49cc94c9e8..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActiveDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongActiveDelta design token -/// -public sealed class NeutralFillStrongActiveDelta : DesignToken -{ - public NeutralFillStrongActiveDelta() - { - Name = Constants.NeutralFillStrongActiveDelta; - } - - /// - /// Constructs an instance of the NeutralFillStrongActiveDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongActiveDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongActiveDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs new file mode 100644 index 0000000000..75dd857373 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongFocus design token +/// +public sealed class NeutralFillStrongFocus : DesignToken +{ + public NeutralFillStrongFocus() + { + Name = Constants.NeutralFillStrongFocus; + } + + /// + /// Constructs an instance of the NeutralFillStrongFocus design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongFocus; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs deleted file mode 100644 index 4f8bf99751..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocusDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongFocusDelta design token -/// -public sealed class NeutralFillStrongFocusDelta : DesignToken -{ - public NeutralFillStrongFocusDelta() - { - Name = Constants.NeutralFillStrongFocusDelta; - } - - /// - /// Constructs an instance of the NeutralFillStrongFocusDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongFocusDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongFocusDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs new file mode 100644 index 0000000000..4dcbe2a307 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongHover design token +/// +public sealed class NeutralFillStrongHover : DesignToken +{ + public NeutralFillStrongHover() + { + Name = Constants.NeutralFillStrongHover; + } + + /// + /// Constructs an instance of the NeutralFillStrongHover design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongHover; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs deleted file mode 100644 index d899926e49..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHoverDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongHoverDelta design token -/// -public sealed class NeutralFillStrongHoverDelta : DesignToken -{ - public NeutralFillStrongHoverDelta() - { - Name = Constants.NeutralFillStrongHoverDelta; - } - - /// - /// Constructs an instance of the NeutralFillStrongHoverDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongHoverDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongHoverDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs new file mode 100644 index 0000000000..1e54d830f4 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralFillStrongRest design token +/// +public sealed class NeutralFillStrongRest : DesignToken +{ + public NeutralFillStrongRest() + { + Name = Constants.NeutralFillStrongRest; + } + + /// + /// Constructs an instance of the NeutralFillStrongRest design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralFillStrongRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralFillStrongRest; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs deleted file mode 100644 index 616f5b7f44..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRestDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongRestDelta design token -/// -public sealed class NeutralFillStrongRestDelta : DesignToken -{ - public NeutralFillStrongRestDelta() - { - Name = Constants.NeutralFillStrongRestDelta; - } - - /// - /// Constructs an instance of the NeutralFillStrongRestDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongRestDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs similarity index 55% rename from src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs rename to src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs index 45656196e7..2c612efd95 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRestDelta.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs @@ -4,22 +4,22 @@ namespace Microsoft.Fast.Components.FluentUI.DesignTokens; /// -/// The AccentFillRestDelta design token +/// The NeutralStrokeActive design token /// -public sealed class AccentFillRestDelta : DesignToken +public sealed class NeutralStrokeActive : DesignToken { - public AccentFillRestDelta() + public NeutralStrokeActive() { - Name = Constants.AccentFillRestDelta; + Name = Constants.NeutralStrokeActive; } /// - /// Constructs an instance of the AccentFillRestDelta design token + /// Constructs an instance of the NeutralStrokeActive design token /// /// IJSRuntime reference (from DI) /// IConfiguration reference (from DI) - public AccentFillRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + public NeutralStrokeActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) { - Name = Constants.AccentFillRestDelta; + Name = Constants.NeutralStrokeActive; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs new file mode 100644 index 0000000000..36860b9728 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeDividerRest design token +/// +public sealed class NeutralStrokeDividerRest : DesignToken +{ + public NeutralStrokeDividerRest() + { + Name = Constants.NeutralStrokeDividerRest; + } + + /// + /// Constructs an instance of the NeutralStrokeDividerRest design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeDividerRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeDividerRest; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs deleted file mode 100644 index 3b03e547be..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRestDelta.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralStrokeDividerRestDelta design token -/// -public sealed class NeutralStrokeDividerRestDelta : DesignToken -{ - public NeutralStrokeDividerRestDelta() - { - Name = Constants.NeutralStrokeDividerRestDelta; - } - - /// - /// Constructs an instance of the NeutralStrokeDividerRestDelta design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralStrokeDividerRestDelta(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralStrokeDividerRestDelta; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs new file mode 100644 index 0000000000..d4a719ee52 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeFocus design token +/// +public sealed class NeutralStrokeFocus : DesignToken +{ + public NeutralStrokeFocus() + { + Name = Constants.NeutralStrokeFocus; + } + + /// + /// Constructs an instance of the NeutralStrokeFocus design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeFocus; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs new file mode 100644 index 0000000000..051cabf401 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeHover design token +/// +public sealed class NeutralStrokeHover : DesignToken +{ + public NeutralStrokeHover() + { + Name = Constants.NeutralStrokeHover; + } + + /// + /// Constructs an instance of the NeutralStrokeHover design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeHover; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs new file mode 100644 index 0000000000..2b0e664dc3 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs @@ -0,0 +1,25 @@ +using Microsoft.Extensions.Configuration; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI.DesignTokens; + +/// +/// The NeutralStrokeRest design token +/// +public sealed class NeutralStrokeRest : DesignToken +{ + public NeutralStrokeRest() + { + Name = Constants.NeutralStrokeRest; + } + + /// + /// Constructs an instance of the NeutralStrokeRest design token + /// + /// IJSRuntime reference (from DI) + /// IConfiguration reference (from DI) + public NeutralStrokeRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) + { + Name = Constants.NeutralStrokeRest; + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs index be0fc55200..80ff23b917 100644 --- a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -39,35 +39,35 @@ public static void AddFluentUIComponents(this IServiceCollection services) services.AddTransient(); services.AddTransient(); services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); + services.AddTransient(); } } \ No newline at end of file From f7786a9160080ec7eac8820dc235ce4976bc19cf Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 21 Apr 2022 17:39:07 +0200 Subject: [PATCH 27/34] Moved all the design token creation to a Source Generator --- .../DesignTokenConstants.cs | 178 +++++++++++++ .../DesignTokenGenerator.cs | 106 ++++++++ .../DesignTokens/AccentFillActive.cs | 25 -- .../DesignTokens/AccentFillFocus.cs | 25 -- .../DesignTokens/AccentFillHover.cs | 25 -- .../DesignTokens/AccentFillRest.cs | 25 -- .../DesignTokens/AccentForegroundActive.cs | 25 -- .../DesignTokens/AccentForegroundFocus.cs | 25 -- .../DesignTokens/AccentForegroundHover.cs | 25 -- .../DesignTokens/AccentForegroundRest.cs | 25 -- .../DesignTokens/BaseHeightMultiplier.cs | 25 -- .../BaseHorizontalSpacingMultiplier.cs | 25 -- .../DesignTokens/BaseLayerLuminance.cs | 28 --- .../DesignTokens/BodyFont.cs | 25 -- .../DesignTokens/Constants.cs | 237 ------------------ .../DesignTokens/ControlCornerRadius.cs | 25 -- .../DesignTokens/Density.cs | 25 -- .../DesignTokens/DesignTokens.cs | 127 ---------- .../DesignTokens/DesignUnit.cs | 25 -- .../DesignTokens/Direction.cs | 25 -- .../DesignTokens/DisabledOpacity.cs | 25 -- .../DesignTokens/FillColor.cs | 28 --- .../DesignTokens/FocusStrokeWidth.cs | 25 -- .../DesignTokens/LayerCornerRadius.cs | 25 -- .../DesignTokens/NeutralFillActive.cs | 25 -- .../DesignTokens/NeutralFillFocus.cs | 25 -- .../DesignTokens/NeutralFillHover.cs | 25 -- .../DesignTokens/NeutralFillInputActive.cs | 25 -- .../DesignTokens/NeutralFillInputFocus.cs | 25 -- .../DesignTokens/NeutralFillInputHover.cs | 25 -- .../DesignTokens/NeutralFillInputRest.cs | 25 -- .../DesignTokens/NeutralFillLayerRest.cs | 25 -- .../DesignTokens/NeutralFillRest.cs | 25 -- .../DesignTokens/NeutralFillStealthActive.cs | 25 -- .../DesignTokens/NeutralFillStealthFocus.cs | 26 -- .../DesignTokens/NeutralFillStealthHover.cs | 25 -- .../DesignTokens/NeutralFillStealthRest.cs | 25 -- .../DesignTokens/NeutralFillStrongActive.cs | 25 -- .../DesignTokens/NeutralFillStrongFocus.cs | 25 -- .../DesignTokens/NeutralFillStrongHover.cs | 25 -- .../DesignTokens/NeutralFillStrongRest.cs | 25 -- .../DesignTokens/NeutralStrokeActive.cs | 25 -- .../DesignTokens/NeutralStrokeDividerRest.cs | 25 -- .../DesignTokens/NeutralStrokeFocus.cs | 25 -- .../DesignTokens/NeutralStrokeHover.cs | 25 -- .../DesignTokens/NeutralStrokeRest.cs | 25 -- .../DesignTokens/StrokeWidth.cs | 25 -- .../DesignTokens/TypeRampBaseFontSize.cs | 25 -- .../DesignTokens/TypeRampBaseLineHeight.cs | 25 -- .../DesignTokens/TypeRampMinus1FontSize.cs | 25 -- .../DesignTokens/TypeRampMinus1LineHeight.cs | 25 -- .../DesignTokens/TypeRampMinus2FontSize.cs | 25 -- .../DesignTokens/TypeRampMinus2LineHeight.cs | 25 -- .../DesignTokens/TypeRampPlus1FontSize.cs | 25 -- .../DesignTokens/TypeRampPlus1LineHeight.cs | 25 -- .../DesignTokens/TypeRampPlus2FontSize.cs | 25 -- .../DesignTokens/TypeRampPlus2LineHeight.cs | 25 -- .../DesignTokens/TypeRampPlus3FontSize.cs | 25 -- .../DesignTokens/TypeRampPlus3LineHeight.cs | 25 -- .../DesignTokens/TypeRampPlus4FontSize.cs | 25 -- .../DesignTokens/TypeRampPlus4LineHeight.cs | 25 -- .../DesignTokens/TypeRampPlus5FontSize.cs | 25 -- .../DesignTokens/TypeRampPlus5LineHeight.cs | 25 -- .../DesignTokens/TypeRampPlus6FontSize.cs | 25 -- .../DesignTokens/TypeRampPlus6LineHeight.cs | 25 -- .../Microsoft.Fast.Components.FluentUI.csproj | 4 - .../ServiceCollectionExtensions.cs | 62 +---- 67 files changed, 285 insertions(+), 1961 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs create mode 100644 src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs delete mode 100644 src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs diff --git a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs new file mode 100644 index 0000000000..5cc73e13b7 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs @@ -0,0 +1,178 @@ +namespace Microsoft.Fast.Components.FluentUI.Generators; + +/// +/// This class contains all the design tokens as const s where the value represents +/// the of the value of the design token +/// +public class DesignTokenConstants +{ + //General tokens + public const string Direction = "FluentUI.Direction"; + public const string DisabledOpacity = "float?"; + + //Density tokens + public const string BaseHeightMultiplier = "int?"; + public const string BaseHorizontalSpacingMultiplier = "int?"; + public const string Density = "int?"; + public const string DesignUnit = "int?"; + + //Appearance tokens + public const string ControlCornerRadius = "int?"; + public const string LayerCornerRadius = "int?"; + public const string StrokeWidth = "int?"; + public const string FocusStrokeWidth = "int?"; + + //Typography values + public const string BodyFont = "string"; + public const string TypeRampBaseFontSize = "string"; + public const string TypeRampBaseLineHeight = "string"; + public const string TypeRampMinus1FontSize = "string"; + public const string TypeRampMinus1LineHeight = "string"; + public const string TypeRampMinus2FontSize = "string"; + public const string TypeRampMinus2LineHeight = "string"; + public const string TypeRampPlus1FontSize = "string"; + public const string TypeRampPlus1LineHeight = "string"; + public const string TypeRampPlus2FontSize = "string"; + public const string TypeRampPlus2LineHeight = "string"; + public const string TypeRampPlus3FontSize = "string"; + public const string TypeRampPlus3LineHeight = "string"; + public const string TypeRampPlus4FontSize = "string"; + public const string TypeRampPlus4LineHeight = "string"; + public const string TypeRampPlus5FontSize = "string"; + public const string TypeRampPlus5LineHeight = "string"; + public const string TypeRampPlus6FontSize = "string"; + public const string TypeRampPlus6LineHeight = "string"; + + //Color recipe values + public const string BaseLayerLuminance = "float?"; + + //Color recipes + public const string NeutralBaseColor = "string"; + public const string AccentBaseColor = "string"; + public const string FillColor = "string"; + + //Neutral Layers + public const string NeutralLayerCardContainer = "string"; + public const string NeutralLayerFloating = "string"; + public const string NeutralLayer1 = "string"; + public const string NeutralLayer2 = "string"; + public const string NeutralLayer3 = "string"; + public const string NeutralLayer4 = "string"; + + //Accent Fill + public const string AccentFillRest = "string"; + public const string AccentFillHover = "string"; + public const string AccentFillActive = "string"; + public const string AccentFillFocus = "string"; + + //Foreground On Accent + public const string ForegroundOnAccentRest = "string"; + public const string ForegroundOnAccentHover = "string"; + public const string ForegroundOnAccentActive = "string"; + public const string ForegroundOnAccentFocus = "string"; + + //Accent Foreground + public const string AccentForegroundRest = "string"; + public const string AccentForegroundHover = "string"; + public const string AccentForegroundActive = "string"; + public const string AccentForegroundFocus = "string"; + + //Accent Stroke Control + public const string AccentStrokeControlRest = "string"; + public const string AccentStrokeControlHover = "string"; + public const string AccentStrokeControlActive = "string"; + public const string AccentStrokeControlFocus = "string"; + + //Neutral Fill + public const string NeutralFillRest = "string"; + public const string NeutralFillHover = "string"; + public const string NeutralFillActive = "string"; + public const string NeutralFillFocus = "string"; + + //Neutral Fill Input + public const string NeutralFillInputRest = "string"; + public const string NeutralFillInputHover = "string"; + public const string NeutralFillInputActive = "string"; + public const string NeutralFillInputFocus = "string"; + + //Neutral Fill Input Alt + public const string NeutralFillInputAltRest = "string"; + public const string NeutralFillInputAltHover = "string"; + public const string NeutralFillInputAltActive = "string"; + public const string NeutralFillInputAltFocus = "string"; + + //Neutral Fill Layer + public const string NeutralFillLayerRest = "string"; + public const string NeutralFillLayerHover = "string"; + public const string NeutralFillLayerActive = "string"; + + + //Neutral Fill Layer Alt + public const string NeutralFillLayerAltRest = "string"; + + //Neutral Fill Secondary + public const string NeutralFillSecondaryRest = "string"; + public const string NeutralFillSecondaryHover = "string"; + public const string NeutralFillSecondaryActive = "string"; + public const string NeutralFillSecondaryFocus = "string"; + + //Neutral Fill Stealth + public const string NeutralFillStealthRest = "string"; + public const string NeutralFillStealthHover = "string"; + public const string NeutralFillStealthActive = "string"; + public const string NeutralFillStealthFocus = "string"; + + //Neutral Fill Strong + public const string NeutralFillStrongRest = "string"; + public const string NeutralFillStrongHover = "string"; + public const string NeutralFillStrongActive = "string"; + public const string NeutralFillStrongFocus = "string"; + + //Neutral Foreground + public const string NeutralForegroundRest = "string"; + public const string NeutralForegroundHover = "string"; + public const string NeutralForegroundActive = "string"; + public const string NeutralForegroundFocus = "string"; + + //Neutral Foreground Hint + public const string NeutralForegroundHint = "string"; + + //Neutral Stroke + public const string NeutralStrokeRest = "string"; + public const string NeutralStrokeHover = "string"; + public const string NeutralStrokeActive = "string"; + public const string NeutralStrokeFocus = "string"; + + //Neutral Stroke Control + public const string NeutralStrokeControlRest = "string"; + public const string NeutralStrokeControlHover = "string"; + public const string NeutralStrokeControlActive = "string"; + public const string NeutralStrokeControlFocus = "string"; + + //Neutral Stroke Divider + public const string NeutralStrokeDividerRest = "string"; + + //Neutral Stroke Input + public const string NeutralStrokeInputRest = "string"; + public const string NeutralStrokeInputHover = "string"; + public const string NeutralStrokeInputActive = "string"; + public const string NeutralStrokeInputFocus = "string"; + + + //Neutral Stroke Layer + public const string NeutralStrokeLayerRest = "string"; + public const string NeutralStrokeLayerHover = "string"; + public const string NeutralStrokeLayerActive = "string"; + + //Neutral Stroke Strong + public const string NeutralStrokeStrongRest = "string"; + public const string NeutralStrokeStrongHover = "string"; + public const string NeutralStrokeStrongActive = "string"; + public const string NeutralStrokeStrongFocus = "string"; + + //Focus Stroke Outer + public const string FocusStrokeOuter = "string"; + + //Focus Stroke Inner + public const string FocusStrokeInner = "string"; +} diff --git a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs new file mode 100644 index 0000000000..b062d30937 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs @@ -0,0 +1,106 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Reflection; +using System.Text; +using Microsoft.CodeAnalysis; +using Microsoft.CodeAnalysis.Text; + + +#nullable enable + +namespace Microsoft.Fast.Components.FluentUI.Generators +{ + [Generator] + public class DesignTokenGenerator : ISourceGenerator + { + private List GetConstants(Type type) + { + FieldInfo[] fieldInfos = type.GetFields(BindingFlags.Public | BindingFlags.Static | BindingFlags.FlattenHierarchy); + + return fieldInfos.Where(fi => fi.IsLiteral && !fi.IsInitOnly).ToList(); + } + + public void Execute(GeneratorExecutionContext context) + { + StringBuilder? sb = new(); + + sb.AppendLine($"namespace Microsoft.Fast.Components.FluentUI.DesignTokens;"); + sb.AppendLine($""); + sb.AppendLine("public class Constants"); + sb.AppendLine("{"); + foreach (FieldInfo info in GetConstants(typeof(DesignTokenConstants))) + { + string camelCase = info.Name[0].ToString().ToLowerInvariant() + info.Name.Substring(1); + sb.AppendLine($"\tpublic const string {info.Name} = \"{camelCase}\";"); + } + sb.AppendLine("}"); + context.AddSource($"Constants.g.cs", SourceText.From(sb.ToString(), Encoding.UTF8)); + + sb.Clear(); + sb.AppendLine("using Microsoft.Extensions.Configuration;"); + sb.AppendLine("using Microsoft.JSInterop;"); + sb.AppendLine(""); + sb.AppendLine("namespace Microsoft.Fast.Components.FluentUI.DesignTokens;"); + foreach (FieldInfo info in GetConstants(typeof(DesignTokenConstants))) + { + string name = info.Name; + string type = info.GetValue(null).ToString(); + + sb.AppendLine(""); + sb.AppendLine("/// "); + sb.AppendLine($"/// The {name} design token"); + sb.AppendLine("/// "); + sb.AppendLine($"public sealed class {name} : DesignToken<{type}>"); + sb.AppendLine("{"); + sb.AppendLine("\t/// "); + sb.AppendLine($"\t/// Constructs an instance of the {name} design token"); + sb.AppendLine("\t/// "); + sb.AppendLine($"\tpublic {name}()"); + sb.AppendLine("\t{"); + sb.AppendLine($"\t\tName = Constants.{name};"); + sb.AppendLine("\t}"); + sb.AppendLine(""); + sb.AppendLine("\t/// "); + sb.AppendLine($"\t/// Constructs an instance of the {name} design token"); + sb.AppendLine("\t/// "); + sb.AppendLine("\t/// IJSRuntime reference"); + sb.AppendLine("\t/// IConfiguration reference"); + sb.AppendLine($"\tpublic {name}(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration)"); + sb.AppendLine("\t{"); + sb.AppendLine($"\t\tName = Constants.{name};"); + sb.AppendLine("\t}"); + sb.AppendLine("}"); + } + context.AddSource($"DesignTokens.g.cs", SourceText.From(sb.ToString(), Encoding.UTF8)); + + sb.Clear(); + sb.AppendLine($"using Microsoft.Extensions.DependencyInjection;"); + sb.AppendLine($""); + sb.AppendLine($"namespace Microsoft.Fast.Components.FluentUI.DesignTokens;"); + sb.AppendLine($""); + sb.AppendLine("public static class ServiceCollectionExtensions"); + sb.AppendLine("{"); + sb.AppendLine("\tpublic static void AddDesignTokens(this IServiceCollection services)"); + sb.AppendLine("\t{"); + foreach (FieldInfo info in GetConstants(typeof(DesignTokenConstants))) + { + sb.AppendLine($"\t\tservices.AddTransient<{info.Name}>();"); + } + sb.AppendLine(" }"); + sb.AppendLine("}"); + context.AddSource($"ServiceCollectionExtensions.g.cs", SourceText.From(sb.ToString(), Encoding.UTF8)); + } + + public void Initialize(GeneratorInitializationContext context) + { + // No initialization required for this one +#if DEBUG + //if (!Debugger.IsAttached) + //{ + // Debugger.Launch(); + //} +#endif + } + } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs deleted file mode 100644 index a60af14087..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentFillActive design token -/// -public sealed class AccentFillActive : DesignToken -{ - public AccentFillActive() - { - Name = Constants.AccentFillActive; - } - - /// - /// Constructs an instance of the AccentFillActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentFillActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentFillActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs deleted file mode 100644 index 60ae694d85..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillFocus.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentFillFocus design token -/// -public sealed class AccentFillFocus : DesignToken -{ - public AccentFillFocus() - { - Name = Constants.AccentFillFocus; - } - - /// - /// Constructs an instance of the AccentFillFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentFillFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentFillFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs deleted file mode 100644 index 69e30d0462..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentFillHover design token -/// -public sealed class AccentFillHover : DesignToken -{ - public AccentFillHover() - { - Name = Constants.AccentFillHover; - } - - /// - /// Constructs an instance of the AccentFillHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentFillHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentFillHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs deleted file mode 100644 index bbb0ef0bc2..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentFillRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentFillRest design token -/// -public sealed class AccentFillRest : DesignToken -{ - public AccentFillRest() - { - Name = Constants.AccentFillRest; - } - - /// - /// Constructs an instance of the AccentFillRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentFillRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentFillRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs deleted file mode 100644 index 8d1fc5cd4a..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundActive design token -/// -public sealed class AccentForegroundActive : DesignToken -{ - public AccentForegroundActive() - { - Name = Constants.AccentForegroundActive; - } - - /// - /// Constructs an instance of the AccentForegroundActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs deleted file mode 100644 index a49a7ddc5c..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundFocus.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundFocus design token -/// -public sealed class AccentForegroundFocus : DesignToken -{ - public AccentForegroundFocus() - { - Name = Constants.AccentForegroundFocus; - } - - /// - /// Constructs an instance of the AccentForegroundFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs deleted file mode 100644 index f82fdb3351..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundHover design token -/// -public sealed class AccentForegroundHover : DesignToken -{ - public AccentForegroundHover() - { - Name = Constants.AccentForegroundHover; - } - - /// - /// Constructs an instance of the AccentForegroundHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs deleted file mode 100644 index fb450c115e..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/AccentForegroundRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The AccentForegroundRest design token -/// -public sealed class AccentForegroundRest : DesignToken -{ - public AccentForegroundRest() - { - Name = Constants.AccentForegroundRest; - } - - /// - /// Constructs an instance of the AccentForegroundRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public AccentForegroundRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.AccentForegroundRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs deleted file mode 100644 index e7ee3209ab..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHeightMultiplier.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The BaseHeightMultiplier design token -/// -public sealed class BaseHeightMultiplier : DesignToken -{ - public BaseHeightMultiplier() - { - Name = Constants.BaseHeightMultiplier; - } - - /// - /// Constructs an instance of a BaseHeightMultiplier design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public BaseHeightMultiplier(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.BaseHeightMultiplier; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs deleted file mode 100644 index 1a97b4397e..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseHorizontalSpacingMultiplier.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The BaseHorizontalSpacingMultiplier design token -/// -public sealed class BaseHorizontalSpacingMultiplier : DesignToken -{ - public BaseHorizontalSpacingMultiplier() - { - Name = Constants.BaseHorizontalSpacingMultiplier; - } - - /// - /// Constructs an instance of the BaseHorizontalSpacingMultiplier design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public BaseHorizontalSpacingMultiplier(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.BaseHorizontalSpacingMultiplier; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs deleted file mode 100644 index f34bd43cb9..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BaseLayerLuminance.cs +++ /dev/null @@ -1,28 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The BaseLayerLuminance design token -/// -public sealed class BaseLayerLuminance : DesignToken -{ - /// - /// Constructs an instance of the BaseLayerLuminance design token - /// - public BaseLayerLuminance() - { - Name = Constants.BaseLayerLuminance; - } - - /// - /// Constructs an instance of the BaseLayerLuminance design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public BaseLayerLuminance(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.BaseLayerLuminance; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs deleted file mode 100644 index f13c77fce8..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/BodyFont.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The BodyFont design token -/// -public class BodyFont : DesignToken -{ - public BodyFont() - { - Name = Constants.BodyFont; - } - - /// - /// Constructs an instance of the BodyFont design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public BodyFont(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.BodyFont; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs deleted file mode 100644 index 2d9054041a..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Constants.cs +++ /dev/null @@ -1,237 +0,0 @@ -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -public class Constants -{ - //General tokens - public const string Direction = "direction"; - public const string DisabledOpacity = "disabledOpacity"; - - //Density tokens - public const string BaseHeightMultiplier = "baseHeightMultiplier"; - public const string BaseHorizontalSpacingMultiplier = "baseHorizontalSpacingMultiplier"; - public const string Density = "density"; - public const string DesignUnit = "designUnit"; - - //Appearance tokens - public const string ControlCornerRadius = "controlCornerRadius"; - public const string LayerCornerRadius = "layerCornerRadius"; - public const string StrokeWidth = "strokeWidth"; - public const string FocusStrokeWidth = "focusStrokeWidth"; - - //Typography values - public const string BodyFont = "bodyFont"; - public const string TypeRampBaseFontSize = "typeRampBaseFontSize"; - public const string TypeRampBaseLineHeight = "typeRampBaseLineHeight"; - public const string TypeRampMinus1FontSize = "typeRampMinus1FontSize"; - public const string TypeRampMinus1LineHeight = "typeRampMinus1LineHeight"; - public const string TypeRampMinus2FontSize = "typeRampMinus2FontSize"; - public const string TypeRampMinus2LineHeight = "typeRampMinus2LineHeight"; - public const string TypeRampPlus1FontSize = "typeRampPlus1FontSize"; - public const string TypeRampPlus1LineHeight = "typeRampPlus1LineHeight"; - public const string TypeRampPlus2FontSize = "typeRampPlus2FontSize"; - public const string TypeRampPlus2LineHeight = "typeRampPlus2LineHeight"; - public const string TypeRampPlus3FontSize = "typeRampPlus3FontSize"; - public const string TypeRampPlus3LineHeight = "typeRampPlus3LineHeight"; - public const string TypeRampPlus4FontSize = "typeRampPlus4FontSize"; - public const string TypeRampPlus4LineHeight = "typeRampPlus4LineHeight"; - public const string TypeRampPlus5FontSize = "typeRampPlus5FontSize"; - public const string TypeRampPlus5LineHeight = "typeRampPlus5LineHeight"; - public const string TypeRampPlus6FontSize = "typeRampPlus6FontSize"; - public const string TypeRampPlus6LineHeight = "typeRampPlus6LineHeight"; - - //Color recipe values - public const string BaseLayerLuminance = "baseLayerLuminance"; - - //Color recipes - //public const string NeutralBaseColor = "neutralBaseColor"; - //public const string AccentBaseColor = "accentBaseColor"; - public const string FillColor = "fillColor"; - - //Neutral Layers - //neutralLayerCardContainer - //neutralLayerFloating - //neutralLayer1 - //neutralLayer2 - //neutralLayer3 - //neutralLayer4 - - //Accent Fill - public const string AccentFillRest = "accentFillRest"; - public const string AccentFillHover = "accentFillHover"; - public const string AccentFillActive = "accentFillActive"; - public const string AccentFillFocus = "accentFillFocus"; - - //public const string AccentFillRestDelta = "accentFillRestDelta"; - //public const string AccentFillHoverDelta = "accentFillHoverDelta"; - //public const string AccentFillActiveDelta = "accentFillActiveDelta"; - //public const string AccentFillFocusDelta = "accentFillFocusDelta"; - - //Foreground On Accent - //public const string foregroundOnAccentRest = "foregroundOnAccentRest"; - //public const string foregroundOnAccentHover = "foregroundOnAccentHover"; - //public const string foregroundOnAccentActive = "foregroundOnAccentActive"; - //public const string foregroundOnAccentFocus = "foregroundOnAccentFocus"; - - //Accent Foreground - public const string AccentForegroundRest = "accentForegroundRest"; - public const string AccentForegroundHover = "accentForegroundHover"; - public const string AccentForegroundActive = "accentForegroundActive"; - public const string AccentForegroundFocus = "accentForegroundFocus"; - - //public const string AccentForegroundRestDelta = "accentForegroundRestDelta"; - //public const string AccentForegroundHoverDelta = "accentForegroundHoverDelta"; - //public const string AccentForegroundActiveDelta = "accentForegroundActiveDelta"; - //public const string AccentForegroundFocusDelta = "accentForegroundFocusDelta"; - - - //Accent Stroke Control - //public const string AccentStrokeControlRest = "accentStrokeControlRest"; - //public const string AccentStrokeControlHover = "accentStrokeControlHover"; - //public const string AccentStrokeControlActive = "accentStrokeControlActive"; - //public const string AccentStrokeControlFocus = "accentStrokeControlFocus"; - - //Neutral Fill - public const string NeutralFillRest = "neutralFillRest"; - public const string NeutralFillHover = "neutralFillHover"; - public const string NeutralFillActive = "neutralFillActive"; - public const string NeutralFillFocus = "neutralFillFocus"; - - //public const string NeutralFillRestDelta = "neutralFillRestDelta"; - //public const string NeutralFillHoverDelta = "neutralFillHoverDelta"; - //public const string NeutralFillActiveDelta = "neutralFillActiveDelta"; - //public const string NeutralFillFocusDelta = "neutralFillFocusDelta"; - - //Neutral Fill Input - public const string NeutralFillInputRest = "neutralFillInputRest"; - public const string NeutralFillInputHover = "neutralFillInputHover"; - public const string NeutralFillInputActive = "neutralFillInputActive"; - public const string NeutralFillInputFocus = "neutralFillInputFocus"; - - //public const string NeutralFillInputRestDelta = "neutralFillInputRestDelta"; - //public const string NeutralFillInputHoverDelta = "neutralFillInputHoverDelta"; - //public const string NeutralFillInputActiveDelta = "neutralFillInputActiveDelta"; - //public const string NeutralFillInputFocusDelta = "neutralFillInputFocusDelta"; - - //Neutral Fill Input Alt - public const string NeutralFillInputAltRest = "neutralFillInputAltRest"; - public const string NeutralFillInputAltHover = "neutralFillInputAltHover"; - public const string NeutralFillInputAltActive = "neutralFillInputAltActive"; - public const string NeutralFillInputAltFocus = "neutralFillInputAltFocus"; - - //public const string NeutralFillInputAltRestDelta = "neutralFillInputAltRestDelta"; - //public const string NeutralFillInputAltHoverDelta = "neutralFillInputAltHoverDelta"; - //public const string NeutralFillInputAltActiveDelta = "neutralFillInputAltActiveDelta"; - //public const string NeutralFillInputAltFocusDelta = "neutralFillInputAltFocusDelta"; - - //Neutral Fill Layer - public const string NeutralFillLayerRest = "neutralFillLayerRest"; - public const string NeutralFillLayerHover = "neutralFillLayerHover"; - public const string NeutralFillLayerActive = "neutralFillLayerActive"; - - //public const string NeutralFillLayerRestDelta = "neutralFillLayerRestDelta"; - //public const string NeutralFillLayerHoverDelta = "neutralFillLayerHoverDelta"; - //public const string NeutralFillLayerActiveDelta = "neutralFillLayerActiveDelta"; - - //Neutral Fill Layer Alt - //public const string NeutralFillLayerAltRest = "neutralFillLayerAltRest"; - //public const string NeutralFillLayerAltRestDelta = "neutralFillLayerAltRestDelta"; - - //Neutral Fill Secondary - public const string NeutralFillSecondaryRest = "neutralFillSecondaryRest"; - public const string NeutralFillSecondaryHover = "neutralFillSecondaryHover"; - public const string NeutralFillSecondaryActive = "neutralFillSecondaryActive"; - public const string NeutralFillSecondaryFocus = "neutralFillSecondaryFocus"; - - //public const string NeutralFillSecondaryRestDelta = "neutralFillSecondaryRestDelta"; - //public const string NeutralFillSecondaryHoverDelta = "neutralFillSecondaryHoverDelta"; - //public const string NeutralFillSecondaryActiveDelta = "neutralFillSecondaryActiveDelta"; - //public const string NeutralFillSecondaryFocusDelta = "neutralFillSecondaryFocusDelta"; - - //Neutral Fill Stealth - public const string NeutralFillStealthRest = "neutralFillStealthRest"; - public const string NeutralFillStealthHover = "neutralFillStealthHover"; - public const string NeutralFillStealthActive = "neutralFillStealthActive"; - public const string NeutralFillStealthFocus = "neutralFillStealthFocus"; - - //public const string NeutralFillStealthRestDelta = "neutralFillStealthRestDelta"; - //public const string NeutralFillStealthHoverDelta = "neutralFillStealthHoverDelta"; - //public const string NeutralFillStealthActiveDelta = "neutralFillStealthActiveDelta"; - //public const string NeutralFillStealthFocusDelta = "neutralFillStealthFocusDelta"; - - //Neutral Fill Strong - public const string NeutralFillStrongRest = "neutralFillStrongRest"; - public const string NeutralFillStrongHover = "neutralFillStrongHover"; - public const string NeutralFillStrongActive = "neutralFillStrongActive"; - public const string NeutralFillStrongFocus = "neutralFillStrongFocus"; - //public const string NeutralFillStrongRestDelta = "neutralFillStrongRestDelta"; - //public const string NeutralFillStrongHoverDelta = "neutralFillStrongHoverDelta"; - //public const string NeutralFillStrongActiveDelta = "neutralFillStrongActiveDelta"; - //public const string NeutralFillStrongFocusDelta = "neutralFillStrongFocusDelta"; - - //Neutral Foreground - public const string NeutralForegroundRest = "neutralForegroundRest"; - public const string NeutralForegroundHover = "neutralForegroundHover"; - public const string NeutralForegroundActive = "neutralForegroundActive"; - public const string NeutralForegroundFocus = "neutralForegroundFocus"; - - //Neutral Foreground Hint - public const string NeutralForegroundHint = "neutralForegroundHint"; - - //Neutral Stroke - public const string NeutralStrokeRest = "neutralStrokeRest"; - public const string NeutralStrokeHover = "neutralStrokeHover"; - public const string NeutralStrokeActive = "neutralStrokeActive"; - public const string NeutralStrokeFocus = "neutralStrokeFocus"; - - //public const string NeutralStrokeRestDelta = "neutralStrokeRestDelta"; - //public const string NeutralStrokeHoverDelta = "neutralStrokeHoverDelta"; - //public const string NeutralStrokeActiveDelta = "neutralStrokeActiveDelta"; - //public const string NeutralStrokeFocusDelta = "neutralStrokeFocusDelta"; - - //Neutral Stroke Control - public const string NeutralStrokeControlRest = "neutralStrokeControlRest"; - public const string NeutralStrokeControlHover = "neutralStrokeControlHover"; - public const string NeutralStrokeControlActive = "neutralStrokeControlActive"; - public const string NeutralStrokeControlFocus = "neutralStrokeControlFocus"; - - //public const string NeutralStrokeControlRestDelta = "neutralStrokeControlRestDelta"; - //public const string NeutralStrokeControlHoverDelta = "neutralStrokeControlHoverDelta"; - //public const string NeutralStrokeControlActiveDelta = "neutralStrokeControlActiveDelta"; - //public const string NeutralStrokeControlFocusDelta = "neutralStrokeControlFocusDelta"; - - //Neutral Stroke Divider - public const string NeutralStrokeDividerRest = "neutralStrokeDividerRest"; - //public const string NeutralStrokeDividerRestDelta = "neutralStrokeDividerRestDelta"; - - //Neutral Stroke Input - public const string NeutralStrokeInputRest = "neutralStrokeInputRest"; - public const string NeutralStrokeInputHover = "neutralStrokeInputHover"; - public const string NeutralStrokeInputActive = "neutralStrokeInputActive"; - public const string NeutralStrokeInputFocus = "neutralStrokeInputFocus"; - - - //Neutral Stroke Layer - public const string NeutralStrokeLayerRest = "neutralStrokeLayerRest"; - public const string NeutralStrokeLayerHover = "neutralStrokeLayerHover"; - public const string NeutralStrokeLayerActive = "neutralStrokeLayerActive"; - - //public const string NeutralStrokeLayerRestDelta = "neutralStrokeLayerRestDelta"; - //public const string NeutralStrokeLayerHoverDelta = "neutralStrokeLayerHoverDelta"; - //public const string NeutralStrokeLayerActiveDelta = "neutralStrokeLayerActiveDelta"; - - //Neutral Stroke Strong - public const string NeutralStrokeStrongRest = "neutralStrokeStrongRest"; - public const string NeutralStrokeStrongHover = "neutralStrokeStrongHover"; - public const string NeutralStrokeStrongActive = "neutralStrokeStrongActive"; - public const string NeutralStrokeStrongFocus = "neutralStrokeStrongFocus"; - - //public const string NeutralStrokeStrongHoverDelta = "neutralStrokeStrongHoverDelta"; - //public const string NeutralStrokeStrongActiveDelta = "neutralStrokeStrongActiveDelta"; - //public const string NeutralStrokeStrongFocusDelta = "neutralStrokeStrongFocusDelta"; - - //Focus Stroke Outer - public const string FocusStrokeOuter = "focusStrokeOuter"; - - //Focus Stroke Inner - public const string FocusStrokeInner = "focusStrokeInner"; -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs deleted file mode 100644 index c060b7f433..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/ControlCornerRadius.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The ControlCornerRadius design token -/// -public sealed class ControlCornerRadius : DesignToken -{ - public ControlCornerRadius() - { - Name = Constants.ControlCornerRadius; - } - - /// - /// Constructs an instance of the ControlCornerRadius design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public ControlCornerRadius(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.ControlCornerRadius; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs deleted file mode 100644 index f7f2fde3f2..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Density.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The Density design token -/// -public sealed class Density : DesignToken -{ - public Density() - { - Name = Constants.Density; - } - - /// - /// Constructs an instance of the Density design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public Density(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.Density; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs deleted file mode 100644 index 2c6e44cd50..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignTokens.cs +++ /dev/null @@ -1,127 +0,0 @@ -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -public class DesignTokens -{ - public DesignToken BodyFont { get; set; } - public DesignToken BaseHeightMultiplier { get; set; } - public DesignToken BaseHorizontalSpacingMultiplier { get; set; } - public DesignToken BaseLayerLuminance { get; set; } - public DesignToken ControlCornerRadius { get; set; } - public DesignToken Density { get; set; } - public DesignToken DesignUnit { get; set; } - public DesignToken Direction { get; set; } - public DesignToken DisabledOpacity { get; set; } - public DesignToken StrokeWidth { get; set; } - public DesignToken FocusStrokeWidth { get; set; } - public DesignToken TypeRampBaseFontSize { get; set; } - public DesignToken TypeRampBaseLineHeight { get; set; } - public DesignToken TypeRampMinus1FontSize { get; set; } - public DesignToken TypeRampMinus1LineHeight { get; set; } - public DesignToken TypeRampMinus2FontSize { get; set; } - public DesignToken TypeRampMinus2LineHeight { get; set; } - public DesignToken TypeRampPlus1FontSize { get; set; } - public DesignToken TypeRampPlus1LineHeight { get; set; } - public DesignToken TypeRampPlus2FontSize { get; set; } - public DesignToken TypeRampPlus2LineHeight { get; set; } - public DesignToken TypeRampPlus3FontSize { get; set; } - public DesignToken TypeRampPlus3LineHeight { get; set; } - public DesignToken TypeRampPlus4FontSize { get; set; } - public DesignToken TypeRampPlus4LineHeight { get; set; } - public DesignToken TypeRampPlus5FontSize { get; set; } - public DesignToken TypeRampPlus5LineHeight { get; set; } - public DesignToken TypeRampPlus6FontSize { get; set; } - public DesignToken TypeRampPlus6LineHeight { get; set; } - public DesignToken AccentFillRest { get; set; } - public DesignToken AccentFillHover { get; set; } - public DesignToken AccentFillActive { get; set; } - public DesignToken AccentFillFocus { get; set; } - public DesignToken AccentForegroundRest { get; set; } - public DesignToken AccentForegroundHover { get; set; } - public DesignToken AccentForegroundActive { get; set; } - public DesignToken AccentForegroundFocus { get; set; } - public DesignToken NeutralFillRest { get; set; } - public DesignToken NeutralFillHover { get; set; } - public DesignToken NeutralFillActive { get; set; } - public DesignToken NeutralFillFocus { get; set; } - public DesignToken NeutralFillInputRest { get; set; } - public DesignToken NeutralFillInputHover { get; set; } - public DesignToken NeutralFillInputActive { get; set; } - public DesignToken NeutralFillInputFocus { get; set; } - public DesignToken NeutralFillStealthRest { get; set; } - public DesignToken NeutralFillStealthHover { get; set; } - public DesignToken NeutralFillStealthActive { get; set; } - public DesignToken NeutralFillStealthFocus { get; set; } - public DesignToken NeutralFillStrongRest { get; set; } - public DesignToken NeutralFillStrongHover { get; set; } - public DesignToken NeutralFillStrongActive { get; set; } - public DesignToken NeutralFillStrongFocus { get; set; } - public DesignToken NeutralFillLayerRest { get; set; } - public DesignToken NeutralStrokeRest { get; set; } - public DesignToken NeutralStrokeHover { get; set; } - public DesignToken NeutralStrokeActive { get; set; } - public DesignToken NeutralStrokeFocus { get; set; } - public DesignToken NeutralStrokeDividerRest { get; set; } - - public DesignTokens(IJSRuntime jsRuntime, IConfiguration configuration) - { - BodyFont = new(jsRuntime, configuration, Constants.BodyFont); - BaseHeightMultiplier = new(jsRuntime, configuration, Constants.BaseHeightMultiplier); - BaseHorizontalSpacingMultiplier = new(jsRuntime, configuration, Constants.BaseHorizontalSpacingMultiplier); - BaseLayerLuminance = new(jsRuntime, configuration, Constants.BaseLayerLuminance); - ControlCornerRadius = new(jsRuntime, configuration, Constants.ControlCornerRadius); - Density = new(jsRuntime, configuration, Constants.Density); - DesignUnit = new(jsRuntime, configuration, Constants.DesignUnit); - Direction = new(jsRuntime, configuration, Constants.Direction); - DisabledOpacity = new(jsRuntime, configuration, Constants.DisabledOpacity); - StrokeWidth = new(jsRuntime, configuration, Constants.StrokeWidth); - FocusStrokeWidth = new(jsRuntime, configuration, Constants.FocusStrokeWidth); - TypeRampBaseFontSize = new(jsRuntime, configuration, Constants.TypeRampBaseFontSize); - TypeRampBaseLineHeight = new(jsRuntime, configuration, Constants.TypeRampBaseLineHeight); - TypeRampMinus1FontSize = new(jsRuntime, configuration, Constants.TypeRampMinus1FontSize); - TypeRampMinus1LineHeight = new(jsRuntime, configuration, Constants.TypeRampMinus1LineHeight); - TypeRampMinus2FontSize = new(jsRuntime, configuration, Constants.TypeRampMinus2FontSize); - TypeRampMinus2LineHeight = new(jsRuntime, configuration, Constants.TypeRampMinus2LineHeight); - TypeRampPlus1FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus1FontSize); - TypeRampPlus1LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus1LineHeight); - TypeRampPlus2FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus2FontSize); - TypeRampPlus2LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus2LineHeight); - TypeRampPlus3FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus3FontSize); - TypeRampPlus3LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus3LineHeight); - TypeRampPlus4FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus4FontSize); - TypeRampPlus4LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus4LineHeight); - TypeRampPlus5FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus5FontSize); - TypeRampPlus5LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus5LineHeight); - TypeRampPlus6FontSize = new(jsRuntime, configuration, Constants.TypeRampPlus6FontSize); - TypeRampPlus6LineHeight = new(jsRuntime, configuration, Constants.TypeRampPlus6LineHeight); - AccentFillRest = new(jsRuntime, configuration, Constants.AccentFillRest); - AccentFillHover = new(jsRuntime, configuration, Constants.AccentFillHover); - AccentFillActive = new(jsRuntime, configuration, Constants.AccentFillActive); - AccentFillFocus = new(jsRuntime, configuration, Constants.AccentFillFocus); - AccentForegroundRest = new(jsRuntime, configuration, Constants.AccentForegroundRest); - AccentForegroundHover = new(jsRuntime, configuration, Constants.AccentForegroundHover); - AccentForegroundActive = new(jsRuntime, configuration, Constants.AccentForegroundActive); - AccentForegroundFocus = new(jsRuntime, configuration, Constants.AccentForegroundFocus); - NeutralFillRest = new(jsRuntime, configuration, Constants.NeutralFillRest); - NeutralFillHover = new(jsRuntime, configuration, Constants.NeutralFillHover); - NeutralFillActive = new(jsRuntime, configuration, Constants.NeutralFillActive); - NeutralFillFocus = new(jsRuntime, configuration, Constants.NeutralFillFocus); - NeutralFillInputRest = new(jsRuntime, configuration, Constants.NeutralFillInputRest); - NeutralFillInputHover = new(jsRuntime, configuration, Constants.NeutralFillInputHover); - NeutralFillInputActive = new(jsRuntime, configuration, Constants.NeutralFillInputActive); - NeutralFillInputFocus = new(jsRuntime, configuration, Constants.NeutralFillInputFocus); - NeutralFillStealthRest = new(jsRuntime, configuration, Constants.NeutralFillStealthRest); - NeutralFillStealthHover = new(jsRuntime, configuration, Constants.NeutralFillStealthHover); - NeutralFillStealthActive = new(jsRuntime, configuration, Constants.NeutralFillStealthActive); - NeutralFillStealthFocus = new(jsRuntime, configuration, Constants.NeutralFillStealthFocus); - NeutralFillStrongRest = new(jsRuntime, configuration, Constants.NeutralFillStrongRest); - NeutralFillStrongHover = new(jsRuntime, configuration, Constants.NeutralFillStrongHover); - NeutralFillStrongActive = new(jsRuntime, configuration, Constants.NeutralFillStrongActive); - NeutralFillStrongFocus = new(jsRuntime, configuration, Constants.NeutralFillStrongFocus); - NeutralFillLayerRest = new(jsRuntime, configuration, Constants.NeutralFillLayerRest); - NeutralStrokeRest = new(jsRuntime, configuration, Constants.NeutralStrokeRest); - NeutralStrokeHover = new(jsRuntime, configuration, Constants.NeutralStrokeHover); - NeutralStrokeActive = new(jsRuntime, configuration, Constants.NeutralStrokeActive); - NeutralStrokeFocus = new(jsRuntime, configuration, Constants.NeutralStrokeFocus); - NeutralStrokeDividerRest = new(jsRuntime, configuration, Constants.NeutralStrokeDividerRest); - } -} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs deleted file mode 100644 index 25da12d5e0..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignUnit.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The DesignUnit design token -/// -public sealed class DesignUnit : DesignToken -{ - public DesignUnit() - { - Name = Constants.DesignUnit; - } - - /// - /// Constructs an instance of the DesignUnit design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public DesignUnit(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.DesignUnit; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs deleted file mode 100644 index d8f93ff94b..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/Direction.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The Direction design token -/// -public sealed class Direction : DesignToken -{ - public Direction() - { - Name = Constants.Direction; - } - - /// - /// Constructs an instance of the Direction design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public Direction(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.Direction; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs deleted file mode 100644 index bb930f33eb..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DisabledOpacity.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The DisabledOpacity design token -/// -public sealed class DisabledOpacity : DesignToken -{ - public DisabledOpacity() - { - Name = Constants.DisabledOpacity; - } - - /// - /// Constructs an instance of a DisabledOpacity design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public DisabledOpacity(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.DisabledOpacity; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs deleted file mode 100644 index 3a94db1d62..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FillColor.cs +++ /dev/null @@ -1,28 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The FillColor design token -/// -public sealed class FillColor : DesignToken -{ - /// - /// Constructs an instance of the FillColor design token - /// - public FillColor() - { - Name = Constants.FillColor; - } - - /// - /// Constructs an instance of the FillColor design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public FillColor(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.FillColor; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs deleted file mode 100644 index 91e0eb5593..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/FocusStrokeWidth.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The FocusStrokeWidth design token -/// -public sealed class FocusStrokeWidth : DesignToken -{ - public FocusStrokeWidth() - { - Name = Constants.FocusStrokeWidth; - } - - /// - /// Constructs an instance of the FocusStrokeWidth design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public FocusStrokeWidth(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.FocusStrokeWidth; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs deleted file mode 100644 index 97d48c3d03..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/LayerCornerRadius.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The LayerCornerRadius design token -/// -public sealed class LayerCornerRadius : DesignToken -{ - public LayerCornerRadius() - { - Name = Constants.LayerCornerRadius; - } - - /// - /// Constructs an instance of the LayerCornerRadius design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public LayerCornerRadius(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.LayerCornerRadius; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs deleted file mode 100644 index 2e0ba4af45..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillActive design token -/// -public sealed class NeutralFillActive : DesignToken -{ - public NeutralFillActive() - { - Name = Constants.NeutralFillActive; - } - - /// - /// Constructs an instance of the NeutralFillActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs deleted file mode 100644 index 36909abca5..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillFocus.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillFocus design token -/// -public sealed class NeutralFillFocus : DesignToken -{ - public NeutralFillFocus() - { - Name = Constants.NeutralFillFocus; - } - - /// - /// Constructs an instance of the NeutralFillFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs deleted file mode 100644 index 2290e48420..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillHover design token -/// -public sealed class NeutralFillHover : DesignToken -{ - public NeutralFillHover() - { - Name = Constants.NeutralFillHover; - } - - /// - /// Constructs an instance of the NeutralFillHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs deleted file mode 100644 index 2cd4f7b753..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputActive design token -/// -public sealed class NeutralFillInputActive : DesignToken -{ - public NeutralFillInputActive() - { - Name = Constants.NeutralFillInputActive; - } - - /// - /// Constructs an instance of the NeutralFillInputActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs deleted file mode 100644 index 05428f5070..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputFocus.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputFocus design token -/// -public sealed class NeutralFillInputFocus : DesignToken -{ - public NeutralFillInputFocus() - { - Name = Constants.NeutralFillInputFocus; - } - - /// - /// Constructs an instance of the NeutralFillInputFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs deleted file mode 100644 index 5362d2d0f2..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputHover design token -/// -public sealed class NeutralFillInputHover : DesignToken -{ - public NeutralFillInputHover() - { - Name = Constants.NeutralFillInputHover; - } - - /// - /// Constructs an instance of the NeutralFillInputHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs deleted file mode 100644 index 7b31517490..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillInputRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillInputRest design token -/// -public sealed class NeutralFillInputRest : DesignToken -{ - public NeutralFillInputRest() - { - Name = Constants.NeutralFillInputRest; - } - - /// - /// Constructs an instance of the NeutralFillInputRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillInputRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillInputRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs deleted file mode 100644 index b649fa5709..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillLayerRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillLayerRest design token -/// -public sealed class NeutralFillLayerRest : DesignToken -{ - public NeutralFillLayerRest() - { - Name = Constants.NeutralFillLayerRest; - } - - /// - /// Constructs an instance of the NeutralFillLayerRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillLayerRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillLayerRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs deleted file mode 100644 index c9ae09c681..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillRest design token -/// -public sealed class NeutralFillRest : DesignToken -{ - public NeutralFillRest() - { - Name = Constants.NeutralFillRest; - } - - /// - /// Constructs an instance of the NeutralFillRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs deleted file mode 100644 index 0ca6074413..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthActive design token -/// -public sealed class NeutralFillStealthActive : DesignToken -{ - public NeutralFillStealthActive() - { - Name = Constants.NeutralFillStealthActive; - } - - /// - /// Constructs an instance of the NeutralFillStealthActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs deleted file mode 100644 index d01b868523..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthFocus.cs +++ /dev/null @@ -1,26 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthFocus design token -/// -public sealed class NeutralFillStealthFocus : DesignToken -{ - public NeutralFillStealthFocus() - { - Name = Constants.NeutralFillStealthFocus; - - } - - /// - /// Constructs an instance of the NeutralFillStealthFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs deleted file mode 100644 index 062950d4bd..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthHover design token -/// -public sealed class NeutralFillStealthHover : DesignToken -{ - public NeutralFillStealthHover() - { - Name = Constants.NeutralFillStealthHover; - } - - /// - /// Constructs an instance of the NeutralFillStealthHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs deleted file mode 100644 index 09bac579ef..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStealthRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStealthRest design token -/// -public sealed class NeutralFillStealthRest : DesignToken -{ - public NeutralFillStealthRest() - { - Name = Constants.NeutralFillStealthRest; - } - - /// - /// Constructs an instance of the NeutralFillStealthRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStealthRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStealthRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs deleted file mode 100644 index 021657c82c..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongActive design token -/// -public sealed class NeutralFillStrongActive : DesignToken -{ - public NeutralFillStrongActive() - { - Name = Constants.NeutralFillStrongActive; - } - - /// - /// Constructs an instance of the NeutralFillStrongActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs deleted file mode 100644 index 75dd857373..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongFocus.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongFocus design token -/// -public sealed class NeutralFillStrongFocus : DesignToken -{ - public NeutralFillStrongFocus() - { - Name = Constants.NeutralFillStrongFocus; - } - - /// - /// Constructs an instance of the NeutralFillStrongFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs deleted file mode 100644 index 4dcbe2a307..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongHover design token -/// -public sealed class NeutralFillStrongHover : DesignToken -{ - public NeutralFillStrongHover() - { - Name = Constants.NeutralFillStrongHover; - } - - /// - /// Constructs an instance of the NeutralFillStrongHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs deleted file mode 100644 index 1e54d830f4..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralFillStrongRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralFillStrongRest design token -/// -public sealed class NeutralFillStrongRest : DesignToken -{ - public NeutralFillStrongRest() - { - Name = Constants.NeutralFillStrongRest; - } - - /// - /// Constructs an instance of the NeutralFillStrongRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralFillStrongRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralFillStrongRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs deleted file mode 100644 index 2c612efd95..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeActive.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralStrokeActive design token -/// -public sealed class NeutralStrokeActive : DesignToken -{ - public NeutralStrokeActive() - { - Name = Constants.NeutralStrokeActive; - } - - /// - /// Constructs an instance of the NeutralStrokeActive design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralStrokeActive(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralStrokeActive; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs deleted file mode 100644 index 36860b9728..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeDividerRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralStrokeDividerRest design token -/// -public sealed class NeutralStrokeDividerRest : DesignToken -{ - public NeutralStrokeDividerRest() - { - Name = Constants.NeutralStrokeDividerRest; - } - - /// - /// Constructs an instance of the NeutralStrokeDividerRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralStrokeDividerRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralStrokeDividerRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs deleted file mode 100644 index d4a719ee52..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeFocus.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralStrokeFocus design token -/// -public sealed class NeutralStrokeFocus : DesignToken -{ - public NeutralStrokeFocus() - { - Name = Constants.NeutralStrokeFocus; - } - - /// - /// Constructs an instance of the NeutralStrokeFocus design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralStrokeFocus(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralStrokeFocus; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs deleted file mode 100644 index 051cabf401..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeHover.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralStrokeHover design token -/// -public sealed class NeutralStrokeHover : DesignToken -{ - public NeutralStrokeHover() - { - Name = Constants.NeutralStrokeHover; - } - - /// - /// Constructs an instance of the NeutralStrokeHover design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralStrokeHover(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralStrokeHover; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs deleted file mode 100644 index 2b0e664dc3..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/NeutralStrokeRest.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The NeutralStrokeRest design token -/// -public sealed class NeutralStrokeRest : DesignToken -{ - public NeutralStrokeRest() - { - Name = Constants.NeutralStrokeRest; - } - - /// - /// Constructs an instance of the NeutralStrokeRest design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public NeutralStrokeRest(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.NeutralStrokeRest; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs deleted file mode 100644 index c0468a93cc..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/StrokeWidth.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The StrokeWidth design token -/// -public sealed class StrokeWidth : DesignToken -{ - public StrokeWidth() - { - Name = Constants.StrokeWidth; - } - - /// - /// Constructs an instance of the StrokeWidth design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public StrokeWidth(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.StrokeWidth; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs deleted file mode 100644 index 0db6a28491..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseFontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampBaseFontSize design token -/// -public sealed class TypeRampBaseFontSize : DesignToken -{ - public TypeRampBaseFontSize() - { - Name = Constants.TypeRampBaseFontSize; - } - - /// - /// Constructs an instance of the TypeRampBaseFontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampBaseFontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampBaseFontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs deleted file mode 100644 index 583e60be5e..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampBaseLineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampBaseLineHeight design token -/// -public sealed class TypeRampBaseLineHeight : DesignToken -{ - public TypeRampBaseLineHeight() - { - Name = Constants.TypeRampBaseLineHeight; - } - - /// - /// Constructs an instance of the TypeRampBaseLineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampBaseLineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampBaseLineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs deleted file mode 100644 index 2f77c352a0..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampMinus1FontSize design token -/// -public sealed class TypeRampMinus1FontSize : DesignToken -{ - public TypeRampMinus1FontSize() - { - Name = Constants.TypeRampMinus1FontSize; - } - - /// - /// Constructs an instance of the TypeRampMinus1FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampMinus1FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampMinus1FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs deleted file mode 100644 index 39a56f383b..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus1LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampMinus1LineHeight design token -/// -public sealed class TypeRampMinus1LineHeight : DesignToken -{ - public TypeRampMinus1LineHeight() - { - Name = Constants.TypeRampMinus1LineHeight; - } - - /// - /// Constructs an instance of the TypeRampMinus1LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampMinus1LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampMinus1LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs deleted file mode 100644 index 2f9b9424d9..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampMinus2FontSize design token -/// -public sealed class TypeRampMinus2FontSize : DesignToken -{ - public TypeRampMinus2FontSize() - { - Name = Constants.TypeRampMinus2FontSize; - } - - /// - /// Constructs an instance of the TypeRampMinus2FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampMinus2FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampMinus2FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs deleted file mode 100644 index dd6078f7b8..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampMinus2LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampMinus2LineHeight design token -/// -public sealed class TypeRampMinus2LineHeight : DesignToken -{ - public TypeRampMinus2LineHeight() - { - Name = Constants.TypeRampMinus2LineHeight; - } - - /// - /// Constructs an instance of the TypeRampMinus2LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampMinus2LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampMinus2LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs deleted file mode 100644 index fa52e31543..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus1FontSize design token -/// -public sealed class TypeRampPlus1FontSize : DesignToken -{ - public TypeRampPlus1FontSize() - { - Name = Constants.TypeRampPlus1FontSize; - } - - /// - /// Constructs an instance of the TypeRampPlus1FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus1FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus1FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs deleted file mode 100644 index 6dc29ba64b..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus1LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus1LineHeight design token -/// -public sealed class TypeRampPlus1LineHeight : DesignToken -{ - public TypeRampPlus1LineHeight() - { - Name = Constants.TypeRampPlus1LineHeight; - } - - /// - /// Constructs an instance of the TypeRampPlus1LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus1LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus1LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs deleted file mode 100644 index 9efda0ff82..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus2FontSize design token -/// -public sealed class TypeRampPlus2FontSize : DesignToken -{ - public TypeRampPlus2FontSize() - { - Name = Constants.TypeRampPlus2FontSize; - } - - /// - /// Constructs an instance of the TypeRampPlus2FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus2FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus2FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs deleted file mode 100644 index 774917e110..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus2LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus2LineHeight design token -/// -public sealed class TypeRampPlus2LineHeight : DesignToken -{ - public TypeRampPlus2LineHeight() - { - Name = Constants.TypeRampPlus2LineHeight; - } - - /// - /// Constructs an instance of the TypeRampPlus2LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus2LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus2LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs deleted file mode 100644 index c777c450d4..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus3FontSize design token -/// -public sealed class TypeRampPlus3FontSize : DesignToken -{ - public TypeRampPlus3FontSize() - { - Name = Constants.TypeRampPlus3FontSize; - } - - /// - /// Constructs an instance of the TypeRampPlus3FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus3FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus3FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs deleted file mode 100644 index 5802b1e7b6..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus3LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus3LineHeight design token -/// -public sealed class TypeRampPlus3LineHeight : DesignToken -{ - public TypeRampPlus3LineHeight() - { - Name = Constants.TypeRampPlus3LineHeight; - } - - /// - /// Constructs an instance of the TypeRampPlus3LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus3LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus3LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs deleted file mode 100644 index 833171fa1e..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus4FontSize design token -/// -public sealed class TypeRampPlus4FontSize : DesignToken -{ - public TypeRampPlus4FontSize() - { - Name = Constants.TypeRampPlus4FontSize; - } - - /// - /// Constructs an instance of the TypeRampPlus4FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus4FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus4FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs deleted file mode 100644 index ec0c0cf745..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus4LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus4LineHeight design token -/// -public sealed class TypeRampPlus4LineHeight : DesignToken -{ - public TypeRampPlus4LineHeight() - { - Name = Constants.TypeRampPlus4LineHeight; - } - - /// - /// Constructs an instance of the TypeRampPlus4LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus4LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus4LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs deleted file mode 100644 index a4aa7edc07..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus5FontSize design token -/// -public sealed class TypeRampPlus5FontSize : DesignToken -{ - public TypeRampPlus5FontSize() - { - Name = Constants.TypeRampPlus5FontSize; - } - - /// - /// Constructs an instance of the TypeRampPlus5FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus5FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus5FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs deleted file mode 100644 index 9423e9892a..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus5LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus5LineHeight design token -/// -public sealed class TypeRampPlus5LineHeight : DesignToken -{ - public TypeRampPlus5LineHeight() - { - Name = Constants.TypeRampPlus5LineHeight; - } - - /// - /// Constructs an instance of the TypeRampPlus5LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus5LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus5LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs deleted file mode 100644 index bc1474a325..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6FontSize.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus6FontSize design token -/// -public sealed class TypeRampPlus6FontSize : DesignToken -{ - public TypeRampPlus6FontSize() - { - Name = Constants.TypeRampPlus6FontSize; - } - - /// - /// Constructs an instance of the TypeRampPlus6FontSize design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus6FontSize(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus6FontSize; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs deleted file mode 100644 index 901a15f4d1..0000000000 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/TypeRampPlus6LineHeight.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.Extensions.Configuration; -using Microsoft.JSInterop; - -namespace Microsoft.Fast.Components.FluentUI.DesignTokens; - -/// -/// The TypeRampPlus6LineHeight design token -/// -public sealed class TypeRampPlus6LineHeight : DesignToken -{ - public TypeRampPlus6LineHeight() - { - Name = Constants.TypeRampPlus6LineHeight; - } - - /// - /// Constructs an instance of the TypeRampPlus6LineHeight design token - /// - /// IJSRuntime reference (from DI) - /// IConfiguration reference (from DI) - public TypeRampPlus6LineHeight(IJSRuntime jsRuntime, IConfiguration configuration) : base(jsRuntime, configuration) - { - Name = Constants.TypeRampPlus6LineHeight; - } -} diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index 3f1352bca2..f8ba4da36c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -41,10 +41,6 @@ True - - - - True diff --git a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs index 80ff23b917..b6660ec3ee 100644 --- a/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs +++ b/src/Microsoft.Fast.Components.FluentUI/ServiceCollectionExtensions.cs @@ -8,66 +8,6 @@ public static class ServiceCollectionExtensions public static void AddFluentUIComponents(this IServiceCollection services) { services.AddScoped(); - - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); - services.AddTransient(); + services.AddDesignTokens(); } } \ No newline at end of file From f9a4763331ada84b0bcba05262bd04392da43535 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 21 Apr 2022 22:38:36 +0200 Subject: [PATCH 28/34] Add missing fdsp attribute --- .../Components/FluentDesignSystemProvider.razor | 1 + .../Components/FluentDesignSystemProvider.razor.cs | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor index dc0ec75544..916bec5617 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor @@ -11,6 +11,7 @@ base-height-multiplier="@BaseHeightMultiplier" base-horizontal-spacing-multiplier="@BaseHorizontalSpacingMultiplier" control-corner-radius="@ControlCornerRadius" + layer-corner-radius="@LayerCornerRadius" stroke-width="@StrokeWidth" focus-stroke-width="@FocusStrokeWidth" disabled-opacity="@DisabledOpacity" diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor.cs index 66ee1d11e2..0c276f8f0b 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor.cs @@ -32,6 +32,8 @@ public partial class FluentDesignSystemProvider : FluentComponentBase [Parameter] public int? ControlCornerRadius { get; set; } + [Parameter] + public int? LayerCornerRadius { get; set; } [Parameter] public int? StrokeWidth { get; set; } From ad197b7dad6b361ed5dfacfbb47402bf7a0eb511 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 22 Apr 2022 00:01:03 +0200 Subject: [PATCH 29/34] Include all design tokens in generation process --- .../DesignTokenConstants.cs | 424 +++++++++++------- .../DesignTokenGenerator.cs | 8 +- 2 files changed, 259 insertions(+), 173 deletions(-) diff --git a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs index 5cc73e13b7..b750e472a8 100644 --- a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs +++ b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs @@ -6,173 +6,259 @@ /// public class DesignTokenConstants { - //General tokens - public const string Direction = "FluentUI.Direction"; - public const string DisabledOpacity = "float?"; - - //Density tokens - public const string BaseHeightMultiplier = "int?"; - public const string BaseHorizontalSpacingMultiplier = "int?"; - public const string Density = "int?"; - public const string DesignUnit = "int?"; - - //Appearance tokens - public const string ControlCornerRadius = "int?"; - public const string LayerCornerRadius = "int?"; - public const string StrokeWidth = "int?"; - public const string FocusStrokeWidth = "int?"; - - //Typography values - public const string BodyFont = "string"; - public const string TypeRampBaseFontSize = "string"; - public const string TypeRampBaseLineHeight = "string"; - public const string TypeRampMinus1FontSize = "string"; - public const string TypeRampMinus1LineHeight = "string"; - public const string TypeRampMinus2FontSize = "string"; - public const string TypeRampMinus2LineHeight = "string"; - public const string TypeRampPlus1FontSize = "string"; - public const string TypeRampPlus1LineHeight = "string"; - public const string TypeRampPlus2FontSize = "string"; - public const string TypeRampPlus2LineHeight = "string"; - public const string TypeRampPlus3FontSize = "string"; - public const string TypeRampPlus3LineHeight = "string"; - public const string TypeRampPlus4FontSize = "string"; - public const string TypeRampPlus4LineHeight = "string"; - public const string TypeRampPlus5FontSize = "string"; - public const string TypeRampPlus5LineHeight = "string"; - public const string TypeRampPlus6FontSize = "string"; - public const string TypeRampPlus6LineHeight = "string"; - - //Color recipe values - public const string BaseLayerLuminance = "float?"; - - //Color recipes - public const string NeutralBaseColor = "string"; - public const string AccentBaseColor = "string"; - public const string FillColor = "string"; - - //Neutral Layers - public const string NeutralLayerCardContainer = "string"; - public const string NeutralLayerFloating = "string"; - public const string NeutralLayer1 = "string"; - public const string NeutralLayer2 = "string"; - public const string NeutralLayer3 = "string"; - public const string NeutralLayer4 = "string"; - - //Accent Fill - public const string AccentFillRest = "string"; - public const string AccentFillHover = "string"; - public const string AccentFillActive = "string"; - public const string AccentFillFocus = "string"; - - //Foreground On Accent - public const string ForegroundOnAccentRest = "string"; - public const string ForegroundOnAccentHover = "string"; - public const string ForegroundOnAccentActive = "string"; - public const string ForegroundOnAccentFocus = "string"; - - //Accent Foreground - public const string AccentForegroundRest = "string"; - public const string AccentForegroundHover = "string"; - public const string AccentForegroundActive = "string"; - public const string AccentForegroundFocus = "string"; - - //Accent Stroke Control - public const string AccentStrokeControlRest = "string"; - public const string AccentStrokeControlHover = "string"; - public const string AccentStrokeControlActive = "string"; - public const string AccentStrokeControlFocus = "string"; - - //Neutral Fill - public const string NeutralFillRest = "string"; - public const string NeutralFillHover = "string"; - public const string NeutralFillActive = "string"; - public const string NeutralFillFocus = "string"; - - //Neutral Fill Input - public const string NeutralFillInputRest = "string"; - public const string NeutralFillInputHover = "string"; - public const string NeutralFillInputActive = "string"; - public const string NeutralFillInputFocus = "string"; - - //Neutral Fill Input Alt - public const string NeutralFillInputAltRest = "string"; - public const string NeutralFillInputAltHover = "string"; - public const string NeutralFillInputAltActive = "string"; - public const string NeutralFillInputAltFocus = "string"; - - //Neutral Fill Layer - public const string NeutralFillLayerRest = "string"; - public const string NeutralFillLayerHover = "string"; - public const string NeutralFillLayerActive = "string"; - - - //Neutral Fill Layer Alt - public const string NeutralFillLayerAltRest = "string"; - - //Neutral Fill Secondary - public const string NeutralFillSecondaryRest = "string"; - public const string NeutralFillSecondaryHover = "string"; - public const string NeutralFillSecondaryActive = "string"; - public const string NeutralFillSecondaryFocus = "string"; - - //Neutral Fill Stealth - public const string NeutralFillStealthRest = "string"; - public const string NeutralFillStealthHover = "string"; - public const string NeutralFillStealthActive = "string"; - public const string NeutralFillStealthFocus = "string"; - - //Neutral Fill Strong - public const string NeutralFillStrongRest = "string"; - public const string NeutralFillStrongHover = "string"; - public const string NeutralFillStrongActive = "string"; - public const string NeutralFillStrongFocus = "string"; - - //Neutral Foreground - public const string NeutralForegroundRest = "string"; - public const string NeutralForegroundHover = "string"; - public const string NeutralForegroundActive = "string"; - public const string NeutralForegroundFocus = "string"; - - //Neutral Foreground Hint - public const string NeutralForegroundHint = "string"; - - //Neutral Stroke - public const string NeutralStrokeRest = "string"; - public const string NeutralStrokeHover = "string"; - public const string NeutralStrokeActive = "string"; - public const string NeutralStrokeFocus = "string"; - - //Neutral Stroke Control - public const string NeutralStrokeControlRest = "string"; - public const string NeutralStrokeControlHover = "string"; - public const string NeutralStrokeControlActive = "string"; - public const string NeutralStrokeControlFocus = "string"; - - //Neutral Stroke Divider - public const string NeutralStrokeDividerRest = "string"; - - //Neutral Stroke Input - public const string NeutralStrokeInputRest = "string"; - public const string NeutralStrokeInputHover = "string"; - public const string NeutralStrokeInputActive = "string"; - public const string NeutralStrokeInputFocus = "string"; - - - //Neutral Stroke Layer - public const string NeutralStrokeLayerRest = "string"; - public const string NeutralStrokeLayerHover = "string"; - public const string NeutralStrokeLayerActive = "string"; - - //Neutral Stroke Strong - public const string NeutralStrokeStrongRest = "string"; - public const string NeutralStrokeStrongHover = "string"; - public const string NeutralStrokeStrongActive = "string"; - public const string NeutralStrokeStrongFocus = "string"; - - //Focus Stroke Outer - public const string FocusStrokeOuter = "string"; - - //Focus Stroke Inner - public const string FocusStrokeInner = "string"; + // General tokens + public const string direction = "FluentUI.Direction"; + public const string disabledOpacity = "float?"; + + // Density tokens + public const string baseHeightMultiplier = "int?"; + public const string baseHorizontalSpacingMultiplier = "int?"; + public const string density = "int?"; + public const string designUnit = "int?"; + + // Appearance tokens + public const string controlCornerRadius = "int?"; + public const string layerCornerRadius = "int?"; + + public const string strokeWidth = "int?"; + public const string focusStrokeWidth = "int?"; + + // Typography values + public const string bodyFont = "string"; + public const string typeRampBaseFontSize = "string"; + public const string typeRampBaseLineHeight = "string"; + public const string typeRampMinus1FontSize = "string"; + public const string typeRampMinus1LineHeight = "string"; + public const string typeRampMinus2FontSize = "string"; + public const string typeRampMinus2LineHeight = "string"; + public const string typeRampPlus1FontSize = "string"; + public const string typeRampPlus1LineHeight = "string"; + public const string typeRampPlus2FontSize = "string"; + public const string typeRampPlus2LineHeight = "string"; + public const string typeRampPlus3FontSize = "string"; + public const string typeRampPlus3LineHeight = "string"; + public const string typeRampPlus4FontSize = "string"; + public const string typeRampPlus4LineHeight = "string"; + public const string typeRampPlus5FontSize = "string"; + public const string typeRampPlus5LineHeight = "string"; + public const string typeRampPlus6FontSize = "string"; + public const string typeRampPlus6LineHeight = "string"; + + // Color recipe values + public const string baseLayerLuminance = "float?"; + + public const string accentFillRestDelta = "int?"; + public const string accentFillHoverDelta = "int?"; + public const string accentFillActiveDelta = "int?"; + public const string accentFillFocusDelta = "int?"; + + public const string accentForegroundRestDelta = "int?"; + public const string accentForegroundHoverDelta = "int?"; + public const string accentForegroundActiveDelta = "int?"; + public const string accentForegroundFocusDelta = "int?"; + + public const string neutralFillRestDelta = "int?"; + public const string neutralFillHoverDelta = "int?"; + public const string neutralFillActiveDelta = "int?"; + public const string neutralFillFocusDelta = "int?"; + + public const string neutralFillInputRestDelta = "int?"; + public const string neutralFillInputHoverDelta = "int?"; + public const string neutralFillInputActiveDelta = "int?"; + public const string neutralFillInputFocusDelta = "int?"; + + public const string neutralFillInputAltRestDelta = "int?"; + public const string neutralFillInputAltHoverDelta = "int?"; + public const string neutralFillInputAltActiveDelta = "int?"; + public const string neutralFillInputAltFocusDelta = "int?"; + + public const string neutralFillLayerRestDelta = "int?"; + public const string neutralFillLayerHoverDelta = "int?"; + public const string neutralFillLayerActiveDelta = "int?"; + + public const string neutralFillLayerAltRestDelta = "int?"; + + public const string neutralFillSecondaryRestDelta = "int?"; + public const string neutralFillSecondaryHoverDelta = "int?"; + public const string neutralFillSecondaryActiveDelta = "int?"; + public const string neutralFillSecondaryFocusDelta = "int?"; + + public const string neutralFillStealthRestDelta = "int?"; + public const string neutralFillStealthHoverDelta = "int?"; + public const string neutralFillStealthActiveDelta = "int?"; + public const string neutralFillStealthFocusDelta = "int?"; + + public const string neutralFillStrongRestDelta = "int?"; + public const string neutralFillStrongHoverDelta = "int?"; + public const string neutralFillStrongActiveDelta = "int?"; + public const string neutralFillStrongFocusDelta = "int?"; + + public const string neutralStrokeRestDelta = "int?"; + public const string neutralStrokeHoverDelta = "int?"; + public const string neutralStrokeActiveDelta = "int?"; + public const string neutralStrokeFocusDelta = "int?"; + + public const string neutralStrokeControlRestDelta = "int?"; + public const string neutralStrokeControlHoverDelta = "int?"; + public const string neutralStrokeControlActiveDelta = "int?"; + public const string neutralStrokeControlFocusDelta = "int?"; + + public const string neutralStrokeDividerRestDelta = "int?"; + + public const string neutralStrokeLayerRestDelta = "int?"; + public const string neutralStrokeLayerHoverDelta = "int?"; + public const string neutralStrokeLayerActiveDelta = "int?"; + + public const string neutralStrokeStrongHoverDelta = "int?"; + public const string neutralStrokeStrongActiveDelta = "int?"; + public const string neutralStrokeStrongFocusDelta = "int?"; + + // Color recipes + public const string neutralBaseColor = "string"; + public const string accentBaseColor = "string"; + + // Neutral Layer Card Container + public const string neutralLayerCardContainer = "string"; + + // Neutral Layer Floating + public const string neutralLayerFloating = "string"; + + // Neutral Layer 1 + public const string neutralLayer1 = "string"; + + // Neutral Layer 2 + public const string neutralLayer2 = "string"; + + // Neutral Layer 3 + public const string neutralLayer3 = "string"; + + // Neutral Layer 4 + public const string neutralLayer4 = "string"; + + public const string fillColor = "string"; + + // Accent Fill + public const string accentFillRest = "string"; + public const string accentFillHover = "string"; + public const string accentFillActive = "string"; + public const string accentFillFocus = "string"; + + // Foreground On Accent + public const string foregroundOnAccentRest = "string"; + public const string foregroundOnAccentHover = "string"; + public const string foregroundOnAccentActive = "string"; + public const string foregroundOnAccentFocus = "string"; + + // Accent Foreground + public const string accentForegroundRest = "string"; + public const string accentForegroundHover = "string"; + public const string accentForegroundActive = "string"; + public const string accentForegroundFocus = "string"; + + // Accent Stroke Control + public const string accentStrokeControlRest = "string"; + public const string accentStrokeControlHover = "string"; + public const string accentStrokeControlActive = "string"; + public const string accentStrokeControlFocus = "string"; + + // Neutral Fill + public const string neutralFillRest = "string"; + public const string neutralFillHover = "string"; + public const string neutralFillActive = "string"; + public const string neutralFillFocus = "string"; + + // Neutral Fill Input + public const string neutralFillInputRest = "string"; + public const string neutralFillInputHover = "string"; + public const string neutralFillInputActive = "string"; + public const string neutralFillInputFocus = "string"; + + // Neutral Fill Input Alt + public const string neutralFillInputAltRest = "string"; + public const string neutralFillInputAltHover = "string"; + public const string neutralFillInputAltActive = "string"; + public const string neutralFillInputAltFocus = "string"; + + // Neutral Fill Layer + public const string neutralFillLayerRest = "string"; + public const string neutralFillLayerHover = "string"; + public const string neutralFillLayerActive = "string"; + + // Neutral Fill Layer Alt + public const string neutralFillLayerAltRest = "string"; + + // Neutral Fill Secondary + public const string neutralFillSecondaryRest = "string"; + public const string neutralFillSecondaryHover = "string"; + public const string neutralFillSecondaryActive = "string"; + public const string neutralFillSecondaryFocus = "string"; + + // Neutral Fill Stealth + public const string neutralFillStealthRest = "string"; + public const string neutralFillStealthHover = "string"; + public const string neutralFillStealthActive = "string"; + public const string neutralFillStealthFocus = "string"; + + // Neutral Fill Strong + public const string neutralFillStrongRest = "string"; + + public const string neutralFillStrongHover = "string"; + + public const string neutralFillStrongActive = "string"; + + public const string neutralFillStrongFocus = "string"; + + + // Neutral Foreground + public const string neutralForegroundRest = "string"; + + public const string neutralForegroundHover = "string"; + + public const string neutralForegroundActive = "string"; + + public const string neutralForegroundFocus = "string"; + + + // Neutral Foreground Hint + public const string neutralForegroundHint = "string"; + + + // Neutral Stroke + public const string neutralStrokeRest = "string"; + public const string neutralStrokeHover = "string"; + public const string neutralStrokeActive = "string"; + public const string neutralStrokeFocus = "string"; + + // Neutral Stroke Control + public const string neutralStrokeControlRest = "string"; + public const string neutralStrokeControlHover = "string"; + public const string neutralStrokeControlActive = "string"; + public const string neutralStrokeControlFocus = "string"; + + + // Neutral Stroke Divider + public const string neutralStrokeDividerRest = "string"; + + // Neutral Stroke Input + public const string neutralStrokeInputRest = "string"; + public const string neutralStrokeInputHover = "string"; + public const string neutralStrokeInputActive = "string"; + public const string neutralStrokeInputFocus = "string"; + + // Neutral Stroke Layer + public const string neutralStrokeLayerRest = "string"; + public const string neutralStrokeLayerHover = "string"; + public const string neutralStrokeLayerActive = "string"; + + // Neutral Stroke Strong + public const string neutralStrokeStrongRest = "string"; + public const string neutralStrokeStrongHover = "string"; + public const string neutralStrokeStrongActive = "string"; + public const string neutralStrokeStrongFocus = "string"; + + // Focus Stroke Outer + public const string focusStrokeOuter = "string"; + + // Focus Stroke Inner + public const string focusStrokeInner = "string"; } diff --git a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs index b062d30937..8ddd355a78 100644 --- a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs +++ b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs @@ -31,8 +31,8 @@ public void Execute(GeneratorExecutionContext context) sb.AppendLine("{"); foreach (FieldInfo info in GetConstants(typeof(DesignTokenConstants))) { - string camelCase = info.Name[0].ToString().ToLowerInvariant() + info.Name.Substring(1); - sb.AppendLine($"\tpublic const string {info.Name} = \"{camelCase}\";"); + string PascalCase = info.Name[0].ToString().ToUpperInvariant() + info.Name.Substring(1); + sb.AppendLine($"\tpublic const string {PascalCase} = \"{info.Name}\";"); } sb.AppendLine("}"); context.AddSource($"Constants.g.cs", SourceText.From(sb.ToString(), Encoding.UTF8)); @@ -44,7 +44,7 @@ public void Execute(GeneratorExecutionContext context) sb.AppendLine("namespace Microsoft.Fast.Components.FluentUI.DesignTokens;"); foreach (FieldInfo info in GetConstants(typeof(DesignTokenConstants))) { - string name = info.Name; + string name = info.Name[0].ToString().ToUpperInvariant() + info.Name.Substring(1); string type = info.GetValue(null).ToString(); sb.AppendLine(""); @@ -85,7 +85,7 @@ public void Execute(GeneratorExecutionContext context) sb.AppendLine("\t{"); foreach (FieldInfo info in GetConstants(typeof(DesignTokenConstants))) { - sb.AppendLine($"\t\tservices.AddTransient<{info.Name}>();"); + sb.AppendLine($"\t\tservices.AddTransient<{info.Name[0].ToString().ToUpperInvariant() + info.Name.Substring(1)}>();"); } sb.AppendLine(" }"); sb.AppendLine("}"); From cbc6242c4ac642bc0af48c12ef428cc4914c8fb8 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 22 Apr 2022 18:30:48 +0200 Subject: [PATCH 30/34] Update README --- README.md | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ce2bed2f80..6010823592 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,6 @@ To add the script from CDN use the following markup: The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: ```html - ``` @@ -118,7 +117,7 @@ The Fluent UI Web Components are built on FAST's Adaptive UI technology, which e > :notebook: **Note** > -> Provider token attributes can be changed on-th-fly like any other Blazor component attribute. +> Provider token attributes can be changed on-the-fly like any other Blazor component attribute. If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides `AccentBaseColor` values you can use: @@ -135,6 +134,84 @@ Product | AccentBaseColor For a list of all available token attributes, [see here](https://github.com/microsoft/fast-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor#L69). More examples for other components can be found in the `examples` folder [of this repository](https://github.com/microsoft/fast-blazor). +As of version 1.4 you can also use all of the (160) individual Design Tokens, both from code as in a declarative way in your `.razor` pages. See https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens for more information on how Design Tokens work + +### Working with Design Tokens from code +Given the following `.razor` page: +```html +@page "/" + +Design Token Test Page + +A button +Another button +And one more +Last button +``` +You can use Design Tokens to manipulate the styles from code as follows: + +```csharp +public partial class Index +{ + [Inject] + private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; + + [Inject] + private BaseHeightMultiplier BaseHeightMultiplier { get; set; } = default!; + + [Inject] + private ControlCornerRadius ControlCornerRadius { get; set; } = default!; + + private FluentAnchor ref1 = default!; + private FluentAnchor ref2 = default!; + private FluentAnchor ref3 = default!; + private FluentButton ref4 = default!; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await BaseLayerLuminance.SetValueFor(ref1.Element, 0); + + //Enabling this line below will generate an error because no default is set + //await BaseHeightMultiplier.SetValueFor(ref2.Element); + + await BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + + await BaseHeightMultiplier.SetValueFor(ref4.Element, 52); + await ControlCornerRadius.SetValueFor(ref4.Element, 15); + + StateHasChanged(); + } + } + + public async Task OnClick() + { + await BaseHeightMultiplier.DeleteValueFor(ref4.Element); + } +} +``` + +### Working with Design Tokens components +All the Design Tokens can also be used as a component in a razor page directely. It looks like this: + +```html + + +
+ Dark + Accent + Stealth + Outline + Lightweight +
+ + +``` + +To make this work, you need to create a link between the Design Token component and its child FluentUI components. You do this with the `BackReference="@context"` construct. The restriction is that you can use only one Design Token this way. If you need to set more tokens, keep usin the `` + + ## Web components / Blazor components mapping, implementation status and remarks Web component | Blazor component | Status | Remarks ----------------- | -------------- | ------ | ------- From 289ded068e9c1c10cf0837fc0a0d4abdc1321116 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 25 Apr 2022 13:22:10 +0200 Subject: [PATCH 31/34] README changes --- README.md | 164 +++++++++++++++++++++++++++++------------------------- 1 file changed, 88 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index 6010823592..6596fc7b34 100644 --- a/README.md +++ b/README.md @@ -92,108 +92,74 @@ Here's a small example of a `FluentCard` with a `FluentButton` that uses the Flu ``` > :bulb: **Tip** > -> You can add `@using Microsoft.Fast.Components.FluentUI` to namespace collection in `_Imports.razor`, so that you can avoid repeating it in every single razor page. +> You can add `@using Microsoft.Fast.Components.FluentUI` to the namespace collection in `_Imports.razor`, so that you can avoid repeating it in every single razor page. ### Configuring the Design System -The Fluent UI Web Components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "design tokens". The easiest way to accomplish this in Blazor is to wrap the entire UI in a `FluentDesignSystemProvider`. This special element has a number of properties you can set to configure the tokens to your desired settings. Here's an example of changing the "accent base color" and switching the system into dark mode (in the file `app.razor`): +The Fluent UI Web Components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "Design Tokens". As of version 1.4 you can use all of the (160) individual Design Tokens, both from code as in a declarative way in your `.razor` pages. See https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens for more information on how Design Tokens work -```html - - - - - - - Not found - -

Sorry, there's nothing at this address.

- - - - -``` +#### Option 1: Using Design Tokens from C# code -> :notebook: **Note** -> -> Provider token attributes can be changed on-the-fly like any other Blazor component attribute. - -If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides `AccentBaseColor` values you can use: - -Product | AccentBaseColor -------- | --------------- -| Office | #D83B01 | -| Word | #185ABD | -| Excel | #107C41 | -| PowerPoint | #C43E1C | -| Teams | #6264A7 | -| OneNote | #7719AA | -| SharePoint | #03787C | -| Stream | #BC1948 | - -For a list of all available token attributes, [see here](https://github.com/microsoft/fast-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor#L69). More examples for other components can be found in the `examples` folder [of this repository](https://github.com/microsoft/fast-blazor). - -As of version 1.4 you can also use all of the (160) individual Design Tokens, both from code as in a declarative way in your `.razor` pages. See https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens for more information on how Design Tokens work - -### Working with Design Tokens from code -Given the following `.razor` page: +Given the following `.razor` page fragment: ```html -@page "/" - -Design Token Test Page - A button Another button And one more Last button + ``` -You can use Design Tokens to manipulate the styles from code as follows: +You can use Design Tokens to manipulate the styles from C# code as follows: ```csharp -public partial class Index -{ - [Inject] - private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; +[Inject] +private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; - [Inject] - private BaseHeightMultiplier BaseHeightMultiplier { get; set; } = default!; +[Inject] +private BaseHeightMultiplier BaseHeightMultiplier { get; set; } = default!; - [Inject] - private ControlCornerRadius ControlCornerRadius { get; set; } = default!; +[Inject] +private ControlCornerRadius ControlCornerRadius { get; set; } = default!; - private FluentAnchor ref1 = default!; - private FluentAnchor ref2 = default!; - private FluentAnchor ref3 = default!; - private FluentButton ref4 = default!; +private FluentAnchor ref1 = default!; +private FluentAnchor ref2 = default!; +private FluentAnchor ref3 = default!; +private FluentButton ref4 = default!; - protected override async Task OnAfterRenderAsync(bool firstRender) +protected override async Task OnAfterRenderAsync(bool firstRender) +{ + if (firstRender) { - if (firstRender) - { - await BaseLayerLuminance.SetValueFor(ref1.Element, 0); + //Set to dark mode + await BaseLayerLuminance.SetValueFor(ref1.Element, 0); - //Enabling this line below will generate an error because no default is set - //await BaseHeightMultiplier.SetValueFor(ref2.Element); - - await BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + //Enabling this line below will generate an error because no default is set + //await BaseHeightMultiplier.SetValueFor(ref2.Element); + + //Enlarge the anchor + await BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); - await BaseHeightMultiplier.SetValueFor(ref4.Element, 52); - await ControlCornerRadius.SetValueFor(ref4.Element, 15); + //Enlarge the button and make corners more rounded + await BaseHeightMultiplier.SetValueFor(ref4.Element, 52); + await ControlCornerRadius.SetValueFor(ref4.Element, 15); - StateHasChanged(); - } + StateHasChanged(); } +} - public async Task OnClick() - { - await BaseHeightMultiplier.DeleteValueFor(ref4.Element); - } +public async Task OnClick() +{ + await BaseHeightMultiplier.DeleteValueFor(ref4.Element); } ``` +As can be seen in the code above (with the `ref4.Element`), it is posible to apply multiple tokens to the same component. -### Working with Design Tokens components -All the Design Tokens can also be used as a component in a razor page directely. It looks like this: +> :notebook: **Note** +> +> The Design Tokens are manipulated through JavaScript interop working with an `ElementReference`. There is no JavaScript element until after the component is rendered. This means you can only work with the Design Tokens from code after the component has been rendered in `OnAfterRenderAsync` and not in any earlier lifecycle methods. + +#### Option 2: Using Design Tokens as components +The Design Tokens can also be used as components in a `.razor` page directely. It looks like this: ```html @@ -209,7 +175,53 @@ All the Design Tokens can also be used as a component in a razor page directely. ``` -To make this work, you need to create a link between the Design Token component and its child FluentUI components. You do this with the `BackReference="@context"` construct. The restriction is that you can use only one Design Token this way. If you need to set more tokens, keep usin the `` +To make this work, a link needs to be created between the Design Token component and its child components. This is done with the `BackReference="@context"` construct. + +> :notebook: **Note** +> +> Only one Design Token component at a time can be used this way. If you need to set more tokens, use the code approach as described in Option 1 above. + + +#### (legacy) Option 3: Using the `` +The third way to customize the design in Blazor is to wrap the entire block you want to manipulate in a ``. This special element has a number of properties you can set to configure a subset of the tokens. **Not all tokens are available/supported** and we recommend this to only be used as a fall-back mechanism. The preferred mehod of working with the desgn tokens is to manipulate them from code as described in option 1. + +Here's an example of changing the "accent base color" and switching the system into dark mode (in the file `app.razor`): + +```html + + + + + + + Not found + +

Sorry, there's nothing at this address.

+ + + + +``` + +> :notebook: **Note** +> +> FluentDesignSystemProvider token attributes can be changed on-the-fly like any other Blazor component attribute. + +#### Colors for integration with specific Microsoft products +If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides `AccentBaseColor` values you can use: + +Product | AccentBaseColor +------- | --------------- +| Office | #D83B01 | +| Word | #185ABD | +| Excel | #107C41 | +| PowerPoint | #C43E1C | +| Teams | #6264A7 | +| OneNote | #7719AA | +| SharePoint | #03787C | +| Stream | #BC1948 | + +For a list of all available token attributes, [see here](https://github.com/microsoft/fast-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor#L69). More examples for other components can be found in the `examples` folder [of this repository](https://github.com/microsoft/fast-blazor). ## Web components / Blazor components mapping, implementation status and remarks From ede9de8deb56c5a417cd86ffafc4e9ef78075c66 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 25 Apr 2022 21:16:17 +0200 Subject: [PATCH 32/34] Changes based on PR comments --- README.md | 60 ++++++++++--------- .../FluentUI.Demo.Shared/Pages/Index.razor | 4 -- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 32 ++++------ .../Pages/ToolbarPage.razor | 4 +- .../DesignTokenConstants.cs | 4 +- .../DesignTokens/DesignToken.razor.cs | 23 ++++--- .../DesignTokens/IDesignToken.cs | 5 +- .../Microsoft.Fast.Components.FluentUI.csproj | 2 +- 8 files changed, 63 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 6596fc7b34..5d7a01a8a5 100644 --- a/README.md +++ b/README.md @@ -113,44 +113,46 @@ You can use Design Tokens to manipulate the styles from C# code as follows: ```csharp [Inject] -private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; + private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; -[Inject] -private BaseHeightMultiplier BaseHeightMultiplier { get; set; } = default!; + [Inject] + private BodyFont BodyFont { get; set; } = default!; -[Inject] -private ControlCornerRadius ControlCornerRadius { get; set; } = default!; + [Inject] + private StrokeWidth StrokeWidth { get; set; } = default!; + + [Inject] + private ControlCornerRadius ControlCornerRadius { get; set; } = default!; -private FluentAnchor ref1 = default!; -private FluentAnchor ref2 = default!; -private FluentAnchor ref3 = default!; -private FluentButton ref4 = default!; + private FluentAnchor ref1 = default!; + private FluentAnchor ref2 = default!; + private FluentAnchor ref3 = default!; + private FluentButton ref4 = default!; -protected override async Task OnAfterRenderAsync(bool firstRender) -{ - if (firstRender) + protected override async Task OnAfterRenderAsync(bool firstRender) { - //Set to dark mode - await BaseLayerLuminance.SetValueFor(ref1.Element, 0); + if (firstRender) + { + //Set to dark mode + await BaseLayerLuminance.SetValueFor(ref1.Element, (float)0.15); + + await BodyFont.SetValueFor(ref3.Element, "Comic Sans MS"); - //Enabling this line below will generate an error because no default is set - //await BaseHeightMultiplier.SetValueFor(ref2.Element); - - //Enlarge the anchor - await BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + //Set 'border' width for ref4 + await StrokeWidth.SetValueFor(ref4.Element, 7); + //And change conrner radius as well + await ControlCornerRadius.SetValueFor(ref4.Element, 15); - //Enlarge the button and make corners more rounded - await BaseHeightMultiplier.SetValueFor(ref4.Element, 52); - await ControlCornerRadius.SetValueFor(ref4.Element, 15); + StateHasChanged(); + } - StateHasChanged(); } -} -public async Task OnClick() -{ - await BaseHeightMultiplier.DeleteValueFor(ref4.Element); -} + public async Task OnClick() + { + //Remove the accent color + await StrokeWidth.DeleteValueFor(ref4.Element); + } ``` As can be seen in the code above (with the `ref4.Element`), it is posible to apply multiple tokens to the same component. @@ -182,7 +184,7 @@ To make this work, a link needs to be created between the Design Token component > Only one Design Token component at a time can be used this way. If you need to set more tokens, use the code approach as described in Option 1 above. -#### (legacy) Option 3: Using the `` +#### Option 3: Using the `` The third way to customize the design in Blazor is to wrap the entire block you want to manipulate in a ``. This special element has a number of properties you can set to configure a subset of the tokens. **Not all tokens are available/supported** and we recommend this to only be used as a fall-back mechanism. The preferred mehod of working with the desgn tokens is to manipulate them from code as described in option 1. Here's an example of changing the "accent base color" and switching the system into dark mode (in the file `app.razor`): diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index.razor index 4de19ab5d8..6d097ee5d1 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor @@ -9,7 +9,3 @@ Blazor component bindings FluentButton -

-The value before calling Delete: @theValueBeforeDelete -The value after calling Delete: @theValueAfterDelete -

\ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs index 96c8250513..fd2f1a8763 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs +++ b/examples/FluentUI.Demo.Shared/Pages/Index.razor.cs @@ -10,7 +10,10 @@ public partial class Index private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; [Inject] - private BaseHeightMultiplier BaseHeightMultiplier { get; set; } = default!; + private BodyFont BodyFont { get; set; } = default!; + + [Inject] + private StrokeWidth StrokeWidth { get; set; } = default!; [Inject] private ControlCornerRadius ControlCornerRadius { get; set; } = default!; @@ -20,30 +23,20 @@ public partial class Index private FluentAnchor ref3 = default!; private FluentButton ref4 = default!; - private int? theValueBeforeDelete; - private int? theValueAfterDelete; - protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { - await BaseLayerLuminance.SetValueFor(ref1.Element, 0); - - //Enabling this line below will generate an error because no default is set - //await DesignTokens.BaseHeightMultiplier.SetValueFor(ref2.Element); - - //await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); - await BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element); + //Set to dark mode + await BaseLayerLuminance.SetValueFor(ref1.Element, (float)0.15); + await BodyFont.SetValueFor(ref3.Element, "Comic Sans MS"); - - theValueBeforeDelete = await BaseHeightMultiplier.GetValueFor(ref4.Element); - - await BaseHeightMultiplier.SetValueFor(ref4.Element, 52); - + //Set 'border' width for ref4 + await StrokeWidth.SetValueFor(ref4.Element, 7); + //And change conrner radius as well await ControlCornerRadius.SetValueFor(ref4.Element, 15); - StateHasChanged(); } @@ -51,8 +44,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) public async Task OnClick() { - await BaseHeightMultiplier.DeleteValueFor(ref4.Element); - - theValueAfterDelete = await BaseHeightMultiplier.GetValueFor(ref4.Element); + //Remove the accent color + await StrokeWidth.DeleteValueFor(ref4.Element); } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor b/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor index 74e165944c..6cfa7c2f22 100644 --- a/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor +++ b/examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor @@ -185,8 +185,8 @@ { await FillColor.SetValueFor(Toolbar1!.Element, "#333"); await FillColor.SetValueFor(Toolbar2!.Element, "#333"); - await BaseLayerLuminance.SetValueFor(Toolbar1!.Element, 0); - await BaseLayerLuminance.SetValueFor(Toolbar2!.Element, 0); + await BaseLayerLuminance.SetValueFor(Toolbar1!.Element, (float)0.15); + await BaseLayerLuminance.SetValueFor(Toolbar2!.Element, (float)0.15); StateHasChanged(); } diff --git a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs index b750e472a8..4a26cbbeb3 100644 --- a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs +++ b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs @@ -20,8 +20,8 @@ public class DesignTokenConstants public const string controlCornerRadius = "int?"; public const string layerCornerRadius = "int?"; - public const string strokeWidth = "int?"; - public const string focusStrokeWidth = "int?"; + public const string strokeWidth = "float?"; + public const string focusStrokeWidth = "float?"; // Typography values public const string bodyFont = "string"; diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs index 2246bd703b..b519d49405 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs @@ -83,18 +83,17 @@ public DesignToken WithDefault(T value) return this; } - /// - /// Sets the value of the for the associated to the default value - /// - /// the associated - /// - public async ValueTask SetValueFor(ElementReference element) - { - if (_defaultValue == null) - throw new Exception("WithDefault should be called before calling SetValueFor"); - - await SetValueFor(element, _defaultValue); - } + //ToDo Create method + ///// + ///// Create a new token + ///// + ///// /// The name of the Design Token + //public async ValueTask> Create(string name) + //{ + // IJSObjectReference module = await moduleTask!.Value; + // await module.InvokeAsync>("DesignToken.create", name); + // return this; + //} /// /// Sets the value of the for the associated to the supplied value diff --git a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs index 36ac46c1b3..972720ff55 100644 --- a/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs +++ b/src/Microsoft.Fast.Components.FluentUI/DesignTokens/IDesignToken.cs @@ -8,7 +8,10 @@ public interface IDesignToken ValueTask DeleteValueFor(ElementReference element); ValueTask GetValueFor(ElementReference element); - ValueTask SetValueFor(ElementReference element); + ValueTask SetValueFor(ElementReference element, T value); DesignToken WithDefault(T value); + + //ToDo + //ValueTask> Create(string name); } \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index f8ba4da36c..4c107c9d8a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -24,7 +24,7 @@ https://github.com/microsoft/fast-blazor git README.md - false + true $(BaseIntermediateOutputPath)Generated From 4c67832f2490f51ddb52608f84bd7a2c58173e41 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Mon, 25 Apr 2022 21:22:01 +0200 Subject: [PATCH 33/34] More PR comments changes --- .../DesignTokenConstants.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs index 4a26cbbeb3..fa95fc5b66 100644 --- a/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs +++ b/src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs @@ -11,8 +11,8 @@ public class DesignTokenConstants public const string disabledOpacity = "float?"; // Density tokens - public const string baseHeightMultiplier = "int?"; - public const string baseHorizontalSpacingMultiplier = "int?"; + public const string baseHeightMultiplier = "float?"; + public const string baseHorizontalSpacingMultiplier = "float?"; public const string density = "int?"; public const string designUnit = "int?"; From 05d190b56544cbfb7ee877f2a4cb278499f65b7d Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 26 Apr 2022 16:38:20 +0200 Subject: [PATCH 34/34] Make color-handling Design Tokens work. Update README --- README.md | 133 ++++++++------- .../wwwroot/appsettings.json | 2 +- .../FluentUI.Demo.Shared/Pages/CardPage.razor | 3 +- .../FluentUI.Demo.Shared/Pages/Index.razor | 2 +- .../FluentUI.Demo.Shared/Pages/Index.razor.cs | 23 ++- .../Pages/ToolbarPage.razor | 5 +- .../DesignTokenConstants.cs | 160 +++++++++--------- .../DesignTokenGenerator.cs | 1 + .../ColorHelpers.cs | 12 ++ .../Microsoft.Fast.Components.FluentUI.csproj | 3 +- 10 files changed, 187 insertions(+), 157 deletions(-) create mode 100644 src/Microsoft.Fast.Components.FluentUI/ColorHelpers.cs diff --git a/README.md b/README.md index 5d7a01a8a5..40b1e9db31 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ Copy this to your `wwwroot/script` folder and reference it with a script tag as > :notebook: **Note** > -> If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the `@` character by repeating it in the source link. For more information check out the [Razor Pages syntax documentation](/aspnet/core/mvc/views/razor). +> If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the `@` character by repeating it in the source link. For more information check out the [Razor Pages syntax documentation](https://docs.microsoft.com/aspnet/core/mvc/views/razor). In your Program.cs file you need to add the following: ```csharp @@ -113,48 +113,57 @@ You can use Design Tokens to manipulate the styles from C# code as follows: ```csharp [Inject] - private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; - - [Inject] - private BodyFont BodyFont { get; set; } = default!; - - [Inject] - private StrokeWidth StrokeWidth { get; set; } = default!; - - [Inject] - private ControlCornerRadius ControlCornerRadius { get; set; } = default!; - - private FluentAnchor ref1 = default!; - private FluentAnchor ref2 = default!; - private FluentAnchor ref3 = default!; - private FluentButton ref4 = default!; - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //Set to dark mode - await BaseLayerLuminance.SetValueFor(ref1.Element, (float)0.15); - - await BodyFont.SetValueFor(ref3.Element, "Comic Sans MS"); - - //Set 'border' width for ref4 - await StrokeWidth.SetValueFor(ref4.Element, 7); - //And change conrner radius as well - await ControlCornerRadius.SetValueFor(ref4.Element, 15); - - StateHasChanged(); - } - - } - - public async Task OnClick() - { - //Remove the accent color - await StrokeWidth.DeleteValueFor(ref4.Element); - } +private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!; + +[Inject] +private AccentBaseColor AccentBaseColor { get; set; } = default!; + +[Inject] +private BodyFont BodyFont { get; set; } = default!; + +[Inject] +private StrokeWidth StrokeWidth { get; set; } = default!; + +[Inject] +private ControlCornerRadius ControlCornerRadius { get; set; } = default!; + +private FluentAnchor? ref1; +private FluentButton? ref2; +private FluentAnchor? ref3; +private FluentButton? ref4; + +protected override async Task OnAfterRenderAsync(bool firstRender) +{ + if (firstRender) + { + //Set to dark mode + await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15); + + //Set to Excel color + await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToColor()); + + //Set the font + await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS"); + + //Set 'border' width for ref4 + await StrokeWidth.SetValueFor(ref4!.Element, 7); + //And change conrner radius as well + await ControlCornerRadius.SetValueFor(ref4!.Element, 15); + + StateHasChanged(); + } + +} + +public async Task OnClick() +{ + //Remove the wide border + await StrokeWidth.DeleteValueFor(ref4!.Element); +} ``` -As can be seen in the code above (with the `ref4.Element`), it is posible to apply multiple tokens to the same component. +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. > :notebook: **Note** > @@ -165,15 +174,15 @@ The Design Tokens can also be used as components in a `.razor` page directely. I ```html - -
- Dark - Accent - Stealth - Outline - Lightweight -
- + +
+ Dark + Accent + Stealth + Outline + Lightweight +
+ ``` @@ -191,17 +200,17 @@ Here's an example of changing the "accent base color" and switching the system i ```html - - - - - - Not found - -

Sorry, there's nothing at this address.

- - - + + + + + + Not found + +

Sorry, there's nothing at this address.

+ + + ``` diff --git a/examples/FluentUI.Demo.Client/wwwroot/appsettings.json b/examples/FluentUI.Demo.Client/wwwroot/appsettings.json index b70017b1eb..113955188b 100644 --- a/examples/FluentUI.Demo.Client/wwwroot/appsettings.json +++ b/examples/FluentUI.Demo.Client/wwwroot/appsettings.json @@ -1,3 +1,3 @@ { - "_FluentWebComponentsScriptSource": "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js" + "_FluentWebComponentsScriptSource": "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.js" } diff --git a/examples/FluentUI.Demo.Shared/Pages/CardPage.razor b/examples/FluentUI.Demo.Shared/Pages/CardPage.razor index a4d477ed4e..61ab327420 100644 --- a/examples/FluentUI.Demo.Shared/Pages/CardPage.razor +++ b/examples/FluentUI.Demo.Shared/Pages/CardPage.razor @@ -1,4 +1,5 @@ @page "/CardPage" +@using System.Drawing