Typography System 설계 및 적용

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColors.kt → Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/color/PrezelColors.kt

@@ -1,4 +1,4 @@
-package com.team.prezel.core.designsystem.theme
+package com.team.prezel.core.designsystem.foundation.color
 
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.graphics.Color

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/typography/PrezelFontFamily.kt

@@ -0,0 +1,11 @@
+package com.team.prezel.core.designsystem.foundation.typography
+
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import com.team.prezel.core.designsystem.R
+
+internal val SuitFamily = FontFamily(
+    Font(R.font.suit_medium, PrezelFontWeight.REGULAR.value),
+    Font(R.font.suit_semi_bold, PrezelFontWeight.MEDIUM.value),
+    Font(R.font.suit_bold, PrezelFontWeight.BOLD.value),
+)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/typography/PrezelFontSpec.kt

@@ -0,0 +1,58 @@
+package com.team.prezel.core.designsystem.foundation.typography
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
+
+enum class PrezelFontWeight(
+    val value: FontWeight,
+) {
+    REGULAR(FontWeight.Medium),
+    MEDIUM(FontWeight.SemiBold),
+    BOLD(FontWeight.Bold),
+}
+
+enum class PrezelFontSize(
+    private val value: Dp,
+) {
+    V100(12.dp),
+    V200(14.dp),
+    V300(16.dp),
+    V400(20.dp),
+    V500(24.dp),
+    ;
+
+    val sp: TextUnit
+        @Composable
+        get() = with(LocalDensity.current) { value.toSp() }
+}
+
+enum class PrezelFontLineHeight(
+    val value: Dp,
+) {
+    V100(16.dp),
+    V150(18.dp),
+    V200(20.dp),
+    V300(24.dp),
+    V400(28.dp),
+    V500(32.dp),
+    ;
+
+    val sp: TextUnit
+        @Composable
+        get() = with(LocalDensity.current) { value.toSp() }
+}
+
+enum class PrezelFontLetterSpacing(
+    val value: TextUnit,
+) {
+    V100(0.012.em),
+    V200(0.008.em),
+    V300(0.006.em),
+    V400((-0.012).em),
+    V500((-0.018).em),
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/typography/PrezelTextStyle.kt

@@ -0,0 +1,21 @@
+package com.team.prezel.core.designsystem.foundation.typography
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+
+data class PrezelTextStyle(
+    val fontWeight: PrezelFontWeight,
+    val fontSize: PrezelFontSize,
+    val lineHeight: PrezelFontLineHeight,
+    val letterSpacing: PrezelFontLetterSpacing,
+) {
+    @Composable
+    fun toTextStyle(): TextStyle =
+        TextStyle(
+            fontFamily = SuitFamily,
+            fontWeight = fontWeight.value,
+            fontSize = fontSize.sp,
+            lineHeight = lineHeight.sp,
+            letterSpacing = letterSpacing.value,
+        )
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/typography/PrezelTextStyles.kt

@@ -0,0 +1,122 @@
+package com.team.prezel.core.designsystem.foundation.typography
+
+internal object PrezelTextStyles {
+    val Title1Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V500,
+        lineHeight = PrezelFontLineHeight.V500,
+        letterSpacing = PrezelFontLetterSpacing.V500,
+    )
+
+    val Title1Bold: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.BOLD,
+        fontSize = PrezelFontSize.V500,
+        lineHeight = PrezelFontLineHeight.V500,
+        letterSpacing = PrezelFontLetterSpacing.V500,
+    )
+
+    val Title2Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V400,
+        lineHeight = PrezelFontLineHeight.V400,
+        letterSpacing = PrezelFontLetterSpacing.V400,
+    )
+
+    val Title2Bold: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.BOLD,
+        fontSize = PrezelFontSize.V400,
+        lineHeight = PrezelFontLineHeight.V400,
+        letterSpacing = PrezelFontLetterSpacing.V400,
+    )
+
+    val Body1Regular: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.REGULAR,
+        fontSize = PrezelFontSize.V400,
+        lineHeight = PrezelFontLineHeight.V400,
+        letterSpacing = PrezelFontLetterSpacing.V300,
+    )
+
+    val Body1Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V400,
+        lineHeight = PrezelFontLineHeight.V400,
+        letterSpacing = PrezelFontLetterSpacing.V300,
+    )
+
+    val Body1Bold: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.BOLD,
+        fontSize = PrezelFontSize.V400,
+        lineHeight = PrezelFontLineHeight.V400,
+        letterSpacing = PrezelFontLetterSpacing.V300,
+    )
+
+    val Body2Regular: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.REGULAR,
+        fontSize = PrezelFontSize.V300,
+        lineHeight = PrezelFontLineHeight.V300,
+        letterSpacing = PrezelFontLetterSpacing.V300,
+    )
+
+    val Body2Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V300,
+        lineHeight = PrezelFontLineHeight.V300,
+        letterSpacing = PrezelFontLetterSpacing.V300,
+    )
+
+    val Body2Bold: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.BOLD,
+        fontSize = PrezelFontSize.V300,
+        lineHeight = PrezelFontLineHeight.V300,
+        letterSpacing = PrezelFontLetterSpacing.V300,
+    )
+
+    val Body3Regular: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.REGULAR,
+        fontSize = PrezelFontSize.V200,
+        lineHeight = PrezelFontLineHeight.V200,
+        letterSpacing = PrezelFontLetterSpacing.V200,
+    )
+
+    val Body3Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V200,
+        lineHeight = PrezelFontLineHeight.V200,
+        letterSpacing = PrezelFontLetterSpacing.V200,
+    )
+
+    val Body3Bold: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.BOLD,
+        fontSize = PrezelFontSize.V200,
+        lineHeight = PrezelFontLineHeight.V200,
+        letterSpacing = PrezelFontLetterSpacing.V200,
+    )
+
+    val Caption1Regular: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.REGULAR,
+        fontSize = PrezelFontSize.V200,
+        lineHeight = PrezelFontLineHeight.V150,
+        letterSpacing = PrezelFontLetterSpacing.V200,
+    )
+
+    val Caption1Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V200,
+        lineHeight = PrezelFontLineHeight.V150,
+        letterSpacing = PrezelFontLetterSpacing.V200,
+    )
+
+    val Caption2Regular: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.REGULAR,
+        fontSize = PrezelFontSize.V100,
+        lineHeight = PrezelFontLineHeight.V100,
+        letterSpacing = PrezelFontLetterSpacing.V100,
+    )
+
+    val Caption2Medium: PrezelTextStyle = PrezelTextStyle(
+        fontWeight = PrezelFontWeight.MEDIUM,
+        fontSize = PrezelFontSize.V100,
+        lineHeight = PrezelFontLineHeight.V100,
+        letterSpacing = PrezelFontLetterSpacing.V100,
+    )
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/typography/PrezelTypography.kt

@@ -0,0 +1,31 @@
+package com.team.prezel.core.designsystem.foundation.typography
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.text.TextStyle
+
+@Immutable
+data class PrezelTypography(
+    // Title
+    // 페이지나 섹션의 주요 제목 등 핵심 정보를 강조하는 데 사용하는 스타일입니다.
+    val title1Medium: TextStyle,
+    val title1Bold: TextStyle,
+    val title2Medium: TextStyle,
+    val title2Bold: TextStyle,
+    // Body
+    // 일반 본문과 설명, 단일 문장 또는 단락 등의 주된 콘텐츠 전달에 사용하는 스타일입니다.
+    val body1Regular: TextStyle,
+    val body1Medium: TextStyle,
+    val body1Bold: TextStyle,
+    val body2Regular: TextStyle,
+    val body2Medium: TextStyle,
+    val body2Bold: TextStyle,
+    val body3Regular: TextStyle,
+    val body3Medium: TextStyle,
+    val body3Bold: TextStyle,
+    // Caption
+    // 부가 정보, 안내, 설명, 작성 시간 등 메인 콘텐츠를 보조하는 짧은 정보를 전달할 때 사용하는 스타일입니다.
+    val caption1Regular: TextStyle,
+    val caption1Medium: TextStyle,
+    val caption2Regular: TextStyle,
+    val caption2Medium: TextStyle,
+)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt

@@ -25,6 +25,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.team.prezel.core.designsystem.foundation.color.ColorTokens
+import com.team.prezel.core.designsystem.foundation.color.PrezelColors
 import com.team.prezel.core.designsystem.preview.ThemePreview
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt

@@ -5,14 +5,22 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.staticCompositionLocalOf
+import com.team.prezel.core.designsystem.foundation.color.PrezelColors
+import com.team.prezel.core.designsystem.foundation.typography.PrezelTypography
 
 private val LocalPrezelColors = staticCompositionLocalOf<PrezelColors> { error("No PrezelColors provided") }
+private val LocalPrezelTypography = staticCompositionLocalOf<PrezelTypography> { error("No PrezelTypography provided") }
 
 object PrezelTheme {
     val colors: PrezelColors
         @Composable
         @ReadOnlyComposable
         get() = LocalPrezelColors.current
+
+    val typography: PrezelTypography
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalPrezelTypography.current
 }
 
 @Composable
@@ -21,9 +29,11 @@ fun PrezelTheme(
     content: @Composable () -> Unit,
 ) {
     val colorScheme = if (isDarkTheme) PrezelColorScheme.Dark else PrezelColorScheme.Light
+    val typographyScheme = PrezelTypographyScheme.Default()
 
     CompositionLocalProvider(
         LocalPrezelColors provides colorScheme,
+        LocalPrezelTypography provides typographyScheme,
         content = content,
     )
 }