Merge pull request #1394 from erri120/feat/943-markdown-styling

Update markdown styling
Nexus-Mods · May 22, 2024 · 9322a7d · 9322a7d
2 parents 3742d53 + 2b2bba8
commit 9322a7d
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,13 +1,5 @@
 # Changelog
 
-## Unreleased
-
-### New Features
-
-### Other Changes
-
-### Fixes
-
 ## [v0.4.1](https://github.com/Nexus-Mods/NexusMods.App/releases/tag/v0.4.1) - 2024-04-17
 
 ### New Features

diff --git a/src/NexusMods.App.UI/Controls/MarkdownRenderer/MarkdownRendererView.axaml b/src/NexusMods.App.UI/Controls/MarkdownRenderer/MarkdownRendererView.axaml
@@ -11,51 +11,118 @@
     mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
     x:Class="NexusMods.App.UI.Controls.MarkdownRenderer.MarkdownRendererView">
 
+    <Design.PreviewWith>
+        <local:MarkdownRendererDesignViewModel/>
+    </Design.PreviewWith>
+
     <!--
         NOTE(erri120): This control can only be styled directly, not through classes.
         https://github.com/whistyun/Markdown.Avalonia/wiki/How-to-customise-style
     -->
     <md:MarkdownScrollViewer x:Name="MarkdownScrollViewer">
         <md:MarkdownScrollViewer.Styles>
-            <Style Selector="ctxt|CTextBlock">
-                <Setter Property="FontFamily" Value="{StaticResource FontBodyRegular}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralSubduedBrush}" />
-            </Style>
-
-            <Style Selector="ctxt|CHyperlink">
-                <Setter Property="FontFamily" Value="{StaticResource FontBodyRegular}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
-            </Style>
+            <!-- NOTE(erri120): designs from https://www.figma.com/design/NuC2DiIdnAZQQkYUSaK514/%F0%9F%93%B1Markdown-styles?node-id=10%3A12&t=mVpreGuSrLB54ms0-1 -->
+            <!--
+                NOTE(erri120): we can't apply our custom TextBlock themes because CTextBlock is a unique control type that has nothing to do with TextBlock...
+                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.
+            -->
 
             <Style Selector="ctxt|CTextBlock.Heading1">
                 <Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+                <Setter Property="FontWeight" Value="SemiBold" />
+                <Setter Property="FontSize" Value="36" />
+                <Setter Property="LineHeight" Value="43.2" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
             </Style>
 
             <Style Selector="ctxt|CTextBlock.Heading2">
                 <Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+                <Setter Property="FontWeight" Value="SemiBold" />
+                <Setter Property="FontSize" Value="24" />
+                <Setter Property="LineHeight" Value="30" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
             </Style>
 
             <Style Selector="ctxt|CTextBlock.Heading3">
                 <Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+                <Setter Property="FontWeight" Value="SemiBold" />
+                <Setter Property="FontSize" Value="18" />
+                <Setter Property="LineHeight" Value="24.75" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
             </Style>
 
             <Style Selector="ctxt|CTextBlock.Heading4">
-                <Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+                <Setter Property="FontFamily" Value="{StaticResource FontBodyBold}" />
+                <Setter Property="FontWeight" Value="Bold" />
+                <Setter Property="FontSize" Value="16" />
+                <Setter Property="LineHeight" Value="24" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
             </Style>
 
             <Style Selector="ctxt|CTextBlock.Heading5">
                 <Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+                <Setter Property="FontWeight" Value="SemiBold" />
+                <Setter Property="FontSize" Value="12" />
+                <Setter Property="LineHeight" Value="16.5" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
             </Style>
 
             <Style Selector="ctxt|CTextBlock.Heading6">
                 <Setter Property="FontFamily" Value="{StaticResource FontHeadlinesSemiBold}" />
+                <Setter Property="FontWeight" Value="SemiBold" />
+                <Setter Property="FontSize" Value="10" />
+                <Setter Property="LineHeight" Value="15" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
+            </Style>
+
+            <Style Selector="ctxt|CTextBlock.Paragraph">
+                <Setter Property="FontFamily" Value="{StaticResource FontBodyRegular}" />
+                <Setter Property="FontWeight" Value="Normal" />
+                <Setter Property="FontSize" Value="14" />
+
+                <!--
+                    NOTE(erri120): LineHeight can't be used because every image gets put into a paragraph.
+                    Setting LineHeight would also force the image height to that value.
+                    The library we're using has many issues like this where the ideal solution would be to
+                    apply styles to a parent control from the child control or from the parent control by
+                    somehow checking if it has certain child controls.
+                -->
+                <!-- <Setter Property="LineHeight" Value="21" /> -->
+                <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+            </Style>
+
+
+            <!-- TODO: bold -->
+            <!-- TODO: italic -->
+            <!-- TODO: bold and italic -->
+            <!-- TODO: block quote -->
+            <!-- TODO: nested block quote -->
+            <!-- TODO: numbered list -->
+            <!-- TODO: list -->
+
+            <Style Selector="ctxt|CCode ctxt|CRun">
+                <!-- TODO: use Roboto Mono -->
+                <Setter Property="FontSize" Value="13" />
+                <!-- <Setter Property="LineHeight" Value="19.5" /> -->
                 <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
+                <Setter Property="Background" Value="{StaticResource SurfaceTopBrush}" />
             </Style>
+
+            <Style Selector="ctxt|CHyperlink">
+                <Setter Property="HoverForeground" Value="{StaticResource BrandLegacyPrimaryStrong}"/>
+
+                <Style Selector="^ ctxt|CRun">
+                    <Setter Property="Foreground" Value="{StaticResource BrandLegacyPrimaryStrong}" />
+                    <Setter Property="IsUnderline" Value="True" />
+                </Style>
+            </Style>
+
+            <Style Selector="ctxt|CImage">
+                <Setter Property="SaveAspectRatio" Value="True"/>
+            </Style>
+
+            <!-- TODO: tables -->
+
         </md:MarkdownScrollViewer.Styles>
     </md:MarkdownScrollViewer>