Skip to content

Commit 483f982

Browse files
segfault-segfault
segfault-
and
segfault
authored
[New Component] - MudTextM3 (#243)
* no message * no message * Initial creation of MudTextM3 based on material 3 typography specifications - https://m3.material.io/styles/typography/overview * missed scss update * Updates based on review --------- Co-authored-by: segfault <[email protected]>
1 parent 089039e commit 483f982

File tree

17 files changed

+711
-3
lines changed

17 files changed

+711
-3
lines changed

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

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
namespace MudExtensions.Components.TypographyM3
2+
{
3+
#nullable enable
4+
public class TypographyM3
5+
{
6+
public DisplayLarge DisplayLarge { get; set; } = new();
7+
public DisplayMedium DisplayMedium { get; set; } = new();
8+
public DisplaySmall DisplaySmall { get; set; } = new();
9+
10+
public HeadlineLarge HeadlineLarge { get; set; } = new();
11+
public HeadlineMedium HeadlineMedium { get; set; } = new();
12+
public HeadlineSmall HeadlineSmall { get; set; } = new();
13+
14+
public TitleLarge TitleLarge { get; set; } = new();
15+
public TitleMedium TitleMedium { get; set; } = new();
16+
public TitleSmall TitleSmall { get; set; } = new();
17+
18+
public LabelLarge LabelLarge { get; set; } = new();
19+
public LabelMedium LabelMedium { get; set; } = new();
20+
public LabelSmall LabelSmall { get; set; } = new();
21+
22+
public BodyLarge BodyLarge { get; set; } = new();
23+
public BodyMedium BodyMedium { get; set; } = new();
24+
public BodySmall BodySmall { get; set; } = new();
25+
}
26+
27+
public class BaseTypographyM3
28+
{
29+
public const string DefaultFontFamily = "Roboto";
30+
public const int DefaultFontSize = 16;
31+
public string[] Font { get; set; } = new string[] { DefaultFontFamily };
32+
33+
private double _lineHeight;
34+
public double LineHeight
35+
{
36+
get => _lineHeight;
37+
set
38+
{
39+
// https://m3.material.io/styles/typography/type-scale-tokens
40+
// Font size unit: rem
41+
// Conversion ratio: 0.0625
42+
// 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.
43+
_lineHeight = value / DefaultFontSize;
44+
}
45+
}
46+
47+
private double _size;
48+
public double Size
49+
{
50+
get => _size;
51+
set
52+
{
53+
_size = value / DefaultFontSize;
54+
}
55+
}
56+
57+
private double _tracking;
58+
public double Tracking
59+
{
60+
get => _tracking;
61+
set
62+
{
63+
// https://m3.material.io/styles/typography/type-scale-tokens
64+
// Letter spacing unit: rem
65+
// Conversion ratio: (Tracking value in px / font size in sp) = letter spacing
66+
// Example: (.2 tracking / 16px font size) = 0.0125 rem
67+
_tracking = value / DefaultFontSize;
68+
}
69+
}
70+
public int Weight { get; set; }
71+
}
72+
73+
public class DisplayLarge : BaseTypographyM3
74+
{
75+
public DisplayLarge() : base()
76+
{
77+
Font = new string[] { DefaultFontFamily };
78+
LineHeight = 64;
79+
Size = 57;
80+
Tracking = -0.25;
81+
Weight = 400;
82+
}
83+
}
84+
85+
public class DisplayMedium : BaseTypographyM3
86+
{
87+
public DisplayMedium() : base()
88+
{
89+
Font = new string[] { DefaultFontFamily };
90+
LineHeight = 52;
91+
Size = 45;
92+
Tracking = 0;
93+
Weight = 400;
94+
}
95+
}
96+
97+
public class DisplaySmall : BaseTypographyM3
98+
{
99+
public DisplaySmall() : base()
100+
{
101+
Font = new string[] { DefaultFontFamily };
102+
LineHeight = 44;
103+
Size = 36;
104+
Tracking = 0;
105+
Weight = 400;
106+
}
107+
}
108+
109+
public class HeadlineLarge : BaseTypographyM3
110+
{
111+
public HeadlineLarge() : base()
112+
{
113+
Font = new string[] { DefaultFontFamily };
114+
LineHeight = 40;
115+
Size = 32;
116+
Tracking = 0;
117+
Weight = 400;
118+
}
119+
}
120+
121+
public class HeadlineMedium : BaseTypographyM3
122+
{
123+
public HeadlineMedium() : base()
124+
{
125+
Font = new string[] { DefaultFontFamily };
126+
LineHeight = 36;
127+
Size = 28;
128+
Tracking = 0;
129+
Weight = 400;
130+
}
131+
}
132+
public class HeadlineSmall : BaseTypographyM3
133+
{
134+
public HeadlineSmall() : base()
135+
{
136+
Font = new string[] { DefaultFontFamily };
137+
LineHeight = 32;
138+
Size = 24;
139+
Tracking = 0;
140+
Weight = 400;
141+
}
142+
}
143+
public class TitleLarge : BaseTypographyM3
144+
{
145+
public TitleLarge() : base()
146+
{
147+
Font = new string[] { DefaultFontFamily };
148+
LineHeight = 28;
149+
Size = 22;
150+
Tracking = 0;
151+
Weight = 400;
152+
}
153+
}
154+
public class TitleMedium : BaseTypographyM3
155+
{
156+
public TitleMedium() : base()
157+
{
158+
Font = new string[] { DefaultFontFamily };
159+
LineHeight = 24;
160+
Size = 16;
161+
Tracking = 0.15;
162+
Weight = 500;
163+
}
164+
}
165+
public class TitleSmall : BaseTypographyM3
166+
{
167+
public TitleSmall() : base()
168+
{
169+
Font = new string[] { DefaultFontFamily };
170+
LineHeight = 20;
171+
Size = 14;
172+
Tracking = 0.1;
173+
Weight = 500;
174+
}
175+
}
176+
public class BodyLarge : BaseTypographyM3
177+
{
178+
public BodyLarge() : base()
179+
{
180+
Font = new string[] { DefaultFontFamily };
181+
LineHeight = 24;
182+
Size = 16;
183+
Tracking = 0.5;
184+
Weight = 400;
185+
}
186+
}
187+
public class BodyMedium : BaseTypographyM3
188+
{
189+
public BodyMedium() : base()
190+
{
191+
Font = new string[] { DefaultFontFamily };
192+
LineHeight = 20;
193+
Size = 14;
194+
Tracking = 0.25;
195+
Weight = 400;
196+
}
197+
}
198+
public class BodySmall : BaseTypographyM3
199+
{
200+
public BodySmall() : base()
201+
{
202+
Font = new string[] { DefaultFontFamily };
203+
LineHeight = 16;
204+
Size = 12;
205+
Tracking = 0.4;
206+
Weight = 400;
207+
}
208+
}
209+
public class LabelLarge : BaseTypographyM3
210+
{
211+
public LabelLarge() : base()
212+
{
213+
Font = new string[] { DefaultFontFamily };
214+
LineHeight = 20;
215+
Size = 14;
216+
Tracking = 0.1;
217+
Weight = 500;
218+
}
219+
}
220+
public class LabelMedium : BaseTypographyM3
221+
{
222+
public LabelMedium() : base()
223+
{
224+
Font = new string[] { DefaultFontFamily };
225+
LineHeight = 16;
226+
Size = 12;
227+
Tracking = 0.5;
228+
Weight = 500;
229+
}
230+
}
231+
public class LabelSmall : BaseTypographyM3
232+
{
233+
public LabelSmall() : base()
234+
{
235+
Font = new string[] { DefaultFontFamily };
236+
LineHeight = 16;
237+
Size = 11;
238+
Tracking = 0.5;
239+
Weight = 500;
240+
}
241+
}
242+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
<div class="@ClassName" style="@StyleString">
5+
@ChildContent
6+
</div>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using Microsoft.AspNetCore.Components;
2+
using MudBlazor;
3+
using MudBlazor.Utilities;
4+
using MudExtensions.Enums;
5+
6+
namespace MudExtensions
7+
{
8+
#nullable enable
9+
public partial class MudTextM3 : MudComponentBase
10+
{
11+
protected string ClassName => new CssBuilder("mud-typographym3")
12+
.AddClass($"mud-typographym3-{Typo.ToString().ToLower()}-{Size.ToString().ToLower()}") // .mud-typographym3-#{$style}-#{$size}
13+
.AddClass(Class)
14+
.Build();
15+
16+
protected string StyleString => new StyleBuilder()
17+
.AddStyle(Style)
18+
.Build();
19+
20+
/// <summary>
21+
/// Set the text-align on the component.
22+
/// </summary>
23+
[Parameter]
24+
[Category(CategoryTypes.Text.Appearance)]
25+
public TypoM3 Typo { get; set; } = TypoM3.Body;
26+
/// <summary>
27+
/// Set the text-align on the component.
28+
/// </summary>
29+
[Parameter]
30+
[Category(CategoryTypes.Text.Appearance)]
31+
public Size Size { get; set; } = Size.Large;
32+
33+
/// <summary>
34+
/// Child content of component.
35+
/// </summary>
36+
[Parameter]
37+
[Category(CategoryTypes.Text.Behavior)]
38+
public RenderFragment? ChildContent { get; set; }
39+
}
40+
}

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
@using System.Text
5+
@using MudExtensions.Components.TypographyM3;
6+
@using MudExtensions.Enums
7+
@using MudExtensions.Utilities
8+
9+
10+
<style>
11+
:root {
12+
@($"--mud-typographym3-display-large-font : {string.Join(',', TypographyM3.DisplayLarge.Font)};")
13+
@($"--mud-typographym3-display-large-line-height : {TypographyM3.DisplayLarge.LineHeight}rem;")
14+
@($"--mud-typographym3-display-large-size : {TypographyM3.DisplayLarge.Size}rem;")
15+
@($"--mud-typographym3-display-large-tracking : {TypographyM3.DisplayLarge.Tracking}rem;")
16+
@($"--mud-typographym3-display-large-weight : {TypographyM3.DisplayLarge.Weight};")
17+
18+
@($"--mud-typographym3-display-medium-font : {string.Join(',', TypographyM3.DisplayMedium.Font)};")
19+
@($"--mud-typographym3-display-medium-line-height : {TypographyM3.DisplayMedium.LineHeight}rem;")
20+
@($"--mud-typographym3-display-medium-size : {TypographyM3.DisplayMedium.Size}rem;")
21+
@($"--mud-typographym3-display-medium-tracking : {TypographyM3.DisplayMedium.Tracking}rem;")
22+
@($"--mud-typographym3-display-medium-weight : {TypographyM3.DisplayMedium.Weight};")
23+
24+
@($"--mud-typographym3-display-small-font : {string.Join(',', TypographyM3.DisplaySmall.Font)};")
25+
@($"--mud-typographym3-display-small-line-height : {TypographyM3.DisplaySmall.LineHeight}rem;")
26+
@($"--mud-typographym3-display-small-size : {TypographyM3.DisplaySmall.Size}rem;")
27+
@($"--mud-typographym3-display-small-tracking : {TypographyM3.DisplaySmall.Tracking}rem;")
28+
@($"--mud-typographym3-display-small-weight : {TypographyM3.DisplaySmall.Weight};")
29+
30+
31+
@($"--mud-typographym3-headline-large-font : {string.Join(',', TypographyM3.HeadlineLarge.Font)};")
32+
@($"--mud-typographym3-headline-large-line-height : {TypographyM3.HeadlineLarge.LineHeight}rem;")
33+
@($"--mud-typographym3-headline-large-size : {TypographyM3.HeadlineLarge.Size}rem;")
34+
@($"--mud-typographym3-headline-large-tracking : {TypographyM3.HeadlineLarge.Tracking}rem;")
35+
@($"--mud-typographym3-headline-large-weight : {TypographyM3.HeadlineLarge.Weight};")
36+
37+
@($"--mud-typographym3-headline-medium-font : {string.Join(',', TypographyM3.HeadlineMedium.Font)};")
38+
@($"--mud-typographym3-headline-medium-line-height : {TypographyM3.HeadlineMedium.LineHeight}rem;")
39+
@($"--mud-typographym3-headline-medium-size : {TypographyM3.HeadlineMedium.Size}rem;")
40+
@($"--mud-typographym3-headline-medium-tracking : {TypographyM3.HeadlineMedium.Tracking}rem;")
41+
@($"--mud-typographym3-headline-medium-weight : {TypographyM3.HeadlineMedium.Weight};")
42+
43+
@($"--mud-typographym3-headline-small-font : {string.Join(',', TypographyM3.HeadlineSmall.Font)};")
44+
@($"--mud-typographym3-headline-small-line-height : {TypographyM3.HeadlineSmall.LineHeight}rem;")
45+
@($"--mud-typographym3-headline-small-size : {TypographyM3.HeadlineSmall.Size}rem;")
46+
@($"--mud-typographym3-headline-small-tracking : {TypographyM3.HeadlineSmall.Tracking}rem;")
47+
@($"--mud-typographym3-headline-small-weight : {TypographyM3.HeadlineSmall.Weight};")
48+
49+
50+
@($"--mud-typographym3-title-large-font : {string.Join(',', TypographyM3.TitleLarge.Font)};")
51+
@($"--mud-typographym3-title-large-line-height : {TypographyM3.TitleLarge.LineHeight}rem;")
52+
@($"--mud-typographym3-title-large-size : {TypographyM3.TitleLarge.Size}rem;")
53+
@($"--mud-typographym3-title-large-tracking : {TypographyM3.TitleLarge.Tracking}rem;")
54+
@($"--mud-typographym3-title-large-weight : {TypographyM3.TitleLarge.Weight};")
55+
56+
@($"--mud-typographym3-title-medium-font : {string.Join(',', TypographyM3.TitleMedium.Font)};")
57+
@($"--mud-typographym3-title-medium-line-height : {TypographyM3.TitleMedium.LineHeight}rem;")
58+
@($"--mud-typographym3-title-medium-size : {TypographyM3.TitleMedium.Size}rem;")
59+
@($"--mud-typographym3-title-medium-tracking : {TypographyM3.TitleMedium.Tracking}rem;")
60+
@($"--mud-typographym3-title-medium-weight : {TypographyM3.TitleMedium.Weight};")
61+
62+
@($"--mud-typographym3-title-small-font : {string.Join(',', TypographyM3.TitleSmall.Font)};")
63+
@($"--mud-typographym3-title-small-line-height : {TypographyM3.TitleSmall.LineHeight}rem;")
64+
@($"--mud-typographym3-title-small-size : {TypographyM3.TitleSmall.Size}rem;")
65+
@($"--mud-typographym3-title-small-tracking : {TypographyM3.TitleSmall.Tracking}rem;")
66+
@($"--mud-typographym3-title-small-weight : {TypographyM3.TitleSmall.Weight};")
67+
68+
69+
@($"--mud-typographym3-label-large-font : {string.Join(',', TypographyM3.LabelLarge.Font)};")
70+
@($"--mud-typographym3-label-large-line-height : {TypographyM3.LabelLarge.LineHeight}rem;")
71+
@($"--mud-typographym3-label-large-size : {TypographyM3.LabelLarge.Size}rem;")
72+
@($"--mud-typographym3-label-large-tracking : {TypographyM3.LabelLarge.Tracking}rem;")
73+
@($"--mud-typographym3-label-large-weight : {TypographyM3.LabelLarge.Weight};")
74+
75+
@($"--mud-typographym3-label-medium-font : {string.Join(',', TypographyM3.LabelMedium.Font)};")
76+
@($"--mud-typographym3-label-medium-line-height : {TypographyM3.LabelMedium.LineHeight}rem;")
77+
@($"--mud-typographym3-label-medium-size : {TypographyM3.LabelMedium.Size}rem;")
78+
@($"--mud-typographym3-label-medium-tracking : {TypographyM3.LabelMedium.Tracking}rem;")
79+
@($"--mud-typographym3-label-medium-weight : {TypographyM3.LabelMedium.Weight};")
80+
81+
@($"--mud-typographym3-label-small-font : {string.Join(',', TypographyM3.LabelSmall.Font)};")
82+
@($"--mud-typographym3-label-small-line-height : {TypographyM3.LabelSmall.LineHeight}rem;")
83+
@($"--mud-typographym3-label-small-size : {TypographyM3.LabelSmall.Size}rem;")
84+
@($"--mud-typographym3-label-small-tracking : {TypographyM3.LabelSmall.Tracking}rem;")
85+
@($"--mud-typographym3-label-small-weight : {TypographyM3.LabelSmall.Weight};")
86+
87+
88+
@($"--mud-typographym3-body-large-font : {string.Join(',', TypographyM3.BodyLarge.Font)};")
89+
@($"--mud-typographym3-body-large-line-height : {TypographyM3.BodyLarge.LineHeight}rem;")
90+
@($"--mud-typographym3-body-large-size : {TypographyM3.BodyLarge.Size}rem;")
91+
@($"--mud-typographym3-body-large-tracking : {TypographyM3.BodyLarge.Tracking}rem;")
92+
@($"--mud-typographym3-body-large-weight : {TypographyM3.BodyLarge.Weight};")
93+
94+
@($"--mud-typographym3-body-medium-font : {string.Join(',', TypographyM3.BodyMedium.Font)};")
95+
@($"--mud-typographym3-body-medium-line-height : {TypographyM3.BodyMedium.LineHeight}rem;")
96+
@($"--mud-typographym3-body-medium-size : {TypographyM3.BodyMedium.Size}rem;")
97+
@($"--mud-typographym3-body-medium-tracking : {TypographyM3.BodyMedium.Tracking}rem;")
98+
@($"--mud-typographym3-body-medium-weight : {TypographyM3.BodyMedium.Weight};")
99+
100+
@($"--mud-typographym3-body-small-font : {string.Join(',', TypographyM3.BodySmall.Font)};")
101+
@($"--mud-typographym3-body-small-line-height : {TypographyM3.BodySmall.LineHeight}rem;")
102+
@($"--mud-typographym3-body-small-size : {TypographyM3.BodySmall.Size}rem;")
103+
@($"--mud-typographym3-body-small-tracking : {TypographyM3.BodySmall.Tracking}rem;")
104+
@($"--mud-typographym3-body-small-weight : {TypographyM3.BodySmall.Weight};")
105+
}
106+
107+
</style>

0 commit comments

Comments
 (0)