From 52a76a2dafa95f4dc34f9c3e6eb5424f09cb1cf6 Mon Sep 17 00:00:00 2001 From: Diego Beraldin Date: Fri, 10 May 2024 22:10:34 +0200 Subject: [PATCH] enhancement: review text style definitions (#825) --- .../core/appearance/theme/Fonts.kt | 83 ++++++++++++------- .../core/commonui/lemmyui/CommunityHeader.kt | 2 +- .../core/commonui/lemmyui/SettingsHeader.kt | 2 +- .../core/commonui/lemmyui/SettingsRow.kt | 5 +- .../core/commonui/lemmyui/UserHeader.kt | 2 +- .../feature/profile/main/ProfileMainScreen.kt | 1 - .../feature/settings/main/SettingsScreen.kt | 1 - .../raccoonforlemmy/unit/ban/BanUserScreen.kt | 1 - .../unit/createcomment/CreateCommentScreen.kt | 1 - .../unit/createpost/CreatePostScreen.kt | 1 - .../unit/createreport/CreateReportScreen.kt | 1 - .../unit/login/LoginBottomSheet.kt | 1 - .../ManageSubscriptionsScreen.kt | 6 +- .../editor/MultiCommunityEditorScreen.kt | 1 - .../unit/remove/RemoveScreen.kt | 1 - 15 files changed, 64 insertions(+), 45 deletions(-) diff --git a/core/appearance/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/appearance/theme/Fonts.kt b/core/appearance/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/appearance/theme/Fonts.kt index 5f542ab9d..aec916963 100644 --- a/core/appearance/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/appearance/theme/Fonts.kt +++ b/core/appearance/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/appearance/theme/Fonts.kt @@ -10,6 +10,10 @@ import androidx.compose.ui.unit.sp import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.UiFontFamily import com.github.diegoberaldin.raccoonforlemmy.core.resources.di.getCoreResources +/* + * Reference: + * https://m3.material.io/styles/typography/type-scale-tokens#40fc37f8-3269-4aa3-9f28-c6113079ac5d + */ @Composable fun UiFontFamily.toTypography(): Typography { val coreResources = remember { getCoreResources() } @@ -23,30 +27,41 @@ fun UiFontFamily.toTypography(): Typography { // h1 displayLarge = TextStyle( fontFamily = fontFamily, - fontWeight = FontWeight.Light, - fontSize = 96.sp, - letterSpacing = (-1.5).sp, + fontWeight = FontWeight.Normal, + fontSize = 57.sp, + letterSpacing = (-.25).sp, + lineHeight = 64.sp, ), // h2 displayMedium = TextStyle( fontFamily = fontFamily, - fontWeight = FontWeight.Light, - fontSize = 60.sp, - letterSpacing = (-0.5).sp, + fontWeight = FontWeight.Normal, + fontSize = 45.sp, + letterSpacing = 0.sp, + lineHeight = 52.sp, ), // h3 displaySmall = TextStyle( fontFamily = fontFamily, fontWeight = FontWeight.Normal, - fontSize = 38.sp, + fontSize = 36.sp, letterSpacing = 0.sp, + lineHeight = 44.sp, + ), + headlineLarge = TextStyle( + fontFamily = fontFamily, + fontWeight = FontWeight.Normal, + fontSize = 32.sp, + letterSpacing = 0.sp, + lineHeight = 40.sp, ), // h4 headlineMedium = TextStyle( fontFamily = fontFamily, fontWeight = FontWeight.Normal, - fontSize = 34.sp, - letterSpacing = (0.25).sp, + fontSize = 28.sp, + letterSpacing = 0.sp, + lineHeight = 36.sp, ), // h5 headlineSmall = TextStyle( @@ -54,20 +69,23 @@ fun UiFontFamily.toTypography(): Typography { fontWeight = FontWeight.Normal, fontSize = 24.sp, letterSpacing = 0.sp, + lineHeight = 23.sp, ), // h6 titleLarge = TextStyle( fontFamily = fontFamily, - fontWeight = FontWeight.Medium, - fontSize = 16.sp, - letterSpacing = (0.15).sp, + fontWeight = FontWeight.Normal, + fontSize = 22.sp, + letterSpacing = 0.sp, + lineHeight = 28.sp, ), // subtitle1 titleMedium = TextStyle( fontFamily = fontFamily, - fontWeight = FontWeight.Normal, + fontWeight = FontWeight.Medium, fontSize = 16.sp, letterSpacing = (0.15).sp, + lineHeight = 24.sp, ), // subtitle2 titleSmall = TextStyle( @@ -75,6 +93,7 @@ fun UiFontFamily.toTypography(): Typography { fontWeight = FontWeight.Medium, fontSize = 14.sp, letterSpacing = (0.1).sp, + lineHeight = 20.sp, ), // body1 bodyLarge = TextStyle( @@ -82,6 +101,7 @@ fun UiFontFamily.toTypography(): Typography { fontWeight = FontWeight.Normal, fontSize = 16.sp, letterSpacing = (0.5).sp, + lineHeight = 24.sp, ), // body2 bodyMedium = TextStyle( @@ -89,19 +109,7 @@ fun UiFontFamily.toTypography(): Typography { fontWeight = FontWeight.Normal, fontSize = 14.sp, letterSpacing = (0.25).sp, - ), - labelMedium = TextStyle( - fontFamily = fontFamily, - fontWeight = FontWeight.Normal, - fontSize = 12.sp, - letterSpacing = (0.5).sp, - ), - // button - labelLarge = TextStyle( - fontFamily = fontFamily, - fontWeight = FontWeight.Medium, - fontSize = 14.sp, - letterSpacing = (0.1).sp, + lineHeight = 20.sp, ), // caption bodySmall = TextStyle( @@ -109,13 +117,30 @@ fun UiFontFamily.toTypography(): Typography { fontWeight = FontWeight.Normal, fontSize = 12.sp, letterSpacing = (0.4).sp, + lineHeight = 16.sp, + ), + // button + labelLarge = TextStyle( + fontFamily = fontFamily, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + letterSpacing = (0.1).sp, + lineHeight = 20.sp, + ), + labelMedium = TextStyle( + fontFamily = fontFamily, + fontWeight = FontWeight.Medium, + fontSize = 12.sp, + letterSpacing = (0.5).sp, + lineHeight = 16.sp, ), // overline labelSmall = TextStyle( fontFamily = fontFamily, - fontWeight = FontWeight.Normal, - fontSize = 10.sp, - letterSpacing = (0.5).sp, // original: 1.5 + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + letterSpacing = (0.5).sp, + lineHeight = 16.sp, ), ) } diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/CommunityHeader.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/CommunityHeader.kt index e54ce5972..d836d58a8 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/CommunityHeader.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/CommunityHeader.kt @@ -118,7 +118,7 @@ fun CommunityHeader( ) { Text( text = community.readableName(preferNicknames), - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onBackground, ) if (community.readableHandle != community.readableName(preferNicknames)) { diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsHeader.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsHeader.kt index 3014b5ded..810214147 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsHeader.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsHeader.kt @@ -42,7 +42,7 @@ fun SettingsHeader( Text( text = title, color = fullColor, - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleMedium, ) Spacer(modifier = Modifier.weight(1f)) if (rightButton != null) { diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsRow.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsRow.kt index 58dd8d3a5..b1922c23e 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsRow.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/SettingsRow.kt @@ -39,7 +39,10 @@ fun SettingsRow( val ancillaryColor = MaterialTheme.colorScheme.onBackground.copy(alpha = ancillaryTextAlpha) Row( modifier = modifier - .padding(vertical = Spacing.s, horizontal = Spacing.m) + .padding( + vertical = Spacing.s, + horizontal = Spacing.m, + ) .onClick( onClick = { onTap?.invoke() diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/UserHeader.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/UserHeader.kt index 9ae397dfd..55255befc 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/UserHeader.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/UserHeader.kt @@ -117,7 +117,7 @@ fun UserHeader( ) { Text( text = user.readableName(preferNicknames), - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onBackground, ) if (user.readableHandle != user.readableName(preferNicknames)) { diff --git a/feature/profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/main/ProfileMainScreen.kt b/feature/profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/main/ProfileMainScreen.kt index 69a8a6a95..2d7c88469 100644 --- a/feature/profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/main/ProfileMainScreen.kt +++ b/feature/profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/main/ProfileMainScreen.kt @@ -182,7 +182,6 @@ internal object ProfileMainScreen : Tab { Text( modifier = Modifier.padding(horizontal = Spacing.s), text = LocalXmlStrings.current.navigationProfile, - style = MaterialTheme.typography.titleLarge, ) }, actions = { diff --git a/feature/settings/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/settings/main/SettingsScreen.kt b/feature/settings/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/settings/main/SettingsScreen.kt index 958936d49..a9eb791b0 100644 --- a/feature/settings/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/settings/main/SettingsScreen.kt +++ b/feature/settings/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/settings/main/SettingsScreen.kt @@ -134,7 +134,6 @@ class SettingsScreen : Screen { Text( modifier = Modifier.padding(horizontal = Spacing.s), text = LocalXmlStrings.current.navigationSettings, - style = MaterialTheme.typography.titleLarge, ) }, ) diff --git a/unit/ban/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/ban/BanUserScreen.kt b/unit/ban/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/ban/BanUserScreen.kt index dc2aa99aa..55e5bfb76 100644 --- a/unit/ban/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/ban/BanUserScreen.kt +++ b/unit/ban/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/ban/BanUserScreen.kt @@ -122,7 +122,6 @@ class BanUserScreen( } Text( text = title, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) }, diff --git a/unit/createcomment/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createcomment/CreateCommentScreen.kt b/unit/createcomment/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createcomment/CreateCommentScreen.kt index d50cf7b56..00bd57f03 100644 --- a/unit/createcomment/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createcomment/CreateCommentScreen.kt +++ b/unit/createcomment/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createcomment/CreateCommentScreen.kt @@ -187,7 +187,6 @@ class CreateCommentScreen( LocalXmlStrings.current.createCommentTitle } }, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) }, diff --git a/unit/createpost/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createpost/CreatePostScreen.kt b/unit/createpost/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createpost/CreatePostScreen.kt index 0c0ad1ece..5ac8a34f6 100644 --- a/unit/createpost/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createpost/CreatePostScreen.kt +++ b/unit/createpost/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createpost/CreatePostScreen.kt @@ -251,7 +251,6 @@ class CreatePostScreen( editedPost != null -> LocalXmlStrings.current.editPostTitle else -> LocalXmlStrings.current.createPostTitle }, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) }, diff --git a/unit/createreport/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createreport/CreateReportScreen.kt b/unit/createreport/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createreport/CreateReportScreen.kt index d32259636..a1819879b 100644 --- a/unit/createreport/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createreport/CreateReportScreen.kt +++ b/unit/createreport/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/createreport/CreateReportScreen.kt @@ -112,7 +112,6 @@ class CreateReportScreen( } Text( text = title, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) }, diff --git a/unit/login/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/login/LoginBottomSheet.kt b/unit/login/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/login/LoginBottomSheet.kt index d8aef0372..e485591aa 100644 --- a/unit/login/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/login/LoginBottomSheet.kt +++ b/unit/login/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/login/LoginBottomSheet.kt @@ -118,7 +118,6 @@ class LoginBottomSheet : Screen { title = { Text( text = LocalXmlStrings.current.profileButtonLogin, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) }, diff --git a/unit/managesubscriptions/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/managesubscriptions/ManageSubscriptionsScreen.kt b/unit/managesubscriptions/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/managesubscriptions/ManageSubscriptionsScreen.kt index 336231b92..6f8285b98 100644 --- a/unit/managesubscriptions/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/managesubscriptions/ManageSubscriptionsScreen.kt +++ b/unit/managesubscriptions/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/managesubscriptions/ManageSubscriptionsScreen.kt @@ -136,7 +136,7 @@ class ManageSubscriptionsScreen : Screen { Text( modifier = Modifier.padding(horizontal = Spacing.s), text = LocalXmlStrings.current.navigationDrawerTitleSubscriptions, - style = MaterialTheme.typography.titleLarge + style = MaterialTheme.typography.titleMedium ) }, scrollBehavior = scrollBehavior, @@ -263,7 +263,7 @@ class ManageSubscriptionsScreen : Screen { ) { Text( text = LocalXmlStrings.current.manageSubscriptionsHeaderMulticommunities, - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onBackground, ) Spacer(modifier = Modifier.weight(1f)) @@ -332,7 +332,7 @@ class ManageSubscriptionsScreen : Screen { ) { Text( text = LocalXmlStrings.current.manageSubscriptionsHeaderSubscriptions, - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onBackground, ) } diff --git a/unit/multicommunity/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/multicommunity/editor/MultiCommunityEditorScreen.kt b/unit/multicommunity/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/multicommunity/editor/MultiCommunityEditorScreen.kt index 59c5adff2..4ecdbea15 100644 --- a/unit/multicommunity/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/multicommunity/editor/MultiCommunityEditorScreen.kt +++ b/unit/multicommunity/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/multicommunity/editor/MultiCommunityEditorScreen.kt @@ -94,7 +94,6 @@ class MultiCommunityEditorScreen( title = { Text( text = LocalXmlStrings.current.multiCommunityEditorTitle, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) }, diff --git a/unit/remove/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/remove/RemoveScreen.kt b/unit/remove/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/remove/RemoveScreen.kt index aa2a3a6f1..8de9d2e05 100644 --- a/unit/remove/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/remove/RemoveScreen.kt +++ b/unit/remove/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/unit/remove/RemoveScreen.kt @@ -108,7 +108,6 @@ class RemoveScreen( title = { Text( text = LocalXmlStrings.current.modActionRemove, - style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, ) },