ElementTheme + MaterialTheme3

libraries/designsystem/build.gradle.kts

@@ -31,8 +31,5 @@ android {
         implementation(projects.libraries.elementresources)
         implementation(projects.libraries.uiStrings)
         ksp(libs.showkase.processor)
-
-        // This is the only module to have a (temporary) dependence to material3.
-        implementation("androidx.compose.material3:material3")
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ColorUtil.kt

@@ -16,15 +16,15 @@
 
 package io.element.android.libraries.designsystem
 
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun Boolean.toEnabledColor(): Color {
     return if (this) {
-        ElementTheme.colors.primary
+        MaterialTheme.colorScheme.primary
     } else {
-        ElementTheme.colors.primary.copy(alpha = 0.40f)
+        MaterialTheme.colorScheme.primary.copy(alpha = 0.40f)
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -31,7 +32,6 @@ import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 import kotlinx.collections.immutable.ImmutableMap
 import kotlinx.collections.immutable.persistentMapOf
@@ -85,6 +85,6 @@ fun ClickableLinkText(
             layoutResult.value = it
         },
         inlineContent = inlineContent,
-        color = ElementTheme.colors.primary,
+        color = MaterialTheme.colorScheme.primary,
     )
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/LabelledCheckbox.kt

@@ -18,13 +18,13 @@ package io.element.android.libraries.designsystem.components
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Checkbox
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -47,7 +47,7 @@ fun LabelledCheckbox(
         )
         Text(
             text = text,
-            color = ElementTheme.colors.primary,
+            color = MaterialTheme.colorScheme.primary,
         )
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -31,7 +32,6 @@ import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -50,19 +50,19 @@ fun ProgressDialog(
             modifier = modifier
                 .fillMaxWidth()
                 .background(
-                    color = ElementTheme.colors.surfaceVariant,
+                    color = MaterialTheme.colorScheme.surfaceVariant,
                     shape = RoundedCornerShape(8.dp)
                 )
         ) {
             Column(horizontalAlignment = Alignment.CenterHorizontally) {
                 CircularProgressIndicator(
                     modifier = Modifier.padding(16.dp),
-                    color = ElementTheme.colors.onSurfaceVariant
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
                 if (!text.isNullOrBlank()) {
                     Text(
                         text = text,
-                        color = ElementTheme.colors.onSurfaceVariant,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                         modifier = Modifier.padding(16.dp)
                     )
                 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ConfirmationDialog.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -33,7 +34,6 @@ import androidx.compose.ui.unit.Dp
 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.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.R as StringR
@@ -51,10 +51,10 @@ fun ConfirmationDialog(
     onThirdButtonClicked: () -> Unit = {},
     onDismiss: () -> Unit = {},
     shape: Shape = AlertDialogDefaults.shape,
-    containerColor: Color = ElementTheme.colors.surfaceVariant,
-    iconContentColor: Color = ElementTheme.colors.onSurfaceVariant,
-    titleContentColor: Color = ElementTheme.colors.onSurfaceVariant,
-    textContentColor: Color = ElementTheme.colors.onSurfaceVariant,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
+    iconContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    titleContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    textContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
     tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
 ) {
     AlertDialog(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -32,7 +33,6 @@ import androidx.compose.ui.unit.Dp
 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.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.R as StringR
@@ -45,10 +45,10 @@ fun ErrorDialog(
     submitText: String = stringResource(id = StringR.string.ok),
     onDismiss: () -> Unit = {},
     shape: Shape = AlertDialogDefaults.shape,
-    containerColor: Color = ElementTheme.colors.surfaceVariant,
-    iconContentColor: Color = ElementTheme.colors.onSurfaceVariant,
-    titleContentColor: Color = ElementTheme.colors.onSurfaceVariant,
-    textContentColor: Color = ElementTheme.colors.onSurfaceVariant,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
+    iconContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    titleContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    textContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
     tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
 ) {
     AlertDialog(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt

@@ -23,13 +23,13 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Announcement
 import androidx.compose.material.icons.filled.BugReport
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 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.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -45,12 +45,12 @@ fun PreferenceCategory(
     ) {
         Divider(
             modifier = Modifier.padding(horizontal = 16.dp),
-            color = ElementTheme.colors.secondary,
+            color = MaterialTheme.colorScheme.secondary,
             thickness = 1.dp
         )
         Text(
             modifier = Modifier.padding(top = 8.dp, start = 56.dp),
-            style = ElementTheme.typography.titleSmall,
+            style = MaterialTheme.typography.titleSmall,
             text = title
         )
         content()

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -31,7 +32,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Slider
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.toEnabledColor
@@ -63,14 +63,14 @@ fun PreferenceSlide(
             ) {
                 Text(
                     modifier = Modifier.fillMaxWidth(),
-                    style = ElementTheme.typography.bodyLarge,
+                    style = MaterialTheme.typography.bodyLarge,
                     color = enabled.toEnabledColor(),
                     text = title
                 )
                 summary?.let {
                     Text(
                         modifier = Modifier.fillMaxWidth(),
-                        style = ElementTheme.typography.bodyMedium,
+                        style = MaterialTheme.typography.bodyMedium,
                         color = enabled.toEnabledColor(),
                         text = summary
                     )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt

@@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Announcement
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -63,7 +64,7 @@ fun PreferenceSwitch(
             )
             Text(
                 modifier = Modifier.weight(1f),
-                style = ElementTheme.typography.bodyLarge,
+                style = MaterialTheme.typography.bodyLarge,
                 color = enabled.toEnabledColor(),
                 text = title
             )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt

@@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.BugReport
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -32,7 +33,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 
 @Composable
@@ -58,9 +58,9 @@ fun PreferenceText(
                 modifier = Modifier
                     .weight(1f)
                     .padding(end = preferencePaddingEnd),
-                style = ElementTheme.typography.bodyLarge,
+                style = MaterialTheme.typography.bodyLarge,
                 text = title,
-                color = ElementTheme.colors.primary,
+                color = MaterialTheme.colorScheme.primary,
             )
         }
     }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/ElementPreview.kt

@@ -18,6 +18,7 @@ package io.element.android.libraries.designsystem.preview
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import io.element.android.libraries.designsystem.theme.ElementTheme
@@ -54,7 +55,7 @@ private fun ElementPreview(
 ) {
     ElementTheme(darkTheme = darkTheme) {
         if (showBackground) {
-            Box(modifier = Modifier.background(ElementTheme.colors.background)) {
+            Box(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
                 content()
             }
         } else {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -16,14 +16,25 @@
 
 package io.element.android.libraries.designsystem.theme
 
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
 import io.element.android.libraries.designsystem.SystemGrey4Dark
 import io.element.android.libraries.designsystem.SystemGrey6Light
 
 /**
  * Room list
  */
-val ElementColors.roomListRoomName get() = primary
-val ElementColors.roomListRoomMessage get() = secondary
-val ElementColors.roomListRoomMessageDate get() = secondary
-val ElementColors.roomListUnreadIndicator get() = primary
-val ElementColors.roomListPlaceHolder get() = if (isLight) SystemGrey6Light else SystemGrey4Dark
+@Composable
+fun MaterialTheme.roomListRoomName() = colorScheme.primary
+
+@Composable
+fun MaterialTheme.roomListRoomMessage() = colorScheme.secondary
+
+@Composable
+fun MaterialTheme.roomListRoomMessageDate() = colorScheme.secondary
+
+@Composable
+fun MaterialTheme.roomListUnreadIndicator() = colorScheme.primary
+
+@Composable
+fun ElementColors.roomListPlaceHolder() = if (isLight) SystemGrey6Light else SystemGrey4Dark

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.libraries.designsystem.theme
 
+import androidx.compose.material3.darkColorScheme
 import androidx.compose.ui.graphics.Color
 import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.DarkGrey
@@ -23,24 +24,13 @@ import io.element.android.libraries.designsystem.SystemGrey5Dark
 import io.element.android.libraries.designsystem.SystemGrey6Dark
 
 fun elementColorsDark() = ElementColors(
-    primary = Color.White,
-    onPrimary = Color.Black,
-    secondary = DarkGrey,
-    text = Color.White,
-    background = Color.Black,
-    onBackground = Color.White,
-    surfaceVariant = SystemGrey5Dark,
-    onSurfaceVariant = Color.White,
     messageFromMeBackground = SystemGrey5Dark,
     messageFromOtherBackground = SystemGrey6Dark,
     messageHighlightedBackground = Azure,
-    success = Color.Green,
-    error = Color.Red,
     isLight = false,
 )
 
-/*
-private val DarkColorScheme = darkColorScheme(
+val materialColorSchemeDark = darkColorScheme(
     primary = Color.White,
     secondary = DarkGrey,
     tertiary = Color.White,
@@ -50,4 +40,3 @@ private val DarkColorScheme = darkColorScheme(
     surfaceVariant = SystemGrey5Dark,
     onSurface = Color.White,
 )
- */

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.libraries.designsystem.theme
 
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.ui.graphics.Color
 import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.LightGrey
@@ -23,24 +24,13 @@ import io.element.android.libraries.designsystem.SystemGrey5Light
 import io.element.android.libraries.designsystem.SystemGrey6Light
 
 fun elementColorsLight() = ElementColors(
-    primary = Color.Black,
-    onPrimary = Color.White,
-    secondary = LightGrey,
-    text = Color.Black,
-    background = Color.White,
-    onBackground = Color.Black,
-    surfaceVariant = SystemGrey5Light,
-    onSurfaceVariant = Color.Black,
     messageFromMeBackground = SystemGrey5Light,
     messageFromOtherBackground = SystemGrey6Light,
     messageHighlightedBackground = Azure,
-    success = Color.Green,
-    error = Color.Red,
     isLight = true,
 )
 
-/*
-private val LightColorScheme = lightColorScheme(
+val materialColorSchemeLight = lightColorScheme(
     primary = Color.Black,
     secondary = LightGrey,
     tertiary = Color.Black,
@@ -50,5 +40,4 @@ private val LightColorScheme = lightColorScheme(
     surfaceVariant = SystemGrey5Light,
     onSurface = Color.Black,
     onSurfaceVariant = Color.Black,
-
- */
+)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ContentColor.kt

@@ -1,40 +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.theme
-
-import androidx.compose.material3.LocalContentColor
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.takeOrElse
-
-@Composable
-@ReadOnlyComposable
-fun elementContentColorFor(backgroundColor: Color): Color {
-    return ElementTheme.colors.elementContentColorFor(backgroundColor).takeOrElse {
-        LocalContentColor.current
-    }
-}
-
-fun ElementColors.elementContentColorFor(backgroundColor: Color): Color {
-    return when (backgroundColor) {
-        primary -> onPrimary
-        surfaceVariant -> onSurfaceVariant
-        background -> onBackground
-        else -> Color.Unspecified
-    }
-}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt

@@ -22,41 +22,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.graphics.Color
 
 class ElementColors(
-    primary: Color,
-    onPrimary: Color,
-    secondary: Color,
-    text: Color,
-    background: Color,
-    onBackground: Color,
-    surfaceVariant: Color,
-    onSurfaceVariant: Color,
     messageFromMeBackground: Color,
     messageFromOtherBackground: Color,
     messageHighlightedBackground: Color,
-    success: Color,
-    error: Color,
     isLight: Boolean,
 ) {
-    var primary by mutableStateOf(primary)
-        private set
-    var onPrimary by mutableStateOf(onPrimary)
-        private set
-    var secondary by mutableStateOf(secondary)
-        private set
-    var text by mutableStateOf(text)
-        private set
-    var success by mutableStateOf(success)
-        private set
-    var error by mutableStateOf(error)
-        private set
-    var background by mutableStateOf(background)
-        private set
-    var onBackground by mutableStateOf(onBackground)
-        private set
-    var surfaceVariant by mutableStateOf(surfaceVariant)
-        private set
-    var onSurfaceVariant by mutableStateOf(onSurfaceVariant)
-        private set
     var messageFromMeBackground by mutableStateOf(messageFromMeBackground)
         private set
     var messageFromOtherBackground by mutableStateOf(messageFromOtherBackground)
@@ -68,51 +38,21 @@ class ElementColors(
         private set
 
     fun copy(
-        primary: Color = this.primary,
-        onPrimary: Color = this.onPrimary,
-        secondary: Color = this.secondary,
-        text: Color = this.text,
-        background: Color = this.background,
-        onBackground: Color = this.onBackground,
-        surfaceVariant: Color = this.surfaceVariant,
-        onSurfaceVariant: Color = this.onSurfaceVariant,
         messageFromMeBackground: Color = this.messageFromMeBackground,
         messageFromOtherBackground: Color = this.messageFromOtherBackground,
         messageHighlightedBackground: Color = this.messageHighlightedBackground,
-        success: Color = this.success,
-        error: Color = this.error,
         isLight: Boolean = this.isLight,
     ) = ElementColors(
-        primary = primary,
-        onPrimary = onPrimary,
-        secondary = secondary,
-        text = text,
-        background = background,
-        onBackground = onBackground,
-        surfaceVariant = surfaceVariant,
-        onSurfaceVariant = onSurfaceVariant,
         messageFromMeBackground = messageFromMeBackground,
         messageFromOtherBackground = messageFromOtherBackground,
         messageHighlightedBackground = messageHighlightedBackground,
-        success = success,
-        error = error,
         isLight = isLight,
     )
 
     fun updateColorsFrom(other: ElementColors) {
-        primary = other.primary
-        onPrimary = other.onPrimary
-        secondary = other.secondary
-        text = other.text
-        success = other.success
-        background = other.background
-        onBackground = other.onBackground
-        surfaceVariant = other.surfaceVariant
-        onSurfaceVariant = other.onSurfaceVariant
         messageFromMeBackground = other.messageFromMeBackground
         messageFromOtherBackground = other.messageFromOtherBackground
         messageHighlightedBackground = other.messageHighlightedBackground
-        error = other.error
         isLight = other.isLight
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementSpaces.kt

@@ -1,27 +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.theme
-
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-
-data class ElementSpaces(
-    val small: Dp = 4.dp,
-    val medium: Dp = 8.dp,
-    val large: Dp = 16.dp,
-    val extraLarge: Dp = 40.dp,
-)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTheme.kt

@@ -17,7 +17,8 @@
 package io.element.android.libraries.designsystem.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.ProvideTextStyle
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
@@ -35,50 +36,42 @@ object ElementTheme {
         @Composable
         @ReadOnlyComposable
         get() = LocalColors.current
-
-    val typography: ElementTypography
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalTypography.current
-
-    val spaces: ElementSpaces
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalSpaces.current
 }
 
 /* Global variables (application level) */
-val LocalSpaces = staticCompositionLocalOf { ElementSpaces() }
 val LocalColors = staticCompositionLocalOf { elementColorsLight() }
-val LocalTypography = staticCompositionLocalOf { ElementTypography() }
 
 @Composable
 fun ElementTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     lightColors: ElementColors = elementColorsLight(),
     darkColors: ElementColors = elementColorsDark(),
-    typography: ElementTypography = ElementTheme.typography,
-    spaces: ElementSpaces = ElementTheme.spaces,
+    materialLightColors: ColorScheme = materialColorSchemeLight,
+    materialDarkColors: ColorScheme = materialColorSchemeDark,
     content: @Composable () -> Unit,
 ) {
     val systemUiController = rememberSystemUiController()
     val useDarkIcons = !darkTheme
     val currentColor = remember { if (darkTheme) darkColors else lightColors }
-    SideEffect {
-        systemUiController.setStatusBarColor(
-            color = currentColor.background
-        )
-        systemUiController.setSystemBarsColor(
-            color = Color.Transparent,
-            darkIcons = useDarkIcons
-        )
-    }
     val rememberedColors = remember { currentColor.copy() }.apply { updateColorsFrom(currentColor) }
     CompositionLocalProvider(
         LocalColors provides rememberedColors,
-        LocalSpaces provides spaces,
-        LocalTypography provides typography,
     ) {
-        ProvideTextStyle(typography.body1, content = content)
+        MaterialTheme(
+            colorScheme = if (darkTheme) materialDarkColors else materialLightColors
+        ) {
+            val bgColor = MaterialTheme.colorScheme.background
+            SideEffect {
+                systemUiController.setStatusBarColor(
+                    color = bgColor
+                )
+                systemUiController.setSystemBarsColor(
+                    color = Color.Transparent,
+                    darkIcons = useDarkIcons
+                )
+            }
+
+            content()
+        }
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTypography.kt

@@ -22,6 +22,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 import com.airbnb.android.showkase.annotation.ShowkaseTypography
 
+/**
+ * TODO Provide the typo to Material3 theme.
+ */
 @ShowkaseTypography(name = "H1", group = "Element")
 val h1Default: TextStyle = TextStyle(
     fontFamily = FontFamily.SansSerif,
@@ -104,15 +107,3 @@ val titleMediumDefault: TextStyle = TextStyle(
     letterSpacing = 0.5.sp
 )
 
-data class ElementTypography(
-    val h1: TextStyle = h1Default,
-    val body1: TextStyle = body1Default,
-    val bodySmall: TextStyle = bodySmallDefault,
-    val bodyMedium: TextStyle = bodyMediumDefault,
-    val bodyLarge: TextStyle = bodyLargeDefault,
-    val headlineSmall: TextStyle = headlineSmallDefault,
-    val headlineMedium: TextStyle = headlineMediumDefault,
-    val headlineLarge: TextStyle = headlineLargeDefault,
-    val titleSmall: TextStyle = titleSmallDefault,
-    val titleMedium: TextStyle = titleMediumDefault,
-)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt

@@ -16,55 +16,46 @@
 
 package io.element.android.libraries.designsystem.theme.components
 
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.ProvideTextStyle
+import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ButtonElevation
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
-import io.element.android.libraries.designsystem.theme.elementContentColorFor
 
 @Composable
 fun Button(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    containerColor: Color = ElementTheme.colors.primary,
+    shape: Shape = ButtonDefaults.shape,
+    colors: ButtonColors = ButtonDefaults.buttonColors(),
+    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
+    border: BorderStroke? = null,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable RowScope.() -> Unit
 ) {
     androidx.compose.material3.Button(
-        colors = ButtonDefaults.buttonColors(
-            containerColor = containerColor,
-            contentColor = elementContentColorFor(backgroundColor = containerColor),
-            disabledContainerColor = containerColor
-                .copy(alpha = 0.12f)
-                .compositeOver(containerColor),
-            disabledContentColor = elementContentColorFor(backgroundColor = containerColor)
-                .copy(alpha = ContentAlpha.disabled)
-        ),
-        // TODO shape = ButtonShape,
-        // TODO elevation = ButtonDefaults.elevation(
-        //     defaultElevation = ElementTheme.elevation.default,
-        //     pressedElevation = ElementTheme.elevation.pressed
-        //     /* disabledElevation = 0.dp */
-        // ),
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        content = {
-            ProvideTextStyle(
-                value = ElementTheme.typography.body1
-            ) {
-                content()
-            }
-        }
+        shape = shape,
+        colors = colors,
+        elevation = elevation,
+        border = border,
+        contentPadding = contentPadding,
+        interactionSource = interactionSource,
+        content = content,
     )
 }
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Checkbox.kt

@@ -23,11 +23,9 @@ import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun Checkbox(
@@ -35,16 +33,7 @@ fun Checkbox(
     onCheckedChange: ((Boolean) -> Unit)?,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    colors: CheckboxColors = CheckboxDefaults.colors(
-        checkedColor = ElementTheme.colors.primary,
-        uncheckedColor = Color.Gray, // TODO ElementTheme.colors.
-        checkmarkColor = Color.Gray, // TODO ElementTheme.colors.
-        disabledCheckedColor = Color.Gray // TODO ElementTheme.colors.
-            .copy(alpha = 0.2F),
-        disabledUncheckedColor = Color.Gray // TODO ElementTheme.colors.
-            .copy(alpha = 0.2F),
-        disabledIndeterminateColor = Color.Gray // TODO ElementTheme.colors.
-    ),
+    colors: CheckboxColors = CheckboxDefaults.colors(),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
     androidx.compose.material3.Checkbox(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt

@@ -21,7 +21,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun CircularProgressIndicator(
@@ -41,7 +40,7 @@ fun CircularProgressIndicator(
 @Composable
 fun CircularProgressIndicator(
     modifier: Modifier = Modifier,
-    color: Color = ElementTheme.colors.primary,
+    color: Color = ProgressIndicatorDefaults.circularColor,
     strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
 ) {
     androidx.compose.material3.CircularProgressIndicator(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Divider.kt

@@ -24,13 +24,12 @@ 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.ElementTheme
 
 @Composable
 fun Divider(
     modifier: Modifier = Modifier,
     thickness: Dp = DividerDefaults.Thickness,
-    color: Color = ElementTheme.colors.onBackground,
+    color: Color = DividerDefaults.color,
 ) {
     androidx.compose.material3.Divider(
         modifier = modifier,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt

@@ -24,7 +24,6 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -34,13 +33,7 @@ fun MediumTopAppBar(
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
     windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
-    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(
-        containerColor = ElementTheme.colors.background,
-        scrolledContainerColor = ElementTheme.colors.background,
-        navigationIconContentColor = ElementTheme.colors.onBackground,
-        titleContentColor = ElementTheme.colors.onBackground,
-        actionIconContentColor = ElementTheme.colors.onBackground,
-    ),
+    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
     scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
     androidx.compose.material3.MediumTopAppBar(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt

@@ -22,14 +22,13 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ModalBottomSheetDefaults
 import androidx.compose.material.ModalBottomSheetState
 import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.contentColorFor
 import androidx.compose.material.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
-import io.element.android.libraries.designsystem.theme.ElementTheme
-import io.element.android.libraries.designsystem.theme.elementContentColorFor
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
@@ -39,9 +38,9 @@ fun ModalBottomSheetLayout(
     sheetState: ModalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden),
     sheetShape: Shape = MaterialTheme.shapes.large,
     sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
-    sheetBackgroundColor: Color = ElementTheme.colors.surfaceVariant,
-    sheetContentColor: Color = elementContentColorFor(sheetBackgroundColor),
-    scrimColor: Color = ElementTheme.colors.onSurfaceVariant.copy(alpha = 0.32f),
+    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
+    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
+    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
     content: @Composable () -> Unit = {}
 ) {
     androidx.compose.material.ModalBottomSheetLayout(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.selection.TextSelectionColors
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.TextFieldColors
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -35,7 +36,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.ElementGreen
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -59,6 +59,7 @@ fun OutlinedTextField(
     maxLines: Int = Int.MAX_VALUE,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     shape: Shape = TextFieldDefaults.outlinedShape,
+    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
 ) {
     androidx.compose.material3.OutlinedTextField(
         value = value,
@@ -80,39 +81,7 @@ fun OutlinedTextField(
         maxLines = maxLines,
         interactionSource = interactionSource,
         shape = shape,
-        colors = TextFieldDefaults.outlinedTextFieldColors(
-            textColor = ElementTheme.colors.primary,
-            disabledTextColor = ElementTheme.colors.primary.copy(alpha = 0.38f),
-            containerColor = Color.Transparent,
-            cursorColor = ElementTheme.colors.primary,
-            errorCursorColor = ElementTheme.colors.error,
-            selectionColors = TextSelectionColors(
-                handleColor = ElementGreen,
-                backgroundColor = ElementGreen.copy(alpha = 0.4f)
-            ),
-            focusedBorderColor = ElementTheme.colors.primary,
-            unfocusedBorderColor = ElementTheme.colors.secondary,
-            disabledBorderColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
-            errorBorderColor = ElementTheme.colors.error,
-            focusedLeadingIconColor = ElementTheme.colors.primary,
-            unfocusedLeadingIconColor = ElementTheme.colors.secondary,
-            disabledLeadingIconColor = ElementTheme.colors.secondary.copy(0.12f),
-            errorLeadingIconColor = ElementTheme.colors.error,
-            focusedTrailingIconColor = ElementTheme.colors.primary,
-            unfocusedTrailingIconColor = ElementTheme.colors.secondary,
-            disabledTrailingIconColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
-            errorTrailingIconColor = ElementTheme.colors.error,
-            focusedLabelColor = ElementTheme.colors.primary,
-            unfocusedLabelColor = ElementTheme.colors.secondary,
-            disabledLabelColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
-            errorLabelColor = ElementTheme.colors.error,
-            placeholderColor = ElementTheme.colors.secondary,
-            disabledPlaceholderColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
-            focusedSupportingTextColor = ElementTheme.colors.primary,
-            unfocusedSupportingTextColor = ElementTheme.colors.secondary,
-            disabledSupportingTextColor = ElementTheme.colors.primary.copy(alpha = 0.12f),
-            errorSupportingTextColor = ElementTheme.colors.error,
-        ),
+        colors = colors,
     )
 }
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Scaffold.kt

@@ -20,12 +20,12 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FabPosition
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScaffoldDefaults
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import io.element.android.libraries.designsystem.theme.ElementTheme
-import io.element.android.libraries.designsystem.theme.elementContentColorFor
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -36,8 +36,8 @@ fun Scaffold(
     snackbarHost: @Composable () -> Unit = {},
     floatingActionButton: @Composable () -> Unit = {},
     floatingActionButtonPosition: FabPosition = FabPosition.End,
-    containerColor: Color = ElementTheme.colors.background,
-    contentColor: Color = elementContentColorFor(containerColor),
+    containerColor: Color = MaterialTheme.colorScheme.background,
+    contentColor: Color = contentColorFor(containerColor),
     contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
     content: @Composable (PaddingValues) -> Unit
 ) {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Slider.kt

@@ -18,6 +18,7 @@ package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SliderColors
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
@@ -26,7 +27,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun Slider(
@@ -38,18 +38,7 @@ fun Slider(
     /*@IntRange(from = 0)*/
     steps: Int = 0,
     onValueChangeFinished: (() -> Unit)? = null,
-    colors: SliderColors = SliderDefaults.colors(
-        thumbColor = ElementTheme.colors.primary,
-        activeTrackColor = ElementTheme.colors.primary,
-        activeTickColor = ElementTheme.colors.primary,
-        inactiveTrackColor = ElementTheme.colors.primary,
-        inactiveTickColor = ElementTheme.colors.primary,
-        disabledThumbColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledActiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledActiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledInactiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledInactiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-    ),
+    colors: SliderColors = SliderDefaults.colors(),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
     androidx.compose.material3.Slider(

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt

@@ -17,6 +17,8 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -24,15 +26,13 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.theme.ElementTheme
-import io.element.android.libraries.designsystem.theme.elementContentColorFor
 
 @Composable
 fun Surface(
     modifier: Modifier = Modifier,
     shape: Shape = RectangleShape,
-    color: Color = ElementTheme.colors.surfaceVariant,
-    contentColor: Color = elementContentColorFor(color),
+    color: Color = MaterialTheme.colorScheme.surface,
+    contentColor: Color = contentColorFor(color),
     tonalElevation: Dp = 0.dp,
     shadowElevation: Dp = 0.dp,
     border: BorderStroke? = null,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt

@@ -22,6 +22,7 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.TextFieldColors
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -30,7 +31,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -54,6 +54,7 @@ fun TextField(
     maxLines: Int = Int.MAX_VALUE,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     shape: Shape = TextFieldDefaults.filledShape,
+    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
 ) {
     androidx.compose.material3.TextField(
         value = value,
@@ -75,13 +76,6 @@ fun TextField(
         maxLines = maxLines,
         interactionSource = interactionSource,
         shape = shape,
-        colors = TextFieldDefaults.textFieldColors(
-            textColor = ElementTheme.colors.onBackground,
-            containerColor = Color.Transparent,
-            cursorColor = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium),
-            focusedIndicatorColor = Color.Transparent,
-            unfocusedIndicatorColor = Color.Transparent,
-            disabledIndicatorColor = Color.Transparent
-        ),
+        colors = colors,
     )
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt

@@ -24,7 +24,6 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -34,13 +33,7 @@ fun TopAppBar(
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
     windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
-    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(
-        containerColor = ElementTheme.colors.background,
-        scrolledContainerColor = ElementTheme.colors.background,
-        navigationIconContentColor = ElementTheme.colors.onBackground,
-        titleContentColor = ElementTheme.colors.onBackground,
-        actionIconContentColor = ElementTheme.colors.onBackground,
-    ),
+    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
     scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
     androidx.compose.material3.TopAppBar(

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -36,7 +37,6 @@ 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.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.core.UserId
 import io.element.android.libraries.matrix.ui.model.MatrixUser
@@ -67,14 +67,14 @@ fun MatrixUserHeader(
             text = matrixUser.getBestName(),
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
-            color = ElementTheme.colors.primary,
+            color = MaterialTheme.colorScheme.primary,
             )
         // Id
         if (matrixUser.username.isNullOrEmpty().not()) {
             Spacer(modifier = Modifier.height(4.dp))
             Text(
                 text = matrixUser.id.value,
-                color = ElementTheme.colors.secondary,
+                color = MaterialTheme.colorScheme.secondary,
                 fontSize = 14.sp,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -35,7 +36,6 @@ import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.core.UserId
 import io.element.android.libraries.matrix.ui.model.MatrixUser
@@ -71,13 +71,13 @@ fun MatrixUserRow(
                 text = matrixUser.getBestName(),
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
-                color = ElementTheme.colors.primary,
+                color = MaterialTheme.colorScheme.primary,
             )
             // Id
             if (matrixUser.username.isNullOrEmpty().not()) {
                 Text(
                     text = matrixUser.id.value,
-                    color = ElementTheme.colors.secondary,
+                    color = MaterialTheme.colorScheme.secondary,
                     fontSize = 14.sp,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -21,6 +21,7 @@ import android.net.Uri
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -34,7 +35,6 @@ import androidx.core.view.isInvisible
 import androidx.core.view.isVisible
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.R as StringR
 
@@ -127,7 +127,7 @@ private fun FakeComposer(
             textAlign = TextAlign.Center,
             text = "Composer Preview",
             fontSize = 20.sp,
-            color = ElementTheme.colors.secondary,
+            color = MaterialTheme.colorScheme.secondary,
         )
     }
 }