Skip to content

Commit 5f5f788

Browse files
osugikojiosugikoji
committed
refactor: Adds design system tokens and set light and dark theme
1 parent 109ee1b commit 5f5f788

23 files changed

+941
-50
lines changed

‎sample/android/src/main/java/co/yml/ychat/android/ui/theme/Colors.kt‎

Lines changed: 449 additions & 0 deletions
Large diffs are not rendered by default.

‎sample/android/src/main/java/co/yml/ychat/android/ui/theme/Dimens.kt‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
package co.yml.ychat.android.ui.theme
2+
3+
import androidx.compose.runtime.Stable
4+
import androidx.compose.ui.unit.Dp
5+
import androidx.compose.ui.unit.dp
6+
7+
object Dimens {
8+
@Stable
9+
val XXXS: Dp
10+
get() = 2.dp
11+
12+
@Stable
13+
val XXS: Dp
14+
get() = 4.dp
15+
16+
@Stable
17+
val XS: Dp
18+
get() = 8.dp
19+
20+
@Stable
21+
val SM: Dp
22+
get() = 12.dp
23+
24+
@Stable
25+
val MD: Dp
26+
get() = 16.dp
27+
28+
@Stable
29+
val XM: Dp
30+
get() = 24.dp
31+
32+
@Stable
33+
val BG: Dp
34+
get() = 32.dp
35+
36+
@Stable
37+
val LG: Dp
38+
get() = 40.dp
39+
40+
@Stable
41+
val XL: Dp
42+
get() = 48.dp
43+
44+
@Stable
45+
val XXL: Dp
46+
get() = 56.dp
47+
48+
@Stable
49+
val XXXL: Dp
50+
get() = 64.dp
51+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/theme/Icons.kt‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
package co.yml.ychat.android.ui.theme
2+
3+
import androidx.compose.material.IconButton as MaterialIconButton
4+
import androidx.annotation.DrawableRes
5+
import androidx.compose.foundation.background
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.material.Icon
9+
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.res.painterResource
13+
import androidx.compose.ui.tooling.preview.Preview
14+
import co.yml.ychat.android.R
15+
16+
sealed class Icons(@DrawableRes private val imageResource: Int) {
17+
18+
object ChatBubbleOutline : Icons(R.drawable.ic_chat_bubble_outline)
19+
object Model : Icons(R.drawable.ic_model)
20+
object Text : Icons(R.drawable.ic_text)
21+
object Image : Icons(R.drawable.ic_image)
22+
object Audio : Icons(R.drawable.ic_audio)
23+
object Menu : Icons(R.drawable.ic_menu)
24+
object Send : Icons(R.drawable.ic_send)
25+
object Bot : Icons(R.drawable.ic_bot)
26+
object Warning : Icons(R.drawable.ic_warning)
27+
object WarningOutline : Icons(R.drawable.ic_warning_outline)
28+
object Settings: Icons(R.drawable.ic_settings)
29+
object Edit: Icons(R.drawable.ic_edit)
30+
object Construction: Icons(R.drawable.ic_construction)
31+
32+
@Composable
33+
fun Icon(
34+
modifier: Modifier = Modifier,
35+
tint: Color = YChatTheme.colors.icon1,
36+
) {
37+
Icon(
38+
painter = painterResource(id = imageResource),
39+
contentDescription = null,
40+
tint = tint,
41+
modifier = modifier,
42+
)
43+
}
44+
45+
@Composable
46+
fun IconButton(
47+
modifier: Modifier = Modifier,
48+
tint: Color = YChatTheme.colors.icon1,
49+
enabled: Boolean = true,
50+
onClick: () -> Unit,
51+
) {
52+
MaterialIconButton(onClick, modifier, enabled) {
53+
this.Icon(tint = tint)
54+
}
55+
}
56+
}
57+
58+
@Preview
59+
@Composable
60+
private fun IconPreview() {
61+
YChatTheme(true) {
62+
Column(
63+
modifier = Modifier
64+
.fillMaxWidth()
65+
.background(YChatTheme.colors.background),
66+
) {
67+
Icons.ChatBubbleOutline.Icon()
68+
Icons.Model.Icon()
69+
Icons.Text.Icon()
70+
Icons.Image.Icon()
71+
Icons.Audio.Icon()
72+
Icons.Menu.Icon()
73+
Icons.Send.Icon()
74+
Icons.Bot.Icon()
75+
Icons.Warning.Icon()
76+
Icons.WarningOutline.Icon()
77+
Icons.Settings.Icon()
78+
Icons.Edit.Icon()
79+
Icons.Construction.Icon()
80+
}
81+
}
82+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/theme/Theme.kt‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package co.yml.ychat.android.ui.theme
2+
3+
import androidx.compose.material.Colors as MaterialColors
4+
import androidx.compose.foundation.isSystemInDarkTheme
5+
import androidx.compose.material.MaterialTheme
6+
import androidx.compose.runtime.Composable
7+
import androidx.compose.ui.graphics.Color
8+
9+
object YChatTheme {
10+
val colors: Colors
11+
@Composable
12+
get() = LocalColors.current
13+
}
14+
15+
@Composable
16+
fun YChatTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
17+
val colors = if (darkTheme) DarkColors else LightColors
18+
ProvideColors(colors = colors) {
19+
MaterialTheme(
20+
colors = MaterialColors(colors, isLight = !darkTheme),
21+
content = content
22+
)
23+
}
24+
}
25+
26+
@Composable
27+
private fun MaterialColors(colors: Colors, isLight: Boolean): MaterialColors {
28+
return MaterialColors(
29+
primary = colors.primary1,
30+
primaryVariant = colors.primary1,
31+
secondary = colors.primary2,
32+
secondaryVariant = colors.primary2,
33+
background = colors.background,
34+
surface = colors.onAccent,
35+
error = Color.Red1,
36+
onPrimary = colors.onAccent,
37+
onSecondary = colors.onAccent,
38+
onBackground = colors.accent,
39+
onSurface = colors.accent,
40+
onError = Color.White1,
41+
isLight
42+
)
43+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/theme/Typography.kt‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
package co.yml.ychat.android.ui.theme
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.material.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.graphics.Color
10+
import androidx.compose.ui.text.TextStyle
11+
import androidx.compose.ui.text.font.FontStyle
12+
import androidx.compose.ui.text.font.FontWeight
13+
import androidx.compose.ui.text.style.TextAlign
14+
import androidx.compose.ui.tooling.preview.Preview
15+
import androidx.compose.ui.unit.sp
16+
17+
sealed class TypographyStyle(private val textStyle: TextStyle) {
18+
19+
object DisplayTitle : TypographyStyle(
20+
TextStyle(
21+
fontWeight = FontWeight.Medium,
22+
fontSize = 19.sp
23+
)
24+
)
25+
26+
object DisplayBody : TypographyStyle(
27+
TextStyle(
28+
fontWeight = FontWeight.Light,
29+
fontSize = 19.sp
30+
)
31+
)
32+
33+
object LargeTitle : TypographyStyle(
34+
TextStyle(
35+
fontWeight = FontWeight.Medium,
36+
fontSize = 17.sp
37+
)
38+
)
39+
40+
object LargeBody : TypographyStyle(
41+
TextStyle(
42+
fontWeight = FontWeight.Light,
43+
fontSize = 17.sp
44+
)
45+
)
46+
47+
object MediumTitle : TypographyStyle(
48+
TextStyle(
49+
fontWeight = FontWeight.Bold,
50+
fontSize = 15.sp
51+
)
52+
)
53+
54+
object MediumBody : TypographyStyle(
55+
TextStyle(
56+
fontWeight = FontWeight.Normal,
57+
fontSize = 15.sp
58+
)
59+
)
60+
61+
object SmallTitle : TypographyStyle(
62+
TextStyle(
63+
fontWeight = FontWeight.Bold,
64+
fontSize = 13.sp
65+
)
66+
)
67+
68+
object SmallBody : TypographyStyle(
69+
TextStyle(
70+
fontWeight = FontWeight.Normal,
71+
fontSize = 13.sp
72+
)
73+
)
74+
75+
object ExtraSmallTitle : TypographyStyle(
76+
TextStyle(
77+
fontWeight = FontWeight.Bold,
78+
fontSize = 11.sp
79+
)
80+
)
81+
82+
object ExtraSmallBody : TypographyStyle(
83+
TextStyle(
84+
fontWeight = FontWeight.Normal,
85+
fontSize = 11.sp,
86+
fontStyle = FontStyle.Italic,
87+
)
88+
)
89+
90+
@Composable
91+
fun Text(
92+
text: String,
93+
modifier: Modifier = Modifier,
94+
color: Color = YChatTheme.colors.text1,
95+
textAlign: TextAlign? = null,
96+
) {
97+
Text(
98+
text = text,
99+
color = color,
100+
style = textStyle,
101+
modifier = modifier,
102+
textAlign = textAlign
103+
)
104+
}
105+
106+
}
107+
108+
@Preview
109+
@Composable
110+
private fun TypographyPreview() {
111+
YChatTheme {
112+
Column(
113+
modifier = Modifier
114+
.fillMaxWidth()
115+
.background(YChatTheme.colors.background),
116+
) {
117+
TextPreview(TypographyStyle.DisplayTitle)
118+
TextPreview(TypographyStyle.DisplayBody)
119+
TextPreview(TypographyStyle.LargeTitle)
120+
TextPreview(TypographyStyle.LargeBody)
121+
TextPreview(TypographyStyle.MediumTitle)
122+
TextPreview(TypographyStyle.MediumBody)
123+
TextPreview(TypographyStyle.SmallTitle)
124+
TextPreview(TypographyStyle.SmallBody)
125+
TextPreview(TypographyStyle.ExtraSmallTitle)
126+
TextPreview(TypographyStyle.ExtraSmallBody)
127+
}
128+
}
129+
}
130+
131+
@Composable
132+
private fun TextPreview(typographyStyle: TypographyStyle) {
133+
typographyStyle.Text(text = typographyStyle::class.simpleName.orEmpty())
134+
}

‎sample/android/src/main/res/drawable/ic_audio.xml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24">
6+
<group>
7+
<clip-path android:pathData="M0,0h24v24h-24z" />
8+
<path
9+
android:fillAlpha="0.87"
10+
android:fillColor="#000000"
11+
android:pathData="M12,3V13.55C11.41,13.21 10.73,13 10,13C7.79,13 6,14.79 6,17C6,19.21 7.79,21 10,21C12.21,21 14,19.21 14,17V7H18V3H12ZM10,19C8.9,19 8,18.1 8,17C8,15.9 8.9,15 10,15C11.1,15 12,15.9 12,17C12,18.1 11.1,19 10,19Z" />
12+
</group>
13+
</vector>

‎sample/android/src/main/res/drawable/ic_bot.xml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24">
6+
<path
7+
android:fillAlpha="0.87"
8+
android:fillColor="#000000"
9+
android:pathData="M21.928,11.607C21.726,11.119 21.293,11.002 21,10.974V8C21,6.897 20.103,6 19,6H13V4.61C13.305,4.336 13.5,3.942 13.5,3.5C13.5,3.102 13.342,2.721 13.061,2.439C12.779,2.158 12.398,2 12,2C11.602,2 11.221,2.158 10.939,2.439C10.658,2.721 10.5,3.102 10.5,3.5C10.5,3.942 10.695,4.336 11,4.61V6H5C3.897,6 3,6.897 3,8V10.997L2.918,11.003C2.666,11.021 2.43,11.134 2.258,11.319C2.086,11.504 1.99,11.747 1.99,12V14C1.99,14.265 2.095,14.52 2.283,14.707C2.47,14.895 2.725,15 2.99,15H3V20C3,21.103 3.897,22 5,22H19C20.103,22 21,21.103 21,20V15C21.265,15 21.52,14.895 21.707,14.707C21.895,14.52 22,14.265 22,14V12.062C22.011,11.907 21.987,11.751 21.928,11.607ZM5,20V8H19L19.001,11.996L19,12V14L19.001,14.005L19.002,20H5Z" />
10+
<path
11+
android:fillAlpha="0.87"
12+
android:fillColor="#000000"
13+
android:pathData="M8.5,14C9.328,14 10,13.105 10,12C10,10.895 9.328,10 8.5,10C7.672,10 7,10.895 7,12C7,13.105 7.672,14 8.5,14Z" />
14+
<path
15+
android:fillAlpha="0.87"
16+
android:fillColor="#000000"
17+
android:pathData="M15.5,14C16.328,14 17,13.105 17,12C17,10.895 16.328,10 15.5,10C14.672,10 14,10.895 14,12C14,13.105 14.672,14 15.5,14Z" />
18+
<path
19+
android:fillAlpha="0.87"
20+
android:fillColor="#000000"
21+
android:pathData="M8,16H16V18H8V16Z" />
22+
</vector>

‎sample/android/src/main/res/drawable/ic_chat.xml‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎sample/android/src/main/res/drawable/ic_chat_bubble_outline.xml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24">
6+
<group>
7+
<clip-path android:pathData="M0,0h24v24h-24z" />
8+
<path
9+
android:fillAlpha="0.87"
10+
android:fillColor="#000000"
11+
android:pathData="M20,2H4C2.9,2 2,2.9 2,4V22L6,18H20C21.1,18 22,17.1 22,16V4C22,2.9 21.1,2 20,2ZM20,16H6L4,18V4H20V16Z" />
12+
</group>
13+
</vector>

‎sample/android/src/main/res/drawable/ic_construction.xml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24">
6+
<group>
7+
<clip-path
8+
android:pathData="M0,0h24v24h-24z"/>
9+
<path
10+
android:pathData="M15.904,13.051L13.783,15.172L19.779,21.168L21.9,19.047L15.904,13.051Z"
11+
android:fillColor="#000000"/>
12+
<path
13+
android:pathData="M17.5,10C19.43,10 21,8.43 21,6.5C21,5.92 20.84,5.38 20.59,4.9L17.89,7.6L16.4,6.11L19.1,3.41C18.62,3.16 18.08,3 17.5,3C15.57,3 14,4.57 14,6.5C14,6.91 14.08,7.3 14.21,7.66L12.36,9.51L10.58,7.73L11.29,7.02L9.88,5.61L12,3.49C10.83,2.32 8.93,2.32 7.76,3.49L4.22,7.03L5.63,8.44H2.81L2.1,9.15L5.64,12.69L6.35,11.98V9.15L7.76,10.56L8.47,9.85L10.25,11.63L2.84,19.04L4.96,21.16L16.34,9.79C16.7,9.92 17.09,10 17.5,10Z"
14+
android:fillColor="#000000"/>
15+
</group>
16+
</vector>

0 commit comments

Comments
 (0)