Skip to content

Update design color tokens and UI component styling #6213

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

Open
andremion wants to merge 2 commits into
base: v7
Choose a base branch
from
+95 −64
Open

Update design color tokens and UI component styling #6213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9cd9529
Update theme color tokens and UI component styling
andremion Mar 5, 2026
2a28913
Inline size tokens in UI components
andremion Mar 5, 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
31 changes: 20 additions & 11 deletions stream-chat-android-compose/api/stream-chat-android-compose.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3587,8 +3587,8 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign {
public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Colors {
public static final field $stable I
public static final field Companion Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors$Companion;
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1-0d7_KjU ()J
public final fun component10-0d7_KjU ()J
public final fun component11-0d7_KjU ()J
Expand Down Expand Up @@ -3661,10 +3661,12 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun component72-0d7_KjU ()J
public final fun component73-0d7_KjU ()J
public final fun component74-0d7_KjU ()J
public final fun component75-0d7_KjU ()J
public final fun component76-0d7_KjU ()J
public final fun component8-0d7_KjU ()J
public final fun component9-0d7_KjU ()J
public final fun copy-PluTXJ0 (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public static synthetic fun copy-PluTXJ0$default (Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public final fun copy-UuUHjgE (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public static synthetic fun copy-UuUHjgE$default (Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public fun equals (Ljava/lang/Object;)Z
public final fun getAccentBlack-0d7_KjU ()J
public final fun getAccentError-0d7_KjU ()J
Expand All @@ -3687,6 +3689,7 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getBackgroundCoreDisabled-0d7_KjU ()J
public final fun getBackgroundCoreHighlight-0d7_KjU ()J
public final fun getBackgroundCoreInverse-0d7_KjU ()J
public final fun getBackgroundCoreOnAccent-0d7_KjU ()J
public final fun getBackgroundCoreOverlayDark-0d7_KjU ()J
public final fun getBackgroundCoreScrim-0d7_KjU ()J
public final fun getBackgroundCoreSelected-0d7_KjU ()J
Expand All @@ -3700,17 +3703,15 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getBackgroundElevationElevation4-0d7_KjU ()J
public final fun getBadgeBgDefault-0d7_KjU ()J
public final fun getBadgeBgError-0d7_KjU ()J
public final fun getBadgeBgInverse-0d7_KjU ()J
public final fun getBadgeBgNeutral-0d7_KjU ()J
public final fun getBadgeBgOverlay-0d7_KjU ()J
public final fun getBadgeBgPrimary-0d7_KjU ()J
public final fun getBadgeBorder-0d7_KjU ()J
public final fun getBadgeText-0d7_KjU ()J
public final fun getBadgeTextInverse-0d7_KjU ()J
public final fun getBadgeTextOnAccent-0d7_KjU ()J
public final fun getBorderCoreDefault-0d7_KjU ()J
public final fun getBorderCoreInverse-0d7_KjU ()J
public final fun getBorderCoreOnAccent-0d7_KjU ()J
public final fun getBorderCoreOnDark-0d7_KjU ()J
public final fun getBorderCoreOpacity10-0d7_KjU ()J
public final fun getBorderCoreOpacity25-0d7_KjU ()J
public final fun getBorderCoreStrong-0d7_KjU ()J
Expand Down Expand Up @@ -3744,7 +3745,6 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getChatBgAttachmentOutgoing-0d7_KjU ()J
public final fun getChatBgIncoming-0d7_KjU ()J
public final fun getChatBgOutgoing-0d7_KjU ()J
public final fun getChatBgTypingIndicator-0d7_KjU ()J
public final fun getChatBorderIncoming-0d7_KjU ()J
public final fun getChatBorderOnChatIncoming-0d7_KjU ()J
public final fun getChatBorderOnChatOutgoing-0d7_KjU ()J
Expand All @@ -3763,6 +3763,7 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getChatTextRead-0d7_KjU ()J
public final fun getChatTextSystem-0d7_KjU ()J
public final fun getChatTextTimestamp-0d7_KjU ()J
public final fun getChatTextTypingIndicator-0d7_KjU ()J
public final fun getChatTextUsername-0d7_KjU ()J
public final fun getChatThreadConnectorIncoming-0d7_KjU ()J
public final fun getChatThreadConnectorOutgoing-0d7_KjU ()J
Expand All @@ -3771,8 +3772,16 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getChipBg-0d7_KjU ()J
public final fun getChipText-0d7_KjU ()J
public final fun getComposerBg-0d7_KjU ()J
public final fun getControlPlayControlBg-0d7_KjU ()J
public final fun getControlPlayControlIcon-0d7_KjU ()J
public final fun getControlCheckboxBg-0d7_KjU ()J
public final fun getControlCheckboxBgSelected-0d7_KjU ()J
public final fun getControlCheckboxBorder-0d7_KjU ()J
public final fun getControlCheckboxIconSelected-0d7_KjU ()J
public final fun getControlPlayButtonBg-0d7_KjU ()J
public final fun getControlPlayButtonIcon-0d7_KjU ()J
public final fun getControlPlaybackThumbBgActive-0d7_KjU ()J
public final fun getControlPlaybackThumbBgDefault-0d7_KjU ()J
public final fun getControlPlaybackThumbBorderActive-0d7_KjU ()J
public final fun getControlPlaybackThumbBorderDefault-0d7_KjU ()J
public final fun getControlPlaybackToggleBorder-0d7_KjU ()J
public final fun getControlPlaybackToggleText-0d7_KjU ()J
public final fun getControlProgressBarFill-0d7_KjU ()J
Expand Down Expand Up @@ -3807,8 +3816,8 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getSkeletonLoadingBase-0d7_KjU ()J
public final fun getSkeletonLoadingHighlight-0d7_KjU ()J
public final fun getTextDisabled-0d7_KjU ()J
public final fun getTextInverse-0d7_KjU ()J
public final fun getTextOnAccent-0d7_KjU ()J
public final fun getTextOnDark-0d7_KjU ()J
public final fun getTextPrimary-0d7_KjU ()J
public final fun getTextSecondary-0d7_KjU ()J
public final fun getTextTertiary-0d7_KjU ()J
Expand Down
2 changes: 1 addition & 1 deletion ...in/java/io/getstream/chat/android/compose/ui/attachments/content/LinkAttachmentContent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ private fun AttachmentLink(link: String, color: Color, modifier: Modifier = Modi
Icon(
painter = painterResource(R.drawable.stream_compose_ic_link),
contentDescription = null,
modifier = Modifier.size(StreamTokens.size12),
modifier = Modifier.size(12.dp),
tint = color,
)
Text(
Expand Down
6 changes: 3 additions & 3 deletions ...n/java/io/getstream/chat/android/compose/ui/components/attachments/images/ImagesPicker.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ private fun VideoThumbnailOverlay(
modifier = modifier
.background(
shape = overlayShape,
color = ChatTheme.colors.badgeBgInverse,
color = ChatTheme.colors.accentBlack,
)
.padding(
horizontal = StreamTokens.spacingXs,
Expand All @@ -230,12 +230,12 @@ private fun VideoThumbnailOverlay(
Icon(
painter = painterResource(id = R.drawable.stream_compose_ic_video),
contentDescription = null,
tint = ChatTheme.colors.badgeTextInverse,
tint = ChatTheme.colors.textOnAccent,
)
Text(
text = MediaStringUtil.convertVideoLength(videoLength),
style = ChatTheme.typography.numericMedium,
color = ChatTheme.colors.badgeTextInverse,
color = ChatTheme.colors.textOnAccent,
)
}
}
Expand Down
2 changes: 1 addition & 1 deletion ...mpose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/AvatarStack.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ internal fun UserAvatarStack(
componentFactory.UserAvatar(
modifier = Modifier
.size(avatarSize + borderSize)
.border(borderSize, colors.borderCoreOnDark, CircleShape)
.border(borderSize, colors.borderCoreInverse, CircleShape)
.padding(borderSize),
user = user,
showBorder = showBorder && index == 0,
Expand Down
2 changes: 1 addition & 1 deletion ...ose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/ChannelAvatar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ private object StackedGroupAvatarSpecs {

return Modifier
.size(avatarSize + borderWidth)
.border(BorderStroke(borderWidth, ChatTheme.colors.borderCoreOnDark), CircleShape)
.border(BorderStroke(borderWidth, ChatTheme.colors.borderCoreInverse), CircleShape)
.padding(borderWidth)
}
}
Expand Down
8 changes: 4 additions & 4 deletions ...mpose/src/main/java/io/getstream/chat/android/compose/ui/components/common/CommandChip.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,20 @@ internal fun CommandChip(
horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacing2xs),
) {
Icon(
modifier = Modifier.size(StreamTokens.size12),
modifier = Modifier.size(12.dp),
painter = painterResource(id = R.drawable.stream_compose_ic_command_chip),
contentDescription = null,
tint = ChatTheme.colors.badgeTextInverse,
tint = ChatTheme.colors.textInverse,
)
Text(
text = command.name.uppercase(Locale.ROOT),
style = ChatTheme.typography.metadataEmphasis,
color = ChatTheme.colors.badgeTextInverse,
color = ChatTheme.colors.textInverse,
)
Icon(
painter = painterResource(id = R.drawable.stream_compose_ic_command_chip_cancel),
contentDescription = stringResource(id = R.string.stream_compose_cancel),
tint = ChatTheme.colors.badgeTextInverse,
tint = ChatTheme.colors.textInverse,
)
}
}
Expand Down
4 changes: 2 additions & 2 deletions ...ompose/src/main/java/io/getstream/chat/android/compose/ui/components/common/PlayButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ internal fun PlayButton(
Box(
modifier = modifier
.size(size.componentSize)
.background(colors.controlPlayControlBg, CircleShape)
.background(colors.controlPlayButtonBg, CircleShape)
.ifNotNull(contentDescription) { description ->
semantics { this.contentDescription = description }
},
Expand All @@ -62,7 +62,7 @@ internal fun PlayButton(
modifier = Modifier.Companion.size(size.iconSize),
painter = painterResource(id = R.drawable.stream_compose_ic_play),
contentDescription = null,
tint = colors.controlPlayControlIcon,
tint = colors.controlPlayButtonIcon,
)
}
}
Expand Down
4 changes: 2 additions & 2 deletions ...ain/java/io/getstream/chat/android/compose/ui/components/messages/ScrollToBottomButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,11 @@ internal fun ScrollToBottomButton(
Surface(
modifier = Modifier.border(
width = 1.dp,
color = ChatTheme.colors.borderCoreOnDark,
color = ChatTheme.colors.badgeBorder,
shape = BadgeShape,
),
shape = BadgeShape,
color = ChatTheme.colors.accentPrimary,
color = ChatTheme.colors.badgeBgPrimary,
contentColor = ChatTheme.colors.badgeTextOnAccent,
) {
Text(
Expand Down
2 changes: 1 addition & 1 deletion ...ompose/src/main/java/io/getstream/chat/android/compose/ui/components/poll/PollVoteItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ internal fun PollVoteItem(
ChatTheme.componentFactory.UserAvatar(
modifier = Modifier
.size(AvatarSize.Medium + borderSize * 2)
.background(ChatTheme.colors.borderCoreOnDark, CircleShape)
.background(ChatTheme.colors.borderCoreOpacity10, CircleShape)
.padding(borderSize),
user = user,
showIndicator = false,
Expand Down
2 changes: 1 addition & 1 deletion ...-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3450,7 +3450,7 @@ public interface ChatComponentFactory {
.padding(horizontal = 12.dp, vertical = 8.dp),
text = label,
style = ChatTheme.typography.bodyEmphasis,
color = ChatTheme.colors.textOnDark,
color = ChatTheme.colors.textInverse,
)
}

Expand Down
Loading
Loading