Merge branch 'standardize-typography-droid-830'

5 files changed, 23 insertions, 130 deletions

diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
index 3625c8ed0a..3257ea2d5b 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
@@ -7,49 +7,17 @@ import androidx.compose.material3.LocalRippleConfiguration
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.RippleConfiguration
 import androidx.compose.material3.Shapes
-import androidx.compose.material3.Typography
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.lib.theme.color.ColorDarkTokens
 import net.mullvad.mullvadvpn.lib.theme.color.ColorLightTokens
 import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
-import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
-
-// Add our own definitions here
-private val MullvadTypography =
-    Typography(
-        headlineLarge = TextStyle(fontSize = TypeScale.TextHuge, fontWeight = FontWeight.Bold),
-        headlineMedium =
-            TextStyle(
-                fontWeight = FontWeight.Bold,
-                fontSize = TypeScale.TextHeadline,
-                lineHeight = TypeScale.HeadlineMediumLineHeight,
-            ),
-        headlineSmall = TextStyle(fontSize = TypeScale.TextBig, fontWeight = FontWeight.Bold),
-        bodySmall =
-            TextStyle(fontSize = TypeScale.TextSmall, lineHeight = TypeScale.TextMediumPlus),
-        titleSmall = TextStyle(fontSize = TypeScale.TextMedium, fontWeight = FontWeight.SemiBold),
-        titleMedium =
-            TextStyle(fontSize = TypeScale.TextMediumPlus, fontWeight = FontWeight.SemiBold),
-        titleLarge = TextStyle(fontSize = TypeScale.TitleLarge, fontFamily = FontFamily.SansSerif),
-        labelMedium = TextStyle(fontSize = TypeScale.TextSmall, fontWeight = FontWeight.SemiBold),
-        labelLarge =
-            TextStyle(
-                fontWeight = FontWeight.Normal,
-                letterSpacing = TextUnit.Unspecified,
-                fontSize = TypeScale.TextMedium,
-            ),
-    )
 
 private val lightColorScheme =
     lightColorScheme(
@@ -168,7 +136,7 @@ private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions }
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AppTheme(content: @Composable () -> Unit) {
-    val typography = MullvadTypography
+    val typography = MullvadMaterial3Typography
     // Set dimensions and type scale based on configurations here
     val dimensions = defaultDimensions
 
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt
index 848e375e1c..76b24c1327 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt
@@ -1,33 +1,26 @@
 package net.mullvad.mullvadvpn.lib.theme
 
 import androidx.compose.material3.Typography
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
+
+/*
+The app currently uses the following text styles directly in the code:
+headlineLarge (32sp 700 weight) -> Used for title in PrivacyDisclaimer, Welcome and Login
+headlineSmall (24sp 600 weight) -> Used for title in OutOfTime, DeviceRevoked, ReportAProblem etc
+titleLarge (22sp 600 weight) -> Used for Connection status and location
+titleMedium (16sp 600 weight) -> Used for cell header text and button text
+bodyLarge (16sp 400 weight) -> Used for title in two row cells and some other non-standard cells
+bodyMedium (14sp 400 weight) -> Used for descriptions in screens and descriptions for cells
+bodySmall (12sp 400 weight) -> Disclaimer texts and error texts under inputs
+labelLarge (14sp 500 weight) -> Cell that are not header cells, Dialog texts, device name and expiry
+ */
 
 internal val MullvadMaterial3Typography =
-    Typography(
-        displayLarge = TextStyle(fontFamily = FontFamily.SansSerif),
-        displayMedium = TextStyle(fontFamily = FontFamily.SansSerif),
-        displaySmall = TextStyle(fontFamily = FontFamily.SansSerif),
-        headlineLarge = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Black),
-        headlineMedium = TextStyle(fontFamily = FontFamily.SansSerif),
-        headlineSmall = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Black),
-        titleLarge = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Black),
-        titleMedium = TextStyle(fontFamily = FontFamily.SansSerif),
-        titleSmall = TextStyle(fontFamily = FontFamily.SansSerif),
-        bodyLarge = TextStyle(fontFamily = FontFamily.SansSerif),
-        bodyMedium = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
-        bodySmall = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
-        labelLarge =
-            TextStyle(
-                fontFamily = FontFamily.SansSerif,
-                fontWeight = FontWeight.SemiBold,
-                fontSize = 18.sp,
-                lineHeight = 23.sp,
-            ),
-        labelMedium =
-            TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
-        labelSmall = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
-    )
+    with(Typography()) {
+        this.copy(
+            headlineLarge = headlineLarge.merge(fontWeight = FontWeight.Bold),
+            headlineSmall = headlineSmall.merge(fontWeight = FontWeight.SemiBold),
+            titleLarge = titleLarge.merge(fontWeight = FontWeight.SemiBold),
+            titleMedium = titleMedium.merge(fontWeight = FontWeight.SemiBold),
+        )
+    }
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
index 1fff17afb4..0d40e7c805 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
@@ -30,7 +30,7 @@ data class Dimensions(
     val circularProgressBarSmallStrokeWidth: Dp = 3.dp,
     val connectButtonExtraPadding: Dp = 4.dp,
     val connectionCardMaxWidth: Dp = 480.dp,
-    val customPortBoxMinWidth: Dp = 80.dp,
+    val customPortBoxMinWidth: Dp = 60.dp,
     val deleteIconSize: Dp = 24.dp,
     val dialogIconHeight: Dp = 44.dp,
     val formTextFieldMinHeight: Dp = 72.dp,
@@ -52,7 +52,7 @@ data class Dimensions(
     val notificationEndIconPadding: Dp = 4.dp,
     val notificationIconPadding: Dp = 10.dp,
     val notificationStatusIconSize: Dp = 10.dp,
-    val obfuscationNavigationBoxWidth: Dp = 80.dp,
+    val obfuscationNavigationBoxWidth: Dp = 60.dp,
     val outLineButtonBorderWidth: Dp = 1.dp,
     val payIconHeight: Dp = 20.dp,
     val privacyPolicyIconSize: Dp = 16.dp,
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
deleted file mode 100644
index 4e5492a630..0000000000
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
+++ /dev/null
@@ -1,23 +0,0 @@
-package net.mullvad.mullvadvpn.lib.theme.typeface
-
-import androidx.compose.ui.unit.sp
-
-/**
- * Font sizes used by text styles in the app.
- *
- * NOTE:
- * * Do not use these font sizes directly. Instead use the styles defined in Typeface and/or the
- *   standard styles in the material theme
- * * Order entries within each type by descending size.
- */
-internal object TypeScale {
-    val TextHuge = 30.sp
-    val TextHeadline = 28.sp
-    val TextBig = 24.sp
-    val TextMediumPlus = 18.sp
-    val TextMedium = 16.sp
-    val TextSmall = 13.sp
-    val TitleLarge = 22.sp
-
-    val HeadlineMediumLineHeight = 36.0.sp
-}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt
index 179b417014..ac0fbe2666 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt
@@ -1,48 +1,3 @@
 package net.mullvad.mullvadvpn.lib.theme.typeface
 
-import androidx.compose.material3.Typography
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.TextUnit
-
 // Add text styles not in the material theme here
-val Typography.listItemText: TextStyle
-    @Composable
-    get() {
-        return TextStyle(
-            fontWeight = FontWeight.Normal,
-            letterSpacing = TextUnit.Unspecified,
-            fontSize = TypeScale.TextMediumPlus,
-        )
-    }
-
-val Typography.listItemSubText: TextStyle
-    @Composable
-    get() {
-        return TextStyle(
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = TextUnit.Unspecified,
-            fontSize = TypeScale.TextSmall,
-        )
-    }
-
-val Typography.connectionStatus: TextStyle
-    @Composable
-    get() {
-        return TextStyle(
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = TextUnit.Unspecified,
-            fontSize = TypeScale.TitleLarge,
-        )
-    }
-
-val Typography.hostname: TextStyle
-    @Composable
-    get() {
-        return TextStyle(
-            fontWeight = FontWeight.Normal,
-            letterSpacing = TextUnit.Unspecified,
-            fontSize = TypeScale.TextMediumPlus,
-        )
-    }