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
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)

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