Skip to content

Commit 7659b56

Browse files
andremionandremion
authored
Align Compose theming with Figma Design System via unified StreamDesign tokens (#6182)
* Create StreamDimens namespace * Reference the new color System * Typography token migration * Remove unused component themes * Use Stream tokens for shapes * Remove StreamShapes * Replace `StreamColors` with `StreamDesign.Colors` across the library and samples * Replace `StreamTypography` with `StreamDesign.Typography` across the library and samples * Replace `StreamDimens` with `StreamDesign.Dimens` across the library and samples * Remove `StreamKeyboardBehaviour` and always close keyboard on attachment picker open * Update highlight background colors in `StreamDesign` * Fix StreamSnackbar content colors * Update colors after audit * Update references after audit * Update snapshots * Add missed color tokens * Remove StreamDesign.Dimens and inline its usages * Leftover * Make derived colors as body properties
1 parent 72945a7 commit 7659b56

406 files changed

Lines changed: 1995 additions & 2969 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎stream-chat-android-compose-sample/detekt-baseline.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<ID>LongMethod:MessagesActivity.kt$MessagesActivity$@Composable fun MyCustomUi()</ID>
77
<ID>MagicNumber:ChannelsActivity.kt$ChannelsActivity$0.5f</ID>
88
<ID>MagicNumber:MessagesActivity.kt$MessagesActivity$7f</ID>
9-
<ID>MaxLineLength:MessagesActivity.kt$MessagesActivity$targetValue = if (isFullScreenContent) screenHeight.dp else ChatTheme.dimens.attachmentsPickerHeight</ID>
9+
<ID>MaxLineLength:MessagesActivity.kt$MessagesActivity$targetValue = if (isFullScreenContent) screenHeight.dp else 350.dp</ID>
1010
<ID>UnusedPrivateMember:ChannelsActivity.kt$ChannelsActivity$@Composable private fun MyCustomUi()</ID>
1111
<ID>UnusedPrivateMember:ChannelsActivity.kt$ChannelsActivity$@Composable private fun MyCustomUiSimplified()</ID>
1212
</CurrentIssues>

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/feature/channel/add/AddChannelScreen.kt‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -152,13 +152,13 @@ private fun AddChannelToolbar(
152152
Column(
153153
modifier = Modifier
154154
.fillMaxWidth()
155-
.background(ChatTheme.colors.barsBackground),
155+
.background(ChatTheme.colors.backgroundElevationElevation1),
156156
) {
157157
AppToolbar(title = stringResource(id = R.string.add_channel_title), onBack = onBack, elevation = 0.dp)
158158
Row(
159159
modifier = Modifier
160160
.fillMaxWidth()
161-
.background(ChatTheme.colors.barsBackground)
161+
.background(ChatTheme.colors.backgroundElevationElevation1)
162162
.padding(horizontal = 16.dp),
163163
verticalAlignment = Alignment.CenterVertically,
164164
horizontalArrangement = Arrangement.SpaceBetween,
@@ -170,7 +170,7 @@ private fun AddChannelToolbar(
170170
.padding(top = 20.dp),
171171
text = stringResource(id = R.string.add_channel_to),
172172
fontSize = 14.sp,
173-
color = ChatTheme.colors.textLowEmphasis,
173+
color = ChatTheme.colors.textSecondary,
174174
)
175175
Spacer(modifier = Modifier.size(8.dp))
176176
// Selected users + Search field
@@ -194,14 +194,14 @@ private fun AddChannelToolbar(
194194
Icon(
195195
painter = painterResource(iconId),
196196
contentDescription = null,
197-
tint = ChatTheme.colors.textLowEmphasis,
197+
tint = ChatTheme.colors.textSecondary,
198198
)
199199
}
200200
}
201-
HorizontalDivider(color = ChatTheme.colors.borders, thickness = 1.dp)
201+
HorizontalDivider(color = ChatTheme.colors.borderCoreDefault, thickness = 1.dp)
202202
if (!hasSelectedUsers) {
203203
CreateGroupSection(onClick = onCreateGroupClick)
204-
HorizontalDivider(color = ChatTheme.colors.borders, thickness = 1.dp)
204+
HorizontalDivider(color = ChatTheme.colors.borderCoreDefault, thickness = 1.dp)
205205
}
206206
}
207207
}
@@ -216,7 +216,7 @@ private fun CreateGroupSection(onClick: () -> Unit) {
216216
Row(
217217
modifier = Modifier
218218
.fillMaxWidth()
219-
.background(ChatTheme.colors.barsBackground)
219+
.background(ChatTheme.colors.backgroundElevationElevation1)
220220
.clickable(
221221
interactionSource = remember { MutableInteractionSource() },
222222
indication = ripple(),
@@ -226,7 +226,7 @@ private fun CreateGroupSection(onClick: () -> Unit) {
226226
verticalAlignment = Alignment.CenterVertically,
227227
) {
228228
Icon(
229-
tint = ChatTheme.colors.primaryAccent,
229+
tint = ChatTheme.colors.accentPrimary,
230230
painter = painterResource(id = R.drawable.ic_create_group),
231231
contentDescription = null,
232232
)
@@ -235,7 +235,7 @@ private fun CreateGroupSection(onClick: () -> Unit) {
235235
text = stringResource(id = R.string.add_channel_create_group),
236236
fontSize = 14.sp,
237237
fontWeight = FontWeight.Bold,
238-
color = ChatTheme.colors.textHighEmphasis,
238+
color = ChatTheme.colors.textPrimary,
239239
)
240240
}
241241
}
@@ -255,7 +255,7 @@ private fun SelectedUsersList(
255255
FlowRow(
256256
modifier = Modifier
257257
.fillMaxWidth()
258-
.background(ChatTheme.colors.barsBackground)
258+
.background(ChatTheme.colors.backgroundElevationElevation1)
259259
.padding(12.dp),
260260
horizontalArrangement = Arrangement.spacedBy(4.dp),
261261
verticalArrangement = Arrangement.spacedBy(4.dp),
@@ -282,7 +282,7 @@ private fun SelectedUserChip(
282282
) {
283283
SuggestionChip(
284284
modifier = Modifier.height(32.dp),
285-
colors = SuggestionChipDefaults.suggestionChipColors(containerColor = ChatTheme.colors.appBackground),
285+
colors = SuggestionChipDefaults.suggestionChipColors(containerColor = ChatTheme.colors.backgroundCoreApp),
286286
shape = RoundedCornerShape(16.dp),
287287
icon = {
288288
UserAvatar(
@@ -296,7 +296,7 @@ private fun SelectedUserChip(
296296
Text(
297297
text = user.name,
298298
fontSize = 12.sp,
299-
color = ChatTheme.colors.textHighEmphasis,
299+
color = ChatTheme.colors.textPrimary,
300300
)
301301
},
302302
)

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/feature/channel/add/component/SearchUserResultsContent.kt‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ private fun SearchUserLoadingContent(padding: PaddingValues) {
106106
modifier = Modifier
107107
.padding(padding)
108108
.fillMaxSize()
109-
.background(ChatTheme.colors.appBackground),
109+
.background(ChatTheme.colors.backgroundCoreApp),
110110
contentAlignment = Alignment.Center,
111111
) {
112-
CircularProgressIndicator(strokeWidth = 2.dp, color = ChatTheme.colors.primaryAccent)
112+
CircularProgressIndicator(strokeWidth = 2.dp, color = ChatTheme.colors.accentPrimary)
113113
}
114114
}
115115

@@ -124,7 +124,7 @@ private fun SearchUserEmptyContent(padding: PaddingValues) {
124124
modifier = Modifier
125125
.padding(padding)
126126
.fillMaxSize()
127-
.background(ChatTheme.colors.appBackground),
127+
.background(ChatTheme.colors.backgroundCoreApp),
128128
verticalArrangement = Arrangement.Center,
129129
horizontalAlignment = Alignment.CenterHorizontally,
130130
) {
@@ -135,7 +135,7 @@ private fun SearchUserEmptyContent(padding: PaddingValues) {
135135
Text(
136136
text = stringResource(id = R.string.add_channel_no_matches),
137137
fontSize = 14.sp,
138-
color = ChatTheme.colors.textLowEmphasis,
138+
color = ChatTheme.colors.textSecondary,
139139
)
140140
}
141141
}
@@ -165,7 +165,7 @@ private fun SearchUserResultList(
165165
modifier = Modifier
166166
.padding(padding)
167167
.fillMaxSize()
168-
.background(ChatTheme.colors.appBackground),
168+
.background(ChatTheme.colors.backgroundCoreApp),
169169
state = listState,
170170
) {
171171
users.forEach { (group, users) ->
@@ -178,7 +178,7 @@ private fun SearchUserResultList(
178178
isSelected = selectedUsers.contains(user),
179179
onUserClick = onUserClick,
180180
)
181-
HorizontalDivider(color = ChatTheme.colors.borders, thickness = 1.dp)
181+
HorizontalDivider(color = ChatTheme.colors.borderCoreDefault, thickness = 1.dp)
182182
}
183183
}
184184
if (isLoadingMore) {
@@ -208,7 +208,7 @@ private fun GroupingItem(group: Char) {
208208
},
209209
fontSize = 14.sp,
210210
fontWeight = FontWeight.Bold,
211-
color = ChatTheme.colors.textLowEmphasis,
211+
color = ChatTheme.colors.textSecondary,
212212
modifier = Modifier.padding(8.dp),
213213
)
214214
}
@@ -231,7 +231,7 @@ private fun SearchUserResultItem(
231231
modifier = Modifier
232232
.fillMaxWidth()
233233
.height(64.dp)
234-
.background(ChatTheme.colors.appBackground)
234+
.background(ChatTheme.colors.backgroundCoreApp)
235235
.clickable(
236236
interactionSource = remember { MutableInteractionSource() },
237237
indication = ripple(),
@@ -253,17 +253,17 @@ private fun SearchUserResultItem(
253253
text = user.name,
254254
fontWeight = FontWeight.Bold,
255255
fontSize = 14.sp,
256-
color = ChatTheme.colors.textHighEmphasis,
256+
color = ChatTheme.colors.textPrimary,
257257
)
258258
Text(
259259
text = user.getLastSeenText(context),
260260
fontSize = 12.sp,
261-
color = ChatTheme.colors.textLowEmphasis,
261+
color = ChatTheme.colors.textSecondary,
262262
)
263263
}
264264
if (isSelected) {
265265
Icon(
266-
tint = ChatTheme.colors.primaryAccent,
266+
tint = ChatTheme.colors.accentPrimary,
267267
painter = painterResource(id = R.drawable.ic_check_filled),
268268
contentDescription = null,
269269
)
@@ -282,6 +282,6 @@ private fun LoadingMoreItem() {
282282
.padding(8.dp),
283283
contentAlignment = Alignment.Center,
284284
) {
285-
CircularProgressIndicator(strokeWidth = 2.dp, color = ChatTheme.colors.primaryAccent)
285+
CircularProgressIndicator(strokeWidth = 2.dp, color = ChatTheme.colors.accentPrimary)
286286
}
287287
}

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/feature/channel/add/component/SearchUserTextField.kt‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,21 @@ fun SearchUserTextField(
4747
singleLine = true,
4848
maxLines = 1,
4949
colors = TextFieldDefaults.colors(
50-
focusedContainerColor = ChatTheme.colors.barsBackground,
51-
unfocusedContainerColor = ChatTheme.colors.barsBackground,
50+
focusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
51+
unfocusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
5252
focusedIndicatorColor = Color.Transparent,
5353
unfocusedIndicatorColor = Color.Transparent,
5454
disabledIndicatorColor = Color.Transparent,
55-
focusedTextColor = ChatTheme.colors.textHighEmphasis,
56-
unfocusedTextColor = ChatTheme.colors.textHighEmphasis,
57-
cursorColor = ChatTheme.colors.primaryAccent,
55+
focusedTextColor = ChatTheme.colors.textPrimary,
56+
unfocusedTextColor = ChatTheme.colors.textPrimary,
57+
cursorColor = ChatTheme.colors.accentPrimary,
5858
),
5959
onValueChange = onQueryChanged,
6060
placeholder = {
6161
Text(
6262
text = stringResource(id = R.string.add_channel_type_name),
6363
fontSize = 14.sp,
64-
color = ChatTheme.colors.textLowEmphasis,
64+
color = ChatTheme.colors.textSecondary,
6565
)
6666
},
6767
leadingIcon = leadingContent,

0 commit comments

Comments
 (0)