ElementTheme + MaterialTheme3

features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt

@@ -31,6 +31,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
@@ -50,7 +51,6 @@ import io.element.android.libraries.designsystem.components.VectorIcon
 import io.element.android.libraries.designsystem.components.form.textFieldState
 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.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@@ -86,7 +86,7 @@ fun ChangeServerView(
                     .size(width = 81.dp, height = 73.dp)
                     .align(Alignment.CenterHorizontally)
                     .background(
-                        color = ElementTheme.colors.surfaceVariant,
+                        color = MaterialTheme.colorScheme.surfaceVariant,
                         shape = RoundedCornerShape(32.dp)
                     )
             ) {
@@ -108,7 +108,7 @@ fun ChangeServerView(
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
-                color = ElementTheme.colors.primary,
+                color = MaterialTheme.colorScheme.primary,
             )
             Text(
                 text = "A server is a home for all your data.\n" +
@@ -119,7 +119,7 @@ fun ChangeServerView(
                     .padding(top = 16.dp),
                 textAlign = TextAlign.Center,
                 fontSize = 16.sp,
-                color = ElementTheme.colors.secondary,
+                color = MaterialTheme.colorScheme.secondary,
             )
             var homeserverFieldState by textFieldState(stateValue = state.homeserver)
             OutlinedTextField(
@@ -150,8 +150,8 @@ fun ChangeServerView(
                         state.homeserver,
                         state.changeServerAction.error
                     ),
-                    color = ElementTheme.colors.error,
+                    color = MaterialTheme.colorScheme.error,
-                    style = ElementTheme.typography.bodySmall,
+                    style = MaterialTheme.typography.bodySmall,
                     modifier = Modifier.padding(start = 16.dp)
                 )
             }

features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt

@@ -30,6 +30,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -98,7 +99,7 @@ fun LoginRootScreen(
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
-                color = ElementTheme.colors.primary,
+                color = MaterialTheme.colorScheme.primary,
             )
             // Form
             Column(
@@ -189,8 +190,8 @@ fun LoginRootScreen(
                 if (state.loggedInState is LoggedInState.ErrorLoggingIn) {
                     Text(
                         text = loginError(state.formState, state.loggedInState.failure),
-                        color = ElementTheme.colors.error,
+                        color = MaterialTheme.colorScheme.error,
-                        style = ElementTheme.typography.bodySmall,
+                        style = MaterialTheme.typography.bodySmall,
                         modifier = Modifier.padding(start = 16.dp)
                     )
                 }

features/messages/build.gradle.kts

@@ -47,7 +47,4 @@ dependencies {
     testImplementation(libs.test.junit)
     androidTestImplementation(libs.test.junitext)
     ksp(libs.showkase.processor)
-
-    // Not for components, but other classes.
-    implementation("androidx.compose.material3:material3")
 }

features/messages/src/main/kotlin/io/element/android/features/messages/actionlist/ActionListView.kt

@@ -32,6 +32,7 @@ import androidx.compose.material.LocalContentColor
 import androidx.compose.material.ModalBottomSheetState
 import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.rememberCoroutineScope
@@ -42,7 +43,6 @@ import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.actionlist.model.TimelineItemAction
 import io.element.android.features.messages.timeline.model.TimelineItem
 import io.element.android.libraries.designsystem.components.VectorIcon
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheetLayout
 import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.launch
@@ -115,13 +115,13 @@ private fun SheetContent(
                         text = {
                             Text(
                                 text = action.title,
-                                color = if (action.destructive) ElementTheme.colors.error else Color.Unspecified,
+                                color = if (action.destructive) MaterialTheme.colorScheme.error else Color.Unspecified,
                             )
                         },
                         icon = {
                             VectorIcon(
                                 resourceId = action.icon,
-                                tint = if (action.destructive) ElementTheme.colors.error else LocalContentColor.current,
+                                tint = if (action.destructive) MaterialTheme.colorScheme.error else LocalContentColor.current,
                             )
                         }
                     )

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt

@@ -39,6 +39,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDownward
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
@@ -269,7 +270,7 @@ private fun MessageSenderInformation(
         }
         Text(
             text = sender,
-            style = ElementTheme.typography.titleMedium,
+            style = MaterialTheme.typography.titleMedium,
             modifier = Modifier
                 .alignBy(LastBaseline)
         )
@@ -328,8 +329,8 @@ internal fun BoxScope.TimelineScrollHelper(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
                 .size(40.dp),
-            containerColor = ElementTheme.colors.surfaceVariant,
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
-            contentColor = ElementTheme.colors.onSurfaceVariant
+            contentColor = MaterialTheme.colorScheme.onSurfaceVariant
         ) {
             Icon(Icons.Default.ArrowDownward, "")
         }
@@ -347,7 +348,7 @@ internal fun TimelineLoadingMoreIndicator() {
     ) {
         CircularProgressIndicator(
             strokeWidth = 2.dp,
-            color = ElementTheme.colors.primary
+            color = MaterialTheme.colorScheme.primary
         )
     }
 }

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemImageView.kt

@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalFoundationApi::class)
-
 package io.element.android.features.messages.timeline.components
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -33,7 +31,6 @@ import androidx.compose.ui.platform.LocalContext
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import io.element.android.features.messages.timeline.model.content.TimelineItemImageContent
-import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun TimelineItemImageView(
@@ -60,7 +57,7 @@ fun TimelineItemImageView(
         AsyncImage(
             model = model,
             contentDescription = null,
-            placeholder = ColorPainter(ElementTheme.colors.surfaceVariant),
+            placeholder = ColorPainter(MaterialTheme.colorScheme.surfaceVariant),
             contentScale = ContentScale.Crop,
             onSuccess = { isLoading.value = false },
         )

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemInformativeView.kt

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
+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.unit.dp
 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.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -49,14 +49,14 @@ fun TimelineItemInformativeView(
     ) {
         Icon(
             imageVector = icon,
-            tint = ElementTheme.colors.secondary,
+            tint = MaterialTheme.colorScheme.secondary,
             contentDescription = iconDescription,
             modifier = Modifier.size(16.dp)
         )
         Spacer(modifier = Modifier.width(4.dp))
         Text(
             fontStyle = FontStyle.Italic,
-            color = ElementTheme.colors.secondary,
+            color = MaterialTheme.colorScheme.secondary,
             fontSize = 14.sp,
             text = text
         )

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemReactionsView.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CornerSize
 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.unit.sp
 import com.google.accompanist.flowlayout.FlowRow
 import io.element.android.features.messages.timeline.model.AggregatedReaction
 import io.element.android.features.messages.timeline.model.TimelineItemReactions
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -56,8 +56,8 @@ fun TimelineItemReactionsView(
 fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Modifier) {
     Surface(
         modifier = modifier,
-        color = ElementTheme.colors.surfaceVariant,
+        color = MaterialTheme.colorScheme.surfaceVariant,
-        border = BorderStroke(2.dp, ElementTheme.colors.background),
+        border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
         shape = RoundedCornerShape(corner = CornerSize(12.dp)),
     ) {
         Row(
@@ -66,7 +66,7 @@ fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Mo
         ) {
             Text(text = reaction.key, fontSize = 12.sp)
             Spacer(modifier = Modifier.width(4.dp))
-            Text(text = reaction.count, color = ElementTheme.colors.secondary, fontSize = 12.sp)
+            Text(text = reaction.count, color = MaterialTheme.colorScheme.secondary, fontSize = 12.sp)
         }
     }
 }

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/html/HtmlDocument.kt

@@ -25,7 +25,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
@@ -45,8 +47,6 @@ import androidx.compose.ui.unit.sp
 import com.google.accompanist.flowlayout.FlowRow
 import io.element.android.libraries.designsystem.LinkColor
 import io.element.android.libraries.designsystem.components.ClickableLinkText
-import io.element.android.libraries.designsystem.theme.ElementColors
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.permalink.PermalinkData
@@ -214,7 +214,7 @@ private fun HtmlInline(
 ) {
     Box(modifier) {
         val styledText = buildAnnotatedString {
-            appendInlineElement(element, ElementTheme.colors)
+            appendInlineElement(element, MaterialTheme.colorScheme)
         }
         HtmlText(
             text = styledText,
@@ -232,7 +232,7 @@ private fun HtmlPreformatted(
 ) {
     val isCode = pre.firstElementChild()?.normalName() == "code"
     val backgroundColor =
-        if (isCode) ElementTheme.colors.codeBackground() else Color.Unspecified
+        if (isCode) MaterialTheme.colorScheme.codeBackground() else Color.Unspecified
     Box(
         modifier
             .background(color = backgroundColor)
@@ -255,7 +255,7 @@ private fun HtmlParagraph(
 ) {
     Box(modifier) {
         val styledText = buildAnnotatedString {
-            appendInlineChildrenElements(paragraph.childNodes(), ElementTheme.colors)
+            appendInlineChildrenElements(paragraph.childNodes(), MaterialTheme.colorScheme)
         }
         HtmlText(
             text = styledText, onClick = onTextClicked,
@@ -272,7 +272,7 @@ private fun HtmlBlockquote(
     onTextClicked: () -> Unit = {},
     onTextLongClicked: () -> Unit = {},
 ) {
-    val color = ElementTheme.colors.onBackground
+    val color = MaterialTheme.colorScheme.onBackground
     Box(
         modifier = modifier
             .drawBehind {
@@ -287,7 +287,7 @@ private fun HtmlBlockquote(
     ) {
         val text = buildAnnotatedString {
             withStyle(style = SpanStyle(fontStyle = FontStyle.Italic)) {
-                appendInlineChildrenElements(blockquote.childNodes(), ElementTheme.colors)
+                appendInlineChildrenElements(blockquote.childNodes(), MaterialTheme.colorScheme)
             }
         }
         HtmlText(
@@ -306,19 +306,19 @@ private fun HtmlHeading(
     onTextLongClicked: () -> Unit = {},
 ) {
     val style = when (heading.normalName()) {
-        "h1" -> ElementTheme.typography.headlineLarge.copy(fontSize = 30.sp)
+        "h1" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 30.sp)
-        "h2" -> ElementTheme.typography.headlineLarge.copy(fontSize = 26.sp)
+        "h2" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 26.sp)
-        "h3" -> ElementTheme.typography.headlineMedium.copy(fontSize = 22.sp)
+        "h3" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 22.sp)
-        "h4" -> ElementTheme.typography.headlineMedium.copy(fontSize = 18.sp)
+        "h4" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 18.sp)
-        "h5" -> ElementTheme.typography.headlineSmall.copy(fontSize = 14.sp)
+        "h5" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 14.sp)
-        "h6" -> ElementTheme.typography.headlineSmall.copy(fontSize = 12.sp)
+        "h6" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 12.sp)
         else -> {
             return
         }
     }
     Box(modifier) {
         val text = buildAnnotatedString {
-            appendInlineChildrenElements(heading.childNodes(), ElementTheme.colors)
+            appendInlineChildrenElements(heading.childNodes(), MaterialTheme.colorScheme)
         }
         HtmlText(
             text = text,
@@ -344,7 +344,7 @@ private fun HtmlMxReply(
         modifier = modifier
             .padding(bottom = 4.dp)
             .offset(x = -(8.dp)),
-        color = ElementTheme.colors.background,
+        color = MaterialTheme.colorScheme.background,
         shape = shape,
     ) {
         val text = buildAnnotatedString {
@@ -354,7 +354,7 @@ private fun HtmlMxReply(
                         withStyle(
                             style = SpanStyle(
                                 fontSize = 12.sp,
-                                color = ElementTheme.colors.secondary
+                                color = MaterialTheme.colorScheme.secondary
                             )
                         ) {
                             append(blockquoteNode.text())
@@ -462,13 +462,13 @@ private fun HtmlListItems(
     }
 }
 
-private fun ElementColors.codeBackground(): Color {
+private fun ColorScheme.codeBackground(): Color {
     return background.copy(alpha = 0.3f)
 }
 
 private fun AnnotatedString.Builder.appendInlineChildrenElements(
     childNodes: List<Node>,
-    colors: ElementColors
+    colors: ColorScheme
 ) {
     for (node in childNodes) {
         when (node) {
@@ -482,7 +482,7 @@ private fun AnnotatedString.Builder.appendInlineChildrenElements(
     }
 }
 
-private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ElementColors) {
+private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ColorScheme) {
     when (element.normalName()) {
         "br" -> {
             append('\n')

features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt

@@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -49,7 +50,6 @@ import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
 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.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@@ -97,7 +97,7 @@ fun BugReportView(
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
-                color = ElementTheme.colors.primary,
+                color = MaterialTheme.colorScheme.primary,
             )
             // Form
             Text(
@@ -106,7 +106,7 @@ fun BugReportView(
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp, vertical = 16.dp),
                 fontSize = 16.sp,
-                color = ElementTheme.colors.primary,
+                color = MaterialTheme.colorScheme.primary,
                 )
             var descriptionFieldState by textFieldState(
                 stateValue = state.formState.description

features/roomlist/build.gradle.kts

@@ -54,7 +54,4 @@ dependencies {
     androidTestImplementation(libs.test.junitext)
 
     ksp(libs.showkase.processor)
-
-    // Not for components, but other classes.
-    implementation("androidx.compose.material3:material3")
 }

features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomListTopBar.kt

@@ -27,6 +27,7 @@ import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -45,7 +46,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.form.textFieldState
-import io.element.android.libraries.designsystem.theme.ElementTheme
 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.MediumTopAppBar
@@ -130,7 +130,7 @@ fun SearchRoomListTopBar(
                 placeholder = {
                     Text(
                         text = "Search",
-                        color = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium)
+                        color = MaterialTheme.colorScheme.onBackground.copy(alpha = ContentAlpha.medium)
                     )
                 },
                 singleLine = true,
@@ -144,7 +144,7 @@ fun SearchRoomListTopBar(
                             Icon(
                                 imageVector = Icons.Default.Close,
                                 contentDescription = "clear",
-                                tint = ElementTheme.colors.onBackground
+                                tint = MaterialTheme.colorScheme.onBackground
                             )
                         }
                     }
@@ -160,7 +160,7 @@ fun SearchRoomListTopBar(
                 Icon(
                     imageVector = Icons.Default.ArrowBack,
                     contentDescription = "close",
-                    tint = ElementTheme.colors.onBackground
+                    tint = MaterialTheme.colorScheme.onBackground
                 )
             }
         },

features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomSummaryRow.kt

@@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -103,7 +104,7 @@ internal fun DefaultRoomSummaryRow(
             modifier = Modifier.placeholder(
                 visible = room.isPlaceholder,
                 shape = CircleShape,
-                color = ElementTheme.colors.roomListPlaceHolder,
+                color = ElementTheme.colors.roomListPlaceHolder(),
             )
         )
         Column(
@@ -117,12 +118,12 @@ internal fun DefaultRoomSummaryRow(
                 modifier = Modifier.placeholder(
                     visible = room.isPlaceholder,
                     shape = TextPlaceholderShape,
-                    color = ElementTheme.colors.roomListPlaceHolder,
+                    color = ElementTheme.colors.roomListPlaceHolder(),
                 ),
                 fontSize = 16.sp,
                 fontWeight = FontWeight.SemiBold,
                 text = room.name,
-                color = ElementTheme.colors.roomListRoomName,
+                color = MaterialTheme.roomListRoomName(),
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
@@ -131,10 +132,10 @@ internal fun DefaultRoomSummaryRow(
                 modifier = Modifier.placeholder(
                     visible = room.isPlaceholder,
                     shape = TextPlaceholderShape,
-                    color = ElementTheme.colors.roomListPlaceHolder,
+                    color = ElementTheme.colors.roomListPlaceHolder(),
                 ),
                 text = room.lastMessage?.toString().orEmpty(),
-                color = ElementTheme.colors.roomListRoomMessage,
+                color = MaterialTheme.roomListRoomMessage(),
                 fontSize = 14.sp,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
@@ -149,15 +150,15 @@ internal fun DefaultRoomSummaryRow(
                 modifier = Modifier.placeholder(
                     visible = room.isPlaceholder,
                     shape = TextPlaceholderShape,
-                    color = ElementTheme.colors.roomListPlaceHolder,
+                    color = ElementTheme.colors.roomListPlaceHolder(),
                 ),
                 fontSize = 12.sp,
                 text = room.timestamp ?: "",
-                color = ElementTheme.colors.roomListRoomMessageDate,
+                color = MaterialTheme.roomListRoomMessageDate(),
             )
             Spacer(Modifier.size(4.dp))
             val unreadIndicatorColor =
-                if (room.hasUnread) ElementTheme.colors.roomListUnreadIndicator else Color.Transparent
+                if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
             Box(
                 modifier = Modifier
                     .size(12.dp)

features/template/src/main/kotlin/io/element/android/features/template/TemplateView.kt

@@ -17,13 +17,14 @@
 package io.element.android.features.template
 
 import androidx.compose.foundation.layout.Box
+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.Text
 
 @Composable
 fun TemplateView(
@@ -33,7 +34,7 @@ fun TemplateView(
     Box(modifier, contentAlignment = Alignment.Center) {
         Text(
             "Template feature view",
-            color = ElementTheme.colors.primary,
+            color = MaterialTheme.colorScheme.primary,
         )
     }
 }

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,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
-    iconContentColor: Color = ElementTheme.colors.onSurfaceVariant,
+    iconContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
-    titleContentColor: Color = ElementTheme.colors.onSurfaceVariant,
+    titleContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
-    textContentColor: Color = ElementTheme.colors.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,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
-    iconContentColor: Color = ElementTheme.colors.onSurfaceVariant,
+    iconContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
-    titleContentColor: Color = ElementTheme.colors.onSurfaceVariant,
+    titleContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
-    textContentColor: Color = ElementTheme.colors.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
+@Composable
-val ElementColors.roomListRoomMessage get() = secondary
+fun MaterialTheme.roomListRoomName() = colorScheme.primary
-val ElementColors.roomListRoomMessageDate get() = secondary
+
-val ElementColors.roomListUnreadIndicator get() = primary
+@Composable
-val ElementColors.roomListPlaceHolder get() = if (isLight) SystemGrey6Light else SystemGrey4Dark
+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,
 )
 
-/*
+val materialColorSchemeDark = darkColorScheme(
-private val DarkColorScheme = 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,
 )
 
-/*
+val materialColorSchemeLight = lightColorScheme(
-private val LightColorScheme = 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,
+    materialLightColors: ColorScheme = materialColorSchemeLight,
-    spaces: ElementSpaces = ElementTheme.spaces,
+    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.material3.ButtonColors
-import androidx.compose.material.ProvideTextStyle
 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.Shape
-import androidx.compose.ui.graphics.compositeOver
 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 = {
+        shape = shape,
-            ProvideTextStyle(
+        colors = colors,
-                value = ElementTheme.typography.body1
+        elevation = elevation,
-            ) {
+        border = border,
-                content()
+        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(
+    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.
-    ),
     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(
+    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
-        containerColor = ElementTheme.colors.background,
-        scrolledContainerColor = ElementTheme.colors.background,
-        navigationIconContentColor = ElementTheme.colors.onBackground,
-        titleContentColor = ElementTheme.colors.onBackground,
-        actionIconContentColor = ElementTheme.colors.onBackground,
-    ),
     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,
+    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
-    sheetContentColor: Color = elementContentColorFor(sheetBackgroundColor),
+    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
-    scrimColor: Color = ElementTheme.colors.onSurfaceVariant.copy(alpha = 0.32f),
+    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(
+        colors = colors,
-            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,
-        ),
     )
 }
 

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,
+    containerColor: Color = MaterialTheme.colorScheme.background,
-    contentColor: Color = elementContentColorFor(containerColor),
+    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(
+    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),
-    ),
     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,
+    color: Color = MaterialTheme.colorScheme.surface,
-    contentColor: Color = elementContentColorFor(color),
+    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(
+        colors = colors,
-            textColor = ElementTheme.colors.onBackground,
-            containerColor = Color.Transparent,
-            cursorColor = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium),
-            focusedIndicatorColor = Color.Transparent,
-            unfocusedIndicatorColor = Color.Transparent,
-            disabledIndicatorColor = Color.Transparent
-        ),
     )
 }

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(
+    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
-        containerColor = ElementTheme.colors.background,
-        scrolledContainerColor = ElementTheme.colors.background,
-        navigationIconContentColor = ElementTheme.colors.onBackground,
-        titleContentColor = ElementTheme.colors.onBackground,
-        actionIconContentColor = ElementTheme.colors.onBackground,
-    ),
     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,
         )
     }
 }

plugins/src/main/kotlin/extension/DependencyHandleScope.kt

@@ -38,6 +38,7 @@ fun DependencyHandlerScope.composeDependencies() {
     androidTestImplementation(composeBom)
     implementation("androidx.compose.ui:ui")
     implementation("androidx.compose.material:material")
+    implementation("androidx.compose.material3:material3")
     implementation("androidx.compose.material:material-icons-extended")
     implementation("androidx.compose.ui:ui-tooling-preview")
     implementation("androidx.activity:activity-compose:1.6.1")

tests/uitests/src/test/kotlin/io/element/android/tests/uitests/ScreenshotTest.kt

@@ -24,6 +24,7 @@ import androidx.activity.OnBackPressedDispatcherOwner
 import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
@@ -74,7 +75,6 @@ class ScreenshotTest {
         @TestParameter(valuesProvider = PreviewProvider::class) componentTestPreview: TestPreview,
         @TestParameter baseDeviceConfig: BaseDeviceConfig,
         @TestParameter(value = ["1.0"/*, "1.5"*/]) fontScale: Float,
-        @TestParameter(value = ["light", "dark"]) theme: String,
         @TestParameter(value = ["en" /*"fr", "de", "ru"*/]) localeStr: String,
     ) {
         paparazzi.unsafeUpdateConfig(
@@ -100,8 +100,8 @@ class ScreenshotTest {
                     override fun getOnBackPressedDispatcher() = OnBackPressedDispatcher()
                 }
             ) {
-                ElementTheme(darkTheme = (theme == "dark")) {
+                ElementTheme {
-                    Box(modifier = Modifier.background(ElementTheme.colors.background)) {
+                    Box(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
                         componentTestPreview.Content()
                     }
                 }

tests/uitests/src/test/kotlin/io/element/android/tests/uitests/TypographyTestPreview.kt

@@ -19,11 +19,11 @@ package io.element.android.tests.uitests
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.BasicText
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import com.airbnb.android.showkase.models.ShowkaseBrowserTypography
 import com.airbnb.android.showkase.ui.padding4x
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import java.util.Locale
 
 class TypographyTestPreview(
@@ -39,7 +39,7 @@ class TypographyTestPreview(
                 .fillMaxWidth()
                 .padding(padding4x),
             style = showkaseBrowserTypography.textStyle.copy(
-                color = ElementTheme.colors.onBackground
+                color = MaterialTheme.colorScheme.onBackground
             )
         )
     }