Skip to content

Commit 41ca6d8

Browse files
andremionandremion
authored
Align StreamDesign.Colors with Figma design token system (#6272)
* Add Chrome neutral color scale to `StreamDesign` and update `StreamPrimitiveColors`. * Introduce `ColorScale` and `ChromeScale` to `StreamDesign`. * Refactor `StreamDesign.Colors` to use `ColorScale` and `ChromeScale` objects. * Renames to match Figma in favor of traceability. * Remove unexisting in Figma `chipBg` and `composerBg` from `StreamDesign.Colors`. * Update to correct color references as per Figma designs * Color.Unspecified defaults were silently broken. Defaults were wrong for dark themes * Reorganize and update `StreamDesign.kt` color definitions. * Update chip color tokens in `StreamDesign` and `ReactionCountRow`. * Update `StreamDesign.kt` documentation based on Figma. * Move component-specific color properties (e.g., `badgeBgInverse`, `chatBgIncoming`, `controlRemoveBg`) from the primary constructor to derived properties with default values. * These files reference backgroundElevationElevation1 but the property was renamed to backgroundCoreElevation1 in the design token reorganization. * Use `brand` and `chrome` instead of direct `StreamPrimitiveColors` references as per Figma tokens * Change visibility of component color tokens in `StreamDesign.kt` from `public` to `internal`. * Move `chatPollProgressFillOutgoing`, `chatReplyIndicatorIncoming`, `chatReplyIndicatorOutgoing`, and `controlPlaybackThumbBgDefault` to the end of the `Colors` class and its default factory methods to match the updated organizational structure. * apiDump * Update documentation for `backgroundCoreOnAccent` in `StreamDesign.kt`. * Update `StreamDesign` to allow custom color scales in default color palette constructors. * Update `StreamDesign` to support color scale inversion and customizable default colors. * Make `chatPollProgressFillOutgoing`, `chatReplyIndicatorIncoming`, and `chatReplyIndicatorOutgoing` internal derived, and update `skeletonLoadingHighlight` values. * Update `backgroundCoreInverse` * Update snapshot files * apiDump * Make `controlPlaybackThumbBgDefault` internal derived.
1 parent 65d5819 commit 41ca6d8

99 files changed

Lines changed: 896 additions & 748 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/src/main/java/io/getstream/chat/android/compose/sample/feature/channel/add/AddChannelScreen.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,13 +148,13 @@ private fun AddChannelToolbar(
148148
Column(
149149
modifier = Modifier
150150
.fillMaxWidth()
151-
.background(ChatTheme.colors.backgroundElevationElevation1),
151+
.background(ChatTheme.colors.backgroundCoreElevation1),
152152
) {
153153
AppToolbar(title = stringResource(id = R.string.add_channel_title), onBack = onBack, elevation = 0.dp)
154154
Row(
155155
modifier = Modifier
156156
.fillMaxWidth()
157-
.background(ChatTheme.colors.backgroundElevationElevation1)
157+
.background(ChatTheme.colors.backgroundCoreElevation1)
158158
.padding(horizontal = 16.dp),
159159
verticalAlignment = Alignment.CenterVertically,
160160
horizontalArrangement = Arrangement.SpaceBetween,
@@ -212,7 +212,7 @@ private fun CreateGroupSection(onClick: () -> Unit) {
212212
Row(
213213
modifier = Modifier
214214
.fillMaxWidth()
215-
.background(ChatTheme.colors.backgroundElevationElevation1)
215+
.background(ChatTheme.colors.backgroundCoreElevation1)
216216
.clickable(
217217
interactionSource = remember { MutableInteractionSource() },
218218
indication = ripple(),
@@ -251,7 +251,7 @@ private fun SelectedUsersList(
251251
FlowRow(
252252
modifier = Modifier
253253
.fillMaxWidth()
254-
.background(ChatTheme.colors.backgroundElevationElevation1)
254+
.background(ChatTheme.colors.backgroundCoreElevation1)
255255
.padding(12.dp),
256256
horizontalArrangement = Arrangement.spacedBy(4.dp),
257257
verticalArrangement = Arrangement.spacedBy(4.dp),

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ fun SearchUserTextField(
4747
singleLine = true,
4848
maxLines = 1,
4949
colors = TextFieldDefaults.colors(
50-
focusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
51-
unfocusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
50+
focusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
51+
unfocusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
5252
focusedIndicatorColor = Color.Transparent,
5353
unfocusedIndicatorColor = Color.Transparent,
5454
disabledIndicatorColor = Color.Transparent,

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ private fun SelectUsersToolbar(
161161
Column(
162162
modifier = Modifier
163163
.fillMaxWidth()
164-
.background(ChatTheme.colors.backgroundElevationElevation1),
164+
.background(ChatTheme.colors.backgroundCoreElevation1),
165165
) {
166166
AppToolbar(
167167
title = stringResource(id = R.string.add_group_channel_members_title),
@@ -204,7 +204,7 @@ private fun EnterNameToolbar(
204204
Column(
205205
modifier = Modifier
206206
.fillMaxWidth()
207-
.background(ChatTheme.colors.backgroundElevationElevation1),
207+
.background(ChatTheme.colors.backgroundCoreElevation1),
208208
) {
209209
AppToolbar(
210210
title = stringResource(id = R.string.add_group_channel_name_title),
@@ -317,8 +317,8 @@ private fun ChannelNameTextField(
317317
singleLine = true,
318318
maxLines = 1,
319319
colors = TextFieldDefaults.colors(
320-
focusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
321-
unfocusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
320+
focusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
321+
unfocusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
322322
focusedIndicatorColor = Color.Transparent,
323323
unfocusedIndicatorColor = Color.Transparent,
324324
disabledIndicatorColor = Color.Transparent,
@@ -402,7 +402,7 @@ private fun SelectedUsersList(
402402
LazyRow(
403403
modifier = Modifier
404404
.fillMaxWidth()
405-
.background(ChatTheme.colors.backgroundElevationElevation1),
405+
.background(ChatTheme.colors.backgroundCoreElevation1),
406406
contentPadding = PaddingValues(8.dp),
407407
verticalAlignment = Alignment.CenterVertically,
408408
horizontalArrangement = Arrangement.spacedBy(16.dp),
@@ -451,7 +451,7 @@ private fun SelectedUserItem(
451451
modifier = Modifier
452452
.size(24.dp)
453453
.clip(RoundedCornerShape(12.dp))
454-
.background(ChatTheme.colors.backgroundElevationElevation1)
454+
.background(ChatTheme.colors.backgroundCoreElevation1)
455455
.align(Alignment.TopEnd)
456456
.clickable { onRemoveClick() },
457457
) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ class ChannelsActivity : ComponentActivity() {
179179
drawerContent = {
180180
ModalDrawerSheet(
181181
modifier = Modifier.width(300.dp),
182-
drawerContainerColor = ChatTheme.colors.backgroundElevationElevation1,
182+
drawerContainerColor = ChatTheme.colors.backgroundCoreElevation1,
183183
) {
184184
ChannelsScreenNavigationDrawer(
185185
currentUser = user,

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/feature/reminders/MessageReminderDialogs.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ private fun ReminderDialog(
183183
content: @Composable () -> Unit,
184184
) {
185185
Dialog(onDismissRequest = onDismiss) {
186-
Card(colors = CardDefaults.cardColors(containerColor = ChatTheme.colors.backgroundElevationElevation1)) {
186+
Card(colors = CardDefaults.cardColors(containerColor = ChatTheme.colors.backgroundCoreElevation1)) {
187187
content()
188188
}
189189
}

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/channel/AddMembersDialog.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ fun AddMembersDialog(
105105
Text(text = stringResource(id = io.getstream.chat.android.compose.R.string.stream_compose_cancel))
106106
}
107107
},
108-
containerColor = ChatTheme.colors.backgroundElevationElevation1,
108+
containerColor = ChatTheme.colors.backgroundCoreElevation1,
109109
)
110110
LaunchedEffect(viewModel) {
111111
viewModel.events.collectLatest { event ->
@@ -201,7 +201,7 @@ private fun SearchResultItem(
201201
exit = shrinkOut(targetSize = { fullSize -> fullSize }) + fadeOut(),
202202
) {
203203
Icon(
204-
modifier = Modifier.background(ChatTheme.colors.backgroundElevationElevation1, CircleShape),
204+
modifier = Modifier.background(ChatTheme.colors.backgroundCoreElevation1, CircleShape),
205205
tint = ChatTheme.colors.accentPrimary,
206206
painter = painterResource(id = R.drawable.ic_check_filled),
207207
contentDescription = null,

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/chats/ChatsActivity.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ class ChatsActivity : ComponentActivity() {
358358
title = {},
359359
navigationIcon = { CloseButton(onClick = params.onNavigationIconClick) },
360360
colors = TopAppBarDefaults.topAppBarColors(
361-
containerColor = ChatTheme.colors.backgroundElevationElevation1,
361+
containerColor = ChatTheme.colors.backgroundCoreElevation1,
362362
),
363363
)
364364
}
@@ -511,7 +511,7 @@ class ChatsActivity : ComponentActivity() {
511511
navigationIcon = navigationIcon,
512512
expandedHeight = 56.dp,
513513
colors = TopAppBarDefaults.topAppBarColors(
514-
containerColor = ChatTheme.colors.backgroundElevationElevation1,
514+
containerColor = ChatTheme.colors.backgroundCoreElevation1,
515515
),
516516
actions = {
517517
if (infoState is ChannelInfoViewState.Content &&

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/AppBottomBar.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ fun AppBottomBar(
6363
Row(
6464
modifier = Modifier
6565
.fillMaxWidth()
66-
.background(ChatTheme.colors.backgroundElevationElevation1),
66+
.background(ChatTheme.colors.backgroundCoreElevation1),
6767
verticalAlignment = Alignment.CenterVertically,
6868
horizontalArrangement = Arrangement.SpaceEvenly,
6969
) {

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/AppToolbar.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ fun AppToolbar(
6363
Row(
6464
modifier = Modifier
6565
.fillMaxWidth()
66-
.background(ChatTheme.colors.backgroundElevationElevation1)
66+
.background(ChatTheme.colors.backgroundCoreElevation1)
6767
.padding(8.dp),
6868
verticalAlignment = Alignment.CenterVertically,
6969
horizontalArrangement = Arrangement.SpaceBetween,

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/Pane.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ internal fun PaneRow(
7373
else -> RectangleShape
7474
}
7575
background(
76-
color = ChatTheme.colors.backgroundElevationElevation1,
76+
color = ChatTheme.colors.backgroundCoreElevation1,
7777
shape = shape,
7878
)
7979
}

0 commit comments

Comments
 (0)