From 56dadeee748a78b23879c5bb524de592ede59d64 Mon Sep 17 00:00:00 2001 From: Sad Ellie Date: Mon, 9 Oct 2023 11:27:59 +0300 Subject: [PATCH] Separate typography for numbers --- .../java/com/sadellie/unitto/MainActivity.kt | 12 +- .../ui/common/textfield/InputTextField.kt | 6 +- .../com/sadellie/unitto/core/ui/theme/Type.kt | 119 ++++++++++-------- .../calculator/components/HistoryList.kt | 6 +- .../settings/formatting/FormattingScreen.kt | 4 +- .../feature/timezone/AddTimeZoneScreen.kt | 5 +- .../components/FavoriteTimeZoneItem.kt | 4 +- .../timezone/components/UserTimeZone.kt | 9 +- 8 files changed, 94 insertions(+), 71 deletions(-) diff --git a/app/src/main/java/com/sadellie/unitto/MainActivity.kt b/app/src/main/java/com/sadellie/unitto/MainActivity.kt index cd4dcfac..43d33815 100644 --- a/app/src/main/java/com/sadellie/unitto/MainActivity.kt +++ b/app/src/main/java/com/sadellie/unitto/MainActivity.kt @@ -32,6 +32,9 @@ import androidx.compose.ui.platform.LocalConfiguration import androidx.core.view.WindowCompat import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.sadellie.unitto.core.ui.LocalLocale +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography +import com.sadellie.unitto.core.ui.theme.NumberTypographySystem +import com.sadellie.unitto.core.ui.theme.NumberTypographyUnitto import com.sadellie.unitto.data.userprefs.UserPreferencesRepository import dagger.hilt.android.AndroidEntryPoint import java.util.Locale @@ -56,7 +59,14 @@ internal class MainActivity : AppCompatActivity() { if (tag.isEmpty()) Locale.getDefault() else Locale.forLanguageTag(tag) } - CompositionLocalProvider(LocalLocale provides locale) { + val numbersTypography = remember(prefs?.systemFont) { + if (prefs?.systemFont == true) NumberTypographySystem else NumberTypographyUnitto + } + + CompositionLocalProvider( + LocalLocale provides locale, + LocalNumberTypography provides numbersTypography + ) { UnittoApp(prefs) } } diff --git a/core/ui/src/main/java/com/sadellie/unitto/core/ui/common/textfield/InputTextField.kt b/core/ui/src/main/java/com/sadellie/unitto/core/ui/common/textfield/InputTextField.kt index c85504c3..c9104337 100644 --- a/core/ui/src/main/java/com/sadellie/unitto/core/ui/common/textfield/InputTextField.kt +++ b/core/ui/src/main/java/com/sadellie/unitto/core/ui/common/textfield/InputTextField.kt @@ -59,7 +59,7 @@ import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.unit.Constraints import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.sp -import com.sadellie.unitto.core.ui.theme.numberDisplayLarge +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography import kotlin.math.ceil import kotlin.math.roundToInt @@ -105,7 +105,7 @@ fun ExpressionTextField( modifier = modifier, value = value, formattedValue = value.text.formatExpression(formatterSymbols), - textStyle = MaterialTheme.typography.numberDisplayLarge.copy(color = textColor), + textStyle = LocalNumberTypography.current.displayLarge.copy(color = textColor), minRatio = minRatio, onValueChange = { onCursorChange(it.selection) }, readOnly = readOnly, @@ -157,7 +157,7 @@ fun UnformattedTextField( AutoSizableTextField( modifier = modifier, value = value, - textStyle = MaterialTheme.typography.numberDisplayLarge.copy(color = textColor), + textStyle = LocalNumberTypography.current.displayLarge.copy(color = textColor), minRatio = minRatio, onValueChange = { onCursorChange(it.selection) }, readOnly = readOnly, diff --git a/core/ui/src/main/java/com/sadellie/unitto/core/ui/theme/Type.kt b/core/ui/src/main/java/com/sadellie/unitto/core/ui/theme/Type.kt index 3ff4554a..97c5cba2 100644 --- a/core/ui/src/main/java/com/sadellie/unitto/core/ui/theme/Type.kt +++ b/core/ui/src/main/java/com/sadellie/unitto/core/ui/theme/Type.kt @@ -24,6 +24,8 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.Typography import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font @@ -34,57 +36,14 @@ import androidx.compose.ui.unit.em import androidx.compose.ui.unit.sp import com.sadellie.unitto.core.base.R -// This text style is used for text field -val Typography.numberDisplayLarge by lazy { - TextStyle( - fontFamily = latoFamily, - fontWeight = FontWeight.Normal, - fontSize = 57.sp, - lineHeight = (1.25).em, - letterSpacing = (-0.25).sp, - ) -} - -// This text style is used for secondary text field -val Typography.numberDisplayMedium by lazy { - TextStyle( - fontFamily = latoFamily, - fontWeight = FontWeight.W400, - fontSize = 38.sp, - lineHeight = 42.sp, - letterSpacing = (-0.25).sp, - ) -} - -val Typography.numberHeadlineSmall: TextStyle by lazy { - TextStyle( - fontFamily = latoFamily, - fontWeight = FontWeight.Normal, - fontSize = 24.sp, - lineHeight = 1.25.em, - letterSpacing = 0.sp, - ) -} - -val Typography.numberBodyLarge: TextStyle by lazy { - TextStyle( - fontFamily = latoFamily, - fontWeight = FontWeight.Normal, - fontSize = 16.sp, - lineHeight = 1.5.em, - letterSpacing = 0.5.sp, - ) -} - -val Typography.numberHeadlineMedium: TextStyle by lazy { - TextStyle( - fontFamily = latoFamily, - fontWeight = FontWeight.Normal, - fontSize = 28.sp, - lineHeight = 1.25.em, - letterSpacing = 0.sp, - ) -} +@Immutable +data class NumberTypography( + val displayLarge: TextStyle, + val displayMedium: TextStyle, + val headlineMedium: TextStyle, + val headlineSmall: TextStyle, + val bodyLarge: TextStyle, +) val TypographyUnitto by lazy { Typography( @@ -196,8 +155,60 @@ val TypographyUnitto by lazy { ) } +val NumberTypographyUnitto by lazy { + NumberTypography( + displayLarge = TextStyle( + fontFamily = latoFamily, + fontWeight = FontWeight.Normal, + fontSize = 57.sp, + lineHeight = (1.25).em, + letterSpacing = (-0.25).sp, + ), + displayMedium = TextStyle( + fontFamily = latoFamily, + fontWeight = FontWeight.W400, + fontSize = 38.sp, + lineHeight = 42.sp, + letterSpacing = (-0.25).sp, + ), + headlineMedium = TextStyle( + fontFamily = latoFamily, + fontWeight = FontWeight.Normal, + fontSize = 28.sp, + lineHeight = 1.25.em, + letterSpacing = 0.sp, + ), + headlineSmall = TextStyle( + fontFamily = latoFamily, + fontWeight = FontWeight.Normal, + fontSize = 24.sp, + lineHeight = 1.25.em, + letterSpacing = 0.sp, + ), + bodyLarge = TextStyle( + fontFamily = latoFamily, + fontWeight = FontWeight.Normal, + fontSize = 16.sp, + lineHeight = 1.5.em, + letterSpacing = 0.5.sp, + ) + ) +} + val TypographySystem by lazy { Typography() } +val NumberTypographySystem by lazy { + NumberTypography( + displayLarge = TypographySystem.displayLarge, + displayMedium = TypographySystem.displayMedium, + headlineMedium = TypographySystem.headlineMedium, + headlineSmall = TypographySystem.headlineSmall, + bodyLarge = TypographySystem.bodyLarge + ) +} + +val LocalNumberTypography = staticCompositionLocalOf { NumberTypographySystem } + private val montserratFamily by lazy { FontFamily( Font(R.font.montserrat_light, weight = FontWeight.Light), @@ -239,7 +250,11 @@ private fun PreviewTypography() { textStyles.forEach { (label, style) -> item { - Text("$label 123", style = style, color = MaterialTheme.colorScheme.onBackground) + Text( + text = "$label 123", + style = style, + color = MaterialTheme.colorScheme.onBackground + ) } } } diff --git a/feature/calculator/src/main/java/com/sadellie/unitto/feature/calculator/components/HistoryList.kt b/feature/calculator/src/main/java/com/sadellie/unitto/feature/calculator/components/HistoryList.kt index 90cdc7dc..6f0dabbf 100644 --- a/feature/calculator/src/main/java/com/sadellie/unitto/feature/calculator/components/HistoryList.kt +++ b/feature/calculator/src/main/java/com/sadellie/unitto/feature/calculator/components/HistoryList.kt @@ -64,7 +64,7 @@ import com.sadellie.unitto.core.ui.common.textfield.FormatterSymbols import com.sadellie.unitto.core.ui.common.textfield.UnittoTextToolbar import com.sadellie.unitto.core.ui.common.textfield.clearAndFilterExpression import com.sadellie.unitto.core.ui.common.textfield.copyWithoutGrouping -import com.sadellie.unitto.core.ui.theme.numberDisplayMedium +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography import com.sadellie.unitto.data.model.HistoryItem import java.text.SimpleDateFormat import java.util.Locale @@ -190,7 +190,7 @@ private fun HistoryListItem( .fillMaxWidth() .padding(horizontal = 8.dp) .horizontalScroll(rememberScrollState(), reverseScrolling = true), - textStyle = MaterialTheme.typography.numberDisplayMedium.copy(color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.End), + textStyle = LocalNumberTypography.current.displayMedium.copy(color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.End), readOnly = true, visualTransformation = ExpressionTransformer(formatterSymbols), interactionSource = expressionInteractionSource @@ -215,7 +215,7 @@ private fun HistoryListItem( .fillMaxWidth() .padding(horizontal = 8.dp) .horizontalScroll(rememberScrollState(), reverseScrolling = true), - textStyle = MaterialTheme.typography.numberDisplayMedium.copy(color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.5f), textAlign = TextAlign.End), + textStyle = LocalNumberTypography.current.displayMedium.copy(color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.5f), textAlign = TextAlign.End), readOnly = true, visualTransformation = ExpressionTransformer(formatterSymbols), interactionSource = resultInteractionSource diff --git a/feature/settings/src/main/java/com/sadellie/unitto/feature/settings/formatting/FormattingScreen.kt b/feature/settings/src/main/java/com/sadellie/unitto/feature/settings/formatting/FormattingScreen.kt index ae38843d..993b2f50 100644 --- a/feature/settings/src/main/java/com/sadellie/unitto/feature/settings/formatting/FormattingScreen.kt +++ b/feature/settings/src/main/java/com/sadellie/unitto/feature/settings/formatting/FormattingScreen.kt @@ -63,7 +63,7 @@ import com.sadellie.unitto.core.ui.common.UnittoScreenWithLargeTopBar import com.sadellie.unitto.core.ui.common.UnittoSlider import com.sadellie.unitto.core.ui.common.squashable import com.sadellie.unitto.core.ui.common.textfield.formatExpression -import com.sadellie.unitto.core.ui.theme.numberDisplayMedium +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography import kotlin.math.roundToInt @Composable @@ -139,7 +139,7 @@ fun FormattingScreen( ) Text( text = uiState.preview, - style = MaterialTheme.typography.numberDisplayMedium, + style = LocalNumberTypography.current.displayMedium, maxLines = 1, modifier = Modifier .fillMaxWidth() diff --git a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/AddTimeZoneScreen.kt b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/AddTimeZoneScreen.kt index a7fdae1e..f8edee5b 100644 --- a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/AddTimeZoneScreen.kt +++ b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/AddTimeZoneScreen.kt @@ -29,7 +29,6 @@ import androidx.compose.animation.Crossfade import androidx.compose.foundation.clickable import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBarDefaults @@ -50,7 +49,7 @@ import com.sadellie.unitto.core.ui.common.UnittoEmptyScreen import com.sadellie.unitto.core.ui.common.UnittoListItem import com.sadellie.unitto.core.ui.common.UnittoSearchBar import com.sadellie.unitto.core.ui.datetime.formatTime -import com.sadellie.unitto.core.ui.theme.numberHeadlineSmall +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography import com.sadellie.unitto.data.common.displayName import com.sadellie.unitto.data.common.offset import com.sadellie.unitto.data.common.regionName @@ -121,7 +120,7 @@ fun AddTimeZoneScreen( text = it.timeZone .offset(userTime) .formatTime(locale, is24Hour), - style = MaterialTheme.typography.numberHeadlineSmall + style = LocalNumberTypography.current.headlineSmall ) } ) diff --git a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/FavoriteTimeZoneItem.kt b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/FavoriteTimeZoneItem.kt index 9adbef5d..9479039f 100644 --- a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/FavoriteTimeZoneItem.kt +++ b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/FavoriteTimeZoneItem.kt @@ -69,7 +69,7 @@ import com.sadellie.unitto.core.base.R import com.sadellie.unitto.core.ui.LocalLocale import com.sadellie.unitto.core.ui.datetime.formatOffset import com.sadellie.unitto.core.ui.datetime.formatTime -import com.sadellie.unitto.core.ui.theme.numberHeadlineMedium +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography import com.sadellie.unitto.data.common.offset import com.sadellie.unitto.data.common.regionName import com.sadellie.unitto.data.model.timezone.FavoriteZone @@ -160,7 +160,7 @@ internal fun FavoriteTimeZoneItem( // TODO Add AM PM as dots (apply to 12 and 24 hour systems) Text( text = time, - style = MaterialTheme.typography.numberHeadlineMedium, + style = LocalNumberTypography.current.headlineMedium, color = MaterialTheme.colorScheme.onSurface ) } diff --git a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt index 9ff71cb9..47ce004b 100644 --- a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt +++ b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt @@ -55,8 +55,7 @@ import com.sadellie.unitto.core.ui.datetime.formatDateDayMonthYear import com.sadellie.unitto.core.ui.datetime.formatTimeHours import com.sadellie.unitto.core.ui.datetime.formatTimeMinutes import com.sadellie.unitto.core.ui.datetime.formatZone -import com.sadellie.unitto.core.ui.theme.numberBodyLarge -import com.sadellie.unitto.core.ui.theme.numberDisplayLarge +import com.sadellie.unitto.core.ui.theme.LocalNumberTypography import java.time.ZonedDateTime @Composable @@ -84,7 +83,7 @@ internal fun UserTimeZone( Column(Modifier.weight(1f)) { Text( text = userTime.formatZone(locale), - style = MaterialTheme.typography.numberBodyLarge, + style = LocalNumberTypography.current.bodyLarge, color = MaterialTheme.colorScheme.onTertiaryContainer ) @@ -121,7 +120,7 @@ internal fun UserTimeZone( @Composable private fun SlidingText( text: String, - style: TextStyle = MaterialTheme.typography.numberDisplayLarge + style: TextStyle = LocalNumberTypography.current.displayLarge ) { AnimatedContent( targetState = text, @@ -145,7 +144,7 @@ private fun SlidingText( @Composable private fun TimeSeparator( text: String = ":", - style: TextStyle = MaterialTheme.typography.numberDisplayLarge + style: TextStyle = LocalNumberTypography.current.displayLarge ) { Text( text = text,