diff --git a/AppBar/src/AppBar.csproj b/AppBar/src/AppBar.csproj index fd61bd2..e516356 100644 --- a/AppBar/src/AppBar.csproj +++ b/AppBar/src/AppBar.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.AppBar Skclusive.Material.AppBar Skclusive.Material.AppBar @@ -17,8 +16,7 @@ - - + diff --git a/AppBar/src/AppBar/AppBar.razor b/AppBar/src/AppBar/AppBar.razor index d124ee9..998385e 100644 --- a/AppBar/src/AppBar/AppBar.razor +++ b/AppBar/src/AppBar/AppBar.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.AppBar -@inherits AppBarComponent +@inherits MaterialComponent - - .AppBar-Root { - width: 100%; - display: flex; - z-index: var(--theme-zindex-appbar, 1100); - box-sizing: border-box; - flex-shrink: 0; - flex-direction: column; - } - - .AppBar-Position-Fixed { - top: 0; - left: auto; - right: 0; - position: fixed; - } - - .AppBar-Position-Absolute { - top: 0; - left: auto; - right: 0; - position: absolute; - } - - .AppBar-Position-Sticky { - top: 0; - left: auto; - right: 0; - position: sticky; - } - - .AppBar-Position-Static { - position: static; - transform: translateZ(0); - } - - .AppBar-Position-Relative { - position: relative; - } - - .AppBar-Color-Default { - color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87)); - background-color: var(--theme-palette-grey-background-default, #f5f5f5); - } - - .AppBar-Color-Primary { - color: var(--theme-palette-primary-contrast-text, #fff); - background-color: var(--theme-palette-primary-main, #1976d2); - } - - .AppBar-Color-Secondary { - color: var(--theme-palette-secondary-contrast-text, #fff); - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - - .AppBar-Color-Custom { - color: var(--theme-custom-palette-primary-contrast-text, #fff); - background-color: var(--theme-custom-palette-primary-main, #1976d2); - } - - \ No newline at end of file +.AppBar-Root { + width: 100%; + display: flex; + z-index: var(--theme-zindex-appbar); + box-sizing: border-box; + flex-shrink: 0; + flex-direction: column; +} + +.AppBar-Position-Fixed { + top: 0; + left: auto; + right: 0; + position: fixed; +} + +.AppBar-Position-Absolute { + top: 0; + left: auto; + right: 0; + position: absolute; +} + +.AppBar-Position-Sticky { + top: 0; + left: auto; + right: 0; + position: sticky; +} + +.AppBar-Position-Static { + position: static; + transform: translateZ(0); +} + +.AppBar-Position-Relative { + position: relative; +} + +.AppBar-Color-Default { + color: var(--theme-palette-grey-contrast-text-default); + background-color: var(--theme-palette-grey-background-default); +} + +.AppBar-Color-Primary { + color: var(--theme-palette-primary-contrast-text); + background-color: var(--theme-palette-primary-main); +} + +.AppBar-Color-Secondary { + color: var(--theme-palette-secondary-contrast-text); + background-color: var(--theme-palette-secondary-main); +} + +.AppBar-Color-Custom { + color: var(--theme-custom-palette-primary-contrast-text); + background-color: var(--theme-custom-palette-primary-main); +} \ No newline at end of file diff --git a/AppBar/src/Extension/AppBarExtension.cs b/AppBar/src/Extension/AppBarExtension.cs new file mode 100644 index 0000000..122f83f --- /dev/null +++ b/AppBar/src/Extension/AppBarExtension.cs @@ -0,0 +1,18 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Paper; + +namespace Skclusive.Material.AppBar +{ + public static class AppBarExtension + { + public static void TryAddAppBarServices(this IServiceCollection services, IMaterialConfig config) + { + // Theme service would be added by Paper + services.TryAddPaperServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/AppBar/src/Provider/AppBarStyleProvider.cs b/AppBar/src/Provider/AppBarStyleProvider.cs new file mode 100644 index 0000000..1db2915 --- /dev/null +++ b/AppBar/src/Provider/AppBarStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.AppBar +{ + public class AppBarStyleProvider : StyleTypeProvider + { + public AppBarStyleProvider() : base(typeof(AppBarStyle)) + { + } + } +} \ No newline at end of file diff --git a/Avatar/src/Avatar.csproj b/Avatar/src/Avatar.csproj index 0bd8ca4..7696e7a 100644 --- a/Avatar/src/Avatar.csproj +++ b/Avatar/src/Avatar.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Avatar Skclusive.Material.Avatar Skclusive.Material.Avatar @@ -17,7 +16,7 @@ - + diff --git a/Avatar/src/Avatar/Avatar.razor b/Avatar/src/Avatar/Avatar.razor index 58fec6e..dee29d5 100644 --- a/Avatar/src/Avatar/Avatar.razor +++ b/Avatar/src/Avatar/Avatar.razor @@ -1,11 +1,14 @@ @namespace Skclusive.Material.Avatar -@inherits AvatarComponent +@inherits MaterialComponent @if (IsImage) { diff --git a/Avatar/src/Avatar/Avatar.cs b/Avatar/src/Avatar/Avatar.razor.cs similarity index 91% rename from Avatar/src/Avatar/Avatar.cs rename to Avatar/src/Avatar/Avatar.razor.cs index f9cbbfd..ad48afe 100644 --- a/Avatar/src/Avatar/Avatar.cs +++ b/Avatar/src/Avatar/Avatar.razor.cs @@ -7,9 +7,9 @@ namespace Skclusive.Material.Avatar { - public class AvatarComponent : MaterialComponent + public partial class Avatar : MaterialComponent { - public AvatarComponent() : base("Avatar") + public Avatar() : base("Avatar") { } @@ -98,5 +98,10 @@ protected virtual IEnumerable ImageClasses yield return "Image"; } } + + [CascadingParameter] + public IAvatarContext AvatarContext { set; get; } + + protected override IComponentContext _Context => AvatarContext; } } diff --git a/Avatar/src/Avatar/AvatarStyle.razor b/Avatar/src/Avatar/AvatarStyle.razor index e903b5e..3947757 100644 --- a/Avatar/src/Avatar/AvatarStyle.razor +++ b/Avatar/src/Avatar/AvatarStyle.razor @@ -1,35 +1,30 @@ @namespace Skclusive.Material.Avatar @inherits StyleComponentBase - +.Avatar-Root { + font-family: var(--theme-typography-font-family); + font-size: var(--theme-typography-font-size-medium); + width: 40px; + height: 40px; + display: flex; + position: relative; + overflow: hidden; + flex-shrink: 0; + align-items: center; + user-select: none; + border-radius: 50%; + line-height: 1; + justify-content: center; +} - .Avatar-Root { - font-family: var(--theme-typography-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-size: var(--theme-typography-font-size-medium, 1.25rem); - width: 40px; - height: 40px; - display: flex; - position: relative; - overflow: hidden; - flex-shrink: 0; - align-items: center; - user-select: none; - border-radius: 50%; - line-height: 1; - justify-content: center; - } +.Avatar-Color-Default { + color: var(--theme-palette-background-default); + background-color: var(--theme-component-avatar-background); +} - .Avatar-Color-Default { - color: var(--theme-palette-background-default, #fff); - background-color: var(--theme-palette-grey, #bdbdbd); - } - - .Avatar-Image { - width: 100%; - height: 100%; - text-align: center; - object-fit: cover; - } - - \ No newline at end of file +.Avatar-Image { + width: 100%; + height: 100%; + text-align: center; + object-fit: cover; +} \ No newline at end of file diff --git a/Avatar/src/Avatar/IAvatarContext.cs b/Avatar/src/Avatar/IAvatarContext.cs new file mode 100644 index 0000000..f871d3c --- /dev/null +++ b/Avatar/src/Avatar/IAvatarContext.cs @@ -0,0 +1,24 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Avatar +{ + public interface IAvatarContext : IComponentContext + { + } + + public class AvatarContextBuilder : ComponentContextBuilder + { + protected class AvatarContext : ComponentContext, IAvatarContext + { + } + + public AvatarContextBuilder() : base(new AvatarContext()) + { + } + + protected override AvatarContextBuilder This() + { + return this; + } + } +} \ No newline at end of file diff --git a/Avatar/src/Extension/AvatarExtension.cs b/Avatar/src/Extension/AvatarExtension.cs new file mode 100644 index 0000000..ca77200 --- /dev/null +++ b/Avatar/src/Extension/AvatarExtension.cs @@ -0,0 +1,19 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Avatar +{ + public static class AvatarExtension + { + public static void TryAddAvatarServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddStyleTypeProvider(); + + services.TryAddStyleProducer(); + } + } +} diff --git a/Avatar/src/Producer/AvatarStyleProducer.cs b/Avatar/src/Producer/AvatarStyleProducer.cs new file mode 100644 index 0000000..7054927 --- /dev/null +++ b/Avatar/src/Producer/AvatarStyleProducer.cs @@ -0,0 +1,22 @@ +using System.Collections.Generic; +using System.Globalization; +using Skclusive.Core.Component; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Avatar +{ + public class AvatarStyleProducer : IStyleProducer + { + public IDictionary Variables(ThemeValue theme) + { + var isDark = theme.IsDark(); + + var palette = theme.Palette; + + return new Dictionary + { + { "--theme-component-avatar-background", (isDark ? palette.Grey.X600 : palette.Grey.X400).ToString(CultureInfo.InvariantCulture) } + }; + } + } +} \ No newline at end of file diff --git a/Avatar/src/Provider/AvatarStyleProvider.cs b/Avatar/src/Provider/AvatarStyleProvider.cs new file mode 100644 index 0000000..190fc00 --- /dev/null +++ b/Avatar/src/Provider/AvatarStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Avatar +{ + public class AvatarStyleProvider : StyleTypeProvider + { + public AvatarStyleProvider() : base(typeof(AvatarStyle)) + { + } + } +} \ No newline at end of file diff --git a/Badge/src/Badge.csproj b/Badge/src/Badge.csproj index aaee754..7c443b7 100644 --- a/Badge/src/Badge.csproj +++ b/Badge/src/Badge.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Badge Skclusive.Material.Badge Skclusive.Material.Badge @@ -17,7 +16,7 @@ - + diff --git a/Badge/src/Badge/Badge.razor b/Badge/src/Badge/Badge.razor index 51a7fb4..c1ddde4 100644 --- a/Badge/src/Badge/Badge.razor +++ b/Badge/src/Badge/Badge.razor @@ -1,11 +1,14 @@ @namespace Skclusive.Material.Badge -@inherits BadgeComponent +@inherits MaterialComponent @ChildContent [Parameter] - public string Badge { set; get; } + public string BadgeText { set; get; } /// /// If the badge value is component use BadgeContent @@ -95,7 +95,7 @@ public BadgeComponent() : base("Badge") protected int? BadgeNumber { - get => int.TryParse(Badge, out int result) ? (int?)result : null; + get => int.TryParse(BadgeText, out int result) ? (int?)result : null; } protected bool BadgeInvisible @@ -114,7 +114,7 @@ protected bool BadgeInvisible return true; } - if (string.IsNullOrEmpty(Badge) && BadgeContent == null && Variant != BadgeVariant.Dot) + if (string.IsNullOrEmpty(BadgeText) && BadgeContent == null && Variant != BadgeVariant.Dot) { return true; } @@ -139,7 +139,7 @@ protected string BadgeDisplay return $"{Max}+"; } - return Badge; + return BadgeText; } } diff --git a/Badge/src/Badge/BadgeStyle.razor b/Badge/src/Badge/BadgeStyle.razor index 404a9b7..98c5709 100644 --- a/Badge/src/Badge/BadgeStyle.razor +++ b/Badge/src/Badge/BadgeStyle.razor @@ -1,150 +1,143 @@ @namespace Skclusive.Material.Badge @inherits StyleComponentBase - - - .Badge-Root { - display: inline-flex; - position: relative; - vertical-align: middle; - flex-shrink: 0; - } - - .Badge-Badge { - font-family: var(--theme-typography-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-size: var(--theme-typography-font-size-normal, 0.75rem); - font-weight: var(--theme-typography-font-weight-medium, 500); - /* color: var(--theme-palette-text-color, ''); */ - /* background-color: var(--theme-palette-color, ''); */ - height: 20px; - display: flex; - padding: 0 6px; - z-index: 1; - position: absolute; - flex-wrap: wrap; - min-width: 20px; - box-sizing: border-box; - transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - align-items: center; - line-height: 1; - align-content: center; - border-radius: 10px; - flex-direction: row; - justify-content: center; - } - - .Badge-Color-Primary { - color: var(--theme-palette-primary-contrast-text, #fff); - background-color: var(--theme-palette-primary-main, #1976d2); - } - - .Badge-Color-Secondary { - color: var(--theme-palette-secondary-contrast-text, #fff); - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - - .Badge-Color-Error { - color: var(--theme-palette-error-contrast-text, #fff); - background-color: var(--theme-palette-error-main, #f44336); - } - - .Badge-Dot { - height: 6px; - padding: 0; - min-width: 6px; - } - - .Badge-Top-Right-Rectangle { - top: 0; - right: 0; - transform: scale(1) translate(50%, -50%); - transform-origin: 100% 0%; - } - - .Badge-Top-Right-Rectangle.Badge-Invisible { - transform: scale(0) translate(50%, -50%); - } - - .Badge-Bottom-Right-Rectangle { - right: 0; - bottom: 0; - transform: scale(1) translate(50%, 50%); - transform-origin: 100% 100%; - } - - .Badge-Bottom-Right-Rectangle.Badge-Invisible { - transform: scale(0) translate(50%, 50%); - } - - .Badge-Top-Left-Rectangle { - top: 0; - left: 0; - transform: scale(1) translate(-50%, -50%); - transform-origin: 0% 0%; - } - - .Badge-Top-Left-Rectangle.Badge-Invisible { - transform: scale(0) translate(-50%, -50%); - } - - .Badge-Bottom-Left-Rectangle { - left: 0; - bottom: 0; - transform: scale(1) translate(-50%, 50%); - transform-origin: 0% 100%; - } - - .Badge-Bottom-Left-Rectangle.Badge-Invisible { - transform: scale(0) translate(-50%, 50%); - } - - .Badge-Top-Right-Circle { - top: 14%; - right: 14%; - transform: scale(1) translate(50%, -50%); - transform-origin: 100% 0%; - } - - .Badge-Top-Right-Circle.Badge-Invisible { - transform: scale(0) translate(50%, -50%); - } - - .Badge-Bottom-Right-Circle { - right: 14%; - bottom: 14%; - transform: scale(1) translate(50%, 50%); - transform-origin: 100% 100%; - } - - .Badge-Bottom-Right-Circle.Badge-Invisible { - transform: scale(0) translate(50%, 50%); - } - - .Badge-Top-Left-Circle { - top: 14%; - left: 14%; - transform: scale(1) translate(-50%, -50%); - transform-origin: 0% 0%; - } - - .Badge-Top-Left-Circle.Badge-Invisible { - transform: scale(0) translate(-50%, -50%); - } - - .Badge-Bottom-Left-Circle { - left: 14%; - bottom: 14%; - transform: scale(1) translate(-50%, 50%); - transform-origin: 0% 100%; - } - - .Badge-Bottom-Left-Circle.Badge-Invisible { - transform: scale(0) translate(-50%, 50%); - } - - .Badge-Invisible { - transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } - - \ No newline at end of file +.Badge-Root { + display: inline-flex; + position: relative; + vertical-align: middle; + flex-shrink: 0; +} + +.Badge-Badge { + font-family: var(--theme-typography-font-family); + font-size: var(--theme-typography-font-size-normal); + font-weight: var(--theme-typography-font-weight-medium); + height: 20px; + display: flex; + padding: 0 6px; + z-index: 1; + position: absolute; + flex-wrap: wrap; + min-width: 20px; + box-sizing: border-box; + transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + align-items: center; + line-height: 1; + align-content: center; + border-radius: 10px; + flex-direction: row; + justify-content: center; +} + +.Badge-Color-Primary { + color: var(--theme-palette-primary-contrast-text); + background-color: var(--theme-palette-primary-main); +} + +.Badge-Color-Secondary { + color: var(--theme-palette-secondary-contrast-text); + background-color: var(--theme-palette-secondary-main); +} + +.Badge-Color-Error { + color: var(--theme-palette-error-contrast-text); + background-color: var(--theme-palette-error-main); +} + +.Badge-Dot { + height: 6px; + padding: 0; + min-width: 6px; +} + +.Badge-Top-Right-Rectangle { + top: 0; + right: 0; + transform: scale(1) translate(50%, -50%); + transform-origin: 100% 0%; +} + +.Badge-Top-Right-Rectangle.Badge-Invisible { + transform: scale(0) translate(50%, -50%); +} + +.Badge-Bottom-Right-Rectangle { + right: 0; + bottom: 0; + transform: scale(1) translate(50%, 50%); + transform-origin: 100% 100%; +} + +.Badge-Bottom-Right-Rectangle.Badge-Invisible { + transform: scale(0) translate(50%, 50%); +} + +.Badge-Top-Left-Rectangle { + top: 0; + left: 0; + transform: scale(1) translate(-50%, -50%); + transform-origin: 0% 0%; +} + +.Badge-Top-Left-Rectangle.Badge-Invisible { + transform: scale(0) translate(-50%, -50%); +} + +.Badge-Bottom-Left-Rectangle { + left: 0; + bottom: 0; + transform: scale(1) translate(-50%, 50%); + transform-origin: 0% 100%; +} + +.Badge-Bottom-Left-Rectangle.Badge-Invisible { + transform: scale(0) translate(-50%, 50%); +} + +.Badge-Top-Right-Circle { + top: 14%; + right: 14%; + transform: scale(1) translate(50%, -50%); + transform-origin: 100% 0%; +} + +.Badge-Top-Right-Circle.Badge-Invisible { + transform: scale(0) translate(50%, -50%); +} + +.Badge-Bottom-Right-Circle { + right: 14%; + bottom: 14%; + transform: scale(1) translate(50%, 50%); + transform-origin: 100% 100%; +} + +.Badge-Bottom-Right-Circle.Badge-Invisible { + transform: scale(0) translate(50%, 50%); +} + +.Badge-Top-Left-Circle { + top: 14%; + left: 14%; + transform: scale(1) translate(-50%, -50%); + transform-origin: 0% 0%; +} + +.Badge-Top-Left-Circle.Badge-Invisible { + transform: scale(0) translate(-50%, -50%); +} + +.Badge-Bottom-Left-Circle { + left: 14%; + bottom: 14%; + transform: scale(1) translate(-50%, 50%); + transform-origin: 0% 100%; +} + +.Badge-Bottom-Left-Circle.Badge-Invisible { + transform: scale(0) translate(-50%, 50%); +} + +.Badge-Invisible { + transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} \ No newline at end of file diff --git a/Badge/src/Extension/BadgeExtension.cs b/Badge/src/Extension/BadgeExtension.cs new file mode 100644 index 0000000..1506793 --- /dev/null +++ b/Badge/src/Extension/BadgeExtension.cs @@ -0,0 +1,17 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Badge +{ + public static class BadgeExtension + { + public static void TryAddBadgeServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Badge/src/Provider/BadgeStyleProvider.cs b/Badge/src/Provider/BadgeStyleProvider.cs new file mode 100644 index 0000000..201d568 --- /dev/null +++ b/Badge/src/Provider/BadgeStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Badge +{ + public class BadgeStyleProvider : StyleTypeProvider + { + public BadgeStyleProvider() : base(typeof(BadgeStyle)) + { + } + } +} \ No newline at end of file diff --git a/Baseline/src/Baseline.csproj b/Baseline/src/Baseline.csproj index fefb943..2696a84 100644 --- a/Baseline/src/Baseline.csproj +++ b/Baseline/src/Baseline.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Baseline Skclusive.Material.Baseline Skclusive.Material.Baseline @@ -17,7 +16,7 @@ - + diff --git a/Baseline/src/Baseline/Baseline.razor b/Baseline/src/Baseline/Baseline.razor index fb9c844..fbf9253 100644 --- a/Baseline/src/Baseline/Baseline.razor +++ b/Baseline/src/Baseline/Baseline.razor @@ -1,4 +1,4 @@ @namespace Skclusive.Material.Baseline -@inherits BaselineComponent +@inherits MaterialComponent @ChildContent diff --git a/Baseline/src/Baseline/Baseline.cs b/Baseline/src/Baseline/Baseline.razor.cs similarity index 50% rename from Baseline/src/Baseline/Baseline.cs rename to Baseline/src/Baseline/Baseline.razor.cs index 5006bdc..e573a6a 100644 --- a/Baseline/src/Baseline/Baseline.cs +++ b/Baseline/src/Baseline/Baseline.razor.cs @@ -2,9 +2,9 @@ namespace Skclusive.Material.Baseline { - public class BaselineComponent : MaterialComponent + public partial class Baseline : MaterialComponent { - public BaselineComponent() : base("Baseline") + public Baseline() : base("Baseline") { } } diff --git a/Baseline/src/Baseline/BaselineStyle.razor b/Baseline/src/Baseline/BaselineStyle.razor index c049ede..ce03742 100644 --- a/Baseline/src/Baseline/BaselineStyle.razor +++ b/Baseline/src/Baseline/BaselineStyle.razor @@ -1,42 +1,37 @@ @namespace Skclusive.Material.Baseline @inherits StyleComponentBase - - - html { - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - *, *::before, *::after { - box-sizing: inherit; - } - - strong, b { - font-weight: bolder; - } - +html { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +strong, b { + font-weight: bolder; +} + +body { + color: var(--theme-palette-text-primary); + margin: 0; + font-size: var(--theme-typography-body2-font-size); + font-family: var(--theme-typography-body2-font-family); + font-weight: var(--theme-typography-body2-font-weight); + line-height: var(--theme-typography-body2-line-height); + letter-spacing: var(--theme-typography-body2-letter-spacing); + background-color: var(--theme-palette-background-default); +} + +@media print { body { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); - margin: 0; - font-size: var(--theme-typography-body2-font-size, 0.875rem); - font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-body2-font-weight, 400); - line-height: var(--theme-typography-body2-line-height, 1.43); - letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em); - background-color: var(--theme-palette-background-default, #fff); - } - - @media print { - body { - background-color: var(--theme-palette-common-white, #fff); - } - } - - body::backdrop { - background-color: var(--theme-palette-background-default, #fff); + background-color: var(--theme-palette-common-white); } +} - \ No newline at end of file +body::backdrop { + background-color: var(--theme-palette-background-default); +} \ No newline at end of file diff --git a/Baseline/src/Extension/BaselineExtension.cs b/Baseline/src/Extension/BaselineExtension.cs new file mode 100644 index 0000000..636a201 --- /dev/null +++ b/Baseline/src/Extension/BaselineExtension.cs @@ -0,0 +1,17 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Baseline +{ + public static class BaselineExtension + { + public static void TryAddBaselineServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Baseline/src/Provider/BaselineStyleProvider.cs b/Baseline/src/Provider/BaselineStyleProvider.cs new file mode 100644 index 0000000..94f572b --- /dev/null +++ b/Baseline/src/Provider/BaselineStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Baseline +{ + public class BaselineStyleProvider : StyleTypeProvider + { + public BaselineStyleProvider() : base(typeof(BaselineStyle)) + { + } + } +} \ No newline at end of file diff --git a/Button/src/Button.csproj b/Button/src/Button.csproj index b1cc2b4..94bcc59 100644 --- a/Button/src/Button.csproj +++ b/Button/src/Button.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Button Skclusive.Material.Button Skclusive.Material.Button @@ -17,8 +16,7 @@ - - + diff --git a/Button/src/Button/Button.razor b/Button/src/Button/Button.razor index 6227414..ad8b234 100644 --- a/Button/src/Button/Button.razor +++ b/Button/src/Button/Button.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Button -@inherits ButtonComponent +@inherits ButtonCommon /// The of the button. /// diff --git a/Button/src/Button/ButtonStyle.razor b/Button/src/Button/ButtonStyle.razor index 95dda44..fd726e8 100644 --- a/Button/src/Button/ButtonStyle.razor +++ b/Button/src/Button/ButtonStyle.razor @@ -1,310 +1,251 @@ @namespace Skclusive.Material.Button @inherits StyleComponentBase - - - .Button-Root { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); - border-radius: calc(var(--theme-shape-border-radius, 4) * 1px); - padding: 6px 16px; - min-width: 64px; - box-sizing: border-box; - transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, - box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, - border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - font-size: var(--theme-typography-button-font-size, 0.875rem); - font-family: var( - --theme-typography-button-font-family, - "Roboto", - "Helvetica", - "Arial", - sans-serif - ); - font-weight: var(--theme-typography-button-font-weight, 500); - line-height: var(--theme-typography-button-line-height, 1.75); - letter-spacing: var(--theme-typography-button-letter-spacing, 0.02857em); - text-transform: var(--theme-typography-button-text-transform, uppercase); - } - +.Button-Root { + color: var(--theme-palette-text-primary); + border-radius: calc(var(--theme-shape-border-radius) * 1px); + padding: 6px 16px; + min-width: 64px; + box-sizing: border-box; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, + box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, + border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: var(--theme-typography-button-font-size); + font-family: var(--theme-typography-button-font-family); + font-weight: var(--theme-typography-button-font-weight); + line-height: var(--theme-typography-button-line-height); + letter-spacing: var(--theme-typography-button-letter-spacing); + text-transform: var(--theme-typography-button-text-transform); +} + +.Button-Root:hover { + text-decoration: none; + background-color: var(--theme-palette-primary-hover); +} + +.Button-Root.Button-Disabled { + color: var(--theme-palette-action-disabled); +} + +@media (hover: none) { .Button-Root:hover { - text-decoration: none; - background-color: var( - --theme-palette-text-primary-hover, - rgba(0, 0, 0, 0.08) - ); + background-color: transparent; } +} - .Button-Root.Button-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Button-Root:hover.Button-Disabled { + background-color: transparent; +} - @media (hover: none) { - .Button-Root:hover { - background-color: transparent; - } - } +.Button-Label { + width: 100%; + display: inherit; + align-items: inherit; + justify-content: inherit; +} - .Button-Root:hover.Button-Disabled { - background-color: transparent; - } +.Button-Text { + padding: 6px 8px; +} - .Button-Label { - width: 100%; - display: inherit; - align-items: inherit; - justify-content: inherit; - } +.Button-Text-Primary { + color: var(--theme-palette-primary-main); +} - .Button-Text { - padding: 6px 8px; - } - - .Button-Text-Primary { - color: var(--theme-palette-primary-main, #1976d2); - } +.Button-Text-Primary:hover { + background-color: var(--theme-palette-primary-hover); +} +@media (hover: none) { .Button-Text-Primary:hover { - background-color: var( - --theme-palette-primary-main-hover, - rgba(25, 118, 210, 0.08) - ); + background-color: transparent; } +} - @media (hover: none) { - .Button-Text-Primary:hover { - background-color: transparent; - } - } +.Button-Text-Secondary { + color: var(--theme-palette-secondary-main); +} - .Button-Text-Secondary { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Button-Text-Secondary:hover { + background-color: var(--theme-palette-secondary-hover); +} +@media (hover: none) { .Button-Text-Secondary:hover { - background-color: var( - --theme-palette-secondary-main-hover, - var(--theme-palette-secondary-main-hover, rgba(220, 0, 78, 0.08)) - ); + background-color: transparent; } +} - @media (hover: none) { - .Button-Text-Secondary:hover { - background-color: transparent; - } - } +.Button-Outlined { + border: 1px solid var(--theme-component-button-border-outlined); + padding: 5px 15px; +} - .Button-Outlined { - border: 1px solid var(--theme-palette-border-outlined, rgba(0, 0, 0, 0.23)); - padding: 5px 15px; - } +.Button-Outlined.Button-Disabled { + border: 1px solid var(--theme-palette-action-disabled); +} - .Button-Outlined.Button-Disabled { - border: 1px solid var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Button-Outlined-Primary { + color: var(--theme-palette-primary-main); + border: 1px solid var(--theme-component-button-border-outlined); +} - .Button-Outlined-Primary { - color: var(--theme-palette-primary-main, #1976d2); - border: 1px solid - var(--theme-palette-primary-main-border, rgba(25, 118, 210, 0.5)); - } +.Button-Outlined-Primary:hover { + border: 1px solid var(--theme-palette-primary-main); + background-color: var(--theme-palette-primary-hover); +} +@media (hover: none) { .Button-Outlined-Primary:hover { - border: 1px solid var(--theme-palette-primary-main, #1976d2); - background-color: var( - --theme-palette-primary-main-hover, - rgba(25, 118, 210, 0.08) - ); + background-color: transparent; } +} - @media (hover: none) { - .Button-Outlined-Primary:hover { - background-color: transparent; - } - } +.Button-Outlined-Secondary { + color: var(--theme-palette-secondary-main); + border: 1px solid var(--theme-palette-secondary-border); +} - .Button-Outlined-Secondary { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - border: 1px solid - var(--theme-palette-secondary-main-border, rgba(220, 0, 78, 0.5)); - } +.Button-Outlined-Secondary:hover { + border: 1px solid var(--theme-palette-secondary-main); + background-color: var(--theme-palette-secondary-hover); +} +.Button-Outlined-Secondary.Button-Disabled { + border: 1px solid var(--theme-palette-action-disabled); +} + +@media (hover: none) { .Button-Outlined-Secondary:hover { - border: 1px solid var(--theme-palette-secondary-main, rgb(220, 0, 78)); - background-color: var( - --theme-palette-secondary-main-hover, - rgba(220, 0, 78, 0.08) - ); + background-color: transparent; } +} - .Button-Outlined-Secondary.Button-Disabled { - border: 1px solid var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Button-Contained { + color: var(--theme-palette-grey300-contrast-text); + box-shadow: var(--theme-shadow2); + background-color: var(--theme-palette-grey300); +} - @media (hover: none) { - .Button-Outlined-Secondary:hover { - background-color: transparent; - } - } +.Button-Contained:hover { + box-shadow: var(--theme-shadow4); + background-color: var(--theme-palette-greyA100); +} - .Button-Contained { - color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87)); - box-shadow: var( - --theme-shadow2, - 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), - 0px 1px 5px 0px rgba(0, 0, 0, 0.12) - ); - background-color: var(--theme-palette-grey300, #e0e0e0); - } - - .Button-Contained:hover { - box-shadow: var( - --theme-shadow4, - 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), - 0px 1px 10px 0px rgba(0, 0, 0, 0.12) - ); - background-color: var(--theme-palette-grey-A100, #d5d5d5); - } +.Button-Contained.Button-FocusVisible { + box-shadow: var(--theme-shadow6); +} - .Button-Contained.Button-FocusVisible { - box-shadow: var( - --theme-shadow6, - 0px 3px 5px -1px rgba(0, 0, 0, 0.2), - 0px 6px 10px 0px rgba(0, 0, 0, 0.14), - 0px 1px 18px 0px rgba(0, 0, 0, 0.12) - ); - } +.Button-Contained:active { + box-shadow: var(--theme-shadow8); +} - .Button-Contained:active { - box-shadow: var( - --theme-shadow8, - 0px 5px 5px -3px rgba(0, 0, 0, 0.2), - 0px 8px 10px 1px rgba(0, 0, 0, 0.14), - 0px 3px 14px 2px rgba(0, 0, 0, 0.12) - ); - } +.Button-Contained.Button-Disabled { + color: var(--theme-palette-action-disabled); + box-shadow: none; + background-color: var(--theme-palette-action-disabled-background); +} - .Button-Contained.Button-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - box-shadow: none; - background-color: var( - --theme-palette-action-disabled-background, - rgba(0, 0, 0, 0.12) - ); +@media (hover: none) { + .Button-Contained:hover { + box-shadow: var(--theme-shadow2); + background-color: var(--theme-palette-greyA100); } +} - @media (hover: none) { - .Button-Contained:hover { - box-shadow: var( - --theme-shadow2, - 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), - 0px 1px 5px 0px rgba(0, 0, 0, 0.12) - ); - background-color: #e0e0e0; - } - } +.Button-Contained:hover.Button-Disabled { + background-color: var(--theme-palette-action-disabled-background); +} - .Button-Contained:hover.Button-Disabled { - background-color: var( - --theme-palette-action-disabled-background, - rgba(0, 0, 0, 0.12) - ); - } +.Button-Contained-Primary { + color: var(--theme-palette-primary-contrast-text); + background-color: var(--theme-palette-primary-main); +} - .Button-Contained-Primary { - color: var(--theme-palette-primary-contrast-text, #fff); - background-color: var(--theme-palette-primary-main, #1976d2); - } +.Button-Contained-Primary:hover { + background-color: var(--theme-palette-primary-dark); +} +@media (hover: none) { .Button-Contained-Primary:hover { - background-color: var(--theme-palette-primary-current, rgb(17, 82, 147)); + background-color: var(--theme-palette-primary-main); } +} - @media (hover: none) { - .Button-Contained-Primary:hover { - background-color: var(--theme-palette-primary-main, #1976d2); - } - } +.Button-Contained-Secondary { + color: var(--theme-palette-secondary-contrast-text); + background-color: var(--theme-palette-secondary-main); +} - .Button-Contained-Secondary { - color: var(--theme-palette-secondary-contrast-text, #fff); - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Button-Contained-Secondary:hover { + background-color: var(--theme-palette-secondary-dark); +} +@media (hover: none) { .Button-Contained-Secondary:hover { - background-color: var(--theme-palette-secondary-dark, rgb(154, 0, 54)); - } - - @media (hover: none) { - .Button-Contained-Secondary:hover { - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - } - - .Button-Color-Inherit { - color: inherit; - border-color: currentColor; - } - - .Button-Text-Size-Small { - padding: 4px 5px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); - } - - .Button-Text-Size-Large { - padding: 8px 11px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem); - } - - .Button-Outlined-Size-Small { - padding: 3px 9px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); - } - - .Button-Outlined-Size-Large { - padding: 7px 21px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem); - } - - .Button-Contained-Size-Small { - padding: 4px 10px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); - } - - .Button-Contained-Size-Large { - padding: 8px 22px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem); - } - - .Button-FullWidth { - width: 100%; - } - - .Button-StartIcon { - display: inherit; - margin-left: -4px; - margin-right: 8px; - } - - .Button-EndIcon { - display: inherit; - margin-left: 8px; - margin-right: -4px; - } - - .Button-Icon-Size-Small > *:first-child { - font-size: 18px; - } - - .Button-Icon-Size-Medium > *:first-child { - font-size: 20px; - } - - .Button-Icon-Size-Large > *:first-child { - font-size: 22px; - } - - \ No newline at end of file + background-color: var(--theme-palette-secondary-main); + } +} + +.Button-Color-Inherit { + color: inherit; + border-color: currentColor; +} + +.Button-Text-Size-Small { + padding: 4px 5px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); +} + +.Button-Text-Size-Large { + padding: 8px 11px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem); +} + +.Button-Outlined-Size-Small { + padding: 3px 9px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); +} + +.Button-Outlined-Size-Large { + padding: 7px 21px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem); +} + +.Button-Contained-Size-Small { + padding: 4px 10px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); +} + +.Button-Contained-Size-Large { + padding: 8px 22px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem); +} + +.Button-FullWidth { + width: 100%; +} + +.Button-StartIcon { + display: inherit; + margin-left: -4px; + margin-right: 8px; +} + +.Button-EndIcon { + display: inherit; + margin-left: 8px; + margin-right: -4px; +} + +.Button-Icon-Size-Small > *:first-child { + font-size: 18px; +} + +.Button-Icon-Size-Medium > *:first-child { + font-size: 20px; +} + +.Button-Icon-Size-Large > *:first-child { + font-size: 22px; +} \ No newline at end of file diff --git a/Button/src/ButtonBase/ButtonBase.razor b/Button/src/ButtonBase/ButtonBase.razor index f67726a..434da8d 100644 --- a/Button/src/ButtonBase/ButtonBase.razor +++ b/Button/src/ButtonBase/ButtonBase.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Button -@inherits ButtonBaseComponent +@inherits ButtonCommon @if (Navigation) { @@ -16,6 +16,8 @@ Role="@Role" Disabled="@Disabled" Tabindex="@((Disabled.HasValue && Disabled.Value) ? -1 : TabIndex)" + OnClickStop="@OnClickStop" + OnClickPrevent="@OnClickPrevent" @attributes="Attributes"> @ChildContent(context) @if(!DisableRipple && !(Disabled.HasValue && Disabled.Value)) @@ -51,6 +53,8 @@ else OnTouchEnd="@HandleTouchEndAsync" OnDragLeave="@HandleDragLeaveAsync" OnClick="@HandleClick" + OnClickStop="@OnClickStop" + OnClickPrevent="@OnClickPrevent" @attributes="Attributes"> @ChildContent(context) @if(!DisableRipple && !(Disabled.HasValue && Disabled.Value)) diff --git a/Button/src/ButtonBase/ButtonBase.cs b/Button/src/ButtonBase/ButtonBase.razor.cs similarity index 96% rename from Button/src/ButtonBase/ButtonBase.cs rename to Button/src/ButtonBase/ButtonBase.razor.cs index d597674..28ed3d6 100644 --- a/Button/src/ButtonBase/ButtonBase.cs +++ b/Button/src/ButtonBase/ButtonBase.razor.cs @@ -8,9 +8,9 @@ namespace Skclusive.Material.Button { - public class ButtonBaseComponent : ButtonCommonComponent + public partial class ButtonBase : ButtonCommon { - public ButtonBaseComponent() : base("ButtonBase") + public ButtonBase() : base("ButtonBase") { } @@ -120,12 +120,14 @@ public void MakeFocusVisible() // return base.SetParametersAsync(parameters); //} - protected override void HandleFocus(FocusEventArgs args) + protected override Task HandleFocus(FocusEventArgs args) { if (!(Disabled.HasValue && Disabled.Value)) { - base.HandleFocus(args); + return base.HandleFocus(args); } + + return Task.CompletedTask; } protected override async Task HandleBlurAsync(FocusEventArgs args) diff --git a/Button/src/ButtonBase/ButtonBaseStyle.razor b/Button/src/ButtonBase/ButtonBaseStyle.razor index 1c42341..5a9bb09 100644 --- a/Button/src/ButtonBase/ButtonBaseStyle.razor +++ b/Button/src/ButtonBase/ButtonBaseStyle.razor @@ -1,37 +1,32 @@ @namespace Skclusive.Material.Button @inherits StyleComponentBase - +.ButtonBase-Root { + color: inherit; + border: 0; + margin: 0; + cursor: pointer; + display: inline-flex; + outline: 0; + padding: 0; + position: relative; + align-items: center; + user-select: none; + border-radius: 0; + vertical-align: middle; + justify-content: center; + -moz-appearance: none; + text-decoration: none; + background-color: transparent; + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; +} - .ButtonBase-Root { - color: inherit; - border: 0; - margin: 0; - cursor: pointer; - display: inline-flex; - outline: 0; - padding: 0; - position: relative; - align-items: center; - user-select: none; - border-radius: 0; - vertical-align: middle; - justify-content: center; - -moz-appearance: none; - text-decoration: none; - background-color: transparent; - -webkit-appearance: none; - -webkit-tap-highlight-color: transparent; - } +.ButtonBase-Root::-moz-focus-inner { + border-style: none; +} - .ButtonBase-Root::-moz-focus-inner { - border-style: none; - } - - .ButtonBase-Root.ButtonBase-Disabled { - cursor: default; - pointer-events: none; - } - - \ No newline at end of file +.ButtonBase-Root.ButtonBase-Disabled { + cursor: default; + pointer-events: none; +} \ No newline at end of file diff --git a/Button/src/ButtonStyles/ButtonStyles.razor b/Button/src/ButtonStyles/ButtonStyles.razor deleted file mode 100644 index 50a22a8..0000000 --- a/Button/src/ButtonStyles/ButtonStyles.razor +++ /dev/null @@ -1,9 +0,0 @@ -@namespace Skclusive.Material.Button -@inherits StaticComponentBase - - - - - - - \ No newline at end of file diff --git a/Button/src/Common/ButtonCommon.cs b/Button/src/Common/ButtonCommon.cs index 6038fff..92aa505 100644 --- a/Button/src/Common/ButtonCommon.cs +++ b/Button/src/Common/ButtonCommon.cs @@ -7,9 +7,9 @@ namespace Skclusive.Material.Button { - public abstract class ButtonCommonComponent : MaterialComponentBase + public abstract class ButtonCommon : MaterialComponentBase { - protected ButtonCommonComponent(string selector) : base(selector) + protected ButtonCommon(string selector) : base(selector) { } diff --git a/Button/src/Extension/ButtonExtension.cs b/Button/src/Extension/ButtonExtension.cs new file mode 100644 index 0000000..b40b5a4 --- /dev/null +++ b/Button/src/Extension/ButtonExtension.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; +using Skclusive.Material.Transition; + +namespace Skclusive.Material.Button +{ + public static class ButtonExtension + { + public static void TryAddButtonServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddMaterialTransitionServices(config); + + services.TryAddStyleTypeProvider(); + + services.TryAddStyleProducer(); + } + } +} diff --git a/Button/src/Fab/Fab.razor b/Button/src/Fab/Fab.razor index 12cf2ff..71537df 100644 --- a/Button/src/Fab/Fab.razor +++ b/Button/src/Fab/Fab.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Button -@inherits FabComponent +@inherits ButtonCommon - - .Fab-Root { - color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87)); - width: 56px; - height: 56px; - padding: 0; - min-width: 0; - box-shadow: var(--theme-shadow6, 0px 3px 5px -1px rgba(0, 0, 0, 0.2), - 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)); - box-sizing: border-box; - min-height: 36px; - transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - font-size: var(--theme-typography-button-font-size, 0.875rem); - font-family: var( - --theme-typography-button-font-family, - "Roboto", - "Helvetica", - "Arial", - sans-serif - ); - font-weight: var(--theme-typography-button-font-weight, 500); - line-height: var(--theme-typography-button-line-height, 1.75); - letter-spacing: var(--theme-typography-button-letter-spacing, 0.02857em); - text-transform: var(--theme-typography-button-text-transform, uppercase); - border-radius: 50%; - background-color: var(--theme-palette-grey300, #e0e0e0); - } - - .Fab-Root:active { - box-shadow: var(--theme-shadow12, 0px 7px 8px -4px rgba(0, 0, 0, 0.2), - 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)); - } - - .Fab-Root.Fab-FocusVisible { - box-shadow: var(--theme-shadow6, 0px 3px 5px -1px rgba(0, 0, 0, 0.2), - 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)); - } - +.Fab-Root { + color: var(--theme-palette-grey300-contrast-text); + width: 56px; + height: 56px; + padding: 0; + min-width: 0; + box-shadow: var(--theme-shadow6); + box-sizing: border-box; + min-height: 36px; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: var(--theme-typography-button-font-size); + font-family: var(--theme-typography-button-font-family); + font-weight: var(--theme-typography-button-font-weight); + line-height: var(--theme-typography-button-line-height); + letter-spacing: var(--theme-typography-button-letter-spacing); + text-transform: var(--theme-typography-button-text-transform); + border-radius: 50%; + background-color: var(--theme-palette-grey300); +} + +.Fab-Root:active { + box-shadow: var(--theme-shadow12); +} + +.Fab-Root.Fab-FocusVisible { + box-shadow: var(--theme-shadow6); +} + +.Fab-Root:hover { + text-decoration: none; + background-color: var(--theme-palette-greyA100); +} + +.Fab-Root.Fab-Disabled { + color: var(--theme-palette-action-disabled); + box-shadow: var(--theme-shadow0, none); + background-color: var(--theme-palette-action-disabled-background); +} + +@media (hover: none) { .Fab-Root:hover { - text-decoration: none; - background-color: var(--theme-palette-grey-A100, #d5d5d5); + background-color: var(--theme-palette-grey300); } +} - .Fab-Root.Fab-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - box-shadow: var(--theme-shadow0, none); - background-color: var(--theme-palette-action-disabled-background, rgba(0, 0, 0, 0.12)); - } +.Fab-Root:hover.Fab-Disabled { + background-color: var(--theme-palette-action-disabled-background); +} - @media (hover: none) { - .Fab-Root:hover { - background-color: var(--theme-palette-grey300, #e0e0e0); - } - } +.Fab-Label { + width: 100%; + display: inherit; + align-items: inherit; + justify-content: inherit; +} - .Fab-Root:hover.Fab-Disabled { - background-color: var(--theme-palette-action-disabled-background, rgba(0, 0, 0, 0.12)); - } - - .Fab-Label { - width: 100%; - display: inherit; - align-items: inherit; - justify-content: inherit; - } +.Fab-Primary { + color: var(--theme-palette-primary-contrast-text); + background-color: var(--theme-palette-primary-main); +} - .Fab-Primary { - color: var(--theme-palette-primary-contrast-text, #fff); - background-color: var(--theme-palette-primary-main, #1976d2); - } +.Fab-Primary:hover { + background-color: var(--theme-palette-primary-dark); +} +@media (hover: none) { .Fab-Primary:hover { - background-color: var(--theme-palette-primary-current, rgb(17, 82, 147)); + background-color: var(--theme-palette-primary-main); } +} - @media (hover: none) { - .Fab-Primary:hover { - background-color: var(--theme-palette-primary-main, #1976d2); - } - } +.Fab-Secondary { + color: var(--theme-palette-secondary-contrast-text); + background-color: var(--theme-palette-secondary-main); +} - .Fab-Secondary { - color: var(--theme-palette-secondary-contrast-text, #fff); - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Fab-Secondary:hover { + background-color: var(--theme-palette-secondary-dark); +} +@media (hover: none) { .Fab-Secondary:hover { - background-color: var(--theme-palette-secondary-dark, rgb(154, 0, 54)); - } - - @media (hover: none) { - .Fab-Secondary:hover { - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - } - - .Fab-Extended { - width: auto; - height: 48px; - padding: 0 16px; - min-width: 48px; - min-height: auto; - border-radius: 24px; - } - - .Fab-Extended.Fab-Size-Small { - width: auto; - height: 34px; - padding: 0 8px; - min-width: 34px; - border-radius: 17px; - } - - .Fab-Extended.Fab-Size-Medium { - width: auto; - height: 40px; - padding: 0 16px; - min-width: 40px; - border-radius: 20px; - } - - .Fab-Color-Inherit { - color: inherit; - } - - .Fab-Size-Small { - width: 40px; - height: 40px; - } - - .Fab-Size-Medium { - width: 48px; - height: 48px; - } - - \ No newline at end of file + background-color: var(--theme-palette-secondary-main); + } +} + +.Fab-Extended { + width: auto; + height: 48px; + padding: 0 16px; + min-width: 48px; + min-height: auto; + border-radius: 24px; +} + +.Fab-Extended.Fab-Size-Small { + width: auto; + height: 34px; + padding: 0 8px; + min-width: 34px; + border-radius: 17px; +} + +.Fab-Extended.Fab-Size-Medium { + width: auto; + height: 40px; + padding: 0 16px; + min-width: 40px; + border-radius: 20px; +} + +.Fab-Color-Inherit { + color: inherit; +} + +.Fab-Size-Small { + width: 40px; + height: 40px; +} + +.Fab-Size-Medium { + width: 48px; + height: 48px; +} \ No newline at end of file diff --git a/Button/src/IconButton/IconButton.razor b/Button/src/IconButton/IconButton.razor index 18d1a57..ab35b7f 100644 --- a/Button/src/IconButton/IconButton.razor +++ b/Button/src/IconButton/IconButton.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Button -@inherits IconButtonComponent +@inherits ButtonCommon - - .IconButton-Root { - flex: 0 0 auto; - color: var(--theme-palette-action-active, rgba(0, 0, 0, 0.54)); - padding: 12px; - overflow: visible; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 1.5rem); - text-align: center; - transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - border-radius: 50%; - } - +.IconButton-Root { + flex: 0 0 auto; + color: var(--theme-palette-action-active); + padding: 12px; + overflow: visible; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 1.5rem); + text-align: center; + transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + border-radius: 50%; +} + +.IconButton-Root:hover { + background-color: var(--theme-palette-primary-hover); +} + +.IconButton-Root.IconButton-Disabled { + color: var(--theme-palette-action-disabled); + background-color: transparent; +} + +@media (hover: none) { .IconButton-Root:hover { - background-color: var( - --theme-palette-primary-main-hover, - rgba(25, 118, 210, 0.08) - ); - } - - .IconButton-Root.IconButton-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); background-color: transparent; } +} - @media (hover: none) { - .IconButton-Root:hover { - background-color: transparent; - } - } +.IconButton-Edge-Start { + margin-left: -12px; +} - .IconButton-Edge-Start { - margin-left: -12px; - } +.IconButton-Size-Small.IconButton-Edge-Start { + margin-left: -3px; +} - .IconButton-Size-Small.IconButton-Edge-Start { - margin-left: -3px; - } +.IconButton-Edge-End { + margin-right: -12px; +} - .IconButton-Edge-End { - margin-right: -12px; - } +.IconButton-Size-Small.IconButton-Edge-End { + margin-right: -3px; +} - .IconButton-Size-Small.IconButton-Edge-End { - margin-right: -3px; - } +.IconButton-Color-Inherit { + color: inherit; +} - .IconButton-Color-Inherit { - color: inherit; - } +.IconButton-Color-Primary { + color: var(--theme-palette-primary-main); +} - .IconButton-Color-Primary { - color: var(--theme-palette-primary-main, #1976d2); - } +.IconButton-Color-Primary:hover { + background-color: var(--theme-palette-primary-hover); +} +@media (hover: none) { .IconButton-Color-Primary:hover { - background-color: var( - --theme-palette-primary-main-hover, - rgba(25, 118, 210, 0.08) - ); + background-color: transparent; } +} - @media (hover: none) { - .IconButton-Color-Primary:hover { - background-color: transparent; - } - } +.IconButton-Color-Secondary { + color: var(--theme-palette-secondary-main); +} - .IconButton-Color-Secondary { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.IconButton-Color-Secondary:hover { + background-color: var(--theme-palette-secondary-hover); +} +@media (hover: none) { .IconButton-Color-Secondary:hover { - background-color: var( - --theme-palette-secondary-main-hover, - rgba(220, 0, 78, 0.08) - ); - } - - @media (hover: none) { - .IconButton-Color-Secondary:hover { - background-color: transparent; - } - } - - .IconButton-Size-Small { - padding: 3px; - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 18rem); + background-color: transparent; } +} - .IconButton-Label { - width: 100%; - display: flex; - align-items: inherit; - justify-content: inherit; - } +.IconButton-Size-Small { + padding: 3px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 18rem); +} - +.IconButton-Label { + width: 100%; + display: flex; + align-items: inherit; + justify-content: inherit; +} diff --git a/Button/src/Producer/ButtonStyleProducer.cs b/Button/src/Producer/ButtonStyleProducer.cs new file mode 100644 index 0000000..deb3e5b --- /dev/null +++ b/Button/src/Producer/ButtonStyleProducer.cs @@ -0,0 +1,22 @@ +using System.Collections.Generic; +using System.Globalization; +using Skclusive.Core.Component; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Button +{ + public class ButtonStyleProducer : IStyleProducer + { + public IDictionary Variables(ThemeValue theme) + { + var palette = theme.Palette; + + var isDark = theme.IsDark(); + + return new Dictionary + { + { "--theme-component-button-border-outlined", (isDark ? "rgba(255, 255, 255, 0.23)" : "rgba(0, 0, 0, 0.23)").ToString(CultureInfo.InvariantCulture) }, + }; + } + } +} \ No newline at end of file diff --git a/Button/src/Provider/ButtonStyleProvider.cs b/Button/src/Provider/ButtonStyleProvider.cs new file mode 100644 index 0000000..e718330 --- /dev/null +++ b/Button/src/Provider/ButtonStyleProvider.cs @@ -0,0 +1,19 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Button +{ + public class ButtonStyleProvider : StyleTypeProvider + { + public ButtonStyleProvider() : base + ( + typeof(ButtonBaseStyle), + typeof(FabStyle), + typeof(IconButtonStyle), + typeof(RippleStyle), + typeof(TouchRippleStyle), + typeof(ButtonStyle) + ) + { + } + } +} \ No newline at end of file diff --git a/Button/src/Ripple/Ripple.razor b/Button/src/Ripple/Ripple.razor index 9b74a07..5079c32 100644 --- a/Button/src/Ripple/Ripple.razor +++ b/Button/src/Ripple/Ripple.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Button -@inherits RippleComponent +@inherits MaterialComponentBase OnExited { set; get; } + public EventCallback OnExited { set; get; } /// /// class applied on the child element. @@ -141,9 +141,9 @@ protected override void OnParametersSet() { Leaving = true; - if (OnExited != null) + if (OnExited.HasDelegate) { - RunTimeout(() => OnExited(Reference.Empty), Timeout); + RunTimeout(() => OnExited.InvokeAsync(Reference.Empty), Timeout); } } } diff --git a/Button/src/Ripple/RippleStyle.razor b/Button/src/Ripple/RippleStyle.razor index 5ead24f..5edc697 100644 --- a/Button/src/Ripple/RippleStyle.razor +++ b/Button/src/Ripple/RippleStyle.razor @@ -1,75 +1,71 @@ @namespace Skclusive.Material.Button @inherits StyleComponentBase - +.Ripple-Root { + opacity: 0; + position: absolute; +} - .Ripple-Root { - opacity: 0; - position: absolute; - } +.Ripple-Visible { + opacity: 0.3; + transform: scale(1); + animation: Ripple-Keyframes-Enter 550ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.Ripple-Pulsate { + animation-duration: 200ms; +} + +.Ripple-Child { + width: 100%; + height: 100%; + opacity: 1; + display: block; + border-radius: 50%; + background-color: currentColor; +} - .Ripple-Visible { +.Ripple-Child-Leaving { + opacity: 0; + animation: Ripple-Keyframes-Exit 550ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.Ripple-Child-Pulsate { + top: 0; + left: 0; + position: absolute; + animation: Ripple-Keyframes-Pulsate 2500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms + infinite; +} + +@keyframes Ripple-Keyframes-Enter { + 0% { + opacity: 0.1; + transform: scale(0); + } + 100% { opacity: 0.3; transform: scale(1); - animation: Ripple-Keyframes-Enter 550ms cubic-bezier(0.4, 0, 0.2, 1); - } - - .Ripple-Pulsate { - animation-duration: 200ms; } +} - .Ripple-Child { - width: 100%; - height: 100%; +@keyframes Ripple-Keyframes-Exit { + 0% { opacity: 1; - display: block; - border-radius: 50%; - background-color: currentColor; } - - .Ripple-Child-Leaving { + 100% { opacity: 0; - animation: Ripple-Keyframes-Exit 550ms cubic-bezier(0.4, 0, 0.2, 1); - } - - .Ripple-Child-Pulsate { - top: 0; - left: 0; - position: absolute; - animation: Ripple-Keyframes-Pulsate 2500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms - infinite; } +} - @keyframes Ripple-Keyframes-Enter { - 0% { - opacity: 0.1; - transform: scale(0); - } - 100% { - opacity: 0.3; - transform: scale(1); - } +@keyframes Ripple-Keyframes-Pulsate { + 0% { + transform: scale(1); } - - @keyframes Ripple-Keyframes-Exit { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } + 50% { + transform: scale(0.92); } - - @keyframes Ripple-Keyframes-Pulsate { - 0% { - transform: scale(1); - } - 50% { - transform: scale(0.92); - } - 100% { - transform: scale(1); - } + 100% { + transform: scale(1); } - \ No newline at end of file +} \ No newline at end of file diff --git a/Button/src/TouchRipple/TouchPoint.cs b/Button/src/TouchRipple/TouchPoint.cs new file mode 100644 index 0000000..a4c9878 --- /dev/null +++ b/Button/src/TouchRipple/TouchPoint.cs @@ -0,0 +1,11 @@ +namespace Skclusive.Material.Button +{ + public class TouchPoint + { + public bool IsTouch { set; get; } + + public double? ClientX { set; get; } + + public double? ClientY { set; get; } + } +} \ No newline at end of file diff --git a/Button/src/TouchRipple/TouchRipple.razor b/Button/src/TouchRipple/TouchRipple.razor index 8598e86..5e9835f 100644 --- a/Button/src/TouchRipple/TouchRipple.razor +++ b/Button/src/TouchRipple/TouchRipple.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Button -@inherits TouchRippleComponent +@inherits MaterialComponentBase CreateRipple(bool pulsate, double builder.OpenRegion(context.Key); builder.OpenComponent(context.Key + 1); builder.AddAttribute(context.Key + 2, "In", context.In); - builder.AddAttribute(context.Key + 3, "OnExited", context.OnExited); + builder.AddAttribute(context.Key + 3, "OnExited", EventCallback.Factory.Create(this, context.OnExited)); builder.AddAttribute(context.Key + 4, "Timeout", DURATION); builder.AddAttribute(context.Key + 5, "Pulsate", pulsate); builder.AddAttribute(context.Key + 6, "RippleX", rippleX); diff --git a/Button/src/TouchRipple/TouchRippleStyle.razor b/Button/src/TouchRipple/TouchRippleStyle.razor index c981bd5..d72459e 100644 --- a/Button/src/TouchRipple/TouchRippleStyle.razor +++ b/Button/src/TouchRipple/TouchRippleStyle.razor @@ -1,20 +1,15 @@ @namespace Skclusive.Material.Button @inherits StyleComponentBase - - - .TouchRipple-Root { - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - z-index: 0; - position: absolute; - overflow: hidden; - border-radius: inherit; - pointer-events: none; - } - - \ No newline at end of file +.TouchRipple-Root { + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + z-index: 0; + position: absolute; + overflow: hidden; + border-radius: inherit; + pointer-events: none; +} \ No newline at end of file diff --git a/Card/src/Card.csproj b/Card/src/Card.csproj index f7d640b..cbe3996 100644 --- a/Card/src/Card.csproj +++ b/Card/src/Card.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Card Skclusive.Material.Card Skclusive.Material.Card @@ -17,11 +16,10 @@ - - - - - + + + + diff --git a/Card/src/Card/Card.razor b/Card/src/Card/Card.razor index ffbfc07..e30785d 100644 --- a/Card/src/Card/Card.razor +++ b/Card/src/Card/Card.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Card -@inherits CardComponent +@inherits MaterialComponent @ChildContent diff --git a/Card/src/Card/Card.cs b/Card/src/Card/Card.razor.cs similarity index 90% rename from Card/src/Card/Card.cs rename to Card/src/Card/Card.razor.cs index 33b84d9..2b80686 100644 --- a/Card/src/Card/Card.cs +++ b/Card/src/Card/Card.razor.cs @@ -3,9 +3,9 @@ namespace Skclusive.Material.Card { - public class CardComponent : MaterialComponent + public partial class Card : MaterialComponent { - public CardComponent() : base("Card") + public Card() : base("Card") { } diff --git a/Card/src/Card/CardStyle.razor b/Card/src/Card/CardStyle.razor index c00cbf0..b7e6b03 100644 --- a/Card/src/Card/CardStyle.razor +++ b/Card/src/Card/CardStyle.razor @@ -1,11 +1,6 @@ @namespace Skclusive.Material.Card @inherits StyleComponentBase - - - .Card-Root { - overflow: hidden; - } - - \ No newline at end of file +.Card-Root { + overflow: hidden; +} \ No newline at end of file diff --git a/Card/src/CardActionArea/CardActionArea.razor b/Card/src/CardActionArea/CardActionArea.razor index 24567f2..5aa4854 100644 --- a/Card/src/CardActionArea/CardActionArea.razor +++ b/Card/src/CardActionArea/CardActionArea.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Card -@inherits CardActionAreaComponent +@inherits MaterialComponent +.CardActionArea-Root { + width: 100%; + display: block; + text-align: inherit; +} - .CardActionArea-Root { - width: 100%; - display: block; - text-align: inherit; - } +.CardActionArea-Root:hover .CardActionArea-Highlight { + opacity: var(--theme-palette-action-hover-opacity); +} - .CardActionArea-Root:hover .CardActionArea-Highlight { - opacity: var(--theme-palette-action-hover-opacity, 0.08); - } +.CardActionArea-Root.CardActionArea-FocusVisible .CardActionArea-Highlight { + opacity: 0.12; +} - .CardActionArea-Root.CardActionArea-FocusVisible .CardActionArea-Highlight { - opacity: 0.12; - } - - .CardActionArea-Highlight { - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0; - overflow: hidden; - position: absolute; - transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - border-radius: inherit; - pointer-events: none; - background-color: currentcolor; - } - - \ No newline at end of file +.CardActionArea-Highlight { + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + overflow: hidden; + position: absolute; + transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + border-radius: inherit; + pointer-events: none; + background-color: currentcolor; +} \ No newline at end of file diff --git a/Card/src/CardActions/CardActions.razor b/Card/src/CardActions/CardActions.razor index 7e22a87..8d10a27 100644 --- a/Card/src/CardActions/CardActions.razor +++ b/Card/src/CardActions/CardActions.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Card -@inherits CardActionsComponent +@inherits MaterialComponent - - .CardActions-Root { - display: flex; - padding: 8px; - align-items: center; - } - - .CardActions-Spacing > * + * { - margin-left: 8px; - } - - \ No newline at end of file +.CardActions-Root { + display: flex; + padding: 8px; + align-items: center; +} + +.CardActions-Spacing > * + * { + margin-left: 8px; +} \ No newline at end of file diff --git a/Card/src/CardContent/CardContent.razor b/Card/src/CardContent/CardContent.razor index 77f1155..8d10a27 100644 --- a/Card/src/CardContent/CardContent.razor +++ b/Card/src/CardContent/CardContent.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Card -@inherits CardContentComponent +@inherits MaterialComponent +.CardContent-Root { + padding: 16px; +} - .CardContent-Root { - padding: 16px; - } - - .CardContent-Root:last-child { - padding-bottom: 24px; - } - - \ No newline at end of file +.CardContent-Root:last-child { + padding-bottom: 24px; +} \ No newline at end of file diff --git a/Card/src/CardHeader/CardHeader.razor b/Card/src/CardHeader/CardHeader.razor index dd63e38..d1e8048 100644 --- a/Card/src/CardHeader/CardHeader.razor +++ b/Card/src/CardHeader/CardHeader.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Card -@inherits CardHeaderComponent +@inherits MaterialComponent - - .CardHeader-Root { - display: flex; - padding: 16px; - align-items: center; - } - - .CardHeader-Avatar { - flex: 0 0 auto; - margin-right: 16px; - } - - .CardHeader-Action { - flex: 0 0 auto; - align-self: flex-start; - margin-top: -8px; - margin-right: -8px; - } - - .CardHeader-Content { - flex: 1 1 auto; - } - - .CardHeader-Title { - } - - .CardHeader-SubHeader { - } - - \ No newline at end of file +.CardHeader-Root { + display: flex; + padding: 16px; + align-items: center; +} + +.CardHeader-Avatar { + flex: 0 0 auto; + margin-right: 16px; +} + +.CardHeader-Action { + flex: 0 0 auto; + align-self: flex-start; + margin-top: -8px; + margin-right: -8px; +} + +.CardHeader-Content { + flex: 1 1 auto; +} + +.CardHeader-Title { +} + +.CardHeader-SubHeader { +} \ No newline at end of file diff --git a/Card/src/CardMedia/CardMedia.razor b/Card/src/CardMedia/CardMedia.razor index 0a685aa..f8edc64 100644 --- a/Card/src/CardMedia/CardMedia.razor +++ b/Card/src/CardMedia/CardMedia.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Card -@inherits CardMediaComponent +@inherits MaterialComponent MEDIAS = new List() { @@ -23,7 +23,7 @@ public class CardMediaComponent : MaterialComponent "img" }; - public CardMediaComponent() : base("CardMedia") + public CardMedia() : base("CardMedia") { } diff --git a/Card/src/CardMedia/CardMediaStyle.razor b/Card/src/CardMedia/CardMediaStyle.razor index 10c1d4a..a44f2ff 100644 --- a/Card/src/CardMedia/CardMediaStyle.razor +++ b/Card/src/CardMedia/CardMediaStyle.razor @@ -1,22 +1,17 @@ @namespace Skclusive.Material.Card @inherits StyleComponentBase - +.CardMedia-Root { + display: block; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} - .CardMedia-Root { - display: block; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - } +.CardMedia-Media { + width: 100%; +} - .CardMedia-Media { - width: 100%; - } - - .CardMedia-Imgage { - object-fit: cover; - } - - \ No newline at end of file +.CardMedia-Imgage { + object-fit: cover; +} \ No newline at end of file diff --git a/Card/src/CardStyles/CardStyles.razor b/Card/src/CardStyles/CardStyles.razor deleted file mode 100644 index 006c3c0..0000000 --- a/Card/src/CardStyles/CardStyles.razor +++ /dev/null @@ -1,9 +0,0 @@ -@namespace Skclusive.Material.Card -@inherits StaticComponentBase - - - - - - - \ No newline at end of file diff --git a/Card/src/Extension/CardExtension.cs b/Card/src/Extension/CardExtension.cs new file mode 100644 index 0000000..6aaf33d --- /dev/null +++ b/Card/src/Extension/CardExtension.cs @@ -0,0 +1,26 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Paper; +using Skclusive.Material.Button; +using Skclusive.Material.Avatar; +using Skclusive.Material.Typography; + +namespace Skclusive.Material.Card +{ + public static class CardExtension + { + public static void TryAddCardServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddPaperServices(config); + + services.TryAddAvatarServices(config); + + services.TryAddTypographyServices(config); + + services.TryAddButtonServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Card/src/Provider/CardStyleProvider.cs b/Card/src/Provider/CardStyleProvider.cs new file mode 100644 index 0000000..a89aa2c --- /dev/null +++ b/Card/src/Provider/CardStyleProvider.cs @@ -0,0 +1,19 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Card +{ + public class CardStyleProvider : StyleTypeProvider + { + public CardStyleProvider() : base + ( + typeof(CardStyle), + typeof(CardContentStyle), + typeof(CardHeaderStyle), + typeof(CardMediaStyle), + typeof(CardActionsStyle), + typeof(CardActionAreaStyle) + ) + { + } + } +} \ No newline at end of file diff --git a/Chip/src/Chip.csproj b/Chip/src/Chip.csproj new file mode 100644 index 0000000..3339e68 --- /dev/null +++ b/Chip/src/Chip.csproj @@ -0,0 +1,31 @@ + + + + 5.0.0 + $(VersionSuffix) + net5.0 + Skclusive.Material.Chip + Skclusive.Material.Chip + Skclusive.Material.Chip + Skclusive + Skclusive + Skclusive + blazor material ui Chip + https://github.com/skclusive/Skclusive.Material.Component + https://github.com/skclusive/Skclusive.Material.Component + + + + + + + + + + + + + + diff --git a/Chip/src/Chip/Chip.razor b/Chip/src/Chip/Chip.razor new file mode 100644 index 0000000..8beed27 --- /dev/null +++ b/Chip/src/Chip/Chip.razor @@ -0,0 +1,65 @@ +@namespace Skclusive.Material.Chip +@inherits MaterialComponentBase + + + @if (HasAvatarContent) + { + + @AvatarContent + + } + else if (HasIconContent) + { + + @IconContent + + } + + @if (HasLabelContent) + { + @LabelContent + } + else + { + @Label + } + + @if (Deletable) + { + + @if (HasDeleteIconContent) + { + + @DeleteIconContent + + } + else + { + + } + + } + diff --git a/Chip/src/Chip/Chip.razor.cs b/Chip/src/Chip/Chip.razor.cs new file mode 100644 index 0000000..2868a6d --- /dev/null +++ b/Chip/src/Chip/Chip.razor.cs @@ -0,0 +1,390 @@ +using Microsoft.AspNetCore.Components; +using Skclusive.Core.Component; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Components.Web; +using Skclusive.Material.Core; +using Skclusive.Material.Icon; +using Skclusive.Material.Avatar; +using Skclusive.Script.DomHelpers; + +namespace Skclusive.Material.Chip +{ + public partial class Chip : MaterialComponentBase + { + public Chip() : base("Chip") + { + } + + /// + /// html component tag to be used as container. + /// + [Parameter] + public string Component { set; get; } = "div"; + + /// + /// If `true`, the chip will hover on mouse over and ripple on click. + /// + [Parameter] + public bool? Clickable { get; set; } + + [Parameter] + public string Label { get; set; } + + [Parameter] + public RenderFragment LabelContent { get; set; } + + /// + /// Avatar placed before the children instead of DeleteIcon. + /// + [Parameter] + public RenderFragment AvatarContent { set; get; } + + /// + /// The defines the look of the chip. + /// + [Parameter] + public ChipVariant Variant { set; get; } = ChipVariant.Default; + + /// + /// The of the button. + /// + [Parameter] + public Size Size { set; get; } = Size.Medium; + + /// + /// Element placed before the children. + /// + [Parameter] + public RenderFragment IconContent { set; get; } + + /// + /// Element placed after the children. + /// + [Parameter] + public RenderFragment DeleteIconContent { set; get; } + + /// + /// The URL to link to when the button is clicked. + /// If defined, an a element will be used as the root node. + /// + [Parameter] + public string Href { set; get; } + + /// + /// The of the component. It supports those theme colors that make sense for this component. + /// + [Parameter] + public Color Color { set; get; } = Color.Default; + + [Parameter] + public EventCallback OnDelete { get; set; } + + [Inject] + public DomHelpers DomHelpers { set; get; } + + protected bool Deletable => OnDelete.HasDelegate; + + protected bool HasIcon => IsClickable || Deletable; + + protected string _Role => HasIcon ? "button" : Role; + + protected int? _TabIndex => HasIcon ? 0 : TabIndex; + + protected bool HasLabelContent => LabelContent != null; + + protected bool HasAvatarContent => AvatarContent != null; + + protected bool HasIconContent => IconContent != null; + + protected bool HasDeleteIconContent => DeleteIconContent != null; + + protected bool IsClickable => (!Clickable.HasValue || Clickable.Value) && OnClick.HasDelegate ? true : Clickable.HasValue && Clickable.Value; + + protected ISvgIconContext IconContext => new SvgIconContextBuilder() + .WithClass(_IconClass) + .WithStyle(_IconStyle) + .Build(); + + protected ISvgIconContext DeleteIconContext => new SvgIconContextBuilder() + .WithClass(_DeleteIconClass) + .WithStyle(_DeleteIconStyle) + .Build(); + + protected IAvatarContext AvatarContext => new AvatarContextBuilder() + .WithClass(_AvatarClass) + .WithStyle(_AvatarStyle) + .Build(); + + protected override async Task HandleKeyUpAsync(KeyboardEventArgs args) + { + await base.HandleKeyUpAsync(args); + + var key = args.Key; + + if (key == " " || key == "Enter") + { + await HandleClickAsync(args); + } + else if (Deletable && (key == "Backspace" || key == "Delete")) + { + await OnDelete.InvokeAsync(args); + } + else if (key == "Escape") + { + await DomHelpers.BlurAsync(RootRef.Current); + } + } + + protected async Task HandleDeleteClickAsync(EventArgs args) + { + await OnDelete.InvokeAsync(args); + } + + protected override IEnumerable Classes + { + get + { + foreach (var item in base.Classes) + yield return item; + + if (Size == Size.Small) + yield return $"{nameof(Size)}-{nameof(Size.Small)}"; + + if (Color != Color.Default) + yield return $"{nameof(Color)}-{Color}"; + + if (IsClickable) + { + yield return $"{nameof(Clickable)}"; + + if (Color != Color.Default) + yield return $"{nameof(Clickable)}-{nameof(Color)}-{Color}"; + } + + if (Deletable) + { + yield return $"{nameof(Deletable)}"; + + if (Color != Color.Default) + yield return $"{nameof(Deletable)}-{nameof(Color)}-{Color}"; + } + + if (Variant == ChipVariant.Outlined) + { + yield return $"{nameof(ChipVariant.Outlined)}"; + + if (Color == Color.Primary) + yield return $"{nameof(ChipVariant.Outlined)}-{nameof(Color.Primary)}"; + + if (Color == Color.Secondary) + yield return $"{nameof(ChipVariant.Outlined)}-{nameof(Color.Secondary)}"; + } + } + } + + /// + /// The style applied on the end icon. + /// + [Parameter] + public string IconStyle { set; get; } + + /// + /// The class applied on the end icon. + /// + [Parameter] + public string IconClass { set; get; } + + protected virtual string _IconStyle + { + get => CssUtil.ToStyle(IconStyles, IconStyle); + } + + protected virtual IEnumerable> IconStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _IconClass + { + get => CssUtil.ToClass($"{Selector}-Icon", IconClasses, IconClass); + } + + protected virtual IEnumerable IconClasses + { + get + { + yield return string.Empty; + + if (Size == Size.Small) + yield return $"{nameof(Size.Small)}"; + + if (Color != Color.Default) + yield return $"{nameof(Color)}-{Color}"; + } + } + + /// + /// The style applied on the start icon. + /// + [Parameter] + public string DeleteIconStyle { set; get; } + + /// + /// The class applied on the start icon. + /// + [Parameter] + public string DeleteIconClass { set; get; } + + protected virtual string _DeleteIconStyle + { + get => CssUtil.ToStyle(DeleteIconStyles, DeleteIconStyle); + } + + protected virtual IEnumerable> DeleteIconStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _DeleteIconClass + { + get => CssUtil.ToClass($"{Selector}-DeleteIcon", DeleteIconClasses, DeleteIconClass); + } + + protected virtual IEnumerable DeleteIconClasses + { + get + { + yield return string.Empty; + + if (Size == Size.Small) + yield return $"{nameof(Size.Small)}"; + + if (Color != Color.Default) + { + if (Variant != ChipVariant.Outlined) + yield return $"{nameof(Color)}-{Color}"; + + if (Variant == ChipVariant.Outlined) + yield return $"{nameof(ChipVariant.Outlined)}-{nameof(Color)}-{Color}"; + } + } + } + + /// + /// The style applied on the end icon. + /// + [Parameter] + public string AvatarStyle { set; get; } + + /// + /// The class applied on the end icon. + /// + [Parameter] + public string AvatarClass { set; get; } + + protected virtual string _AvatarStyle + { + get => CssUtil.ToStyle(AvatarStyles, AvatarStyle); + } + + protected virtual IEnumerable> AvatarStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _AvatarClass + { + get => CssUtil.ToClass($"{Selector}-Avatar", AvatarClasses, AvatarClass); + } + + protected virtual IEnumerable AvatarClasses + { + get + { + yield return string.Empty; + + if (Size == Size.Small) + yield return $"{nameof(Size.Small)}"; + + if (Color != Color.Default) + yield return $"{nameof(Color)}-{Color}"; + } + } + + /// + /// The class applied to the label. + /// + [Parameter] + public string LabelClass { set; get; } + + /// + /// style applied on the label. + /// + [Parameter] + public string LabelStyle { set; get; } + + protected virtual string _LabelClass + { + get => CssUtil.ToClass($"{Selector}-Label", LabelClasses, LabelClass); + } + + protected virtual IEnumerable LabelClasses + { + get + { + yield return string.Empty; + + if (Size == Size.Small) + yield return $"{nameof(Size.Small)}"; + } + } + + protected virtual string _LabelStyle + { + get => CssUtil.ToStyle(LabelStyles, LabelStyle); + } + + protected virtual IEnumerable> LabelStyles + { + get => Enumerable.Empty>(); + } + + /// + /// The style applied on the end icon. + /// + [Parameter] + public string DeleteContainerStyle { set; get; } + + /// + /// The class applied on the end icon. + /// + [Parameter] + public string DeleteContainerClass { set; get; } + + protected virtual string _DeleteContainerStyle + { + get => CssUtil.ToStyle(DeleteContainerStyles, DeleteContainerStyle); + } + + protected virtual IEnumerable> DeleteContainerStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _DeleteContainerClass + { + get => CssUtil.ToClass($"{Selector}-DeleteContainer", DeleteContainerClasses, DeleteContainerClass); + } + + protected virtual IEnumerable DeleteContainerClasses + { + get + { + yield return $"{Size}"; + } + } + } +} diff --git a/Chip/src/Chip/ChipStyle.razor b/Chip/src/Chip/ChipStyle.razor new file mode 100644 index 0000000..5abe75a --- /dev/null +++ b/Chip/src/Chip/ChipStyle.razor @@ -0,0 +1,260 @@ +@namespace Skclusive.Material.Chip +@inherits StyleComponentBase + +.Chip-Root { + color: var(--theme-component-chip-color); + border: none; + cursor: default; + height: 32px; + display: inline-flex; + outline: 0; + padding: 0; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); + box-sizing: border-box; + transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + align-items: center; + font-family: var(--theme-typography-font-family); + white-space: nowrap; + border-radius: 16px; + vertical-align: middle; + justify-content: center; + text-decoration: none; + background-color: var(--theme-component-chip-background-color); +} + +.Chip-Root.Chip-Disabled { + opacity: 0.5; + pointer-events: none; +} + +.Chip-Size-Small { + height: 24px; +} + +.Chip-Color-Primary { + color: var(--theme-palette-primary-contrast-text); + background-color: var(--theme-palette-primary-main); +} + +.Chip-Color-Secondary { + color: var(--theme-palette-secondary-contrast-text); + background-color: var(--theme-palette-secondary-main); +} + +.Chip-Clickable { + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.Chip-Clickable:hover, .Chip-Clickable:focus { + background-color: var(--theme-component-chip-clickable-focus); +} + +.Chip-Clickable:active { + box-shadow: var(--theme-shadow1); + background-color: var(--theme-component-chip-clickable-active); +} + +.Chip-Clickable-Color-Primary:hover, .Chip-Clickable-Color-Primary:focus { + background-color: var(--theme-component-chip-clickable-primary-focus); +} + +.Chip-Clickable-Color-Primary:active { + background-color: var(--theme-component-chip-clickable-primary-active); +} + +.Chip-Clickable-Color-Secondary:hover, .Chip-Clickable-Color-Secondary:focus { + background-color: var(--theme-component-chip-clickable-secondary-focus); +} + +.Chip-Clickable-Color-Secondary:active { + background-color: var(--theme-component-chip-clickable-secondary-active); +} + +.Chip-Deletable:focus { + background-color: var(--theme-component-chip-deletable-focus); +} + +.Chip-Deletable-Color-Primary:focus { + background-color: var(--theme-component-chip-deletable-primary-focus); +} + +.Chip-Deletable-Color-Secondary:focus { + background-color: var(--theme-component-chip-deletable-secondary-focus); +} + +.Chip-Outlined { + border: 1px solid var(--theme-component-chip-border-outlined); + background-color: transparent; +} + +.Chip-Clickable.Chip-Outlined:hover, .Chip-Clickable.Chip-Outlined:focus, .Chip-Deletable.Chip-Outlined:focus { + background-color: var(--theme-component-chip-outlined-focus); +} + +.Chip-Outlined .Chip-Avatar { + margin-left: 4px; +} + +.Chip-Outlined .Chip-Avatar-Small { + margin-left: 2px; +} + +.Chip-Outlined .Chip-Icon { + margin-left: 4px; +} + +.Chip-Outlined .Chip-Icon-Small { + margin-left: 2px; +} + +.Chip-Outlined .Chip-DeleteIcon { + margin-right: 5px; +} + +.Chip-Outlined .Chip-DeleteIcon-Small { + margin-right: 3px; +} + +.Chip-Outlined-Primary { + color: var(--theme-palette-primary-main); + border: 1px solid var(--theme-palette-primary-main); +} + +.Chip-Clickable.Chip-Outlined-Primary:hover, .Chip-Clickable.Chip-Outlined-Primary:focus, .Chip-Deletable.Chip-Outlined-Primary:focus { + background-color: var(--theme-component-chip-outlined-primary-focus); +} + +.Chip-Outlined-Secondary { + color: var(--theme-palette-secondary-main); + border: 1px solid var(--theme-palette-secondary-main); +} + +.Chip-Clickable.Chip-Outlined-Secondary:hover, .Chip-Clickable.Chip-Outlined-Secondary:focus, .Chip-Deletable.Chip-Outlined-Secondary:focus { + background-color: var(--theme-component-chip-outlined-secondary-focus); +} + +.Chip-Avatar { + color: var(--theme-component-chip-avatar-color); + width: 24px; + height: 24px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 12rem); + margin-left: 5px; + margin-right: -6px; +} + +.Chip-Avatar-Small { + width: 18px; + height: 18px; + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 10rem); + margin-left: 4px; + margin-right: -4px; +} + +.Chip-Avatar-Color-Primary { + color: var(--theme-palette-primary-contrast-text); + background-color: var(--theme-palette-primary-dark); +} + +.Chip-Avatar-Color-Secondary { + color: var(--theme-palette-secondary-contrast-text); + background-color: var(--theme-palette-secondary-dark); +} + +.Chip-Icon { + color: var(--theme-component-chip-icon-color); + margin-left: 5px; + margin-right: -6px; +} + +.Chip-Icon-Small { + width: 18px; + height: 18px; + margin-left: 4px; + margin-right: -4px; +} + +.Chip-Icon-Color-Primary { + color: inherit; +} + +.Chip-Icon-Color-Secondary { + color: inherit; +} + +.Chip-Label { + cursor: inherit; + display: flex; + align-items: center; + user-select: none; + white-space: nowrap; + padding-left: 12px; + padding-right: 12px; +} + +.Chip-Label-Small { + padding-left: 8px; + padding-right: 8px; +} + +.Chip-DeleteIcon { + color: var(--theme-component-chip-delete-icon-color); + width: 22px; + cursor: pointer; + height: 22px; + margin: 0 5px 0 -6px; + -webkit-tap-highlight-color: transparent; +} + +.Chip-DeleteIcon:hover { + color: var(--theme-component-chip-delete-icon-color-hover); +} + +.Chip-DeleteIcon-Small { + width: 16px; + height: 16px; + margin-left: -4px; + margin-right: 4px; +} + +.Chip-DeleteIcon-Color-Primary { + color: var(--theme-component-chip-delete-icon-primary-color); +} + +.Chip-DeleteIcon-Color-Primary:hover, .Chip-DeleteIcon-Color-Primary:active { + color: var(--theme-palette-primary-contrast-text); +} + +.Chip-DeleteIcon-Color-Secondary { + color: var(--theme-component-chip-delete-icon-secondary-color); +} + +.Chip-DeleteIcon-Color-Secondary:hover, .Chip-DeleteIcon-Color-Secondary:active { + color: var(--theme-palette-secondary-contrast-text); +} + +.Chip-DeleteIcon-Outlined-Color-Primary { + color: var(--theme-component-chip-delete-icon-outlined-primary-color); +} + +.Chip-DeleteIcon-Outlined-Color-Primary:hover, .Chip-DeleteIcon-Outlined-Color-Primary:active { + color: var(--theme-palette-primary-main); +} + +.Chip-DeleteIcon-Outlined-Color-Secondary { + color: var(--theme-component-chip-delete-icon-outlined-secondary-color); +} + +.Chip-DeleteIcon-Outlined-Color-Secondary:hover, .Chip-DeleteIcon-Outlined-Color-Secondary:active { + color: var(--theme-palette-secondary-main); +} + +.Chip-DeleteContainer-Medium { + width: 22px; + height: 22px; +} + +.Chip-DeleteContainer-Small { + width: 16px; + height: 16px; +} \ No newline at end of file diff --git a/Chip/src/Chip/ChipVariant.cs b/Chip/src/Chip/ChipVariant.cs new file mode 100644 index 0000000..7e32a3a --- /dev/null +++ b/Chip/src/Chip/ChipVariant.cs @@ -0,0 +1,9 @@ +namespace Skclusive.Material.Chip +{ + public enum ChipVariant + { + Default, + + Outlined, + } +} diff --git a/Chip/src/Extension/ChipExtension.cs b/Chip/src/Extension/ChipExtension.cs new file mode 100644 index 0000000..78c66d7 --- /dev/null +++ b/Chip/src/Extension/ChipExtension.cs @@ -0,0 +1,26 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; +using Skclusive.Material.Avatar; +using Skclusive.Material.Icon; +using Skclusive.Script.DomHelpers; + +namespace Skclusive.Material.Chip +{ + public static class ChipExtension + { + public static void TryAddChipServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddDomHelpersServices(config); + + services.TryAddAvatarServices(config); + + services.TryAddIconServices(config); + + services.TryAddStyleTypeProvider(); + + services.TryAddStyleProducer(); + } + } +} diff --git a/Chip/src/Producer/ChipStyleProducer.cs b/Chip/src/Producer/ChipStyleProducer.cs new file mode 100644 index 0000000..2409b22 --- /dev/null +++ b/Chip/src/Producer/ChipStyleProducer.cs @@ -0,0 +1,49 @@ +using System.Collections.Generic; +using System.Globalization; +using Skclusive.Core.Component; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Chip +{ + public class ChipStyleProducer : IStyleProducer + { + public IDictionary Variables(ThemeValue theme) + { + var palette = theme.Palette; + + string ToContrastText(string color) + { + return color.ToContrastText(palette.ContrastThreshold); + } + + var isDark = theme.IsDark(); + + return new Dictionary + { + { "--theme-component-chip-color", ToContrastText(isDark ? palette.Grey.X700 : palette.Grey.X300).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-background-color", (isDark ? palette.Grey.X700 : palette.Grey.X300).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-clickable-focus", (isDark ? palette.Grey.X700 : palette.Grey.X300).Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-clickable-active", (isDark ? palette.Grey.X700 : palette.Grey.X300).Emphasize(0.12m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-clickable-primary-focus", palette.Primary.Main.Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-clickable-primary-active", palette.Primary.Main.Emphasize(0.12m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-clickable-secondary-focus", palette.Secondary.Main.Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-clickable-secondary-active", palette.Secondary.Main.Emphasize(0.12m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-deletable-focus", (isDark ? palette.Grey.X700 : palette.Grey.X300).Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-deletable-primary-focus", palette.Primary.Main.Emphasize(0.2m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-deletable-secondary-focus", palette.Secondary.Main.Emphasize(0.2m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-outlined-focus", palette.Text.Primary.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-outlined-primary-focus", palette.Primary.Main.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-outlined-secondary-focus", palette.Secondary.Main.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-avatar-color", (isDark ? palette.Grey.X300 : palette.Grey.X700).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-icon-color", (isDark ? palette.Grey.X300 : palette.Grey.X700).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-delete-icon-color", palette.Text.Primary.Fade(0.26m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-delete-icon-color-hover", palette.Text.Primary.Fade(0.26m).Fade(0.4m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-delete-icon-primary-color", palette.Primary.ContrastText.Fade(0.7m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-delete-icon-secondary-color", palette.Secondary.ContrastText.Fade(0.7m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-delete-icon-outlined-primary-color", palette.Primary.Main.Fade(0.7m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-delete-icon-outlined-secondary-color", palette.Secondary.Main.Fade(0.7m).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-chip-border-outlined", (isDark ? "rgba(255, 255, 255, 0.23)" : "rgba(0, 0, 0, 0.23)").ToString(CultureInfo.InvariantCulture) }, + }; + } + } +} \ No newline at end of file diff --git a/Chip/src/Provider/ChipStyleProvider.cs b/Chip/src/Provider/ChipStyleProvider.cs new file mode 100644 index 0000000..0d90aa6 --- /dev/null +++ b/Chip/src/Provider/ChipStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Chip +{ + public class ChipStyleProvider : StyleTypeProvider + { + public ChipStyleProvider() : base(typeof(ChipStyle)) + { + } + } +} \ No newline at end of file diff --git a/Chip/src/_Imports.razor b/Chip/src/_Imports.razor new file mode 100644 index 0000000..baff502 --- /dev/null +++ b/Chip/src/_Imports.razor @@ -0,0 +1,5 @@ +@using Microsoft.AspNetCore.Components.Web +@using Skclusive.Core.Component +@using Skclusive.Material.Core +@using Skclusive.Material.Icon +@using Skclusive.Material.Avatar \ No newline at end of file diff --git a/Container/src/Container.csproj b/Container/src/Container.csproj index 9ef3fd0..b88aeca 100644 --- a/Container/src/Container.csproj +++ b/Container/src/Container.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Container Skclusive.Material.Container Skclusive.Material.Container @@ -17,7 +16,7 @@ - + diff --git a/Container/src/Container/Container.razor b/Container/src/Container/Container.razor index 8e3dd1e..1376d71 100644 --- a/Container/src/Container/Container.razor +++ b/Container/src/Container/Container.razor @@ -1,11 +1,14 @@ @namespace Skclusive.Material.Container -@inherits ContainerComponent +@inherits MaterialComponent @ChildContent diff --git a/Container/src/Container/Container.cs b/Container/src/Container/Container.razor.cs similarity index 94% rename from Container/src/Container/Container.cs rename to Container/src/Container/Container.razor.cs index 9b15302..33365fe 100644 --- a/Container/src/Container/Container.cs +++ b/Container/src/Container/Container.razor.cs @@ -5,9 +5,9 @@ namespace Skclusive.Material.Container { - public class ContainerComponent : MaterialComponent + public partial class Container : MaterialComponent { - public ContainerComponent() : base("Container") + public Container() : base("Container") { } diff --git a/Container/src/Container/ContainerStyle.razor b/Container/src/Container/ContainerStyle.razor index 8552cb5..2623cd1 100644 --- a/Container/src/Container/ContainerStyle.razor +++ b/Container/src/Container/ContainerStyle.razor @@ -1,83 +1,85 @@ @namespace Skclusive.Material.Container @inherits StyleComponentBase - +.Container-Root { + width: 100%; + display: block; + box-sizing: border-box; + margin-left: auto; + margin-right: auto; + padding-left: calc(var(--theme-spacing) * 2px); + padding-right: calc(var(--theme-spacing) * 2px); +} +@media (min-width:600px) { .Container-Root { - width: 100%; - display: block; - box-sizing: border-box; - margin-left: auto; - margin-right: auto; - padding-left: 16px; - padding-right: 16px; + padding-left: calc(var(--theme-spacing) * 3px); + padding-right: calc(var(--theme-spacing) * 3px); } +} - @media (min-width:600px) { - .Container-Root { - padding-left: 24px; - padding-right: 24px; - } +@media (min-width:960px) { + .Container-Root { + padding-left: calc(var(--theme-spacing) * 4px); + padding-right: calc(var(--theme-spacing) * 4px); } +} - .Container-DisableGutters { - padding-left: 0; - padding-right: 0; - } +.Container-DisableGutters { + padding-left: 0; + padding-right: 0; +} - @media (min-width:600px) { - .Container-Fixed { - max-width: 600px; - } +@media (min-width:600px) { + .Container-Fixed { + max-width: calc(var(--theme-breakpoints-values-sm) * 1px); } +} - @media (min-width:960px) { - .Container-Fixed { - max-width: 960px; - } +@media (min-width:960px) { + .Container-Fixed { + max-width: calc(var(--theme-breakpoints-values-md) * 1px); } +} - @media (min-width:1280px) { - .Container-Fixed { - max-width: 1280px; - } +@media (min-width:1280px) { + .Container-Fixed { + max-width: calc(var(--theme-breakpoints-values-lg) * 1px); } +} - @media (min-width:1920px) { - .Container-Fixed { - max-width: 1920px; - } +@media (min-width:1920px) { + .Container-Fixed { + max-width: calc(var(--theme-breakpoints-values-xl) * 1px); } +} - @media (min-width:0px) { - .Container-MaxWidth-ExtraSmall { - max-width: 444px; - } +@media (min-width:0px) { + .Container-MaxWidth-ExtraSmall { + max-width: 444px; } +} - @media (min-width:600px) { - .Container-MaxWidth-Small { - max-width: 600px; - } +@media (min-width:600px) { + .Container-MaxWidth-Small { + max-width: calc(var(--theme-breakpoints-values-sm) * 1px); } +} - @media (min-width:960px) { - .Container-MaxWidth-Medium { - max-width: 960px; - } +@media (min-width:960px) { + .Container-MaxWidth-Medium { + max-width: calc(var(--theme-breakpoints-values-md) * 1px); } +} - @media (min-width:1280px) { - .Container-MaxWidth-Large { - max-width: 1280px; - } +@media (min-width:1280px) { + .Container-MaxWidth-Large { + max-width: calc(var(--theme-breakpoints-values-lg) * 1px); } +} - @media (min-width:1920px) { - .Container-MaxWidth-ExtraLarge { - max-width: 1920px; - } +@media (min-width:1920px) { + .Container-MaxWidth-ExtraLarge { + max-width: calc(var(--theme-breakpoints-values-xl) * 1px); } - - \ No newline at end of file +} \ No newline at end of file diff --git a/Container/src/Extension/ContainerExtension.cs b/Container/src/Extension/ContainerExtension.cs new file mode 100644 index 0000000..298c324 --- /dev/null +++ b/Container/src/Extension/ContainerExtension.cs @@ -0,0 +1,17 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Container +{ + public static class ContainerExtension + { + public static void TryAddContainerServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Container/src/Provider/ContainerStyleProvider.cs b/Container/src/Provider/ContainerStyleProvider.cs new file mode 100644 index 0000000..b5edd46 --- /dev/null +++ b/Container/src/Provider/ContainerStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Container +{ + public class ContainerStyleProvider : StyleTypeProvider + { + public ContainerStyleProvider() : base(typeof(ContainerStyle)) + { + } + } +} \ No newline at end of file diff --git a/Material/src/Extension/MaterialConfig.cs b/Core/src/Config/MaterialConfig.cs similarity index 95% rename from Material/src/Extension/MaterialConfig.cs rename to Core/src/Config/MaterialConfig.cs index 4a519dc..6c36c6c 100644 --- a/Material/src/Extension/MaterialConfig.cs +++ b/Core/src/Config/MaterialConfig.cs @@ -1,6 +1,6 @@ using Skclusive.Core.Component; -namespace Skclusive.Material.Component +namespace Skclusive.Material.Core { public interface IMaterialConfig : ICoreConfig { diff --git a/Core/src/Core.csproj b/Core/src/Core.csproj index e3ceefa..13f9fc7 100644 --- a/Core/src/Core.csproj +++ b/Core/src/Core.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Core Skclusive.Material.Core Skclusive.Material.Core @@ -17,12 +16,10 @@ - - + diff --git a/Core/src/Core/MaterialContextComponent.cs b/Core/src/Core/MaterialContextComponent.cs index 86d4eae..3bece79 100644 --- a/Core/src/Core/MaterialContextComponent.cs +++ b/Core/src/Core/MaterialContextComponent.cs @@ -23,7 +23,7 @@ public MaterialContextComponent(string selector = ""): base(selector) public bool HasContent => ChildContent != null; - protected IComponentContext Context => new ComponentContextBuilder() + protected virtual IComponentContext Context => new ComponentContextBuilder() .WithClass(Class) .WithStyle(Style) .WithRefBack(ChildRef) diff --git a/Core/src/Core/MaterialLayoutComponent.cs b/Core/src/Core/MaterialLayoutComponent.cs new file mode 100644 index 0000000..f88c052 --- /dev/null +++ b/Core/src/Core/MaterialLayoutComponent.cs @@ -0,0 +1,19 @@ +using Microsoft.AspNetCore.Components; + +namespace Skclusive.Material.Core +{ + public class MaterialLayoutComponent : MaterialComponentBase + { + /// + /// Body of the current component. + /// + [Parameter] + public RenderFragment Body { get; set; } + + public MaterialLayoutComponent(string selector = ""): base(selector) + { + } + + public bool HasBody => Body != null; + } +} \ No newline at end of file diff --git a/Core/src/Core/Portal.cs b/Core/src/Core/Portal.cs deleted file mode 100644 index 39e03e4..0000000 --- a/Core/src/Core/Portal.cs +++ /dev/null @@ -1,88 +0,0 @@ -using System; -using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Rendering; -using Skclusive.Core.Component; -using Skclusive.Script.DomHelpers; - -namespace Skclusive.Material.Core -{ - public class Portal : MaterialContextComponent, IDisposable - { - [Inject] - public DomHelpers DomHelpers { set; get; } - - /// - /// html component tag to be used as container. - /// - [Parameter] - public string Component { get; set; } = "div"; - - /// - /// Reference attached to the target. - /// - [Parameter] - public IReference TargetRef { get; set; } - - /// - /// Reference attached to the target body. - /// - [Parameter] - public IReference TargetBodyRef { get; set; } - - /// - /// Disable the portal behavior. - /// The children stay within it's parent DOM hierarchy. - /// - [Parameter] - public bool DisablePortal { get; set; } = false; - - protected IReference SourceRef { get; set; } = new Reference(); - - protected override void BuildRenderTree(RenderTreeBuilder builder) - { - base.BuildRenderTree(builder); - - if (!DisablePortal) - { - builder.OpenElement(0, Component); - builder.AddAttribute(1, "style", "display: none;"); - builder.AddContent(2, ChildContent.Invoke(Context)); - builder.AddElementReferenceCapture(3, (refx) => - { - SourceRef.Current = refx; - }); - builder.CloseElement(); - } - else - { - builder.AddContent(4, ChildContent.Invoke(Context)); - } - } - - protected override async Task OnAfterRenderAsync() - { - await base.OnAfterRenderAsync(); - - if (!DisablePortal) - { - // await Task.Delay(2000); - - await DomHelpers.MoveContentAsync(SourceRef.Current, TargetRef?.Current, TargetBodyRef?.Current); - } - } - - protected override void Dispose() - { - base.Dispose(); - - if (!DisablePortal) - { - if (ChildRef.Current != null) - { - _ = DomHelpers.RemoveNodeAsync(ChildRef.Current); - } - } - } - } -} \ No newline at end of file diff --git a/Core/src/Core/CoreHelpersExtension.cs b/Core/src/Extension/CoreExtensions.cs similarity index 54% rename from Core/src/Core/CoreHelpersExtension.cs rename to Core/src/Extension/CoreExtensions.cs index 81b2a05..39ad6c4 100644 --- a/Core/src/Core/CoreHelpersExtension.cs +++ b/Core/src/Extension/CoreExtensions.cs @@ -1,14 +1,13 @@ using Microsoft.Extensions.DependencyInjection; -using Skclusive.Script.DomHelpers; using Skclusive.Core.Component; namespace Skclusive.Material.Core { - public static class CoreHelpersExtension + public static class CoreExtensions { - public static void TryAddMaterialCoreServices(this IServiceCollection services, ICoreConfig config) + public static void TryAddMaterialCoreServices(this IServiceCollection services, IMaterialConfig config) { - services.TryAddDomHelpersServices(config); + services.TryAddCoreServices(config); } } } diff --git a/Core/src/Responesive/Responesive.razor b/Core/src/Responsive/Responsive.razor similarity index 98% rename from Core/src/Responesive/Responesive.razor rename to Core/src/Responsive/Responsive.razor index cd11bad..8683825 100644 --- a/Core/src/Responesive/Responesive.razor +++ b/Core/src/Responsive/Responsive.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Core -@inherits ResponsiveComponent +@inherits MaterialComponentBase + +@ChildContent?.Invoke(Context) \ No newline at end of file diff --git a/Responsive/src/Responsive/Responsive.razor.cs b/Responsive/src/Responsive/Responsive.razor.cs new file mode 100644 index 0000000..c514196 --- /dev/null +++ b/Responsive/src/Responsive/Responsive.razor.cs @@ -0,0 +1,179 @@ +using Microsoft.AspNetCore.Components; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using System.Collections.Generic; + +namespace Skclusive.Material.Responsive +{ + public partial class Responsive : MaterialComponentBase + { + public Responsive() : base("Responsive") + { + } + + protected string Prefix => $"{Selector}-{Name}"; + + /// + /// unique name to be used in class names. + /// + [Parameter] + public string Name { set; get; } + + /// + /// If true, screens this size and down will be hidden. + /// + [Parameter] + public string ExtraSmallDown { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string ExtraSmallUp { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string ExtraSmallOnly { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string SmallUp { set; get; } + + /// + /// If true, screens this size and down will be hidden. + /// + [Parameter] + public string SmallDown { set; get; } + + /// + /// If true, screens this size and down will be hidden. + /// + [Parameter] + public string SmallOnly { set; get; } + + /// + /// If true, screens this size and down will be hidden. + /// + [Parameter] + public string MediumDown { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string MediumUp { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string MediumOnly { set; get; } + + /// + /// If true, screens this size and down will be hidden. + /// + [Parameter] + public string LargeDown { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string LargeUp { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string LargeOnly { set; get; } + + /// + /// If true, screens this size and down will be hidden. + /// + [Parameter] + public string ExtraLargeDown { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string ExtraLargeUp { set; get; } + + /// + /// If true, screens this size and up will be hidden. + /// + [Parameter] + public string ExtraLargeOnly { set; get; } + + /// + /// ChildContent of the current component which gets component . + /// + [Parameter] + public RenderFragment ChildContent { set; get; } + + protected IComponentContext Context => new ComponentContextBuilder() + .WithClass(_Class) + .WithStyle(_Style) + .WithRefBack(RootRef) + .WithDisabled(Disabled) + .Build(); + + protected override IEnumerable Classes + { + get + { + foreach (var item in base.Classes) + yield return item; + + if (!string.IsNullOrWhiteSpace(ExtraSmallUp)) + yield return nameof(ExtraSmallUp); + + if (!string.IsNullOrWhiteSpace(ExtraSmallDown)) + yield return nameof(ExtraSmallDown); + + if (!string.IsNullOrWhiteSpace(ExtraSmallOnly)) + yield return nameof(ExtraSmallOnly); + + if (!string.IsNullOrWhiteSpace(SmallUp)) + yield return nameof(SmallUp); + + if (!string.IsNullOrWhiteSpace(SmallDown)) + yield return nameof(SmallDown); + + if (!string.IsNullOrWhiteSpace(SmallOnly)) + yield return nameof(SmallOnly); + + if (!string.IsNullOrWhiteSpace(MediumUp)) + yield return nameof(MediumUp); + + if (!string.IsNullOrWhiteSpace(MediumDown)) + yield return nameof(MediumDown); + + if (!string.IsNullOrWhiteSpace(MediumOnly)) + yield return nameof(MediumOnly); + + if (!string.IsNullOrWhiteSpace(LargeUp)) + yield return nameof(LargeUp); + + if (!string.IsNullOrWhiteSpace(LargeDown)) + yield return nameof(LargeDown); + + if (!string.IsNullOrWhiteSpace(LargeOnly)) + yield return nameof(LargeOnly); + + if (!string.IsNullOrWhiteSpace(ExtraLargeUp)) + yield return nameof(ExtraLargeUp); + + if (!string.IsNullOrWhiteSpace(ExtraLargeDown)) + yield return nameof(ExtraLargeDown); + + if (!string.IsNullOrWhiteSpace(ExtraLargeOnly)) + yield return nameof(ExtraLargeOnly); + } + } + } +} diff --git a/Responsive/src/_Imports.razor b/Responsive/src/_Imports.razor new file mode 100644 index 0000000..6c76534 --- /dev/null +++ b/Responsive/src/_Imports.razor @@ -0,0 +1,3 @@ +@using Microsoft.AspNetCore.Components.Web +@using Skclusive.Core.Component +@using Skclusive.Material.Core \ No newline at end of file diff --git a/Script/src/DetectThemeHelper/DetectThemeHelper.cs b/Script/src/DetectThemeHelper/DetectThemeHelper.cs deleted file mode 100644 index 54b3ad3..0000000 --- a/Script/src/DetectThemeHelper/DetectThemeHelper.cs +++ /dev/null @@ -1,54 +0,0 @@ -using System; -using System.Collections.Generic; -using System.Threading.Tasks; -using Microsoft.JSInterop; -using Skclusive.Core.Component; - -namespace Skclusive.Material.Script -{ - public class DetectThemeHelper - { - public DetectThemeHelper(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private object Id; - - private IJSRuntime JSRuntime { get; } - - public event EventHandler OnChange; - - private static IDictionary THEME_MAPPING = new Dictionary - { - { "Dark", Theme.Dark }, - { "Light", Theme.Light }, - { "None", Theme.None } - }; - - private readonly static EventArgs EVENT_ARGS = new EventArgs(); - - [JSInvokable] - public Task OnChangeAsync(string theme) - { - OnChange?.Invoke(EVENT_ARGS, THEME_MAPPING[theme]); - - return Task.CompletedTask; - } - - public async Task RegisterAsync() - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.registerDetectTheme", DotNetObjectReference.Create(this)); - } - - public async Task UnRegisterAsync() - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.unRegisterDetectTheme", Id); - } - - public void Dispose() - { - _ = UnRegisterAsync(); - } - } -} \ No newline at end of file diff --git a/Script/src/DetectThemeHelper/DetectThemeHelper.js b/Script/src/DetectThemeHelper/DetectThemeHelper.js deleted file mode 100644 index 88025b4..0000000 --- a/Script/src/DetectThemeHelper/DetectThemeHelper.js +++ /dev/null @@ -1,64 +0,0 @@ -// @ts-check - -import { generateId } from "../DomHelpers/DomHelpers"; - -const eventPool = {}; - -const colorSchemes = { - Dark: "(prefers-color-scheme: dark)", - Light: "(prefers-color-scheme: light)", - None: "(prefers-color-scheme: no-preference)" -}; - -export function registerDetectTheme(target) { - const id = generateId(); - - const listener = eventCallback(id); - - const activeMatches = []; - Object.keys(colorSchemes).forEach(schemeName => { - const mq = window.matchMedia(colorSchemes[schemeName]); - mq.addListener(listener); - activeMatches.push(mq); - setTimeout(() => listener(mq)); - }); - - const dispose = () => { - activeMatches.forEach(mq => mq.removeListener(listener)); - activeMatches.length = 0; - }; - - eventPool[id] = { id, target, dispose }; - - return id; -} - -function eventCallback(id) { - return e => { - if (!e || !e.matches) { - return; - } - const record = eventPool[id]; - if (record && record.target) { - const schemeNames = Object.keys(colorSchemes); - for (let i = 0; i < schemeNames.length; i++) { - const schemeName = schemeNames[i]; - if (e.media === colorSchemes[schemeName]) { - record.target.invokeMethodAsync( - "OnChangeAsync", - schemeName - ); - break; - } - } - } - }; -} - -export function unRegisterDetectTheme(id) { - const record = eventPool[id]; - if (record && record.dispose) { - record.dispose(); - } - delete eventPool[id]; -} diff --git a/Script/src/EventDelegator/EventDelegator.cs b/Script/src/EventDelegator/EventDelegator.cs deleted file mode 100644 index cb9551c..0000000 --- a/Script/src/EventDelegator/EventDelegator.cs +++ /dev/null @@ -1,46 +0,0 @@ -using System; -using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class EventDelegator - { - public EventDelegator(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private object Id; - - private IJSRuntime JSRuntime { get; } - - public event EventHandler OnEvent; - - private readonly static EventArgs EVENT_ARGS = new EventArgs(); - - [JSInvokable] - public Task OnEventAsync(string json) - { - OnEvent?.Invoke(EVENT_ARGS, json); - - return Task.CompletedTask; - } - - public async Task RegisterAsync(ElementReference reference, string name, int delay) - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.registerEvent", reference, name, DotNetObjectReference.Create(this), delay); - } - - public async Task UnRegisterAsync() - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.unRegisterEvent", Id); - } - - public void Dispose() - { - _ = UnRegisterAsync(); - } - } -} \ No newline at end of file diff --git a/Script/src/EventDelegator/EventDelegator.js b/Script/src/EventDelegator/EventDelegator.js deleted file mode 100644 index 7e76435..0000000 --- a/Script/src/EventDelegator/EventDelegator.js +++ /dev/null @@ -1,38 +0,0 @@ -// @ts-check - -import { generateId, debounce } from '../DomHelpers/DomHelpers'; - -const eventPool = {}; - -export function registerEvent(node, name, target, delay) { - const id = generateId(); - const source = node instanceof Element ? node : window; - let callback = eventCallback(id); - if (delay) { - callback = debounce(callback, delay); - } - source.addEventListener(name, callback); - - const dispose = () => source.removeEventListener(name, callback); - - eventPool[id] = { id, source, target, dispose }; - - return id; -} - -function eventCallback(id) { - return e => { - const record = eventPool[id]; - if (record && record.target) { - record.target.invokeMethodAsync('OnEventAsync', JSON.stringify(e)); - } - }; -} - -export function unRegisterEvent(id) { - const record = eventPool[id]; - if (record && record.dispose) { - record.dispose(); - } - delete eventPool[id]; -} diff --git a/Script/src/HistoryBackHelper/HistoryBackHelper.cs b/Script/src/HistoryBackHelper/HistoryBackHelper.cs deleted file mode 100644 index a555ad5..0000000 --- a/Script/src/HistoryBackHelper/HistoryBackHelper.cs +++ /dev/null @@ -1,33 +0,0 @@ -using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class HistoryBackHelper - { - public HistoryBackHelper(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private object Id; - - private IJSRuntime JSRuntime { get; } - - public async Task RegisterAsync(ElementReference reference, string name, int delay = 0) - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.registerHistoryBack", reference, name, delay); - } - - public async Task UnRegisterAsync() - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.unRegisterHistoryBack", Id); - } - - public void Dispose() - { - _ = UnRegisterAsync(); - } - } -} \ No newline at end of file diff --git a/Script/src/HistoryBackHelper/HistoryBackHelper.js b/Script/src/HistoryBackHelper/HistoryBackHelper.js deleted file mode 100644 index 415cfad..0000000 --- a/Script/src/HistoryBackHelper/HistoryBackHelper.js +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-check - -import { generateId } from "../DomHelpers/DomHelpers"; - -const eventPool = {}; - -export function registerHistoryBack(node, name, delay) { - const id = generateId(); - let callback = eventCallback(id); - node.addEventListener(name, callback); - - const dispose = () => node.removeEventListener(name, callback); - - eventPool[id] = { id, delay, dispose }; - - return id; -} - -function eventCallback(id) { - return e => { - e.preventDefault(); - e.stopPropagation(); - e.currentTarget.blur(); - const record = eventPool[id]; - if (record) { - if (record.delay) { - setTimeout(() => history.back(), record.delay); - } else { - history.back(); - } - } - }; -} - -export function unRegisterHistoryBack(id) { - const record = eventPool[id]; - if (record && record.dispose) { - record.dispose(); - } - delete eventPool[id]; -} diff --git a/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs b/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs deleted file mode 100644 index 2a747bf..0000000 --- a/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs +++ /dev/null @@ -1,45 +0,0 @@ -using System; -using System.Threading.Tasks; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class MediaQueryMatcher - { - public MediaQueryMatcher(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private object Id; - - private IJSRuntime JSRuntime { get; } - - public event EventHandler OnChange; - - private readonly static EventArgs EVENT_ARGS = new EventArgs(); - - [JSInvokable] - public Task OnChangeAsync(bool match) - { - OnChange?.Invoke(EVENT_ARGS, match); - - return Task.CompletedTask; - } - - public async Task RegisterAsync(string media) - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.registerMediaQuery", media, DotNetObjectReference.Create(this)); - } - - public async Task UnRegisterAsync() - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.unRegisterMediaQuery", Id); - } - - public void Dispose() - { - _ = UnRegisterAsync(); - } - } -} \ No newline at end of file diff --git a/Script/src/MediaQueryMatcher/MediaQueryMatcher.js b/Script/src/MediaQueryMatcher/MediaQueryMatcher.js deleted file mode 100644 index 5c99367..0000000 --- a/Script/src/MediaQueryMatcher/MediaQueryMatcher.js +++ /dev/null @@ -1,45 +0,0 @@ -// @ts-check - -import { generateId } from "../DomHelpers/DomHelpers"; - -const eventPool = {}; - -export function registerMediaQuery(query, target) { - const id = generateId(); - - query = query.replace(/^@media( ?)/m, ''); - - const queryList = window.matchMedia(query); - - const callback = eventCallback(id); - - queryList.addListener(callback); - - const dispose = () => queryList.removeListener(callback); - - eventPool[id] = { id, queryList, target, dispose }; - - setTimeout(callback); - - return id; -} - -function eventCallback(id) { - return e => { - const record = eventPool[id]; - if (record && record.target) { - record.target.invokeMethodAsync( - 'OnChangeAsync', - !!record.queryList.matches - ); - } - }; -} - -export function unRegisterMediaQuery(id) { - const record = eventPool[id]; - if (record && record.dispose) { - record.dispose(); - } - delete eventPool[id]; -} diff --git a/Script/src/MenuListHelper/MenuListHelper.cs b/Script/src/MenuListHelper/MenuListHelper.cs deleted file mode 100644 index dcd0341..0000000 --- a/Script/src/MenuListHelper/MenuListHelper.cs +++ /dev/null @@ -1,34 +0,0 @@ -using System; -using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class MenuListHelper - { - public MenuListHelper(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private object Id; - - private IJSRuntime JSRuntime { get; } - - public async Task RegisterAsync(ElementReference? list, bool disableListWrap) - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.registerMenuList", list, disableListWrap); - } - - public async Task UnRegisterAsync() - { - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.unRegisterMenuList", Id); - } - - public void Dispose() - { - _ = UnRegisterAsync(); - } - } -} \ No newline at end of file diff --git a/Script/src/MenuListHelper/MenuListHelper.js b/Script/src/MenuListHelper/MenuListHelper.js deleted file mode 100644 index 372ff5f..0000000 --- a/Script/src/MenuListHelper/MenuListHelper.js +++ /dev/null @@ -1,191 +0,0 @@ -// @ts-check - -import { - generateId, - ownerDocument, - addClasses, - removeClasses -} from "../DomHelpers/DomHelpers"; - -const eventPool = {}; - -export function registerMenuList(list, disableListWrap) { - const id = generateId(); - - const callback = eventCallback(id); - - list.addEventListener("keydown", callback); - - const dispose = () => list.addEventListener("keydown", callback); - - const textCriteria = { - keys: [], - repeating: true, - previousKeyMatched: true, - lastTime: null - }; - - eventPool[id] = { id, list, disableListWrap, textCriteria, dispose }; - - return id; -} - -function nextItem(list, item, disableListWrap) { - if (list === item) { - return list.firstElementChild; - } - if (item && item.nextElementSibling) { - return item.nextElementSibling; - } - return disableListWrap ? null : list.firstElementChild; -} - -function previousItem(list, item, disableListWrap) { - if (list === item) { - return disableListWrap ? list.firstElementChild : list.lastElementChild; - } - if (item && item.previousElementSibling) { - return item.previousElementSibling; - } - return disableListWrap ? null : list.lastElementChild; -} - -function textCriteriaMatches(nextFocus, textCriteria) { - if (textCriteria === undefined) { - return true; - } - let text = nextFocus.innerText; - if (text === undefined) { - // jsdom doesn't support innerText - text = nextFocus.textContent; - } - if (text === undefined) { - return false; - } - text = text.trim().toLowerCase(); - if (text.length === 0) { - return false; - } - if (textCriteria.repeating) { - return text[0] === textCriteria.keys[0]; - } - return text.indexOf(textCriteria.keys.join("")) === 0; -} - -function doFocus(id, element) { - const record = eventPool[id]; - const { list, lastFocused = list.querySelector(".ListItem-FocusVisible") } = record; - element.focus(); - addClasses(element, ["ListItem-FocusVisible"]); - if (lastFocused) { - removeClasses(lastFocused, ["ListItem-FocusVisible"]); - } - record.lastFocused = element; -} - -function moveFocus( - id, - list, - currentFocus, - disableListWrap, - traversalFunction, - textCriteria -) { - let wrappedOnce = false; - let nextFocus = traversalFunction( - list, - currentFocus, - currentFocus ? disableListWrap : false - ); - - while (nextFocus) { - // Prevent infinite loop. - if (nextFocus === list.firstElementChild) { - if (wrappedOnce) { - return false; - } - wrappedOnce = true; - } - // Move to the next element. - if ( - !nextFocus.hasAttribute("tabindex") || - nextFocus.disabled || - nextFocus.getAttribute("aria-disabled") === "true" || - !textCriteriaMatches(nextFocus, textCriteria) - ) { - nextFocus = traversalFunction(list, nextFocus, disableListWrap); - } else { - // nextFocus.focus(); - doFocus(id, nextFocus); - return true; - } - } - - return false; -} - -function eventCallback(id) { - return function handleKeyDown(event) { - const record = eventPool[id]; - const { list, disableListWrap, textCriteria } = record; - const key = event.key; - /** - * @type {Element} - will always be defined since we are in a keydown handler - * attached to an element. A keydown event is either dispatched to the activeElement - * or document.body or document.documentElement. Only the first case will - * trigger this specific handler. - */ - const currentFocus = ownerDocument(list).activeElement; - - if (key === "ArrowDown") { - event.preventDefault(); - moveFocus(id, list, currentFocus, disableListWrap, nextItem); - } else if (key === "ArrowUp") { - event.preventDefault(); - moveFocus(id, list, currentFocus, disableListWrap, previousItem); - } else if (key === "Home") { - event.preventDefault(); - moveFocus(id, list, null, disableListWrap, nextItem); - } else if (key === "End") { - event.preventDefault(); - moveFocus(id, list, null, disableListWrap, previousItem); - } else if (key.length === 1) { - const criteria = textCriteria; - const lowerKey = key.toLowerCase(); - const currTime = performance.now(); - if (criteria.keys.length > 0) { - // Reset - if (currTime - criteria.lastTime > 500) { - criteria.keys = []; - criteria.repeating = true; - criteria.previousKeyMatched = true; - } else if (criteria.repeating && lowerKey !== criteria.keys[0]) { - criteria.repeating = false; - } - } - criteria.lastTime = currTime; - criteria.keys.push(lowerKey); - const keepFocusOnCurrent = - currentFocus && - !criteria.repeating && - textCriteriaMatches(currentFocus, criteria); - if ( - criteria.previousKeyMatched && - (keepFocusOnCurrent || - moveFocus(id, list, currentFocus, false, nextItem, criteria)) - ) { - event.preventDefault(); - } else { - criteria.previousKeyMatched = false; - } - } - }; -} - -export function unRegisterMenuList(id) { - const record = eventPool[id]; - if (record && record.dispose) { - record.dispose(); - } - delete eventPool[id]; -} diff --git a/Script/src/PopoverHelper/PopoverHelper.cs b/Script/src/PopoverHelper/PopoverHelper.cs deleted file mode 100644 index 5cfdea3..0000000 --- a/Script/src/PopoverHelper/PopoverHelper.cs +++ /dev/null @@ -1,55 +0,0 @@ -using System.Threading.Tasks; -using System.Collections.Generic; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; -using Skclusive.Core.Component; -using Skclusive.Script.DomHelpers; - -namespace Skclusive.Material.Script -{ - public class PopoverHelper - { - public PopoverHelper(IJSRuntime jsruntime, DomHelpers domHelpers) - { - JSRuntime = jsruntime; - - DomHelpers = domHelpers; - } - - private IJSRuntime JSRuntime { get; } - - private DomHelpers DomHelpers { get; } - - public async Task GetContentAnchorOffsetAsync(ElementReference? contentAnchor, ElementReference? element) - { - return await JSRuntime.InvokeAsync("Skclusive.Material.Script.getContentAnchorOffset", contentAnchor, element); - } - - public async Task GetAnchorBoundryAsync(ElementReference? anchorRef, ElementReference? paperRef) - { - return await JSRuntime.InvokeAsync("Skclusive.Material.Script.getAnchorBoundry", anchorRef, paperRef); - } - - public async Task GetOffsetAsync(ElementReference? element) - { - var offset = await DomHelpers.GetElementOffsetAsync(element); - - return new Boundry - { - Width = offset.Width, - - Height = offset.Height - }; - } - - public Task GetWindowOffsetAsync(ElementReference? element) - { - return DomHelpers.GetWindowOffsetAsync(element); - } - - public Task SetPositioningStylesAsync(ElementReference? element, IDictionary styles, bool trigger = true) - { - return DomHelpers.SetStyleAsync(element, styles, trigger); - } - } -} \ No newline at end of file diff --git a/Script/src/RadioGroupHelper/RadioGroupHelper.cs b/Script/src/RadioGroupHelper/RadioGroupHelper.cs deleted file mode 100644 index af4dea7..0000000 --- a/Script/src/RadioGroupHelper/RadioGroupHelper.cs +++ /dev/null @@ -1,24 +0,0 @@ -using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class RadioGroupHelper - { - public RadioGroupHelper(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private IJSRuntime JSRuntime { get; } - - public async Task FocusAsync(ElementReference? nodeRef) - { - if (nodeRef.HasValue) - { - await JSRuntime.InvokeVoidAsync("Skclusive.Material.Script.focusRadioGroup", nodeRef); - } - } - } -} \ No newline at end of file diff --git a/Script/src/Script.csproj b/Script/src/Script.csproj deleted file mode 100644 index 7b4d0db..0000000 --- a/Script/src/Script.csproj +++ /dev/null @@ -1,29 +0,0 @@ - - - - 2.0.1 - $(VersionSuffix) - netstandard2.1 - 3.0 - Skclusive.Material.Script - Skclusive.Material.Script - Skclusive.Material.Script - ScriptHelpers library for Blazor Material-UI - Skclusive - Skclusive - Skclusive - blazor script-helpers - https://github.com/skclusive/Skclusive.Material.Script - https://github.com/skclusive/Skclusive.Material.Script - - - - - - - - - - - - diff --git a/Script/src/ScriptHelpers/ScriptHelpers.cs b/Script/src/ScriptHelpers/ScriptHelpers.cs deleted file mode 100644 index 6f747f7..0000000 --- a/Script/src/ScriptHelpers/ScriptHelpers.cs +++ /dev/null @@ -1,20 +0,0 @@ -using System.Threading.Tasks; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class ScriptHelpers - { - private IJSRuntime JSRuntime { get; } - - public ScriptHelpers(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - public async Task GoBackAsync() - { - await JSRuntime.InvokeVoidAsync("Skclusive.Material.Script.goBack", -1); - } - } -} diff --git a/Script/src/ScriptHelpers/ScriptHelpers.js b/Script/src/ScriptHelpers/ScriptHelpers.js deleted file mode 100644 index 5d09acc..0000000 --- a/Script/src/ScriptHelpers/ScriptHelpers.js +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-check - -import { goBack } from "../DomHelpers/DomHelpers"; -import { registerHistoryBack, unRegisterHistoryBack } from "../HistoryBackHelper/HistoryBackHelper"; -import { getSlideTranslateValue, setSlideTranslateValue } from "../SlideHelper/SlideHelper"; -import { registerEvent, unRegisterEvent } from "../EventDelegator/EventDelegator"; -import { initTrapFocus, disposeTrapFocus } from "../TrapFocusHelper/TrapFocusHelper"; -import { registerMediaQuery, unRegisterMediaQuery } from "../MediaQueryMatcher/MediaQueryMatcher"; -import { getAnchorBoundry, getContentAnchorOffset } from "../PopoverHelper/PopoverHelper"; -import { registerMenuList, unRegisterMenuList } from "../MenuListHelper/MenuListHelper"; -import { registerDetectTheme, unRegisterDetectTheme } from "../DetectThemeHelper/DetectThemeHelper"; -import { focusRadioGroup } from "../RadioGroupHelper/RadioGroupHelper"; -// @ts-ignore -window.Skclusive = { - // @ts-ignore - ...window.Skclusive, - Material: { - // @ts-ignore - ...(window.Skclusive || {}).Material, - Script: { - goBack, - getSlideTranslateValue, - setSlideTranslateValue, - registerEvent, - unRegisterEvent, - initTrapFocus, - disposeTrapFocus, - registerMediaQuery, - unRegisterMediaQuery, - registerHistoryBack, - unRegisterHistoryBack, - getAnchorBoundry, - getContentAnchorOffset, - registerMenuList, - unRegisterMenuList, - registerDetectTheme, - unRegisterDetectTheme, - focusRadioGroup - } - } -}; diff --git a/Script/src/ScriptHelpers/ScriptHelpersExtension.cs b/Script/src/ScriptHelpers/ScriptHelpersExtension.cs deleted file mode 100644 index e4b5dc6..0000000 --- a/Script/src/ScriptHelpers/ScriptHelpersExtension.cs +++ /dev/null @@ -1,35 +0,0 @@ -using Microsoft.Extensions.DependencyInjection; -using Microsoft.Extensions.DependencyInjection.Extensions; -using Skclusive.Core.Component; -using Skclusive.Material.Core; - -namespace Skclusive.Material.Script -{ - public static class ScriptHelpersExtension - { - public static void TryAddMaterialScriptServices(this IServiceCollection services, ICoreConfig config) - { - services.TryAddMaterialCoreServices(config); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - - services.TryAddTransient(); - } - } -} diff --git a/Script/src/ScriptHelpers/ScriptHelpersScript.cs b/Script/src/ScriptHelpers/ScriptHelpersScript.cs deleted file mode 100644 index 5c1af9d..0000000 --- a/Script/src/ScriptHelpers/ScriptHelpersScript.cs +++ /dev/null @@ -1,17 +0,0 @@ -using Skclusive.Core.Component; - -namespace Skclusive.Material.Script -{ - public class ScriptHelpersScript : Scripted - { - public ScriptHelpersScript(): base("MaterialScriptHelpers") - { - } - - protected override string GetScript() - { - return - @"!function(){""use strict"";function e(e,...t){const{DomHelpers:n}=window.Skclusive.Script;return n[e].apply(null,t)}function t(...t){return e(""generateId"",...t)}function n(...t){return e(""ownerDocument"",...t)}const i={};function r(e,t){if(!t)return;const n=t.getBoundingClientRect();let i;if(t.fakeTransform)i=t.fakeTransform;else{const e=window.getComputedStyle(t);i=e.getPropertyValue(""-webkit-transform"")||e.getPropertyValue(""transform"")}let r=0,s=0;if(i&&""none""!==i&&""string""==typeof i){const e=i.split(""("")[1].split("")"")[0].split("","");r=parseInt(e[4],10),s=parseInt(e[5],10)}return""left""===e||""start""===e?`translateX(${window.innerWidth}px) translateX(-${n.left-r}px)`:""right""===e||""end""===e?`translateX(-${n.left+n.width-r}px)`:""up""===e||""top""===e?`translateY(${window.innerHeight}px) translateY(-${n.top-s}px)`:`translateY(-${n.top+n.height-s}px)`}const s={};const o={};const c={};const u={};function a(e,t,n){return e===t?e.firstElementChild:t&&t.nextElementSibling?t.nextElementSibling:n?null:e.firstElementChild}function l(e,t,n){return e===t?n?e.firstElementChild:e.lastElementChild:t&&t.previousElementSibling?t.previousElementSibling:n?null:e.lastElementChild}function d(e,t){if(void 0===t)return!0;let n=e.innerText;return void 0===n&&(n=e.textContent),void 0!==n&&(n=n.trim().toLowerCase(),0!==n.length&&(t.repeating?n[0]===t.keys[0]:0===n.indexOf(t.keys.join(""""))))}function f(t,n){const i=u[t],{list:r,lastFocused:s=r.querySelector("".ListItem-FocusVisible"")}=i;n.focus(),function(...t){e(""addClasses"",...t)}(n,[""ListItem-FocusVisible""]),s&&function(...t){e(""removeClasses"",...t)}(s,[""ListItem-FocusVisible""]),i.lastFocused=n}function p(e,t,n,i,r,s){let o=!1,c=r(t,n,!!n&&i);for(;c;){if(c===t.firstElementChild){if(o)return!1;o=!0}if(c.hasAttribute(""tabindex"")&&!c.disabled&&""true""!==c.getAttribute(""aria-disabled"")&&d(c,s))return f(e,c),!0;c=r(t,c,i)}return!1}const g={},m={Dark:""(prefers-color-scheme: dark)"",Light:""(prefers-color-scheme: light)"",None:""(prefers-color-scheme: no-preference)""};window.Skclusive={...window.Skclusive,Material:{...(window.Skclusive||{}).Material,Script:{goBack:function(...t){return e(""goBack"",...t)},getSlideTranslateValue:r,setSlideTranslateValue:function(t,n){if(!n)return;const i=r(t,n);i&&(n.style.webkitTransform=i,n.style.transform=i),function(...t){e(""repaint"",...t)}(n)},registerEvent:function(n,i,r,o){const c=t(),u=n instanceof Element?n:window;let a=function(e){return t=>{const n=s[e];n&&n.target&&n.target.invokeMethodAsync(""OnEventAsync"",JSON.stringify(t))}}(c);return o&&(a=function(...t){return e(""debounce"",...t)}(a,o)),u.addEventListener(i,a),s[c]={id:c,source:u,target:r,dispose:()=>u.removeEventListener(i,a)},c},unRegisterEvent:function(e){const t=s[e];t&&t.dispose&&t.dispose(),delete s[e]},initTrapFocus:function(e,i,r,s,c){const u=t(),a=document.activeElement,l=n(e);let d=!1;i||!e||e.contains(l.activeElement)||(e.hasAttribute(""tabIndex"")||e.setAttribute(""tabIndex"",-1),e.focus());const f=()=>{s||!c||d?d=!1:e&&!e.contains(l.activeElement)&&e.focus()},p=e=>{!s&&c&&9===e.keyCode&&l.activeElement===rootRef.current&&(d=!0,e.shiftKey?sentinelEnd.current.focus():sentinelStart.current.focus())};l.addEventListener(""focus"",f,!0),l.addEventListener(""keydown"",p,!0);const g=setInterval(()=>{f()},50);return o[u]={id:u,dispose:()=>{clearInterval(g),l.removeEventListener(""focus"",f,!0),l.removeEventListener(""keydown"",p,!0),!r&&a&&a.focus()}},u},disposeTrapFocus:function(e){const t=o[e];t&&t.dispose&&t.dispose(),delete o[e]},registerMediaQuery:function(e,n){const i=t();e=e.replace(/^@media( ?)/m,"""");const r=window.matchMedia(e),s=function(e){return t=>{const n=c[e];n&&n.target&&n.target.invokeMethodAsync(""OnChangeAsync"",!!n.queryList.matches)}}(i);return r.addListener(s),c[i]={id:i,queryList:r,target:n,dispose:()=>r.removeListener(s)},setTimeout(s),i},unRegisterMediaQuery:function(e){const t=c[e];t&&t.dispose&&t.dispose(),delete c[e]},registerHistoryBack:function(e,n,r){const s=t();let o=function(e){return t=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.blur();const n=i[e];n&&(n.delay?setTimeout(()=>history.back(),n.delay):history.back())}}(s);return e.addEventListener(n,o),i[s]={id:s,delay:r,dispose:()=>e.removeEventListener(n,o)},s},unRegisterHistoryBack:function(e){const t=i[e];t&&t.dispose&&t.dispose(),delete i[e]},getAnchorBoundry:function(t,i){return(t instanceof function(...t){return e(""ownerWindow"",...t)}(t).Element?t:n(i).body).getBoundingClientRect()},getContentAnchorOffset:function(t,n){let i=0;if(t&&n.contains(t)){const r=function(...t){return e(""getScrollParent"",...t)}(n,t);i=t.offsetTop+t.clientHeight/2-r||0}return i},registerMenuList:function(e,i){const r=t(),s=function(e){return function(t){const i=u[e],{list:r,disableListWrap:s,textCriteria:o}=i,c=t.key,f=n(r).activeElement;if(""ArrowDown""===c)t.preventDefault(),p(e,r,f,s,a);else if(""ArrowUp""===c)t.preventDefault(),p(e,r,f,s,l);else if(""Home""===c)t.preventDefault(),p(e,r,null,s,a);else if(""End""===c)t.preventDefault(),p(e,r,null,s,l);else if(1===c.length){const n=o,i=c.toLowerCase(),s=performance.now();n.keys.length>0&&(s-n.lastTime>500?(n.keys=[],n.repeating=!0,n.previousKeyMatched=!0):n.repeating&&i!==n.keys[0]&&(n.repeating=!1)),n.lastTime=s,n.keys.push(i);const u=f&&!n.repeating&&d(f,n);n.previousKeyMatched&&(u||p(e,r,f,!1,a,n))?t.preventDefault():n.previousKeyMatched=!1}}}(r);return e.addEventListener(""keydown"",s),u[r]={id:r,list:e,disableListWrap:i,textCriteria:{keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null},dispose:()=>e.addEventListener(""keydown"",s)},r},unRegisterMenuList:function(e){const t=u[e];t&&t.dispose&&t.dispose(),delete u[e]},registerDetectTheme:function(e){const n=t(),i=function(e){return t=>{if(!t||!t.matches)return;const n=g[e];if(n&&n.target){const e=Object.keys(m);for(let i=0;i{const t=window.matchMedia(m[e]);t.addListener(i),r.push(t),setTimeout(()=>i(t))}),g[n]={id:n,target:e,dispose:()=>{r.forEach(e=>e.removeListener(i)),r.length=0}},n},unRegisterDetectTheme:function(e){const t=g[e];t&&t.dispose&&t.dispose(),delete g[e]},focusRadioGroup:function(e){let t=e.querySelector(""input:not(:disabled):checked"");t||(t=e.querySelector(""input:not(:disabled)"")),t&&t.focus()}}}}}();"; - } - } -} diff --git a/Script/src/TrapFocusHelper/TrapFocusHelper.cs b/Script/src/TrapFocusHelper/TrapFocusHelper.cs deleted file mode 100644 index 4f5630d..0000000 --- a/Script/src/TrapFocusHelper/TrapFocusHelper.cs +++ /dev/null @@ -1,39 +0,0 @@ -using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace Skclusive.Material.Script -{ - public class TrapFocusHelper - { - public TrapFocusHelper(IJSRuntime jsruntime) - { - JSRuntime = jsruntime; - } - - private object Id; - - private IJSRuntime JSRuntime { get; } - - public async Task InitAsync(ElementReference? reference, bool disableAutoFocus, bool disableRestoreFocus, bool disableEnforceFocus, bool isEnabled) - { - if (!reference.HasValue) return; - - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.initTrapFocus", reference, disableAutoFocus, disableRestoreFocus, disableEnforceFocus, isEnabled); - } - - public async Task DisposeAsync() - { - if (Id == null) return; - - Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.disposeTrapFocus", Id); - - Id = null; - } - - public void Dispose() - { - _ = DisposeAsync(); - } - } -} \ No newline at end of file diff --git a/Script/src/TrapFocusHelper/TrapFocusHelper.js b/Script/src/TrapFocusHelper/TrapFocusHelper.js deleted file mode 100644 index 5cb9fc2..0000000 --- a/Script/src/TrapFocusHelper/TrapFocusHelper.js +++ /dev/null @@ -1,96 +0,0 @@ -// @ts-check - -import { generateId, ownerDocument } from '../DomHelpers/DomHelpers'; - -const focusPool = {}; - -export function initTrapFocus( - node, - disableAutoFocus, - disableRestoreFocus, - disableEnforceFocus, - isEnabled -) { - const id = generateId(); - const lastActiveElement = document.activeElement; - const doc = ownerDocument(node); - let ignoreNextEnforceFocus = false; - // We might render an empty child. - if (!disableAutoFocus && node && !node.contains(doc.activeElement)) { - if (!node.hasAttribute('tabIndex')) { - node.setAttribute('tabIndex', -1); - } - node.focus(); - } - - const contain = () => { - if (disableEnforceFocus || !isEnabled || ignoreNextEnforceFocus) { - ignoreNextEnforceFocus = false; - return; - } - - if (node && !node.contains(doc.activeElement)) { - // @ts-ignore - node.focus(); - } - }; - - const loopFocus = event => { - // 9 = Tab - if (disableEnforceFocus || !isEnabled || event.keyCode !== 9) { - return; - } - - // Make sure the next tab starts from the right place. - // @ts-ignore - if (doc.activeElement === rootRef.current) { - // We need to ignore the next contain as - // it will try to move the focus back to the rootRef element. - // @ts-ignore - ignoreNextEnforceFocus = true; - if (event.shiftKey) { - // @ts-ignore - sentinelEnd.current.focus(); - } else { - // @ts-ignore - sentinelStart.current.focus(); - } - } - }; - - doc.addEventListener('focus', contain, true); - doc.addEventListener('keydown', loopFocus, true); - - // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area - // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561. - // - // The whatwg spec defines how the browser should behave but does not explicitly mention any events: - // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule. - const interval = setInterval(() => { - contain(); - }, 50); - - const dispose = () => { - clearInterval(interval); - - doc.removeEventListener('focus', contain, true); - doc.removeEventListener('keydown', loopFocus, true); - - if (!disableRestoreFocus && lastActiveElement) { - // @ts-ignore - lastActiveElement.focus(); - } - }; - - focusPool[id] = { id, dispose }; - - return id; -} - -export function disposeTrapFocus(id) { - const record = focusPool[id]; - if (record && record.dispose) { - record.dispose(); - } - delete focusPool[id]; -} diff --git a/Script/src/package-lock.json b/Script/src/package-lock.json deleted file mode 100644 index 519fecb..0000000 --- a/Script/src/package-lock.json +++ /dev/null @@ -1,274 +0,0 @@ -{ - "name": "skclusive-material-script", - "version": "1.0.0", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "@babel/code-frame": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", - "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", - "dev": true, - "requires": { - "@babel/highlight": "^7.0.0" - } - }, - "@babel/highlight": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz", - "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, - "@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", - "dev": true - }, - "@types/node": { - "version": "12.12.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.12.tgz", - "integrity": "sha512-MGuvYJrPU0HUwqF7LqvIj50RZUX23Z+m583KBygKYUZLlZ88n6w28XRNJRJgsHukLEnLz6w6SvxZoLgbr5wLqQ==", - "dev": true - }, - "@types/resolve": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", - "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", - "dev": true, - "requires": { - "@types/node": "*" - } - }, - "acorn": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz", - "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==", - "dev": true - }, - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "requires": { - "color-convert": "^1.9.0" - } - }, - "buffer-from": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", - "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", - "dev": true - }, - "builtin-modules": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", - "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", - "dev": true - }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true - }, - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true - }, - "estree-walker": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", - "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", - "dev": true - }, - "esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "dev": true - }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "is-module": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", - "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=", - "dev": true - }, - "jest-worker": { - "version": "24.9.0", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz", - "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==", - "dev": true, - "requires": { - "merge-stream": "^2.0.0", - "supports-color": "^6.1.0" - }, - "dependencies": { - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - }, - "merge-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", - "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", - "dev": true - }, - "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true - }, - "resolve": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.2.tgz", - "integrity": "sha512-cAVTI2VLHWYsGOirfeYVVQ7ZDejtQ9fp4YhYckWDEkFfqbVjaT11iM8k6xSAfGFMM+gDpZjMnFssPu8we+mqFw==", - "dev": true, - "requires": { - "path-parse": "^1.0.6" - } - }, - "rollup": { - "version": "1.27.5", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.5.tgz", - "integrity": "sha512-8rfVdzuTg2kt8ObD9LNJpEwUN7B6lsl3sHc5fddtgICpLjpYeSf4m2+RftBzcCaBTMi1iYX3Ez8zFT4Gj2nJjg==", - "dev": true, - "requires": { - "@types/estree": "*", - "@types/node": "*", - "acorn": "^7.1.0" - } - }, - "rollup-plugin-node-resolve": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz", - "integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==", - "dev": true, - "requires": { - "@types/resolve": "0.0.8", - "builtin-modules": "^3.1.0", - "is-module": "^1.0.0", - "resolve": "^1.11.1", - "rollup-pluginutils": "^2.8.1" - } - }, - "rollup-plugin-terser": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.1.3.tgz", - "integrity": "sha512-FuFuXE5QUJ7snyxHLPp/0LFXJhdomKlIx/aK7Tg88Yubsx/UU/lmInoJafXJ4jwVVNcORJ1wRUC5T9cy5yk0wA==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "jest-worker": "^24.6.0", - "rollup-pluginutils": "^2.8.1", - "serialize-javascript": "^2.1.2", - "terser": "^4.1.0" - } - }, - "rollup-pluginutils": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", - "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", - "dev": true, - "requires": { - "estree-walker": "^0.6.1" - } - }, - "serialize-javascript": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", - "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==", - "dev": true - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "source-map-support": { - "version": "0.5.16", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz", - "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==", - "dev": true, - "requires": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - }, - "terser": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/terser/-/terser-4.4.3.tgz", - "integrity": "sha512-0ikKraVtRDKGzHrzkCv5rUNDzqlhmhowOBqC0XqUHFpW+vJ45+20/IFBcebwKfiS2Z9fJin6Eo+F1zLZsxi8RA==", - "dev": true, - "requires": { - "commander": "^2.20.0", - "source-map": "~0.6.1", - "source-map-support": "~0.5.12" - } - } - } -} diff --git a/Script/src/package.json b/Script/src/package.json deleted file mode 100644 index 65889a6..0000000 --- a/Script/src/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "skclusive-material-script", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "build": "rollup -c rollup.config.js" - }, - "author": "", - "license": "ISC", - "dependencies": {}, - "devDependencies": { - "rollup": "^1.26.3", - "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-terser": "5.1.3" - } -} diff --git a/Script/src/rollup.config.js b/Script/src/rollup.config.js deleted file mode 100644 index 1eaeeb1..0000000 --- a/Script/src/rollup.config.js +++ /dev/null @@ -1,12 +0,0 @@ -import resolve from "rollup-plugin-node-resolve"; -import { terser } from "rollup-plugin-terser"; - -process.env.INCLUDE_DEPS === "true"; -module.exports = { - input: "ScriptHelpers/ScriptHelpers.js", - output: { - file: "artifacts/ScriptHelpers.js", - format: "iife" - }, - plugins: [resolve(), terser()] -}; diff --git a/Selection/src/Checkbox/Checkbox.razor b/Selection/src/Checkbox/Checkbox.razor index ecfaeac..c497ee1 100644 --- a/Selection/src/Checkbox/Checkbox.razor +++ b/Selection/src/Checkbox/Checkbox.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Selection -@inherits CheckboxComponent +@inherits SelectionConfig +.Checkbox-Root { + color: var(--theme-palette-text-secondary); +} - .Checkbox-Root { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } +.Checkbox-Color-Primary.Checkbox-Checked { + color: var(--theme-palette-primary-main); +} - .Checkbox-Color-Primary.Checkbox-Checked { - color: var(--theme-palette-primary-main, #1976d2); - } +.Checkbox-Color-Primary.Checkbox-Disabled { + color: var(--theme-palette-action-disabled); +} - .Checkbox-Color-Primary.Checkbox-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Checkbox-Color-Primary.Checkbox-Checked:hover { + background-color: var(--theme-palette-primary-hover); +} +@media (hover: none) { .Checkbox-Color-Primary.Checkbox-Checked:hover { - background-color: var(--theme-palette-primary-main-hover, rgba(25, 118, 210, 0.08)); + background-color: transparent; } +} - @media (hover: none) { - .Checkbox-Color-Primary.Checkbox-Checked:hover { - background-color: transparent; - } - } +.Checkbox-Color-Secondary.Checkbox-Checked { + color: var(--theme-palette-secondary-main); +} - .Checkbox-Color-Secondary.Checkbox-Checked { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Checkbox-Color-Secondary.Checkbox-Disabled { + color: var(--theme-palette-action-disabled); +} - .Checkbox-Color-Secondary.Checkbox-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Checkbox-Color-Secondary.Checkbox-Checked:hover { + background-color: var(--theme-palette-secondary-hover); +} +@media (hover: none) { .Checkbox-Color-Secondary.Checkbox-Checked:hover { - background-color: var(--theme-palette-secondary-main-hover, rgba(220, 0, 78, 0.08)); - } - - @media (hover: none) { - .Checkbox-Color-Secondary.Checkbox-Checked:hover { - background-color: transparent; - } + background-color: transparent; } - - \ No newline at end of file +} \ No newline at end of file diff --git a/Selection/src/Extension/SelectionExtension.cs b/Selection/src/Extension/SelectionExtension.cs new file mode 100644 index 0000000..bc59e08 --- /dev/null +++ b/Selection/src/Extension/SelectionExtension.cs @@ -0,0 +1,31 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Icon; +using Skclusive.Material.Button; +using Skclusive.Material.Form; +using Skclusive.Material.Theme; +using Microsoft.Extensions.DependencyInjection.Extensions; + +namespace Skclusive.Material.Selection +{ + public static class SelectionExtension + { + public static void TryAddSelectionServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddIconServices(config); + + services.TryAddFormServices(config); + + services.TryAddButtonServices(config); + + services.TryAddTransient(); + + services.TryAddStyleTypeProvider(); + + services.TryAddScriptTypeProvider(); + + services.TryAddStyleProducer(); + } + } +} diff --git a/Selection/src/Producer/SelectionStyleProducer.cs b/Selection/src/Producer/SelectionStyleProducer.cs new file mode 100644 index 0000000..cdd0cee --- /dev/null +++ b/Selection/src/Producer/SelectionStyleProducer.cs @@ -0,0 +1,24 @@ +using System.Collections.Generic; +using System.Globalization; +using Skclusive.Core.Component; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Selection +{ + public class SelectionStyleProducer : IStyleProducer + { + public IDictionary Variables(ThemeValue theme) + { + var isDark = theme.IsDark(); + + var palette = theme.Palette; + + return new Dictionary + { + { "--theme-component-switch-color", (isDark ? palette.Grey.X400 : palette.Grey.X50).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-switch-disabled-color", (isDark ? palette.Grey.X800 : palette.Grey.X400).ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-switch-disabled-opacity", (isDark ? 0.1 : 0.12).ToString(CultureInfo.InvariantCulture) }, + }; + } + } +} \ No newline at end of file diff --git a/Selection/src/Provider/SelectionScriptProvider.cs b/Selection/src/Provider/SelectionScriptProvider.cs new file mode 100644 index 0000000..6aa6fa6 --- /dev/null +++ b/Selection/src/Provider/SelectionScriptProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Selection +{ + public class SelectionScriptProvider : ScriptTypeProvider + { + public SelectionScriptProvider() : base(typeof(SelectionScript)) + { + } + } +} \ No newline at end of file diff --git a/Selection/src/Provider/SelectionStyleProvider.cs b/Selection/src/Provider/SelectionStyleProvider.cs new file mode 100644 index 0000000..626b1e5 --- /dev/null +++ b/Selection/src/Provider/SelectionStyleProvider.cs @@ -0,0 +1,17 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Selection +{ + public class SelectionStyleProvider : StyleTypeProvider + { + public SelectionStyleProvider() : base + ( + typeof(SwitchBaseStyle), + typeof(SwitchStyle), + typeof(CheckboxStyle), + typeof(RadioStyle) + ) + { + } + } +} \ No newline at end of file diff --git a/Selection/src/Radio/Radio.razor b/Selection/src/Radio/Radio.razor index dd7df4b..b6ae937 100644 --- a/Selection/src/Radio/Radio.razor +++ b/Selection/src/Radio/Radio.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Selection -@inherits RadioComponent +@inherits SelectionConfig +.Radio-Root { + color: var(--theme-palette-text-secondary); +} - .Radio-Root { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } +.Radio-Color-Primary.Radio-Checked { + color: var(--theme-palette-primary-main); +} - .Radio-Color-Primary.Radio-Checked { - color: var(--theme-palette-primary-main, #1976d2); - } +.Radio-Color-Primary.Radio-Disabled { + color: var(--theme-palette-action-disabled); +} - .Radio-Color-Primary.Radio-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Radio-Color-Primary.Radio-Checked:hover { + background-color: var(--theme-palette-primary-hover); +} +@media (hover: none) { .Radio-Color-Primary.Radio-Checked:hover { - background-color: var(--theme-palette-primary-main-hover, rgba(25, 118, 210, 0.08)); + background-color: transparent; } +} - @media (hover: none) { - .Radio-Color-Primary.Radio-Checked:hover { - background-color: transparent; - } - } +.Radio-Color-Secondary.Radio-Checked { + color: var(--theme-palette-secondary-main); +} - .Radio-Color-Secondary.Radio-Checked { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Radio-Color-Secondary.Radio-Disabled { + color: var(--theme-palette-action-disabled); +} - .Radio-Color-Secondary.Radio-Disabled { - color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); - } +.Radio-Color-Secondary.Radio-Checked:hover { + background-color: var(--theme-palette-secondary-hover); +} +@media (hover: none) { .Radio-Color-Secondary.Radio-Checked:hover { - background-color: var(--theme-palette-secondary-main-hover, rgba(220, 0, 78, 0.08)); - } - - @media (hover: none) { - .Radio-Color-Secondary.Radio-Checked:hover { - background-color: transparent; - } + background-color: transparent; } - - \ No newline at end of file +} \ No newline at end of file diff --git a/Selection/src/RadioGroup/RadioGroup.razor b/Selection/src/RadioGroup/RadioGroup.razor index 5489bce..0571221 100644 --- a/Selection/src/RadioGroup/RadioGroup.razor +++ b/Selection/src/RadioGroup/RadioGroup.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Selection -@inherits RadioGroupComponent +@inherits MaterialComponent - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Selection Skclusive.Material.Selection Skclusive.Material.Selection @@ -17,9 +16,18 @@ - - - + + + + + + + + + + $(DefaultItemExcludes);package.json;package-lock.json;node_modules\**\* + + diff --git a/Selection/src/SelectionStyles/SelectionStyles.razor b/Selection/src/SelectionStyles/SelectionStyles.razor deleted file mode 100644 index 66c1fd1..0000000 --- a/Selection/src/SelectionStyles/SelectionStyles.razor +++ /dev/null @@ -1,7 +0,0 @@ -@namespace Skclusive.Material.Selection -@inherits StaticComponentBase - - - - - \ No newline at end of file diff --git a/Selection/src/Switch/Switch.razor b/Selection/src/Switch/Switch.razor index 7cdc472..9059ce9 100644 --- a/Selection/src/Switch/Switch.razor +++ b/Selection/src/Switch/Switch.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Selection -@inherits SwitchComponent +@inherits SelectionConfig { diff --git a/Selection/src/Switch/SwitchStyle.razor b/Selection/src/Switch/SwitchStyle.razor index cc6f001..959886c 100644 --- a/Selection/src/Switch/SwitchStyle.razor +++ b/Selection/src/Switch/SwitchStyle.razor @@ -1,152 +1,147 @@ @namespace Skclusive.Material.Selection @inherits StyleComponentBase - - - .Switch-Root { - width: 58px; - height: 38px; - display: inline-flex; - padding: 12px; - z-index: 0; - overflow: hidden; - position: relative; - box-sizing: border-box; - flex-shrink: 0; - vertical-align: middle; - } - - .Switch-Edge-Start { - margin-left: -8px; - } - - .Switch-Edge-End { - margin-right: -8px; - } - - .Switch-SwitchBase { - top: 0; - left: 0; - color: var(--theme-palette-switch-color, #fafafa); - z-index: 1; - position: absolute; - transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } - - .Switch-SwitchBase.Switch-Checked { - transform: translateX(50%); - } - - .Switch-SwitchBase.Switch-Disabled { - color: var(--theme-palette-switch-disabled-color, #bdbdbd); - } - - .Switch-SwitchBase.Switch-Checked + - .Switch-Track { - opacity: 0.5; - } - - .Switch-SwitchBase.Switch-Disabled + - .Switch-Track { - opacity: var(--theme-palette-switch-disabled-opacity, 0.12); - } - - .Switch-Color-Primary.Switch-Checked { - color: var(--theme-palette-primary-main, #1976d2); - } - - .Switch-Color-Primary.Switch-Disabled { - color: var(--theme-palette-switch-disabled-color, #bdbdbd); - } - - .Switch-Color-Primary.Switch-Checked + - .Switch-Track { - background-color: var(--theme-palette-primary-main, #1976d2); - } - - .Switch-Color-Primary.Switch-Disabled + - .Switch-Track { - background-color: var(--theme-palette-common-background, #000); - } - +.Switch-Root { + width: 58px; + height: 38px; + display: inline-flex; + padding: 12px; + z-index: 0; + overflow: hidden; + position: relative; + box-sizing: border-box; + flex-shrink: 0; + vertical-align: middle; +} + +.Switch-Edge-Start { + margin-left: -8px; +} + +.Switch-Edge-End { + margin-right: -8px; +} + +.Switch-SwitchBase { + top: 0; + left: 0; + color: var(--theme-component-switch-color); + z-index: 1; + position: absolute; + transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.Switch-SwitchBase.Switch-Checked { + transform: translateX(50%); +} + +.Switch-SwitchBase.Switch-Disabled { + color: var(--theme-component-switch-disabled-color); +} + +.Switch-SwitchBase.Switch-Checked + +.Switch-Track { + opacity: 0.5; +} + +.Switch-SwitchBase.Switch-Disabled + +.Switch-Track { + opacity: var(--theme-component-switch-disabled-opacity, 0.12); +} + +.Switch-Color-Primary.Switch-Checked { + color: var(--theme-palette-primary-main); +} + +.Switch-Color-Primary.Switch-Disabled { + color: var(--theme-component-switch-disabled-color); +} + +.Switch-Color-Primary.Switch-Checked + +.Switch-Track { + background-color: var(--theme-palette-primary-main); +} + +.Switch-Color-Primary.Switch-Disabled + +.Switch-Track { + background-color: var(--theme-palette-common-background); +} + +.Switch-Color-Primary.Switch-Checked:hover { + background-color: var(--theme-palette-primary-hover); +} + +@media (hover: none) { .Switch-Color-Primary.Switch-Checked:hover { - background-color: var(--theme-palette-primary-main-hover: rgba(25, 118, 210, 0.08)); + background-color: transparent; } +} - @media (hover: none) { - .Switch-Color-Primary.Switch-Checked:hover { - background-color: transparent; - } - } +.Switch-Color-Secondary.Switch-Checked { + color: var(--theme-palette-secondary-main); +} - .Switch-Color-Secondary.Switch-Checked { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Switch-Color-Secondary.Switch-Disabled { + color: var(--theme-component-switch-disabled-color); +} - .Switch-Color-Secondary.Switch-Disabled { - color: var(--theme-palette-switch-disabled-color, #bdbdbd); - } +.Switch-Color-Secondary.Switch-Checked + +.Switch-Track { + background-color: var(--theme-palette-secondary-main); +} - .Switch-Color-Secondary.Switch-Checked + - .Switch-Track { - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } +.Switch-Color-Secondary.Switch-Disabled + +.Switch-Track { + background-color: var(--theme-palette-common-background); +} - .Switch-Color-Secondary.Switch-Disabled + - .Switch-Track { - background-color: var(--theme-palette-common-background, #000); - } +.Switch-Color-Secondary.Switch-Checked:hover { + background-color: var(--theme-palette-secondary-hover); +} +@media (hover: none) { .Switch-Color-Secondary.Switch-Checked:hover { - background-color: rgba(220, 0, 78, 0.08); - } - - @media (hover: none) { - .Switch-Color-Secondary.Switch-Checked:hover { - background-color: transparent; - } - } - - .Switch-Size-Small { - width: 40px; - height: 24px; - padding: 7px; - } - - .Switch-Size-Small - .Switch-Thumb { - width: 16px; - height: 16px; - } - - .Switch-Size-Small - .Switch-SwitchBase { - padding: 4px; - } - - .Switch-Input { - left: -100%; - width: 300%; - } - - .Switch-Thumb { - width: 20px; - height: 20px; - box-shadow: var(--theme-shadow1, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)); - border-radius: 50%; - background-color: currentColor; - } - - .Switch-Track { - width: 100%; - height: 100%; - opacity: var(--theme-custom-palette-opacity, 0.38); - z-index: -1; - transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - border-radius: 7px; - background-color: var(--theme-custom-palette-common-alternate, #000); - } - - \ No newline at end of file + background-color: transparent; + } +} + +.Switch-Size-Small { + width: 40px; + height: 24px; + padding: 7px; +} + +.Switch-Size-Small +.Switch-Thumb { + width: 16px; + height: 16px; +} + +.Switch-Size-Small +.Switch-SwitchBase { + padding: 4px; +} + +.Switch-Input { + left: -100%; + width: 300%; +} + +.Switch-Thumb { + width: 20px; + height: 20px; + box-shadow: var(--theme-shadow1, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)); + border-radius: 50%; + background-color: currentColor; +} + +.Switch-Track { + width: 100%; + height: 100%; + opacity: var(--theme-custom-palette-opacity); + z-index: -1; + transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + border-radius: 7px; + background-color: var(--theme-custom-palette-common-alternate, #000); +} \ No newline at end of file diff --git a/Selection/src/SwitchBase/SwitchBase.razor b/Selection/src/SwitchBase/SwitchBase.razor index d61bcfe..89475be 100644 --- a/Selection/src/SwitchBase/SwitchBase.razor +++ b/Selection/src/SwitchBase/SwitchBase.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Selection -@inherits SwitchBaseComponent +@inherits SelectionConfig +.SwitchBase-Root { + padding: 9px; +} - .SwitchBase-Root { - padding: 9px; - } - - .SwitchBase-Input { - top: 0; - left: 0; - width: 100%; - cursor: inherit; - height: 100%; - margin: 0; - opacity: 0; - padding: 0; - z-index: 1; - position: absolute; - } - - \ No newline at end of file +.SwitchBase-Input { + top: 0; + left: 0; + width: 100%; + cursor: inherit; + height: 100%; + margin: 0; + opacity: 0; + padding: 0; + z-index: 1; + position: absolute; +} \ No newline at end of file diff --git a/Selection/src/package-lock.json b/Selection/src/package-lock.json new file mode 100644 index 0000000..81d21b1 --- /dev/null +++ b/Selection/src/package-lock.json @@ -0,0 +1,649 @@ +{ + "name": "skclusive-material-selection", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/core": { + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.1.tgz", + "integrity": "sha512-XqF7F6FWQdKGGWAzGELL+aCO1p+lRY5Tj5/tbT3St1G8NaH70jhhDIKknIZaDans0OQBG5wRAldROLHSt44BgQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.11.0", + "@babel/helper-module-transforms": "^7.11.0", + "@babel/helpers": "^7.10.4", + "@babel/parser": "^7.11.1", + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.11.0", + "@babel/types": "^7.11.0", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.1", + "json5": "^2.1.2", + "lodash": "^4.17.19", + "resolve": "^1.3.2", + "semver": "^5.4.1", + "source-map": "^0.5.0" + } + }, + "@babel/generator": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz", + "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-create-class-features-plugin": { + "version": "7.10.5", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz", + "integrity": "sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==", + "dev": true, + "requires": { + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-member-expression-to-functions": "^7.10.5", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/helper-plugin-utils": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4" + } + }, + "@babel/helper-function-name": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz", + "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz", + "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz", + "integrity": "sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0" + } + }, + "@babel/helper-module-imports": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz", + "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-module-transforms": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz", + "integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-simple-access": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/template": "^7.10.4", + "@babel/types": "^7.11.0", + "lodash": "^4.17.19" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz", + "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + }, + "@babel/helper-replace-supers": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz", + "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.10.4", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-simple-access": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz", + "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==", + "dev": true, + "requires": { + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz", + "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, + "@babel/helpers": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz", + "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==", + "dev": true, + "requires": { + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.11.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz", + "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==", + "dev": true + }, + "@babel/plugin-proposal-class-properties": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz", + "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.10.4", + "@babel/helper-plugin-utils": "^7.10.4" + } + }, + "@babel/template": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", + "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/traverse": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz", + "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.11.0", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/parser": "^7.11.0", + "@babel/types": "^7.11.0", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.19" + } + }, + "@babel/types": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz", + "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.19", + "to-fast-properties": "^2.0.0" + } + }, + "@types/estree": { + "version": "0.0.45", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz", + "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==", + "dev": true + }, + "@types/node": { + "version": "12.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.12.tgz", + "integrity": "sha512-MGuvYJrPU0HUwqF7LqvIj50RZUX23Z+m583KBygKYUZLlZ88n6w28XRNJRJgsHukLEnLz6w6SvxZoLgbr5wLqQ==", + "dev": true + }, + "@types/resolve": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", + "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", + "dev": true + }, + "builtin-modules": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", + "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", + "dev": true + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "convert-source-map": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", + "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.1" + } + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "estree-walker": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", + "dev": true + }, + "fsevents": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", + "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", + "dev": true, + "optional": true + }, + "gensync": { + "version": "1.0.0-beta.1", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", + "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==", + "dev": true + }, + "globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "is-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", + "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=", + "dev": true + }, + "is-reference": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", + "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", + "dev": true, + "requires": { + "@types/estree": "*" + } + }, + "jest-worker": { + "version": "26.3.0", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz", + "integrity": "sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==", + "dev": true, + "requires": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^7.0.0" + }, + "dependencies": { + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true + }, + "json5": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", + "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "lodash": { + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", + "dev": true + }, + "magic-string": { + "version": "0.25.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", + "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.4" + } + }, + "merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "dev": true + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "path-parse": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", + "dev": true + }, + "randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "requires": { + "safe-buffer": "^5.1.0" + } + }, + "resolve": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.2.tgz", + "integrity": "sha512-cAVTI2VLHWYsGOirfeYVVQ7ZDejtQ9fp4YhYckWDEkFfqbVjaT11iM8k6xSAfGFMM+gDpZjMnFssPu8we+mqFw==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + }, + "rollup": { + "version": "2.23.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.23.1.tgz", + "integrity": "sha512-Heyl885+lyN/giQwxA8AYT2GY3U+gOlTqVLrMQYno8Z1X9lAOpfXPiKiZCyPc25e9BLJM3Zlh957dpTlO4pa8A==", + "dev": true, + "requires": { + "fsevents": "~2.1.2" + } + }, + "rollup-plugin-babel": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz", + "integrity": "sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "rollup-pluginutils": "^2.8.1" + } + }, + "rollup-plugin-commonjs": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz", + "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==", + "dev": true, + "requires": { + "estree-walker": "^0.6.1", + "is-reference": "^1.1.2", + "magic-string": "^0.25.2", + "resolve": "^1.11.0", + "rollup-pluginutils": "^2.8.1" + } + }, + "rollup-plugin-node-resolve": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz", + "integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==", + "dev": true, + "requires": { + "@types/resolve": "0.0.8", + "builtin-modules": "^3.1.0", + "is-module": "^1.0.0", + "resolve": "^1.11.1", + "rollup-pluginutils": "^2.8.1" + } + }, + "rollup-plugin-terser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.0.tgz", + "integrity": "sha512-p/N3lLiFusCjYTLfVkoaiRTOGr5AESEaljMPH12MhOtoMkmTBhIAfuadrcWy4am1U0vU4WTxO9fi0K09O4CboQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "jest-worker": "^26.2.1", + "serialize-javascript": "^4.0.0", + "terser": "^5.0.0" + } + }, + "rollup-pluginutils": { + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", + "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", + "dev": true, + "requires": { + "estree-walker": "^0.6.1" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "source-map-support": { + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", + "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "terser": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.1.0.tgz", + "integrity": "sha512-pwC1Jbzahz1ZPU87NQ8B3g5pKbhyJSiHih4gLH6WZiPU8mmS1IlGbB0A2Nuvkj/LCNsgIKctg6GkYwWCeTvXZQ==", + "dev": true, + "requires": { + "commander": "^2.20.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true + } + } +} diff --git a/Selection/src/package.json b/Selection/src/package.json new file mode 100644 index 0000000..2a83bde --- /dev/null +++ b/Selection/src/package.json @@ -0,0 +1,22 @@ +{ + "name": "skclusive-material-selection", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "rollup -c rollup.config.js" + }, + "author": "", + "license": "ISC", + "dependencies": {}, + "devDependencies": { + "@babel/core": "7.11.1", + "@babel/plugin-proposal-class-properties": "7.10.4", + "rollup": "2.23.1", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-commonjs": "10.1.0", + "rollup-plugin-babel": "4.4.0", + "rollup-plugin-terser": "7.0.0" + } +} diff --git a/Selection/src/rollup.config.js b/Selection/src/rollup.config.js new file mode 100644 index 0000000..e8bd3b0 --- /dev/null +++ b/Selection/src/rollup.config.js @@ -0,0 +1,24 @@ +import resolve from "rollup-plugin-node-resolve"; +import commonjs from "rollup-plugin-commonjs"; +import babel from "rollup-plugin-babel"; +import { terser } from "rollup-plugin-terser"; + +process.env.INCLUDE_DEPS === "true"; + +module.exports = { + input: "Script/SelectionScript.js", + output: { + file: "artifacts/SelectionScript.js", + format: "iife", + }, + plugins: [ + resolve(), + commonjs(), // so Rollup can convert dependencies to an ES module + babel({ + runtimeHelpers: true, + extensions: [".js", ".jsx", ".es6", ".es", ".mjs"], + plugins: ["@babel/plugin-proposal-class-properties"], + }), + terser(), + ], +}; diff --git a/Skclusive.Material.Component.sln b/Skclusive.Material.Component.sln index 2355090..9ab7ee6 100644 --- a/Skclusive.Material.Component.sln +++ b/Skclusive.Material.Component.sln @@ -75,10 +75,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Progress", "Progress", "{3E EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Progress", "Progress\src\Progress.csproj", "{A5133B12-3021-4C73-A807-DD11AEC13726}" EndProject -Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Script", "Script", "{55E87A10-16A2-43DA-89BD-8A5A22F6C718}" -EndProject -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Script", "Script\src\Script.csproj", "{B7006487-B9BC-46CF-8BA6-F46D37408519}" -EndProject Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Selection", "Selection", "{E4E6B5F0-9094-4D10-8C67-B638F1EC6C33}" EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Selection", "Selection\src\Selection.csproj", "{6DF48E34-0F0E-4AC9-83DD-5D9F17AEA14D}" @@ -131,6 +127,18 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Container", "Container", "{ EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Container", "Container\src\Container.csproj", "{D3836F1B-3554-4F71-B450-FC23F467CD0A}" EndProject +Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Chip", "Chip", "{76D783F2-B84E-4F20-8E90-78D980EC7296}" +EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Chip", "Chip\src\Chip.csproj", "{C8CC60E3-CBBC-490C-85F2-BDC1701A0563}" +EndProject +Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Responsive", "Responsive", "{DC7981EC-5BE9-4B92-91EB-AFB7238446C1}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Responsive", "Responsive\src\Responsive.csproj", "{73A53100-5AA5-4F54-8B67-7FAABF3F62D4}" +EndProject +Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Link", "Link", "{F3262C3E-F84D-4745-9CB1-DA1ADCEFE96E}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Link", "Link\src\Link.csproj", "{99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -140,9 +148,6 @@ Global Release|x64 = Release|x64 Release|x86 = Release|x86 EndGlobalSection - GlobalSection(SolutionProperties) = preSolution - HideSolutionNode = FALSE - EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution {95D5904F-C4F1-40A2-A563-31D80424EB90}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {95D5904F-C4F1-40A2-A563-31D80424EB90}.Debug|Any CPU.Build.0 = Debug|Any CPU @@ -360,18 +365,6 @@ Global {A5133B12-3021-4C73-A807-DD11AEC13726}.Release|x64.Build.0 = Release|Any CPU {A5133B12-3021-4C73-A807-DD11AEC13726}.Release|x86.ActiveCfg = Release|Any CPU {A5133B12-3021-4C73-A807-DD11AEC13726}.Release|x86.Build.0 = Release|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Debug|Any CPU.Build.0 = Debug|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Debug|x64.ActiveCfg = Debug|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Debug|x64.Build.0 = Debug|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Debug|x86.ActiveCfg = Debug|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Debug|x86.Build.0 = Debug|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Release|Any CPU.ActiveCfg = Release|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Release|Any CPU.Build.0 = Release|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Release|x64.ActiveCfg = Release|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Release|x64.Build.0 = Release|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Release|x86.ActiveCfg = Release|Any CPU - {B7006487-B9BC-46CF-8BA6-F46D37408519}.Release|x86.Build.0 = Release|Any CPU {6DF48E34-0F0E-4AC9-83DD-5D9F17AEA14D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {6DF48E34-0F0E-4AC9-83DD-5D9F17AEA14D}.Debug|Any CPU.Build.0 = Debug|Any CPU {6DF48E34-0F0E-4AC9-83DD-5D9F17AEA14D}.Debug|x64.ActiveCfg = Debug|Any CPU @@ -528,6 +521,45 @@ Global {D3836F1B-3554-4F71-B450-FC23F467CD0A}.Release|x64.Build.0 = Release|Any CPU {D3836F1B-3554-4F71-B450-FC23F467CD0A}.Release|x86.ActiveCfg = Release|Any CPU {D3836F1B-3554-4F71-B450-FC23F467CD0A}.Release|x86.Build.0 = Release|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Debug|Any CPU.Build.0 = Debug|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Debug|x64.ActiveCfg = Debug|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Debug|x64.Build.0 = Debug|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Debug|x86.ActiveCfg = Debug|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Debug|x86.Build.0 = Debug|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Release|Any CPU.ActiveCfg = Release|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Release|Any CPU.Build.0 = Release|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Release|x64.ActiveCfg = Release|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Release|x64.Build.0 = Release|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Release|x86.ActiveCfg = Release|Any CPU + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563}.Release|x86.Build.0 = Release|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Debug|Any CPU.Build.0 = Debug|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Debug|x64.ActiveCfg = Debug|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Debug|x64.Build.0 = Debug|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Debug|x86.ActiveCfg = Debug|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Debug|x86.Build.0 = Debug|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Release|Any CPU.ActiveCfg = Release|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Release|Any CPU.Build.0 = Release|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Release|x64.ActiveCfg = Release|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Release|x64.Build.0 = Release|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Release|x86.ActiveCfg = Release|Any CPU + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4}.Release|x86.Build.0 = Release|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Debug|Any CPU.Build.0 = Debug|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Debug|x64.ActiveCfg = Debug|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Debug|x64.Build.0 = Debug|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Debug|x86.ActiveCfg = Debug|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Debug|x86.Build.0 = Debug|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Release|Any CPU.ActiveCfg = Release|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Release|Any CPU.Build.0 = Release|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Release|x64.ActiveCfg = Release|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Release|x64.Build.0 = Release|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Release|x86.ActiveCfg = Release|Any CPU + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21}.Release|x86.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE EndGlobalSection GlobalSection(NestedProjects) = preSolution {95D5904F-C4F1-40A2-A563-31D80424EB90} = {6AFD1E9C-D89B-4385-8954-2BCEF239FA91} @@ -548,7 +580,6 @@ Global {6C776353-5380-4313-BCA2-6EFD06897AE5} = {3655E570-B90D-468A-9AD0-9335473F9648} {AC9A7B0D-21B4-450D-BB81-444917080C42} = {AEF2D0DA-E928-4ADC-8C03-EB961F2EF5CA} {A5133B12-3021-4C73-A807-DD11AEC13726} = {3E40A78B-A53A-4C70-BE0C-7ABD648C7334} - {B7006487-B9BC-46CF-8BA6-F46D37408519} = {55E87A10-16A2-43DA-89BD-8A5A22F6C718} {6DF48E34-0F0E-4AC9-83DD-5D9F17AEA14D} = {E4E6B5F0-9094-4D10-8C67-B638F1EC6C33} {7A684008-0FAD-413A-B62B-3904B96280D3} = {8874B5FC-5242-4D91-8599-E63F29DCD177} {510B3C4E-B388-4F4C-9FA8-DC5EA33B10A3} = {4FF93FCF-61A7-4B71-9A49-4107D50CE632} @@ -562,5 +593,11 @@ Global {B8556016-D55D-4C84-B331-5369129D6A5F} = {91687B8F-58F5-4BD4-ADD5-F5F6D9A643BF} {2D6C4BA5-BA0D-4C6D-BC29-FF5C80D85198} = {FD4AC138-9A66-4E84-B512-319A59FDDC0A} {D3836F1B-3554-4F71-B450-FC23F467CD0A} = {BA2B6EE0-729F-40F7-9B63-8823B69D4571} + {C8CC60E3-CBBC-490C-85F2-BDC1701A0563} = {76D783F2-B84E-4F20-8E90-78D980EC7296} + {73A53100-5AA5-4F54-8B67-7FAABF3F62D4} = {DC7981EC-5BE9-4B92-91EB-AFB7238446C1} + {99B30DAF-C3DF-4A92-A374-FBAA7BE3AE21} = {F3262C3E-F84D-4745-9CB1-DA1ADCEFE96E} + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {091E9CD3-35A5-4010-88C8-D61D13F77CC5} EndGlobalSection EndGlobal diff --git a/Tab/src/Extension/TabExtension.cs b/Tab/src/Extension/TabExtension.cs new file mode 100644 index 0000000..3f922b3 --- /dev/null +++ b/Tab/src/Extension/TabExtension.cs @@ -0,0 +1,20 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Icon; +using Skclusive.Material.Button; + +namespace Skclusive.Material.Tab +{ + public static class TabExtension + { + public static void TryAddTabServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddIconServices(config); + + services.TryAddButtonServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Tab/src/Provider/TabStyleProvider.cs b/Tab/src/Provider/TabStyleProvider.cs new file mode 100644 index 0000000..b5c3ab7 --- /dev/null +++ b/Tab/src/Provider/TabStyleProvider.cs @@ -0,0 +1,17 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Tab +{ + public class TabStyleProvider : StyleTypeProvider + { + public TabStyleProvider() : base + ( + typeof(TabIndicatorStyle), + typeof(TabScrollButtonStyle), + typeof(TabStyle), + typeof(TabsStyle) + ) + { + } + } +} \ No newline at end of file diff --git a/Tab/src/Tab.csproj b/Tab/src/Tab.csproj index 3285d0e..4474e87 100644 --- a/Tab/src/Tab.csproj +++ b/Tab/src/Tab.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Tab Skclusive.Material.Tab Skclusive.Material.Tab @@ -17,9 +16,8 @@ - - - + + diff --git a/Tab/src/Tab/Tab.razor b/Tab/src/Tab/Tab.razor index 59e7ceb..7ac94d1 100644 --- a/Tab/src/Tab/Tab.razor +++ b/Tab/src/Tab/Tab.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Tab -@inherits TabComponent +@inherits MaterialComponentBase - +.Tab-Root { + padding: 6px 12px; + overflow: hidden; + position: relative; + max-width: 264px; + min-width: 72px; + box-sizing: border-box; + min-height: 48px; + text-align: center; + flex-shrink: 0; + white-space: normal; + font-size: var(--theme-typography-button-font-size); + font-family: var(--theme-typography-button-font-family); + font-weight: var(--theme-typography-button-font-weight); + line-height: var(--theme-typography-button-line-height); + letter-spacing: var(--theme-typography-button-letter-spacing); + text-transform: var(--theme-typography-button-text-transform); +} + +@media (min-width:600px) { .Tab-Root { - padding: 6px 12px; - overflow: hidden; - position: relative; - max-width: 264px; - min-width: 72px; - box-sizing: border-box; - min-height: 48px; - text-align: center; - flex-shrink: 0; - white-space: normal; - font-size: var(--theme-typography-button-font-size, 0.875rem); - font-family: var( - --theme-typography-button-font-family, - "Roboto", - "Helvetica", - "Arial", - sans-serif - ); - font-weight: var(--theme-typography-button-font-weight, 500); - line-height: var(--theme-typography-button-line-height, 1.75); - letter-spacing: var(--theme-typography-button-letter-spacing, 0.02857em); - text-transform: var(--theme-typography-button-text-transform, uppercase); - } - - @media (min-width:600px) { - .Tab-Root { - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); - min-width: 160px; - padding: 6px 24px - } - } - - .Tab-LabelIcon { - min-height: 72px; - padding-top: 9px; - } - - .Tab-LabelIcon .Tab-Wrapper > *:first-child { - margin-bottom: 6px; - } - - .Tab-TextColor-Inherit { - color: inherit; - opacity: 0.7; - } - - .Tab-TextColor-Inherit.Tab-Selected { - opacity: 1; - } - - .Tab-TextColor-Inherit.Tab-Disabled { - opacity: 0.5; - } - - .Tab-TextColor-Primary { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } - - .Tab-TextColor-Primary.Tab-Selected { - color: var(--theme-palette-primary-main, #1976d2); - } - - .Tab-TextColor-Primary.Tab-Disabled { - color: var(--theme-palette-text-disabled, rgba(0, 0, 0, 0.38)); - } - - .Tab-TextColor-Secondary { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } - - .Tab-TextColor-Secondary.Tab-Selected { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - - .Tab-TextColor-Secondary.Tab-Disabled { - color: var(--theme-palette-text-disabled, rgba(0, 0, 0, 0.38)); - } - - .Tab-FullWidth { - flex-grow: 1; - max-width: none; - flex-basis: 0; - flex-shrink: 1; - } - - .Tab-Wrapped { - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 12rem); - line-height: 1.5; - } - - .Tab-Wrapper { - width: 100%; - display: inline-flex; - align-items: center; - flex-direction: column; - justify-content: center; - } - - \ No newline at end of file + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem); + min-width: 160px; + padding: 6px 24px + } +} + +.Tab-LabelIcon { + min-height: 72px; + padding-top: 9px; +} + +.Tab-LabelIcon .Tab-Wrapper > *:first-child { + margin-bottom: 6px; +} + +.Tab-TextColor-Inherit { + color: inherit; + opacity: 0.7; +} + +.Tab-TextColor-Inherit.Tab-Selected { + opacity: 1; +} + +.Tab-TextColor-Inherit.Tab-Disabled { + opacity: 0.5; +} + +.Tab-TextColor-Primary { + color: var(--theme-palette-text-secondary); +} + +.Tab-TextColor-Primary.Tab-Selected { + color: var(--theme-palette-primary-main); +} + +.Tab-TextColor-Primary.Tab-Disabled { + color: var(--theme-palette-text-disabled); +} + +.Tab-TextColor-Secondary { + color: var(--theme-palette-text-secondary); +} + +.Tab-TextColor-Secondary.Tab-Selected { + color: var(--theme-palette-secondary-main); +} + +.Tab-TextColor-Secondary.Tab-Disabled { + color: var(--theme-palette-text-disabled); +} + +.Tab-FullWidth { + flex-grow: 1; + max-width: none; + flex-basis: 0; + flex-shrink: 1; +} + +.Tab-Wrapped { + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 12rem); + line-height: 1.5; +} + +.Tab-Wrapper { + width: 100%; + display: inline-flex; + align-items: center; + flex-direction: column; + justify-content: center; +} \ No newline at end of file diff --git a/Tab/src/TabIndicator/TabIndicator.razor b/Tab/src/TabIndicator/TabIndicator.razor index 5028329..8f5adc5 100644 --- a/Tab/src/TabIndicator/TabIndicator.razor +++ b/Tab/src/TabIndicator/TabIndicator.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Tab -@inherits TabIndicatorComponent +@inherits MaterialComponent +.TabIndicator-Root { + width: 100%; + bottom: 0; + height: 2px; + position: absolute; + transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} - .TabIndicator-Root { - width: 100%; - bottom: 0; - height: 2px; - position: absolute; - transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } +.TabIndicator-Color-Primary { + background-color: var(--theme-palette-primary-main); +} - .TabIndicator-Color-Primary { - background-color: var(--theme-palette-primary-main, #1976d2); - } +.TabIndicator-Color-Secondary { + background-color: var(--theme-palette-secondary-main); +} - .TabIndicator-Color-Secondary { - background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - - .TabIndicator-Vertical { - right: 0; - width: 2px; - height: 100%; - } - - \ No newline at end of file +.TabIndicator-Vertical { + right: 0; + width: 2px; + height: 100%; +} \ No newline at end of file diff --git a/Tab/src/TabScrollButton/TabScrollButton.razor b/Tab/src/TabScrollButton/TabScrollButton.razor index 14e0324..13145f1 100644 --- a/Tab/src/TabScrollButton/TabScrollButton.razor +++ b/Tab/src/TabScrollButton/TabScrollButton.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Tab -@inherits TabScrollButtonComponent +@inherits MaterialComponent +.TabScrollButton-Root { + width: 40px; + flex-shrink: 0; +} - .TabScrollButton-Root { - width: 40px; - flex-shrink: 0; - } +.TabScrollButton-Vertical { + width: 100%; + height: 40px; +} - .TabScrollButton-Vertical { - width: 100%; - height: 40px; - } - - .TabScrollButton-Vertical svg { - transform: rotate(90deg); - } - - \ No newline at end of file +.TabScrollButton-Vertical svg { + transform: rotate(90deg); +} \ No newline at end of file diff --git a/Tab/src/TabStyles/TabStyles.razor b/Tab/src/TabStyles/TabStyles.razor deleted file mode 100644 index 7cc5a02..0000000 --- a/Tab/src/TabStyles/TabStyles.razor +++ /dev/null @@ -1,7 +0,0 @@ -@namespace Skclusive.Material.Tab -@inherits StaticComponentBase - - - - - \ No newline at end of file diff --git a/Tab/src/Tabs/ITabsContext.cs b/Tab/src/Tabs/ITabsContext.cs index bb3e8b6..61d189e 100644 --- a/Tab/src/Tabs/ITabsContext.cs +++ b/Tab/src/Tabs/ITabsContext.cs @@ -96,6 +96,7 @@ public TabsContextBuilder WithOnChange(EventCallback onChange) public TabsContextBuilder With(ITabsContext context) { + WithValue(context.Value); WithVariant(context.Variant); WithFullWidth(context.FullWidth); WithIndicator(context.Indicator); diff --git a/Tab/src/Tabs/Tabs.razor b/Tab/src/Tabs/Tabs.razor index 535794a..c274172 100644 --- a/Tab/src/Tabs/Tabs.razor +++ b/Tab/src/Tabs/Tabs.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Tab -@inherits TabsComponent +@inherits MaterialComponent - - .Tabs-Root { - display: flex; - overflow: hidden; - min-height: 48px; - -webkit-overflow-scrolling: touch; - } - - .Tabs-Vertical { - flex-direction: column; - } - - .Tabs-Container { - display: flex; - } - - .Tabs-Container-Vertical { - flex-direction: column; - } - - .Tabs-Container-Centered { - justify-content: center; - } - - .Tabs-Scroller { - flex: 1 1 auto; - display: inline-block; - position: relative; - white-space: nowrap; - } - - .Tabs-Scroller-Fixed { - width: 100%; - overflow-x: hidden; - } - - .Tabs-Scroller-Scrollable { - overflow-x: scroll; - scrollbar-width: none; - } - - .Tabs-Scroller-Scrollable::-webkit-scrollbar { +.Tabs-Root { + display: flex; + overflow: hidden; + min-height: 48px; + -webkit-overflow-scrolling: touch; +} + +.Tabs-Vertical { + flex-direction: column; +} + +.Tabs-Container { + display: flex; +} + +.Tabs-Container-Vertical { + flex-direction: column; +} + +.Tabs-Container-Centered { + justify-content: center; +} + +.Tabs-Scroller { + flex: 1 1 auto; + display: inline-block; + position: relative; + white-space: nowrap; +} + +.Tabs-Scroller-Fixed { + width: 100%; + overflow-x: hidden; +} + +.Tabs-Scroller-Scrollable { + overflow-x: scroll; + scrollbar-width: none; +} + +.Tabs-Scroller-Scrollable::-webkit-scrollbar { + display: none; +} + +@media (max-width:599.95px) { + .Tabs-ScrollButton-Desktop { display: none; } - - @media (max-width:599.95px) { - .Tabs-ScrollButton-Desktop { - display: none; - } - } - - \ No newline at end of file +} \ No newline at end of file diff --git a/Table/src/Extension/TableExtension.cs b/Table/src/Extension/TableExtension.cs new file mode 100644 index 0000000..c34ee55 --- /dev/null +++ b/Table/src/Extension/TableExtension.cs @@ -0,0 +1,23 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Icon; +using Skclusive.Material.Button; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Table +{ + public static class TableExtension + { + public static void TryAddTableServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddIconServices(config); + + services.TryAddButtonServices(config); + + services.TryAddStyleTypeProvider(); + + services.TryAddStyleProducer(); + } + } +} diff --git a/Table/src/Producer/TableStyleProducer.cs b/Table/src/Producer/TableStyleProducer.cs new file mode 100644 index 0000000..d951c6d --- /dev/null +++ b/Table/src/Producer/TableStyleProducer.cs @@ -0,0 +1,24 @@ +using System.Collections.Generic; +using System.Globalization; +using Skclusive.Core.Component; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Table +{ + public class TableStyleProducer : IStyleProducer + { + public IDictionary Variables(ThemeValue theme) + { + var isDark = theme.IsDark(); + + var palette = theme.Palette; + + return new Dictionary + { + { "--theme-component-table-row-background-selected", (isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)").ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-table-row-background-hover", (isDark ? "rgba(255, 255, 255, 0.14)" : "rgba(0, 0, 0, 0.07)").ToString(CultureInfo.InvariantCulture) }, + { "--theme-component-table-cell-border-bottom", (isDark ? palette.Divider.Fade(1).Darken(0.68m) : palette.Divider.Fade(1).Lighten(0.88m)).ToString(CultureInfo.InvariantCulture) } + }; + } + } +} \ No newline at end of file diff --git a/Table/src/Provider/TabStyleProvider.cs b/Table/src/Provider/TabStyleProvider.cs new file mode 100644 index 0000000..690c731 --- /dev/null +++ b/Table/src/Provider/TabStyleProvider.cs @@ -0,0 +1,20 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Table +{ + public class TableStyleProvider : StyleTypeProvider + { + public TableStyleProvider() : base + ( + typeof(TableStyle), + typeof(TableBodyStyle), + typeof(TableCellStyle), + typeof(TableFootStyle), + typeof(TableHeadStyle), + typeof(TableRowStyle), + typeof(TableSortLabelStyle) + ) + { + } + } +} \ No newline at end of file diff --git a/Table/src/Table.csproj b/Table/src/Table.csproj index f15c4af..97b1211 100644 --- a/Table/src/Table.csproj +++ b/Table/src/Table.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Table Skclusive.Material.Table Skclusive.Material.Table @@ -17,9 +16,8 @@ - - - + + diff --git a/Table/src/Table/Table.razor b/Table/src/Table/Table.razor index 9f2c8df..4009496 100644 --- a/Table/src/Table/Table.razor +++ b/Table/src/Table/Table.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableComponent +@inherits MaterialComponent diff --git a/Table/src/Table/Table.cs b/Table/src/Table/Table.razor.cs similarity index 94% rename from Table/src/Table/Table.cs rename to Table/src/Table/Table.razor.cs index 7b6b9b8..bd4e108 100644 --- a/Table/src/Table/Table.cs +++ b/Table/src/Table/Table.razor.cs @@ -5,9 +5,9 @@ namespace Skclusive.Material.Table { - public class TableComponent : MaterialComponent + public partial class Table : MaterialComponent { - public TableComponent() : base("Table") + public Table() : base("Table") { } diff --git a/Table/src/Table/TableStyle.razor b/Table/src/Table/TableStyle.razor index a9dcd62..fb586cb 100644 --- a/Table/src/Table/TableStyle.razor +++ b/Table/src/Table/TableStyle.razor @@ -1,30 +1,25 @@ @namespace Skclusive.Material.Table @inherits StyleComponentBase - +.Table-Root { + width: 100%; + display: table; + border-spacing: 0; + border-collapse: collapse; +} - .Table-Root { - width: 100%; - display: table; - border-spacing: 0; - border-collapse: collapse; - } +.Table-Root caption { + color: var(--theme-palette-text-secondary); + padding: calc(var(--theme-spacing) * 2px); + text-align: left; + caption-side: bottom; + font-size: var(--theme-typography-body2-font-size); + font-family: var(--theme-typography-body2-font-family); + font-weight: var(--theme-typography-body2-font-weight); + line-height: var(--theme-typography-body2-line-height); + letter-spacing: var(--theme-typography-body2-letter-spacing); +} - .Table-Root caption { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - padding: calc(var(--theme-spacing, 8) * 2px); - text-align: left; - caption-side: bottom; - font-size: var(--theme-typography-body2-font-size, 0.875rem); - font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-body2-font-weight, 400); - line-height: var(--theme-typography-body2-line-height, 1.43); - letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em); - } - - .Table-StickyHeader { - border-collapse: separate; - } - - \ No newline at end of file +.Table-StickyHeader { + border-collapse: separate; +} \ No newline at end of file diff --git a/Table/src/TableBody/TableBody.razor b/Table/src/TableBody/TableBody.razor index 86e6f4a..b32a7f3 100644 --- a/Table/src/TableBody/TableBody.razor +++ b/Table/src/TableBody/TableBody.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableBodyComponent +@inherits MaterialComponent diff --git a/Table/src/TableBody/TableBody.cs b/Table/src/TableBody/TableBody.razor.cs similarity index 82% rename from Table/src/TableBody/TableBody.cs rename to Table/src/TableBody/TableBody.razor.cs index f3b5e3d..27e74c8 100644 --- a/Table/src/TableBody/TableBody.cs +++ b/Table/src/TableBody/TableBody.razor.cs @@ -4,9 +4,9 @@ namespace Skclusive.Material.Table { - public class TableBodyComponent : MaterialComponent + public partial class TableBody : MaterialComponent { - public TableBodyComponent() : base("TableBody") + public TableBody() : base("TableBody") { } diff --git a/Table/src/TableBody/TableBodyStyle.razor b/Table/src/TableBody/TableBodyStyle.razor index 780243a..62c3869 100644 --- a/Table/src/TableBody/TableBodyStyle.razor +++ b/Table/src/TableBody/TableBodyStyle.razor @@ -1,11 +1,6 @@ @namespace Skclusive.Material.Table @inherits StyleComponentBase - - - .TableBody-Root { - display: table-row-group; - } - - \ No newline at end of file +.TableBody-Root { + display: table-row-group; +} \ No newline at end of file diff --git a/Table/src/TableCell/TableCell.razor b/Table/src/TableCell/TableCell.razor index 6fd25c6..7434223 100644 --- a/Table/src/TableCell/TableCell.razor +++ b/Table/src/TableCell/TableCell.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableCellComponent +@inherits MaterialComponent - - .TableCell-Root { - display: table-cell; - padding: 16px; - vertical-align: inherit; - text-align: left; - border-bottom: 1px solid - var(--theme-palette-divider-border-bottom, rgba(224, 224, 224, 1)); - font-size: var(--theme-typography-body2-font-size, 0.875rem); - font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-body2-font-weight, 400); - line-height: var(--theme-typography-body2-line-height, 1.43); - letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em); - } - - .TableCell-Head { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); - font-weight: var(--theme-typography-font-weight-medium, 500); - line-height: calc(var(--theme-font-size-rem-factor, 0.0625) * 24rem); - } - - .TableCell-Body { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); - } - - .TableCell-Footer { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 12rem); - line-height: calc(var(--theme-font-size-rem-factor, 0.0625) * 21rem); - } - - .TableCell-Size-Small { - padding: 6px 24px 6px 16px; - } - - .TableCell-Size-Small:last-child { - padding-right: 16px; - } - - .TableCell-Size-Small.TableCell-Padding-Checkbox { - width: 24px; - padding: 0px 12px 0 16px; - } - - .TableCell-Size-Small.TableCell-Padding-Checkbox:last-child { - padding-left: 12px; - padding-right: 16px; - } - - .TableCell-Size-Small.TableCell-Padding-Checkbox > * { - padding: 0; - } - - .TableCell-Padding-Checkbox { - width: 48px; - padding: 0 0 0 4px; - } - - .TableCell-Padding-Checkbox:last-child { - padding-left: 0; - padding-right: 4px; - } - - .TableCell-Padding-None { - padding: 0; - } - - .TableCell-Padding-None:last-child { - padding: 0; - } - - .TableCell-Align-Left { - text-align: left; - } - - .TableCell-Align-Center { - text-align: center; - } - - .TableCell-Align-Right { - text-align: right; - flex-direction: row-reverse; - } - - .TableCell-Align-Justify { - text-align: justify; - } - - .TableCell-StickyHeader { - top: 0; - left: 0; - z-index: 2; - position: sticky; - background-color: var(--theme-palette-background-default, #fff); - } - - \ No newline at end of file +.TableCell-Root { + display: table-cell; + padding: 16px; + vertical-align: inherit; + text-align: left; + border-bottom: 1px solid var(--theme-component-table-cell-border-bottom); + font-size: var(--theme-typography-body2-font-size); + font-family: var(--theme-typography-body2-font-family); + font-weight: var(--theme-typography-body2-font-weight); + line-height: var(--theme-typography-body2-line-height); + letter-spacing: var(--theme-typography-body2-letter-spacing); +} + +.TableCell-Head { + color: var(--theme-palette-text-primary); + font-weight: var(--theme-typography-font-weight-medium); + line-height: calc(var(--theme-font-size-rem-factor, 0.0625) * 24rem); +} + +.TableCell-Body { + color: var(--theme-palette-text-primary); +} + +.TableCell-Footer { + color: var(--theme-palette-text-secondary); + font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 12rem); + line-height: calc(var(--theme-font-size-rem-factor, 0.0625) * 21rem); +} + +.TableCell-Size-Small { + padding: 6px 24px 6px 16px; +} + +.TableCell-Size-Small:last-child { + padding-right: 16px; +} + +.TableCell-Size-Small.TableCell-Padding-Checkbox { + width: 24px; + padding: 0px 12px 0 16px; +} + +.TableCell-Size-Small.TableCell-Padding-Checkbox:last-child { + padding-left: 12px; + padding-right: 16px; +} + +.TableCell-Size-Small.TableCell-Padding-Checkbox > * { + padding: 0; +} + +.TableCell-Padding-Checkbox { + width: 48px; + padding: 0 0 0 4px; +} + +.TableCell-Padding-Checkbox:last-child { + padding-left: 0; + padding-right: 4px; +} + +.TableCell-Padding-None { + padding: 0; +} + +.TableCell-Padding-None:last-child { + padding: 0; +} + +.TableCell-Align-Left { + text-align: left; +} + +.TableCell-Align-Center { + text-align: center; +} + +.TableCell-Align-Right { + text-align: right; + flex-direction: row-reverse; +} + +.TableCell-Align-Justify { + text-align: justify; +} + +.TableCell-StickyHeader { + top: 0; + left: 0; + z-index: 2; + position: sticky; + background-color: var(--theme-palette-background-default); +} \ No newline at end of file diff --git a/Table/src/TableFoot/TableFoot.razor b/Table/src/TableFoot/TableFoot.razor index fe09356..b32a7f3 100644 --- a/Table/src/TableFoot/TableFoot.razor +++ b/Table/src/TableFoot/TableFoot.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableFootComponent +@inherits MaterialComponent diff --git a/Table/src/TableFoot/TableFoot.cs b/Table/src/TableFoot/TableFoot.razor.cs similarity index 82% rename from Table/src/TableFoot/TableFoot.cs rename to Table/src/TableFoot/TableFoot.razor.cs index 5f1dc05..ba6e516 100644 --- a/Table/src/TableFoot/TableFoot.cs +++ b/Table/src/TableFoot/TableFoot.razor.cs @@ -4,9 +4,9 @@ namespace Skclusive.Material.Table { - public class TableFootComponent : MaterialComponent + public partial class TableFoot : MaterialComponent { - public TableFootComponent() : base("TableFoot") + public TableFoot() : base("TableFoot") { } diff --git a/Table/src/TableFoot/TableFootStyle.razor b/Table/src/TableFoot/TableFootStyle.razor index 5ed3ca0..050302d 100644 --- a/Table/src/TableFoot/TableFootStyle.razor +++ b/Table/src/TableFoot/TableFootStyle.razor @@ -1,11 +1,6 @@ @namespace Skclusive.Material.Table @inherits StyleComponentBase - - - .TableFoot-Root { - display: table-footer-group; - } - - \ No newline at end of file +.TableFoot-Root { + display: table-footer-group; +} \ No newline at end of file diff --git a/Table/src/TableHead/TableHead.razor b/Table/src/TableHead/TableHead.razor index 55c90b0..b32a7f3 100644 --- a/Table/src/TableHead/TableHead.razor +++ b/Table/src/TableHead/TableHead.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableHeadComponent +@inherits MaterialComponent diff --git a/Table/src/TableHead/TableHead.cs b/Table/src/TableHead/TableHead.razor.cs similarity index 82% rename from Table/src/TableHead/TableHead.cs rename to Table/src/TableHead/TableHead.razor.cs index 9e5782b..dd3ed12 100644 --- a/Table/src/TableHead/TableHead.cs +++ b/Table/src/TableHead/TableHead.razor.cs @@ -4,9 +4,9 @@ namespace Skclusive.Material.Table { - public class TableHeadComponent : MaterialComponent + public partial class TableHead : MaterialComponent { - public TableHeadComponent() : base("TableHead") + public TableHead() : base("TableHead") { } diff --git a/Table/src/TableHead/TableHeadStyle.razor b/Table/src/TableHead/TableHeadStyle.razor index 58ecca7..0d6520c 100644 --- a/Table/src/TableHead/TableHeadStyle.razor +++ b/Table/src/TableHead/TableHeadStyle.razor @@ -1,11 +1,6 @@ @namespace Skclusive.Material.Table @inherits StyleComponentBase - - - .TableHead-Root { - display: table-header-group; - } - - \ No newline at end of file +.TableHead-Root { + display: table-header-group; +} \ No newline at end of file diff --git a/Table/src/TableRow/TableRow.razor b/Table/src/TableRow/TableRow.razor index aca250d..6d4e2c4 100644 --- a/Table/src/TableRow/TableRow.razor +++ b/Table/src/TableRow/TableRow.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableRowComponent +@inherits MaterialComponent +.TableRow-Root { + color: inherit; + display: table-row; + outline: 0; + vertical-align: middle; +} - .TableRow-Root { - color: inherit; - display: table-row; - outline: 0; - vertical-align: middle; - } +.TableRow-Root.TableRow-Selected { + background-color: var(--theme-component-table-row-background-selected); +} - .TableRow-Root.TableRow-Selected { - background-color: var(--theme-palette-table-row-background-selected, rgba(0, 0, 0, 0.04)); - } +.TableRow-Root.TableRow-Hover:hover { + background-color: var(--theme-component-table-row-background-hover); +} - .TableRow-Root.TableRow-Hover:hover { - background-color: var(--theme-palette-table-row-background-hover, rgba(0, 0, 0, 0.07)); - } +.TableRow-Head { +} - .TableRow-Head { - } +.TableRow-Foot { +} - .TableRow-Foot { - } - - .TableRow-Body { - } - - \ No newline at end of file +.TableRow-Body { +} \ No newline at end of file diff --git a/Table/src/TableSortLabel/TableSortLabel.razor b/Table/src/TableSortLabel/TableSortLabel.razor index 25a063d..7e70dc9 100644 --- a/Table/src/TableSortLabel/TableSortLabel.razor +++ b/Table/src/TableSortLabel/TableSortLabel.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Table -@inherits TableSortLabelComponent +@inherits MaterialComponent - - .TableSortLabel-Root { - cursor: pointer; - display: inline-flex; - align-items: center; - flex-direction: inherit; - justify-content: flex-start; - } - - .TableSortLabel-Root:focus { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } - - .TableSortLabel-Root:hover { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } - - .TableSortLabel-Root.TableSortLabel-Active { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); - } - - .TableSortLabel-Root - .TableSortLabel-Active - .TableSortLabel-Root - .TableSortLabel-Active - .TableSortLabel-Icon { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - opacity: 1; - } - - .TableSortLabel-Root:hover .TableSortLabel-Icon { - opacity: 1; - } - - .TableSortLabel-Icon { - opacity: 0; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, - transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - margin-left: 4px; - user-select: none; - margin-right: 4px; - } - - .TableSortLabel-Icon-Direction-Descending { - transform: rotate(0deg); - } - - .TableSortLabel-Icon-Direction-Ascending { - transform: rotate(180deg); - } - - \ No newline at end of file +.TableSortLabel-Root { + cursor: pointer; + display: inline-flex; + align-items: center; + flex-direction: inherit; + justify-content: flex-start; +} + +.TableSortLabel-Root:focus { + color: var(--theme-palette-text-secondary); +} + +.TableSortLabel-Root:hover { + color: var(--theme-palette-text-secondary); +} + +.TableSortLabel-Root.TableSortLabel-Active { + color: var(--theme-palette-text-primary); +} + +.TableSortLabel-Root +.TableSortLabel-Active +.TableSortLabel-Root +.TableSortLabel-Active +.TableSortLabel-Icon { + color: var(--theme-palette-text-secondary); + opacity: 1; +} + +.TableSortLabel-Root:hover .TableSortLabel-Icon { + opacity: 1; +} + +.TableSortLabel-Icon { + opacity: 0; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + margin-left: 4px; + user-select: none; + margin-right: 4px; +} + +.TableSortLabel-Icon-Direction-Descending { + transform: rotate(0deg); +} + +.TableSortLabel-Icon-Direction-Ascending { + transform: rotate(180deg); +} \ No newline at end of file diff --git a/Table/src/TableStyles/TableStyles.razor b/Table/src/TableStyles/TableStyles.razor deleted file mode 100644 index d80ee3a..0000000 --- a/Table/src/TableStyles/TableStyles.razor +++ /dev/null @@ -1,10 +0,0 @@ -@namespace Skclusive.Material.Table -@inherits StaticComponentBase - - - - - - - - \ No newline at end of file diff --git a/Text/src/Extension/TextExtension.cs b/Text/src/Extension/TextExtension.cs new file mode 100644 index 0000000..ef2760b --- /dev/null +++ b/Text/src/Extension/TextExtension.cs @@ -0,0 +1,15 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Input; + +namespace Skclusive.Material.Text +{ + public static class TextExtension + { + public static void TryAddTextServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddInputServices(config); + } + } +} diff --git a/Text/src/Text.csproj b/Text/src/Text.csproj index 62399d3..712cec3 100644 --- a/Text/src/Text.csproj +++ b/Text/src/Text.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Text Skclusive.Material.Text Skclusive.Material.Text @@ -17,9 +16,7 @@ - - - + diff --git a/Text/src/TextField/TextField.razor b/Text/src/TextField/TextField.razor index a8abb01..e54df1a 100644 --- a/Text/src/TextField/TextField.razor +++ b/Text/src/TextField/TextField.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Text -@inherits TextFieldComponent +@inherits MaterialComponentBase @EndAdornment - + } @if (!string.IsNullOrWhiteSpace(Helper)) { diff --git a/Text/src/TextField/TextField.cs b/Text/src/TextField/TextField.razor.cs similarity index 86% rename from Text/src/TextField/TextField.cs rename to Text/src/TextField/TextField.razor.cs index 18b6165..8ca506a 100644 --- a/Text/src/TextField/TextField.cs +++ b/Text/src/TextField/TextField.razor.cs @@ -9,16 +9,12 @@ namespace Skclusive.Material.Text { - public class TextFieldComponent : MaterialComponentBase + public partial class TextField : MaterialComponentBase { [Inject] private DomHelpers DomHelpers { get; set; } - protected Input.FilledInput FilledInput { set; get; } - - protected Input.OutlinedInput OutlinedInput { set; get; } - - protected Input.StandardInput Input { set; get; } + private IReference InputRef { set; get; } = new Reference(); protected IReference LabelRef { get; set; } = new Reference(); @@ -191,46 +187,44 @@ protected override async Task OnAfterMountAsync() LabelWidth = offset.Width; - StateHasChanged(); + await InvokeAsync(StateHasChanged); } if (AutoFocus) { // Input.Focus(); - var elementRef = Variant == TextFieldVariant.Filled ? FilledInput?.Input?.Input?.RootRef.Current : - (Variant == TextFieldVariant.Outlined ? OutlinedInput?.Input?.Input?.RootRef.Current - : Input?.Input?.Input?.RootRef.Current); - - await DomHelpers.FocusAsync(elementRef); + await DomHelpers.FocusAsync(InputRef.Current); } } - protected override void HandleFocus(FocusEventArgs args) + protected override async Task HandleFocus(FocusEventArgs args) { Focused = true; - StateHasChanged(); + await InvokeAsync(StateHasChanged); - base.HandleFocus(args); + await base.HandleFocus(args); } - protected override void HandleBlur(FocusEventArgs args) + protected override async Task HandleBlur(FocusEventArgs args) { Focused = false; - StateHasChanged(); + await InvokeAsync(StateHasChanged); - base.HandleBlur(args); + await base.HandleBlur(args); } - protected virtual void HandleChange(ChangeEventArgs args) + protected virtual async Task HandleChange(ChangeEventArgs args) { - Value = args.Value?.ToString(); + var value = args.Value?.ToString(); + + Value = value; - StateHasChanged(); + await InvokeAsync(StateHasChanged); - OnChange.InvokeAsync(args); + await OnChange.InvokeAsync(args); } } } diff --git a/Theme/src/Breakpoint/Breakpoint.cs b/Theme/src/Breakpoint/Breakpoint.cs new file mode 100644 index 0000000..d8a633a --- /dev/null +++ b/Theme/src/Breakpoint/Breakpoint.cs @@ -0,0 +1,26 @@ +using System.Collections.Generic; +using System.Runtime.Serialization; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public enum Breakpoint + { + [EnumMember(Value = "xs")] + + ExtraSmall, + + [EnumMember(Value = "sm")] + Small, + + [EnumMember(Value = "md")] + Medium, + + [EnumMember(Value = "lg")] + Large, + + [EnumMember(Value = "xl")] + ExtraLarge + } +} \ No newline at end of file diff --git a/Theme/src/Breakpoint/BreakpointValues.cs b/Theme/src/Breakpoint/BreakpointValues.cs new file mode 100644 index 0000000..70d922c --- /dev/null +++ b/Theme/src/Breakpoint/BreakpointValues.cs @@ -0,0 +1,24 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class BreakpointValues + { + [JsonPropertyName("xs")] + public short ExtraSmall { set; get; } + + [JsonPropertyName("sm")] + public short Small { set; get; } + + [JsonPropertyName("md")] + public short Medium { set; get; } + + [JsonPropertyName("lg")] + public short Large { set; get; } + + [JsonPropertyName("xl")] + public short ExtraLarge { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Breakpoint/Breakpoints.cs b/Theme/src/Breakpoint/Breakpoints.cs new file mode 100644 index 0000000..25b3421 --- /dev/null +++ b/Theme/src/Breakpoint/Breakpoints.cs @@ -0,0 +1,31 @@ +using System; +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class Breakpoints + { + [JsonPropertyName("keys")] + public Breakpoint[] Keys { set; get; } + + [JsonPropertyName("values")] + public BreakpointValues Values { set; get; } + + [JsonIgnore] + public Func Up { set; get; } + + [JsonIgnore] + public Func Down { set; get; } + + [JsonIgnore] + public Func Between { set; get; } + + [JsonIgnore] + public Func Only { set; get; } + + [JsonIgnore] + public Func Width { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Breakpoint/BreakpointsConfig.cs b/Theme/src/Breakpoint/BreakpointsConfig.cs new file mode 100644 index 0000000..c2bfdf5 --- /dev/null +++ b/Theme/src/Breakpoint/BreakpointsConfig.cs @@ -0,0 +1,34 @@ +using System; +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class BreakpointsConfig + { + [JsonPropertyName("unit")] + public string Unit { set; get;} + + [JsonPropertyName("step")] + public int? Step { set; get; } + + [JsonPropertyName("values")] + public BreakpointValues Values { set; get; } + + [JsonIgnore] + public Func Up { set; get; } + + [JsonIgnore] + public Func Down { set; get; } + + [JsonIgnore] + public Func Between { set; get; } + + [JsonIgnore] + public Func Only { set; get; } + + [JsonIgnore] + public Func Width { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Breakpoint/BreakpointsFactory.cs b/Theme/src/Breakpoint/BreakpointsFactory.cs new file mode 100644 index 0000000..73ee488 --- /dev/null +++ b/Theme/src/Breakpoint/BreakpointsFactory.cs @@ -0,0 +1,140 @@ +using System; +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public static class BreakpointsFactory + { + public static Breakpoints CreateBreakpoints(BreakpointsConfig config) + { + var unit = config?.Unit ?? "px"; + + var step = config?.Step ?? 5; + + var values = config?.Values ?? new BreakpointValues + { + ExtraSmall = 0, + + Small = 600, + + Medium = 960, + + Large = 1280, + + ExtraLarge = 1920 + }; + + Func up = (breakpoint) => + { + var value = ValueByBreakpoint(values, breakpoint); + + return $"@media (min-width:{value}{unit})"; + }; + + Func down = (breakpoint) => + { + if (breakpoint == Breakpoint.ExtraLarge) + { + return up(Breakpoint.ExtraSmall); + } + + var value = ValueByBreakpoint(values, NextBreakpoint(breakpoint)); + + return $"@media (max-width:{Decimal.Round((decimal)value - (decimal)step / 100, 2)}{unit})"; + }; + + Func width = (breakpoint) => + { + return ValueByBreakpoint(values, breakpoint); + }; + + Func between = (start, end) => + { + if (end == Breakpoint.ExtraLarge) + { + return up(start); + } + var startValue = ValueByBreakpoint(values, start); + + var endValue = ValueByBreakpoint(values, NextBreakpoint(end)); + + return $"@media (min-width:{startValue}{unit}) and (max-width:{Decimal.Round((decimal)endValue - (decimal)step / 100, 2)}{unit})"; + }; + + Func only = (breakpoint) => + { + return between(breakpoint, breakpoint); + }; + + var breakpoints = new Breakpoints + { + Values = values, + + Keys = new Breakpoint[] + { + Breakpoint.ExtraSmall, + + Breakpoint.Small, + + Breakpoint.Medium, + + Breakpoint.Large, + + Breakpoint.ExtraLarge + }, + + Up = up, + + Width = width, + + Between = between, + + Only = only, + + Down = down + }; + + return breakpoints; + } + + public static Breakpoint NextBreakpoint(Breakpoint breakpoint) + { + switch (breakpoint) + { + case Breakpoint.ExtraSmall: + return Breakpoint.Small; + case Breakpoint.Small: + return Breakpoint.Medium; + case Breakpoint.Medium: + return Breakpoint.Large; + case Breakpoint.Large: + return Breakpoint.ExtraLarge; + case Breakpoint.ExtraLarge: + return Breakpoint.Small; + } + + throw new Exception("not valid breakpoint"); + } + + public static int ValueByBreakpoint(BreakpointValues values, Breakpoint breakpoint) + { + switch (breakpoint) + { + case Breakpoint.ExtraSmall: + return values.ExtraSmall; + case Breakpoint.Small: + return values.Small; + case Breakpoint.Medium: + return values.Medium; + case Breakpoint.Large: + return values.Large; + case Breakpoint.ExtraLarge: + return values.ExtraLarge; + } + + throw new Exception("not valid breakpoint"); + } + } +} \ No newline at end of file diff --git a/Theme/src/ColorManipulator/ColorManipulator.cs b/Theme/src/ColorManipulator/ColorManipulator.cs new file mode 100644 index 0000000..bccd2ea --- /dev/null +++ b/Theme/src/ColorManipulator/ColorManipulator.cs @@ -0,0 +1,220 @@ +using System; +using System.Collections.Generic; +using System.Globalization; +using System.Linq; +using System.Text; +using System.Text.RegularExpressions; + +namespace Skclusive.Material.Theme +{ + public static class ColorManipulator + { + public static string HexToRgb(this string color) + { + color = color.Substring(1); + + var reg = new Regex($".{{1,{color.Length / 3}}}", RegexOptions.ECMAScript); + + IList matches = reg.Matches(color); + + var builder = new StringBuilder(); + if (matches.Count > 0) + { + builder.Append("rgb("); + + var hexes = matches.Select(match => match.Value).ToList(); + + if (matches[0].Length == 1) + { + hexes = hexes.Select(n => $"{n}{n}").ToList(); + } + + var values = hexes.Select(value => int.Parse(value, NumberStyles.HexNumber, CultureInfo.InvariantCulture)); + + builder.Append(string.Join(", ", values)); + + builder.Append(")"); + } + + return builder.ToString(); + } + + public static string IntToHex(this int value) + { + var hex = value.ToString("X"); + + return hex.Length == 1 ? $"0{hex}" : hex; + } + + public static string RgbToHex(this string color) + { + if (color[0] == '#') + { + return color; + } + + var (type, values) = color.DecomposeColor(); + + var hexes = values.Select(value => Convert.ToInt32(value).IntToHex()); + + return $"#{string.Join("", hexes)}"; + } + + public static string HslToRgb(this string color) + { + var (type, values) = color.DecomposeColor(); + + var h = values[0]; + var s = values[1] / 100; + var l = values[2] / 100; + var a = s * Math.Min(l, 1 - l); + + decimal f(int n) + { + var k = (n + h / 30) % 12; + + return l - a * Math.Max(Math.Min(k - 3, Math.Min(9 - k, 1)), -1); + } + + var doubles = new decimal[] { Math.Round(f(0) * 255), Math.Round(f(8) * 255), Math.Round(f(4) * 255) }; + + var rgbvalues = doubles.Select(d => (decimal)d).ToList(); + + var rgbtype = type == "hsla" ? "rgba" : "rgb"; + + if (type == "hsla" && values.Length > 3) + { + rgbvalues.Add(values[3]); + } + + return (type: rgbtype, values: rgbvalues.ToArray()).RecomposeColor(); + } + + public static (string type, decimal[] values) DecomposeColor(this string color) + { + if (color[0] == '#') + { + return color.HexToRgb().DecomposeColor(); + } + + var marker = color.IndexOf("("); + var type = color.Substring(0, marker); + + var values = color.Substring(marker + 1, (color.Length - 1) - (marker + 1)) + .Split(",") + .Select(value => value.Trim().Replace("%", "")) + .Select(value => decimal.Parse(value, NumberStyles.AllowDecimalPoint, CultureInfo.InvariantCulture)).ToArray(); + + return (type, values); + } + + public static string RecomposeColor(this (string type, decimal[] values) composed) + { + var (type, values) = composed; + + List segs = new List(); + + if (type.IndexOf("rgb") != -1) + { + segs.AddRange(values.Select((value, index) => index < 3 ? Convert.ToInt32(Math.Floor(value)).ToString(CultureInfo.InvariantCulture) : value.ToString(CultureInfo.InvariantCulture))); + } + else if (type.IndexOf("hsl") != -1) + { + segs.AddRange(values.Select((value, index) => index == 1 || index == 2 ? $"{Convert.ToInt32(Math.Floor(value)).ToString(CultureInfo.InvariantCulture)}%" : value.ToString(CultureInfo.InvariantCulture))); + } + + return $"{type}({string.Join(", ", segs)})"; + } + + public static decimal Luminance(this string color) + { + var decompo = color.DecomposeColor(); + + var rgb = decompo.type == "hsl" ? color.HslToRgb().DecomposeColor().values : decompo.values; + + rgb = rgb.Select(val => + { + val /= 255; // normalized + return (decimal)(val <= 0.03928m ? val / 12.92m : (decimal)Math.Pow(((double)((val + 0.055m) / 1.055m)), 2.4)); + }).ToArray(); + + return Decimal.Round(0.2126m * rgb[0] + 0.7152m * rgb[1] + 0.0722m * rgb[2], 3); + } + + public static decimal ContrastRatio(this string foreground, string background) + { + var lumA = foreground.Luminance(); + + var lumB = background.Luminance(); + + return Decimal.Round((Math.Max(lumA, lumB) + 0.05m) / (Math.Min(lumA, lumB) + 0.05m), 2); + } + + public static string Fade(this string color, decimal alpha) + { + var (type, values) = color.DecomposeColor(); + + alpha = Math.Clamp(alpha, 0, 1); + + var segs = new List(values); + if (segs.Count > 3) + { + segs[3] = alpha; + } + else + { + segs.Add(alpha); + } + type = type == "rgb" || type == "hsl" ? $"{type}a" : type; + + return (type, values: segs.ToArray()).RecomposeColor(); + } + + public static string Darken(this string color, decimal coefficient) + { + var (type, values) = color.DecomposeColor(); + + coefficient = Math.Clamp(coefficient, 0, 1); + + if (type.IndexOf("hsl") != -1) + { + values[2] = values[2] * (1 - coefficient); + } + else if (type.IndexOf("rgb") != -1) + { + for (var i = 0; i < 3; i += 1) + { + values[i] = values[i] * (1 - coefficient); + } + } + return (type, values).RecomposeColor(); + } + + public static string Lighten(this string color, decimal coefficient) + { + var (type, values) = color.DecomposeColor(); + + coefficient = Math.Clamp(coefficient, 0, 1); + + if (type.IndexOf("hsl") != -1) + { + values[2] += (100 - values[2]) * coefficient; + } + else if (type.IndexOf("rgb") != -1) + { + for (var i = 0; i < 3; i += 1) + { + values[i] += (255 - values[i]) * coefficient; + } + } + return (type, values).RecomposeColor(); + } + + public static string Emphasize(this string color, decimal coefficient = 0.15m) + { + var toDark = color.Luminance() > 0.5m; + + return toDark ? color.Darken(coefficient) : color.Lighten(coefficient); + } + } +} \ No newline at end of file diff --git a/Theme/src/Extention/DecimalExtensions.cs b/Theme/src/Extention/DecimalExtensions.cs new file mode 100644 index 0000000..c6d0f46 --- /dev/null +++ b/Theme/src/Extention/DecimalExtensions.cs @@ -0,0 +1,47 @@ + +using System.Globalization; +using System.Text; + +namespace Skclusive.Material.Theme +{ + public static class DecimalExtensions + { + public static string ToCleanString(this decimal input, bool leadingZero = false) + { + var value = input.ToString(CultureInfo.InvariantCulture); + + if (value.Contains(".")) + { + StringBuilder builder = new StringBuilder(); + var chars = value.ToCharArray(); + var lastZero = false; + for (var i = chars.Length - 1; i >= 0; i--) + { + char ch = chars[i]; + if (ch == '0') + { + lastZero = true; + } + else if (ch == '.' && lastZero) + { + lastZero = false; + continue; + } + else + { + lastZero = false; + builder.Append(ch); + } + } + value = builder.ToString().Reverse(); + } + + if (leadingZero && value[0] == '.') + { + value = $"0{value}"; + } + + return value; + } + } +} \ No newline at end of file diff --git a/Theme/src/Extention/StringExtensions.cs b/Theme/src/Extention/StringExtensions.cs new file mode 100644 index 0000000..c84f793 --- /dev/null +++ b/Theme/src/Extention/StringExtensions.cs @@ -0,0 +1,24 @@ + +using System; +using System.Globalization; +using System.Text; + +namespace Skclusive.Material.Theme +{ + public static class StringExtensions + { + public static string Reverse(this string input) + { + var chars = input.ToCharArray(); + + Array.Reverse(chars); + + return String.Concat(chars); + } + + public static string ToContrastText(this string background, decimal contrastThreshold = 3) + { + return background.ContrastRatio(PaletteColors.Dark.Text.Primary) >= contrastThreshold ? PaletteColors.Dark.Text.Primary : PaletteColors.Light.Text.Primary; + } + } +} \ No newline at end of file diff --git a/Theme/src/Extention/ThemeExtensions.cs b/Theme/src/Extention/ThemeExtensions.cs new file mode 100644 index 0000000..bd52111 --- /dev/null +++ b/Theme/src/Extention/ThemeExtensions.cs @@ -0,0 +1,23 @@ +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.DependencyInjection.Extensions; +using Skclusive.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; + +namespace Skclusive.Material.Theme +{ + public static class ThemeExtensions + { + public static void TryAddThemeServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddMaterialCoreServices(config); + + services.TryAddScoped(); + } + + public static void TryAddStyleProducer(this IServiceCollection services) where TStyleProducer : class, IStyleProducer + { + services.TryAddScopedEnumerable(); + } + } +} diff --git a/Theme/src/Extention/ThemeValueExtensions.cs b/Theme/src/Extention/ThemeValueExtensions.cs new file mode 100644 index 0000000..cf4f26e --- /dev/null +++ b/Theme/src/Extention/ThemeValueExtensions.cs @@ -0,0 +1,20 @@ + +using System; +using System.Globalization; +using System.Text; + +namespace Skclusive.Material.Theme +{ + public static class ThemeValueExtensions + { + public static bool IsDark(this ThemeValue theme) + { + return theme.Palette.Type == PaletteType.Dark; + } + + public static bool IsLight(this ThemeValue theme) + { + return theme.Palette.Type == PaletteType.Light; + } + } +} \ No newline at end of file diff --git a/Theme/src/Extention/TransitionsExtensions.cs b/Theme/src/Extention/TransitionsExtensions.cs new file mode 100644 index 0000000..745a1ed --- /dev/null +++ b/Theme/src/Extention/TransitionsExtensions.cs @@ -0,0 +1,30 @@ + +using System; +using System.Globalization; +using System.Text; + +namespace Skclusive.Material.Theme +{ + public static class TransitionsExtensions + { + public static string Make(this Transitions transitions, string prop, string easing, short? duration, short? delay) + { + return transitions.Create(new string [] { prop }, easing, duration, delay); + } + + public static string Make(this Transitions transitions, string prop) + { + return transitions.Make(prop, null, null, null); + } + + public static string Make(this Transitions transitions) + { + return transitions.Make("all"); + } + + public static string Make(this Transitions transitions, string easing, short? duration, short? delay) + { + return transitions.Make("all", easing, duration, delay); + } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/Palete.cs b/Theme/src/Palette/Palete.cs new file mode 100644 index 0000000..730c109 --- /dev/null +++ b/Theme/src/Palette/Palete.cs @@ -0,0 +1,49 @@ +using System; +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class Palette + { + [JsonPropertyName("action")] + public PaletteAction Action { get; set; } + + [JsonPropertyName("background")] + public PaletteBackground Background { get; set; } + + [JsonPropertyName("common")] + public PaletteCommon Common { get; set; } + + [JsonPropertyName("contrastThreshold")] + public decimal ContrastThreshold { get; set; } + + [JsonPropertyName("divider")] + public string Divider { get; set; } + + [JsonPropertyName("error")] + public PaletteColor Error { get; set; } + + [JsonPropertyName("grey")] + public PaletteShade Grey { get; set; } + + [JsonPropertyName("primary")] + public PaletteColor Primary { get; set; } + + [JsonPropertyName("secondary")] + public PaletteColor Secondary { get; set; } + + [JsonPropertyName("text")] + public PaletteText Text { get; set; } + + [JsonPropertyName("tonalOffset")] + public decimal TonalOffset { get; set; } + + [JsonPropertyName("type")] + public PaletteType Type { get; set; } + + [JsonPropertyName("custom")] + public PaletteCustom Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaleteColorConfig.cs b/Theme/src/Palette/PaleteColorConfig.cs new file mode 100644 index 0000000..8f10c41 --- /dev/null +++ b/Theme/src/Palette/PaleteColorConfig.cs @@ -0,0 +1,43 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteColorConfig : PaletteShade + { + [JsonPropertyName("contrastText")] + public string ContrastText { get; set; } + + [JsonPropertyName("dark")] + public string Dark { get; set; } + + [JsonPropertyName("light")] + public string Light { get; set; } + + [JsonPropertyName("main")] + public string Main { get; set; } + + [JsonPropertyName("custom")] + public IDictionary Custom { get; set; } + + public PaletteColorConfig() + { + } + + public PaletteColorConfig(PaletteShade color) : base(color) + { + } + + public PaletteColorConfig(PaletteColorConfig color) : base(color) + { + Main = color.Main; + + Light = color.Light; + + Dark = color.Dark; + + ContrastText = color.ContrastText; + } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaleteConfig.cs b/Theme/src/Palette/PaleteConfig.cs new file mode 100644 index 0000000..5ad6822 --- /dev/null +++ b/Theme/src/Palette/PaleteConfig.cs @@ -0,0 +1,52 @@ +using System; +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteConfig + { + [JsonPropertyName("action")] + public PaletteAction Action { get; set; } + + [JsonPropertyName("background")] + public PaletteBackground Background { get; set; } + + [JsonPropertyName("common")] + public PaletteCommon Common { get; set; } + + [JsonPropertyName("contrastThreshold")] + public decimal? ContrastThreshold { get; set; } + + [JsonPropertyName("divider")] + public string Divider { get; set; } + + [JsonPropertyName("error")] + public PaletteColorConfig Error { get; set; } + + [JsonPropertyName("getContrastText")] + public Dictionary GetContrastText { get; set; } + + [JsonPropertyName("grey")] + public PaletteShade Grey { get; set; } + + [JsonPropertyName("primary")] + public PaletteColorConfig Primary { get; set; } + + [JsonPropertyName("secondary")] + public PaletteColorConfig Secondary { get; set; } + + [JsonPropertyName("text")] + public PaletteText Text { get; set; } + + [JsonPropertyName("tonalOffset")] + public decimal? TonalOffset { get; set; } + + [JsonPropertyName("type")] + public PaletteType? Type { get; set; } + + [JsonPropertyName("custom")] + public PaletteCustom Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaleteFactory.cs b/Theme/src/Palette/PaleteFactory.cs new file mode 100644 index 0000000..3b3f97e --- /dev/null +++ b/Theme/src/Palette/PaleteFactory.cs @@ -0,0 +1,238 @@ +using System; +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public static class PaletteFactory + { + public static PaletteColor AugmentColor(PaletteColorConfig color, + Func mainShade, + Func lightShade, + Func darkShade, + decimal tonalOffset = 0.2m, + decimal contrastThreshold = 3) + { + var main = color.Main ?? mainShade(color); + + var light = color.Light ?? lightShade(color) ?? main.Lighten(tonalOffset); + + var dark = color.Dark ?? darkShade(color) ?? main.Darken(tonalOffset * 1.5m); + + var contrastText = color.ContrastText ?? main.ToContrastText(contrastThreshold); + + var custom = color.Custom ?? new Dictionary(); + + return new PaletteColor + { + Main = main, + + Light = light, + + Dark = dark, + + ContrastText = contrastText, + + Custom = custom, + }; + } + + public static PaletteColor AugmentColor(PaletteColorConfig colorConfig, decimal tonalOffset = 0.2m, decimal contrastThreshold = 3) + { + return AugmentColor(colorConfig, p => p.X500, p => p.X300, p => p.X700, tonalOffset, contrastThreshold); + } + + private static PaletteCommon ToCommon(PaletteCommon input, PaletteCommon defaultx) + { + return new PaletteCommon + { + White = input?.White ?? defaultx.White, + + Black = input?.Black ?? defaultx.Black, + + Custom = input?.Custom ?? defaultx.Custom, + }; + } + + private static PaletteShade ToColor(PaletteShade input, PaletteShade defaultx) + { + return new PaletteShade + { + X50 = input?.X50 ?? defaultx.X50, + + X100 = input?.X100 ?? defaultx.X100, + + X200 = input?.X200 ?? defaultx.X200, + + X300 = input?.X300 ?? defaultx.X300, + + X400 = input?.X400 ?? defaultx.X400, + + X500 = input?.X500 ?? defaultx.X500, + + X600 = input?.X600 ?? defaultx.X600, + + X700 = input?.X700 ?? defaultx.X700, + + X800 = input?.X800 ?? defaultx.X800, + + X900 = input?.X900 ?? defaultx.X900, + + A100 = input?.A100 ?? defaultx.A100, + + A200 = input?.A200 ?? defaultx.A200, + + A400 = input?.A400 ?? defaultx.A400, + + A700 = input?.A700 ?? defaultx.A700, + }; + } + + private static PaletteBackground ToBackground(PaletteBackground input, PaletteBackground defaultx) + { + return new PaletteBackground + { + Paper = input?.Paper ?? defaultx.Paper, + + Default = input?.Default ?? defaultx.Default, + + Custom = input?.Custom ?? defaultx.Custom, + }; + } + + private static PaletteCustom ToCustom(PaletteCustom input, PaletteCustom defaultx) + { + return new PaletteCustom + { + LightOrDark = input?.LightOrDark ?? defaultx.LightOrDark, + + LightOrDarkContrastText = input?.LightOrDarkContrastText ?? defaultx.LightOrDarkContrastText, + + ContentBackground = input?.ContentBackground ?? defaultx.ContentBackground, + + ContentBackgroundDefault = input?.ContentBackgroundDefault ?? defaultx.ContentBackgroundDefault, + + PaletteOpacity = input?.PaletteOpacity ?? defaultx.PaletteOpacity, + + PaletteCommonAlternate = input?.PaletteCommonAlternate ?? defaultx.PaletteCommonAlternate, + + LayoutBackward = input?.LayoutBackward ?? defaultx.LayoutBackward, + + LayoutForward = input?.LayoutForward ?? defaultx.LayoutForward, + + PrimaryMain = input?.PrimaryMain ?? defaultx.PrimaryMain, + + PrimaryContrastText = input?.PrimaryContrastText ?? defaultx.PrimaryContrastText, + }; + } + + private static PaletteAction ToAction(PaletteAction input, PaletteAction defaultx) + { + return new PaletteAction + { + Active = input?.Active ?? defaultx.Active, + + Hover = input?.Hover ?? defaultx.Hover, + + HoverOpacity = input?.HoverOpacity ?? defaultx.HoverOpacity, + + Selected = input?.Selected ?? defaultx.Selected, + + Disabled = input?.Disabled ?? defaultx.Disabled, + + DisabledBackground = input?.DisabledBackground ?? defaultx.DisabledBackground, + + Custom = input?.Custom ?? defaultx.Custom, + }; + } + + private static PaletteText ToText(PaletteText input, PaletteText defaultx) + { + return new PaletteText + { + Primary = input?.Primary ?? defaultx.Primary, + + Secondary = input?.Secondary ?? defaultx.Secondary, + + Disabled = input?.Disabled ?? defaultx.Disabled, + + Hint = input?.Hint ?? defaultx.Hint, + + Custom = input?.Custom ?? defaultx.Custom, + }; + } + + public static Palette CreatePalette(PaletteConfig config) + { + var tonalOffset = config?.TonalOffset ?? 0.2m; + + var contrastThreshold = config?.ContrastThreshold ?? 3; + + var primary = AugmentColor(config?.Primary ?? new PaletteColorConfig + { + Light = PaletteColors.Indigo.X300, + + Main = PaletteColors.Indigo.X500, + + Dark = PaletteColors.Indigo.X700 + + }, tonalOffset, contrastThreshold); + + var secondary = AugmentColor(config?.Secondary ?? new PaletteColorConfig + { + Light = PaletteColors.Pink.A200, + + Main = PaletteColors.Pink.A400, + + Dark = PaletteColors.Pink.A700 + }, + p => p.A400, p => p.A200, p => p.A700, tonalOffset, contrastThreshold); + + var error = AugmentColor(config?.Error ?? new PaletteColorConfig + { + Light = PaletteColors.Red.X300, + + Main = PaletteColors.Red.X500, + + Dark = PaletteColors.Red.X700 + + }, tonalOffset, contrastThreshold); + + var type = config?.Type ?? PaletteType.Light; + + var isLight = type == PaletteType.Light; + + var palette = new Palette + { + Primary = primary, + + Secondary = secondary, + + Error = error, + + Type = type, + + ContrastThreshold = contrastThreshold, + + TonalOffset = tonalOffset, + + Divider = config?.Divider ?? (isLight ? PaletteColors.Light.Divider : PaletteColors.Dark.Divider), + + Grey = ToColor(config?.Grey, PaletteColors.Grey), + + Common = ToCommon(config?.Common, PaletteColors.Common), + + Text = ToText(config?.Text, (isLight ? PaletteColors.Light.Text : PaletteColors.Dark.Text)), + + Background = ToBackground(config?.Background, (isLight ? PaletteColors.Light.Background : PaletteColors.Dark.Background)), + + Action = ToAction(config?.Action, (isLight ? PaletteColors.Light.Action : PaletteColors.Dark.Action)), + + Custom = ToCustom(config?.Custom, (isLight ? PaletteColors.Light.Custom : PaletteColors.Dark.Custom)), + }; + + return palette; + } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteAction.cs b/Theme/src/Palette/PaletteAction.cs new file mode 100644 index 0000000..f6bbe50 --- /dev/null +++ b/Theme/src/Palette/PaletteAction.cs @@ -0,0 +1,30 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteAction + { + [JsonPropertyName("active")] + public string Active { get; set; } + + [JsonPropertyName("disabled")] + public string Disabled { get; set; } + + [JsonPropertyName("disabledBackground")] + public string DisabledBackground { get; set; } + + [JsonPropertyName("hover")] + public string Hover { get; set; } + + [JsonPropertyName("hoverOpacity")] + public decimal HoverOpacity { get; set; } + + [JsonPropertyName("selected")] + public string Selected { get; set; } + + [JsonPropertyName("custom")] + public IDictionary Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteBackground.cs b/Theme/src/Palette/PaletteBackground.cs new file mode 100644 index 0000000..162fc87 --- /dev/null +++ b/Theme/src/Palette/PaletteBackground.cs @@ -0,0 +1,18 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteBackground + { + [JsonPropertyName("default")] + public string Default { get; set; } + + [JsonPropertyName("paper")] + public string Paper { get; set; } + + [JsonPropertyName("custom")] + public IDictionary Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteColor.cs b/Theme/src/Palette/PaletteColor.cs new file mode 100644 index 0000000..6273580 --- /dev/null +++ b/Theme/src/Palette/PaletteColor.cs @@ -0,0 +1,24 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteColor + { + [JsonPropertyName("contrastText")] + public string ContrastText { get; set; } + + [JsonPropertyName("dark")] + public string Dark { get; set; } + + [JsonPropertyName("light")] + public string Light { get; set; } + + [JsonPropertyName("main")] + public string Main { get; set; } + + [JsonPropertyName("custom")] + public IDictionary Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteColors.cs b/Theme/src/Palette/PaletteColors.cs new file mode 100644 index 0000000..06eb5b1 --- /dev/null +++ b/Theme/src/Palette/PaletteColors.cs @@ -0,0 +1,770 @@ +using System.Collections.Generic; + +namespace Skclusive.Material.Theme +{ + public class PaletteColors + { + + public static readonly PaletteCommon Common = new PaletteCommon + { + Black = "#000", + + White = "#fff", + + Custom = new Dictionary(), + }; + + public static readonly PaletteShade Amber = new PaletteShade + { + X50 = "#fff8e1", + + X100 = "#ffecb3", + + X200 = "#ffe082", + + X300 = "#ffd54f", + + X400 = "#ffca28", + + X500 = "#ffc107", + + X600 = "#ffb300", + + X700 = "#ffa000", + + X800 = "#ff8f00", + + X900 = "#ff6f00", + + A100 = "#ffe57f", + + A200 = "#ffd740", + + A400 = "#ffc400", + + A700 = "#ffab00" + }; + + public static readonly PaletteShade Blue = new PaletteShade + { + X50 = "#e3f2fd", + + X100 = "#bbdefb", + + X200 = "#90caf9", + + X300 = "#64b5f6", + + X400 = "#42a5f5", + + X500 = "#2196f3", + + X600 = "#1e88e5", + + X700 = "#1976d2", + + X800 = "#1565c0", + + X900 = "#0d47a1", + + A100 = "#82b1ff", + + A200 = "#448aff", + + A400 = "#2979ff", + + A700 = "#2962ff" + }; + + public static readonly PaletteShade BlueGrey = new PaletteShade + { + X50 = "#eceff1", + + X100 = "#cfd8dc", + + X200 = "#b0bec5", + + X300 = "#90a4ae", + + X400 = "#78909c", + + X500 = "#607d8b", + + X600 = "#546e7a", + + X700 = "#455a64", + + X800 = "#37474f", + + X900 = "#263238", + + A100 = "#cfd8dc", + + A200 = "#b0bec5", + + A400 = "#78909c", + + A700 = "#455a64" + }; + + public static readonly PaletteShade Brown = new PaletteShade + { + X50 = "#efebe9", + + X100 = "#d7ccc8", + + X200 = "#bcaaa4", + + X300 = "#a1887f", + + X400 = "#8d6e63", + + X500 = "#795548", + + X600 = "#6d4c41", + + X700 = "#5d4037", + + X800 = "#4e342e", + + X900 = "#3e2723", + + A100 = "#d7ccc8", + + A200 = "#bcaaa4", + + A400 = "#8d6e63", + + A700 = "#5d4037" + }; + + public static readonly PaletteShade Cyan = new PaletteShade + { + X50 = "#e0f7fa", + + X100 = "#b2ebf2", + + X200 = "#80deea", + + X300 = "#4dd0e1", + + X400 = "#26c6da", + + X500 = "#00bcd4", + + X600 = "#00acc1", + + X700 = "#0097a7", + + X800 = "#00838f", + + X900 = "#006064", + + A100 = "#84ffff", + + A200 = "#18ffff", + + A400 = "#00e5ff", + + A700 = "#00b8d4" + }; + + public static readonly PaletteShade DeepOrange = new PaletteShade + { + X50 = "#fbe9e7", + + X100 = "#ffccbc", + + X200 = "#ffab91", + + X300 = "#ff8a65", + + X400 = "#ff7043", + + X500 = "#ff5722", + + X600 = "#f4511e", + + X700 = "#e64a19", + + X800 = "#d84315", + + X900 = "#bf360c", + + A100 = "#ff9e80", + + A200 = "#ff6e40", + + A400 = "#ff3d00", + + A700 = "#dd2c00" + }; + + public static readonly PaletteShade DeepPurple = new PaletteShade + { + X50 = "#ede7f6", + + X100 = "#d1c4e9", + + X200 = "#b39ddb", + + X300 = "#9575cd", + + X400 = "#7e57c2", + + X500 = "#673ab7", + + X600 = "#5e35b1", + + X700 = "#512da8", + + X800 = "#4527a0", + + X900 = "#311b92", + + A100 = "#b388ff", + + A200 = "#7c4dff", + + A400 = "#651fff", + + A700 = "#6200ea" + }; + + public static readonly PaletteShade Green = new PaletteShade + { + X50 = "#e8f5e9", + + X100 = "#c8e6c9", + + X200 = "#a5d6a7", + + X300 = "#81c784", + + X400 = "#66bb6a", + + X500 = "#4caf50", + + X600 = "#43a047", + + X700 = "#388e3c", + + X800 = "#2e7d32", + + X900 = "#1b5e20", + + A100 = "#b9f6ca", + + A200 = "#69f0ae", + + A400 = "#00e676", + + A700 = "#00c853" + }; + + public static readonly PaletteShade Grey = new PaletteShade + { + X50 = "#fafafa", + + X100 = "#f5f5f5", + + X200 = "#eeeeee", + + X300 = "#e0e0e0", + + X400 = "#bdbdbd", + + X500 = "#9e9e9e", + + X600 = "#757575", + + X700 = "#616161", + + X800 = "#424242", + + X900 = "#212121", + + A100 = "#d5d5d5", + + A200 = "#aaaaaa", + + A400 = "#303030", + + A700 = "#616161", + }; + + public static readonly PaletteShade Indigo = new PaletteShade + { + X50 = "#e8eaf6", + + X100 = "#c5cae9", + + X200 = "#9fa8da", + + X300 = "#7986cb", + + X400 = "#5c6bc0", + + X500 = "#3f51b5", + + X600 = "#3949ab", + + X700 = "#303f9f", + + X800 = "#283593", + + X900 = "#1a237e", + + A100 = "#8c9eff", + + A200 = "#536dfe", + + A400 = "#3d5afe", + + A700 = "#304ffe" + }; + + public static readonly PaletteShade LightBlue = new PaletteShade + { + X50 = "#e1f5fe", + + X100 = "#b3e5fc", + + X200 = "#81d4fa", + + X300 = "#4fc3f7", + + X400 = "#29b6f6", + + X500 = "#03a9f4", + + X600 = "#039be5", + + X700 = "#0288d1", + + X800 = "#0277bd", + + X900 = "#01579b", + + A100 = "#80d8ff", + + A200 = "#40c4ff", + + A400 = "#00b0ff", + + A700 = "#0091ea" + }; + + public static readonly PaletteShade LightGreen = new PaletteShade + { + X50 = "#f1f8e9", + + X100 = "#dcedc8", + + X200 = "#c5e1a5", + + X300 = "#aed581", + + X400 = "#9ccc65", + + X500 = "#8bc34a", + + X600 = "#7cb342", + + X700 = "#689f38", + + X800 = "#558b2f", + + X900 = "#33691e", + + A100 = "#ccff90", + + A200 = "#b2ff59", + + A400 = "#76ff03", + + A700 = "#64dd17" + }; + + public static readonly PaletteShade Lime = new PaletteShade + { + X50 = "#f9fbe7", + + X100 = "#f0f4c3", + + X200 = "#e6ee9c", + + X300 = "#dce775", + + X400 = "#d4e157", + + X500 = "#cddc39", + + X600 = "#c0ca33", + + X700 = "#afb42b", + + X800 = "#9e9d24", + + X900 = "#827717", + + A100 = "#f4ff81", + + A200 = "#eeff41", + + A400 = "#c6ff00", + + A700 = "#aeea00" + }; + + public static readonly PaletteShade Orange = new PaletteShade + { + X50 = "#fff3e0", + + X100 = "#ffe0b2", + + X200 = "#ffcc80", + + X300 = "#ffb74d", + + X400 = "#ffa726", + + X500 = "#ff9800", + + X600 = "#fb8c00", + + X700 = "#f57c00", + + X800 = "#ef6c00", + + X900 = "#e65100", + + A100 = "#ffd180", + + A200 = "#ffab40", + + A400 = "#ff9100", + + A700 = "#ff6d00" + }; + + public static readonly PaletteShade Pink = new PaletteShade + { + X50 = "#fce4ec", + + X100 = "#f8bbd0", + + X200 = "#f48fb1", + + X300 = "#f06292", + + X400 = "#ec407a", + + X500 = "#e91e63", + + X600 = "#d81b60", + + X700 = "#c2185b", + + X800 = "#ad1457", + + X900 = "#880e4f", + + A100 = "#ff80ab", + + A200 = "#ff4081", + + A400 = "#f50057", + + A700 = "#c51162" + }; + + public static readonly PaletteShade Purple = new PaletteShade + { + X50 = "#f3e5f5", + + X100 = "#e1bee7", + + X200 = "#ce93d8", + + X300 = "#ba68c8", + + X400 = "#ab47bc", + + X500 = "#9c27b0", + + X600 = "#8e24aa", + + X700 = "#7b1fa2", + + X800 = "#6a1b9a", + + X900 = "#4a148c", + + A100 = "#ea80fc", + + A200 = "#e040fb", + + A400 = "#d500f9", + + A700 = "#aa00ff" + }; + + public static readonly PaletteShade Red = new PaletteShade + { + X50 = "#ffebee", + + X100 = "#ffcdd2", + + X200 = "#ef9a9a", + + X300 = "#e57373", + + X400 = "#ef5350", + + X500 = "#f44336", + + X600 = "#e53935", + + X700 = "#d32f2f", + + X800 = "#c62828", + + X900 = "#b71c1c", + + A100 = "#ff8a80", + + A200 = "#ff5252", + + A400 = "#ff1744", + + A700 = "#d50000" + }; + + public static readonly PaletteShade Teal = new PaletteShade + { + X50 = "#e0f2f1", + + X100 = "#b2dfdb", + + X200 = "#80cbc4", + + X300 = "#4db6ac", + + X400 = "#26a69a", + + X500 = "#009688", + + X600 = "#00897b", + + X700 = "#00796b", + + X800 = "#00695c", + + X900 = "#004d40", + + A100 = "#a7ffeb", + + A200 = "#64ffda", + + A400 = "#1de9b6", + + A700 = "#00bfa5" + }; + + public static readonly PaletteShade Yellow = new PaletteShade + { + X50 = "#fffde7", + + X100 = "#fff9c4", + + X200 = "#fff59d", + + X300 = "#fff176", + + X400 = "#ffee58", + + X500 = "#ffeb3b", + + X600 = "#fdd835", + + X700 = "#fbc02d", + + X800 = "#f9a825", + + X900 = "#f57f17", + + A100 = "#ffff8d", + + A200 = "#ffff00", + + A400 = "#ffea00", + + A700 = "#ffd600" + }; + + public static readonly PaletteObject Light = new PaletteObject + { + // The colors used to style the text. + Text = new PaletteText + { + // The most important text. + Primary = "rgba(0, 0, 0, 0.87)", + + // Secondary text. + Secondary = "rgba(0, 0, 0, 0.54)", + + // Disabled text have even lower visual prominence. + Disabled = "rgba(0, 0, 0, 0.38)", + + // Text hints. + Hint = "rgba(0, 0, 0, 0.38)", + + Custom = new Dictionary(), + }, + + // The color used to divide different elements. + Divider = "rgba(0, 0, 0, 0.12)", + + // The background colors used to style the surfaces. + // Consistency between these values is important. + Background = new PaletteBackground + { + Paper = PaletteColors.Common.White, + + Default = PaletteColors.Grey.X50, + + Custom = new Dictionary(), + }, + + // The colors used to style the action elements. + Action = new PaletteAction + { + // The color of an active action like an icon button. + Active = "rgba(0, 0, 0, 0.54)", + + // The color of an hovered action. + Hover = "rgba(0, 0, 0, 0.08)", + + HoverOpacity = 0.08m, + + // The color of a selected action. + Selected = "rgba(0, 0, 0, 0.14)", + + // The color of a disabled action. + Disabled = "rgba(0, 0, 0, 0.26)", + + // The background color of a disabled action. + DisabledBackground = "rgba(0, 0, 0, 0.12)", + + Custom = new Dictionary(), + }, + + Custom = new PaletteCustom + { + LightOrDark = "#e0e0e0", + + LightOrDarkContrastText = "rgba(0, 0, 0, 0.87)", + + ContentBackground = "#f4f6f8", + + ContentBackgroundDefault = "#f5f5f5", + + PaletteOpacity = "0.38", + + PaletteCommonAlternate = "#000", + + LayoutBackward = "#f5f5f5", + + LayoutForward = "#fff", + + PrimaryMain = "#1976d2", + + PrimaryContrastText = "#fff" + } + }; + + public static readonly PaletteObject Dark = new PaletteObject + { + // The colors used to style the text. + Text = new PaletteText + { + // The most important text. + Primary = PaletteColors.Common.White, + + // Secondary text. + Secondary = "rgba(255, 255, 255, 0.7)", + + // Disabled text have even lower visual prominence. + Disabled = "rgba(255, 255, 255, 0.5)", + + // Text hints. + Hint = "rgba(255, 255, 255, 0.5)", + + // Icon = "rgba(255, 255, 255, 0.5)" + + Custom = new Dictionary(), + }, + + // The color used to divide different elements. + Divider = "rgba(255, 255, 255, 0.12)", + + // The background colors used to style the surfaces. + // Consistency between these values is important. + Background = new PaletteBackground + { + Paper = PaletteColors.Grey.X800, + + Default = "#303030", + + Custom = new Dictionary(), + }, + + // The colors used to style the action elements. + Action = new PaletteAction + { + // The color of an active action like an icon button. + Active = PaletteColors.Common.White, + + // The color of an hovered action. + Hover = "rgba(255, 255, 255, 0.1)", + + HoverOpacity = 0.1m, + + // The color of a selected action. + Selected = "rgba(255, 255, 255, 0.2)", + + // The color of a disabled action. + Disabled = "rgba(255, 255, 255, 0.3)", + + // The background color of a disabled action. + DisabledBackground = "rgba(255, 255, 255, 0.12)", + + Custom = new Dictionary(), + }, + + Custom = new PaletteCustom + { + LightOrDark = "#616161", + + LightOrDarkContrastText = "#fff", + + ContentBackground = "rgb(18, 18, 18)", + + ContentBackgroundDefault = "#333", + + PaletteOpacity = "0.3", + + PaletteCommonAlternate = "#fff", + + LayoutBackward = "#333", + + LayoutForward = "#424242", + + PrimaryMain = "#333", + + PrimaryContrastText = "#fff" + } + }; + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteCommon.cs b/Theme/src/Palette/PaletteCommon.cs new file mode 100644 index 0000000..94868c1 --- /dev/null +++ b/Theme/src/Palette/PaletteCommon.cs @@ -0,0 +1,18 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteCommon + { + [JsonPropertyName("black")] + public string Black { get; set; } + + [JsonPropertyName("white")] + public string White { get; set; } + + [JsonPropertyName("custom")] + public IDictionary Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteCustom.cs b/Theme/src/Palette/PaletteCustom.cs new file mode 100644 index 0000000..f2f0ec5 --- /dev/null +++ b/Theme/src/Palette/PaletteCustom.cs @@ -0,0 +1,37 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class PaletteCustom + { + [JsonPropertyName("lightOrDark")] + public string LightOrDark { set; get; } + + [JsonPropertyName("lightOrDarkContrastText")] + public string LightOrDarkContrastText { set; get; } + + [JsonPropertyName("primaryMain")] + public string PrimaryMain { set; get; } + + [JsonPropertyName("primaryContrastText")] + public string PrimaryContrastText { set; get; } + + [JsonPropertyName("contentBackground")] + public string ContentBackground { set; get; } + + [JsonPropertyName("contentBackgroundDefault")] + public string ContentBackgroundDefault { set; get; } + + [JsonPropertyName("paletteCommonAlternate")] + public string PaletteCommonAlternate { set; get; } + + [JsonPropertyName("paletteOpacity")] + public string PaletteOpacity { set; get; } + + [JsonPropertyName("layoutBackward")] + public string LayoutBackward { set; get; } + + [JsonPropertyName("layoutForward")] + public string LayoutForward { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteObject.cs b/Theme/src/Palette/PaletteObject.cs new file mode 100644 index 0000000..2e0ecc0 --- /dev/null +++ b/Theme/src/Palette/PaletteObject.cs @@ -0,0 +1,24 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteObject + { + [JsonPropertyName("action")] + public PaletteAction Action { get; set; } + + [JsonPropertyName("background")] + public PaletteBackground Background { get; set; } + + [JsonPropertyName("divider")] + public string Divider { get; set; } + + [JsonPropertyName("text")] + public PaletteText Text { get; set; } + + [JsonPropertyName("custom")] + public PaletteCustom Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteShade.cs b/Theme/src/Palette/PaletteShade.cs new file mode 100644 index 0000000..04bd756 --- /dev/null +++ b/Theme/src/Palette/PaletteShade.cs @@ -0,0 +1,86 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteShade + { + [JsonPropertyName("100")] + public string X100 { get; set; } + + [JsonPropertyName("200")] + public string X200 { get; set; } + + [JsonPropertyName("300")] + public string X300 { get; set; } + + [JsonPropertyName("400")] + public string X400 { get; set; } + + [JsonPropertyName("50")] + public string X50 { get; set; } + + [JsonPropertyName("500")] + public string X500 { get; set; } + + [JsonPropertyName("600")] + public string X600 { get; set; } + + [JsonPropertyName("700")] + public string X700 { get; set; } + + [JsonPropertyName("800")] + public string X800 { get; set; } + + [JsonPropertyName("900")] + public string X900 { get; set; } + + [JsonPropertyName("A100")] + public string A100 { get; set; } + + [JsonPropertyName("A200")] + public string A200 { get; set; } + + [JsonPropertyName("A400")] + public string A400 { get; set; } + + [JsonPropertyName("A700")] + public string A700 { get; set; } + + public PaletteShade() + { + } + + public PaletteShade(PaletteShade color) + { + X50 = color.X50; + + X100 = color.X100; + + X200 = color.X200; + + X300 = color.X300; + + X400 = color.X400; + + X500 = color.X500; + + X600 = color.X600; + + X700 = color.X700; + + X800 = color.X800; + + X900 = color.X900; + + A100 = color.A100; + + A200 = color.A200; + + A400 = color.A400; + + A700 = color.A700; + } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteText.cs b/Theme/src/Palette/PaletteText.cs new file mode 100644 index 0000000..2a6289f --- /dev/null +++ b/Theme/src/Palette/PaletteText.cs @@ -0,0 +1,24 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class PaletteText + { + [JsonPropertyName("disabled")] + public string Disabled { get; set; } + + [JsonPropertyName("hint")] + public string Hint { get; set; } + + [JsonPropertyName("primary")] + public string Primary { get; set; } + + [JsonPropertyName("secondary")] + public string Secondary { get; set; } + + [JsonPropertyName("custom")] + public IDictionary Custom { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Palette/PaletteType.cs b/Theme/src/Palette/PaletteType.cs new file mode 100644 index 0000000..f49dd5a --- /dev/null +++ b/Theme/src/Palette/PaletteType.cs @@ -0,0 +1,8 @@ +using System.Collections.Generic; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public enum PaletteType { Dark, Light }; +} \ No newline at end of file diff --git a/Theme/src/Shadow/Shadow.cs b/Theme/src/Shadow/Shadow.cs new file mode 100644 index 0000000..8cdc234 --- /dev/null +++ b/Theme/src/Shadow/Shadow.cs @@ -0,0 +1,52 @@ +using System; + +namespace Skclusive.Material.Theme +{ + public static class Shadow + { + private static readonly string ShadowKeyUmbraOpacity = "0.2"; + + private static readonly string ShadowKeyPenumbraOpacity = "0.14"; + + private static readonly string ShadowAmbientShadowOpacity = "0.12"; + + public static string CreateShadow(params int[] px) + { + return string.Join(",", new string [] + { + $"{px[0]}px {px[1]}px {px[2]}px {px[3]}px rgba(0,0,0,{ShadowKeyUmbraOpacity})", + $"{px[4]}px {px[5]}px {px[6]}px {px[7]}px rgba(0,0,0,{ShadowKeyPenumbraOpacity})", + $"{px[8]}px {px[9]}px {px[10]}px {px[11]}px rgba(0,0,0,{ShadowAmbientShadowOpacity})" + }); + } + + public static string[] Shadows = new string [] + { + "none", + CreateShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), + CreateShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), + CreateShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), + CreateShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), + CreateShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), + CreateShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), + CreateShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), + CreateShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), + CreateShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), + CreateShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), + CreateShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), + CreateShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), + CreateShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), + CreateShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), + CreateShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), + CreateShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), + CreateShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), + CreateShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), + CreateShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), + CreateShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), + CreateShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), + CreateShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), + CreateShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), + CreateShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8) + }; + } +} \ No newline at end of file diff --git a/Theme/src/Shape/Shape.cs b/Theme/src/Shape/Shape.cs new file mode 100644 index 0000000..aa0e1ed --- /dev/null +++ b/Theme/src/Shape/Shape.cs @@ -0,0 +1,11 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class Shape + { + [JsonPropertyName("borderRadius")] + public short BorderRadius { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Shape/ShapeConfig.cs b/Theme/src/Shape/ShapeConfig.cs new file mode 100644 index 0000000..1a8e89f --- /dev/null +++ b/Theme/src/Shape/ShapeConfig.cs @@ -0,0 +1,11 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class ShapeConfig + { + [JsonPropertyName("borderRadius")] + public short? BorderRadius { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Shape/ShapeFactory.cs b/Theme/src/Shape/ShapeFactory.cs new file mode 100644 index 0000000..d7864cf --- /dev/null +++ b/Theme/src/Shape/ShapeFactory.cs @@ -0,0 +1,17 @@ +using System; +using System.Globalization; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public static class ShapeFactory + { + public static Shape CreateShape(ShapeConfig config) + { + return new Shape + { + BorderRadius = config?.BorderRadius ?? 4 + }; + } + } +} \ No newline at end of file diff --git a/Theme/src/Spacing/Spacing.cs b/Theme/src/Spacing/Spacing.cs new file mode 100644 index 0000000..62680b4 --- /dev/null +++ b/Theme/src/Spacing/Spacing.cs @@ -0,0 +1,65 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class Spacing + { + public Spacing() + : this(8, "px") + { + } + + public Spacing(short input, string unit) + : this ((factor) => factor * input, unit) + { + Input = input; + } + + public Spacing(Func transform, string unit = "px") + { + Transform = transform; + + Unit = unit; + } + + private Func Transform { set; get; } + + [JsonPropertyName("input")] + public short? Input { get; set; } + + [JsonPropertyName("unit")] + public string Unit { get; set; } + + private string _Transform(short value, bool unit) + { + var suffix = unit ? Unit : string.Empty; + return $"{Transform(value).ToCleanString(leadingZero: true)}{suffix}"; + } + + public string Value(bool unit = false) + { + return Value(1, unit); + } + + public string Value(short value, bool unit = false) + { + return _Transform(value, unit); + } + + public string Value(short value1, short value2) + { + return $"{_Transform(value1, true)} {_Transform(value2, true)}"; + } + + public string Value(short value1, short value2, short value3) + { + return $"{_Transform(value1, true)} {_Transform(value2, true)} {_Transform(value3, true)}"; + } + + public string Value(short value1, short value2, short value3, short value4) + { + return $"{_Transform(value1, true)} {_Transform(value2, true)} {_Transform(value3, true)} {_Transform(value4, true)}"; + } + } +} \ No newline at end of file diff --git a/Theme/src/Spacing/SpacingConfig.cs b/Theme/src/Spacing/SpacingConfig.cs new file mode 100644 index 0000000..b5919e3 --- /dev/null +++ b/Theme/src/Spacing/SpacingConfig.cs @@ -0,0 +1,17 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class SpacingConfig + { + [JsonPropertyName("input")] + public short? Input { get; set; } + + [JsonPropertyName("unit")] + public string Unit { get; set; } + + [JsonIgnore] + public Func Transform { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Spacing/SpacingFactory.cs b/Theme/src/Spacing/SpacingFactory.cs new file mode 100644 index 0000000..c083692 --- /dev/null +++ b/Theme/src/Spacing/SpacingFactory.cs @@ -0,0 +1,22 @@ +using System; +using System.Globalization; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public static class SpacingFactory + { + public static Spacing CreateSpacing(SpacingConfig config) + { + var input = config?.Input ?? 8; + + var unit = config?.Unit ?? "px"; + + var transform = config?.Transform; + + var spacing = transform != null ? new Spacing(transform, unit) : new Spacing(input, unit); + + return spacing; + } + } +} \ No newline at end of file diff --git a/Theme/src/Theme.csproj b/Theme/src/Theme.csproj index 9d0d3fd..1e9f436 100644 --- a/Theme/src/Theme.csproj +++ b/Theme/src/Theme.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Theme Skclusive.Material.Theme Skclusive.Material.Theme @@ -17,7 +16,15 @@ - + + + + + + + diff --git a/Theme/src/Theme/Direction.cs b/Theme/src/Theme/Direction.cs new file mode 100644 index 0000000..15dd15c --- /dev/null +++ b/Theme/src/Theme/Direction.cs @@ -0,0 +1,13 @@ +using System; + +namespace Skclusive.Material.Theme +{ + public enum Direction + { + Default, + + LTR, + + RTL + } +} \ No newline at end of file diff --git a/Theme/src/Theme/IStyleProducer.cs b/Theme/src/Theme/IStyleProducer.cs new file mode 100644 index 0000000..0ecf766 --- /dev/null +++ b/Theme/src/Theme/IStyleProducer.cs @@ -0,0 +1,10 @@ + +using System.Collections.Generic; + +namespace Skclusive.Material.Theme +{ + public interface IStyleProducer + { + IDictionary Variables(ThemeValue theme); + } +} \ No newline at end of file diff --git a/Theme/src/Theme/IThemeProducer.cs b/Theme/src/Theme/IThemeProducer.cs new file mode 100644 index 0000000..9423ca1 --- /dev/null +++ b/Theme/src/Theme/IThemeProducer.cs @@ -0,0 +1,12 @@ + +namespace Skclusive.Material.Theme +{ + public interface IThemeProducer + { + string BuildCommon(ThemeValue theme); + + string BuildScheme(ThemeValue theme); + + string BuildMediaScheme(ThemeValue theme); + } +} \ No newline at end of file diff --git a/Theme/src/Theme/ThemeBuilder.cs b/Theme/src/Theme/ThemeBuilder.cs deleted file mode 100644 index 83e3731..0000000 --- a/Theme/src/Theme/ThemeBuilder.cs +++ /dev/null @@ -1,737 +0,0 @@ -namespace Skclusive.Material.Theme -{ - public class ThemeBuilder - { - public static readonly ThemeConfig COMMON = BuildCommon(); - - public static readonly ThemeConfig LIGHT = BuildLight(); - - public static readonly ThemeConfig DARK = BuildDark(); - - public static ThemeConfig BuildCommon() - { - var fontFamily = @"""Roboto"", ""Helvetica"", ""Arial"", sans-serif"; - - return new ThemeConfig - { - Name = "ThemeCommon", - - FontSize = "14", - - HtmlFontSize = "16", - - Spacing = "8", - - ShapeBorderRadius = "4", - - TransitionBoxShadow = "box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms", - - ZindexAppBar = "1100", - - ZindexDrawer = "1200", - - Shadow0 = "none", - - Shadow1 = "0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)", - - Shadow2 = "0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)", - - Shadow3 = "0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)", - - Shadow4 = "0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)", - - Shadow5 = "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)", - - Shadow6 = "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)", - - Shadow7 = "0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)", - - Shadow8 = "0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)", - - Shadow9 = "0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)", - - Shadow10 = "0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)", - - Shadow11 = "0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)", - - Shadow12 = "0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)", - - Shadow13 = "0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)", - - Shadow14 = "0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)", - - Shadow15 = "0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)", - - Shadow16 = "0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)", - - Shadow17 = "0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)", - - Shadow18 = "0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)", - - Shadow19 = "0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)", - - Shadow20 = "0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)", - - Shadow21 = "0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)", - - Shadow22 = "0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)", - - Shadow23 = "0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)", - - Shadow24 = "0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)", - - Typography = new TypographyConfigs - { - FontFamily = fontFamily, - - FontSizeMedium = "1.25rem", - - FontSizeNormal = "0.75rem", - - FontWeightLight = "300", - - FontWeightRegular = "400", - - FontWeightMedium = "500", - - FontWeightBold = "700", - - Body1 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "1rem", - - FontWeight = "400", - - LineHeight = "1.5", - - LetterSpacing = "0.00938em" - }, - - Body2 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "0.875rem", - - FontWeight = "400", - - LineHeight = "1.43", - - LetterSpacing = "0.01071em" - }, - - Caption = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "0.75rem", - - FontWeight = "400", - - LineHeight = "1.66", - - LetterSpacing = "0.03333em" - }, - - H1 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "6rem", - - FontWeight = "300", - - LineHeight = "1", - - LetterSpacing = "-0.01562em" - }, - - H2 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "3.75rem", - - FontWeight = "300", - - LineHeight = "1", - - LetterSpacing = "-0.00833em" - }, - - H3 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "3rem", - - FontWeight = "400", - - LineHeight = "1.04", - - LetterSpacing = "0em" - }, - - H4 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "2.125rem", - - FontWeight = "400", - - LineHeight = "1.17", - - LetterSpacing = "0.00735em" - }, - - H5 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "1.5rem", - - FontWeight = "400", - - LineHeight = "1.33", - - LetterSpacing = "00em" - }, - - H6 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "1.25rem", - - FontWeight = "500", - - LineHeight = "1.6", - - LetterSpacing = "0.0075em" - }, - - Subtitle1 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "1rem", - - FontWeight = "400", - - LineHeight = "1.75", - - LetterSpacing = "0.00938em" - }, - - Subtitle2 = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "0.875rem", - - FontWeight = "500", - - LineHeight = "1.57", - - LetterSpacing = "0.00714em" - }, - - Overline = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "0.75rem", - - FontWeight = "400", - - LineHeight = "2.66", - - LetterSpacing = "0.08333em", - - TextTransform = "uppercase" - }, - - Button = new TypographyConfig - { - FontFamily = fontFamily, - - FontSize = "0.875rem", - - FontWeight = "500", - - LineHeight = "1.75", - - LetterSpacing = "0.02857em", - - TextTransform = "uppercase" - } - }, - - Palette = new PaletteConfig - { - Common = new CommonConfig - { - White = "#fff", - - Black = "#000", - - Color = "''", /* need to find */ - } - } - }; - } - - public static ThemeConfig BuildLight() - { - var theme = BuildCommon(); - - theme.IsDark = false; - - theme.Name = "ThemeLight"; - - theme.Palette = new PaletteConfig - { - Common = new CommonConfig - { - White = "#fff", - - Black = "#000", - - Color = "''", /* need to find */ - - Background = "#000" - }, - - Main = new MainConfig - { - Background = "#fff" - }, - - Switch = new SwitchConfig - { - Color = "#fafafa", /*--theme-palette-grey-50*/ - - DisabledColor = "#bdbdbd", /*--theme-palette-grey-400*/ - - DisabledOpacity = "0.12" - }, - - Text = new TextConfig - { - Color = "''", /* need to find */ - - Primary = "rgba(0, 0, 0, 0.87)", - - PrimaryHover = "rgba(0, 0, 0, 0.08)", - - Secondary = "rgba(0, 0, 0, 0.54)", - - Disabled = "rgba(0, 0, 0, 0.38)", - - Hint = "rgba(0, 0, 0, 0.38)" - }, - - Background = new BackgroundConfig - { - Paper = "#fff", - - Default = "#fff", - - Level1 = "#fff", - - Level2 = "#f5f5f5" - }, - - Action = new ActionConfig - { - Active = "rgba(0, 0, 0, 0.54)", - - Hover = "rgba(0, 0, 0, 0.08)", - - HoverOpacity = "0.08", - - Selected = "rgba(0, 0, 0, 0.14)", - - Disabled = "rgba(0, 0, 0, 0.26)", - - DisabledBackground = "rgba(0, 0, 0, 0.12)" - }, - - Primary = new PrimaryConfig - { - Main = "#1976d2", - - Light = "rgb(71, 145, 219)", - - Dark = "rgb(17, 82, 147)", - - ContrastText = "#fff", - - Alternate = "rgb(17, 82, 147)", - - Current = "rgb(17, 82, 147)", - - MainHover = "rgba(25, 118, 210, 0.08)", - - MainBorder = "rgba(25, 118, 210, 0.5)", - - MainBackground = "rgb(167, 202, 237)" - }, - - Secondary = new SecondaryConfig - { - Main = "rgb(220, 0, 78)", - - Light = "rgb(227, 51, 113)", - - Dark = "rgb(154, 0, 54)", - - Current = "rgb(154, 0, 54)", /* need to find */ - - MainHover = "rgba(220, 0, 78, 0.08)", - - MainBorder = "rgba(220, 0, 78, 0.5)", - - MainBackground = "rgb(241, 158, 187)", - - ContrastText = "#fff" - }, - - Error = new ColorConfig - { - Light = "#e57373", - - Main = "#f44336", - - Dark = "#d32f2f", - - ContrastText = "#fff" - }, - - Warning = new ColorConfig - { - Light = "#ffb74d", - - Main = "#ff9800", - - Dark = "#f57c00", - - ContrastText = "rgba(0, 0, 0, 0.87)" - }, - - Info = new ColorConfig - { - Light = "#64b5f6", - - Main = "#2196f3", - - Dark = "#1976d2", - - ContrastText = "#fff" - }, - - Success = new ColorConfig - { - Light = "#81c784", - - Main = "#4caf50", - - Dark = "#388e3c", - - ContrastText = "rgba(0, 0, 0, 0.87)" - }, - - Divider = new DividerConfig - { - Color = "rgba(0, 0, 0, 0.12)", - - Background = "rgba(0, 0, 0, 0.08)", - - BorderBottom = "rgba(224, 224, 224, 1)" - }, - - Border = new BorderConfig - { - Outlined = "rgba(0, 0, 0, 0.23)", - - Bottom = "rgba(0, 0, 0, 0.42)" - }, - - Table = new TableConfig - { - RowHover = "rgba(0, 0, 0, 0.07)", - - RowSelected = "rgba(0, 0, 0, 0.04)" - }, - - Grey = new GreyConfig - { - C300 = "#e0e0e0", /* need to find */ - - C50 = "#fafafa", /* need to find */ - - A100 = "#d5d5d5", /* need to find */ - - ContrastTextC300 = "rgba(0, 0, 0, 0.87)", /* need to find */ - - Background = "#f5f5f5", - - Color = "#bdbdbd", - - LightOrDark = "#e0e0e0", - - LightOrDarkContrastText = "rgba(0, 0, 0, 0.87)" - }, - - Custom = new CustomConfig - { - ContentBackground = "#f4f6f8", - - ContentBackgroundDefault = "#f5f5f5", - - PaletteOpacity = "0.38", - - PaletteCommonAlternate = "#000", - - LayoutBackward = "#f5f5f5", - - LayoutForward = "#fff", - - PrimaryMain = "#1976d2", - - PrimaryContrastText = "#fff" - } - }; - - return theme; - } - - public static ThemeConfig BuildDark() - { - var theme = BuildCommon(); - - theme.IsDark = true; - - theme.Name = "ThemeDark"; - - theme.Palette = new PaletteConfig - { - Common = new CommonConfig - { - White = "#fff", - - Black = "#000", - - Color = "''", /* need to find */ - - Background = "#fff" - }, - - Main = new MainConfig - { - Background = "#212121" - }, - - Switch = new SwitchConfig - { - Color = "#bdbdbd", /*--theme-palette-grey-400*/ - - DisabledColor = "#424242", /*--theme-palette-grey-800*/ - - DisabledOpacity = "0.1" - }, - - Text = new TextConfig - { - Color = "''", /* need to find */ - - Primary = "#fff", - - PrimaryHover = "rgba(255, 255, 255, 0.1)", - - Secondary = "rgba(255, 255, 255, 0.7)", - - Disabled = "rgba(255, 255, 255, 0.5)", - - Hint = "rgba(255, 255, 255, 0.5)" - }, - - Background = new BackgroundConfig - { - Paper = "#424242", - - Default = "#121212", // or "#303030"? - - Level1 = "#212121", - - Level2 = "#333" - }, - - Action = new ActionConfig - { - Active = "#fff", - - Hover = "rgba(255, 255, 255, 0.1)", - - HoverOpacity = "0.1", - - Selected = "rgba(255, 255, 255, 0.2)", - - Disabled = "rgba(255, 255, 255, 0.3)", - - DisabledBackground = "rgba(255, 255, 255, 0.12)" - }, - - Primary = new PrimaryConfig - { - Main = "#90caf9", - - Light = "rgb(166, 212, 250)", - - Dark = "rgb(100, 141, 174)", - - ContrastText = "rgba(0, 0, 0, 0.87)", - - Alternate = "rgb(166, 212, 250)", - - Current = "rgb(100, 141, 174)", - - MainHover = "rgba(144, 202, 249, 0.1)", - - MainBorder = "rgba(144, 202, 249, 0.5)", - - MainBackground = "rgb(72, 101, 124)" - }, - - Secondary = new SecondaryConfig - { - Main = "#f48fb1", - - Light = "rgb(246, 165, 192)", - - Dark = "rgb(170, 100, 123)", - - ContrastText = "rgba(0, 0, 0, 0.87)", - - MainHover = "rgba(244, 143, 177, 0.1)", - - MainBorder = "rgba(244, 143, 177, 0.5)", - - MainBackground = "rgb(122, 71, 88)", - - Current = "rgb(154, 0, 54)" /* need to find */ - }, - - Error = new ColorConfig - { - Light = "#e57373", - - Main = "#f44336", - - Dark = "#d32f2f", - - ContrastText = "#fff" - }, - - Warning = new ColorConfig - { - Light = "#ffb74d", - - Main = "#ff9800", - - Dark = "#f57c00", - - ContrastText = "rgba(0, 0, 0, 0.87)" - }, - - Info = new ColorConfig - { - Light = "#64b5f6", - - Main = "#2196f3", - - Dark = "#1976d2", - - ContrastText = "#fff" - }, - - Success = new ColorConfig - { - Light = "#81c784", - - Main = "#4caf50", - - Dark = "#388e3c", - - ContrastText = "rgba(0, 0, 0, 0.87)" - }, - - Divider = new DividerConfig - { - Color = "rgba(255, 255, 255, 0.12)", - - Background = "rgba(255, 255, 255, 0.08)", - - BorderBottom = "rgba(81, 81, 81, 1)" - }, - - Border = new BorderConfig - { - Outlined = "rgba(255, 255, 255, 0.23)", - - Bottom = "rgba(255, 255, 255, 0.7)" - }, - - Table = new TableConfig - { - RowHover = "rgba(255, 255, 255, 0.14)", - - RowSelected = "rgba(255, 255, 255, 0.08)" - }, - - Grey = new GreyConfig - { - C300 = "#e0e0e0", - - C50 = "#fafafa", - - A100 = "#d5d5d5", - - ContrastTextC300 = "rgba(0, 0, 0, 0.87)", - - Background = "#212121", - - Color = "#757575", - - LightOrDark = "#616161", - - LightOrDarkContrastText = "#fff" - }, - - Custom = new CustomConfig - { - ContentBackground = "rgb(18, 18, 18)", - - ContentBackgroundDefault = "#333", - - PaletteOpacity = "0.3", - - PaletteCommonAlternate = "#fff", - - LayoutBackward = "#333", - - LayoutForward = "#424242", - - PrimaryMain = "#333", - - PrimaryContrastText = "#fff" - } - }; - - return theme; - } - } -} \ No newline at end of file diff --git a/Theme/src/Theme/ThemeConfig.cs b/Theme/src/Theme/ThemeConfig.cs index e143bf2..e658577 100644 --- a/Theme/src/Theme/ThemeConfig.cs +++ b/Theme/src/Theme/ThemeConfig.cs @@ -1,334 +1,38 @@ +using System; +using System.Text.Json.Serialization; + namespace Skclusive.Material.Theme { public class ThemeConfig { - public string Name { set; get; } - - public string Spacing { set; get; } - - public string ShapeBorderRadius { set; get; } - - public string TransitionBoxShadow { set; get; } - - public string FontSize { set; get; } - - public string HtmlFontSize { set; get; } - - public string ZindexAppBar { set; get; } - - public string ZindexDrawer { set; get; } - - public string Shadow0 { set; get; } - - public string Shadow1 { set; get; } - - public string Shadow2 { set; get; } - - public string Shadow3 { set; get; } - - public string Shadow4 { set; get; } - - public string Shadow5 { set; get; } - - public string Shadow6 { set; get; } - - public string Shadow7 { set; get; } - - public string Shadow8 { set; get; } - - public string Shadow9 { set; get; } - - public string Shadow10 { set; get; } - - public string Shadow11 { set; get; } - - public string Shadow12 { set; get; } + [JsonPropertyName("shape")] + public ShapeConfig Shape { set; get; } - public string Shadow13 { set; get; } + [JsonPropertyName("breakpoints")] + public BreakpointsConfig Breakpoints { set; get; } - public string Shadow14 { set; get; } - - public string Shadow15 { set; get; } - - public string Shadow16 { set; get; } - - public string Shadow17 { set; get; } - - public string Shadow18 { set; get; } - - public string Shadow19 { set; get; } - - public string Shadow20 { set; get; } - - public string Shadow21 { set; get; } - - public string Shadow22 { set; get; } - - public string Shadow23 { set; get; } - - public string Shadow24 { set; get; } - - public bool IsDark { set; get; } - - public TypographyConfigs Typography { set; get; } + [JsonPropertyName("direction")] + public Direction? Direction { set; get; } + [JsonPropertyName("palette")] public PaletteConfig Palette { set; get; } - } - - public class TypographyConfig - { - public string FontSize { set; get; } - - public string FontFamily { set; get; } - - public string FontWeight { set; get; } - - public string LineHeight { set; get; } - - public string LetterSpacing { set; get; } - - public string TextTransform { set; get; } - } - - public class TypographyConfigs - { - public string FontFamily { set; get; } - - public string FontSizeMedium { set; get; } - - public string FontSizeNormal { set; get; } - - public string FontWeightLight { set; get; } - - public string FontWeightRegular { set; get; } - - public string FontWeightMedium { set; get; } - - public string FontWeightBold { set; get; } - - public TypographyConfig Button { set; get; } - - public TypographyConfig Overline { set; get; } - - public TypographyConfig Subtitle1 { set; get; } - - public TypographyConfig Subtitle2 { set; get; } - - public TypographyConfig Caption { set; get; } - - public TypographyConfig Body1 { set; get; } - - public TypographyConfig Body2 { set; get; } - - public TypographyConfig H1 { set; get; } - - public TypographyConfig H2 { set; get; } - - public TypographyConfig H3 { set; get; } - - public TypographyConfig H4 { set; get; } - - public TypographyConfig H5 { set; get; } - - public TypographyConfig H6 { set; get; } - } - - public class PaletteConfig - { - public CommonConfig Common { set; get; } - - public MainConfig Main { set; get; } - - public PrimaryConfig Primary { set; get; } - - public SecondaryConfig Secondary { set; get; } - - public ColorConfig Error { set; get; } - - public ColorConfig Warning { set; get; } - - public ColorConfig Info { set; get; } - - public ColorConfig Success { set; get; } - - public SwitchConfig Switch { set; get; } - - public TextConfig Text { set; get; } - - public BackgroundConfig Background { set; get; } - - public ActionConfig Action { set; get; } - - public DividerConfig Divider { set; get; } - - public BorderConfig Border { set; get; } - - public TableConfig Table { set; get; } - - public GreyConfig Grey { set; get; } - - public CustomConfig Custom { set; get; } - } - - public class CommonConfig - { - public string Color { set; get; } - - public string White { set; get; } - - public string Black { set; get; } - - public string Background { set; get; } - } - - public class SwitchConfig - { - public string Color { set; get; } - - public string DisabledColor { set; get; } - - public string DisabledOpacity { set; get; } - } - - public class TextConfig - { - public string Color { set; get; } - - public string Primary { set; get; } - - public string PrimaryHover { set; get; } - - public string Disabled { set; get; } - - public string Secondary { set; get; } - - public string Hint { set; get; } - } - - public class BackgroundConfig - { - public string Paper { set; get; } - - public string Default { set; get; } - - public string Level1 { set; get; } - - public string Level2 { set; get; } - } - - public class ActionConfig - { - public string Active { set; get; } - - public string Hover { set; get; } - - public string HoverOpacity { set; get; } - - public string Selected { set; get; } - - public string Disabled { set; get; } - - public string DisabledBackground { set; get; } - } - - public class ColorConfig - { - public string Main { set; get; } - - public string Light { set; get; } - - public string Dark { set; get; } - - public string ContrastText { set; get; } - } - - public class PrimaryConfig : ColorConfig - { - public string Alternate { set; get; } - - public string Current { set; get; } - - public string MainHover { set; get; } - - public string MainBorder { set; get; } - - public string MainBackground { set; get; } - } - - public class SecondaryConfig : ColorConfig - { - public string Current { set; get; } - - public string MainHover { set; get; } - - public string MainBorder { set; get; } - - public string MainBackground { set; get; } - } - - public class DividerConfig - { - public string Color { set; get; } - - public string Background { set; get; } - - public string BorderBottom { set; get; } - } - - public class BorderConfig - { - public string Outlined { set; get; } - - public string Bottom { set; get; } - } - - public class MainConfig - { - public string Background { set; get; } - } - - public class TableConfig - { - public string RowSelected { set; get; } - - public string RowHover { set; get; } - } - - public class GreyConfig - { - public string C300 { set; get; } - - public string C50 { set; get; } - - public string A100 { set; get; } - - public string ContrastTextC300 { set; get; } - - public string Background { set; get; } - - public string Color { set; get; } - - public string LightOrDark { set; get; } - - public string LightOrDarkContrastText { set; get; } - } - - public class CustomConfig - { - public string PrimaryMain { set; get; } - - public string PrimaryContrastText { set; get; } - public string ContentBackground { set; get; } + [JsonPropertyName("spacing")] + public SpacingConfig Spacing { set; get; } - public string ContentBackgroundDefault { set; get; } + [JsonPropertyName("transitions")] + public TransitionsConfig Transitions { set; get; } - public string PaletteCommonAlternate { set; get; } + [JsonPropertyName("zIndex")] + public ZIndexConfig ZIndex { set; get; } - public string PaletteOpacity { set; get; } + [JsonPropertyName("typography")] + public TypographyConfig Typography { set; get; } - public string LayoutBackward { set; get; } + [JsonIgnore] + public Func TypographyFunc { set; get; } - public string LayoutForward { set; get; } + [JsonPropertyName("shadows")] + public string[] Shadows { set; get; } } } \ No newline at end of file diff --git a/Theme/src/Theme/ThemeFactory.cs b/Theme/src/Theme/ThemeFactory.cs new file mode 100644 index 0000000..a8bd209 --- /dev/null +++ b/Theme/src/Theme/ThemeFactory.cs @@ -0,0 +1,40 @@ +using System; +using System.Globalization; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public static class ThemeFactory + { + public static ThemeValue CreateTheme(ThemeConfig config) + { + var palette = PaletteFactory.CreatePalette(config?.Palette); + + var typographyFunc = config?.TypographyFunc ?? ((Palette p) => config?.Typography); + + var theme = new ThemeValue + { + Direction = config?.Direction ?? Direction.LTR, + + Shape = ShapeFactory.CreateShape(config?.Shape), + + Breakpoints = BreakpointsFactory.CreateBreakpoints(config?.Breakpoints), + + Spacing = SpacingFactory.CreateSpacing(config?.Spacing), + + Palette = palette, + + Typography = TypographyFactory.CreateTypography(palette, typographyFunc), + + Transitions = TransitionsFactory.CreateTransitions(config?.Transitions), + + ZIndex = ZIndexFactory.CreateZIndex(config?.ZIndex), + + Shadows = config?.Shadows ?? Shadow.Shadows.ToArray() + }; + + return theme; + } + } +} \ No newline at end of file diff --git a/Theme/src/Theme/ThemeProducer.cs b/Theme/src/Theme/ThemeProducer.cs index b562546..0488c20 100644 --- a/Theme/src/Theme/ThemeProducer.cs +++ b/Theme/src/Theme/ThemeProducer.cs @@ -1,7 +1,32 @@ +using System.Collections.Generic; +using System.Diagnostics.CodeAnalysis; +using System.Globalization; +using System.Linq; + namespace Skclusive.Material.Theme { - public class ThemeProducer + internal class StyleProducerComparator : IEqualityComparer { + public bool Equals([AllowNull] IStyleProducer left, [AllowNull] IStyleProducer right) + { + return left.GetType().Equals(right.GetType()); + } + + public int GetHashCode([DisallowNull] IStyleProducer obj) + { + return obj.GetType().GetHashCode(); + } + } + + public class ThemeProducer : IThemeProducer + { + public ThemeProducer(IEnumerable styleProducers) + { + StyleProducers = styleProducers.Distinct(new StyleProducerComparator()).ToList(); + } + + private IList StyleProducers { set; get; } + private static string Wrap(string style) { return @" @@ -9,259 +34,289 @@ private static string Wrap(string style) }"; } - public static string BuildMediaScheme(ThemeConfig theme) + public virtual string BuildMediaScheme(ThemeValue theme) { - var scheme = theme.IsDark ? "dark" : "light"; + var scheme = theme.IsDark() ? "dark" : "light"; return @$"@media (prefers-color-scheme: {scheme}) {{ {BuildScheme(theme)} }}"; } - public static string BuildCommon(ThemeConfig theme) + public virtual string BuildCommon(ThemeValue theme) { var palette = theme.Palette; var typography = theme.Typography; - return Wrap(@$" - --theme-palette-common-white: {palette.Common.White}; - --theme-palette-common-black: {palette.Common.Black}; - - --theme-spacing: {theme.Spacing}; - --theme-shape-border-radius: {theme.ShapeBorderRadius}; - --theme-transition-box-shadow: {theme.TransitionBoxShadow}; - - --theme-font-size: {theme.FontSize}; - --theme-html-font-size: {theme.HtmlFontSize}; - --theme-zindex-appbar: {theme.ZindexAppBar}; - --theme-zindex-drawer: {theme.ZindexDrawer}; + return Wrap($@" + --theme-palette-common-white: {palette.Common.White.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-common-black: {palette.Common.Black.ToString(CultureInfo.InvariantCulture)}; + + --theme-spacing: {theme.Spacing.Value().ToString(CultureInfo.InvariantCulture)}; + --theme-shape-border-radius: {theme.Shape.BorderRadius.ToString(CultureInfo.InvariantCulture)}; + --theme-transition-box-shadow: {theme.Transitions.Make("box-shadow").ToString(CultureInfo.InvariantCulture)}; + + --theme-font-size: {typography.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-html-font-size: {typography.HtmlFontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-appbar: {theme.ZIndex.AppBar.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-drawer: {theme.ZIndex.Drawer.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-modal: {theme.ZIndex.Modal.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-snackbar: {theme.ZIndex.Snackbar.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-tooltip: {theme.ZIndex.Tooltip.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-speed-dial: {theme.ZIndex.SpeedDial.ToString(CultureInfo.InvariantCulture)}; + --theme-zindex-mobile-stepper: {theme.ZIndex.MobileStepper.ToString(CultureInfo.InvariantCulture)}; --theme-font-size-coef: calc(var(--theme-font-size) / 14); - --theme-font-size-rem-factor: calc( - var(--theme-font-size-coef) / var(--theme-html-font-size) - ); - - --theme-shadow0: {theme.Shadow0}; - --theme-shadow1: {theme.Shadow1}; - --theme-shadow2: {theme.Shadow2}; - --theme-shadow3: {theme.Shadow3}; - --theme-shadow4: {theme.Shadow4}; - --theme-shadow5: {theme.Shadow5}; - --theme-shadow6: {theme.Shadow6}; - --theme-shadow7: {theme.Shadow7}; - --theme-shadow8: {theme.Shadow8}; - --theme-shadow9: {theme.Shadow9}; - --theme-shadow10: {theme.Shadow10}; - --theme-shadow11: {theme.Shadow11}; - --theme-shadow12: {theme.Shadow12}; - --theme-shadow13: {theme.Shadow13}; - --theme-shadow14: {theme.Shadow14}; - --theme-shadow15: {theme.Shadow15}; - --theme-shadow16: {theme.Shadow16}; - --theme-shadow17: {theme.Shadow17}; - --theme-shadow18: {theme.Shadow18}; - --theme-shadow19: {theme.Shadow19}; - --theme-shadow20: {theme.Shadow20}; - --theme-shadow21: {theme.Shadow21}; - --theme-shadow22: {theme.Shadow22}; - --theme-shadow23: {theme.Shadow23}; - --theme-shadow24: {theme.Shadow24}; + --theme-font-size-rem-factor: calc(var(--theme-font-size-coef) / var(--theme-html-font-size)); + + --theme-breakpoints-values-xs: {theme.Breakpoints.Values.ExtraSmall.ToString(CultureInfo.InvariantCulture)}; + --theme-breakpoints-values-sm: {theme.Breakpoints.Values.Small.ToString(CultureInfo.InvariantCulture)}; + --theme-breakpoints-values-md: {theme.Breakpoints.Values.Medium.ToString(CultureInfo.InvariantCulture)}; + --theme-breakpoints-values-lg: {theme.Breakpoints.Values.Large.ToString(CultureInfo.InvariantCulture)}; + --theme-breakpoints-values-xl: {theme.Breakpoints.Values.ExtraLarge.ToString(CultureInfo.InvariantCulture)}; + + --theme-shadow0: {theme.Shadows[0].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow1: {theme.Shadows[1].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow2: {theme.Shadows[2].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow3: {theme.Shadows[3].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow4: {theme.Shadows[4].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow5: {theme.Shadows[5].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow6: {theme.Shadows[6].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow7: {theme.Shadows[7].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow8: {theme.Shadows[8].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow9: {theme.Shadows[9].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow10: {theme.Shadows[10].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow11: {theme.Shadows[11].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow12: {theme.Shadows[12].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow13: {theme.Shadows[13].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow14: {theme.Shadows[14].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow15: {theme.Shadows[15].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow16: {theme.Shadows[16].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow17: {theme.Shadows[17].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow18: {theme.Shadows[18].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow19: {theme.Shadows[19].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow20: {theme.Shadows[20].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow21: {theme.Shadows[21].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow22: {theme.Shadows[22].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow23: {theme.Shadows[23].ToString(CultureInfo.InvariantCulture)}; + --theme-shadow24: {theme.Shadows[24].ToString(CultureInfo.InvariantCulture)}; --theme-typography-font-size: var(--theme-font-size); --theme-typography-html-font-size: var(--theme-html-font-size); - --theme-typography-font-family: {typography.FontFamily}; - --theme-typography-font-size-medium: {typography.FontSizeMedium}; - --theme-typography-font-size-normal: {typography.FontSizeNormal}; - --theme-typography-font-weight-light: {typography.FontWeightLight}; - --theme-typography-font-weight-regular: {typography.FontWeightRegular}; - --theme-typography-font-weight-medium: {typography.FontWeightMedium}; - --theme-typography-font-weight-bold: {typography.FontWeightBold}; - - --theme-typography-body1-font-family: {typography.Body1.FontFamily}; - --theme-typography-body1-font-size: {typography.Body1.FontSize}; - --theme-typography-body1-font-weight: {typography.Body1.FontWeight}; - --theme-typography-body1-line-height: {typography.Body1.LineHeight}; - --theme-typography-body1-letter-spacing: {typography.Body1.LetterSpacing}; - - --theme-typography-body2-font-family: {typography.Body2.FontFamily}; - --theme-typography-body2-font-size: {typography.Body2.FontSize}; - --theme-typography-body2-font-weight: {typography.Body2.FontWeight}; - --theme-typography-body2-line-height: {typography.Body2.LineHeight}; - --theme-typography-body2-letter-spacing: {typography.Body2.LetterSpacing}; - - --theme-typography-caption-font-family: {typography.Caption.FontFamily}; - --theme-typography-caption-font-size: {typography.Caption.FontSize}; - --theme-typography-caption-font-weight: {typography.Caption.FontWeight}; - --theme-typography-caption-line-height: {typography.Caption.LineHeight}; - --theme-typography-caption-letter-spacing: {typography.Caption.LetterSpacing}; - - --theme-typography-h1-font-family: {typography.H1.FontFamily}; - --theme-typography-h1-font-size: {typography.H1.FontSize}; - --theme-typography-h1-font-weight: {typography.H1.FontWeight}; - --theme-typography-h1-line-height: {typography.H1.LineHeight}; - --theme-typography-h1-letter-spacing: {typography.H1.LetterSpacing}; - - --theme-typography-h2-font-family: {typography.H2.FontFamily}; - --theme-typography-h2-font-size: {typography.H2.FontSize}; - --theme-typography-h2-font-weight: {typography.H2.FontWeight}; - --theme-typography-h2-line-height: {typography.H2.LineHeight}; - --theme-typography-h2-letter-spacing: {typography.H2.LetterSpacing}; - - --theme-typography-h3-font-family: {typography.H3.FontFamily}; - --theme-typography-h3-font-size: {typography.H3.FontSize}; - --theme-typography-h3-font-weight: {typography.H3.FontWeight}; - --theme-typography-h3-line-height: {typography.H3.LineHeight}; - --theme-typography-h3-letter-spacing: {typography.H3.LetterSpacing}; - - --theme-typography-h4-font-family: {typography.H4.FontFamily}; - --theme-typography-h4-font-size: {typography.H4.FontSize}; - --theme-typography-h4-font-weight: {typography.H4.FontWeight}; - --theme-typography-h4-line-height: {typography.H4.LineHeight}; - --theme-typography-h4-letter-spacing: {typography.H4.LetterSpacing}; - - --theme-typography-h5-font-family: {typography.H5.FontFamily}; - --theme-typography-h5-font-size: {typography.H5.FontSize}; - --theme-typography-h5-font-weight: {typography.H5.FontWeight}; - --theme-typography-h5-line-height: {typography.H5.LineHeight}; - --theme-typography-h5-letter-spacing: {typography.H5.LetterSpacing}; - - --theme-typography-h6-font-family: {typography.H6.FontFamily}; - --theme-typography-h6-font-size: {typography.H6.FontSize}; - --theme-typography-h6-font-weight: {typography.H6.FontWeight}; - --theme-typography-h6-line-height: {typography.H6.LineHeight}; - --theme-typography-h6-letter-spacing: {typography.H6.LetterSpacing}; - - --theme-typography-subtitle1-font-family: {typography.Subtitle1.FontFamily}; - --theme-typography-subtitle1-font-size: {typography.Subtitle1.FontSize}; - --theme-typography-subtitle1-font-weight: {typography.Subtitle1.FontWeight}; - --theme-typography-subtitle1-line-height: {typography.Subtitle1.LineHeight}; - --theme-typography-subtitle1-letter-spacing: {typography.Subtitle1.LetterSpacing}; - - --theme-typography-subtitle2-font-family: {typography.Subtitle2.FontFamily}; - --theme-typography-subtitle2-font-size: {typography.Subtitle2.FontSize}; - --theme-typography-subtitle2-font-weight: {typography.Subtitle2.FontWeight}; - --theme-typography-subtitle2-line-height: {typography.Subtitle2.LineHeight}; - --theme-typography-subtitle2-letter-spacing: {typography.Subtitle2.LetterSpacing}; - - --theme-typography-overline-font-family: {typography.Overline.FontFamily}; - --theme-typography-overline-font-size: {typography.Overline.FontSize}; - --theme-typography-overline-font-weight: {typography.Overline.FontWeight}; - --theme-typography-overline-line-height: {typography.Overline.LineHeight}; - --theme-typography-overline-letter-spacing: {typography.Overline.LetterSpacing}; - --theme-typography-overline-text-transform: {typography.Overline.TextTransform}; - - --theme-typography-button-font-family: {typography.Button.FontFamily}; - --theme-typography-button-font-size: {typography.Button.FontSize}; - --theme-typography-button-font-weight: {typography.Button.FontWeight}; - --theme-typography-button-line-height: {typography.Button.LineHeight}; - --theme-typography-button-letter-spacing: {typography.Button.LetterSpacing}; - --theme-typography-button-text-transform: {typography.Button.TextTransform}; + --theme-typography-font-family: {typography.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-font-size-medium: {typography.PxToRem(20).ToString(CultureInfo.InvariantCulture)}; + --theme-typography-font-size-normal: {typography.PxToRem(12).ToString(CultureInfo.InvariantCulture)}; + --theme-typography-font-weight-light: {typography.FontWeightLight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-font-weight-regular: {typography.FontWeightRegular.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-font-weight-medium: {typography.FontWeightMedium.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-font-weight-bold: {typography.FontWeightBold.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-body1-font-family: {typography.Body1.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body1-font-size: {typography.Body1.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body1-font-weight: {typography.Body1.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body1-line-height: {typography.Body1.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body1-letter-spacing: {typography.Body1.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-body2-font-family: {typography.Body2.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body2-font-size: {typography.Body2.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body2-font-weight: {typography.Body2.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body2-line-height: {typography.Body2.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-body2-letter-spacing: {typography.Body2.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-caption-font-family: {typography.Caption.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-caption-font-size: {typography.Caption.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-caption-font-weight: {typography.Caption.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-caption-line-height: {typography.Caption.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-caption-letter-spacing: {typography.Caption.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-h1-font-family: {typography.H1.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h1-font-size: {typography.H1.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h1-font-weight: {typography.H1.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h1-line-height: {typography.H1.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h1-letter-spacing: {typography.H1.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-h2-font-family: {typography.H2.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h2-font-size: {typography.H2.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h2-font-weight: {typography.H2.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h2-line-height: {typography.H2.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h2-letter-spacing: {typography.H2.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-h3-font-family: {typography.H3.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h3-font-size: {typography.H3.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h3-font-weight: {typography.H3.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h3-line-height: {typography.H3.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h3-letter-spacing: {typography.H3.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-h4-font-family: {typography.H4.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h4-font-size: {typography.H4.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h4-font-weight: {typography.H4.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h4-line-height: {typography.H4.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h4-letter-spacing: {typography.H4.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-h5-font-family: {typography.H5.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h5-font-size: {typography.H5.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h5-font-weight: {typography.H5.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h5-line-height: {typography.H5.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h5-letter-spacing: {typography.H5.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-h6-font-family: {typography.H6.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h6-font-size: {typography.H6.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h6-font-weight: {typography.H6.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h6-line-height: {typography.H6.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-h6-letter-spacing: {typography.H6.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-subtitle1-font-family: {typography.Subtitle1.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle1-font-size: {typography.Subtitle1.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle1-font-weight: {typography.Subtitle1.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle1-line-height: {typography.Subtitle1.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle1-letter-spacing: {typography.Subtitle1.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-subtitle2-font-family: {typography.Subtitle2.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle2-font-size: {typography.Subtitle2.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle2-font-weight: {typography.Subtitle2.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle2-line-height: {typography.Subtitle2.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-subtitle2-letter-spacing: {typography.Subtitle2.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-overline-font-family: {typography.Overline.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-overline-font-size: {typography.Overline.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-overline-font-weight: {typography.Overline.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-overline-line-height: {typography.Overline.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-overline-letter-spacing: {typography.Overline.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-overline-text-transform: {typography.Overline.TextTransform.ToString(CultureInfo.InvariantCulture)}; + + --theme-typography-button-font-family: {typography.Button.FontFamily.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-button-font-size: {typography.Button.FontSize.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-button-font-weight: {typography.Button.FontWeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-button-line-height: {typography.Button.LineHeight.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-button-letter-spacing: {typography.Button.LetterSpacing.ToString(CultureInfo.InvariantCulture)}; + --theme-typography-button-text-transform: {typography.Button.TextTransform.ToString(CultureInfo.InvariantCulture)}; "); } - public static string BuildScheme(ThemeConfig theme) + public virtual string BuildScheme(ThemeValue theme) { var palette = theme.Palette; - return Wrap(@$" - --theme-mode-dark: {(theme.IsDark ? 1 : 0)}; - - --theme-palette-color: {palette.Common.Color}; - --theme-palette-common-background: {palette.Common.Background}; - - --theme-palette-main-background-default: {palette.Main.Background}; - - --theme-palette-switch-color: {palette.Switch.Color}; - --theme-palette-switch-disabled-color: {palette.Switch.DisabledColor}; - --theme-palette-switch-disabled-opacity: {palette.Switch.DisabledOpacity}; - - --theme-palette-text-color: {palette.Text.Color}; - --theme-palette-text-primary: {palette.Text.Primary}; - --theme-palette-text-primary-hover: {palette.Text.PrimaryHover}; - --theme-palette-text-secondary: {palette.Text.Secondary}; - --theme-palette-text-disabled: {palette.Text.Disabled}; - --theme-palette-text-hint: {palette.Text.Hint}; - - --theme-palette-background-paper: {palette.Background.Paper}; - --theme-palette-background-default: {palette.Background.Default}; - --theme-palette-background-level1: {palette.Background.Level1}; - --theme-palette-background-level2: {palette.Background.Level2}; - - --theme-palette-action-active: {palette.Action.Active}; - --theme-palette-action-hover: {palette.Action.Hover}; - --theme-palette-action-hover-opacity: {palette.Action.HoverOpacity}; - --theme-palette-action-selected: {palette.Action.Selected}; - --theme-palette-action-disabled: {palette.Action.Disabled}; - --theme-palette-action-disabled-background: {palette.Action.DisabledBackground}; - - --theme-palette-primary-main: {palette.Primary.Main}; - --theme-palette-primary-light: {palette.Primary.Light}; - --theme-palette-primary-dark: {palette.Primary.Dark}; - --theme-palette-primary-contrast-text: {palette.Primary.ContrastText}; - --theme-palette-primary-alternate: {palette.Primary.Alternate}; - --theme-palette-primary-current: {palette.Primary.Current}; - --theme-palette-primary-main-hover: {palette.Primary.MainHover}; - --theme-palette-primary-main-border: {palette.Primary.MainBorder}; - --theme-palette-primary-main-background: {palette.Primary.MainBackground}; - - --theme-palette-secondary-main: {palette.Secondary.Main}; - --theme-palette-secondary-light: {palette.Secondary.Light}; - --theme-palette-secondary-dark: {palette.Secondary.Dark}; - --theme-palette-secondary-contrast-text: {palette.Secondary.ContrastText}; - --theme-palette-secondary-main-hover: {palette.Secondary.MainHover}; - --theme-palette-secondary-main-border: {palette.Secondary.MainBorder}; - --theme-palette-secondary-main-background: {palette.Secondary.MainBackground}; - --theme-palette-secondary-current: {palette.Secondary.Current}; - - --theme-palette-error-main: {palette.Error.Main}; - --theme-palette-error-light: {palette.Error.Light}; - --theme-palette-error-dark: {palette.Error.Dark}; - --theme-palette-error-contrast-text: {palette.Error.ContrastText}; - - --theme-palette-warning-main: {palette.Warning.Main}; - --theme-palette-warning-light: {palette.Warning.Light}; - --theme-palette-warning-dark: {palette.Warning.Dark}; - --theme-palette-warning-contrast-text: {palette.Warning.ContrastText}; - - --theme-palette-info-main: {palette.Info.Main}; - --theme-palette-info-light: {palette.Info.Light}; - --theme-palette-info-dark: {palette.Info.Dark}; - --theme-palette-info-contrast-text: {palette.Info.ContrastText}; - - --theme-palette-success-main: {palette.Success.Main}; - --theme-palette-success-light: {palette.Success.Light}; - --theme-palette-success-dark: {palette.Success.Dark}; - --theme-palette-success-contrast-text: {palette.Success.ContrastText}; - - --theme-palette-divider: {palette.Divider.Color}; - --theme-palette-divider-background-color: {palette.Divider.Background}; - --theme-palette-divider-border-bottom: {palette.Divider.BorderBottom}; - - --theme-palette-border-outlined: {palette.Border.Outlined}; - --theme-palette-border-bottom: {palette.Border.Bottom}; - - --theme-palette-table-row-background-selected: {palette.Table.RowSelected}; - --theme-palette-table-row-background-hover: {palette.Table.RowHover}; - - --theme-palette-grey300: {palette.Grey.C300}; - --theme-palette-grey-50: {palette.Grey.C50}; - --theme-palette-grey-A100: {palette.Grey.A100}; - --theme-palette-grey300-contrast-text: {palette.Grey.ContrastTextC300}; - --theme-palette-grey-background-default: {palette.Grey.Background}; - --theme-palette-grey: {palette.Grey.Color}; - --theme-palette-grey-light-or-dark: {palette.Grey.LightOrDark}; - --theme-palette-grey-light-or-dark-contrast-text: {palette.Grey.LightOrDarkContrastText}; - - --theme-custom-content-background-color: {palette.Custom.ContentBackground}; - --theme-custom-content-background-default: {palette.Custom.ContentBackgroundDefault}; - --theme-custom-palette-common-alternate: {palette.Custom.PaletteCommonAlternate}; - --theme-custom-palette-opacity: {palette.Custom.PaletteOpacity}; - --theme-custom-layout-backward: {palette.Custom.LayoutBackward}; - --theme-custom-layout-forward: {palette.Custom.LayoutForward}; - --theme-custom-palette-primary-main: {palette.Custom.PrimaryMain}; - --theme-custom-palette-primary-contrast-text: {palette.Custom.PrimaryContrastText}; - "); + string ToContrastText(string color) + { + return color.ToContrastText(palette.ContrastThreshold); + } + + var isDark = theme.IsDark(); + + return Wrap($@" + --theme-mode-dark: {(isDark ? 1 : 0).ToString(CultureInfo.InvariantCulture)}; + + --theme-palette-common-background: {(isDark ? palette.Common.White : palette.Common.Black).ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-common", palette.Common.Custom)} + + --theme-palette-text-primary: {palette.Text.Primary.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-text-secondary: {palette.Text.Secondary.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-text-disabled: {palette.Text.Disabled.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-text-hint: {palette.Text.Hint.ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-text", palette.Text.Custom)} + + --theme-palette-background-paper: {palette.Background.Paper.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-background-default: {palette.Background.Default.ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-background", palette.Background.Custom)} + + --theme-palette-action-active: {palette.Action.Active.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-action-hover: {palette.Action.Hover.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-action-hover-opacity: {palette.Action.HoverOpacity.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-action-selected: {palette.Action.Selected.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-action-disabled: {palette.Action.Disabled.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-action-disabled-background: {palette.Action.DisabledBackground.ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-action", palette.Action.Custom)} + + --theme-palette-primary-main: {palette.Primary.Main.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-primary-light: {palette.Primary.Light.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-primary-dark: {palette.Primary.Dark.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-primary-contrast-text: {palette.Primary.ContrastText.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-primary-alternate: {(isDark ? palette.Primary.Light : palette.Primary.Dark).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-primary-hover: {palette.Primary.Main.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-primary-background: {(isDark ? palette.Primary.Main.Darken(0.5m) : palette.Primary.Main.Lighten(0.62m)).ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-primary", palette.Primary.Custom)} + + --theme-palette-secondary-main: {palette.Secondary.Main.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-light: {palette.Secondary.Light.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-dark: {palette.Secondary.Dark.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-contrast-text: {palette.Secondary.ContrastText.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-hover: {palette.Secondary.Main.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-border: {palette.Secondary.Main.Fade(0.5m).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-background: {(isDark ? palette.Secondary.Main.Darken(0.5m) : palette.Secondary.Main.Lighten(0.62m)).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-secondary-alternate: {(isDark ? palette.Secondary.Light : palette.Secondary.Dark).ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-secondary", palette.Secondary.Custom)} + + --theme-palette-error-main: {palette.Error.Main.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-error-light: {palette.Error.Light.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-error-dark: {palette.Error.Dark.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-error-contrast-text: {palette.Error.ContrastText.ToString(CultureInfo.InvariantCulture)}; + {Variables("--theme-palette-error", palette.Error.Custom)} + + --theme-palette-divider: {palette.Divider.ToString(CultureInfo.InvariantCulture)}; + + --theme-palette-grey50: {palette.Grey.X50.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey50-contrast-text: {ToContrastText(palette.Grey.X50).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey100: {palette.Grey.X100.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey100-contrast-text: {ToContrastText(palette.Grey.X100).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey200: {palette.Grey.X200.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey200-contrast-text: {ToContrastText(palette.Grey.X200).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey300: {palette.Grey.X300.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey300-contrast-text: {ToContrastText(palette.Grey.X300).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey400: {palette.Grey.X400.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey400-contrast-text: {ToContrastText(palette.Grey.X400).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey500: {palette.Grey.X500.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey500-contrast-text: {ToContrastText(palette.Grey.X500).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey600: {palette.Grey.X600.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey600-contrast-text: {ToContrastText(palette.Grey.X600).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey700: {palette.Grey.X700.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey700-contrast-text: {ToContrastText(palette.Grey.X700).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey800: {palette.Grey.X800.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey800-contrast-text: {ToContrastText(palette.Grey.X800).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey900: {palette.Grey.X900.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey900-contrast-text: {ToContrastText(palette.Grey.X900).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA100: {palette.Grey.A100.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA100-contrast-text: {ToContrastText(palette.Grey.A100).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA200: {palette.Grey.A200.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA200-contrast-text: {ToContrastText(palette.Grey.A200).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA400: {palette.Grey.A400.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA400-contrast-text: {ToContrastText(palette.Grey.A400).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA700: {palette.Grey.A700.ToString(CultureInfo.InvariantCulture)}; + --theme-palette-greyA700-contrast-text: {ToContrastText(palette.Grey.A700).ToString(CultureInfo.InvariantCulture)}; + + --theme-palette-grey-contrast-text-default: {ToContrastText(isDark ? palette.Grey.X900 : palette.Grey.X100).ToString(CultureInfo.InvariantCulture)}; + --theme-palette-grey-background-default: {(isDark ? palette.Grey.X900 : palette.Grey.X100).ToString(CultureInfo.InvariantCulture)}; + + --theme-custom-light-or-dark: {palette.Custom.LightOrDark.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-light-or-dark-contrast-text: {palette.Custom.LightOrDarkContrastText.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-content-background-color: {palette.Custom.ContentBackground.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-content-background-default: {palette.Custom.ContentBackgroundDefault.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-palette-common-alternate: {palette.Custom.PaletteCommonAlternate.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-palette-opacity: {palette.Custom.PaletteOpacity.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-layout-backward: {palette.Custom.LayoutBackward.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-layout-forward: {palette.Custom.LayoutForward.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-palette-primary-main: {palette.Custom.PrimaryMain.ToString(CultureInfo.InvariantCulture)}; + --theme-custom-palette-primary-contrast-text: {palette.Custom.PrimaryContrastText.ToString(CultureInfo.InvariantCulture)}; + + {Styles(theme)} + "); + } + + protected virtual string Variables(string prefix, IDictionary values) + { + var variables = values.Select(value => $"{prefix}-custom-{value.Key}: {value.Value.ToString(CultureInfo.InvariantCulture)};"); + + return string.Join("\n", variables); + } + + protected virtual string Styles(ThemeValue theme) + { + var variables = StyleProducers.SelectMany(producer => producer.Variables(theme)); + + var styles = variables.Select(variable => $"{variable.Key}: {variable.Value.ToString(CultureInfo.InvariantCulture)};"); + + return string.Join("\n", styles); } } } \ No newline at end of file diff --git a/Theme/src/Theme/ThemeProvider.razor b/Theme/src/Theme/ThemeProvider.razor index 863bb34..cbd9a39 100644 --- a/Theme/src/Theme/ThemeProvider.razor +++ b/Theme/src/Theme/ThemeProvider.razor @@ -1,40 +1,55 @@ @namespace Skclusive.Material.Theme -@inherits ThemeComponentBase +@inject IThemeService ThemeService - - -@if (IsAuto) -{ - - -} -else -{ - -} + + + + + + + @ChildContent + + + @code { [Parameter] - public ThemeConfig Config { set; get; } + public bool Head { set; get; } = false; + + [Parameter] + public RenderFragment ChildContent { set; get; } [Parameter] - public ThemeConfig Light { set; get; } = ThemeBuilder.LIGHT; + public ThemeValue Light { set; get; } [Parameter] - public ThemeConfig Dark { set; get; } = ThemeBuilder.DARK; + public ThemeValue Dark { set; get; } + + [Parameter] + public ThemeValue Default { set; get; } + + protected IThemeContext ThemeContext => new ThemeContext(ThemeService.Current); + + protected override void OnInitialized() + { + ThemeService.OnChange += OnThemeChange; + } + + protected void OnThemeChange(object sender, Theme current) + { + _ = InvokeAsync(StateHasChanged); + } - protected ThemeConfig _Config => Config ?? (Theme == Skclusive.Core.Component.Theme.Dark ? Dark : Light); + protected void Dispose() + { + ThemeService.OnChange -= OnThemeChange; + } } \ No newline at end of file diff --git a/Theme/src/Theme/ThemeRenderer.razor b/Theme/src/Theme/ThemeRenderer.razor new file mode 100644 index 0000000..9407e18 --- /dev/null +++ b/Theme/src/Theme/ThemeRenderer.razor @@ -0,0 +1,47 @@ +@namespace Skclusive.Material.Theme +@inherits ThemeComponentBase +@inject IThemeProducer ThemeProducer + + + +@code +{ + [Parameter] + public IReference RootRef { set; get; } = new Reference(); + + [Parameter] + public ThemeValue Default { set; get; } + + [Parameter] + public ThemeValue Light { set; get; } + + [Parameter] + public ThemeValue Dark { set; get; } + + protected ThemeValue _Theme => Default ?? (Theme == Theme.Dark ? _Dark : _Light); + + protected ThemeValue _Dark => Dark ?? ThemeFactory.CreateTheme(new ThemeConfig { Palette = new PaletteConfig { Type = PaletteType.Dark } }); + + protected ThemeValue _Light => Light ?? ThemeFactory.CreateTheme(new ThemeConfig { Palette = new PaletteConfig { Type = PaletteType.Light } }); + + protected MarkupString Common => new MarkupString(ThemeProducer.BuildCommon(_Theme)); + + protected MarkupString Scheme => new MarkupString(ThemeProducer.BuildScheme(_Theme)); + + protected MarkupString MediaScheme => new MarkupString(string.Join("\n", new string[] + { + ThemeProducer.BuildMediaScheme(_Dark), + ThemeProducer.BuildMediaScheme(_Light) + })); +} \ No newline at end of file diff --git a/Theme/src/Theme/ThemeValue.cs b/Theme/src/Theme/ThemeValue.cs new file mode 100644 index 0000000..b5196e7 --- /dev/null +++ b/Theme/src/Theme/ThemeValue.cs @@ -0,0 +1,35 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class ThemeValue + { + [JsonPropertyName("shape")] + public Shape Shape { set; get; } + + [JsonPropertyName("breakpoints")] + public Breakpoints Breakpoints { set; get; } + + [JsonPropertyName("direction")] + public Direction Direction { set; get; } + + [JsonPropertyName("palette")] + public Palette Palette { set; get; } + + [JsonPropertyName("spacing")] + public Spacing Spacing { set; get; } + + [JsonPropertyName("transitions")] + public Transitions Transitions { set; get; } + + [JsonPropertyName("zIndex")] + public ZIndex ZIndex { set; get; } + + [JsonPropertyName("typography")] + public Typography Typography { set; get; } + + [JsonPropertyName("shadows")] + public string[] Shadows { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Duration/Duration.cs b/Theme/src/Transitions/Duration/Duration.cs new file mode 100644 index 0000000..48449a0 --- /dev/null +++ b/Theme/src/Transitions/Duration/Duration.cs @@ -0,0 +1,32 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class Duration + { + [JsonPropertyName("shortest")] + public short Shortest { get; set; } + + [JsonPropertyName("shorter")] + public short Shorter { get; set; } + + [JsonPropertyName("short")] + public short Short { get; set; } + + // most basic recommended timing + [JsonPropertyName("standard")] + public short Standard { get; set; } + + // this is to be used in complex animations + [JsonPropertyName("complex")] + public short Complex { get; set; } + + // recommended when something is entering screen + [JsonPropertyName("enteringScreen")] + public short EnteringScreen { get; set; } + + // recommended when something is leaving screen + [JsonPropertyName("leavingScreen")] + public short LeavingScreen { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Duration/DurationConfig.cs b/Theme/src/Transitions/Duration/DurationConfig.cs new file mode 100644 index 0000000..8f75063 --- /dev/null +++ b/Theme/src/Transitions/Duration/DurationConfig.cs @@ -0,0 +1,32 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class DurationConfig + { + [JsonPropertyName("shortest")] + public short? Shortest { get; set; } + + [JsonPropertyName("shorter")] + public short? Shorter { get; set; } + + [JsonPropertyName("short")] + public short? Short { get; set; } + + // most basic recommended timing + [JsonPropertyName("standard")] + public short? Standard { get; set; } + + // this is to be used in complex animations + [JsonPropertyName("complex")] + public short? Complex { get; set; } + + // recommended when something is entering screen + [JsonPropertyName("enteringScreen")] + public short? EnteringScreen { get; set; } + + // recommended when something is leaving screen + [JsonPropertyName("leavingScreen")] + public short? LeavingScreen { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Duration/DurationFactory.cs b/Theme/src/Transitions/Duration/DurationFactory.cs new file mode 100644 index 0000000..a9b48cf --- /dev/null +++ b/Theme/src/Transitions/Duration/DurationFactory.cs @@ -0,0 +1,31 @@ +using System; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class DurationFactory + { + public static Duration CreateDuration(DurationConfig config) + { + var duration = new Duration + { + Shortest = config?.Shortest ?? 150, + + Shorter = config?.Shorter ?? 200, + + Short = config?.Short ?? 250, + + Standard = config?.Standard ?? 300, + + Complex = config?.Complex ?? 375, + + EnteringScreen = config?.EnteringScreen ?? 225, + + LeavingScreen = config?.LeavingScreen ?? 195, + }; + + return duration; + } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Easing/Easing.cs b/Theme/src/Transitions/Easing/Easing.cs new file mode 100644 index 0000000..3a52cf3 --- /dev/null +++ b/Theme/src/Transitions/Easing/Easing.cs @@ -0,0 +1,24 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class Easing + { + // This is the most common easing curve. + [JsonPropertyName("easeInOut")] + public string EaseInOut { get; set; } + + // Objects enter the screen at full velocity from off-screen and + // slowly decelerate to a resting point. + [JsonPropertyName("easeOut")] + public string EaseOut { get; set; } + + // Objects leave the screen at full velocity. They do not decelerate when off-screen. + [JsonPropertyName("easeIn")] + public string EaseIn { get; set; } + + // The sharp curve is used by objects that may return to the screen at any time. + [JsonPropertyName("sharp")] + public string Sharp { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Easing/EasingConfig.cs b/Theme/src/Transitions/Easing/EasingConfig.cs new file mode 100644 index 0000000..3c29ffc --- /dev/null +++ b/Theme/src/Transitions/Easing/EasingConfig.cs @@ -0,0 +1,24 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class EasingConfig + { + // This is the most common easing curve. + [JsonPropertyName("easeInOut")] + public string EaseInOut { get; set; } + + // Objects enter the screen at full velocity from off-screen and + // slowly decelerate to a resting point. + [JsonPropertyName("easeOut")] + public string EaseOut { get; set; } + + // Objects leave the screen at full velocity. They do not decelerate when off-screen. + [JsonPropertyName("easeIn")] + public string EaseIn { get; set; } + + // The sharp curve is used by objects that may return to the screen at any time. + [JsonPropertyName("sharp")] + public string Sharp { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Easing/EasingFactory.cs b/Theme/src/Transitions/Easing/EasingFactory.cs new file mode 100644 index 0000000..0529437 --- /dev/null +++ b/Theme/src/Transitions/Easing/EasingFactory.cs @@ -0,0 +1,25 @@ +using System; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class EasingFactory + { + public static Easing CreateEasing(EasingConfig config) + { + var easing = new Easing + { + EaseInOut = config?.EaseInOut ?? "cubic-bezier(0.4, 0, 0.2, 1)", + + EaseOut = config?.EaseOut ?? "cubic-bezier(0.0, 0, 0.2, 1)", + + EaseIn = config?.EaseIn ?? "cubic-bezier(0.4, 0, 1, 1)", + + Sharp = config?.Sharp ?? "cubic-bezier(0.4, 0, 0.6, 1)" + }; + + return easing; + } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/Transitions.cs b/Theme/src/Transitions/Transitions.cs new file mode 100644 index 0000000..66cf35b --- /dev/null +++ b/Theme/src/Transitions/Transitions.cs @@ -0,0 +1,21 @@ +using System; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class Transitions + { + [JsonPropertyName("easing")] + public Easing Easing { get; set; } = new Easing(); + + [JsonPropertyName("duration")] + public Duration Duration { get; set; } = new Duration(); + + [JsonIgnore] + public Func Create { set; get; } + + [JsonIgnore] + public Func AutoHeightDuration { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/TransitionsConfig.cs b/Theme/src/Transitions/TransitionsConfig.cs new file mode 100644 index 0000000..42e1a0c --- /dev/null +++ b/Theme/src/Transitions/TransitionsConfig.cs @@ -0,0 +1,21 @@ +using System; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class TransitionsConfig + { + [JsonPropertyName("easing")] + public EasingConfig Easing { get; set; } + + [JsonPropertyName("duration")] + public DurationConfig Duration { get; set; } + + [JsonIgnore] + public Func Create { set; get; } + + [JsonIgnore] + public Func AutoHeightDuration { set; get; } + } +} \ No newline at end of file diff --git a/Theme/src/Transitions/TransitionsFactory.cs b/Theme/src/Transitions/TransitionsFactory.cs new file mode 100644 index 0000000..da5beb7 --- /dev/null +++ b/Theme/src/Transitions/TransitionsFactory.cs @@ -0,0 +1,48 @@ +using System; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class TransitionsFactory + { + public static Transitions CreateTransitions(TransitionsConfig config) + { + var duration = DurationFactory.CreateDuration(config?.Duration); + + var easing = EasingFactory.CreateEasing(config?.Easing); + + var created = config?.Create ?? ((string[] props, string _easing, short? _duration, short? delay) => + { + var __duration = _duration ?? duration.Standard; + + var __easing = _easing ?? easing.EaseInOut; + + return string.Join(",", props.Select(prop => $"{prop} {__duration}ms {__easing} {delay ?? 0}ms")); + }); + + var autoHeightDuration = config?.AutoHeightDuration ?? ((double height) => + { + if (height <= 0) + { + return 0; + } + + double divider = (double)height / 36; + + return Convert.ToInt32(Decimal.Round((decimal)(4 + 15 * Math.Pow(divider, 0.25) + divider / 5) * 10)); + }); + + return new Transitions + { + Duration = duration, + + Easing = easing, + + Create = created, + + AutoHeightDuration = autoHeightDuration + }; + } + } +} \ No newline at end of file diff --git a/Theme/src/Typography/Typography.cs b/Theme/src/Typography/Typography.cs new file mode 100644 index 0000000..5c8c823 --- /dev/null +++ b/Theme/src/Typography/Typography.cs @@ -0,0 +1,71 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class Typography + { + [JsonPropertyName("htmlFontSize")] + public short HtmlFontSize { get; set; } + + [JsonPropertyName("fontFamily")] + public string FontFamily { get; set; } + + [JsonPropertyName("fontSize")] + public short FontSize { get; set; } + + [JsonPropertyName("fontWeightLight")] + public short FontWeightLight { get; set; } + + [JsonPropertyName("fontWeightRegular")] + public short FontWeightRegular { get; set; } + + [JsonPropertyName("fontWeightMedium")] + public short FontWeightMedium { get; set; } + + [JsonPropertyName("fontWeightBold")] + public short FontWeightBold { get; set; } + + [JsonPropertyName("h1")] + public TypographySegment H1 { get; set; } + + [JsonPropertyName("h2")] + public TypographySegment H2 { get; set; } + + [JsonPropertyName("h3")] + public TypographySegment H3 { get; set; } + + [JsonPropertyName("h4")] + public TypographySegment H4 { get; set; } + + [JsonPropertyName("h5")] + public TypographySegment H5 { get; set; } + + [JsonPropertyName("h6")] + public TypographySegment H6 { get; set; } + + [JsonPropertyName("subtitle1")] + public TypographySegment Subtitle1 { get; set; } + + [JsonPropertyName("subtitle2")] + public TypographySegment Subtitle2 { get; set; } + + [JsonPropertyName("body1")] + public TypographySegment Body1 { get; set; } + + [JsonPropertyName("body2")] + public TypographySegment Body2 { get; set; } + + [JsonPropertyName("button")] + public TypographySegment Button { get; set; } + + [JsonPropertyName("caption")] + public TypographySegment Caption { get; set; } + + [JsonPropertyName("overline")] + public TypographySegment Overline { get; set; } + + [JsonIgnore] + public Func PxToRem { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Typography/TypographyConfig.cs b/Theme/src/Typography/TypographyConfig.cs new file mode 100644 index 0000000..59dc65a --- /dev/null +++ b/Theme/src/Typography/TypographyConfig.cs @@ -0,0 +1,74 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class TypographyConfig + { + [JsonPropertyName("htmlFontSize")] + public short? HtmlFontSize { get; set; } + + [JsonPropertyName("fontFamily")] + public string FontFamily { get; set; } + + [JsonPropertyName("fontSize")] + public short? FontSize { get; set; } + + [JsonPropertyName("fontWeightLight")] + public short? FontWeightLight { get; set; } + + [JsonPropertyName("fontWeightRegular")] + public short? FontWeightRegular { get; set; } + + [JsonPropertyName("fontWeightMedium")] + public short? FontWeightMedium { get; set; } + + [JsonPropertyName("fontWeightBold")] + public short? FontWeightBold { get; set; } + + [JsonPropertyName("h1")] + public TypographySegmentConfig H1 { get; set; } + + [JsonPropertyName("h2")] + public TypographySegmentConfig H2 { get; set; } + + [JsonPropertyName("h3")] + public TypographySegmentConfig H3 { get; set; } + + [JsonPropertyName("h4")] + public TypographySegmentConfig H4 { get; set; } + + [JsonPropertyName("h5")] + public TypographySegmentConfig H5 { get; set; } + + [JsonPropertyName("h6")] + public TypographySegmentConfig H6 { get; set; } + + [JsonPropertyName("subtitle1")] + public TypographySegmentConfig Subtitle1 { get; set; } + + [JsonPropertyName("subtitle2")] + public TypographySegmentConfig Subtitle2 { get; set; } + + [JsonPropertyName("body1")] + public TypographySegmentConfig Body1 { get; set; } + + [JsonPropertyName("body2")] + public TypographySegmentConfig Body2 { get; set; } + + [JsonPropertyName("button")] + public TypographySegmentConfig Button { get; set; } + + [JsonPropertyName("caption")] + public TypographySegmentConfig Caption { get; set; } + + [JsonPropertyName("overline")] + public TypographySegmentConfig Overline { get; set; } + + // [JsonPropertyName("allVariants")] + // public TypographySegmentConfig AllVariants { get; set; } + + [JsonIgnore] + public Func PxToRem { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Typography/TypographyFactory.cs b/Theme/src/Typography/TypographyFactory.cs new file mode 100644 index 0000000..9110105 --- /dev/null +++ b/Theme/src/Typography/TypographyFactory.cs @@ -0,0 +1,107 @@ +using System; +using System.Globalization; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public static class TypographyFactory + { + public static readonly string DefaultFontFamily = @"""Roboto"", ""Helvetica"", ""Arial"", sans-serif"; + + public static Typography CreateTypography(Palette palette, TypographyConfig config) + { + var fontFamily = config?.FontFamily ?? DefaultFontFamily; + + // The default font size of the Material Specification. + var fontSize = config?.FontSize ?? 14; // px + + var fontWeightLight = config?.FontWeightLight ?? 300; + + var fontWeightRegular = config?.FontWeightRegular ?? 400; + + var fontWeightMedium = config?.FontWeightMedium ?? 500; + + var fontWeightBold = config?.FontWeightBold ?? 700; + + // var allVariants = config?.AllVariants; + + // Tell Material-UI what's the font-size on the html element. + // 16px is the default font-size used by browsers. + var htmlFontSize = config?.HtmlFontSize ?? 16; + + var coef = (decimal)fontSize / 14; + + Func pxToRem = config?.PxToRem ?? ((short size) => $"{Decimal.Round(((decimal)size / htmlFontSize) * coef, 2).ToString(CultureInfo.InvariantCulture)}rem".Replace(".00", "")); + + TypographySegment BuildVariant(TypographySegmentConfig option, short fontWeight, short size, decimal lineHeight, decimal letterSpacing, string transform = null) + { + return new TypographySegment + { + FontFamily = option?.FontFamily ?? fontFamily, + + FontWeight = option?.FontWeight ?? fontWeight, + + FontSize = option?.FontSize ?? pxToRem(size), + + LineHeight = option?.LineHeight ?? lineHeight, + + LetterSpacing = option?.LetterSpacing ?? (fontFamily == DefaultFontFamily ? ((Math.Round((double)(letterSpacing / size) * 1e5) / 1e5).ToString(CultureInfo.InvariantCulture) + "em") : ""), + + TextTransform = option?.TextTransform ?? transform + }; + } + + var typography = new Typography + { + PxToRem = pxToRem, + + HtmlFontSize = htmlFontSize, + + FontFamily = fontFamily, + + FontSize = fontSize, + + FontWeightLight = fontWeightLight, + + FontWeightRegular = fontWeightRegular, + + FontWeightMedium = fontWeightMedium, + + FontWeightBold = fontWeightBold, + + H1 = BuildVariant(config?.H1, fontWeightLight, 96, 1, -1.5m), + + H2 = BuildVariant(config?.H2, fontWeightLight, 60, 1, -0.5m), + + H3 = BuildVariant(config?.H3, fontWeightRegular, 48, 1.04m, 0), + + H4 = BuildVariant(config?.H4, fontWeightRegular, 34, 1.17m, 0.25m), + + H5 = BuildVariant(config?.H5, fontWeightRegular, 24, 1.33m, 0), + + H6 = BuildVariant(config?.H6, fontWeightMedium, 20, 1.6m, 0.15m), + + Subtitle1 = BuildVariant(config?.Subtitle1, fontWeightRegular, 16, 1.75m, 0.15m), + + Subtitle2 = BuildVariant(config?.Subtitle2, fontWeightMedium, 14, 1.57m, 0.1m), + + Body1 = BuildVariant(config?.Body1, fontWeightRegular, 16, 1.5m, 0.15m), + + Body2 = BuildVariant(config?.Body2, fontWeightRegular, 14, 1.43m, 0.15m), + + Caption = BuildVariant(config?.Caption, fontWeightRegular, 12, 1.66m, 0.4m), + + Button = BuildVariant(config?.Button, fontWeightMedium, 14, 1.75m, 0.4m, transform: "uppercase"), + + Overline = BuildVariant(config?.Overline, fontWeightRegular, 12, 2.66m, 1, transform: "uppercase"), + }; + + return typography; + } + + public static Typography CreateTypography(Palette palette, Func optionFunc) + { + return CreateTypography(palette, optionFunc(palette)); + } + } +} \ No newline at end of file diff --git a/Theme/src/Typography/TypographySegment.cs b/Theme/src/Typography/TypographySegment.cs new file mode 100644 index 0000000..936e596 --- /dev/null +++ b/Theme/src/Typography/TypographySegment.cs @@ -0,0 +1,25 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class TypographySegment + { + [JsonPropertyName("fontFamily")] + public string FontFamily { get; set; } + + [JsonPropertyName("fontWeight")] + public short FontWeight { get; set; } + + [JsonPropertyName("fontSize")] + public string FontSize { get; set; } + + [JsonPropertyName("lineHeight")] + public decimal LineHeight { get; set; } + + [JsonPropertyName("letterSpacing")] + public string LetterSpacing { get; set; } + + [JsonPropertyName("textTransform")] + public string TextTransform { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/Typography/TypographySegmentConfig.cs b/Theme/src/Typography/TypographySegmentConfig.cs new file mode 100644 index 0000000..077f26c --- /dev/null +++ b/Theme/src/Typography/TypographySegmentConfig.cs @@ -0,0 +1,25 @@ +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public partial class TypographySegmentConfig + { + [JsonPropertyName("fontFamily")] + public string FontFamily { get; set; } + + [JsonPropertyName("fontWeight")] + public short? FontWeight { get; set; } + + [JsonPropertyName("fontSize")] + public string FontSize { get; set; } + + [JsonPropertyName("lineHeight")] + public decimal? LineHeight { get; set; } + + [JsonPropertyName("letterSpacing")] + public string LetterSpacing { get; set; } + + [JsonPropertyName("textTransform")] + public string TextTransform { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/ZIndex/ZIndex.cs b/Theme/src/ZIndex/ZIndex.cs new file mode 100644 index 0000000..92dc808 --- /dev/null +++ b/Theme/src/ZIndex/ZIndex.cs @@ -0,0 +1,29 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class ZIndex + { + [JsonPropertyName("mobileStepper")] + public short MobileStepper { get; set; } + + [JsonPropertyName("speedDial")] + public short SpeedDial { get; set; } + + [JsonPropertyName("appBar")] + public short AppBar { get; set; } + + [JsonPropertyName("drawer")] + public short Drawer { get; set; } + + [JsonPropertyName("modal")] + public short Modal { get; set; } + + [JsonPropertyName("snackbar")] + public short Snackbar { get; set; } + + [JsonPropertyName("tooltip")] + public short Tooltip { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/ZIndex/ZIndexConfig.cs b/Theme/src/ZIndex/ZIndexConfig.cs new file mode 100644 index 0000000..714be8a --- /dev/null +++ b/Theme/src/ZIndex/ZIndexConfig.cs @@ -0,0 +1,29 @@ +using System; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class ZIndexConfig + { + [JsonPropertyName("mobileStepper")] + public short? MobileStepper { get; set; } + + [JsonPropertyName("speedDial")] + public short? SpeedDial { get; set; } + + [JsonPropertyName("appBar")] + public short? AppBar { get; set; } + + [JsonPropertyName("drawer")] + public short? Drawer { get; set; } + + [JsonPropertyName("modal")] + public short? Modal { get; set; } + + [JsonPropertyName("snackbar")] + public short? Snackbar { get; set; } + + [JsonPropertyName("tooltip")] + public short? Tooltip { get; set; } + } +} \ No newline at end of file diff --git a/Theme/src/ZIndex/ZIndexFactory.cs b/Theme/src/ZIndex/ZIndexFactory.cs new file mode 100644 index 0000000..0c6c77d --- /dev/null +++ b/Theme/src/ZIndex/ZIndexFactory.cs @@ -0,0 +1,29 @@ +using System; +using System.Linq; +using System.Text.Json.Serialization; + +namespace Skclusive.Material.Theme +{ + public class ZIndexFactory + { + public static ZIndex CreateZIndex(ZIndexConfig config) + { + return new ZIndex + { + MobileStepper = config?.MobileStepper ?? 1000, + + SpeedDial = config?.SpeedDial ?? 1050, + + AppBar = config?.AppBar ?? 1100, + + Drawer = config?.Drawer ?? 1200, + + Modal = config?.Modal ?? 1300, + + Snackbar = config?.Snackbar ?? 1400, + + Tooltip = config?.Tooltip ?? 1500 + }; + } + } +} \ No newline at end of file diff --git a/Theme/src/_Imports.razor b/Theme/src/_Imports.razor index c180057..169c7ec 100644 --- a/Theme/src/_Imports.razor +++ b/Theme/src/_Imports.razor @@ -1,3 +1,4 @@ @using Microsoft.AspNetCore.Components.Web @using Skclusive.Core.Component -@using Skclusive.Material.Core \ No newline at end of file +@using Skclusive.Material.Core +@using Skclusive.Script.DomHelpers \ No newline at end of file diff --git a/Toolbar/src/Extension/ToolbarExtension.cs b/Toolbar/src/Extension/ToolbarExtension.cs new file mode 100644 index 0000000..6052352 --- /dev/null +++ b/Toolbar/src/Extension/ToolbarExtension.cs @@ -0,0 +1,17 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Toolbar +{ + public static class ToolbarExtension + { + public static void TryAddToolbarServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Toolbar/src/Provider/ToolbarStyleProvider.cs b/Toolbar/src/Provider/ToolbarStyleProvider.cs new file mode 100644 index 0000000..6fe9bc3 --- /dev/null +++ b/Toolbar/src/Provider/ToolbarStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Toolbar +{ + public class ToolbarStyleProvider : StyleTypeProvider + { + public ToolbarStyleProvider() : base(typeof(ToolbarStyle)) + { + } + } +} \ No newline at end of file diff --git a/Toolbar/src/Toolbar.csproj b/Toolbar/src/Toolbar.csproj index ca9b87a..2c4545b 100644 --- a/Toolbar/src/Toolbar.csproj +++ b/Toolbar/src/Toolbar.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Toolbar Skclusive.Material.Toolbar Skclusive.Material.Toolbar @@ -17,7 +16,7 @@ - + diff --git a/Toolbar/src/Toolbar/Toolbar.razor b/Toolbar/src/Toolbar/Toolbar.razor index a9bb38c..817fe8a 100644 --- a/Toolbar/src/Toolbar/Toolbar.razor +++ b/Toolbar/src/Toolbar/Toolbar.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Toolbar -@inherits ToolbarComponent +@inherits MaterialComponent - - .Toolbar-Root { - display: flex; - position: relative; - align-items: center; - } - +.Toolbar-Root { + display: flex; + position: relative; + align-items: center; +} + +.Toolbar-Gutters { + padding-left: calc(var(--theme-spacing) * 2px); + padding-right: calc(var(--theme-spacing) * 2px); +} + +@media (min-width:600px) { .Toolbar-Gutters { - padding-left: calc(var(--theme-spacing, 8) * 2px); - padding-right: calc(var(--theme-spacing, 8) * 2px); + padding-left: calc(var(--theme-spacing) * 3px); + padding-right: calc(var(--theme-spacing) * 3px); } +} - @media (min-width:600px) { - .Toolbar-Gutters { - padding-left: calc(var(--theme-spacing, 8) * 3px); - padding-right: calc(var(--theme-spacing, 8) * 3px); - } - } +.Toolbar-Regular { + min-height: 56px; +} +@media (min-width:0px) and (orientation: landscape) { .Toolbar-Regular { - min-height: 56px; - } - - @media (min-width:0px) and (orientation: landscape) { - .Toolbar-Regular { - min-height: 48px; - } - } - - @media (min-width:600px) { - .Toolbar-Regular { - min-height: 64px; - } + min-height: 48px; } +} - .Toolbar-Dense { - min-height: 48px; +@media (min-width:600px) { + .Toolbar-Regular { + min-height: 64px; } +} - \ No newline at end of file +.Toolbar-Dense { + min-height: 48px; +} \ No newline at end of file diff --git a/Transition/src/Collapse/Collapse.razor b/Transition/src/Collapse/Collapse.razor index d53b983..01a5a36 100644 --- a/Transition/src/Collapse/Collapse.razor +++ b/Transition/src/Collapse/Collapse.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Transition -@inherits CollapseComponent +@inherits MaterialComponentBase + OnEnter="@HandleEnterAsync" + OnEntering="@HandleEnteringAsync" + OnEntered="@HandleEnteredAsync" + OnExit="@HandleExitAsync" + OnExiting="@HandleExitingAsync" + OnExited="@HandleExitedAsync"> [Parameter] - public Action OnEnter { set; get; } + public EventCallback<(IReference, bool)> OnEnter { set; get; } /// /// Callback fired when the Menu is entering. /// [Parameter] - public Action OnEntering { set; get; } + public EventCallback<(IReference, bool)> OnEntering { set; get; } /// /// Callback fired when the Menu has entered. /// [Parameter] - public Action OnEntered { set; get; } + public EventCallback<(IReference, bool)> OnEntered { set; get; } /// /// Callback fired before the Menu exits. /// [Parameter] - public Action OnExit { set; get; } + public EventCallback OnExit { set; get; } /// /// Callback fired when the Menu is exiting. /// [Parameter] - public Action OnExiting { set; get; } + public EventCallback OnExiting { set; get; } /// /// Callback fired when the Menu has exited. /// [Parameter] - public Action OnExited { set; get; } + public EventCallback OnExited { set; get; } /// /// collapse transition duration. @@ -172,13 +172,10 @@ protected int GetExitDuration() return duration; } - protected void HandleEnter(IReference refback, bool appear) + protected async Task HandleEnterAsync((IReference, bool) args) { - _ = HandleEnterAsync(refback, appear); - } + (IReference refback, bool appear) = args; - protected async Task HandleEnterAsync(IReference refback, bool appear) - { var styles = new Dictionary { { "height", $"{CollapsedHeight.ToString(CultureInfo.InvariantCulture)}px" } @@ -186,16 +183,13 @@ protected async Task HandleEnterAsync(IReference refback, bool appear) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnEnter?.Invoke(refback, appear); + await OnEnter.InvokeAsync(args); } - protected void HandleEntering(IReference refback, bool appearing) + protected async Task HandleEnteringAsync((IReference, bool) args) { - _ = HandleEnteringAsync(refback, appearing); - } + (IReference refback, bool appearing) = args; - protected async Task HandleEnteringAsync(IReference refback, bool appearing) - { var wrappedHeight = await DomHelpers.GetHeightAsync(WrapperRef.Current, true); var styles = new Dictionary @@ -206,16 +200,13 @@ protected async Task HandleEnteringAsync(IReference refback, bool appearing) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnEntering?.Invoke(refback, appearing); + await OnEntering.InvokeAsync(args); } - protected void HandleEntered(IReference refback, bool appeared) + protected async Task HandleEnteredAsync((IReference, bool) args) { - _ = HandleEnteredAsync(refback, appeared); - } + (IReference refback, bool appeared) = args; - protected async Task HandleEnteredAsync(IReference refback, bool appeared) - { var styles = new Dictionary { { "height", "auto" } @@ -223,17 +214,12 @@ protected async Task HandleEnteredAsync(IReference refback, bool appeared) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnEntered?.Invoke(refback, appeared); - } - - protected void HandleExit(IReference refback) - { - _ = HandleExitAsync(refback); + await OnEntered.InvokeAsync(args); } protected async Task HandleExitAsync(IReference refback) { - var wrappedHeight = await DomHelpers.GetHeightAsync(WrapperRef.Current, true); + var wrappedHeight = await DomHelpers.GetHeightAsync(WrapperRef.Current, true); var styles = new Dictionary { @@ -242,12 +228,7 @@ protected async Task HandleExitAsync(IReference refback) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnExit?.Invoke(refback); - } - - protected void HandleExiting(IReference refback) - { - _ = HandleExitingAsync(refback); + await OnExit.InvokeAsync(refback); } protected async Task HandleExitingAsync(IReference refback) @@ -260,12 +241,12 @@ protected async Task HandleExitingAsync(IReference refback) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnExiting?.Invoke(refback); + await OnExiting.InvokeAsync(refback); } - protected void HandleExited(IReference refback) + protected Task HandleExitedAsync(IReference refback) { - OnExited?.Invoke(refback); + return OnExited.InvokeAsync(refback); } protected string GetTransition(int duration, int delay) diff --git a/Transition/src/Collapse/CollapseContainer.razor b/Transition/src/Collapse/CollapseContainer.razor index 1c25cee..0694800 100644 --- a/Transition/src/Collapse/CollapseContainer.razor +++ b/Transition/src/Collapse/CollapseContainer.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Transition -@inherits CollapseContainerComponent +@inherits MaterialComponent +.CollapseContainer-Root { + height: 0; + overflow: hidden; + transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} - .CollapseContainer-Root { - height: 0; - overflow: hidden; - transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } +.CollapseContainer-Entered { + height: auto; + overflow: visible; +} - .CollapseContainer-Entered { - height: auto; - overflow: visible; - } +.CollapseContainer-Hidden { + visibility: hidden; +} - .CollapseContainer-Hidden { - visibility: hidden; - } +.CollapseContainer-Wrapper { + display: flex; +} - .CollapseContainer-Wrapper { - display: flex; - } - - .CollapseContainer-WrapperInner { - width: 100%; - } - - \ No newline at end of file +.CollapseContainer-WrapperInner { + width: 100%; +} \ No newline at end of file diff --git a/Transition/src/Extension/TransitionExtension.cs b/Transition/src/Extension/TransitionExtension.cs new file mode 100644 index 0000000..62e3890 --- /dev/null +++ b/Transition/src/Extension/TransitionExtension.cs @@ -0,0 +1,26 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Transition.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Transition; +using Skclusive.Material.Theme; +using Microsoft.Extensions.DependencyInjection.Extensions; + +namespace Skclusive.Material.Transition +{ + public static class TransitionExtension + { + public static void TryAddMaterialTransitionServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddTransitionServices(config); + + services.TryAddTransient(); + + services.TryAddStyleTypeProvider(); + + services.TryAddScriptTypeProvider(); + } + } +} diff --git a/Transition/src/Fade/Fade.razor b/Transition/src/Fade/Fade.razor index 7ad61bb..831da81 100644 --- a/Transition/src/Fade/Fade.razor +++ b/Transition/src/Fade/Fade.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Transition -@inherits FadeComponent +@inherits MaterialComponentBase + OnEnter="@HandleEnterAsync" + OnExit="@HandleExitAsync" + OnEntering="@HandleEnteringAsync" + OnExited="@HandleExitedAsync"> @ChildContent.Invoke(GetChildContext(context)) \ No newline at end of file diff --git a/Transition/src/Fade/Fade.cs b/Transition/src/Fade/Fade.razor.cs similarity index 84% rename from Transition/src/Fade/Fade.cs rename to Transition/src/Fade/Fade.razor.cs index 9740144..7b924e1 100644 --- a/Transition/src/Fade/Fade.cs +++ b/Transition/src/Fade/Fade.razor.cs @@ -6,15 +6,16 @@ using System; using System.Collections.Generic; using static Skclusive.Material.Transition.TransitionUtil; +using System.Threading.Tasks; namespace Skclusive.Material.Transition { - public class FadeComponent : MaterialComponentBase + public partial class Fade : MaterialComponentBase { [Inject] public DomHelpers DomHelpers { set; get; } - public FadeComponent() : base("Fade") + public Fade() : base("Fade") { } @@ -34,37 +35,37 @@ public FadeComponent() : base("Fade") /// Callback fired before the Menu enters. /// [Parameter] - public Action OnEnter { set; get; } + public EventCallback<(IReference, bool)> OnEnter { set; get; } /// /// Callback fired when the Menu is entering. /// [Parameter] - public Action OnEntering { set; get; } + public EventCallback<(IReference, bool)> OnEntering { set; get; } /// /// Callback fired when the Menu has entered. /// [Parameter] - public Action OnEntered { set; get; } + public EventCallback<(IReference, bool)> OnEntered { set; get; } /// /// Callback fired before the Menu exits. /// [Parameter] - public Action OnExit { set; get; } + public EventCallback OnExit { set; get; } /// /// Callback fired when the Menu is exiting. /// [Parameter] - public Action OnExiting { set; get; } + public EventCallback OnExiting { set; get; } /// /// Callback fired when the Menu has exited. /// [Parameter] - public Action OnExited { set; get; } + public EventCallback OnExited { set; get; } /// /// fade transition duration. @@ -193,36 +194,36 @@ protected ITransitionContext GetChildContext(ITransitionContext context) .Build(); } - protected void HandleEnter(IReference refback, bool appear) + protected Task HandleEnterAsync((IReference, bool) args) { //SetTransition(refback, GetEnterDuration(), TransitionDelay); - OnEnter?.Invoke(refback, appear); + return OnEnter.InvokeAsync(args); } - protected void HandleEntering(IReference refback, bool appearing) + protected Task HandleEnteringAsync((IReference, bool) args) { - OnEntering?.Invoke(refback, appearing); + return OnEntering.InvokeAsync(args); } - protected void HandleEntered(IReference refback, bool appeared) + protected Task HandleEnteredAsync((IReference, bool) args) { - OnEntered?.Invoke(refback, appeared); + return OnEntered.InvokeAsync(args); } - protected void HandleExit(IReference refback) + protected Task HandleExitAsync(IReference refback) { - OnExit?.Invoke(refback); + return OnExit.InvokeAsync(refback); } - protected void HandleExiting(IReference refback) + protected Task HandleExitingAsync(IReference refback) { - OnExiting?.Invoke(refback); + return OnExiting.InvokeAsync(refback); } - protected void HandleExited(IReference refback) + protected Task HandleExitedAsync(IReference refback) { - OnExited?.Invoke(refback); + return OnExited.InvokeAsync(refback); } protected string GetTransition(int duration, int delay) diff --git a/Transition/src/Grow/Grow.razor b/Transition/src/Grow/Grow.razor index 160d478..831da81 100644 --- a/Transition/src/Grow/Grow.razor +++ b/Transition/src/Grow/Grow.razor @@ -1,5 +1,5 @@ @namespace Skclusive.Material.Transition -@inherits GrowComponent +@inherits MaterialComponentBase + OnEnter="@HandleEnterAsync" + OnExit="@HandleExitAsync" + OnEntering="@HandleEnteringAsync" + OnExited="@HandleExitedAsync"> @ChildContent.Invoke(GetChildContext(context)) \ No newline at end of file diff --git a/Transition/src/Grow/Grow.cs b/Transition/src/Grow/Grow.razor.cs similarity index 85% rename from Transition/src/Grow/Grow.cs rename to Transition/src/Grow/Grow.razor.cs index bcc996c..fde8311 100644 --- a/Transition/src/Grow/Grow.cs +++ b/Transition/src/Grow/Grow.razor.cs @@ -11,12 +11,12 @@ namespace Skclusive.Material.Transition { - public class GrowComponent : MaterialComponentBase + public partial class Grow : MaterialComponentBase { [Inject] public DomHelpers DomHelpers { set; get; } - public GrowComponent() : base("Grow") + public Grow() : base("Grow") { } @@ -36,37 +36,37 @@ public GrowComponent() : base("Grow") /// Callback fired before the Menu enters. /// [Parameter] - public Action OnEnter { set; get; } + public EventCallback<(IReference, bool)> OnEnter { set; get; } /// /// Callback fired when the Menu is entering. /// [Parameter] - public Action OnEntering { set; get; } + public EventCallback<(IReference, bool)> OnEntering { set; get; } /// /// Callback fired when the Menu has entered. /// [Parameter] - public Action OnEntered { set; get; } + public EventCallback<(IReference, bool)> OnEntered { set; get; } /// /// Callback fired before the Menu exits. /// [Parameter] - public Action OnExit { set; get; } + public EventCallback OnExit { set; get; } /// /// Callback fired when the Menu is exiting. /// [Parameter] - public Action OnExiting { set; get; } + public EventCallback OnExiting { set; get; } /// /// Callback fired when the Menu has exited. /// [Parameter] - public Action OnExited { set; get; } + public EventCallback OnExited { set; get; } /// /// grow transition duration. @@ -192,13 +192,10 @@ protected ITransitionContext GetChildContext(ITransitionContext context) .Build(); } - protected void HandleEnter(IReference refback, bool appear) + protected async Task HandleEnterAsync((IReference, bool) args) { - _ = HandleEnterAsync(refback, appear); - } + (IReference refback, bool appear) = args; - protected async Task HandleEnterAsync(IReference refback, bool appear) - { var transition = GetTransition(GetEnterDuration(), TransitionDelay); var styles = new Dictionary @@ -210,22 +207,17 @@ protected async Task HandleEnterAsync(IReference refback, bool appear) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnEnter?.Invoke(refback, appear); - } - - protected void HandleEntering(IReference refback, bool appearing) - { - OnEntering?.Invoke(refback, appearing); + await OnEnter.InvokeAsync(args); } - protected void HandleEntered(IReference refback, bool appeared) + protected Task HandleEnteringAsync((IReference, bool) args) { - OnEntered?.Invoke(refback, appeared); + return OnEntering.InvokeAsync(args); } - protected void HandleExit(IReference refback) + protected Task HandleEnteredAsync((IReference, bool) args) { - _ = HandleExitAsync(refback); + return OnEntered.InvokeAsync(args); } protected async Task HandleExitAsync(IReference refback) @@ -242,17 +234,17 @@ protected async Task HandleExitAsync(IReference refback) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnExit?.Invoke(refback); + await OnExit.InvokeAsync(refback); } - protected void HandleExiting(IReference refback) + protected Task HandleExitingAsync(IReference refback) { - OnExiting?.Invoke(refback); + return OnExiting.InvokeAsync(refback); } - protected void HandleExited(IReference refback) + protected Task HandleExitedAsync(IReference refback) { - OnExited?.Invoke(refback); + return OnExited.InvokeAsync(refback); } protected string GetTransition(int duration, int delay) diff --git a/Transition/src/Provider/TransitionScriptProvider.cs b/Transition/src/Provider/TransitionScriptProvider.cs new file mode 100644 index 0000000..6931d94 --- /dev/null +++ b/Transition/src/Provider/TransitionScriptProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Transition +{ + public class TransitionScriptProvider : ScriptTypeProvider + { + public TransitionScriptProvider() : base(typeof(TransitionScript)) + { + } + } +} \ No newline at end of file diff --git a/Transition/src/Provider/TransitionStyleProvider.cs b/Transition/src/Provider/TransitionStyleProvider.cs new file mode 100644 index 0000000..6696273 --- /dev/null +++ b/Transition/src/Provider/TransitionStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Transition +{ + public class TransitionStyleProvider : StyleTypeProvider + { + public TransitionStyleProvider() : base(typeof(CollapseContainerStyle)) + { + } + } +} \ No newline at end of file diff --git a/Transition/src/Script/TransitionScript.cs b/Transition/src/Script/TransitionScript.cs new file mode 100644 index 0000000..3c757bf --- /dev/null +++ b/Transition/src/Script/TransitionScript.cs @@ -0,0 +1,12 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Transition +{ + public class TransitionScript : ScriptBase + { + public override string GetScript() + { + return @"!function(){""use strict"";function t(...t){return function(t,...e){const{DomHelpers:n}=window.Skclusive.Script;return n[t].apply(null,e)}(""repaint"",...t)}function e(t,e){if(!e)return;const n=e.getBoundingClientRect();let r;if(e.fakeTransform)r=e.fakeTransform;else{const t=window.getComputedStyle(e);r=t.getPropertyValue(""-webkit-transform"")||t.getPropertyValue(""transform"")}let i=0,a=0;if(r&&""none""!==r&&""string""==typeof r){const t=r.split(""("")[1].split("")"")[0].split("","");i=parseInt(t[4],10),a=parseInt(t[5],10)}return""left""===t||""start""===t?`translateX(${window.innerWidth}px) translateX(-${n.left-i}px)`:""right""===t||""end""===t?`translateX(-${n.left+n.width-i}px)`:""up""===t||""top""===t?`translateY(${window.innerHeight}px) translateY(-${n.top-a}px)`:`translateY(-${n.top+n.height-a}px)`}window.Skclusive={...window.Skclusive,Material:{...(window.Skclusive||{}).Material,Transition:{getSlideTranslateValue:e,setSlideTranslateValue:function(n,r){if(!r)return;const i=e(n,r);i&&(r.style.webkitTransform=i,r.style.transform=i),t(r)}}}}}();"; + } + } +} diff --git a/Transition/src/Script/TransitionScript.js b/Transition/src/Script/TransitionScript.js new file mode 100644 index 0000000..73feec9 --- /dev/null +++ b/Transition/src/Script/TransitionScript.js @@ -0,0 +1,20 @@ +// @ts-check + +import { + getSlideTranslateValue, + setSlideTranslateValue, +} from "../SlideHelper/SlideHelper"; + +// @ts-ignore +window.Skclusive = { + // @ts-ignore + ...window.Skclusive, + Material: { + // @ts-ignore + ...(window.Skclusive || {}).Material, + Transition: { + getSlideTranslateValue, + setSlideTranslateValue, + }, + }, +}; diff --git a/Transition/src/Slide/Slide.razor b/Transition/src/Slide/Slide.razor index 5f47520..a001c01 100644 --- a/Transition/src/Slide/Slide.razor +++ b/Transition/src/Slide/Slide.razor @@ -1,18 +1,18 @@ @namespace Skclusive.Material.Transition -@inherits SlideComponent +@inherits MaterialComponentBase + OnEnter="@HandleEnterAsync" + OnEntering="@HandleEnteringAsync" + OnExit="@HandleExitAsync" + OnExited="@HandleExitedAsync"> @ChildContent.Invoke(GetChildContext(context)) \ No newline at end of file diff --git a/Transition/src/Slide/Slide.cs b/Transition/src/Slide/Slide.razor.cs similarity index 82% rename from Transition/src/Slide/Slide.cs rename to Transition/src/Slide/Slide.razor.cs index 39c5b0f..2eb073b 100644 --- a/Transition/src/Slide/Slide.cs +++ b/Transition/src/Slide/Slide.razor.cs @@ -1,17 +1,17 @@ using Microsoft.AspNetCore.Components; using Skclusive.Core.Component; using Skclusive.Material.Core; -using Skclusive.Material.Script; using Skclusive.Transition.Component; using Skclusive.Script.DomHelpers; using System; using System.Collections.Generic; using System.Threading.Tasks; using static Skclusive.Material.Transition.TransitionUtil; +using System.Linq; namespace Skclusive.Material.Transition { - public class SlideComponent : MaterialComponentBase + public partial class Slide : MaterialComponentBase { [Inject] public DomHelpers DomHelpers { set; get; } @@ -22,7 +22,7 @@ public class SlideComponent : MaterialComponentBase [Inject] public EventDelegator EventDelegator { set; get; } - public SlideComponent() : base("Slide") + public Slide() : base("Slide") { } @@ -48,25 +48,31 @@ public SlideComponent() : base("Slide") /// Callback fired before the Menu enters. /// [Parameter] - public Action OnEnter { set; get; } + public EventCallback<(IReference, bool)> OnEnter { set; get; } /// /// Callback fired when the Menu is entering. /// [Parameter] - public Action OnEntering { set; get; } + public EventCallback<(IReference, bool)> OnEntering { set; get; } /// /// Callback fired before the Menu exits. /// [Parameter] - public Action OnExit { set; get; } + public EventCallback OnExit { set; get; } /// /// Callback fired when the Menu has exited. /// [Parameter] - public Action OnExited { set; get; } + public EventCallback OnExited { set; get; } + + /// + /// slide transition appear. + /// + [Parameter] + public bool Appear { set; get; } = true; /// /// slide transition duration. @@ -164,7 +170,8 @@ protected int GetExitDuration() protected IEnumerable> GetChildStyles(ITransitionContext context) { - yield return Tuple.Create("visibility", context.State == TransitionState.Exited && !In ? "hidden" : "default"); + return Enumerable.Empty>(); + // yield return Tuple.Create("visibility", context.State == TransitionState.Exited && !In ? "hidden" : "default"); } protected ITransitionContext GetChildContext(ITransitionContext context) @@ -176,25 +183,19 @@ protected ITransitionContext GetChildContext(ITransitionContext context) .Build(); } - protected void HandleEnter(IReference refback, bool appear) + protected async Task HandleEnterAsync((IReference, bool) args) { - _ = HandleEnterAsync(refback, appear); - } + (IReference refback, bool appear) = args; - protected async Task HandleEnterAsync(IReference refback, bool appear) - { await SlideHelper.SetSlideTranslateValueAsync(Placement, refback.Current); - OnEnter?.Invoke(refback, appear); + await OnEnter.InvokeAsync(args); } - protected void HandleEntering(IReference refback, bool appearing) + protected async Task HandleEnteringAsync((IReference, bool) args) { - _ = HandleEnteringAsync(refback, appearing); - } + (IReference refback, bool appearing) = args; - protected async Task HandleEnteringAsync(IReference refback, bool appearing) - { var transition = CreateTransition("transform", GetEnterDuration(), TransitionDelay, TransitionEasing.EasingOut); var styles = new Dictionary @@ -207,12 +208,7 @@ protected async Task HandleEnteringAsync(IReference refback, bool appearing) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: true); - OnEntering?.Invoke(refback, appearing); - } - - protected void HandleExit(IReference refback) - { - _ = HandleExitAsync(refback); + await OnEntering.InvokeAsync(args); } protected async Task HandleExitAsync(IReference refback) @@ -229,12 +225,7 @@ protected async Task HandleExitAsync(IReference refback) await SlideHelper.SetSlideTranslateValueAsync(Placement, refback.Current); - OnExit?.Invoke(refback); - } - - protected void HandleExited(IReference refback) - { - _ = HandleExitedAsync(refback); + await OnExit.InvokeAsync(refback); } protected async Task HandleExitedAsync(IReference refback) @@ -250,7 +241,7 @@ protected async Task HandleExitedAsync(IReference refback) await DomHelpers.SetStyleAsync(refback.Current, styles, trigger: false); - OnExited?.Invoke(refback); + await OnExited.InvokeAsync(refback); } protected override async Task OnAfterUpdateAsync() @@ -284,16 +275,14 @@ protected override async Task OnAfterMountAsync() // await Task.Delay(2000); - await EventDelegator.RegisterAsync(default(ElementReference), "resize", 200); + await EventDelegator.InitAsync(default(ElementReference), "resize", 200); } - protected override void Dispose() + protected override ValueTask DisposeAsync() { - base.Dispose(); - EventDelegator.OnEvent -= OnWindowResize; - EventDelegator.Dispose(); + return EventDelegator.DisposeAsync(); } } } diff --git a/Transition/src/SlideHelper/DomHelpers.js b/Transition/src/SlideHelper/DomHelpers.js new file mode 100644 index 0000000..febf61a --- /dev/null +++ b/Transition/src/SlideHelper/DomHelpers.js @@ -0,0 +1,11 @@ +// @ts-check + +function onScript(func, ...args) { + // @ts-ignore + const { DomHelpers } = window.Skclusive.Script; + return DomHelpers[func].apply(null, args); +} + +export function repaint(...args) { + return onScript("repaint", ...args); +} \ No newline at end of file diff --git a/Script/src/SlideHelper/SlideHelper.cs b/Transition/src/SlideHelper/SlideHelper.cs similarity index 53% rename from Script/src/SlideHelper/SlideHelper.cs rename to Transition/src/SlideHelper/SlideHelper.cs index 3460ec1..64b8f3e 100644 --- a/Script/src/SlideHelper/SlideHelper.cs +++ b/Transition/src/SlideHelper/SlideHelper.cs @@ -1,24 +1,23 @@ using System.Threading.Tasks; using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; using Skclusive.Core.Component; -namespace Skclusive.Material.Script +namespace Skclusive.Material.Transition { public class SlideHelper { - private IJSRuntime JSRuntime { get; } + private IScriptService ScriptService { get; } - public SlideHelper(IJSRuntime jsruntime) + public SlideHelper(IScriptService scriptService) { - JSRuntime = jsruntime; + ScriptService = scriptService; } public async Task GetSlideTranslateValueAsync(Placement placement, ElementReference? element) { if (element.HasValue) { - return await JSRuntime.InvokeAsync("Skclusive.Material.Script.getSlideTranslateValue", placement.ToString().ToLower(), element); + return await ScriptService.InvokeAsync("Skclusive.Material.Transition.getSlideTranslateValue", placement.ToString().ToLower(), element); } return null; @@ -28,7 +27,7 @@ public async Task SetSlideTranslateValueAsync(Placement placement, ElementRefere { if (element.HasValue) { - await JSRuntime.InvokeVoidAsync("Skclusive.Material.Script.setSlideTranslateValue", placement.ToString().ToLower(), element); + await ScriptService.InvokeVoidAsync("Skclusive.Material.Transition.setSlideTranslateValue", placement.ToString().ToLower(), element); } } } diff --git a/Script/src/SlideHelper/SlideHelper.js b/Transition/src/SlideHelper/SlideHelper.js similarity index 60% rename from Script/src/SlideHelper/SlideHelper.js rename to Transition/src/SlideHelper/SlideHelper.js index 4a3c3b8..3b80b6c 100644 --- a/Script/src/SlideHelper/SlideHelper.js +++ b/Transition/src/SlideHelper/SlideHelper.js @@ -1,6 +1,6 @@ // @ts-check -import { repaint } from '../DomHelpers/DomHelpers'; +import { repaint } from "./DomHelpers"; // Translate the node so he can't be seen on the screen. // Later, we gonna translate back the node to his original location @@ -17,34 +17,33 @@ export function getSlideTranslateValue(direction, node) { } else { const computedStyle = window.getComputedStyle(node); transform = - computedStyle.getPropertyValue('-webkit-transform') || - computedStyle.getPropertyValue('transform'); + computedStyle.getPropertyValue("-webkit-transform") || + computedStyle.getPropertyValue("transform"); } let offsetX = 0; let offsetY = 0; - if (transform && transform !== 'none' && typeof transform === 'string') { - const transformValues = transform - .split('(')[1] - .split(')')[0] - .split(','); + if (transform && transform !== "none" && typeof transform === "string") { + const transformValues = transform.split("(")[1].split(")")[0].split(","); offsetX = parseInt(transformValues[4], 10); offsetY = parseInt(transformValues[5], 10); } - if (direction === 'left' || direction === 'start') { - return `translateX(${window.innerWidth}px) translateX(-${rect.left - - offsetX}px)`; + if (direction === "left" || direction === "start") { + return `translateX(${window.innerWidth}px) translateX(-${ + rect.left - offsetX + }px)`; } - if (direction === 'right' || direction === 'end') { + if (direction === "right" || direction === "end") { return `translateX(-${rect.left + rect.width - offsetX}px)`; } - if (direction === 'up' || direction === 'top') { - return `translateY(${window.innerHeight}px) translateY(-${rect.top - - offsetY}px)`; + if (direction === "up" || direction === "top") { + return `translateY(${window.innerHeight}px) translateY(-${ + rect.top - offsetY + }px)`; } // direction === 'down' diff --git a/Transition/src/Transition.csproj b/Transition/src/Transition.csproj index 114eaf4..26dd7ed 100644 --- a/Transition/src/Transition.csproj +++ b/Transition/src/Transition.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Transition Skclusive.Material.Transition Skclusive.Material.Transition @@ -17,16 +16,24 @@ - + - - + + + + + + + + $(DefaultItemExcludes);package.json;package-lock.json;node_modules\**\* + + diff --git a/Transition/src/TransitionStyles/TransitionStyles.razor b/Transition/src/TransitionStyles/TransitionStyles.razor deleted file mode 100644 index ee089b0..0000000 --- a/Transition/src/TransitionStyles/TransitionStyles.razor +++ /dev/null @@ -1,4 +0,0 @@ -@namespace Skclusive.Material.Transition -@inherits StyleComponentBase - - \ No newline at end of file diff --git a/Transition/src/package-lock.json b/Transition/src/package-lock.json new file mode 100644 index 0000000..946a6ac --- /dev/null +++ b/Transition/src/package-lock.json @@ -0,0 +1,649 @@ +{ + "name": "skclusive-material-transition", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/core": { + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.1.tgz", + "integrity": "sha512-XqF7F6FWQdKGGWAzGELL+aCO1p+lRY5Tj5/tbT3St1G8NaH70jhhDIKknIZaDans0OQBG5wRAldROLHSt44BgQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.11.0", + "@babel/helper-module-transforms": "^7.11.0", + "@babel/helpers": "^7.10.4", + "@babel/parser": "^7.11.1", + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.11.0", + "@babel/types": "^7.11.0", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.1", + "json5": "^2.1.2", + "lodash": "^4.17.19", + "resolve": "^1.3.2", + "semver": "^5.4.1", + "source-map": "^0.5.0" + } + }, + "@babel/generator": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz", + "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-create-class-features-plugin": { + "version": "7.10.5", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz", + "integrity": "sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==", + "dev": true, + "requires": { + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-member-expression-to-functions": "^7.10.5", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/helper-plugin-utils": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4" + } + }, + "@babel/helper-function-name": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz", + "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz", + "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz", + "integrity": "sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0" + } + }, + "@babel/helper-module-imports": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz", + "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-module-transforms": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz", + "integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-simple-access": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/template": "^7.10.4", + "@babel/types": "^7.11.0", + "lodash": "^4.17.19" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz", + "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + }, + "@babel/helper-replace-supers": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz", + "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.10.4", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-simple-access": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz", + "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==", + "dev": true, + "requires": { + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz", + "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, + "@babel/helpers": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz", + "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==", + "dev": true, + "requires": { + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.11.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz", + "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==", + "dev": true + }, + "@babel/plugin-proposal-class-properties": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz", + "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.10.4", + "@babel/helper-plugin-utils": "^7.10.4" + } + }, + "@babel/template": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", + "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/traverse": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz", + "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.11.0", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/parser": "^7.11.0", + "@babel/types": "^7.11.0", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.19" + } + }, + "@babel/types": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz", + "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.19", + "to-fast-properties": "^2.0.0" + } + }, + "@types/estree": { + "version": "0.0.45", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz", + "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==", + "dev": true + }, + "@types/node": { + "version": "12.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.12.tgz", + "integrity": "sha512-MGuvYJrPU0HUwqF7LqvIj50RZUX23Z+m583KBygKYUZLlZ88n6w28XRNJRJgsHukLEnLz6w6SvxZoLgbr5wLqQ==", + "dev": true + }, + "@types/resolve": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", + "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", + "dev": true + }, + "builtin-modules": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", + "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", + "dev": true + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "convert-source-map": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", + "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.1" + } + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "estree-walker": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", + "dev": true + }, + "fsevents": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", + "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", + "dev": true, + "optional": true + }, + "gensync": { + "version": "1.0.0-beta.1", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", + "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==", + "dev": true + }, + "globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "is-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", + "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=", + "dev": true + }, + "is-reference": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", + "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", + "dev": true, + "requires": { + "@types/estree": "*" + } + }, + "jest-worker": { + "version": "26.3.0", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz", + "integrity": "sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==", + "dev": true, + "requires": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^7.0.0" + }, + "dependencies": { + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true + }, + "json5": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", + "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "lodash": { + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", + "dev": true + }, + "magic-string": { + "version": "0.25.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", + "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.4" + } + }, + "merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "dev": true + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "path-parse": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", + "dev": true + }, + "randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "requires": { + "safe-buffer": "^5.1.0" + } + }, + "resolve": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.2.tgz", + "integrity": "sha512-cAVTI2VLHWYsGOirfeYVVQ7ZDejtQ9fp4YhYckWDEkFfqbVjaT11iM8k6xSAfGFMM+gDpZjMnFssPu8we+mqFw==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + }, + "rollup": { + "version": "2.23.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.23.1.tgz", + "integrity": "sha512-Heyl885+lyN/giQwxA8AYT2GY3U+gOlTqVLrMQYno8Z1X9lAOpfXPiKiZCyPc25e9BLJM3Zlh957dpTlO4pa8A==", + "dev": true, + "requires": { + "fsevents": "~2.1.2" + } + }, + "rollup-plugin-babel": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz", + "integrity": "sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "rollup-pluginutils": "^2.8.1" + } + }, + "rollup-plugin-commonjs": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz", + "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==", + "dev": true, + "requires": { + "estree-walker": "^0.6.1", + "is-reference": "^1.1.2", + "magic-string": "^0.25.2", + "resolve": "^1.11.0", + "rollup-pluginutils": "^2.8.1" + } + }, + "rollup-plugin-node-resolve": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz", + "integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==", + "dev": true, + "requires": { + "@types/resolve": "0.0.8", + "builtin-modules": "^3.1.0", + "is-module": "^1.0.0", + "resolve": "^1.11.1", + "rollup-pluginutils": "^2.8.1" + } + }, + "rollup-plugin-terser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.0.tgz", + "integrity": "sha512-p/N3lLiFusCjYTLfVkoaiRTOGr5AESEaljMPH12MhOtoMkmTBhIAfuadrcWy4am1U0vU4WTxO9fi0K09O4CboQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "jest-worker": "^26.2.1", + "serialize-javascript": "^4.0.0", + "terser": "^5.0.0" + } + }, + "rollup-pluginutils": { + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", + "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", + "dev": true, + "requires": { + "estree-walker": "^0.6.1" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "source-map-support": { + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", + "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "terser": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.1.0.tgz", + "integrity": "sha512-pwC1Jbzahz1ZPU87NQ8B3g5pKbhyJSiHih4gLH6WZiPU8mmS1IlGbB0A2Nuvkj/LCNsgIKctg6GkYwWCeTvXZQ==", + "dev": true, + "requires": { + "commander": "^2.20.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true + } + } +} diff --git a/Transition/src/package.json b/Transition/src/package.json new file mode 100644 index 0000000..b31858d --- /dev/null +++ b/Transition/src/package.json @@ -0,0 +1,22 @@ +{ + "name": "skclusive-material-transition", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "rollup -c rollup.config.js" + }, + "author": "", + "license": "ISC", + "dependencies": {}, + "devDependencies": { + "@babel/core": "7.11.1", + "@babel/plugin-proposal-class-properties": "7.10.4", + "rollup": "2.23.1", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-commonjs": "10.1.0", + "rollup-plugin-babel": "4.4.0", + "rollup-plugin-terser": "7.0.0" + } +} diff --git a/Transition/src/rollup.config.js b/Transition/src/rollup.config.js new file mode 100644 index 0000000..b79b498 --- /dev/null +++ b/Transition/src/rollup.config.js @@ -0,0 +1,24 @@ +import resolve from "rollup-plugin-node-resolve"; +import commonjs from "rollup-plugin-commonjs"; +import babel from "rollup-plugin-babel"; +import { terser } from "rollup-plugin-terser"; + +process.env.INCLUDE_DEPS === "true"; + +module.exports = { + input: "Script/TransitionScript.js", + output: { + file: "artifacts/TransitionScript.js", + format: "iife", + }, + plugins: [ + resolve(), + commonjs(), // so Rollup can convert dependencies to an ES module + babel({ + runtimeHelpers: true, + extensions: [".js", ".jsx", ".es6", ".es", ".mjs"], + plugins: ["@babel/plugin-proposal-class-properties"], + }), + terser(), + ], +}; diff --git a/Typography/src/Extension/TypographyExtension.cs b/Typography/src/Extension/TypographyExtension.cs new file mode 100644 index 0000000..9ea9492 --- /dev/null +++ b/Typography/src/Extension/TypographyExtension.cs @@ -0,0 +1,17 @@ +using Microsoft.Extensions.DependencyInjection; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using Skclusive.Material.Theme; + +namespace Skclusive.Material.Typography +{ + public static class TypographyExtension + { + public static void TryAddTypographyServices(this IServiceCollection services, IMaterialConfig config) + { + services.TryAddThemeServices(config); + + services.TryAddStyleTypeProvider(); + } + } +} diff --git a/Typography/src/Provider/TypographyStyleProvider.cs b/Typography/src/Provider/TypographyStyleProvider.cs new file mode 100644 index 0000000..c7f9fc7 --- /dev/null +++ b/Typography/src/Provider/TypographyStyleProvider.cs @@ -0,0 +1,11 @@ +using Skclusive.Core.Component; + +namespace Skclusive.Material.Typography +{ + public class TypographyStyleProvider : StyleTypeProvider + { + public TypographyStyleProvider() : base(typeof(TypographyStyle)) + { + } + } +} \ No newline at end of file diff --git a/Typography/src/Typography.csproj b/Typography/src/Typography.csproj index 6486781..768db47 100644 --- a/Typography/src/Typography.csproj +++ b/Typography/src/Typography.csproj @@ -1,10 +1,9 @@  - 2.0.1 + 5.0.0 $(VersionSuffix) - netstandard2.1 - 3.0 + net5.0 Skclusive.Material.Typography Skclusive.Material.Typography Skclusive.Material.Typography @@ -17,7 +16,7 @@ - + diff --git a/Typography/src/Typography/Typography.cs b/Typography/src/Typography/Typography.cs index a043450..59a1561 100644 --- a/Typography/src/Typography/Typography.cs +++ b/Typography/src/Typography/Typography.cs @@ -136,9 +136,13 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) builder.AddAttribute(7, "onblur", EventCallback.Factory.Create(this, HandleBlurAsync)); if (!string.IsNullOrWhiteSpace(Id)) builder.AddAttribute(8, "id", Id); - builder.AddMultipleAttributes(9, Attributes); - builder.AddContent(8, ChildContent); - builder.AddElementReferenceCapture(10, (__value) => { + if (OnClickStop.HasValue) + builder.AddEventStopPropagationAttribute(9, "onclick", OnClickStop.Value); + if (OnClickPrevent.HasValue) + builder.AddEventPreventDefaultAttribute(10, "onclick", OnClickPrevent.Value); + builder.AddMultipleAttributes(11, Attributes); + builder.AddContent(12, ChildContent); + builder.AddElementReferenceCapture(13, (__value) => { RootRef.Current = (ElementReference)__value; }); builder.CloseElement(); diff --git a/Typography/src/Typography/TypographyStyle.razor b/Typography/src/Typography/TypographyStyle.razor index 792eeed..81cbe00 100644 --- a/Typography/src/Typography/TypographyStyle.razor +++ b/Typography/src/Typography/TypographyStyle.razor @@ -1,186 +1,181 @@ @namespace Skclusive.Material.Typography @inherits StyleComponentBase - - - .Typography-Root { - margin: 0; - } - - .Typography-Body2 { - font-size: var(--theme-typography-body2-font-size, 0.875rem); - font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-body2-font-weight, 400); - line-height: var(--theme-typography-body2-line-height, 1.43); - letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em); - } - - .Typography-Body1 { - font-size: var(--theme-typography-body1-font-size, 1rem); - font-family: var(--theme-typography-body1-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-body1-font-weight, 400); - line-height: var(--theme-typography-body1-line-height, 1.5); - letter-spacing: var(--theme-typography-body1-letter-spacing, 0.00938em); - } - - .Typography-Caption { - font-size: var(--theme-typography-caption-font-size, 0.75rem); - font-family: var(--theme-typography-caption-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-caption-font-weight, 400); - line-height: var(--theme-typography-caption-line-height, 1.66); - letter-spacing: var(--theme-typography-caption-letter-spacing, 0.03333em); - } - - .Typography-Button { - font-size: var(--theme-typography-caption-font-size, 0.875rem); - font-family: var(--theme-typography-caption-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-caption-font-weight, 500); - line-height: var(--theme-typography-caption-line-height, 1.75); - letter-spacing: var(--theme-typography-caption-letter-spacing, 0.02857em); - text-transform: var(--theme-typography-button-text-transform, uppercase); - } - - .Typography-H1 { - font-size: var(--theme-typography-h1-font-size, 6rem); - font-family: var(--theme-typography-h1-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-h1-font-weight, 300); - line-height: var(--theme-typography-h1-line-height, 1); - letter-spacing: var(--theme-typography-h1-letter-spacing, -0.01562em); - } - - .Typography-H2 { - font-size: var(--theme-typography-h2-font-size, 3.75rem); - font-family: var(--theme-typography-h2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-h2-font-weight, 300); - line-height: var(--theme-typography-h2-line-height, 1); - letter-spacing: var(--theme-typography-h2-letter-spacing, -0.00833em); - } - - .Typography-H3 { - font-size: var(--theme-typography-h3-font-size, 3rem); - font-family: var(--theme-typography-h3-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-h3-font-weight, 400); - line-height: var(--theme-typography-h3-line-height, 1.04); - letter-spacing: var(--theme-typography-h3-letter-spacing, 0em); - } - - .Typography-H4 { - font-size: var(--theme-typography-h4-font-size, 2.125rem); - font-family: var(--theme-typography-h4-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-h4-font-weight, 400); - line-height: var(--theme-typography-h4-line-height, 1.17); - letter-spacing: var(--theme-typography-h4-letter-spacing, 0.00735em); - } - - .Typography-H5 { - font-size: var(--theme-typography-h5-font-size, 1.5rem); - font-family: var(--theme-typography-h5-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-h5-font-weight, 400); - line-height: var(--theme-typography-h5-line-height, 1.33); - letter-spacing: var(--theme-typography-h5-letter-spacing, 0em); - } - - .Typography-H6 { - font-size: var(--theme-typography-h6-font-size, 1.25rem); - font-family: var(--theme-typography-h6-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-h6-font-weight, 500); - line-height: var(--theme-typography-h6-line-height, 1.6); - letter-spacing: var(--theme-typography-h6-letter-spacing, 0.0075em); - } - - .Typography-Subtitle1 { - font-size: var(--theme-typography-subtitle1-font-size, 1rem); - font-family: var(--theme-typography-subtitle1-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-subtitle1-font-weight, 400); - line-height: var(--theme-typography-subtitle1-line-height, 1.75); - letter-spacing: var(--theme-typography-subtitle1-letter-spacing, 0.00938em); - } - - .Typography-Subtitle2 { - font-size: var(--theme-typography-subtitle2-font-size, 0.875rem); - font-family: var(--theme-typography-subtitle2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-subtitle2-font-weight, 500); - line-height: var(--theme-typography-subtitle2-line-height, 1.57); - letter-spacing: var(--theme-typography-subtitle2-letter-spacing, 0.00714em); - } - - .Typography-Overline { - font-size: var(--theme-typography-overline-font-size, 0.75rem); - font-family: var(--theme-typography-overline-font-family, "Roboto", "Helvetica", "Arial", sans-serif); - font-weight: var(--theme-typography-overline-font-weight, 400); - line-height: var(--theme-typography-overline-line-height, 2.66); - letter-spacing: var(--theme-typography-overline-letter-spacing, 0.08333em); - text-transform: var(--theme-typography-overline-text-transform, uppercase); - } - - .Typography-SrOnly { - width: 1px; - height: 1px; - overflow: hidden; - position: absolute; - } - - .Typography-Align-Left { - text-align: left; - } - - .Typography-Align-Center { - text-align: center; - } - - .Typography-Align-Right { - text-align: right; - } - - .Typography-Align-Justify { - text-align: justify; - } - - .Typography-NoWrap { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .Typography-GutterBottom { - margin-bottom: 0.35em; - } - - .Typography-Paragraph { - margin-bottom: 16px; - } - - .Typography-Color-Inherit { - color: inherit; - } - - .Typography-Color-Primary { - color: var(--theme-palette-primary-main, #1976d2); - } - - .Typography-Color-Secondary { - color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); - } - - .Typography-Color-TextPrimary { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); - } - - .Typography-Color-TextSecondary { - color: var(--theme-palette-text-secondary, rgba(0, 0, 0, 0.54)); - } - - .Typography-Color-Error { - color: var(--theme-palette-error-main, #f44336); - } - - .Typography-Display-Inline { - display: inline; - } - - .Typography-Display-Block { - display: block; - } - - \ No newline at end of file +.Typography-Root { + margin: 0; +} + +.Typography-Body2 { + font-size: var(--theme-typography-body2-font-size); + font-family: var(--theme-typography-body2-font-family); + font-weight: var(--theme-typography-body2-font-weight); + line-height: var(--theme-typography-body2-line-height); + letter-spacing: var(--theme-typography-body2-letter-spacing); +} + +.Typography-Body1 { + font-size: var(--theme-typography-body1-font-size); + font-family: var(--theme-typography-body1-font-family); + font-weight: var(--theme-typography-body1-font-weight); + line-height: var(--theme-typography-body1-line-height); + letter-spacing: var(--theme-typography-body1-letter-spacing); +} + +.Typography-Caption { + font-size: var(--theme-typography-caption-font-size); + font-family: var(--theme-typography-caption-font-family); + font-weight: var(--theme-typography-caption-font-weight); + line-height: var(--theme-typography-caption-line-height); + letter-spacing: var(--theme-typography-caption-letter-spacing); +} + +.Typography-Button { + font-size: var(--theme-typography-button-font-size); + font-family: var(--theme-typography-button-font-family); + font-weight: var(--theme-typography-button-font-weight); + line-height: var(--theme-typography-button-line-height); + letter-spacing: var(--theme-typography-button-letter-spacing); + text-transform: var(--theme-typography-button-text-transform); +} + +.Typography-H1 { + font-size: var(--theme-typography-h1-font-size); + font-family: var(--theme-typography-h1-font-family); + font-weight: var(--theme-typography-h1-font-weight); + line-height: var(--theme-typography-h1-line-height); + letter-spacing: var(--theme-typography-h1-letter-spacing); +} + +.Typography-H2 { + font-size: var(--theme-typography-h2-font-size); + font-family: var(--theme-typography-h2-font-family); + font-weight: var(--theme-typography-h2-font-weight); + line-height: var(--theme-typography-h2-line-height); + letter-spacing: var(--theme-typography-h2-letter-spacing); +} + +.Typography-H3 { + font-size: var(--theme-typography-h3-font-size); + font-family: var(--theme-typography-h3-font-family); + font-weight: var(--theme-typography-h3-font-weight); + line-height: var(--theme-typography-h3-line-height); + letter-spacing: var(--theme-typography-h3-letter-spacing); +} + +.Typography-H4 { + font-size: var(--theme-typography-h4-font-size); + font-family: var(--theme-typography-h4-font-family); + font-weight: var(--theme-typography-h4-font-weight); + line-height: var(--theme-typography-h4-line-height); + letter-spacing: var(--theme-typography-h4-letter-spacing); +} + +.Typography-H5 { + font-size: var(--theme-typography-h5-font-size); + font-family: var(--theme-typography-h5-font-family); + font-weight: var(--theme-typography-h5-font-weight); + line-height: var(--theme-typography-h5-line-height); + letter-spacing: var(--theme-typography-h5-letter-spacing); +} + +.Typography-H6 { + font-size: var(--theme-typography-h6-font-size); + font-family: var(--theme-typography-h6-font-family); + font-weight: var(--theme-typography-h6-font-weight); + line-height: var(--theme-typography-h6-line-height); + letter-spacing: var(--theme-typography-h6-letter-spacing); +} + +.Typography-Subtitle1 { + font-size: var(--theme-typography-subtitle1-font-size); + font-family: var(--theme-typography-subtitle1-font-family); + font-weight: var(--theme-typography-subtitle1-font-weight); + line-height: var(--theme-typography-subtitle1-line-height); + letter-spacing: var(--theme-typography-subtitle1-letter-spacing); +} + +.Typography-Subtitle2 { + font-size: var(--theme-typography-subtitle2-font-size); + font-family: var(--theme-typography-subtitle2-font-family); + font-weight: var(--theme-typography-subtitle2-font-weight); + line-height: var(--theme-typography-subtitle2-line-height); + letter-spacing: var(--theme-typography-subtitle2-letter-spacing); +} + +.Typography-Overline { + font-size: var(--theme-typography-overline-font-size); + font-family: var(--theme-typography-overline-font-family); + font-weight: var(--theme-typography-overline-font-weight); + line-height: var(--theme-typography-overline-line-height); + letter-spacing: var(--theme-typography-overline-letter-spacing); + text-transform: var(--theme-typography-overline-text-transform); +} + +.Typography-SrOnly { + width: 1px; + height: 1px; + overflow: hidden; + position: absolute; +} + +.Typography-Align-Left { + text-align: left; +} + +.Typography-Align-Center { + text-align: center; +} + +.Typography-Align-Right { + text-align: right; +} + +.Typography-Align-Justify { + text-align: justify; +} + +.Typography-NoWrap { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.Typography-GutterBottom { + margin-bottom: 0.35em; +} + +.Typography-Paragraph { + margin-bottom: 16px; +} + +.Typography-Color-Inherit { + color: inherit; +} + +.Typography-Color-Primary { + color: var(--theme-palette-primary-main); +} + +.Typography-Color-Secondary { + color: var(--theme-palette-secondary-main); +} + +.Typography-Color-TextPrimary { + color: var(--theme-palette-text-primary); +} + +.Typography-Color-TextSecondary { + color: var(--theme-palette-text-secondary); +} + +.Typography-Color-Error { + color: var(--theme-palette-error-main); +} + +.Typography-Display-Inline { + display: inline; +} + +.Typography-Display-Block { + display: block; +} \ No newline at end of file