nick/amethyst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: improve Markdown renderer typography and styling

Browse Source 
- 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
This commit is contained in:
Claude
2026-04-01 04:01:47 +00:00
parent cd11503b1e
commit 842bb57a03
2 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt
+11 -4
View File
@@ -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,
),
),
)
amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Type.kt
+23 -14
View File
@@ -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,
)
}