Link Compound's TypographyTokens to ElementTheme. (#700)

* Link Compound's `TypographyTokens` to `ElementTheme`.

Also add some docs about when we should use each set of tokens.

* Renamed `LocalColors` to `LocalLegacyColors`.

Made both `LocalLegacyColors` and `LocalCompoundColors` internal. This means it will need to always be used through `ElementTheme.`

Also, removed any usages of `LocalColors.current` accross the project, they're now used through `ElementTheme.legacyColors`.
This commit is contained in:
Jorge Martin Espinosa 2023-06-28 10:53:20 +02:00 committed by GitHub
parent e472975069
commit 683b0b3594
21 changed files with 78 additions and 53 deletions

View file

@ -98,12 +98,12 @@ fun MessageEventBubble(
}
val backgroundBubbleColor = if (state.isHighlighted) {
ElementTheme.colors.messageHighlightedBackground
ElementTheme.legacyColors.messageHighlightedBackground
} else {
if (state.isMine) {
ElementTheme.colors.messageFromMeBackground
ElementTheme.legacyColors.messageFromMeBackground
} else {
ElementTheme.colors.messageFromOtherBackground
ElementTheme.legacyColors.messageFromOtherBackground
}
}
val bubbleShape = bubbleShape()

View file

@ -49,7 +49,7 @@ fun MessageStateEventContainer(
content: @Composable () -> Unit = {},
) {
val backgroundColor = if (isHighlighted) {
ElementTheme.colors.messageHighlightedBackground
ElementTheme.legacyColors.messageHighlightedBackground
} else {
Color.Companion.Transparent
}

View file

@ -48,7 +48,7 @@ fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Mo
Surface(
modifier = modifier,
// TODO Should use compound.bgSubtlePrimary
color = ElementTheme.colors.gray300,
color = ElementTheme.legacyColors.gray300,
border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
shape = RoundedCornerShape(corner = CornerSize(14.dp)),
) {

View file

@ -63,7 +63,6 @@ import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.EqualWidthColumn
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.theme.LocalColors
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.Text
@ -76,6 +75,7 @@ import io.element.android.libraries.matrix.api.timeline.item.event.VideoMessageT
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
import io.element.android.libraries.theme.ElementTheme
import org.jsoup.Jsoup
@Composable
@ -251,7 +251,7 @@ private fun MessageEventBubbleContent(
onClick = onTimestampClicked,
modifier = timestampModifier
.padding(horizontal = 4.dp, vertical = 4.dp) // Outer padding
.background(LocalColors.current.gray300, RoundedCornerShape(10.0.dp))
.background(ElementTheme.legacyColors.gray300, RoundedCornerShape(10.0.dp))
.align(Alignment.BottomEnd)
.padding(horizontal = 4.dp, vertical = 2.dp) // Inner padding
)
@ -364,7 +364,7 @@ private fun ReplyToContent(
text = text.orEmpty(),
style = ElementTextStyles.Regular.caption1,
textAlign = TextAlign.Start,
color = LocalColors.current.placeholder,
color = ElementTheme.legacyColors.placeholder,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)

View file

@ -54,7 +54,7 @@ fun GroupHeaderView(
modifier: Modifier = Modifier
) {
val backgroundColor = if (isHighlighted) {
ElementTheme.colors.messageHighlightedBackground
ElementTheme.legacyColors.messageHighlightedBackground
} else {
Color.Companion.Transparent
}