[setting/#3] 디자인 시스템 세팅 #6
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,50 @@ | ||
| package com.kiero.core.designsystem.theme | ||
|
|
||
| import androidx.compose.runtime.Immutable | ||
| import androidx.compose.ui.graphics.Color | ||
|
|
||
| val White = Color(0xFFFFFFFF) | ||
| val Gray100 = Color(0xFFF5F5F5) | ||
| val Gray200 = Color(0xFFD6D6D6) | ||
| val Gray300 = Color(0xFFC2C2C2) | ||
| val Gray400 = Color(0xFFADADAD) | ||
| val Gray500 = Color(0xFF999999) | ||
| val Gray600 = Color(0xFF848484) | ||
| val Gray700 = Color(0xFF707070) | ||
| val Gray800 = Color(0xFF5C5C5C) | ||
| val Gray900 = Color(0xFF2D2F34) | ||
| val Black = Color(0xFF232428) | ||
|
|
||
| val Main = Color(0xFF00FFE1) | ||
| val Schedule1 = Color(0xFFCFFFFA) | ||
| val Schedule2 = Color(0xFFFFFEE9) | ||
| val Schedule3 = Color(0xFFBFFFE3) | ||
| val Schedule4 = Color(0xFF34D9D3) | ||
| val Schedule5 = Color(0xFF7BBDFF) | ||
| val Point = Color(0xFFFF7BA2) | ||
|
|
||
| @Immutable | ||
| data class KieroColors( | ||
| val white: Color = White, | ||
| val black: Color = Black, | ||
|
|
||
| val main: Color = Main, | ||
| val schedule1: Color = Schedule1, | ||
| val schedule2: Color = Schedule2, | ||
| val schedule3: Color = Schedule3, | ||
| val schedule4: Color = Schedule4, | ||
| val schedule5: Color = Schedule5, | ||
| val point: Color = Point, | ||
|
|
||
| val gray100: Color = Gray100, | ||
| val gray200: Color = Gray200, | ||
| val gray300: Color = Gray300, | ||
| val gray400: Color = Gray400, | ||
| val gray500: Color = Gray500, | ||
| val gray600: Color = Gray600, | ||
| val gray700: Color = Gray700, | ||
| val gray800: Color = Gray800, | ||
| val gray900: Color = Gray900, | ||
| ) | ||
|
|
||
| val defaultKieroColors = KieroColors() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,61 @@ | ||
| package com.kiero.core.designsystem.theme | ||
|
|
||
| import androidx.compose.material3.MaterialTheme | ||
| import androidx.compose.material3.lightColorScheme | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.CompositionLocalProvider | ||
| import androidx.compose.runtime.ReadOnlyComposable | ||
| import androidx.compose.runtime.staticCompositionLocalOf | ||
|
|
||
| val localKieroColors = staticCompositionLocalOf { defaultKieroColors } | ||
|
|
||
| val localKieroTypography = staticCompositionLocalOf { defaultKieroTypography } | ||
|
|
||
| private val LightColorScheme = lightColorScheme( | ||
| primary = Black, | ||
| background = White, | ||
| surface = White, | ||
| onPrimary = White, | ||
| onBackground = Black, | ||
| onSurface = Black | ||
| ) | ||
|
|
||
| object KieroTheme { | ||
| val colors: KieroColors | ||
| @Composable | ||
| @ReadOnlyComposable | ||
| get() = localKieroColors.current | ||
|
|
||
| val typography: KieroTypography | ||
| @Composable | ||
| @ReadOnlyComposable | ||
| get() = localKieroTypography.current | ||
| } | ||
|
|
||
| @Composable | ||
| fun ProvideKieroColorsAndTypography( | ||
| colors: KieroColors, | ||
| typography: KieroTypography, | ||
| content: @Composable () -> Unit | ||
| ) { | ||
| CompositionLocalProvider( | ||
| localKieroColors provides colors, | ||
| localKieroTypography provides typography, | ||
| content = content | ||
| ) | ||
| } | ||
|
|
||
| @Composable | ||
| fun KieroTheme( | ||
| content: @Composable () -> Unit | ||
| ) { | ||
| ProvideKieroColorsAndTypography( | ||
| colors = defaultKieroColors, | ||
| typography = defaultKieroTypography | ||
| ) { | ||
| MaterialTheme( | ||
| colorScheme = LightColorScheme, | ||
| content = content | ||
| ) | ||
| } | ||
| } | ||
|
Member
There was a problem hiding this comment. p3) 피그마 DS 보다가 생각난건데용 별건아니고... private object TypographyDefaults {
val RegularLetterSpacing = (-0.005).em
val RegularLineHeight = 1.3.em
val SemiBoldLetterSpacing = (-0.01).em
val SemiBoldLineHeight = 1.4.em
val BoldLetterSpacing = (-0.01).em
val BoldLineHeight = 1.4.em
} body1 = TextStyle(
fontFamily = NotoSansFont.regular,
fontSize = 18.sp,
letterSpacing = TypographyDefaults.RegularLetterSpacing,
lineHeight = TypographyDefaults.RegularLineHeight,
),
//사용할 때 이런식으로?
Member
There was a problem hiding this comment. 추가적으로 만약 어떻게 해도 뭔가 디자인과 안맞는다 싶으면 TextStyle의 파라미터 중 하나인 platformStyle = PlatformTextStyle(
includeFontPadding = false
),
을 통해 안드로이드 폰트 기본 패딩을 제거해보고 사용해보셔도 좋을 것 같아요 이거도 혹시나 필요하다면 이런게 있다 정도만 생각해셔도 좋을 것 같아요! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,165 @@ | ||
| package com.kiero.core.designsystem.theme | ||
|
|
||
| import androidx.compose.runtime.Immutable | ||
| import androidx.compose.ui.text.PlatformTextStyle | ||
| import androidx.compose.ui.text.TextStyle | ||
| import androidx.compose.ui.text.font.Font | ||
| import androidx.compose.ui.text.font.FontFamily | ||
| import androidx.compose.ui.unit.em | ||
| import androidx.compose.ui.unit.sp | ||
| import com.kiero.R | ||
|
|
||
| object NotoSansFont { | ||
| val semiBold = FontFamily(Font(R.font.notosans_semibold)) | ||
| val bold = FontFamily(Font(R.font.notosans_bold)) | ||
| val regular = FontFamily(Font(R.font.notosans_regular)) | ||
| } | ||
|
|
||
| private object TypographyDefaults { | ||
| val RegularLetterSpacing = (-0.005).em | ||
| val RegularLineHeight = 1.3.em | ||
|
|
||
| val SemiBoldLetterSpacing = (-0.01).em | ||
| val SemiBoldLineHeight = 1.4.em | ||
|
|
||
| val BoldLetterSpacing = (-0.01).em | ||
| val BoldLineHeight = 1.4.em | ||
|
|
||
| val PlatformStyle = PlatformTextStyle( | ||
| includeFontPadding = false | ||
| ) | ||
| } | ||
|
|
||
| sealed interface TypographyTokens { | ||
| @Immutable | ||
| data class Regular( | ||
| val body1: TextStyle, | ||
| val body2: TextStyle, | ||
| val body3: TextStyle, | ||
| val body4: TextStyle, | ||
| val body5: TextStyle, | ||
| ) | ||
|
|
||
| @Immutable | ||
| data class SemiBold( | ||
| val title1: TextStyle, | ||
| val title2: TextStyle, | ||
| val title3: TextStyle, | ||
| val title4: TextStyle, | ||
| ) | ||
|
|
||
| @Immutable | ||
| data class Bold( | ||
| val headLine1: TextStyle, | ||
| val headLine2: TextStyle, | ||
| val headLine3: TextStyle, | ||
| val headLine4: TextStyle, | ||
| ) | ||
| } | ||
|
|
||
| @Immutable | ||
| data class KieroTypography( | ||
| val regular: TypographyTokens.Regular, | ||
| val semiBold: TypographyTokens.SemiBold, | ||
| val bold: TypographyTokens.Bold, | ||
| ) | ||
|
|
||
| val defaultKieroTypography = KieroTypography( | ||
| regular = TypographyTokens.Regular( | ||
| body1 = TextStyle( | ||
| fontFamily = NotoSansFont.regular, | ||
| fontSize = 18.sp, | ||
| letterSpacing = TypographyDefaults.RegularLetterSpacing, | ||
| lineHeight = TypographyDefaults.RegularLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| body2 = TextStyle( | ||
| fontFamily = NotoSansFont.regular, | ||
| fontSize = 16.sp, | ||
| letterSpacing = TypographyDefaults.RegularLetterSpacing, | ||
| lineHeight = TypographyDefaults.RegularLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| body3 = TextStyle( | ||
| fontFamily = NotoSansFont.regular, | ||
| fontSize = 14.sp, | ||
| letterSpacing = TypographyDefaults.RegularLetterSpacing, | ||
| lineHeight = TypographyDefaults.RegularLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| body4 = TextStyle( | ||
| fontFamily = NotoSansFont.regular, | ||
| fontSize = 12.sp, | ||
| letterSpacing = TypographyDefaults.RegularLetterSpacing, | ||
| lineHeight = TypographyDefaults.RegularLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| body5 = TextStyle( | ||
| fontFamily = NotoSansFont.regular, | ||
| fontSize = 10.sp, | ||
| letterSpacing = TypographyDefaults.RegularLetterSpacing, | ||
| lineHeight = TypographyDefaults.RegularLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| ), | ||
| semiBold = TypographyTokens.SemiBold( | ||
| title1 = TextStyle( | ||
| fontFamily = NotoSansFont.semiBold, | ||
| fontSize = 22.sp, | ||
| letterSpacing = TypographyDefaults.SemiBoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.SemiBoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| title2 = TextStyle( | ||
| fontFamily = NotoSansFont.semiBold, | ||
| fontSize = 20.sp, | ||
| letterSpacing = TypographyDefaults.SemiBoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.SemiBoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| title3 = TextStyle( | ||
| fontFamily = NotoSansFont.semiBold, | ||
| fontSize = 16.sp, | ||
| letterSpacing = TypographyDefaults.SemiBoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.SemiBoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| title4 = TextStyle( | ||
| fontFamily = NotoSansFont.semiBold, | ||
| fontSize = 14.sp, | ||
| letterSpacing = TypographyDefaults.SemiBoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.SemiBoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| ), | ||
| bold = TypographyTokens.Bold( | ||
| headLine1 = TextStyle( | ||
| fontFamily = NotoSansFont.bold, | ||
| fontSize = 22.sp, | ||
| letterSpacing = TypographyDefaults.BoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.BoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| headLine2 = TextStyle( | ||
| fontFamily = NotoSansFont.bold, | ||
| fontSize = 20.sp, | ||
| letterSpacing = TypographyDefaults.BoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.BoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| headLine3 = TextStyle( | ||
| fontFamily = NotoSansFont.bold, | ||
| fontSize = 16.sp, | ||
| letterSpacing = TypographyDefaults.BoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.BoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ), | ||
| headLine4 = TextStyle( | ||
| fontFamily = NotoSansFont.bold, | ||
| fontSize = 14.sp, | ||
| letterSpacing = TypographyDefaults.BoldLetterSpacing, | ||
| lineHeight = TypographyDefaults.BoldLineHeight, | ||
| platformStyle = TypographyDefaults.PlatformStyle | ||
| ) | ||
| ) | ||
| ) |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
갓승재) LightTheme로 고정이니까, 명시적으로 적어준거 아주 좋은데요