Separate typography for numbers

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)
             }
         }

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,

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
+@Immutable
-val Typography.numberDisplayLarge by lazy {
+data class NumberTypography(
-    TextStyle(
+    val displayLarge: TextStyle,
-        fontFamily = latoFamily,
+    val displayMedium: TextStyle,
-        fontWeight = FontWeight.Normal,
+    val headlineMedium: TextStyle,
-        fontSize = 57.sp,
+    val headlineSmall: TextStyle,
-        lineHeight = (1.25).em,
+    val bodyLarge: TextStyle,
-        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,
-    )
-}
 
 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
+                    )
                 }
             }
         }

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

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()

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
                                 )
                             }
                         )

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
                 )
             }

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.LocalNumberTypography
-import com.sadellie.unitto.core.ui.theme.numberDisplayLarge
 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,