Skip to content

Commit 9322a7d

Browse files
erri120erri120
authored
Merge pull request #1394 from erri120/feat/943-markdown-styling
Update markdown styling
2 parents 3742d53 + 2b2bba8 commit 9322a7d

File tree

2 files changed

+82
-23
lines changed

2 files changed

+82
-23
lines changed

‎CHANGELOG.md

-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
# Changelog
22

3-
## Unreleased
4-
5-
### New Features
6-
7-
### Other Changes
8-
9-
### Fixes
10-
113
## [v0.4.1](https://github.com/Nexus-Mods/NexusMods.App/releases/tag/v0.4.1) - 2024-04-17
124

135
### New Features

‎src/NexusMods.App.UI/Controls/MarkdownRenderer/MarkdownRendererView.axaml

+82-15
Original file line numberDiff line numberDiff line change
@@ -11,51 +11,118 @@
1111
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
1212
x:Class="NexusMods.App.UI.Controls.MarkdownRenderer.MarkdownRendererView">
1313

14+
<Design.PreviewWith>
15+
<local:MarkdownRendererDesignViewModel/>
16+
</Design.PreviewWith>
17+
1418
<!--
1519
NOTE(erri120): This control can only be styled directly, not through classes.
1620
https://github.com/whistyun/Markdown.Avalonia/wiki/How-to-customise-style
1721
-->
1822
<md:MarkdownScrollViewer x:Name="MarkdownScrollViewer">
1923
<md:MarkdownScrollViewer.Styles>
20-
<Style Selector="ctxt|CTextBlock">
21-
<Setter Property="FontFamily" Value="{StaticResource FontBodyRegular}" />
22-
<Setter Property="Foreground" Value="{StaticResource NeutralSubduedBrush}" />
23-
</Style>
24-
25-
<Style Selector="ctxt|CHyperlink">
26-
<Setter Property="FontFamily" Value="{StaticResource FontBodyRegular}" />
27-
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
28-
</Style>
24+
<!-- NOTE(erri120): designs from https://www.figma.com/design/NuC2DiIdnAZQQkYUSaK514/%F0%9F%93%B1Markdown-styles?node-id=10%3A12&t=mVpreGuSrLB54ms0-1 -->
25+
<!--
26+
NOTE(erri120): we can't apply our custom TextBlock themes because CTextBlock is a unique control type that has nothing to do with TextBlock...
27+
As a result of this, I copy-pasted our TextBlock themes, which means they can very easily get out-of-sync with the main themes.
28+
-->
2929

3030
<Style Selector="ctxt|CTextBlock.Heading1">
3131
<Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
32-
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
32+
<Setter Property="FontWeight" Value="SemiBold" />
33+
<Setter Property="FontSize" Value="36" />
34+
<Setter Property="LineHeight" Value="43.2" />
35+
<Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
3336
</Style>
3437

3538
<Style Selector="ctxt|CTextBlock.Heading2">
3639
<Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
37-
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
40+
<Setter Property="FontWeight" Value="SemiBold" />
41+
<Setter Property="FontSize" Value="24" />
42+
<Setter Property="LineHeight" Value="30" />
43+
<Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
3844
</Style>
3945

4046
<Style Selector="ctxt|CTextBlock.Heading3">
4147
<Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
42-
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
48+
<Setter Property="FontWeight" Value="SemiBold" />
49+
<Setter Property="FontSize" Value="18" />
50+
<Setter Property="LineHeight" Value="24.75" />
51+
<Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
4352
</Style>
4453

4554
<Style Selector="ctxt|CTextBlock.Heading4">
46-
<Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
47-
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
55+
<Setter Property="FontFamily" Value="{StaticResource FontBodyBold}" />
56+
<Setter Property="FontWeight" Value="Bold" />
57+
<Setter Property="FontSize" Value="16" />
58+
<Setter Property="LineHeight" Value="24" />
59+
<Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
4860
</Style>
4961

5062
<Style Selector="ctxt|CTextBlock.Heading5">
5163
<Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
52-
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
64+
<Setter Property="FontWeight" Value="SemiBold" />
65+
<Setter Property="FontSize" Value="12" />
66+
<Setter Property="LineHeight" Value="16.5" />
67+
<Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
5368
</Style>
5469

5570
<Style Selector="ctxt|CTextBlock.Heading6">
5671
<Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
72+
<Setter Property="FontWeight" Value="SemiBold" />
73+
<Setter Property="FontSize" Value="10" />
74+
<Setter Property="LineHeight" Value="15" />
75+
<Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
76+
</Style>
77+
78+
<Style Selector="ctxt|CTextBlock.Paragraph">
79+
<Setter Property="FontFamily" Value="{StaticResource FontBodyRegular}" />
80+
<Setter Property="FontWeight" Value="Normal" />
81+
<Setter Property="FontSize" Value="14" />
82+
83+
<!--
84+
NOTE(erri120): LineHeight can't be used because every image gets put into a paragraph.
85+
Setting LineHeight would also force the image height to that value.
86+
The library we're using has many issues like this where the ideal solution would be to
87+
apply styles to a parent control from the child control or from the parent control by
88+
somehow checking if it has certain child controls.
89+
-->
90+
<!-- <Setter Property="LineHeight" Value="21" /> -->
91+
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
92+
</Style>
93+
94+
95+
<!-- TODO: bold -->
96+
<!-- TODO: italic -->
97+
<!-- TODO: bold and italic -->
98+
<!-- TODO: block quote -->
99+
<!-- TODO: nested block quote -->
100+
<!-- TODO: numbered list -->
101+
<!-- TODO: list -->
102+
103+
<Style Selector="ctxt|CCode ctxt|CRun">
104+
<!-- TODO: use Roboto Mono -->
105+
<Setter Property="FontSize" Value="13" />
106+
<!-- <Setter Property="LineHeight" Value="19.5" /> -->
57107
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
108+
<Setter Property="Background" Value="{StaticResource SurfaceTopBrush}" />
58109
</Style>
110+
111+
<Style Selector="ctxt|CHyperlink">
112+
<Setter Property="HoverForeground" Value="{StaticResource BrandLegacyPrimaryStrong}"/>
113+
114+
<Style Selector="^ ctxt|CRun">
115+
<Setter Property="Foreground" Value="{StaticResource BrandLegacyPrimaryStrong}" />
116+
<Setter Property="IsUnderline" Value="True" />
117+
</Style>
118+
</Style>
119+
120+
<Style Selector="ctxt|CImage">
121+
<Setter Property="SaveAspectRatio" Value="True"/>
122+
</Style>
123+
124+
<!-- TODO: tables -->
125+
59126
</md:MarkdownScrollViewer.Styles>
60127
</md:MarkdownScrollViewer>
61128

0 commit comments

Comments
 (0)