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

@ -55,12 +55,12 @@ import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart
import io.element.android.libraries.theme.LocalColors
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TextButton
import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -162,7 +162,7 @@ private fun AnalyticsOptInContentRow(
modifier = modifier
.fillMaxWidth()
.background(
color = LocalColors.current.quinary,
color = ElementTheme.legacyColors.quinary,
shape = bgShape,
)
.padding(vertical = 12.dp, horizontal = 20.dp),
@ -174,8 +174,7 @@ private fun AnalyticsOptInContentRow(
.padding(2.dp),
imageVector = Icons.Rounded.Check,
contentDescription = null,
// TODO Compound, this color is not yet in the theme
tint = Color(0xFF007A61)
tint = ElementTheme.colors.iconSuccessPrimary,
)
Text(
modifier = Modifier.padding(start = 16.dp),

View file

@ -67,7 +67,7 @@ import kotlin.coroutines.suspendCoroutine
fun MapView(
modifier: Modifier = Modifier,
mapState: MapState = rememberMapState(),
darkMode: Boolean = !ElementTheme.colors.isLight,
darkMode: Boolean = !ElementTheme.isLightTheme,
onLocationClick: () -> Unit,
) {
// When in preview, early return a Box with the received modifier preserving layout

View file

@ -34,11 +34,11 @@ import androidx.compose.ui.unit.dp
import coil.compose.AsyncImagePainter
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import io.element.android.features.location.api.internal.StaticMapPlaceholder
import io.element.android.features.location.api.internal.buildStaticMapsApiUrl
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.features.location.api.internal.StaticMapPlaceholder
import io.element.android.features.location.api.internal.buildStaticMapsApiUrl
import io.element.android.libraries.theme.ElementTheme
import timber.log.Timber
@ -52,7 +52,7 @@ fun StaticMapView(
zoom: Double,
contentDescription: String?,
modifier: Modifier = Modifier,
darkMode: Boolean = !ElementTheme.colors.isLight,
darkMode: Boolean = !ElementTheme.isLightTheme,
) {
// Using BoxWithConstraints to:
// 1) Size the inner Image to the same Dp size of the outer BoxWithConstraints.

View file

@ -33,12 +33,12 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import io.element.android.features.location.api.R
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.features.location.api.R
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -47,7 +47,7 @@ internal fun StaticMapPlaceholder(
showProgress: Boolean,
contentDescription: String?,
modifier: Modifier = Modifier,
darkMode: Boolean = !ElementTheme.colors.isLight,
darkMode: Boolean = !ElementTheme.isLightTheme,
onLoadMapClick: () -> Unit,
) {
Box(

View file

@ -18,6 +18,7 @@ package io.element.android.features.login.impl
import android.app.Activity
import android.os.Parcelable
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.Modifier
@ -45,9 +46,9 @@ import io.element.android.libraries.architecture.NodeInputs
import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler
import io.element.android.libraries.architecture.createNode
import io.element.android.libraries.architecture.inputs
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.di.AppScope
import io.element.android.libraries.matrix.api.auth.OidcDetails
import io.element.android.libraries.theme.ElementTheme
import kotlinx.parcelize.Parcelize
@ContributesNode(AppScope::class)
@ -155,7 +156,7 @@ class LoginFlowNode @AssistedInject constructor(
@Composable
override fun View(modifier: Modifier) {
activity = LocalContext.current as? Activity
darkTheme = !ElementTheme.colors.isLight
darkTheme = !ElementTheme.isLightTheme
DisposableEffect(Unit) {
onDispose {
activity = null

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
}

View file

@ -55,7 +55,7 @@ internal fun RoomSummaryPlaceholderRow(
modifier = Modifier
.size(AvatarSize.RoomListItem.dp)
.align(Alignment.CenterVertically)
.background(color = ElementTheme.compoundColors.textPlaceholder, shape = CircleShape)
.background(color = ElementTheme.colors.textPlaceholder, shape = CircleShape)
)
Column(
modifier = Modifier