Merge pull request #5945 from element-hq/feature/bma/listItemFont

Use only font from compound

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

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

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)

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.
      */

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 {
+            CompoundTypographyPreview()
-                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")
         }
     }
 }
-            }
-        }
-    }
-
-    @Composable
-    private fun TypographyTokenPreview(style: TextStyle, text: String) {
-        Text(text = text, style = style)
-    }
-}

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

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

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,

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