Feature/mz 148 typo color theme #10

jinukeu · 2023-12-16T07:37:53Z

💡 Issue

Resolved: [Chore] Typo, Color, Theme #9

🌱 Key changes

Typo
Color
Spacing
Theme

✅ To Reviewers

사용 예시입니다.

// Typo
@Preview
@Composable
fun Sample() {
    SusuTheme {
        Text(
            text = "title_xxxxl",
            style = SusuTheme.typography.title_xxxxl,
        )
    }
}

// Color
MaterialTheme(
            colorScheme = lightColorScheme(
                background = Gray15,
            ),
            content = content,
        )

Typography ... 카멜케이스(titleXxxxl)랑 스네이크케이스(title_xxxxl) 고민하다가 가독성이 더 좋아보이는 스네이크케이스로 했습니다.

@Suppress("ConstructorParameterNaming")
@Immutable
data class SusuTypography(
    val title_xxxxl: TextStyle,
    val title_xxxl: TextStyle,
    val title_xxl: TextStyle,

deteKt의 ConstructorParameterNaming를 disable하기 위해 @Suppress("ConstructorParameterNaming") 추가했습니다.

참고한 블로그보고 컬러 정의해놨습니다! background는 디자이너분이 따로 이름을 지정하지 않았으나 지금까지 나온 화면으로는 Gray10, 15만 있더라구요!? 그래서 background10, background15로 일단 지정했습니다!

Dark, Light 테마 변경 대응은 지금 시점에서 불필요하다 생각해하지 않았습니다. 만약 한다면 아래 블로그 참고할거같아요! 다시 한번 코드 리뷰 부탁드림둥!
https://velog.io/@vov3616/Compose-Custom-Theme-%EB%A7%8C%EB%93%A4%EA%B8%B0

해당 PR이 Merge되면 component에서 컴포넌트 작업하시면 됩니다~!

📸 스크린샷

스크린샷
파일첨부바람

yangsooplus

확실히 스네이크 케이스가 눈에 확 들어오네요 👍

yangsooplus · 2023-12-16T08:53:17Z

core/designsystem/src/main/java/com/susu/core/designsystem/theme/Theme.kt

+        MaterialTheme(
+            colorScheme = lightColorScheme(
+                background = Gray15,
+            ),


일단 배경색만 MaterialTheme.colorScheme.background로 사용하고 다른 색상은 색상 이름 사용하면 되는걸까요?

네 맞아요! 근데 MaterialTheme.colorScheme.background 안써도 자동으로 지정될거에요 :)

yangsooplus · 2023-12-16T08:53:59Z

core/designsystem/src/main/java/com/susu/core/designsystem/theme/Typography.kt

+internal val pretendardFamily = FontFamily(
+    Font(R.font.pretendardbold, FontWeight.Bold),
+    Font(R.font.pretendardregular, FontWeight.Normal),
+)
+
+private val pretendardStyle = TextStyle(
+    fontFamily = pretendardFamily,
+    letterSpacing = TextUnit(-0.02f, TextUnitType.Sp),
+    platformStyle = PlatformTextStyle(
+        includeFontPadding = false,
+    ),
+    lineHeightStyle = LineHeightStyle(
+        alignment = LineHeightStyle.Alignment.Center,
+        trim = LineHeightStyle.Trim.None,
+    ),
+)


공통된 속성을 이렇게 묶어서 가독성이 좋아졌네요! 👍

jinukeu · 2023-12-16T09:05:14Z

피그마 확인해보니 일부 Color는 네이밍이 되어있더라구요!? (Primary(Orange60), Accent(Blue60), Error(Red60))
그래서 Primary, Accent, Error, Background만 스키마를 정의하려했는데 이렇게하면 나머지 Color는 어떻게 해야할지 애매하더라구요 ...

다른 분들 의견은 어떠신지 궁금합니다~!!

일부분만 schema를 정의해서 사용한다.
아니다. schema를 정의하지 않는다.
기타 의견 환영.
(저는 2번이에요 ㅎㅎ)

yangsooplus · 2023-12-16T09:20:51Z

전 1번 정해진 일부만 정의하면 좋겠습니다! 시안을 확인해보면 primary는 거의 모든 화면에서, accent도 꽤 많은 화면에서 사용하게 될 것처럼 보이네요 Error도 현재는 TextField Component에 사용되어 있지만 에러 발생 시의 UI 에서 자주 쓰일것 같고요

yangsooplus · 2023-12-16T09:23:43Z

그래서 Primary, Accent, Error, Background만 스키마를 정의하려했는데

아 난독 ㅈㅅ합니다 저도 저 4개는 스키마로 정의하고, 나머지는 정의하지 말자는 말이었습니다 ㅎㅎ;

syb8200 · 2023-12-16T09:44:11Z

흠..나머지 색상들이 좀 애매해지는 것 같긴한데.. Primary, Accent, Error, Background 얘네가 자주 사용될 것 같아서 얘네만 따로 정의하는게 좋을것 같아욥!

jinukeu · 2023-12-16T09:52:36Z

아하 그러면 두 분다 1번 의견 맞으시죠? (프라이머리, 악센트, 백그라운드, 에러만 스키마 지정)

yangsooplus · 2023-12-16T09:55:09Z

네넵!

jinukeu · 2023-12-16T11:15:42Z

참고한 블로그보고 컬러 정의해놨습니다! background는 디자이너분이 따로 이름을 지정하지 않았으나 지금까지 나온 화면으로는 Gray10, 15만 있더라구요!? 그래서 background10, background15로 일단 지정했습니다!

Dark, Light 테마 변경 대응은 지금 시점에서 불필요하다 생각해하지 않았습니다. 만약 한다면 아래 블로그 참고할거같아요! 다시 한번 코드 리뷰 부탁드림둥!
https://velog.io/@vov3616/Compose-Custom-Theme-%EB%A7%8C%EB%93%A4%EA%B8%B0

yangsooplus · 2023-12-16T11:22:07Z

디자인시스템 - Layout 파일에 Spacing도 정의되어 있는데, 첨부해주신 참고 포스트 처럼 테마에 정의하는건 어떻게 생각하세요?

jinukeu · 2023-12-16T11:23:59Z

디자인시스템 - Layout 파일에 Spacing도 정의되어 있는데, 첨부해주신 참고 포스트 처럼 테마에 정의하는건 어떻게 생각하세요?

어 요놈 못봤던거같은데?? 제가 놓쳤나봐요
잠깐 쉬었다가 추가하고 코멘트 남길게요 ... ㅎㅎ 꼼꼼하게 봐주셔서 감사해요 👍

jinukeu · 2023-12-16T12:22:02Z

추가했어요~!!

yangsooplus

👍 네이밍 xxx로 유지하길 잘했네요 spacing도 통일되니 편-안

syb8200 · 2023-12-16T12:49:04Z

확인했습니다!

jinukeu added 6 commits December 16, 2023 15:37

feat: Color 추가

b93b41e

feat: Typography 추가

589d88e

feat: SusuTheme 추가

b5089f9

feat: Sample 파일 추가

775f1b1

feat: ktlint format

7b47767

chore: SusuTypography @Suppress("ConstructorParameterNaming")

15f2ac7

jinukeu added the chore label Dec 16, 2023

jinukeu requested review from yangsooplus and syb8200 December 16, 2023 07:37

jinukeu self-assigned this Dec 16, 2023

yangsooplus approved these changes Dec 16, 2023

View reviewed changes

syb8200 approved these changes Dec 16, 2023

View reviewed changes

feat: SusuColorScheme 추가

af1e549

jinukeu requested review from yangsooplus and syb8200 December 16, 2023 11:15

feat: SusuSpacing 추가

8db2264

yangsooplus approved these changes Dec 16, 2023

View reviewed changes

syb8200 approved these changes Dec 16, 2023

View reviewed changes

jinukeu merged commit b9559cb into develop Dec 16, 2023
1 check passed

jinukeu deleted the feature/MZ-148-typo-color-theme branch December 22, 2023 02:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/mz 148 typo color theme #10

Feature/mz 148 typo color theme #10

jinukeu commented Dec 16, 2023 •

edited

Loading

yangsooplus left a comment

yangsooplus Dec 16, 2023

jinukeu Dec 16, 2023

yangsooplus Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus commented Dec 16, 2023 •

edited

Loading

yangsooplus commented Dec 16, 2023

syb8200 commented Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus commented Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus commented Dec 16, 2023

jinukeu commented Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus left a comment

syb8200 commented Dec 16, 2023

Feature/mz 148 typo color theme #10

Feature/mz 148 typo color theme #10

Conversation

jinukeu commented Dec 16, 2023 • edited Loading

💡 Issue

🌱 Key changes

✅ To Reviewers

📸 스크린샷

yangsooplus left a comment

Choose a reason for hiding this comment

yangsooplus Dec 16, 2023

Choose a reason for hiding this comment

jinukeu Dec 16, 2023

Choose a reason for hiding this comment

yangsooplus Dec 16, 2023

Choose a reason for hiding this comment

jinukeu commented Dec 16, 2023

yangsooplus commented Dec 16, 2023 • edited Loading

yangsooplus commented Dec 16, 2023

syb8200 commented Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus commented Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus commented Dec 16, 2023

jinukeu commented Dec 16, 2023

jinukeu commented Dec 16, 2023

yangsooplus left a comment

Choose a reason for hiding this comment

syb8200 commented Dec 16, 2023

jinukeu commented Dec 16, 2023 •

edited

Loading

yangsooplus commented Dec 16, 2023 •

edited

Loading