Merge pull request #32 from azrael8576/chore/add-fonts

core/designsystem/src/main/java/com/wei/amazingtalker/core/designsystem/theme/Theme.kt

@@ -88,6 +88,8 @@ fun AtTheme(
     androidTheme: Boolean = true,
     content: @Composable () -> Unit,
 ) {
+    val typography = getAppTypography()
+
     // Color scheme
     val colorScheme = when {
         androidTheme -> if (darkTheme) DarkColors else LightColors
@@ -110,6 +112,7 @@ fun AtTheme(
     ) {
         MaterialTheme(
             colorScheme = colorScheme,
+            typography = typography,
             content = content,
         )
     }

core/designsystem/src/main/java/com/wei/amazingtalker/core/designsystem/theme/Type.kt

@@ -0,0 +1,151 @@
+package com.wei.amazingtalker.core.designsystem.theme
+
+import androidx.compose.material3.Typography
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import com.wei.amazingtalker.core.designsystem.R
+
+val atFontFamily = FontFamily(
+    Font(R.font.gilroy_black, FontWeight.Black),
+    Font(R.font.gilroy_black_italic, FontWeight.Black, FontStyle.Italic),
+    Font(R.font.gilroy_bold, FontWeight.Bold),
+    Font(R.font.gilroy_bold_italic, FontWeight.Bold, FontStyle.Italic),
+    Font(R.font.gilroy_extra_bold, FontWeight.ExtraBold),
+    Font(R.font.gilroy_extra_bold_italic, FontWeight.ExtraBold, FontStyle.Italic),
+    Font(R.font.gilroy_light, FontWeight.Light),
+    Font(R.font.gilroy_light_italic, FontWeight.Light, FontStyle.Italic),
+    Font(R.font.gilroy_medium, FontWeight.SemiBold),
+    Font(R.font.gilroy_medium_italic, FontWeight.SemiBold, FontStyle.Italic),
+    Font(R.font.gilroy_regular, FontWeight.Medium),
+    Font(R.font.gilroy_regular_italic, FontWeight.Normal, FontStyle.Italic),
+    Font(R.font.gilroy_semi_bold, FontWeight.SemiBold),
+    Font(R.font.gilroy_semi_bold_italic, FontWeight.SemiBold, FontStyle.Italic),
+    Font(R.font.gilroy_thin, FontWeight.Thin),
+    Font(R.font.gilroy_thin_italic, FontWeight.Thin, FontStyle.Italic),
+    Font(R.font.gilroy_ultra_light, FontWeight.ExtraLight),
+    Font(R.font.gilroy_ultra_light_italic, FontWeight.ExtraLight, FontStyle.Italic),
+)
+
+val notoSansTCFontFamily = FontFamily(
+    Font(R.font.noto_sans_tc_variablefont_wght),
+)
+
+val abrilFatfaceFontFamily = FontFamily(
+    Font(R.font.abril_fatface),
+)
+
+@Composable
+fun getAppTypography(): Typography {
+    return Typography(
+        displayLarge = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 57.sp,
+            lineHeight = 64.sp,
+            letterSpacing = (-0.25).sp,
+        ),
+        displayMedium = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 45.sp,
+            lineHeight = 52.sp,
+            letterSpacing = 0.sp,
+        ),
+        displaySmall = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 36.sp,
+            lineHeight = 44.sp,
+            letterSpacing = 0.sp,
+        ),
+        headlineLarge = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 32.sp,
+            lineHeight = 40.sp,
+            letterSpacing = 0.sp,
+        ),
+        headlineMedium = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 28.sp,
+            lineHeight = 36.sp,
+            letterSpacing = 0.sp,
+        ),
+        headlineSmall = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 24.sp,
+            lineHeight = 32.sp,
+            letterSpacing = 0.sp,
+        ),
+        titleLarge = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Bold,
+            fontSize = 22.sp,
+            lineHeight = 28.sp,
+            letterSpacing = 0.sp,
+        ),
+        titleMedium = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Bold,
+            fontSize = 18.sp,
+            lineHeight = 24.sp,
+            letterSpacing = 0.15.sp,
+        ),
+        titleSmall = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.SemiBold,
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            letterSpacing = 0.1.sp,
+        ),
+        bodyLarge = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 16.sp,
+            lineHeight = 24.sp,
+            letterSpacing = 0.15.sp,
+        ),
+        bodyMedium = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            letterSpacing = 0.25.sp,
+        ),
+        bodySmall = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.Normal,
+            fontSize = 12.sp,
+            lineHeight = 16.sp,
+            letterSpacing = 0.4.sp,
+        ),
+        labelLarge = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.SemiBold,
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            letterSpacing = 0.1.sp,
+        ),
+        labelMedium = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.SemiBold,
+            fontSize = 12.sp,
+            lineHeight = 16.sp,
+            letterSpacing = 0.5.sp,
+        ),
+        labelSmall = TextStyle(
+            fontFamily = atFontFamily,
+            fontWeight = FontWeight.SemiBold,
+            fontSize = 10.sp,
+            lineHeight = 16.sp,
+            letterSpacing = 0.5.sp,
+        ),
+    )
+}

feature/login/src/main/java/com/wei/amazingtalker/feature/login/login/LoginScreen.kt

@@ -118,20 +118,20 @@ internal fun LoginScreen(
                 if (withTopSpacer) {
                     Spacer(Modifier.windowInsetsTopHeight(WindowInsets.safeDrawing))
                 }
-                Spacer(modifier = Modifier.weight(1.5f))
+                Spacer(modifier = Modifier.weight(1f))
                 Title()
-                Spacer(modifier = Modifier.weight(3f))
+                Spacer(modifier = Modifier.weight(1.5f))
                 AccountTextField(accountState)
                 PasswordTextField(passwordState)
-                Spacer(modifier = Modifier.weight(0.5f))
+                Spacer(modifier = Modifier.weight(0.1f))
                 ForgotPasswordText()
-                Spacer(modifier = Modifier.weight(1f))
+                Spacer(modifier = Modifier.weight(0.5f))
                 LoginButton(
                     accountState,
                     passwordState,
                     login,
                 )
-                Spacer(modifier = Modifier.weight(2f))
+                Spacer(modifier = Modifier.weight(1f))
                 if (withBottomSpacer) {
                     Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
                 }
@@ -146,7 +146,7 @@ private fun Title(modifier: Modifier = Modifier) {
 
     Text(
         text = title,
-        style = MaterialTheme.typography.displayLarge,
+        style = MaterialTheme.typography.displayMedium,
         modifier = modifier
             .semantics { contentDescription = "" },
     )
@@ -196,13 +196,14 @@ internal fun PasswordTextField(
 }
 
 @Composable
-internal fun ForgotPasswordText() {
+internal fun ForgotPasswordText(modifier: Modifier = Modifier) {
     val forgotPassword = stringResource(R.string.forgot_password)
 
     Text(
         text = forgotPassword,
-        style = MaterialTheme.typography.bodySmall,
+        style = MaterialTheme.typography.bodyMedium,
         modifier = Modifier
+            .padding(top = 16.dp)
             .semantics { contentDescription = forgotPassword },
     )
 }
@@ -224,7 +225,10 @@ internal fun LoginButton(
             .padding(top = 8.dp)
             .semantics { contentDescription = loginTextDescription },
     ) {
-        Text(loginText)
+        Text(
+            loginText,
+            fontSize = MaterialTheme.typography.bodyLarge.fontSize,
+        )
     }
 }
 

feature/login/src/main/java/com/wei/amazingtalker/feature/login/welcome/WelcomeScreen.kt

@@ -35,6 +35,10 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -50,6 +54,7 @@ import com.wei.amazingtalker.core.designsystem.ui.DeviceLandscapePreviews
 import com.wei.amazingtalker.core.designsystem.ui.DevicePortraitPreviews
 import com.wei.amazingtalker.feature.login.R
 import com.wei.amazingtalker.feature.login.login.navigation.navigateToLogin
+import com.wei.amazingtalker.core.designsystem.R as DesignsystemR
 
 /**
  *
@@ -102,6 +107,10 @@ internal fun WelcomeRoute(
     )
 }
 
+val NotoSansFontFamily = FontFamily(
+    Font(DesignsystemR.font.noto_sans_tc_variablefont_wght),
+)
+
 @Composable
 internal fun WelcomeScreen(
     isPortrait: Boolean,
@@ -236,15 +245,24 @@ fun WelcomeContent(
     modifier: Modifier = Modifier,
     isPortrait: Boolean,
 ) {
+    val style = TextStyle(
+        fontFamily = NotoSansFontFamily,
+        fontSize = MaterialTheme.typography.displaySmall.fontSize,
+        fontWeight = FontWeight.Bold,
+    )
+
     if (isPortrait) {
-        WelcomeTitlePortrait()
+        WelcomeTitlePortrait(style = style)
     } else {
-        WelcomeTitleLandscape()
+        WelcomeTitleLandscape(style = style)
     }
 }
 
 @Composable
-fun WelcomeTitlePortrait(modifier: Modifier = Modifier) {
+fun WelcomeTitlePortrait(
+    modifier: Modifier = Modifier,
+    style: TextStyle,
+) {
     val welcomeTitle = stringResource(R.string.welcome_title)
 
     Box(
@@ -254,10 +272,10 @@ fun WelcomeTitlePortrait(modifier: Modifier = Modifier) {
     ) {
         Text(
             modifier = Modifier
-                .padding(vertical = 40.dp)
+                .padding(vertical = 24.dp)
                 .semantics { contentDescription = welcomeTitle }
                 .align(alignment = Alignment.Center),
-            style = MaterialTheme.typography.displaySmall,
+            style = style,
             text = welcomeTitle,
             textAlign = TextAlign.Center,
             color = Color.White,
@@ -266,7 +284,10 @@ fun WelcomeTitlePortrait(modifier: Modifier = Modifier) {
 }
 
 @Composable
-fun WelcomeTitleLandscape(modifier: Modifier = Modifier) {
+fun WelcomeTitleLandscape(
+    modifier: Modifier = Modifier,
+    style: TextStyle,
+) {
     val welcomeTitle = stringResource(R.string.welcome_title)
 
     Box(
@@ -279,7 +300,7 @@ fun WelcomeTitleLandscape(modifier: Modifier = Modifier) {
                 .padding(horizontal = 24.dp)
                 .semantics { contentDescription = welcomeTitle }
                 .align(alignment = Alignment.Center),
-            style = MaterialTheme.typography.headlineLarge,
+            style = style,
             text = welcomeTitle,
             textAlign = TextAlign.Start,
             color = Color.Black,