From 4402585a52b119b4c69cf17b5b9d0aca06e82bd0 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 19 Dec 2025 16:10:25 +0100 Subject: [PATCH 1/5] Use typography instead of materialTypography. --- .../impl/attachments/preview/AttachmentsPreviewView.kt | 4 ++-- .../preferences/impl/advanced/AdvancedSettingsView.kt | 2 +- .../components/dialogs/ErrorDialogWithDoNotShowAgain.kt | 4 ++-- .../designsystem/components/dialogs/TextFieldDialog.kt | 2 +- .../designsystem/theme/components/AlertDialogContent.kt | 2 +- .../libraries/designsystem/theme/components/ListItem.kt | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt index 7c9ffdaf89..8f55957e32 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt @@ -231,7 +231,7 @@ private fun ImageOptimizationSelector(state: MediaOptimizationSelectorState) { Text( modifier = Modifier.weight(1f).align(Alignment.CenterVertically), text = stringResource(R.string.screen_media_upload_preview_optimize_image_quality_title), - style = ElementTheme.materialTypography.bodyLarge, + style = ElementTheme.typography.fontBodyLgRegular, ) Switch( modifier = Modifier.height(32.dp), @@ -337,7 +337,7 @@ private fun VideoQualitySelectorDialog( supportingContent = { Text( text = preset.subtitle(), - style = ElementTheme.materialTypography.bodyMedium, + style = ElementTheme.typography.fontBodyMdRegular, color = ElementTheme.colors.textSecondary, ) }, diff --git a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsView.kt b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsView.kt index b518dae4d1..c2b51973d0 100644 --- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsView.kt +++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsView.kt @@ -234,7 +234,7 @@ private fun VideoQualitySelectorDialog( supportingContent = { Text( text = subtitle, - style = ElementTheme.materialTypography.bodyMedium, + style = ElementTheme.typography.fontBodyMdRegular, color = ElementTheme.colors.textSecondary, ) }, diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialogWithDoNotShowAgain.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialogWithDoNotShowAgain.kt index 37c9dae87e..e85725cfc0 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialogWithDoNotShowAgain.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialogWithDoNotShowAgain.kt @@ -57,14 +57,14 @@ fun ErrorDialogWithDoNotShowAgain( Column { Text( text = content, - style = ElementTheme.materialTypography.bodyMedium, + style = ElementTheme.typography.fontBodyMdRegular, ) Spacer(modifier = Modifier.height(8.dp)) Row(verticalAlignment = Alignment.CenterVertically) { Checkbox(checked = doNotShowAgain, onCheckedChange = { doNotShowAgain = it }) Text( text = stringResource(id = CommonStrings.common_do_not_show_this_again), - style = ElementTheme.materialTypography.bodyMedium, + style = ElementTheme.typography.fontBodyMdRegular, ) } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/TextFieldDialog.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/TextFieldDialog.kt index aeaaa9f040..1ce241d5d9 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/TextFieldDialog.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/TextFieldDialog.kt @@ -76,7 +76,7 @@ fun TextFieldDialog( item { Text( text = content, - style = ElementTheme.materialTypography.bodyMedium, + style = ElementTheme.typography.fontBodyMdRegular, ) } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/AlertDialogContent.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/AlertDialogContent.kt index ddc235bc9e..c9c553b7b9 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/AlertDialogContent.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/AlertDialogContent.kt @@ -65,7 +65,7 @@ internal fun SimpleAlertDialogContent( content = { Text( text = content, - style = ElementTheme.materialTypography.bodyMedium, + style = ElementTheme.typography.fontBodyMdRegular, ) }, submitText = submitText, diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListItem.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListItem.kt index 8bc09ceaa4..0da086725d 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListItem.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListItem.kt @@ -114,7 +114,7 @@ fun ListItem( val decoratedHeadlineContent: @Composable () -> Unit = { CompositionLocalProvider( - LocalTextStyle provides ElementTheme.materialTypography.bodyLarge, + LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular, LocalContentColor provides headlineColor, ) { headlineContent() @@ -123,7 +123,7 @@ fun ListItem( val decoratedSupportingContent: (@Composable () -> Unit)? = supportingContent?.let { content -> { CompositionLocalProvider( - LocalTextStyle provides ElementTheme.materialTypography.bodyMedium, + LocalTextStyle provides ElementTheme.typography.fontBodyMdRegular, LocalContentColor provides supportingColor, ) { content() From d92ac247c19654142b8bfbf3ba3c0a1dd1303195 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 19 Dec 2025 16:12:31 +0100 Subject: [PATCH 2/5] Remove `materialTypography` val from ElementTheme. We should only use `typography`. --- .../io/element/android/compound/theme/ElementTheme.kt | 8 -------- 1 file changed, 8 deletions(-) diff --git a/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt b/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt index 0f8e77a4b6..bb2ae2b62e 100644 --- a/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt +++ b/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt @@ -62,14 +62,6 @@ object ElementTheme { */ val typography: TypographyTokens = TypographyTokens - /** - * Material 3 [Typography] tokens. In Figma, these have the `M3 Typography/` prefix. - */ - val materialTypography: Typography - @Composable - @ReadOnlyComposable - get() = MaterialTheme.typography - /** * Returns whether the theme version used is the light or the dark one. */ From 8d2a683fbcfba227319366015219e3ac76854ccb Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Sat, 20 Dec 2025 18:23:50 +0100 Subject: [PATCH 3/5] Add preview for ElementTheme.typography values. --- .../android/compound/previews/Typography.kt | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/libraries/compound/src/main/kotlin/io/element/android/compound/previews/Typography.kt b/libraries/compound/src/main/kotlin/io/element/android/compound/previews/Typography.kt index 761bf12cdf..2f2ef942a7 100644 --- a/libraries/compound/src/main/kotlin/io/element/android/compound/previews/Typography.kt +++ b/libraries/compound/src/main/kotlin/io/element/android/compound/previews/Typography.kt @@ -17,13 +17,14 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import io.element.android.compound.theme.ElementTheme +import io.element.android.compound.tokens.compoundTypography @Preview @Composable internal fun TypographyPreview() = ElementTheme { Surface { Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { - with(ElementTheme.materialTypography) { + with(compoundTypography) { TypographyTokenPreview(displayLarge, "Display large") TypographyTokenPreview(displayMedium, "Display medium") TypographyTokenPreview(displaySmall, "Display small") @@ -44,6 +45,33 @@ internal fun TypographyPreview() = ElementTheme { } } +@Preview +@Composable +internal fun CompoundTypographyPreview() = ElementTheme { + Surface { + Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { + with(ElementTheme.typography) { + TypographyTokenPreview(fontHeadingXlBold, "fontHeadingXlBold") + TypographyTokenPreview(fontHeadingXlRegular, "fontHeadingXlRegular") + TypographyTokenPreview(fontHeadingLgBold, "fontHeadingLgBold") + TypographyTokenPreview(fontHeadingLgRegular, "fontHeadingLgRegular") + TypographyTokenPreview(fontHeadingMdBold, "fontHeadingMdBold") + TypographyTokenPreview(fontHeadingMdRegular, "fontHeadingMdRegular") + TypographyTokenPreview(fontHeadingSmMedium, "fontHeadingSmMedium") + TypographyTokenPreview(fontHeadingSmRegular, "fontHeadingSmRegular") + TypographyTokenPreview(fontBodyLgMedium, "fontBodyLgMedium") + TypographyTokenPreview(fontBodyLgRegular, "fontBodyLgRegular") + TypographyTokenPreview(fontBodyMdMedium, "fontBodyMdMedium") + TypographyTokenPreview(fontBodyMdRegular, "fontBodyMdRegular") + TypographyTokenPreview(fontBodySmMedium, "fontBodySmMedium") + TypographyTokenPreview(fontBodySmRegular, "fontBodySmRegular") + TypographyTokenPreview(fontBodyXsMedium, "fontBodyXsMedium") + TypographyTokenPreview(fontBodyXsRegular, "fontBodyXsRegular") + } + } + } +} + @Composable private fun TypographyTokenPreview(style: TextStyle, text: String) { Text(text = text, style = style) From 6c0caab13256869d82239410d009136ba0fb2e13 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Sun, 21 Dec 2025 11:33:07 +0100 Subject: [PATCH 4/5] Use existing preview. --- .../screenshot/CompoundTypographyTest.kt | 40 +------------------ 1 file changed, 2 insertions(+), 38 deletions(-) diff --git a/libraries/compound/src/test/kotlin/io/element/android/compound/screenshot/CompoundTypographyTest.kt b/libraries/compound/src/test/kotlin/io/element/android/compound/screenshot/CompoundTypographyTest.kt index 902bab6872..c4822f680e 100644 --- a/libraries/compound/src/test/kotlin/io/element/android/compound/screenshot/CompoundTypographyTest.kt +++ b/libraries/compound/src/test/kotlin/io/element/android/compound/screenshot/CompoundTypographyTest.kt @@ -8,18 +8,10 @@ package io.element.android.compound.screenshot -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.material3.Surface -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.unit.dp import androidx.test.ext.junit.runners.AndroidJUnit4 import com.github.takahirom.roborazzi.captureRoboImage +import io.element.android.compound.previews.CompoundTypographyPreview import io.element.android.compound.screenshot.utils.screenshotFile -import io.element.android.compound.theme.ElementTheme -import io.element.android.compound.tokens.generated.TypographyTokens import org.junit.Test import org.junit.runner.RunWith import org.robolectric.annotation.Config @@ -32,35 +24,7 @@ class CompoundTypographyTest { @Config(sdk = [35], qualifiers = "h2048dp-xxhdpi") fun screenshots() { captureRoboImage(file = screenshotFile("Compound Typography.png")) { - ElementTheme { - Surface { - Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { - with(TypographyTokens) { - TypographyTokenPreview(fontHeadingXlBold, "Heading XL Bold") - TypographyTokenPreview(fontHeadingXlRegular, "Heading XL Regular") - TypographyTokenPreview(fontHeadingLgBold, "Heading LG Bold") - TypographyTokenPreview(fontHeadingLgRegular, "Heading LG Regular") - TypographyTokenPreview(fontHeadingMdBold, "Heading MD Bold") - TypographyTokenPreview(fontHeadingMdRegular, "Heading MD Regular") - TypographyTokenPreview(fontHeadingSmMedium, "Heading SM Medium") - TypographyTokenPreview(fontHeadingSmRegular, "Heading SM Regular") - TypographyTokenPreview(fontBodyLgMedium, "Body LG Medium") - TypographyTokenPreview(fontBodyLgRegular, "Body LG Regular") - TypographyTokenPreview(fontBodyMdMedium, "Body MD Medium") - TypographyTokenPreview(fontBodyMdRegular, "Body MD Regular") - TypographyTokenPreview(fontBodySmMedium, "Body SM Medium") - TypographyTokenPreview(fontBodySmRegular, "Body SM Regular") - TypographyTokenPreview(fontBodyXsMedium, "Body XS Medium") - TypographyTokenPreview(fontBodyXsRegular, "Body XS Regular") - } - } - } - } + CompoundTypographyPreview() } } - - @Composable - private fun TypographyTokenPreview(style: TextStyle, text: String) { - Text(text = text, style = style) - } } From e5c6f1fada0bba6a92258e049f5467f52bdd8e96 Mon Sep 17 00:00:00 2001 From: ElementBot Date: Sun, 21 Dec 2025 10:46:34 +0000 Subject: [PATCH 5/5] Update screenshots --- libraries/compound/screenshots/Compound Typography.png | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libraries/compound/screenshots/Compound Typography.png b/libraries/compound/screenshots/Compound Typography.png index 095ad6c71d..22e2d92ebb 100644 --- a/libraries/compound/screenshots/Compound Typography.png +++ b/libraries/compound/screenshots/Compound Typography.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ac84a7175c4a4897aa28eddcf722b7997c6576f612eb38fa09ffabcf7be11e00 -size 119496 +oid sha256:32b12d0b26cd016a632a4cb87b71d5efcb2c0d816bf565bc90aee9963ce2d5df +size 134117