Skip to content

Align StreamDesign.Colors with Figma design token system #6272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andremion merged 25 commits into from
Mar 20, 2026
+896 −748
Merged

Align StreamDesign.Colors with Figma design token system #6272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
c3f5395
Add Chrome neutral color scale to `StreamDesign` and update `StreamPr…
andremion Mar 18, 2026
4c86519
Introduce `ColorScale` and `ChromeScale` to `StreamDesign`.
andremion Mar 18, 2026
d7e1c31
Refactor `StreamDesign.Colors` to use `ColorScale` and `ChromeScale` …
andremion Mar 19, 2026
fcaeafe
Renames to match Figma in favor of traceability.
andremion Mar 19, 2026
c8e069e
Remove unexisting in Figma `chipBg` and `composerBg` from `StreamDesi…
andremion Mar 19, 2026
4bd0d86
Update to correct color references as per Figma designs
andremion Mar 19, 2026
df64de7
Color.Unspecified defaults were silently broken. Defaults were wrong …
andremion Mar 19, 2026
9a4fc76
Reorganize and update `StreamDesign.kt` color definitions.
andremion Mar 19, 2026
c7093e1
Update chip color tokens in `StreamDesign` and `ReactionCountRow`.
andremion Mar 19, 2026
b13b35e
Update `StreamDesign.kt` documentation based on Figma.
andremion Mar 19, 2026
2a71f29
Move component-specific color properties (e.g., `badgeBgInverse`, `ch…
andremion Mar 19, 2026
a8d0624
These files reference backgroundElevationElevation1 but the property …
andremion Mar 19, 2026
fdfdb00
Use `brand` and `chrome` instead of direct `StreamPrimitiveColors` re…
andremion Mar 19, 2026
cae1809
Change visibility of component color tokens in `StreamDesign.kt` from…
andremion Mar 19, 2026
187437c
Move `chatPollProgressFillOutgoing`, `chatReplyIndicatorIncoming`, `c…
andremion Mar 19, 2026
d731371
apiDump
andremion Mar 19, 2026
2b2f2ea
Update documentation for `backgroundCoreOnAccent` in `StreamDesign.kt`.
andremion Mar 20, 2026
12956d0
Update `StreamDesign` to allow custom color scales in default color p…
andremion Mar 20, 2026
d62c25a
Update `StreamDesign` to support color scale inversion and customizab…
andremion Mar 20, 2026
878c53f
Make `chatPollProgressFillOutgoing`, `chatReplyIndicatorIncoming`, an…
andremion Mar 20, 2026
86ed3a7
Update `backgroundCoreInverse`
andremion Mar 20, 2026
67dc245
Update snapshot files
andremion Mar 20, 2026
e6c63ff
apiDump
andremion Mar 20, 2026
0ed6835
Make `controlPlaybackThumbBgDefault` internal derived.
andremion Mar 20, 2026
101e6fe
Merge branch 'v7' into redesign/chrome-tokens-and-more
andremion Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ...ain/java/io/getstream/chat/android/compose/sample/feature/channel/add/AddChannelScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,13 +148,13 @@ private fun AddChannelToolbar(
Column(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1),
.background(ChatTheme.colors.backgroundCoreElevation1),
) {
AppToolbar(title = stringResource(id = R.string.add_channel_title), onBack = onBack, elevation = 0.dp)
Row(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1)
.background(ChatTheme.colors.backgroundCoreElevation1)
.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
Expand Down Expand Up @@ -212,7 +212,7 @@ private fun CreateGroupSection(onClick: () -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1)
.background(ChatTheme.colors.backgroundCoreElevation1)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = ripple(),
Expand Down Expand Up @@ -251,7 +251,7 @@ private fun SelectedUsersList(
FlowRow(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1)
.background(ChatTheme.colors.backgroundCoreElevation1)
.padding(12.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalArrangement = Arrangement.spacedBy(4.dp),
Expand Down
4 changes: 2 additions & 2 deletions ...etstream/chat/android/compose/sample/feature/channel/add/component/SearchUserTextField.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ fun SearchUserTextField(
singleLine = true,
maxLines = 1,
colors = TextFieldDefaults.colors(
focusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
unfocusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
focusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
unfocusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
Expand Down
12 changes: 6 additions & 6 deletions .../getstream/chat/android/compose/sample/feature/channel/add/group/AddGroupChannelScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ private fun SelectUsersToolbar(
Column(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1),
.background(ChatTheme.colors.backgroundCoreElevation1),
) {
AppToolbar(
title = stringResource(id = R.string.add_group_channel_members_title),
Expand Down Expand Up @@ -204,7 +204,7 @@ private fun EnterNameToolbar(
Column(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1),
.background(ChatTheme.colors.backgroundCoreElevation1),
) {
AppToolbar(
title = stringResource(id = R.string.add_group_channel_name_title),
Expand Down Expand Up @@ -317,8 +317,8 @@ private fun ChannelNameTextField(
singleLine = true,
maxLines = 1,
colors = TextFieldDefaults.colors(
focusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
unfocusedContainerColor = ChatTheme.colors.backgroundElevationElevation1,
focusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
unfocusedContainerColor = ChatTheme.colors.backgroundCoreElevation1,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
Expand Down Expand Up @@ -402,7 +402,7 @@ private fun SelectedUsersList(
LazyRow(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1),
.background(ChatTheme.colors.backgroundCoreElevation1),
contentPadding = PaddingValues(8.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp),
Expand Down Expand Up @@ -451,7 +451,7 @@ private fun SelectedUserItem(
modifier = Modifier
.size(24.dp)
.clip(RoundedCornerShape(12.dp))
.background(ChatTheme.colors.backgroundElevationElevation1)
.background(ChatTheme.colors.backgroundCoreElevation1)
.align(Alignment.TopEnd)
.clickable { onRemoveClick() },
) {
Expand Down
2 changes: 1 addition & 1 deletion ...in/java/io/getstream/chat/android/compose/sample/feature/channel/list/ChannelsActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ class ChannelsActivity : ComponentActivity() {
drawerContent = {
ModalDrawerSheet(
modifier = Modifier.width(300.dp),
drawerContainerColor = ChatTheme.colors.backgroundElevationElevation1,
drawerContainerColor = ChatTheme.colors.backgroundCoreElevation1,
) {
ChannelsScreenNavigationDrawer(
currentUser = user,
Expand Down
2 changes: 1 addition & 1 deletion ...java/io/getstream/chat/android/compose/sample/feature/reminders/MessageReminderDialogs.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ private fun ReminderDialog(
content: @Composable () -> Unit,
) {
Dialog(onDismissRequest = onDismiss) {
Card(colors = CardDefaults.cardColors(containerColor = ChatTheme.colors.backgroundElevationElevation1)) {
Card(colors = CardDefaults.cardColors(containerColor = ChatTheme.colors.backgroundCoreElevation1)) {
content()
}
}
Expand Down
4 changes: 2 additions & 2 deletions ...ple/src/main/java/io/getstream/chat/android/compose/sample/ui/channel/AddMembersDialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ fun AddMembersDialog(
Text(text = stringResource(id = io.getstream.chat.android.compose.R.string.stream_compose_cancel))
}
},
containerColor = ChatTheme.colors.backgroundElevationElevation1,
containerColor = ChatTheme.colors.backgroundCoreElevation1,
)
LaunchedEffect(viewModel) {
viewModel.events.collectLatest { event ->
Expand Down Expand Up @@ -201,7 +201,7 @@ private fun SearchResultItem(
exit = shrinkOut(targetSize = { fullSize -> fullSize }) + fadeOut(),
) {
Icon(
modifier = Modifier.background(ChatTheme.colors.backgroundElevationElevation1, CircleShape),
modifier = Modifier.background(ChatTheme.colors.backgroundCoreElevation1, CircleShape),
tint = ChatTheme.colors.accentPrimary,
painter = painterResource(id = R.drawable.ic_check_filled),
contentDescription = null,
Expand Down
4 changes: 2 additions & 2 deletions ...e-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/chats/ChatsActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ class ChatsActivity : ComponentActivity() {
title = {},
navigationIcon = { CloseButton(onClick = params.onNavigationIconClick) },
colors = TopAppBarDefaults.topAppBarColors(
containerColor = ChatTheme.colors.backgroundElevationElevation1,
containerColor = ChatTheme.colors.backgroundCoreElevation1,
),
)
}
Expand Down Expand Up @@ -511,7 +511,7 @@ class ChatsActivity : ComponentActivity() {
navigationIcon = navigationIcon,
expandedHeight = 56.dp,
colors = TopAppBarDefaults.topAppBarColors(
containerColor = ChatTheme.colors.backgroundElevationElevation1,
containerColor = ChatTheme.colors.backgroundCoreElevation1,
),
actions = {
if (infoState is ChannelInfoViewState.Content &&
Expand Down
2 changes: 1 addition & 1 deletion ...ample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/AppBottomBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ fun AppBottomBar(
Row(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1),
.background(ChatTheme.colors.backgroundCoreElevation1),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceEvenly,
) {
Expand Down
2 changes: 1 addition & 1 deletion ...-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/AppToolbar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ fun AppToolbar(
Row(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1)
.background(ChatTheme.colors.backgroundCoreElevation1)
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
Expand Down
2 changes: 1 addition & 1 deletion ...ompose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/Pane.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ internal fun PaneRow(
else -> RectangleShape
}
background(
color = ChatTheme.colors.backgroundElevationElevation1,
color = ChatTheme.colors.backgroundCoreElevation1,
shape = shape,
)
}
Expand Down
4 changes: 2 additions & 2 deletions ...src/main/java/io/getstream/chat/android/compose/sample/ui/component/SharedLocationItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,9 @@ private fun LiveLocationSharing(
.clip(RoundedCornerShape(12.dp))
.background(
color = if (isOwnMessage) {
ChatTheme.colors.chatBgOutgoing
ChatTheme.colors.brand.s100
} else {
ChatTheme.colors.chatBgIncoming
ChatTheme.colors.backgroundCoreSurface
},
),
) {
Expand Down
2 changes: 1 addition & 1 deletion ...rc/main/java/io/getstream/chat/android/compose/sample/ui/location/DurationDropdownMenu.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ fun DurationDropdownMenu(
) {
DropdownMenu(
expanded = expanded,
containerColor = ChatTheme.colors.backgroundElevationElevation1,
containerColor = ChatTheme.colors.backgroundCoreElevation1,
onDismissRequest = onDismiss,
) {
Text(
Expand Down
6 changes: 3 additions & 3 deletions ...ain/java/io/getstream/chat/android/compose/sample/ui/location/LocationComponentFactory.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ class LocationComponentFactory(
onCheckedChange = { params.onModeSelected(LocationPickerMode) },
colors = IconButtonDefaults.filledIconToggleButtonColors(
containerColor = Color.Transparent,
contentColor = ChatTheme.colors.buttonSecondaryText,
checkedContainerColor = ChatTheme.colors.backgroundCoreSelected,
checkedContentColor = ChatTheme.colors.buttonSecondaryText,
contentColor = ChatTheme.colors.textPrimary,
checkedContainerColor = ChatTheme.colors.backgroundUtilitySelected,
checkedContentColor = ChatTheme.colors.textPrimary,
),
) {
Icon(
Expand Down
4 changes: 2 additions & 2 deletions ...le/src/main/java/io/getstream/chat/android/compose/sample/ui/login/CustomLoginActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ class CustomLoginActivity : AppCompatActivity() {
)
}
},
colors = TopAppBarDefaults.topAppBarColors(containerColor = ChatTheme.colors.backgroundElevationElevation1),
colors = TopAppBarDefaults.topAppBarColors(containerColor = ChatTheme.colors.backgroundCoreElevation1),
)
}

Expand Down Expand Up @@ -298,7 +298,7 @@ class CustomLoginActivity : AppCompatActivity() {
shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.buttonColors(
containerColor = ChatTheme.colors.accentPrimary,
disabledContainerColor = ChatTheme.colors.backgroundCoreDisabled,
disabledContainerColor = ChatTheme.colors.backgroundUtilityDisabled,
),
onClick = onClick,
) {
Expand Down
2 changes: 1 addition & 1 deletion ...mple/src/main/java/io/getstream/chat/android/compose/sample/ui/login/UserLoginActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ class UserLoginActivity : AppCompatActivity() {
modifier = Modifier
.clip(CircleShape)
.size(40.dp)
.background(ChatTheme.colors.backgroundCoreDisabled)
.background(ChatTheme.colors.backgroundUtilityDisabled)
.padding(8.dp),
painter = painterResource(id = R.drawable.ic_settings),
contentDescription = null,
Expand Down
2 changes: 1 addition & 1 deletion ...a/io/getstream/chat/android/compose/sample/ui/profile/UserProfilePushPreferencesScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ private fun TemporaryDisableSection(
colors = SwitchDefaults.colors(
checkedTrackColor = ChatTheme.colors.accentSuccess,
checkedThumbColor = Color.White,
uncheckedTrackColor = ChatTheme.colors.backgroundCoreDisabled,
uncheckedTrackColor = ChatTheme.colors.backgroundUtilityDisabled,
uncheckedThumbColor = Color.White,
),
)
Expand Down
2 changes: 1 addition & 1 deletion ...le/src/main/java/io/getstream/chat/android/compose/sample/ui/profile/UserProfileScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ private fun UserProfilePicture(
.align(Alignment.BottomEnd)
.size(24.dp)
.background(
color = ChatTheme.colors.backgroundElevationElevation1,
color = ChatTheme.colors.backgroundCoreElevation1,
shape = CircleShape,
)
.padding(4.dp),
Expand Down
Loading
Loading