Merge pull request #5 from Infomaniak/typography

Add typography for swiss transfer
Infomaniak · Jul 25, 2024 · 306cd4a · 306cd4a
2 parents 61da3f8 + b11e98f
commit 306cd4a
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 19 deletions.
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/MainActivity.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/MainActivity.kt
@@ -23,6 +23,7 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
@@ -54,12 +55,16 @@ class MainActivity : ComponentActivity() {
 
 @Composable
 fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
+    Column {
+        Text(
+            text = "Hello $name!",
+            modifier = modifier,
+            style = SwissTransferTheme.typography.h1
+        )
+    }
 }
 
+@Preview(showBackground = true)
 @Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
 @Composable
 fun GreetingPreview() {

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt
@@ -19,10 +19,13 @@
 package com.infomaniak.swisstransfer.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.staticCompositionLocalOf
 
 private val DarkColorScheme = darkColorScheme(
     primary = dark_primary,
@@ -36,15 +39,27 @@ private val LightColorScheme = lightColorScheme(
     background = light_background,
 )
 
+val LocalCustomTypography = staticCompositionLocalOf { Typography }
+
 @Composable
 fun SwissTransferTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit,
 ) {
-    MaterialTheme(
-        colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme,
-        shapes = Shapes,
-        typography = Typography,
-        content = content
-    )
+    CompositionLocalProvider(
+        LocalCustomTypography provides Typography,
+        LocalTextStyle provides SwissTransferTheme.typography.bodyRegular,
+    ) {
+        MaterialTheme(
+            colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme,
+            shapes = Shapes,
+            content = content
+        )
+    }
+}
+
+object SwissTransferTheme {
+    val typography: CustomTypography
+        @Composable
+        get() = LocalCustomTypography.current
 }
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Type.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Type.kt
@@ -18,18 +18,123 @@
 
 package com.infomaniak.swisstransfer.ui.theme
 
-import androidx.compose.material3.Typography
+import androidx.compose.runtime.Immutable
 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
 
-val Typography = Typography(
-    bodyLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp,
-    ),
+private val h1 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.SemiBold,
+    fontSize = 22.sp,
+    lineHeight = 28.sp,
+)
+
+private val h2 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.SemiBold,
+    fontSize = 18.sp,
+    lineHeight = 24.sp,
+)
+
+private val bodyMedium = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Medium,
+    fontSize = 16.sp,
+    lineHeight = 20.sp,
+)
+
+private val bodyRegular = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Normal,
+    fontSize = 16.sp,
+    lineHeight = 20.sp,
+)
+
+private val bodySmallMedium = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Medium,
+    fontSize = 14.sp,
+    lineHeight = 20.sp,
+)
+
+private val bodySmallRegular = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Normal,
+    fontSize = 14.sp,
+    lineHeight = 20.sp,
+)
+
+private val labelMedium = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Medium,
+    fontSize = 12.sp,
+    lineHeight = 18.sp,
+)
+
+private val labelRegular = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Normal,
+    fontSize = 12.sp,
+    lineHeight = 18.sp,
+)
+
+private val specificMedium22 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Medium,
+    fontSize = 22.sp,
+    lineHeight = 28.sp,
+)
+
+private val specificMedium32 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Medium,
+    fontSize = 32.sp,
+    lineHeight = 42.sp,
+)
+
+private val specificLight22 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Light,
+    fontSize = 22.sp,
+    lineHeight = 28.sp,
+)
+
+private val specificLight18 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Light,
+    fontSize = 18.sp,
+    lineHeight = 24.sp,
+)
+
+val Typography = CustomTypography(
+    h1 = h1,
+    h2 = h2,
+    bodyMedium = bodyMedium,
+    bodyRegular = bodyRegular,
+    bodySmallMedium = bodySmallMedium,
+    bodySmallRegular = bodySmallRegular,
+    labelMedium = labelMedium,
+    labelRegular = labelRegular,
+    specificMedium32 = specificMedium32,
+    specificMedium22 = specificMedium22,
+    specificLight22 = specificLight22,
+    specificLight18 = specificLight18,
+)
+
+@Immutable
+data class CustomTypography(
+    val h1: TextStyle,
+    val h2: TextStyle,
+    val bodyMedium: TextStyle,
+    val bodyRegular: TextStyle,
+    val bodySmallMedium: TextStyle,
+    val bodySmallRegular: TextStyle,
+    val labelMedium: TextStyle,
+    val labelRegular: TextStyle,
+    val specificMedium32: TextStyle,
+    val specificMedium22: TextStyle,
+    val specificLight22: TextStyle,
+    val specificLight18: TextStyle
 )