From 842bb57a03c7d22c8a0a3196aaa2098b2f36f521 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 1 Apr 2026 04:01:47 +0000 Subject: [PATCH] feat: improve Markdown renderer typography and styling - Increase body text line height from 1.30em to 1.50em for better readability - Increase paragraph spacing from 18sp to 20sp for more breathing room - Add explicit fontWeight to headings: Bold for H1-H2, SemiBold for H3-H4, Medium for H5-H6 - Add negative letterSpacing to H1-H2 for tighter display-style headings - Widen heading size range (32sp-15sp vs 32sp-18sp) for clearer visual hierarchy - Add internal padding to code blocks (16dp horizontal, 12dp vertical) so text isn't flush against borders - Add vertical margin (4dp) around code blocks for separation from surrounding text - Add line height (1.45em) to code block text for better readability - Add letter spacing (0.3sp) to inline code for better monospace readability - Fix light theme code block using DarkColorPalette instead of LightColorPalette for background https://claude.ai/code/session_01PPExHNAdLqddiYsGZi1BgW --- .../vitorpamplona/amethyst/ui/theme/Theme.kt | 15 ++++++-- .../vitorpamplona/amethyst/ui/theme/Type.kt | 37 ++++++++++++------- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt index f49b9f6d6..c6621ab0f 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt @@ -51,6 +51,7 @@ import androidx.compose.ui.text.TextLinkStyles import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.em import androidx.compose.ui.unit.sp import androidx.core.view.WindowCompat import androidx.lifecycle.compose.collectAsStateWithLifecycle @@ -301,14 +302,16 @@ val MarkDownStyleOnDark = TextStyle( fontFamily = FontFamily.Monospace, fontSize = Font14SP, + lineHeight = 1.45.em, ), modifier = Modifier - .padding(0.dp) + .padding(vertical = 4.dp) .fillMaxWidth() .clip(shape = QuoteBorder) .border(1.dp, DarkSubtleBorder, QuoteBorder) - .background(DarkColorPalette.onSurface.copy(alpha = 0.05f)), + .background(DarkColorPalette.onSurface.copy(alpha = 0.05f)) + .padding(horizontal = 16.dp, vertical = 12.dp), ), stringStyle = RichTextDefaults.stringStyle?.copy( @@ -324,6 +327,7 @@ val MarkDownStyleOnDark = fontFamily = FontFamily.Monospace, fontSize = Font14SP, background = DarkColorPalette.onSurface.copy(alpha = 0.22f), + letterSpacing = 0.3.sp, ), ), ) @@ -342,14 +346,16 @@ val MarkDownStyleOnLight = TextStyle( fontFamily = FontFamily.Monospace, fontSize = Font14SP, + lineHeight = 1.45.em, ), modifier = Modifier - .padding(0.dp) + .padding(vertical = 4.dp) .fillMaxWidth() .clip(shape = QuoteBorder) .border(1.dp, LightSubtleBorder, QuoteBorder) - .background(DarkColorPalette.onSurface.copy(alpha = 0.05f)), + .background(LightColorPalette.onSurface.copy(alpha = 0.05f)) + .padding(horizontal = 16.dp, vertical = 12.dp), ), stringStyle = RichTextDefaults.stringStyle?.copy( @@ -365,6 +371,7 @@ val MarkDownStyleOnLight = fontFamily = FontFamily.Monospace, fontSize = Font14SP, background = LightColorPalette.onSurface.copy(alpha = 0.12f), + letterSpacing = 0.3.sp, ), ), ) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Type.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Type.kt index eb5cad022..b36b940d4 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Type.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Type.kt @@ -61,9 +61,9 @@ val Font14SP = 14.sp val Font17SP = 17.sp val Font18SP = 18.sp -val MarkdownTextStyle = TextStyle(lineHeight = 1.30.em) +val MarkdownTextStyle = TextStyle(lineHeight = 1.50.em) -val DefaultParagraphSpacing: TextUnit = 18.sp +val DefaultParagraphSpacing: TextUnit = 20.sp internal val DefaultHeadingStyle: HeadingStyle = { level, textStyle -> when (level) { @@ -71,48 +71,57 @@ internal val DefaultHeadingStyle: HeadingStyle = { level, textStyle -> Typography.displayLarge.copy( fontSize = 32.sp, lineHeight = 40.sp, + fontWeight = FontWeight.Bold, + letterSpacing = (-0.5).sp, ) } 1 -> { Typography.displayMedium.copy( - fontSize = 28.sp, - lineHeight = 36.sp, + fontSize = 26.sp, + lineHeight = 34.sp, + fontWeight = FontWeight.Bold, + letterSpacing = (-0.25).sp, ) } 2 -> { Typography.displaySmall.copy( - fontSize = 26.sp, - lineHeight = 34.sp, + fontSize = 22.sp, + lineHeight = 30.sp, + fontWeight = FontWeight.SemiBold, ) } 3 -> { Typography.displaySmall.copy( - fontSize = 24.sp, - lineHeight = 32.sp, + fontSize = 20.sp, + lineHeight = 28.sp, + fontWeight = FontWeight.SemiBold, ) } 4 -> { Typography.headlineLarge.copy( - fontSize = 22.sp, - lineHeight = 26.sp, + fontSize = 18.sp, + lineHeight = 24.sp, + fontWeight = FontWeight.Medium, ) } 5 -> { Typography.headlineMedium.copy( - fontSize = 20.sp, - lineHeight = 24.sp, + fontSize = 16.sp, + lineHeight = 22.sp, + fontWeight = FontWeight.Medium, ) } 6 -> { Typography.headlineSmall.copy( - fontSize = 18.sp, - lineHeight = 22.sp, + fontSize = 15.sp, + lineHeight = 20.sp, + fontWeight = FontWeight.Medium, ) }