Merge pull request #840 from vector-im/feature/bma/cleanupText

Cleanup text
This commit is contained in:
Benoit Marty 2023-07-11 12:09:39 +02:00 committed by GitHub
commit e308b1dae5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
459 changed files with 1109 additions and 1455 deletions

View file

@ -81,7 +81,7 @@ fun LoadingRoomNodeView(
Text(
text = stringResource(id = CommonStrings.error_unknown),
color = ElementTheme.colors.textSecondary,
fontSize = 14.sp,
style = ElementTheme.typography.fontBodyMdRegular,
)
} else {
CircularProgressIndicator()

View file

@ -41,14 +41,11 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.analytics.api.AnalyticsOptInEvents
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
@ -59,6 +56,7 @@ 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.theme.temporaryColorBgSpecial
import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -109,7 +107,7 @@ private fun AnalyticsOptInHeader(
.clip(shape = RoundedCornerShape(8.dp))
.clickable { onClickTerms() }
.padding(8.dp),
style = ElementTextStyles.Regular.subheadline,
style = ElementTheme.typography.fontBodyMdRegular,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.secondary,
)
@ -162,7 +160,7 @@ private fun AnalyticsOptInContentRow(
modifier = modifier
.fillMaxWidth()
.background(
color = ElementTheme.legacyColors.quinary,
color = ElementTheme.colors.temporaryColorBgSpecial,
shape = bgShape,
)
.padding(vertical = 12.dp, horizontal = 20.dp),
@ -179,8 +177,7 @@ private fun AnalyticsOptInContentRow(
Text(
modifier = Modifier.padding(start = 16.dp),
text = text,
fontSize = 14.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.fontBodyMdMedium,
color = MaterialTheme.colorScheme.primary,
)
}

View file

@ -26,11 +26,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.createroom.impl.R
import io.element.android.features.createroom.impl.components.UserListView
import io.element.android.features.createroom.impl.userlist.UserListEvents
@ -38,10 +36,13 @@ import io.element.android.features.createroom.impl.userlist.UserListState
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TextButton
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalLayoutApi::class)
@ -97,8 +98,7 @@ fun AddPeopleViewTopBar(
title = {
Text(
text = stringResource(id = R.string.screen_create_room_add_people_title),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle
)
},
navigationIcon = { BackButton(onClick = onBackPressed) },
@ -110,7 +110,7 @@ fun AddPeopleViewTopBar(
val textActionResId = if (hasSelectedUsers) CommonStrings.action_next else CommonStrings.action_skip
Text(
text = stringResource(id = textActionResId),
fontSize = 16.sp,
style = ElementTheme.typography.aliasButtonText,
)
}
}

View file

@ -38,6 +38,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.RadioButton
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
@Composable
fun RoomPrivacyOption(
@ -70,14 +71,13 @@ fun RoomPrivacyOption(
) {
Text(
text = roomPrivacyItem.title,
fontSize = 16.sp,
style = ElementTheme.typography.fontBodyLgRegular,
color = MaterialTheme.colorScheme.primary,
)
Spacer(Modifier.size(3.dp))
Text(
text = roomPrivacyItem.description,
fontSize = 12.sp,
lineHeight = 17.sp,
style = ElementTheme.typography.fontBodySmRegular,
color = MaterialTheme.colorScheme.tertiary,
)
}

View file

@ -43,11 +43,9 @@ import androidx.compose.ui.focus.FocusManager
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.createroom.impl.R
import io.element.android.features.createroom.impl.components.RoomPrivacyOption
import io.element.android.libraries.architecture.Async
@ -57,6 +55,8 @@ import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TextButton
@ -65,6 +65,7 @@ import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.matrix.ui.components.AvatarActionBottomSheet
import io.element.android.libraries.matrix.ui.components.SelectedUsersList
import io.element.android.libraries.matrix.ui.components.UnsavedAvatar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.coroutines.launch
@ -186,8 +187,7 @@ fun ConfigureRoomToolbar(
title = {
Text(
text = stringResource(R.string.screen_create_room_title),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = { BackButton(onClick = onBackPressed) },
@ -199,7 +199,7 @@ fun ConfigureRoomToolbar(
) {
Text(
text = stringResource(CommonStrings.action_create),
fontSize = 16.sp,
style = ElementTheme.typography.aliasButtonText,
)
}
}

View file

@ -36,11 +36,9 @@ import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.createroom.impl.R
import io.element.android.features.createroom.impl.components.UserListView
import io.element.android.libraries.architecture.Async
@ -48,12 +46,14 @@ import io.element.android.libraries.designsystem.components.ProgressDialog
import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import io.element.android.libraries.designsystem.R as DrawableR
@ -138,8 +138,7 @@ fun CreateRoomRootViewTopBar(
title = {
Text(
text = stringResource(id = CommonStrings.action_start_chat),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = {
@ -199,8 +198,7 @@ fun CreateRoomActionButton(
)
Text(
text = text,
fontSize = 16.sp,
fontWeight = FontWeight.Normal
style = ElementTheme.typography.fontBodyLgRegular,
)
}
}

View file

@ -42,11 +42,13 @@ import io.element.android.libraries.designsystem.components.dialogs.Confirmation
import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Divider
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -124,7 +126,10 @@ fun InviteListContent(
BackButton(onClick = onBackClicked)
},
title = {
Text(text = stringResource(CommonStrings.action_invites_list))
Text(
text = stringResource(CommonStrings.action_invites_list),
style = ElementTheme.typography.aliasScreenTitle,
)
}
)
},

View file

@ -41,20 +41,19 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.invitelist.impl.R
import io.element.android.features.invitelist.impl.model.InviteListInviteSummary
import io.element.android.features.invitelist.impl.model.InviteListInviteSummaryProvider
import io.element.android.features.invitelist.impl.model.InviteSender
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.OutlinedButton
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.noFontPadding
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
private val minHeight = 72.dp
@ -106,21 +105,18 @@ internal fun DefaultInviteSummaryRow(
// Name
Text(
fontSize = 16.sp,
fontWeight = FontWeight.Medium,
text = invite.roomName,
color = MaterialTheme.colorScheme.primary,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = noFontPadding,
style = ElementTheme.typography.fontBodyLgMedium,
modifier = Modifier.padding(end = bonusPadding),
)
// ID or Alias
invite.roomAlias?.let {
Text(
fontSize = 14.sp,
fontWeight = FontWeight.Normal,
style = ElementTheme.typography.fontBodyMdRegular,
text = it,
color = MaterialTheme.colorScheme.secondary,
maxLines = 1,
@ -137,7 +133,7 @@ internal fun DefaultInviteSummaryRow(
// CTAs
Row(Modifier.padding(top = 12.dp)) {
OutlinedButton(
content = { Text(stringResource(CommonStrings.action_decline), style = ElementTextStyles.Button) },
content = { Text(stringResource(CommonStrings.action_decline), style = ElementTheme.typography.aliasButtonText) },
onClick = onDeclineClicked,
modifier = Modifier
.weight(1f)
@ -148,7 +144,7 @@ internal fun DefaultInviteSummaryRow(
Spacer(modifier = Modifier.width(12.dp))
Button(
content = { Text(stringResource(CommonStrings.action_accept), style = ElementTextStyles.Button) },
content = { Text(stringResource(CommonStrings.action_accept), style = ElementTheme.typography.aliasButtonText) },
onClick = onAcceptClicked,
modifier = Modifier
.weight(1f)
@ -188,10 +184,8 @@ private fun SenderRow(sender: InviteSender) {
)
)
},
style = noFontPadding,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
fontWeight = FontWeight.Normal,
)
}
}

View file

@ -36,21 +36,21 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.location.impl.map.MapView
import io.element.android.features.location.impl.map.rememberMapState
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.BottomSheetScaffold
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.TopAppBar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import io.element.android.libraries.designsystem.R as DesignSystemR
@ -95,8 +95,7 @@ fun SendLocationView(
title = {
Text(
text = stringResource(CommonStrings.screen_share_location_title),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = {

View file

@ -39,11 +39,13 @@ import io.element.android.features.location.impl.map.rememberMapState
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.theme.compound.generated.TypographyTokens
import io.element.android.libraries.ui.strings.CommonStrings
@ -65,7 +67,7 @@ fun ShowLocationView(
title = {
Text(
text = stringResource(CommonStrings.screen_view_location_title),
style = TypographyTokens.fontBodyLgMedium,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = {

View file

@ -35,7 +35,6 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.features.login.impl.R
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@ -43,6 +42,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.Divider
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
/**
* https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=604-60817
@ -86,7 +86,7 @@ fun AccountProviderView(
.padding(start = 16.dp)
.weight(1f),
text = item.title,
style = ElementTextStyles.Regular.headline.copy(textAlign = TextAlign.Start),
style = ElementTheme.typography.fontBodyLgMedium,
color = MaterialTheme.colorScheme.primary,
)
if (item.isPublic) {
@ -105,7 +105,7 @@ fun AccountProviderView(
modifier = Modifier
.padding(start = 46.dp, bottom = 12.dp, end = 26.dp),
text = item.subtitle,
style = ElementTextStyles.Regular.subheadline.copy(textAlign = TextAlign.Start),
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.secondary,
)
}

View file

@ -58,7 +58,6 @@ import io.element.android.features.login.impl.R
import io.element.android.features.login.impl.error.isWaitListError
import io.element.android.features.login.impl.error.loginError
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
@ -76,6 +75,7 @@ import io.element.android.libraries.designsystem.theme.components.autofill
import io.element.android.libraries.designsystem.theme.components.onTabOrEnterKeyFocusNext
import io.element.android.libraries.testtags.TestTags
import io.element.android.libraries.testtags.testTag
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@ -186,7 +186,7 @@ internal fun LoginForm(
Text(
text = stringResource(R.string.screen_login_form_header),
modifier = Modifier.padding(start = 16.dp),
style = ElementTextStyles.Regular.formHeader
style = ElementTheme.typography.fontBodyMdRegular,
)
Spacer(modifier = Modifier.height(8.dp))

View file

@ -52,6 +52,7 @@ import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.Text
@ -151,7 +152,7 @@ private fun WaitListContent(
) {
Text(
text = stringResource(CommonStrings.action_cancel),
style = ElementTheme.typography.fontBodyLgMedium,
style = ElementTheme.typography.aliasButtonText,
)
}
}
@ -222,7 +223,7 @@ private fun WaitListContent(
) {
Text(
text = stringResource(id = CommonStrings.action_continue),
style = ElementTheme.typography.fontBodyLgMedium,
style = ElementTheme.typography.aliasButtonText,
)
}
}

View file

@ -79,6 +79,7 @@ import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.designsystem.utils.rememberSnackbarHostState
import io.element.android.libraries.matrix.api.core.UserId
import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSendState
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.collections.immutable.ImmutableList
import timber.log.Timber
@ -307,9 +308,8 @@ fun MessagesViewTopBar(
Avatar(roomAvatar)
Spacer(modifier = Modifier.width(8.dp))
Text(
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
text = roomTitle,
style = ElementTheme.typography.fontBodyLgMedium,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

View file

@ -66,12 +66,10 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemUnknownContent
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
import io.element.android.features.messages.impl.utils.messagesummary.MessageSummaryFormatterImpl
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.text.toSp
import io.element.android.libraries.designsystem.theme.components.Divider
import io.element.android.libraries.designsystem.theme.components.Icon
@ -221,7 +219,7 @@ private fun SheetContent(
private fun MessageSummary(event: TimelineItem.Event, modifier: Modifier = Modifier) {
val content: @Composable () -> Unit
var icon: @Composable () -> Unit = { Avatar(avatarData = event.senderAvatar.copy(size = AvatarSize.MessageActionSender)) }
val contentStyle = ElementTextStyles.Regular.bodyMD.copy(color = MaterialTheme.colorScheme.secondary)
val contentStyle = ElementTheme.typography.fontBodyMdRegular.copy(color = MaterialTheme.colorScheme.secondary)
val imageModifier = Modifier
.size(AvatarSize.MessageActionSender.dp)
.clip(RoundedCornerShape(9.dp))
@ -306,7 +304,7 @@ private fun MessageSummary(event: TimelineItem.Event, modifier: Modifier = Modif
if (event.senderDisplayName != null) {
Text(
text = event.senderDisplayName,
style = ElementTextStyles.Bold.caption1,
style = ElementTheme.typography.fontBodySmMedium,
color = MaterialTheme.colorScheme.primary
)
}
@ -316,7 +314,7 @@ private fun MessageSummary(event: TimelineItem.Event, modifier: Modifier = Modif
Spacer(modifier = Modifier.width(16.dp))
Text(
event.sentTime,
style = ElementTextStyles.Regular.caption2,
style = ElementTheme.typography.fontBodyXsRegular,
color = MaterialTheme.colorScheme.secondary,
textAlign = TextAlign.End,
)

View file

@ -38,13 +38,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.ProgressDialog
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
@ -54,6 +51,7 @@ import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.components.dialogs.ErrorDialogDefaults
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Divider
import io.element.android.libraries.designsystem.theme.components.RadioButton
import io.element.android.libraries.designsystem.theme.components.Scaffold
@ -67,6 +65,7 @@ import io.element.android.libraries.designsystem.theme.roomListRoomName
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.matrix.api.room.RoomSummaryDetails
import io.element.android.libraries.matrix.ui.components.SelectedRoom
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.collections.immutable.ImmutableList
@ -112,7 +111,12 @@ fun ForwardMessagesView(
modifier = modifier,
topBar = {
TopAppBar(
title = { Text(stringResource(CommonStrings.common_forward_message), style = ElementTextStyles.Bold.callout) },
title = {
Text(
text = stringResource(CommonStrings.common_forward_message),
style = ElementTheme.typography.aliasScreenTitle
)
},
navigationIcon = {
BackButton(onClick = { onBackButton(state) })
},
@ -248,8 +252,7 @@ internal fun RoomSummaryView(
) {
// Name
Text(
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.fontBodyLgRegular,
text = summary.name,
color = MaterialTheme.roomListRoomName(),
maxLines = 1,
@ -259,7 +262,7 @@ internal fun RoomSummaryView(
Text(
text = roomAlias,
color = MaterialTheme.roomListRoomMessage(),
fontSize = 14.sp,
style = ElementTheme.typography.fontBodySmRegular,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

View file

@ -66,6 +66,7 @@ import io.element.android.libraries.designsystem.R
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.OnLifecycleEvent
import io.element.android.libraries.theme.ElementTheme
import me.saket.telephoto.zoomable.ZoomSpec
import me.saket.telephoto.zoomable.ZoomableState
import me.saket.telephoto.zoomable.coil.ZoomableAsyncImage
@ -238,7 +239,7 @@ fun MediaFileView(
Text(
text = info.name,
maxLines = 2,
fontSize = 16.sp,
style = ElementTheme.typography.fontBodyLgRegular,
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.primary
@ -246,7 +247,7 @@ fun MediaFileView(
Spacer(modifier = Modifier.height(4.dp))
Text(
text = formatFileExtensionAndSize(info.fileExtension, info.formattedFileSize),
fontSize = 14.sp,
style = ElementTheme.typography.fontBodyMdRegular,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = MaterialTheme.colorScheme.primary

View file

@ -38,22 +38,22 @@ import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@ -87,8 +87,7 @@ fun ReportMessageView(
title = {
Text(
stringResource(CommonStrings.action_report_content),
style = ElementTextStyles.Regular.callout,
fontWeight = FontWeight.Medium,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = {
@ -120,7 +119,7 @@ fun ReportMessageView(
)
Text(
text = stringResource(CommonStrings.report_content_explanation),
style = ElementTextStyles.Regular.caption1,
style = ElementTheme.typography.fontBodySmRegular,
color = MaterialTheme.colorScheme.secondary,
textAlign = TextAlign.Start,
modifier = Modifier.padding(top = 4.dp, bottom = 24.dp, start = 16.dp, end = 16.dp)
@ -134,11 +133,11 @@ fun ReportMessageView(
Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
Text(
text = stringResource(CommonStrings.screen_report_content_block_user),
style = ElementTextStyles.Regular.callout,
style = ElementTheme.typography.fontBodyLgRegular,
)
Text(
text = stringResource(CommonStrings.screen_report_content_block_user_hint),
style = ElementTextStyles.Regular.bodyMD,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.secondary,
)
}

View file

@ -48,6 +48,7 @@ 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.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import kotlinx.coroutines.launch
@OptIn(ExperimentalFoundationApi::class)
@ -105,8 +106,10 @@ fun EmojiPicker(
),
contentAlignment = Alignment.Center
) {
Text(text = item.unicode, fontSize = 20.sp)
}
Text(
text = item.unicode,
style = ElementTheme.typography.fontHeadingSmRegular,
) }
}
}
}

View file

@ -163,8 +163,8 @@ private fun ContentToPreview(state: BubbleState) {
contentAlignment = Alignment.Center,
) {
Text(
fontSize = 10.sp,
text = "${state.groupPosition.javaClass.simpleName} m:${state.isMine.to01()} h:${state.isHighlighted.to01()}"
text = "${state.groupPosition.javaClass.simpleName} m:${state.isMine.to01()} h:${state.isHighlighted.to01()}",
style = ElementTheme.typography.fontBodyXsRegular,
)
}
}

View file

@ -45,7 +45,6 @@ import io.element.android.features.messages.impl.R
import io.element.android.features.messages.impl.timeline.model.AggregatedReaction
import io.element.android.features.messages.impl.timeline.model.AggregatedReactionProvider
import io.element.android.features.messages.impl.timeline.model.aTimelineItemReactions
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.text.toDp
@ -117,7 +116,7 @@ private fun TextContent(
modifier = modifier
.height(reactionEmojiLineHeight.toDp()),
text = text,
style = ElementTextStyles.Regular.bodyMD
style = ElementTheme.typography.fontBodyMdRegular,
)
@Composable
@ -142,14 +141,17 @@ private fun ReactionContent(
) {
Text(
text = reaction.displayKey,
fontSize = 15.sp, lineHeight = reactionEmojiLineHeight
style = ElementTheme.typography.fontBodyMdRegular.copy(
fontSize = 15.sp,
lineHeight = reactionEmojiLineHeight,
),
)
if (reaction.count > 1) {
Spacer(modifier = Modifier.width(4.dp))
Text(
text = reaction.count.toString(),
color = if (reaction.isHighlighted) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
style = ElementTheme.typography.fontBodyMdRegular,
)
}
}
@ -176,9 +178,11 @@ internal fun MessagesReactionExtraButtonsPreview() = ElementPreview {
onClick = {}
)
MessagesReactionButton(
content = MessagesReactionsButtonContent.Reaction(aTimelineItemReactions().reactions.first().copy(
key = "A very long reaction with many characters that should be truncated"
)),
content = MessagesReactionsButtonContent.Reaction(
aTimelineItemReactions().reactions.first().copy(
key = "A very long reaction with many characters that should be truncated"
)
),
onClick = {}
)
}

View file

@ -38,12 +38,12 @@ import androidx.compose.ui.unit.dp
import io.element.android.features.messages.impl.timeline.model.TimelineItem
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
import io.element.android.libraries.core.bool.orFalse
import io.element.android.libraries.designsystem.ElementTextStyles
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.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSendState
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalFoundationApi::class)
@ -78,14 +78,14 @@ fun TimelineEventTimestampView(
if (isMessageEdited) {
Text(
stringResource(CommonStrings.common_edited_suffix),
style = ElementTextStyles.Regular.caption2,
style = ElementTheme.typography.fontBodyXsRegular,
color = tint ?: MaterialTheme.colorScheme.secondary,
)
Spacer(modifier = Modifier.width(4.dp))
}
Text(
formattedTime,
style = ElementTextStyles.Regular.caption2,
style = ElementTheme.typography.fontBodyXsRegular,
color = tint ?: MaterialTheme.colorScheme.secondary,
)
if (hasMessageSendingFailed && tint != null) {

View file

@ -336,9 +336,8 @@ private fun MessageSenderInformation(
Spacer(modifier = Modifier.width(4.dp))
Text(
text = sender,
fontSize = 14.sp,
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.titleMedium,
style = ElementTheme.typography.fontBodyMdMedium,
)
}
}
@ -393,7 +392,7 @@ private fun MessageEventBubbleContent(
onLongClick = ::onTimestampLongClick,
modifier = timestampModifier
.padding(horizontal = 4.dp, vertical = 4.dp) // Outer padding
.background(ElementTheme.legacyColors.gray300, RoundedCornerShape(10.0.dp))
.background(ElementTheme.colors.bgSubtleSecondary, RoundedCornerShape(10.0.dp))
.align(Alignment.BottomEnd)
.padding(horizontal = 4.dp, vertical = 2.dp) // Inner padding
)

View file

@ -75,13 +75,13 @@ fun TimelineItemFileView(
text = content.body,
color = ElementTheme.materialColors.primary,
maxLines = 2,
fontSize = 16.sp,
style = ElementTheme.typography.fontBodyLgRegular,
overflow = TextOverflow.Ellipsis
)
Text(
text = content.fileExtensionAndSize + extraPadding.getStr(12.sp),
color = ElementTheme.materialColors.secondary,
fontSize = 12.sp,
style = ElementTheme.typography.fontBodySmRegular,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)

View file

@ -35,6 +35,7 @@ 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.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
@Composable
fun TimelineItemInformativeView(
@ -58,7 +59,7 @@ fun TimelineItemInformativeView(
Text(
fontStyle = FontStyle.Italic,
color = MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
style = ElementTheme.typography.fontBodyMdRegular,
text = text + extraPadding.getStr(14.sp)
)
}

View file

@ -21,12 +21,12 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStateContent
import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemStateEventContent
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
import io.element.android.libraries.theme.ElementTheme
@Composable
fun TimelineItemStateView(
@ -36,7 +36,7 @@ fun TimelineItemStateView(
Text(
modifier = modifier,
color = MaterialTheme.colorScheme.secondary,
fontSize = 13.sp,
style = ElementTheme.typography.fontBodyMdRegular,
text = content.body,
textAlign = TextAlign.Center,
)

View file

@ -41,6 +41,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
private val CORNER_RADIUS = 8.dp
@ -76,7 +77,7 @@ fun GroupHeaderView(
Text(
text = text,
color = MaterialTheme.colorScheme.secondary,
fontSize = 13.sp
style = ElementTheme.typography.fontBodyMdRegular,
)
val icon = if (isExpanded) {
Icons.Default.ExpandLess

View file

@ -35,11 +35,12 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.features.messages.impl.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.Text
import io.element.android.features.messages.impl.R
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import kotlinx.coroutines.launch
@Composable
@ -112,11 +113,17 @@ private fun ColumnScope.RetrySendMenuContents(
val coroutineScope = rememberCoroutineScope()
ListItem(headlineContent = {
Text(stringResource(R.string.screen_room_retry_send_menu_title), fontWeight = FontWeight.Medium)
Text(
text = stringResource(R.string.screen_room_retry_send_menu_title),
style = ElementTheme.typography.fontBodyLgMedium,
)
})
ListItem(
headlineContent = {
Text(stringResource(R.string.screen_room_retry_send_menu_send_again_action))
Text(
text = stringResource(R.string.screen_room_retry_send_menu_send_again_action),
style = ElementTheme.typography.fontBodyLgRegular,
)
},
modifier = Modifier.clickable {
coroutineScope.launch {
@ -127,7 +134,10 @@ private fun ColumnScope.RetrySendMenuContents(
)
ListItem(
headlineContent = {
Text(stringResource(R.string.screen_room_retry_send_menu_remove_action))
Text(
text = stringResource(R.string.screen_room_retry_send_menu_remove_action),
style = ElementTheme.typography.fontBodyLgRegular,
)
},
colors = ListItemDefaults.colors(headlineColor = MaterialTheme.colorScheme.error),
modifier = Modifier.clickable {

View file

@ -33,6 +33,7 @@ import io.element.android.features.messages.impl.timeline.model.virtual.Timeline
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
import io.element.android.libraries.theme.ElementTheme
@Composable
internal fun TimelineItemDaySeparatorView(
@ -48,7 +49,7 @@ internal fun TimelineItemDaySeparatorView(
) {
Text(
text = model.formattedDate,
style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Medium),
style = ElementTheme.typography.fontBodyMdMedium,
color = MaterialTheme.colorScheme.primary,
)
}

View file

@ -18,7 +18,6 @@ package io.element.android.features.messages.impl.timeline.debug
import android.content.ClipData
import android.content.ClipboardManager
import android.content.Context
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
@ -52,16 +51,17 @@ import androidx.compose.ui.platform.LocalInspectionMode
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.content.getSystemService
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.matrix.api.core.EventId
import io.element.android.libraries.theme.ElementTheme
/**
* Screen used to display debug info for events.
@ -83,18 +83,22 @@ fun EventDebugInfoView(
topBar = {
TopAppBar(
title = {
Text("Debug event info")
Text(
text = "Debug event info",
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = { BackButton(onClick = onBackPressed) }
)
},
modifier = modifier
) { padding ->
LazyColumn(modifier = Modifier
.fillMaxWidth()
.padding(padding) // Window insets
.consumeWindowInsets(padding)
.padding(horizontal = 16.dp) // Internal padding
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.padding(padding) // Window insets
.consumeWindowInsets(padding)
.padding(horizontal = 16.dp) // Internal padding
) {
item {
Column(Modifier.padding(vertical = 10.dp), verticalArrangement = Arrangement.spacedBy(6.dp)) {
@ -161,7 +165,11 @@ private fun CopyableText(
.padding(6.dp)
.clickable { clipboardManager.setPrimaryClip(ClipData.newPlainText("JSON", text)) }
) {
Text(text = text, fontFamily = FontFamily.Monospace, fontSize = 14.sp, modifier = Modifier.padding(8.dp))
Text(
text = text,
style = ElementTheme.typography.fontBodyMdRegular.copy(fontFamily = FontFamily.Monospace),
modifier = Modifier.padding(8.dp),
)
}
}

View file

@ -45,9 +45,9 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -98,7 +98,7 @@ private fun Indicator(modifier: Modifier = Modifier) {
Spacer(modifier = Modifier.width(8.dp))
Text(
text = stringResource(CommonStrings.common_offline),
style = ElementTextStyles.Regular.bodyMD.copy(fontWeight = FontWeight.Medium),
style = ElementTheme.typography.fontBodyMdMedium,
color = tint,
)
}

View file

@ -44,6 +44,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMo
import io.element.android.libraries.designsystem.atomic.pages.OnBoardingPage
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
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.OutlinedButton
@ -166,7 +167,7 @@ private fun OnBoardingButtons(
Spacer(Modifier.width(14.dp))
Text(
text = stringResource(id = R.string.screen_onboarding_sign_in_with_qr_code),
style = ElementTheme.typography.fontBodyLgMedium,
style = ElementTheme.typography.aliasButtonText,
)
}
}
@ -179,7 +180,7 @@ private fun OnBoardingButtons(
) {
Text(
text = stringResource(id = signInButtonStringRes),
style = ElementTheme.typography.fontBodyLgMedium,
style = ElementTheme.typography.aliasButtonText,
)
}
if (state.canCreateAccount) {
@ -191,7 +192,7 @@ private fun OnBoardingButtons(
) {
Text(
text = stringResource(id = R.string.screen_onboarding_sign_up),
style = ElementTheme.typography.fontBodyLgMedium,
style = ElementTheme.typography.aliasButtonText,
)
}
}

View file

@ -57,7 +57,6 @@ import io.element.android.features.roomdetails.impl.blockuser.BlockUserDialogs
import io.element.android.features.roomdetails.impl.blockuser.BlockUserSection
import io.element.android.features.roomdetails.impl.members.details.RoomMemberHeaderSection
import io.element.android.features.roomdetails.impl.members.details.RoomMemberMainActionsSection
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
@ -77,6 +76,7 @@ import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.matrix.api.room.RoomMember
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalLayoutApi::class)
@ -234,10 +234,10 @@ internal fun RoomHeaderSection(
)
}
Spacer(modifier = Modifier.height(24.dp))
Text(roomName, style = ElementTextStyles.Bold.title1)
Text(roomName, style = ElementTheme.typography.fontHeadingLgBold)
if (roomAlias != null) {
Spacer(modifier = Modifier.height(6.dp))
Text(roomAlias, style = ElementTextStyles.Regular.body, color = MaterialTheme.colorScheme.secondary)
Text(roomAlias, style = ElementTheme.typography.fontBodyLgRegular, color = MaterialTheme.colorScheme.secondary)
}
Spacer(Modifier.height(32.dp))
}

View file

@ -52,11 +52,9 @@ import androidx.compose.ui.focus.FocusManager
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.roomdetails.impl.R
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.components.LabelledTextField
@ -68,6 +66,8 @@ import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
@ -75,6 +75,7 @@ import io.element.android.libraries.designsystem.theme.components.TextButton
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.matrix.ui.components.AvatarActionBottomSheet
import io.element.android.libraries.matrix.ui.components.UnsavedAvatar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.coroutines.launch
@ -106,8 +107,7 @@ fun RoomDetailsEditView(
title = {
Text(
text = stringResource(id = R.string.screen_room_details_edit_room_title),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = { BackButton(onClick = onBackPressed) },
@ -121,7 +121,7 @@ fun RoomDetailsEditView(
) {
Text(
text = stringResource(CommonStrings.action_save),
fontSize = 16.sp,
style = ElementTheme.typography.aliasButtonText,
)
}
}
@ -264,8 +264,7 @@ private fun LabelledReadOnlyField(
) {
Text(
modifier = Modifier.padding(horizontal = 16.dp),
style = MaterialTheme.typography.titleSmall,
fontWeight = FontWeight.Normal,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.primary,
text = title,
)

View file

@ -29,16 +29,15 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.roomdetails.impl.R
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Divider
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.SearchBar
@ -52,6 +51,7 @@ import io.element.android.libraries.matrix.ui.components.CheckableUserRow
import io.element.android.libraries.matrix.ui.components.SelectedUsersList
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.libraries.matrix.ui.model.getBestName
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.collections.immutable.ImmutableList
@ -122,8 +122,7 @@ fun RoomInviteMembersTopBar(
title = {
Text(
text = stringResource(R.string.screen_room_details_invite_people_title),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = { BackButton(onClick = onBackPressed) },
@ -174,8 +173,8 @@ private fun RoomInviteMembersSearchBar(
resultState = state,
resultHandler = { results ->
Text(
text = "Search results",
fontWeight = FontWeight.Medium,
text = stringResource(id = CommonStrings.common_search_results),
style = ElementTheme.typography.fontBodyLgMedium,
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, top = 12.dp, end = 16.dp, bottom = 8.dp)

View file

@ -36,19 +36,17 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.pluralStringResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.roomdetails.impl.R
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.SearchBar
@ -60,6 +58,7 @@ import io.element.android.libraries.matrix.api.core.UserId
import io.element.android.libraries.matrix.api.room.RoomMember
import io.element.android.libraries.matrix.api.user.MatrixUser
import io.element.android.libraries.matrix.ui.components.MatrixUserRow
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.collections.immutable.ImmutableList
@ -163,10 +162,8 @@ private fun LazyListScope.roomMemberListSection(
Text(
modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
text = headerText(),
fontSize = 16.sp,
style = ElementTextStyles.Regular.callout,
style = ElementTheme.typography.fontBodyLgRegular,
color = MaterialTheme.colorScheme.secondary,
textAlign = TextAlign.Start,
)
}
items(members) { matrixUser ->
@ -208,8 +205,7 @@ private fun RoomMemberListTopBar(
title = {
Text(
text = stringResource(R.string.screen_room_details_people_title),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
style = ElementTheme.typography.aliasScreenTitle,
)
},
navigationIcon = { BackButton(onClick = onBackPressed) },
@ -221,7 +217,7 @@ private fun RoomMemberListTopBar(
) {
Text(
text = stringResource(CommonStrings.action_invite),
fontSize = 16.sp,
style = ElementTheme.typography.aliasButtonText,
)
}
}

View file

@ -43,7 +43,6 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.features.roomdetails.impl.blockuser.BlockUserDialogs
import io.element.android.features.roomdetails.impl.blockuser.BlockUserSection
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
@ -57,6 +56,7 @@ import io.element.android.libraries.designsystem.preview.LargeHeightPreview
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@ -118,10 +118,10 @@ internal fun RoomMemberHeaderSection(
}
Spacer(modifier = Modifier.height(24.dp))
if (userName != null) {
Text(userName, style = ElementTextStyles.Bold.title1)
Text(userName, style = ElementTheme.typography.fontHeadingLgBold)
Spacer(modifier = Modifier.height(6.dp))
}
Text(userId, style = ElementTextStyles.Regular.body, color = MaterialTheme.colorScheme.secondary)
Text(userId, style = ElementTheme.typography.fontBodyLgRegular, color = MaterialTheme.colorScheme.secondary)
Spacer(Modifier.height(40.dp))
}
}

View file

@ -40,6 +40,7 @@ import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalMaterial3Api::class)
@ -79,13 +80,16 @@ private fun RoomListModalBottomSheetContent(
headlineContent = {
Text(
text = contextMenu.roomName,
fontWeight = FontWeight.Bold,
style = ElementTheme.typography.fontBodyLgMedium,
)
}
)
ListItem(
headlineContent = {
Text(text = stringResource(id = CommonStrings.common_settings))
Text(
text = stringResource(id = CommonStrings.common_settings),
style = MaterialTheme.typography.bodyLarge,
)
},
modifier = Modifier.clickable { onRoomSettingsClicked(contextMenu.roomId) },
leadingContent = {
@ -102,6 +106,7 @@ private fun RoomListModalBottomSheetContent(
Text(
text = stringResource(id = CommonStrings.action_leave_room),
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodyLarge,
)
},
modifier = Modifier.clickable { onLeaveRoomClicked(contextMenu.roomId) },

View file

@ -35,13 +35,14 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.features.roomlist.impl.R
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
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.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -65,7 +66,7 @@ internal fun RequestVerificationHeader(
Text(
stringResource(R.string.session_verification_banner_title),
modifier = Modifier.weight(1f),
style = ElementTextStyles.Bold.body,
style = ElementTheme.typography.fontBodyLgMedium,
color = MaterialTheme.colorScheme.primary,
textAlign = TextAlign.Start,
)
@ -78,7 +79,7 @@ internal fun RequestVerificationHeader(
Spacer(modifier = Modifier.height(4.dp))
Text(
stringResource(R.string.session_verification_banner_message),
style = ElementTextStyles.Regular.bodyMD
style = ElementTheme.typography.fontBodyMdRegular,
)
Spacer(modifier = Modifier.height(12.dp))
Button(
@ -88,7 +89,7 @@ internal fun RequestVerificationHeader(
) {
Text(
stringResource(CommonStrings.action_continue),
style = ElementTextStyles.Button
style = ElementTheme.typography.aliasButtonText
)
}
}

View file

@ -24,7 +24,6 @@ import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.outlined.BugReport
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.material3.rememberTopAppBarState
@ -37,15 +36,14 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.roomlist.impl.R
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.DropdownMenu
import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
import io.element.android.libraries.designsystem.theme.components.DropdownMenuItemText
@ -113,10 +111,12 @@ private fun DefaultRoomListTopBar(
modifier = modifier
.nestedScroll(scrollBehavior.nestedScrollConnection),
title = {
val fontSize = if (scrollBehavior.state.collapsedFraction > 0.5) 20.sp else 22.sp
val fontStyle = if (scrollBehavior.state.collapsedFraction > 0.5)
ElementTheme.typography.aliasScreenTitle
else
ElementTheme.typography.fontHeadingLgBold
Text(
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.headlineMedium.copy(fontSize = fontSize),
style = fontStyle,
text = stringResource(id = R.string.screen_roomlist_main_space_title)
)
},

View file

@ -41,16 +41,17 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.api.verification.VerificationEmoji
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
import io.element.android.features.verifysession.impl.VerifySelfSessionState.VerificationStep as FlowStep
@ -158,11 +159,14 @@ internal fun ContentVerifying(verificationFlowStep: FlowStep.Verifying, modifier
@Composable
internal fun EmojiItemView(emoji: VerificationEmoji, modifier: Modifier = Modifier) {
Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier) {
Text(emoji.code, fontSize = 34.sp)
Text(
text = emoji.code,
style = ElementTheme.typography.fontBodyMdRegular.copy(fontSize = 34.sp),
)
Spacer(modifier = Modifier.height(16.dp))
Text(
emoji.name,
style = ElementTextStyles.Regular.bodyMD,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.secondary,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
@ -227,7 +231,10 @@ internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit)
onClick = negativeButtonCallback,
enabled = negativeButtonEnabled,
) {
Text(stringResource(negativeButtonTitle), fontSize = 16.sp)
Text(
text = stringResource(negativeButtonTitle),
style = ElementTheme.typography.aliasButtonText,
)
}
}
}

View file

@ -1,234 +0,0 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.designsystem
import androidx.compose.ui.text.PlatformTextStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp
// TODO Remove
object ElementTextStyles {
@Suppress("DEPRECATION")
val Button = TextStyle(
fontSize = 16.sp,
fontWeight = FontWeight.Medium,
lineHeight = 22.sp,
fontStyle = FontStyle.Normal,
textAlign = TextAlign.Center,
platformStyle = PlatformTextStyle(includeFontPadding = false)
)
object Bold {
val largeTitle = TextStyle(
fontSize = 34.sp,
fontWeight = FontWeight.Bold,
fontStyle = FontStyle.Normal,
lineHeight = 41.sp,
textAlign = TextAlign.Center
)
val title1 = TextStyle(
fontSize = 28.sp,
fontWeight = FontWeight.Bold,
fontStyle = FontStyle.Normal,
lineHeight = 34.sp,
textAlign = TextAlign.Center
)
val title2 = TextStyle(
fontSize = 22.sp,
fontWeight = FontWeight.Bold,
fontStyle = FontStyle.Normal,
lineHeight = 28.sp,
textAlign = TextAlign.Center
)
val title3 = TextStyle(
fontSize = 20.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 25.sp,
textAlign = TextAlign.Center
)
val headline = TextStyle(
fontSize = 17.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 22.sp,
textAlign = TextAlign.Center
)
val body = TextStyle(
fontSize = 17.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 22.sp,
textAlign = TextAlign.Center
)
val callout = TextStyle(
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 21.sp,
textAlign = TextAlign.Center
)
val subheadline = TextStyle(
fontSize = 15.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 20.sp,
textAlign = TextAlign.Center
)
val footnote = TextStyle(
fontSize = 13.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 18.sp,
textAlign = TextAlign.Center
)
val caption1 = TextStyle(
fontSize = 12.sp,
fontWeight = FontWeight.Medium,
fontStyle = FontStyle.Normal,
lineHeight = 16.sp,
textAlign = TextAlign.Center
)
val caption2 = TextStyle(
fontSize = 11.sp,
fontWeight = FontWeight.Medium,
fontStyle = FontStyle.Normal,
lineHeight = 13.sp,
textAlign = TextAlign.Center
)
}
object Regular {
val largeTitle = TextStyle(
fontSize = 34.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 41.sp,
textAlign = TextAlign.Center
)
val title1 = TextStyle(
fontSize = 28.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 34.sp,
textAlign = TextAlign.Center
)
val title2 = TextStyle(
fontSize = 22.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 28.sp,
textAlign = TextAlign.Center
)
val title3 = TextStyle(
fontSize = 20.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 25.sp,
textAlign = TextAlign.Center
)
val headline = TextStyle(
fontSize = 17.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Normal,
lineHeight = 22.sp,
textAlign = TextAlign.Center
)
val body = TextStyle(
fontSize = 17.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 22.sp,
textAlign = TextAlign.Center
)
val callout = TextStyle(
fontSize = 16.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 21.sp,
textAlign = TextAlign.Center
)
val subheadline = TextStyle(
fontSize = 15.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 20.sp,
textAlign = TextAlign.Center
)
val formHeader = TextStyle(
fontSize = 14.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 20.sp,
textAlign = TextAlign.Start
)
val bodyMD = TextStyle(
fontSize = 14.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 20.sp,
textAlign = TextAlign.Start
)
val footnote = TextStyle(
fontSize = 13.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 18.sp,
textAlign = TextAlign.Center
)
val caption1 = TextStyle(
fontSize = 12.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 16.sp,
textAlign = TextAlign.Center
)
val caption2 = TextStyle(
fontSize = 11.sp,
fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Normal,
lineHeight = 13.sp,
textAlign = TextAlign.Center
)
}
}

View file

@ -36,6 +36,7 @@ import androidx.compose.ui.unit.dp
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.libraries.designsystem.theme.temporaryColorBgSpecial
import io.element.android.libraries.theme.ElementTheme
/**
@ -59,7 +60,7 @@ fun RoundedIconAtom(
modifier = modifier
.size(size.toContainerSize())
.background(
color = ElementTheme.legacyColors.quinary,
color = ElementTheme.colors.temporaryColorBgSpecial,
shape = RoundedCornerShape(size.toCornerSize())
)
) {

View file

@ -29,13 +29,13 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.R
import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
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
import io.element.android.libraries.theme.ElementTheme
/**
* IconTitleSubtitleMolecule is a molecule which displays an icon, a title and a subtitle.
@ -71,7 +71,7 @@ fun IconTitleSubtitleMolecule(
modifier = Modifier
.fillMaxWidth(),
textAlign = TextAlign.Center,
style = ElementTextStyles.Bold.title2,
style = ElementTheme.typography.fontHeadingMdBold,
color = MaterialTheme.colorScheme.primary,
)
Spacer(Modifier.height(8.dp))
@ -79,7 +79,7 @@ fun IconTitleSubtitleMolecule(
text = subTitle,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = ElementTextStyles.Regular.subheadline,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.secondary,
)
}

View file

@ -23,13 +23,13 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
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
import io.element.android.libraries.designsystem.theme.components.TextField
import io.element.android.libraries.theme.ElementTheme
@Composable
fun LabelledTextField(
@ -47,8 +47,7 @@ fun LabelledTextField(
) {
Text(
modifier = Modifier.padding(horizontal = 16.dp),
style = MaterialTheme.typography.titleSmall,
fontWeight = FontWeight.Normal,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.primary,
text = label
)

View file

@ -94,7 +94,7 @@ private fun InitialsAvatar(
Text(
modifier = Modifier.align(Alignment.Center),
text = avatarData.initial,
fontSize = avatarData.size.dp.toSp() / 2,
style = ElementTheme.typography.fontBodyMdRegular.copy(fontSize = avatarData.size.dp.toSp() / 2),
color = Color.White,
)
}

View file

@ -32,13 +32,14 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.theme.aliasButtonText
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.ElementButtonDefaults
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
/**
* A component that will display a button with an indeterminate circular progressbar.
@ -64,7 +65,9 @@ fun ButtonWithProgress(
) {
Button(
onClick = {
if (!showProgress) { onClick() }
if (!showProgress) {
onClick()
}
},
modifier = modifier,
enabled = enabled,
@ -85,10 +88,10 @@ fun ButtonWithProgress(
)
if (progressText != null) {
Spacer(Modifier.width(10.dp))
Text(progressText, style = ElementTextStyles.Button)
Text(progressText, style = ElementTheme.typography.aliasButtonText)
}
} else if (text != null) {
Text(text, style = ElementTextStyles.Button)
Text(text, style = ElementTheme.typography.aliasButtonText)
}
}
}

View file

@ -33,14 +33,13 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
@Composable
fun MainActionButton(
@ -71,7 +70,7 @@ fun MainActionButton(
Spacer(modifier = Modifier.height(14.dp))
Text(
title,
style = ElementTextStyles.Regular.bodyMD.copy(fontWeight = FontWeight.Medium),
style = ElementTheme.typography.fontBodyMdMedium,
color = tintColor,
)
}

View file

@ -38,8 +38,8 @@ import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.Placeable
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import kotlin.math.max
@Composable
@ -72,24 +72,26 @@ internal fun SimpleAlertDialogContent(
// If there is a 3rd item it should be at the end of the dialog
// Having this 3rd action is discouraged, see https://m3.material.io/components/dialogs/guidelines#e13b68f5-e367-4275-ad6f-c552ee8e358f
TextButton(onClick = onThirdButtonClicked) {
Text(thirdButtonText)
Text(
text = thirdButtonText,
style = ElementTheme.typography.fontBodyMdRegular,
)
}
}
TextButton(onClick = onCancelClicked) {
Text(cancelText)
Text(
text = cancelText,
style = ElementTheme.typography.fontBodyMdRegular,
)
}
if (submitText != null) {
TextButton(
onClick = {
onSubmitClicked()
},
) {
TextButton(onClick = onSubmitClicked) {
Text(
submitText,
text = submitText,
style = if (emphasizeSubmitButton) {
ElementTextStyles.Bold.subheadline
ElementTheme.typography.fontBodyMdMedium
} else {
MaterialTheme.typography.labelLarge
ElementTheme.typography.fontBodyMdRegular
}
)
}
@ -98,10 +100,18 @@ internal fun SimpleAlertDialogContent(
},
modifier = modifier,
title = {
if (title != null) { Text(text = title) }
if (title != null) {
Text(
text = title,
style = ElementTheme.typography.fontHeadingSmRegular,
)
}
},
text = {
Text(content)
Text(
text = content,
style = ElementTheme.typography.fontBodyMdRegular,
)
},
shape = shape,
containerColor = containerColor,

View file

@ -29,6 +29,7 @@ import androidx.compose.ui.unit.Dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -51,19 +52,31 @@ fun RetryDialog(
modifier = modifier,
onDismissRequest = onDismiss,
title = {
Text(title)
Text(
text = title,
style = ElementTheme.typography.fontHeadingSmRegular,
)
},
text = {
Text(content)
Text(
text = content,
style = ElementTheme.typography.fontBodyMdRegular,
)
},
confirmButton = {
TextButton(onClick = onRetry) {
Text(retryText)
Text(
text = retryText,
style = ElementTheme.typography.fontBodyMdRegular,
)
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text(dismissText)
Text(
text = dismissText,
style = ElementTheme.typography.fontBodyMdRegular,
)
}
},
shape = shape,

View file

@ -39,6 +39,7 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
@ -94,7 +95,7 @@ fun PreferenceTopAppBar(
title = {
Text(
text = title,
style = ElementTheme.typography.fontHeadingSmMedium,
style = ElementTheme.typography.aliasScreenTitle,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

View file

@ -65,6 +65,10 @@ val SemanticColors.messageFromOtherBackground
Color(0xFF26282D)
}
// Temporary color, which is not in the token right now
val SemanticColors.temporaryColorBgSpecial
get() = if (isLight) Color(0xFFE4E8F0) else Color(0xFF3A4048)
@Preview
@Composable
internal fun ColorAliasesLightPreview() = ElementPreviewLight { ContentToPreview() }
@ -86,6 +90,7 @@ private fun ContentToPreview() {
"placeholderBackground" to ElementTheme.colors.placeholderBackground,
"messageFromMeBackground" to ElementTheme.colors.messageFromMeBackground,
"messageFromOtherBackground" to ElementTheme.colors.messageFromOtherBackground,
"temporaryColorBgSpecial" to ElementTheme.colors.temporaryColorBgSpecial,
)
)
}

View file

@ -0,0 +1,30 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.designsystem.theme
import androidx.compose.ui.text.TextStyle
import io.element.android.libraries.theme.compound.generated.TypographyTokens
/*
* This file contains aliases for TypographyTokens.
*/
val TypographyTokens.aliasScreenTitle: TextStyle
get() = fontHeadingSmMedium
val TypographyTokens.aliasButtonText: TextStyle
get() = fontBodyLgMedium

View file

@ -156,10 +156,10 @@ object ElementSearchBarDefaults {
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun inactiveColors() = SearchBarDefaults.colors(
containerColor = ElementTheme.legacyColors.gray300,
containerColor = ElementTheme.materialColors.surfaceVariant,
inputFieldColors = TextFieldDefaults.colors(
unfocusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
focusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
focusedPlaceholderColor = ElementTheme.colors.textDisabled,
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
@ -172,8 +172,8 @@ object ElementSearchBarDefaults {
fun activeColors() = SearchBarDefaults.colors(
containerColor = Color.Transparent,
inputFieldColors = TextFieldDefaults.colors(
unfocusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
focusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
focusedPlaceholderColor = ElementTheme.colors.textDisabled,
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
@ -243,19 +243,28 @@ internal fun SearchBarPreviewActiveWithContent() = ElementThemedPreview {
active = true,
resultState = SearchBarResultState.Results("result!"),
contentPrefix = {
Text(text = "Content that goes before the search results", modifier = Modifier
.background(color = Color.Red)
.fillMaxWidth())
Text(
text = "Content that goes before the search results",
modifier = Modifier
.background(color = Color.Red)
.fillMaxWidth()
)
},
contentSuffix = {
Text(text = "Content that goes after the search results", modifier = Modifier
.background(color = Color.Blue)
.fillMaxWidth())
Text(
text = "Content that goes after the search results",
modifier = Modifier
.background(color = Color.Blue)
.fillMaxWidth()
)
},
resultHandler = {
Text(text = "Results go here", modifier = Modifier
.background(color = Color.Green)
.fillMaxWidth())
Text(
text = "Results go here",
modifier = Modifier
.background(color = Color.Green)
.fillMaxWidth()
)
}
)
}

View file

@ -56,19 +56,9 @@ fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
// Will be removed, only style should be used
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
// Will be removed, only style should be used
fontWeight: FontWeight? = null,
// Will be removed, only style should be used
fontFamily: FontFamily? = null,
// Will be removed, only style should be used
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
// Will be removed, only style should be used
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
minLines: Int = 1,
@ -80,14 +70,9 @@ fun Text(
text = text,
modifier = modifier,
color = color,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
overflow = overflow,
softWrap = softWrap,
minLines = minLines,

View file

@ -34,13 +34,13 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
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.libraries.designsystem.theme.components.ModalBottomSheetLayout
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.ui.media.AvatarAction
import io.element.android.libraries.theme.ElementTheme
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
import kotlinx.coroutines.launch
@ -93,7 +93,7 @@ private fun AvatarActionBottomSheetContent(
headlineContent = {
Text(
text = stringResource(action.titleResId),
fontSize = 16.sp,
style = ElementTheme.typography.fontBodyLgRegular,
color = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
)
},

View file

@ -25,22 +25,20 @@ import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
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
import io.element.android.libraries.designsystem.theme.noFontPadding
import io.element.android.libraries.matrix.api.user.MatrixUser
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.libraries.matrix.ui.model.getBestName
import io.element.android.libraries.theme.ElementTheme
@Composable
fun MatrixUserRow(
@ -75,23 +73,20 @@ fun UserRow(
) {
// Name
Text(
fontSize = 16.sp,
fontWeight = FontWeight.Normal,
text = name,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = MaterialTheme.colorScheme.primary,
style = noFontPadding,
style = ElementTheme.typography.fontBodyLgRegular,
)
// Id
subtext?.let {
Text(
text = subtext,
color = MaterialTheme.colorScheme.secondary,
fontSize = 12.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = noFontPadding,
style = ElementTheme.typography.fontBodySmRegular,
)
}
}

View file

@ -32,7 +32,6 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@ -45,8 +44,8 @@ import io.element.android.libraries.designsystem.theme.components.Checkbox
import io.element.android.libraries.designsystem.theme.components.Divider
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.noFontPadding
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -70,13 +69,11 @@ fun UnresolvedUserRow(
) {
// ID
Text(
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
text = id,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = MaterialTheme.colorScheme.primary,
style = noFontPadding,
style = ElementTheme.typography.fontBodyLgMedium,
)
// Warning
@ -98,8 +95,7 @@ fun UnresolvedUserRow(
Text(
text = stringResource(CommonStrings.common_invite_unknown_profile),
color = MaterialTheme.colorScheme.secondary,
fontSize = 12.sp,
lineHeight = 16.sp,
style = ElementTheme.typography.fontBodySmRegular.copy(lineHeight = 16.sp),
)
}
}

View file

@ -40,6 +40,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.preview.debugPlaceholderBackground
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
import io.element.android.libraries.theme.ElementTheme
/**
@ -69,7 +70,7 @@ fun UnsavedAvatar(
contentDescription = null,
)
} else {
Box(modifier = commonModifier.background(ElementTheme.legacyColors.quinary)) {
Box(modifier = commonModifier.background(ElementTheme.colors.temporaryColorBgSpecial)) {
Icon(
imageVector = Icons.Outlined.AddAPhoto,
contentDescription = "",

View file

@ -68,14 +68,11 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.ElementTextStyles
import io.element.android.libraries.designsystem.VectorIcons
import io.element.android.libraries.designsystem.modifiers.applyIf
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
@ -141,7 +138,7 @@ fun TextComposer(
if (composerMode is MessageComposerMode.Special) {
ComposerModeView(composerMode = composerMode, onResetComposerMode = onResetComposerMode)
}
val defaultTypography = ElementTextStyles.Regular.callout.copy(textAlign = TextAlign.Start)
val defaultTypography = ElementTheme.typography.fontBodyLgRegular
Box {
BasicTextField(
modifier = Modifier

View file

@ -8,14 +8,10 @@ The module contains public tokens and color schemes that are later used in `Mate
All tokens can be accessed through the `ElementTheme` object, which contains the following properties:
* `ElementTheme.legacyColors`: contains legacy colors and custom colors not present in either Material or Compound. Usage of these colors should be avoided, and they're usually prefixed in Figma with the `Zzz/` prefix or have no name at all.
* `ElementTheme.materialColors`: contains all Material color tokens. In Figma, they're prefixed with `M3/`. It's an alias to `MaterialTheme.colorScheme`.
* `ElementTheme.colors`: contains all Compound semantic color tokens. In Figma, they're prefixed with either `Light/` or `Dark/`.
* `ElementTheme.materialTypography`: contains the Material `Typography` values. In Figma, they're prefixed with `M3/`. It's an alias to `MaterialTheme.typography`.
* `ElementTheme.typography`: contains the Compound `TypographyTokens` values. In Figma, they're prefixed with `Android/font/`.
## Adding new tokens
All new tokens **should** come from Compound and added to the `compound.generated` package. To map the literal tokens to the semantic ones, you'll have to update both `compoundColorsLight` and `compoundColorsDark` in `CompoundColors.kt`.
As we're still migrating to using Compound tokens, it's possible that you might need to add some tokens manually. In that case, you should add them to `LegacyColors.kt` and map them later in `ElementColors.kt` so they can be used in light and dark themes. However, keep in mind this is just a temporary step, as those tokens should either be added later to Compound or replaced by Compound tokens in the future.

View file

@ -1,107 +0,0 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.theme
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
import io.element.android.libraries.theme.compound.generated.internal.DarkDesignTokens
import io.element.android.libraries.theme.compound.generated.internal.LightDesignTokens
import io.element.android.libraries.theme.compound.generated.SemanticColors
/**
* Element Android legacy color palette.
*
* ## IMPORTANT!
* **We should not add any new colors here, all new colors should come from [SemanticColors] instead.**
*
* If a design needs you to add a different color here, talk to some designer first, as they'll probably be using
* the legacy color palette.
*/
@Deprecated("Use SemanticColors instead")
@Stable
class ElementColors(
quaternary: Color,
quinary: Color,
gray300: Color,
accentColor: Color,
placeholder: Color,
isLight: Boolean
) {
var quaternary by mutableStateOf(quaternary)
private set
var quinary by mutableStateOf(quinary)
private set
var gray300 by mutableStateOf(gray300)
private set
var accentColor by mutableStateOf(accentColor)
private set
var placeholder by mutableStateOf(placeholder)
private set
var isLight by mutableStateOf(isLight)
private set
fun copy(
quaternary: Color = this.quaternary,
quinary: Color = this.quinary,
gray300: Color = this.gray300,
accentColor: Color = this.accentColor,
placeholder: Color = this.placeholder,
isLight: Boolean = this.isLight,
) = ElementColors(
quaternary = quaternary,
quinary = quinary,
gray300 = gray300,
accentColor = accentColor,
placeholder = placeholder,
isLight = isLight,
)
fun updateColorsFrom(other: ElementColors) {
quaternary = other.quaternary
quinary = other.quinary
gray300 = other.gray300
accentColor = other.accentColor
placeholder = other.placeholder
isLight = other.isLight
}
}
internal fun elementColorsLight() = ElementColors(
quaternary = Gray_100,
quinary = Gray_50,
gray300 = LightDesignTokens.colorGray300,
accentColor = ElementGreen,
placeholder = LightDesignTokens.colorGray800,
isLight = true,
)
internal fun elementColorsDark() = ElementColors(
quaternary = Gray_400,
quinary = Gray_450,
gray300 = DarkDesignTokens.colorGray300,
accentColor = ElementGreen,
placeholder = DarkDesignTokens.colorGray800,
isLight = false,
)

View file

@ -44,15 +44,6 @@ import io.element.android.libraries.theme.compound.generated.TypographyTokens
* Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace
*/
object ElementTheme {
/**
* The current [ElementColors] provided by [ElementTheme]. Usage of these colors is discouraged.
* In Figma, they usually have the `Zzz` prefix or have no name at all.
*/
val legacyColors: ElementColors
@Composable
@ReadOnlyComposable
get() = LocalLegacyColors.current
/**
* The current [SemanticColors] provided by [ElementTheme].
* These come from Compound and are the recommended colors to use for custom components.
@ -72,14 +63,6 @@ object ElementTheme {
@ReadOnlyComposable
get() = MaterialTheme.colorScheme
/**
* Material 3 [Typography] tokens. In Figma, these have the `M3/` prefix.
*/
val materialTypography: Typography
@Composable
@ReadOnlyComposable
get() = MaterialTheme.typography
/**
* Compound [Typography] tokens. In Figma, these have the `Android/font/` prefix.
*/
@ -95,14 +78,12 @@ object ElementTheme {
}
/* Global variables (application level) */
internal val LocalLegacyColors = staticCompositionLocalOf { elementColorsLight() }
internal val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLight }
@Composable
fun ElementTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = false, /* true to enable MaterialYou */
legacyColors: ElementColors = if (darkTheme) elementColorsDark() else elementColorsLight(),
compoundColors: SemanticColors = if (darkTheme) compoundColorsDark else compoundColorsLight,
materialLightColors: ColorScheme = materialColorSchemeLight,
materialDarkColors: ColorScheme = materialColorSchemeDark,
@ -110,9 +91,6 @@ fun ElementTheme(
content: @Composable () -> Unit,
) {
val systemUiController = rememberSystemUiController()
val currentLegacyColor = remember(darkTheme) {
legacyColors.copy()
}.apply { updateColorsFrom(legacyColors) }
val currentCompoundColor = remember(darkTheme) {
compoundColors.copy()
}.apply { updateColorsFrom(compoundColors) }
@ -128,7 +106,6 @@ fun ElementTheme(
systemUiController.applyTheme(colorScheme = colorScheme, darkTheme = darkTheme)
}
CompositionLocalProvider(
LocalLegacyColors provides currentLegacyColor,
LocalCompoundColors provides currentCompoundColor,
) {
MaterialTheme(
@ -149,7 +126,7 @@ fun ForcedDarkElementTheme(
) {
val systemUiController = rememberSystemUiController()
val colorScheme = MaterialTheme.colorScheme
val wasDarkTheme = !ElementTheme.legacyColors.isLight
val wasDarkTheme = !ElementTheme.colors.isLight
DisposableEffect(Unit) {
onDispose {
systemUiController.applyTheme(colorScheme, wasDarkTheme)

View file

@ -17,7 +17,6 @@
package io.element.android.libraries.theme
import androidx.compose.ui.graphics.Color
import com.airbnb.android.showkase.annotation.ShowkaseColor
// =================================================================================================
// IMPORTANT!
@ -26,50 +25,4 @@ import com.airbnb.android.showkase.annotation.ShowkaseColor
// iterate through the designs. All new colors should come from Compound's Design Tokens.
// =================================================================================================
@ShowkaseColor(name = "LightGrey", group = "Material Design")
val LightGrey = Color(0x993C3C43)
@ShowkaseColor(name = "DarkGrey", group = "Material Design")
val DarkGrey = Color(0x99EBEBF5)
val SystemGreyLight = Color(0xFF8E8E93)
val SystemGreyDark = Color(0xFF8E8E93)
val SystemGrey2Light = Color(0xFFAEAEB2)
val SystemGrey2Dark = Color(0xFF636366)
val SystemGrey3Light = Color(0xFFC7C7CC)
val SystemGrey3Dark = Color(0xFF48484A)
val SystemGrey4Light = Color(0xFFD1D1D6)
val SystemGrey4Dark = Color(0xFF3A3A3C)
val SystemGrey5Light = Color(0xFFE5E5EA)
val SystemGrey5Dark = Color(0xFF2C2C2E)
val SystemGrey6Light = Color(0xFFF2F2F7)
val SystemGrey6Dark = Color(0xFF1C1C1E)
// For light themes
val Gray_25 = Color(0xFFF4F6FA)
val Gray_50 = Color(0xFFE3E8F0)
val Gray_100 = Color(0xFFC1C6CD)
val Gray_150 = Color(0xFF8D97A5)
val Gray_200 = Color(0xFF737D8C)
val Black_900 = Color(0xFF17191C)
// For dark themes
val Gray_250 = Color(0xFFA9B2BC)
val Gray_300 = Color(0xFF8E99A4)
val Gray_400 = Color(0xFF6F7882)
val Gray_450 = Color(0xFF394049)
val Black_800 = Color(0xFF15191E)
val Black_950 = Color(0xFF21262C)
val Azure = Color(0xFF368BD6)
val Kiwi = Color(0xFF74D12C)
val Grape = Color(0xFFAC3BA8)
val Verde = Color(0xFF03B381)
val Polly = Color(0xFFE64F7A)
val Melon = Color(0xFFFF812D)
val ElementGreen = Color(0xFF0DBD8B)
val ElementOrange = Color(0xFFD9B072)
val Vermilion = Color(0xFFFF5B55)
val LinkColor = Color(0xFF0086E6)

View file

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0c51ed0a004218e97af5f34e3011e0c4e4b50cccf0eff1417234186bdb786839
size 4983

View file

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1042b183b2703322af7a43d959992340b47618b27d706cfba8cf1556e70f793e
size 4984

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ff97fc37fcdb158bfeea7a201437207c6ee94b06b62127d51ab44073b78d803f
size 50174
oid sha256:434f7619fb6bd337ede775fc343acc05950907987523acbd0f578624e5d26857
size 49246

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5b370696e3dc1753ad1b76c08c68dcc436c44bb1c2f715b3fad57f51e6997394
size 51424
oid sha256:93036a30e1af96805c20ea5d65b6d3eb40d2ee11f8f3420436e936dd5b4ca38b
size 50201

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:df4db13529aa1125687e4cdbd2282b9511cbd533e8fbc9b5fcb1226ef93cfd86
size 13613
oid sha256:92fda75e246b46ab786da2f54f920bf96959618ac20cece5f6ca754f7fcf6914
size 14161

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b74b37e5bcc506e7351512b2b2c9f6b933877e67920ab90033259ecb2f0849d2
size 28040
oid sha256:a2a005b84bbf1be15028d36e153e79eb5acbe41e65e3f274a6d78b22be95efb5
size 28509

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a5576ba05fa04c1110e76a3ddb3a0d61778f007da38eac639e6f9794ec296110
size 14625
oid sha256:6bb2d3d6e83f5b0ca17809c415e636bf5dbfa846259e8fabd6c3afae37d7d1f9
size 15231

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d04ba274e93685d099ba9c407c38c339604514a446ae2055d0900b8a6f35b39f
size 28840
oid sha256:d3f7631f15054ac55688f76805a6f1924e79058881957b67284865b6508886cc
size 29249

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d9f420e553a0006b8b9823763bd1cb9790a4e681b058618f4ec4bbf709c43817
size 33552
oid sha256:d47034cafef80cdac5d702e52092f07ebc0bb96dbdd7f9f0c1ea2e302cbe9917
size 33858

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b803dd94cde258efd6ff3c5c137442f2b7967135065c06d0869553f5f5d66847
size 35201
oid sha256:84ea420320bd406588cb4d9aa3fea79d63ec37fc31a00d4fa77a06a7c8499145
size 35452

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:504a8fdf5e67a430e37d7efd1a990f1f506fe73cb1cf556ef91184624860591d
size 86041
oid sha256:d01eaadfd0b9508c44145ba2e6cd85a6a24fdb43f665188404f9da1cf3e03321
size 86292

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2869cf8af38a526ea7b5b3e387c7c01924905635dd03a049f2679e48c6e1c522
size 45289
oid sha256:0eadad4490c76da04073c25dffff74a2fe5a6a0dd7612f9c5a61a631a54edd77
size 45613

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b0457439922b1990f6fd72449c6f4042b72755e09ab9f3c9c8a8c03c9fc925eb
size 63888
oid sha256:f57dd2c8b41fca0a1ef74ae16ad720054a29ccfca3c38d5d16dbfbf8c79ef3d6
size 64119

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:98c56ef886a3d1b6b3109bb835e587176f4e420bb05057dc150c82153605f7d1
size 67794
oid sha256:45f4c5a3edbf61d815a7b1221a73123b09c8767d15ae2d9ae04f11ae3defe697
size 67911

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a2ba6ed9981ea1ad3f0cdf76d600d6a51daf58a04f15c5bf23713c7f31e84b94
size 65471
oid sha256:faf0fc318f5b70b0251b5e1334e2532f156e8ed62ef0a3608d2bf056e145f30d
size 65876

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c1f75b3ada8d9462a23b7defd26ac16562ff6ccf9babfcc7330286712ceb805e
size 69581
oid sha256:6811324cfc868722c57a02f2544ffcbbb2f2247fc9284e4e6fe869e33447c7b1
size 69939

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a9f5b609ec3828639f4f9257cf6f69affdf802238cb6d87dbd879d922c9889b6
size 56715
oid sha256:0169cdedfc56ba1b55f133ed41146a0ec3597123a88ed086f7584f06d235da26
size 57732

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:00030af95c37343791901f6990cd3c41aa65ae00d9515915b2d841cdbb0247ef
size 82801
oid sha256:a0cdeea89592fbad03e1ad29aa1616bd779403f022097ca11510ff9cda3457aa
size 83656

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7a2d26a6b91a57621f178d09b2c54ab769760145f23b216c5e9d62db82493941
size 60140
oid sha256:f61e37505ee1276d894641647ec34323f415f4a3cdc699de01579a92255c2a4e
size 60941

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4d327234d494f77c3c8a11cf32f16e80fdadbe42ea87df8b34770e000545e8de
size 85937
oid sha256:630fa772c15d8f16461655b2c2763d8ca85dc29812fea7d01366d68e3a446eaf
size 86660

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:873df9138a6dbf973c37cb76a0880d29894bda0fd92ba49c166ef7167a791344
size 21419
oid sha256:b26cfcc46bf0f1e3669424d4e135019c3a045fea09af5006fc90bca5f93e776a
size 21870

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b2567be3b27bb2ea979b7da492fb059e87b25c5938c07aacaa621a97685bacd5
size 21095
oid sha256:e3199a1e88702733887ce8d29c1373711c600060fb15cb6f24fde388d706ea86
size 21256

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:300883c3e49ff5e655952cf2b5a0a194718fde9c6fd289c3125e4cd3609cea00
size 26379
oid sha256:5312bd01a41dc0d1b022b6ce7258435d1cd9de75bd4231ce7f86ed6f84de2e4b
size 26306

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:18a343f9fce08b0ff9e12f22e1c8e4efb6f16b3eac886675c9534d088dbe3f80
size 23098
oid sha256:9bb18fdd2396fd913b2e7fe0fe40a20aa100cf4df1660d69a280e968abcaf625
size 23535

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e80d2a64eb4c39e117dbd3bdd6b1b45b19a99f8e1ccb905547f82096fae8510d
size 21465
oid sha256:8327feb32afb0d33e85c75a3f05c651149440a25834dcb926be44a13c51153e5
size 21606

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1b91f0e2d72bf5b12430183ccb98cb30e1e0ab3859472c5a6368b5cca1ceb33c
size 27574
oid sha256:1b9b88deb5557da8b4670231ee41aa737543244d61abfd399d7de0f6d4496dde
size 27439

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4233e67a2f27e3e73924b9af5f43d0e877a397f4a2ee3f8d436a713e1d2b3c0c
size 28738
oid sha256:07e722c2936e1332168319059d5b4a553b1fc7f03da8aff40b005a05b203632d
size 28679

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:69b2702985d50fedbb720e86eef63c2734e328d8537c6a8f644fcf75c7e710a8
size 32883
oid sha256:eab30f7ec6ad8e289f4987d23f373ca8f96220a5d0762d46723058bca53d0a41
size 33580

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:76681a4959008b8646273424cd50566d7c868620938e07849da596ccd3172781
size 33020
oid sha256:6a344ef3f77b759e1d43733f85fc7ee9bee98d6eb3980ce13c435bb33c0703f0
size 33720

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0052281199753556fd2d8ed411360ee15e5019e2ddd3ec2b1a9695c81be3a233
size 14402
oid sha256:6e5874a0e224636c5ad13f4022e8f2ef3dff97206a5551734de560fbc40c562a
size 14447

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:57878214b3949c4eaa782f763095e9e8234a979e0e7fe83fcf1e5083bfb32bf0
size 28878
oid sha256:1e526f418f5c8d1d0c51509808e22548ce3c295752e7a1cf28cfe394fccc01f4
size 28834

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9482e9994ab5c2367d52811fa72559d9c1660e517b5d242e7d714f3e84ba03c5
size 29271
oid sha256:97639d0985e0303e3a58120fbb7a2bba67b4279d198140a9f4cf6b19aa74bed0
size 29199

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9bb46ebec6a9fbdab74f9634d1c834c52c1f690183b3b360e24c79012ed3a192
size 34823
oid sha256:f0372c5389850f853652ad40ad54069e456aa33e13335e733d779a8d4d384049
size 35297

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fca36d620adf924e4c6605832dea8df4f2b87e7ac472c98a5ffae0056816be8a
size 34944
oid sha256:62f57ee9fc205539ede541baf8e4b887ef7776675c4760acd5b27545cd021df8
size 35420

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9b202f4160bdb58a9e87cfc66f11a5aaf66a90591c978dfc797b3cf351c94103
size 14396
oid sha256:ea79f0de34ba0613fea7ba98c65f5ff925a336ddf2d6734ea77b1a2d559527f0
size 14416

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:afc363e9509019637ad9a7b4120462e1b2679d02a4b815c5840a83336cb9616a
size 29654
oid sha256:4b13ebc73e257d5f588f9e74d0a35bc9af951faece57556636378914786429e3
size 29503

Some files were not shown because too many files have changed in this diff Show more