diff --git a/JournalApp/Data/MaterialTheme.cs b/JournalApp/Data/MaterialTheme.cs index 5ce4140..17f68ed 100644 --- a/JournalApp/Data/MaterialTheme.cs +++ b/JournalApp/Data/MaterialTheme.cs @@ -143,16 +143,122 @@ public static MudTheme FromSeed(uint seed) DefaultBorderRadius = "8px", }, + // The M3 type scale on self-hosted Roboto Flex, mapped H1-H3 = display, H4-H6 = headline, Subtitle = title, Body = body, Button/Caption/Overline = label. Typography = new() { + Default = new DefaultTypography() + { + FontFamily = ["Roboto Flex", "Roboto", "system-ui", "sans-serif"], + FontSize = "14px", + FontWeight = "400", + LineHeight = "1.43", + LetterSpacing = "0.25px", + }, + + H1 = new H1Typography() + { + FontSize = "57px", + FontWeight = "400", + LineHeight = "1.12", + LetterSpacing = "-0.25px", + }, + + H2 = new H2Typography() + { + FontSize = "45px", + FontWeight = "400", + LineHeight = "1.16", + LetterSpacing = "0", + }, + + H3 = new H3Typography() + { + FontSize = "36px", + FontWeight = "400", + LineHeight = "1.22", + LetterSpacing = "0", + }, + + H4 = new H4Typography() + { + FontSize = "32px", + FontWeight = "400", + LineHeight = "1.25", + LetterSpacing = "0", + }, + + H5 = new H5Typography() + { + FontSize = "28px", + FontWeight = "400", + LineHeight = "1.29", + LetterSpacing = "0", + }, + + H6 = new H6Typography() + { + FontSize = "24px", + FontWeight = "400", + LineHeight = "1.33", + LetterSpacing = "0", + }, + + Subtitle1 = new Subtitle1Typography() + { + FontSize = "16px", + FontWeight = "500", + LineHeight = "1.5", + LetterSpacing = "0.15px", + }, + + Subtitle2 = new Subtitle2Typography() + { + FontSize = "14px", + FontWeight = "500", + LineHeight = "1.43", + LetterSpacing = "0.1px", + }, + + Body1 = new Body1Typography() + { + FontSize = "16px", + FontWeight = "400", + LineHeight = "1.5", + LetterSpacing = "0.5px", + }, + + Body2 = new Body2Typography() + { + FontSize = "14px", + FontWeight = "400", + LineHeight = "1.43", + LetterSpacing = "0.25px", + }, + Button = new ButtonTypography() { + FontSize = "14px", + FontWeight = "500", + LineHeight = "1.43", + LetterSpacing = "0.1px", TextTransform = "none", }, Caption = new CaptionTypography() { + FontSize = "12px", + FontWeight = "500", LineHeight = "1", + LetterSpacing = "0.5px", + }, + + Overline = new OverlineTypography() + { + FontSize = "11px", + FontWeight = "500", + LineHeight = "1.45", + LetterSpacing = "0.5px", + TextTransform = "none", }, }, }; diff --git a/JournalApp/wwwroot/app.css b/JournalApp/wwwroot/app.css index 1fe16a3..c69e759 100644 --- a/JournalApp/wwwroot/app.css +++ b/JournalApp/wwwroot/app.css @@ -1,4 +1,23 @@ -* { +/* Self-hosted Roboto Flex variable font (weight axis 100-1000) so typography doesn't depend on the WebView's system fonts. */ +@font-face { + font-family: "Roboto Flex"; + font-style: normal; + font-weight: 100 1000; + font-display: swap; + src: url(fonts/roboto-flex-latin.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: "Roboto Flex"; + font-style: normal; + font-weight: 100 1000; + font-display: swap; + src: url(fonts/roboto-flex-latin-ext.woff2) format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +* { -webkit-tap-highlight-color: transparent; } @@ -24,7 +43,7 @@ body { } #loading-text { - font-family: "Roboto", system-ui, sans-serif; + font-family: "Roboto Flex", "Roboto", system-ui, sans-serif; font-size: 6vw; } @@ -285,12 +304,6 @@ label.mud-switch.mud-disabled .mud-switch-span { justify-content: flex-start; } -.mud-dialog-title .mud-typography-h6 { - font-size: 24px; - font-weight: 400; - line-height: 32px; -} - /* M3 dialog supporting text reads on onSurfaceVariant; inputs keep their own stronger ink. */ .mud-dialog-content { color: var(--mud-palette-text-secondary); diff --git a/JournalApp/wwwroot/fonts/roboto-flex-latin-ext.woff2 b/JournalApp/wwwroot/fonts/roboto-flex-latin-ext.woff2 new file mode 100644 index 0000000..6524d56 Binary files /dev/null and b/JournalApp/wwwroot/fonts/roboto-flex-latin-ext.woff2 differ diff --git a/JournalApp/wwwroot/fonts/roboto-flex-latin.woff2 b/JournalApp/wwwroot/fonts/roboto-flex-latin.woff2 new file mode 100644 index 0000000..88bbf49 Binary files /dev/null and b/JournalApp/wwwroot/fonts/roboto-flex-latin.woff2 differ