ElementTheme + MaterialTheme3

2023-02-03 10:15:30 +01:00 · 2023-02-03 10:15:30 +01:00 · bbe10382b0
commit bbe10382b0
parent 47186c6af1
52 changed files with 202 additions and 446 deletions
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ColorUtil.kt
+++ b/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)
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt
+++ b/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,
    )
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/LabelledCheckbox.kt
+++ b/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,
        )
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt
+++ b/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)
                    )
                }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ConfirmationDialog.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt
+++ b/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()
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt
+++ b/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
                    )
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt
+++ b/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
            )
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
+++ b/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,
            )
        }
    }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/ElementPreview.kt
+++ b/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 {
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt
+++ b/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
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt
+++ b/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,
 )
- */
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt
+++ b/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,
-
- */
+)
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ContentColor.kt
+++ b/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
-    }
-}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt
+++ b/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
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementSpaces.kt
+++ b/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,
-)
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTheme.kt
+++ b/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()
+        }
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTypography.kt
+++ b/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,
-)
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt
+++ b/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,
    )
 }

--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Checkbox.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Divider.kt
+++ b/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,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt
+++ b/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,
    )
 }

--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Scaffold.kt
+++ b/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
 ) {
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Slider.kt
+++ b/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(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt
+++ b/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,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt
+++ b/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,
    )
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt
+++ b/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(