[New Component] - MudTextM3

CodeBeam.MudBlazor.Extensions/Components/TypographyM3/BaseTypographyM3.cs

@@ -0,0 +1,242 @@
+namespace MudExtensions.Components.TypographyM3
+{
+#nullable enable
+    public class TypographyM3
+    {
+        public DisplayLarge DisplayLarge { get; set; } = new();
+        public DisplayMedium DisplayMedium { get; set; } = new();
+        public DisplaySmall DisplaySmall { get; set; } = new();
+
+        public HeadlineLarge HeadlineLarge { get; set; } = new();
+        public HeadlineMedium HeadlineMedium { get; set; } = new();
+        public HeadlineSmall HeadlineSmall { get; set; } = new();
+
+        public TitleLarge TitleLarge { get; set; } = new();
+        public TitleMedium TitleMedium { get; set; } = new();
+        public TitleSmall TitleSmall { get; set; } = new();
+
+        public LabelLarge LabelLarge { get; set; } = new();
+        public LabelMedium LabelMedium { get; set; } = new();
+        public LabelSmall LabelSmall { get; set; } = new();
+
+        public BodyLarge BodyLarge { get; set; } = new();
+        public BodyMedium BodyMedium { get; set; } = new();
+        public BodySmall BodySmall { get; set; } = new();
+    }
+
+    public class BaseTypographyM3
+    {
+        public const string DefaultFontFamily = "Roboto";
+        public const int DefaultFontSize = 16;
+        public string[] Font { get; set; } = new string[] { DefaultFontFamily };
+
+        private double _lineHeight;
+        public double LineHeight 
+        { 
+            get => _lineHeight;
+            set
+            {
+                // https://m3.material.io/styles/typography/type-scale-tokens
+                // Font size unit: rem
+                // Conversion ratio: 0.0625
+                // Web browsers calculate the REM (the root em size) based on the root element size. The default for modern web browsers is 16px, so the conversion is SP_SIZE/16 = rem.
+                _lineHeight = value / DefaultFontSize;
+            }
+        }
+
+        private double _size;
+        public double Size
+        {
+            get => _size;
+            set
+            {
+                _size = value / DefaultFontSize;
+            }
+        }
+
+        private double _tracking;
+        public double Tracking
+        {
+            get => _tracking;
+            set
+            {
+                // https://m3.material.io/styles/typography/type-scale-tokens
+                // Letter spacing unit: rem
+                // Conversion ratio: (Tracking value in px / font size in sp) = letter spacing
+                // Example: (.2 tracking / 16px font size) = 0.0125 rem
+                _tracking = value / DefaultFontSize;
+            }
+        }
+        public int Weight { get; set; }
+    }
+
+    public class DisplayLarge : BaseTypographyM3
+    {
+        public DisplayLarge() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 64;
+            Size = 57;
+            Tracking = -0.25;
+            Weight = 400;
+        }
+    }
+
+    public class DisplayMedium : BaseTypographyM3
+    {
+        public DisplayMedium() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 52;
+            Size = 45;
+            Tracking = 0;
+            Weight = 400;
+        }
+    }
+
+    public class DisplaySmall : BaseTypographyM3
+    {
+        public DisplaySmall() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 44;
+            Size = 36;
+            Tracking = 0;
+            Weight = 400;
+        }
+    }
+
+    public class HeadlineLarge : BaseTypographyM3
+    {
+        public HeadlineLarge() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 40;
+            Size = 32;
+            Tracking = 0;
+            Weight = 400;
+        }
+    }
+
+    public class HeadlineMedium : BaseTypographyM3
+    {
+        public HeadlineMedium() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 36;
+            Size = 28;
+            Tracking = 0;
+            Weight = 400;
+        }
+    }
+    public class HeadlineSmall : BaseTypographyM3
+    {
+        public HeadlineSmall() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 32;
+            Size = 24;
+            Tracking = 0;
+            Weight = 400;
+        }
+    }
+    public class TitleLarge : BaseTypographyM3
+    {
+        public TitleLarge() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 28;
+            Size = 22;
+            Tracking = 0;
+            Weight = 400;
+        }
+    }
+    public class TitleMedium : BaseTypographyM3
+    {
+        public TitleMedium() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 24;
+            Size = 16;
+            Tracking = 0.15;
+            Weight = 500;
+        }
+    }
+    public class TitleSmall : BaseTypographyM3
+    {
+        public TitleSmall() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 20;
+            Size = 14;
+            Tracking = 0.1;
+            Weight = 500;
+        }
+    }
+    public class BodyLarge : BaseTypographyM3
+    {
+        public BodyLarge() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 24;
+            Size = 16;
+            Tracking = 0.5;
+            Weight = 400;
+        }
+    }
+    public class BodyMedium : BaseTypographyM3
+    {
+        public BodyMedium() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 20;
+            Size = 14;
+            Tracking = 0.25;
+            Weight = 400;
+        }
+    }
+    public class BodySmall : BaseTypographyM3
+    {
+        public BodySmall() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 16;
+            Size = 12;
+            Tracking = 0.4;
+            Weight = 400;
+        }
+    }
+    public class LabelLarge : BaseTypographyM3
+    {
+        public LabelLarge() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 20;
+            Size = 14;
+            Tracking = 0.1;
+            Weight = 500;
+        }
+    }
+    public class LabelMedium : BaseTypographyM3
+    {
+        public LabelMedium() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 16;
+            Size = 12;
+            Tracking = 0.5;
+            Weight = 500;
+        }
+    }
+    public class LabelSmall : BaseTypographyM3
+    {
+        public LabelSmall() : base()
+        {
+            Font = new string[] { DefaultFontFamily };
+            LineHeight = 16;
+            Size = 11;
+            Tracking = 0.5;
+            Weight = 500;
+        }
+    }
+}

CodeBeam.MudBlazor.Extensions/Components/TypographyM3/MudTextM3.razor

@@ -0,0 +1,6 @@
+@namespace MudExtensions
+@inherits MudComponentBase
+
+<div class="@ClassName" style="@StyleString">
+    @ChildContent
+</div> 

CodeBeam.MudBlazor.Extensions/Components/TypographyM3/MudTextM3.razor.cs

@@ -0,0 +1,40 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using MudBlazor.Utilities;
+using MudExtensions.Enums;
+
+namespace MudExtensions
+{
+#nullable enable
+    public partial class MudTextM3 : MudComponentBase
+    {
+        protected string ClassName => new CssBuilder("mud-typographym3")
+            .AddClass($"mud-typographym3-{Typo.ToString().ToLower()}-{Size.ToString().ToLower()}") // .mud-typographym3-#{$style}-#{$size}
+            .AddClass(Class)
+            .Build();
+
+        protected string StyleString => new StyleBuilder()
+            .AddStyle(Style)
+            .Build();
+
+        /// <summary>
+        /// Set the text-align on the component.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.Text.Appearance)]
+        public TypoM3 Typo { get; set; } = TypoM3.Body;
+        /// <summary>
+        /// Set the text-align on the component.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.Text.Appearance)]
+        public Size Size { get; set; } = Size.Large; 
+
+        /// <summary>
+        /// Child content of component.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.Text.Behavior)]
+        public RenderFragment? ChildContent { get; set; }
+    }
+}

CodeBeam.MudBlazor.Extensions/Components/TypographyProvider/MudTypographyProvider.razor

@@ -0,0 +1,107 @@
+@namespace MudExtensions
+@inherits MudComponentBase
+
+@using System.Text
+@using MudExtensions.Components.TypographyM3;
+@using MudExtensions.Enums
+@using MudExtensions.Utilities
+
+
+<style>
+    :root {
+        @($"--mud-typographym3-display-large-font : {string.Join(',', TypographyM3.DisplayLarge.Font)};") 
+        @($"--mud-typographym3-display-large-line-height : {TypographyM3.DisplayLarge.LineHeight}rem;") 
+        @($"--mud-typographym3-display-large-size : {TypographyM3.DisplayLarge.Size}rem;") 
+        @($"--mud-typographym3-display-large-tracking : {TypographyM3.DisplayLarge.Tracking}rem;") 
+        @($"--mud-typographym3-display-large-weight : {TypographyM3.DisplayLarge.Weight};")
+
+        @($"--mud-typographym3-display-medium-font : {string.Join(',', TypographyM3.DisplayMedium.Font)};") 
+        @($"--mud-typographym3-display-medium-line-height : {TypographyM3.DisplayMedium.LineHeight}rem;") 
+        @($"--mud-typographym3-display-medium-size : {TypographyM3.DisplayMedium.Size}rem;") 
+        @($"--mud-typographym3-display-medium-tracking : {TypographyM3.DisplayMedium.Tracking}rem;") 
+        @($"--mud-typographym3-display-medium-weight : {TypographyM3.DisplayMedium.Weight};")
+
+        @($"--mud-typographym3-display-small-font : {string.Join(',', TypographyM3.DisplaySmall.Font)};") 
+        @($"--mud-typographym3-display-small-line-height : {TypographyM3.DisplaySmall.LineHeight}rem;") 
+        @($"--mud-typographym3-display-small-size : {TypographyM3.DisplaySmall.Size}rem;") 
+        @($"--mud-typographym3-display-small-tracking : {TypographyM3.DisplaySmall.Tracking}rem;") 
+        @($"--mud-typographym3-display-small-weight : {TypographyM3.DisplaySmall.Weight};")
+
+
+        @($"--mud-typographym3-headline-large-font : {string.Join(',', TypographyM3.HeadlineLarge.Font)};") 
+        @($"--mud-typographym3-headline-large-line-height : {TypographyM3.HeadlineLarge.LineHeight}rem;") 
+        @($"--mud-typographym3-headline-large-size : {TypographyM3.HeadlineLarge.Size}rem;") 
+        @($"--mud-typographym3-headline-large-tracking : {TypographyM3.HeadlineLarge.Tracking}rem;") 
+        @($"--mud-typographym3-headline-large-weight : {TypographyM3.HeadlineLarge.Weight};")
+
+        @($"--mud-typographym3-headline-medium-font : {string.Join(',', TypographyM3.HeadlineMedium.Font)};") 
+        @($"--mud-typographym3-headline-medium-line-height : {TypographyM3.HeadlineMedium.LineHeight}rem;") 
+        @($"--mud-typographym3-headline-medium-size : {TypographyM3.HeadlineMedium.Size}rem;") 
+        @($"--mud-typographym3-headline-medium-tracking : {TypographyM3.HeadlineMedium.Tracking}rem;") 
+        @($"--mud-typographym3-headline-medium-weight : {TypographyM3.HeadlineMedium.Weight};")
+
+        @($"--mud-typographym3-headline-small-font : {string.Join(',', TypographyM3.HeadlineSmall.Font)};") 
+        @($"--mud-typographym3-headline-small-line-height : {TypographyM3.HeadlineSmall.LineHeight}rem;") 
+        @($"--mud-typographym3-headline-small-size : {TypographyM3.HeadlineSmall.Size}rem;") 
+        @($"--mud-typographym3-headline-small-tracking : {TypographyM3.HeadlineSmall.Tracking}rem;") 
+        @($"--mud-typographym3-headline-small-weight : {TypographyM3.HeadlineSmall.Weight};")
+
+
+        @($"--mud-typographym3-title-large-font : {string.Join(',', TypographyM3.TitleLarge.Font)};") 
+        @($"--mud-typographym3-title-large-line-height : {TypographyM3.TitleLarge.LineHeight}rem;") 
+        @($"--mud-typographym3-title-large-size : {TypographyM3.TitleLarge.Size}rem;") 
+        @($"--mud-typographym3-title-large-tracking : {TypographyM3.TitleLarge.Tracking}rem;") 
+        @($"--mud-typographym3-title-large-weight : {TypographyM3.TitleLarge.Weight};")
+
+        @($"--mud-typographym3-title-medium-font : {string.Join(',', TypographyM3.TitleMedium.Font)};") 
+        @($"--mud-typographym3-title-medium-line-height : {TypographyM3.TitleMedium.LineHeight}rem;") 
+        @($"--mud-typographym3-title-medium-size : {TypographyM3.TitleMedium.Size}rem;") 
+        @($"--mud-typographym3-title-medium-tracking : {TypographyM3.TitleMedium.Tracking}rem;") 
+        @($"--mud-typographym3-title-medium-weight : {TypographyM3.TitleMedium.Weight};")
+
+        @($"--mud-typographym3-title-small-font : {string.Join(',', TypographyM3.TitleSmall.Font)};") 
+        @($"--mud-typographym3-title-small-line-height : {TypographyM3.TitleSmall.LineHeight}rem;") 
+        @($"--mud-typographym3-title-small-size : {TypographyM3.TitleSmall.Size}rem;") 
+        @($"--mud-typographym3-title-small-tracking : {TypographyM3.TitleSmall.Tracking}rem;") 
+        @($"--mud-typographym3-title-small-weight : {TypographyM3.TitleSmall.Weight};")
+
+
+        @($"--mud-typographym3-label-large-font : {string.Join(',', TypographyM3.LabelLarge.Font)};") 
+        @($"--mud-typographym3-label-large-line-height : {TypographyM3.LabelLarge.LineHeight}rem;") 
+        @($"--mud-typographym3-label-large-size : {TypographyM3.LabelLarge.Size}rem;") 
+        @($"--mud-typographym3-label-large-tracking : {TypographyM3.LabelLarge.Tracking}rem;") 
+        @($"--mud-typographym3-label-large-weight : {TypographyM3.LabelLarge.Weight};")
+
+        @($"--mud-typographym3-label-medium-font : {string.Join(',', TypographyM3.LabelMedium.Font)};") 
+        @($"--mud-typographym3-label-medium-line-height : {TypographyM3.LabelMedium.LineHeight}rem;") 
+        @($"--mud-typographym3-label-medium-size : {TypographyM3.LabelMedium.Size}rem;") 
+        @($"--mud-typographym3-label-medium-tracking : {TypographyM3.LabelMedium.Tracking}rem;") 
+        @($"--mud-typographym3-label-medium-weight : {TypographyM3.LabelMedium.Weight};")
+
+        @($"--mud-typographym3-label-small-font : {string.Join(',', TypographyM3.LabelSmall.Font)};") 
+        @($"--mud-typographym3-label-small-line-height : {TypographyM3.LabelSmall.LineHeight}rem;") 
+        @($"--mud-typographym3-label-small-size : {TypographyM3.LabelSmall.Size}rem;") 
+        @($"--mud-typographym3-label-small-tracking : {TypographyM3.LabelSmall.Tracking}rem;") 
+        @($"--mud-typographym3-label-small-weight : {TypographyM3.LabelSmall.Weight};")
+
+
+        @($"--mud-typographym3-body-large-font : {string.Join(',', TypographyM3.BodyLarge.Font)};") 
+        @($"--mud-typographym3-body-large-line-height : {TypographyM3.BodyLarge.LineHeight}rem;") 
+        @($"--mud-typographym3-body-large-size : {TypographyM3.BodyLarge.Size}rem;") 
+        @($"--mud-typographym3-body-large-tracking : {TypographyM3.BodyLarge.Tracking}rem;") 
+        @($"--mud-typographym3-body-large-weight : {TypographyM3.BodyLarge.Weight};")
+
+        @($"--mud-typographym3-body-medium-font : {string.Join(',', TypographyM3.BodyMedium.Font)};") 
+        @($"--mud-typographym3-body-medium-line-height : {TypographyM3.BodyMedium.LineHeight}rem;") 
+        @($"--mud-typographym3-body-medium-size : {TypographyM3.BodyMedium.Size}rem;") 
+        @($"--mud-typographym3-body-medium-tracking : {TypographyM3.BodyMedium.Tracking}rem;") 
+        @($"--mud-typographym3-body-medium-weight : {TypographyM3.BodyMedium.Weight};")
+
+        @($"--mud-typographym3-body-small-font : {string.Join(',', TypographyM3.BodySmall.Font)};") 
+        @($"--mud-typographym3-body-small-line-height : {TypographyM3.BodySmall.LineHeight}rem;") 
+        @($"--mud-typographym3-body-small-size : {TypographyM3.BodySmall.Size}rem;") 
+        @($"--mud-typographym3-body-small-tracking : {TypographyM3.BodySmall.Tracking}rem;") 
+        @($"--mud-typographym3-body-small-weight : {TypographyM3.BodySmall.Weight};")
+    }
+
+</style>