Merge pull request #7732 from thunderbird/change-design-system-atoms-to-material3

Change design system Atoms to Material 3

app-k9mail/build.gradle.kts

@@ -1,5 +1,5 @@
 plugins {
-    id(ThunderbirdPlugins.App.android)
+    id(ThunderbirdPlugins.App.androidCompose)
     alias(libs.plugins.dependency.guard)
     id("thunderbird.quality.badging")
 }
@@ -11,6 +11,8 @@ if (testCoverageEnabled) {
 
 dependencies {
     implementation(projects.app.common)
+    implementation(projects.core.ui.compose.theme2.k9mail)
+    implementation(projects.feature.launcher)
 
     implementation(projects.app.core)
     implementation(projects.app.ui.legacy)

app-k9mail/dependencies/releaseRuntimeClasspath.txt

@@ -1,7 +1,7 @@
 androidx.activity:activity-compose:1.8.2
 androidx.activity:activity-ktx:1.8.2
 androidx.activity:activity:1.8.2
-androidx.annotation:annotation-experimental:1.3.0
+androidx.annotation:annotation-experimental:1.4.0
 androidx.annotation:annotation-jvm:1.7.1
 androidx.annotation:annotation:1.7.1
 androidx.appcompat:appcompat-resources:1.6.1
@@ -23,6 +23,8 @@ androidx.compose.foundation:foundation-android:1.6.2
 androidx.compose.foundation:foundation-layout-android:1.6.2
 androidx.compose.foundation:foundation-layout:1.6.2
 androidx.compose.foundation:foundation:1.6.2
+androidx.compose.material3:material3-android:1.2.0
+androidx.compose.material3:material3:1.2.0
 androidx.compose.material:material-android:1.6.2
 androidx.compose.material:material-icons-core-android:1.6.2
 androidx.compose.material:material-icons-core:1.6.2

app-k9mail/src/main/kotlin/app/k9mail/K9KoinModule.kt

@@ -2,7 +2,9 @@ package app.k9mail
 
 import app.k9mail.auth.K9OAuthConfigurationFactory
 import app.k9mail.core.common.oauth.OAuthConfigurationFactory
+import app.k9mail.core.ui.compose.theme2.k9mail.K9MailTheme2
 import app.k9mail.dev.developmentModuleAdditions
+import app.k9mail.feature.launcher.FeatureLauncherExternalContract.FeatureThemeProvider
 import com.fsck.k9.AppConfig
 import com.fsck.k9.BuildConfig
 import com.fsck.k9.activity.LauncherShortcuts
@@ -17,6 +19,7 @@ val appModule = module {
     single(named("ClientIdAppVersion")) { BuildConfig.VERSION_NAME }
     single<AppConfig> { appConfig }
     single<OAuthConfigurationFactory> { K9OAuthConfigurationFactory() }
+    single<FeatureThemeProvider> { provideFeatureThemeProvider() }
 
     developmentModuleAdditions()
 }
@@ -29,3 +32,9 @@ val appConfig = AppConfig(
         MessageListWidgetProvider::class.java,
     ),
 )
+
+private fun provideFeatureThemeProvider(): FeatureThemeProvider = FeatureThemeProvider { content ->
+    K9MailTheme2 {
+        content()
+    }
+}

app-ui-catalog/build.gradle.kts

@@ -19,4 +19,6 @@ dependencies {
 
     implementation(libs.androidx.compose.material)
     implementation(libs.androidx.compose.material.icons.extended)
+
+    implementation(libs.kotlinx.datetime)
 }

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
 import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText
 import app.k9mail.core.ui.compose.theme.MainTheme
@@ -21,9 +21,8 @@ fun LazyGridScope.buttonItems() {
             horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
             modifier = Modifier.itemDefaultPadding(),
         ) {
-            Button(text = "Enabled", onClick = { })
-            Button(text = "Colored", onClick = { }, color = Color.Magenta)
-            Button(text = "Disabled", onClick = { }, enabled = false)
+            ButtonFilled(text = "Enabled", onClick = { })
+            ButtonFilled(text = "Disabled", onClick = { }, enabled = false)
         }
     }
     sectionHeaderItem(text = "Buttons - Outlined")
@@ -33,7 +32,6 @@ fun LazyGridScope.buttonItems() {
             modifier = Modifier.itemDefaultPadding(),
         ) {
             ButtonOutlined(text = "Enabled", onClick = { })
-            ButtonOutlined(text = "Colored", onClick = { }, color = Color.Magenta)
             ButtonOutlined(text = "Disabled", onClick = { }, enabled = false)
         }
     }

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/drawer/DrawerHeaderItem.kt

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.Divider
+import app.k9mail.core.ui.compose.designsystem.atom.DividerHorizontal
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline6
 import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.core.ui.compose.theme.PreviewWithThemes
@@ -29,7 +29,7 @@ fun DrawerHeaderItem(
         TextHeadline6(
             text = text,
         )
-        Divider()
+        DividerHorizontal()
     }
 }
 

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionHeaderItem.kt

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.ui.Modifier
-import app.k9mail.core.ui.compose.designsystem.atom.Divider
+import app.k9mail.core.ui.compose.designsystem.atom.DividerHorizontal
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline6
 import app.k9mail.core.ui.compose.theme.MainTheme
 
@@ -26,7 +26,7 @@ fun LazyGridScope.sectionHeaderItem(
             TextHeadline6(
                 text = text,
             )
-            Divider()
+            DividerHorizontal()
         }
     }
 }

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionSubtitleItem.kt

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.ui.Modifier
-import app.k9mail.core.ui.compose.designsystem.atom.Divider
+import app.k9mail.core.ui.compose.designsystem.atom.DividerHorizontal
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
 import app.k9mail.core.ui.compose.theme.MainTheme
 
@@ -26,7 +26,7 @@ fun LazyGridScope.sectionSubtitleItem(
             TextSubtitle1(
                 text = text,
             )
-            Divider()
+            DividerHorizontal()
         }
     }
 }

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/theme/ThemeSelector.kt

@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
 import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.ui.catalog.ui.CatalogContract.Theme
@@ -22,7 +22,7 @@ fun ThemeSelector(
         horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
     ) {
         TextBody1(text = "Change theme:")
-        Button(
+        ButtonFilled(
             text = theme.toString(),
             onClick = onThemeChangeClick,
         )

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/theme/ThemeSwitch.kt

@@ -39,13 +39,21 @@ private fun K9ThemeSwitch(
     when (themeVariant) {
         ThemeVariant.LIGHT -> K9Theme(
             darkTheme = false,
-            content = content,
-        )
+        ) {
+            K9MailTheme2(
+                darkTheme = false,
+                content = content,
+            )
+        }
 
         ThemeVariant.DARK -> K9Theme(
             darkTheme = true,
-            content = content,
-        )
+        ) {
+            K9MailTheme2(
+                darkTheme = true,
+                content = content,
+            )
+        }
     }
 }
 
@@ -57,13 +65,21 @@ private fun ThunderbirdThemeSwitch(
     when (themeVariant) {
         ThemeVariant.LIGHT -> ThunderbirdTheme(
             darkTheme = false,
-            content = content,
-        )
+        ) {
+            K9MailTheme2(
+                darkTheme = true,
+                content = content,
+            )
+        }
 
         ThemeVariant.DARK -> ThunderbirdTheme(
             darkTheme = true,
-            content = content,
-        )
+        ) {
+            K9MailTheme2(
+                darkTheme = true,
+                content = content,
+            )
+        }
     }
 }
 
@@ -75,12 +91,20 @@ private fun K9Theme2Switch(
     when (themeVariant) {
         ThemeVariant.LIGHT -> K9MailTheme2(
             darkTheme = false,
-            content = content,
-        )
+        ) {
+            K9Theme(
+                darkTheme = false,
+                content = content,
+            )
+        }
 
         ThemeVariant.DARK -> K9MailTheme2(
             darkTheme = true,
-            content = content,
-        )
+        ) {
+            K9Theme(
+                darkTheme = false,
+                content = content,
+            )
+        }
     }
 }

core/ui/compose/designsystem/build.gradle.kts

@@ -9,7 +9,12 @@ android {
 
 dependencies {
     api(projects.core.ui.compose.theme)
+    api(projects.core.ui.compose.theme2.common)
+
+    debugApi(projects.core.ui.compose.theme2.k9mail)
+
     implementation(libs.androidx.compose.material)
+    implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.material.icons.extended)
 
     testImplementation(projects.core.ui.compose.testing)

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/PreviewWithThemes.kt

@@ -0,0 +1,122 @@
+package app.k9mail.core.ui.compose.designsystem
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.sp
+import app.k9mail.core.ui.compose.theme.K9Theme
+import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import app.k9mail.core.ui.compose.theme2.k9mail.K9MailTheme2
+
+@Composable
+fun PreviewWithThemes(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    Column(
+        modifier = modifier,
+    ) {
+        K9MailTheme2 {
+            // TODO remove once design system is migrated to theme2
+            K9Theme {
+                PreviewSurface {
+                    Column {
+                        PreviewHeader(themeName = "K9Theme Light")
+                        content()
+                    }
+                }
+            }
+        }
+        K9MailTheme2(darkTheme = true) {
+            // TODO remove once design system is migrated to theme2
+            K9Theme {
+                PreviewSurface {
+                    Column {
+                        PreviewHeader(themeName = "K9Theme Dark")
+                        content()
+                    }
+                }
+            }
+        }
+    }
+}
+
+enum class PreviewThemeType {
+    K9MAIL,
+    THUNDERBIRD,
+}
+
+@Composable
+fun PreviewWithTheme(
+    themeType: PreviewThemeType = PreviewThemeType.K9MAIL,
+    isDarkTheme: Boolean = false,
+    content: @Composable () -> Unit,
+) {
+    when (themeType) {
+        PreviewThemeType.K9MAIL -> {
+            PreviewWithK9MailTheme(isDarkTheme, content)
+        }
+        PreviewThemeType.THUNDERBIRD -> {
+            PreviewWithThunderbirdTheme(isDarkTheme, content)
+        }
+    }
+}
+
+@Composable
+private fun PreviewWithK9MailTheme(
+    isDarkTheme: Boolean,
+    content: @Composable () -> Unit,
+) {
+    K9MailTheme2(darkTheme = isDarkTheme) {
+        // TODO remove once design system is migrated to theme2
+        K9Theme(darkTheme = isDarkTheme) {
+            content()
+        }
+    }
+}
+
+@Composable
+private fun PreviewWithThunderbirdTheme(
+    isDarkTheme: Boolean,
+    content: @Composable () -> Unit,
+) {
+    // TODO replace with Thunderbird theme2 once available
+    K9MailTheme2(darkTheme = isDarkTheme) {
+        // TODO remove once design system is migrated to theme2
+        ThunderbirdTheme(darkTheme = isDarkTheme) {
+            content()
+        }
+    }
+}
+
+@Composable
+private fun PreviewHeader(
+    themeName: String,
+) {
+    Surface(
+        color = MainTheme.colors.primary,
+    ) {
+        Text(
+            text = themeName,
+            fontSize = 4.sp,
+            modifier = Modifier.padding(
+                start = MainTheme.spacings.half,
+                end = MainTheme.spacings.half,
+            ),
+        )
+    }
+}
+
+@Composable
+private fun PreviewSurface(
+    content: @Composable () -> Unit,
+) {
+    Surface(
+        color = MainTheme.colors.surface,
+        content = content,
+    )
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/CheckboxPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun CheckboxPreview() {
+    PreviewWithThemes {
+        Checkbox(
+            checked = true,
+            onCheckedChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun CheckboxDisabledPreview() {
+    PreviewWithThemes {
+        Checkbox(
+            checked = true,
+            onCheckedChange = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/CircularProgressIndicatorPreview.kt

@@ -0,0 +1,27 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun CircularProgressIndicatorPreview() {
+    PreviewWithThemes {
+        CircularProgressIndicator(
+            progress = { 0.75f },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun CircularProgressIndicatorColoredPreview() {
+    PreviewWithThemes {
+        CircularProgressIndicator(
+            progress = { 0.75f },
+            color = MainTheme.colors.secondary,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/DividerHorizontalPreview.kt

@@ -0,0 +1,26 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun DividerHorizontalPreview() {
+    PreviewWithThemes {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(MainTheme.spacings.double),
+        ) {
+            DividerHorizontal(
+                modifier = Modifier.fillMaxWidth(),
+            )
+        }
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/DividerVerticalPreview.kt

@@ -0,0 +1,26 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun DividerVerticalPreview() {
+    PreviewWithThemes {
+        Row(
+            modifier = Modifier
+                .fillMaxHeight()
+                .padding(MainTheme.spacings.double),
+        ) {
+            DividerVertical(
+                modifier = Modifier.fillMaxHeight(),
+            )
+        }
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/SurfacePreview.kt

@@ -0,0 +1,37 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun SurfacePreview() {
+    PreviewWithThemes {
+        Surface(
+            modifier = Modifier
+                .requiredHeight(MainTheme.sizes.larger)
+                .requiredWidth(MainTheme.sizes.larger),
+            content = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun SurfaceWithShapePreview() {
+    PreviewWithThemes {
+        Surface(
+            modifier = Modifier
+                .requiredHeight(MainTheme.sizes.larger)
+                .requiredWidth(MainTheme.sizes.larger),
+            shape = MainTheme.shapes.small,
+            color = MainTheme.colors.primary,
+            content = {},
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/SwitchPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun SwitchPreview() {
+    PreviewWithThemes {
+        Switch(
+            checked = true,
+            onCheckedChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun SwitchDisabledPreview() {
+    PreviewWithThemes {
+        Switch(
+            checked = true,
+            onCheckedChange = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonElevatedPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonElevatedPreview() {
+    PreviewWithThemes {
+        ButtonElevated(
+            text = "Button Elevated",
+            onClick = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonElevatedDisabledPreview() {
+    PreviewWithThemes {
+        ButtonElevated(
+            text = "Button Elevated Disabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonFilledPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonFilledPreview() {
+    PreviewWithThemes {
+        ButtonFilled(
+            text = "Button Filled",
+            onClick = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonFilledlDisabledPreview() {
+    PreviewWithThemes {
+        ButtonFilled(
+            text = "Button Filled Disabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonFilledTonalPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonFilledTonalPreview() {
+    PreviewWithThemes {
+        ButtonFilledTonal(
+            text = "Button Filled Tonal",
+            onClick = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonFilledTonalDisabledPreview() {
+    PreviewWithThemes {
+        ButtonFilledTonal(
+            text = "Button Filled Tonal Disabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonIconPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonIconPreview() {
+    PreviewWithThemes {
+        ButtonIcon(
+            onClick = { },
+            imageVector = Icons.Outlined.info,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonIconFilledPreview() {
+    PreviewWithThemes {
+        ButtonIcon(
+            onClick = { },
+            imageVector = Icons.Filled.cancel,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonOutlinedPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonOutlinedPreview() {
+    PreviewWithThemes {
+        ButtonOutlined(
+            text = "Button Outlined",
+            onClick = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonOutlinedDisabledPreview() {
+    PreviewWithThemes {
+        ButtonOutlined(
+            text = "Button Outlined Disabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonTextPreview.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonTextPreview() {
+    PreviewWithThemes {
+        ButtonText(
+            text = "Button Text",
+            onClick = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonTextColoredPreview() {
+    PreviewWithThemes {
+        ButtonText(
+            text = "Button Text Colored",
+            onClick = {},
+            color = Color.Magenta,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun ButtonTextDisabledPreview() {
+    PreviewWithThemes {
+        ButtonText(
+            text = "Button Text Disabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/image/FixedScaleImagePreview.kt

@@ -0,0 +1,76 @@
+package app.k9mail.core.ui.compose.designsystem.atom.image
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithTheme
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun FixedScaleImageBottomCenterPreview() {
+    PreviewWithTheme {
+        Box(
+            modifier = Modifier
+                .width(MainTheme.sizes.huge)
+                .height(MainTheme.sizes.huge),
+        ) {
+            FixedScaleImage(
+                id = MainTheme.images.logo,
+                alignment = Alignment.BottomCenter,
+            )
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun FixedScaleImageCroppedPreview() {
+    PreviewWithTheme {
+        Box(
+            modifier = Modifier
+                .width(MainTheme.sizes.medium)
+                .height(MainTheme.sizes.medium),
+        ) {
+            FixedScaleImage(
+                id = MainTheme.images.logo,
+            )
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun FixedScaleImageHorizontallyCroppedPreview() {
+    PreviewWithTheme {
+        Box(
+            modifier = Modifier
+                .width(MainTheme.sizes.huge)
+                .height(MainTheme.sizes.medium),
+        ) {
+            FixedScaleImage(
+                id = MainTheme.images.logo,
+            )
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun FixedScaleImageVerticallyCroppedPreview() {
+    PreviewWithTheme {
+        Box(
+            modifier = Modifier
+                .width(MainTheme.sizes.medium)
+                .height(MainTheme.sizes.huge),
+        ) {
+            FixedScaleImage(
+                id = MainTheme.images.logo,
+            )
+        }
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextBodyLargePreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyLargePreview() {
+    PreviewWithThemes {
+        TextBodyLarge(
+            text = "Text Body Large",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyLargeWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextBodyLarge(
+            text = buildAnnotatedString {
+                append("Text Body Large ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyLargeWithColorPreview() {
+    PreviewWithThemes {
+        TextBodyLarge(
+            text = "Text Body Large with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyLargeWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextBodyLarge(
+            text = "Text Body Large with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextBodyMediumPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyMediumPreview() {
+    PreviewWithThemes {
+        TextBodyMedium(
+            text = "Text Body Medium",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyMediumWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextBodyMedium(
+            text = buildAnnotatedString {
+                append("Text Body Medium ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyMediumWithColorPreview() {
+    PreviewWithThemes {
+        TextBodyMedium(
+            text = "Text Body Medium with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodyMediumWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextBodyMedium(
+            text = "Text Body Medium with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextBodySmallPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodySmallPreview() {
+    PreviewWithThemes {
+        TextBodySmall(
+            text = "Text Body Small",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodySmallWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextBodySmall(
+            text = buildAnnotatedString {
+                append("Text Body Small ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodySmallWithColorPreview() {
+    PreviewWithThemes {
+        TextBodySmall(
+            text = "Text Body Small with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextBodySmallWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextBodySmall(
+            text = "Text Body Small with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextDisplayLargePreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayLargePreview() {
+    PreviewWithThemes {
+        TextDisplayLarge(
+            text = "Text Display Large",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayLargeWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextDisplayLarge(
+            text = buildAnnotatedString {
+                append("Text Display Large ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayLargeWithColorPreview() {
+    PreviewWithThemes {
+        TextDisplayLarge(
+            text = "Text Display Large with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayLargeWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextDisplayLarge(
+            text = "Text Display Large with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextDisplayMediumPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayMediumPreview() {
+    PreviewWithThemes {
+        TextDisplayMedium(
+            text = "Text Display Medium",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayMediumWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextDisplayMedium(
+            text = buildAnnotatedString {
+                append("Text Display Medium ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayMediumWithColorPreview() {
+    PreviewWithThemes {
+        TextDisplayMedium(
+            text = "Text Display Medium with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplayMediumWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextDisplayMedium(
+            text = "Text Display Medium with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextDisplaySmallPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplaySmallPreview() {
+    PreviewWithThemes {
+        TextDisplaySmall(
+            text = "Text Display Small",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplaySmallWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextDisplaySmall(
+            text = buildAnnotatedString {
+                append("Text Display Small ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplaySmallWithColorPreview() {
+    PreviewWithThemes {
+        TextDisplaySmall(
+            text = "Text Display Small with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextDisplaySmallWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextDisplaySmall(
+            text = "Text Display Small with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextHeadlineLargePreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineLargePreview() {
+    PreviewWithThemes {
+        TextHeadlineLarge(
+            text = "Text Headline Large",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineLargeWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextHeadlineLarge(
+            text = buildAnnotatedString {
+                append("Text Headline Large ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineLargeWithColorPreview() {
+    PreviewWithThemes {
+        TextHeadlineLarge(
+            text = "Text Headline Large with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineLargeWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextHeadlineLarge(
+            text = "Text Headline Large with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextHeadlineMediumPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineMediumPreview() {
+    PreviewWithThemes {
+        TextHeadlineMedium(
+            text = "Text Headline Medium",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineMediumWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextHeadlineMedium(
+            text = buildAnnotatedString {
+                append("Text Headline Medium ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineMediumWithColorPreview() {
+    PreviewWithThemes {
+        TextHeadlineMedium(
+            text = "Text Headline Medium with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineMediumWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextHeadlineMedium(
+            text = "Text Headline Medium with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextHeadlineSmallPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineSmallPreview() {
+    PreviewWithThemes {
+        TextHeadlineSmall(
+            text = "Text Headline Small",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineSmallWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextHeadlineSmall(
+            text = buildAnnotatedString {
+                append("Text Headline Small ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineSmallWithColorPreview() {
+    PreviewWithThemes {
+        TextHeadlineSmall(
+            text = "Text Headline Small with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextHeadlineSmallWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextHeadlineSmall(
+            text = "Text Headline Small with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextLabelLargePreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelLargePreview() {
+    PreviewWithThemes {
+        TextLabelLarge(
+            text = "Text Label Large",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelLargeWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextLabelLarge(
+            text = buildAnnotatedString {
+                append("Text Label Large ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelLargeWithColorPreview() {
+    PreviewWithThemes {
+        TextLabelLarge(
+            text = "Text Label Large with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelLargeWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextLabelLarge(
+            text = "Text Label Large with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextLabelMediumPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelMediumPreview() {
+    PreviewWithThemes {
+        TextLabelMedium(
+            text = "Text Label Medium",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelMediumWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextLabelMedium(
+            text = buildAnnotatedString {
+                append("Text Label Medium ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelMediumWithColorPreview() {
+    PreviewWithThemes {
+        TextLabelMedium(
+            text = "Text Label Medium with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelMediumWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextLabelMedium(
+            text = "Text Label Medium with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextLabelSmallPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelSmallPreview() {
+    PreviewWithThemes {
+        TextLabelSmall(
+            text = "Text Label Small",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelSmallWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextLabelSmall(
+            text = buildAnnotatedString {
+                append("Text Label Small ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelSmallWithColorPreview() {
+    PreviewWithThemes {
+        TextLabelSmall(
+            text = "Text Label Small with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextLabelSmallWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextLabelSmall(
+            text = "Text Label Small with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextTitleLargePreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleLargePreview() {
+    PreviewWithThemes {
+        TextTitleLarge(
+            text = "Text Title Large",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleLargeWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextTitleLarge(
+            text = buildAnnotatedString {
+                append("Text Title Large ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleLargeWithColorPreview() {
+    PreviewWithThemes {
+        TextTitleLarge(
+            text = "Text Title Large with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleLargeWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextTitleLarge(
+            text = "Text Title Large with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextTitleMediumPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleMediumPreview() {
+    PreviewWithThemes {
+        TextTitleMedium(
+            text = "Text Title Medium",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleMediumWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextTitleMedium(
+            text = buildAnnotatedString {
+                append("Text Title Medium ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleMediumWithColorPreview() {
+    PreviewWithThemes {
+        TextTitleMedium(
+            text = "Text Title Medium with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleMediumWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextTitleMedium(
+            text = "Text Title Medium with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextTitleSmallPreview.kt

@@ -0,0 +1,58 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.theme2.MainTheme
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleSmallPreview() {
+    PreviewWithThemes {
+        TextTitleSmall(
+            text = "Text Title Small",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleSmallWithAnnotatedStringPreview() {
+    PreviewWithThemes {
+        TextTitleSmall(
+            text = buildAnnotatedString {
+                append("Text Title Small ")
+                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                    append("Annotated")
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleSmallWithColorPreview() {
+    PreviewWithThemes {
+        TextTitleSmall(
+            text = "Text Title Small with color",
+            color = MainTheme.colors.primary,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextTitleSmallWithTextAlignPreview() {
+    PreviewWithThemes {
+        TextTitleSmall(
+            text = "Text Title Small with TextAlign End",
+            textAlign = TextAlign.End,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldLabelPreview.kt

@@ -0,0 +1,38 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldLabelPreview() {
+    PreviewWithThemes {
+        TextFieldLabel(
+            label = "Label",
+            isRequired = false,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldLabelRequiredPreview() {
+    PreviewWithThemes {
+        TextFieldLabel(
+            label = "Label",
+            isRequired = true,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldLabelRequiredEmptyLabelPreview() {
+    PreviewWithThemes {
+        TextFieldLabel(
+            label = "",
+            isRequired = true,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedEmailAddressPreview.kt

@@ -0,0 +1,52 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedEmailAddressPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedEmailAddress(
+            value = "Input text",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedEmailAddressWithLabelPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedEmailAddress(
+            value = "Input text",
+            label = "Label",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedEmailDisabledPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedEmailAddress(
+            value = "Input text",
+            onValueChange = {},
+            isEnabled = false,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedEmailErrorPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedEmailAddress(
+            value = "Input text",
+            onValueChange = {},
+            hasError = true,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedFakeSelectPreview.kt

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedFakeSelectPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedFakeSelect(
+            text = "Current value",
+            onClick = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedFakeSelectPreviewWithLabel() {
+    PreviewWithThemes {
+        TextFieldOutlinedFakeSelect(
+            text = "Current value",
+            onClick = {},
+            label = "Label",
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedNumberPreview.kt

@@ -0,0 +1,52 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedNumberPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedNumber(
+            value = 123L,
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedNumberWithLabelPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedNumber(
+            value = 123L,
+            label = "Label",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedNumberDisabledPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedNumber(
+            value = 123L,
+            onValueChange = {},
+            isEnabled = false,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedNumberErrorPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedNumber(
+            value = 123L,
+            onValueChange = {},
+            hasError = true,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedPasswordPreview.kt

@@ -0,0 +1,52 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedPasswordPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedPassword(
+            value = "Input text",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedPasswordWithLabelPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedPassword(
+            value = "Input text",
+            label = "Label",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedPasswordDisabledPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedPassword(
+            value = "Input text",
+            onValueChange = {},
+            isEnabled = false,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedPasswordErrorPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedPassword(
+            value = "Input text",
+            onValueChange = {},
+            hasError = true,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedPreview.kt

@@ -0,0 +1,80 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon
+import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedPreview() {
+    PreviewWithThemes {
+        TextFieldOutlined(
+            value = "Input text",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedWithLabelPreview() {
+    PreviewWithThemes {
+        TextFieldOutlined(
+            value = "Input text",
+            onValueChange = {},
+            label = "Label",
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedDisabledPreview() {
+    PreviewWithThemes {
+        TextFieldOutlined(
+            value = "Input text",
+            onValueChange = {},
+            isEnabled = false,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedErrorPreview() {
+    PreviewWithThemes {
+        TextFieldOutlined(
+            value = "Input text",
+            onValueChange = {},
+            hasError = true,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedRequiredPreview() {
+    PreviewWithThemes {
+        TextFieldOutlined(
+            value = "",
+            onValueChange = {},
+            label = "Label",
+            isRequired = true,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedWithTrailingIconPreview() {
+    PreviewWithThemes {
+        TextFieldOutlined(
+            value = "",
+            onValueChange = {},
+            trailingIcon = { Icon(imageVector = Icons.Filled.user) },
+            isRequired = true,
+        )
+    }
+}

core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedSelectPreview.kt

@@ -0,0 +1,31 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
+import kotlinx.collections.immutable.persistentListOf
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedSelectPreview() {
+    PreviewWithThemes {
+        TextFieldOutlinedSelect(
+            options = persistentListOf("Option 1", "Option 2", "Option 3"),
+            selectedOption = "Option 1",
+            onValueChange = {},
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+internal fun TextFieldOutlinedSelectPreviewWithLabel() {
+    PreviewWithThemes {
+        TextFieldOutlinedSelect(
+            options = persistentListOf("Option 1", "Option 2", "Option 3"),
+            selectedOption = "Option 1",
+            onValueChange = {},
+            label = "Label",
+        )
+    }
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Checkbox.kt

@@ -2,9 +2,7 @@ package app.k9mail.core.ui.compose.designsystem.atom
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.Checkbox as MaterialCheckbox
+import androidx.compose.material3.Checkbox as Material3Checkbox
 
 @Composable
 fun Checkbox(
@@ -13,33 +11,10 @@ fun Checkbox(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
 ) {
-    MaterialCheckbox(
+    Material3Checkbox(
         checked = checked,
         onCheckedChange = onCheckedChange,
         modifier = modifier,
         enabled = enabled,
     )
 }
-
-@Preview(showBackground = true)
-@Composable
-internal fun CheckboxPreview() {
-    PreviewWithThemes {
-        Checkbox(
-            checked = true,
-            onCheckedChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun CheckboxDisabledPreview() {
-    PreviewWithThemes {
-        Checkbox(
-            checked = true,
-            onCheckedChange = {},
-            enabled = false,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/CircularProgressIndicator.kt

@@ -1,20 +1,18 @@
 package app.k9mail.core.ui.compose.designsystem.atom
 
+import androidx.compose.material3.ProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.CircularProgressIndicator as MaterialCircularProgressIndicator
+import androidx.compose.material3.CircularProgressIndicator as Material3CircularProgressIndicator
 
 @Composable
 fun CircularProgressIndicator(
-    progress: Float,
+    progress: () -> Float,
     modifier: Modifier = Modifier,
-    color: Color = MainTheme.colors.secondary,
+    color: Color = ProgressIndicatorDefaults.circularColor,
 ) {
-    MaterialCircularProgressIndicator(
+    Material3CircularProgressIndicator(
         progress = progress,
         modifier = modifier,
         color = color,
@@ -24,18 +22,10 @@ fun CircularProgressIndicator(
 @Composable
 fun CircularProgressIndicator(
     modifier: Modifier = Modifier,
-    color: Color = MainTheme.colors.secondary,
+    color: Color = ProgressIndicatorDefaults.circularColor,
 ) {
-    MaterialCircularProgressIndicator(
+    Material3CircularProgressIndicator(
         modifier = modifier,
         color = color,
     )
 }
-
-@Preview
-@Composable
-internal fun CircularProgressIndicatorPreview() {
-    PreviewWithThemes {
-        CircularProgressIndicator(progress = 0.75f)
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/DelayedCircularProgressIndicator.kt

@@ -1,5 +1,6 @@
 package app.k9mail.core.ui.compose.designsystem.atom
 
+import androidx.compose.material3.ProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -9,7 +10,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import app.k9mail.core.ui.compose.common.visibility.hide
-import app.k9mail.core.ui.compose.theme.MainTheme
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
@@ -23,7 +23,7 @@ private const val LOADING_INDICATOR_DELAY = 500L
 @Composable
 fun DelayedCircularProgressIndicator(
     modifier: Modifier = Modifier,
-    color: Color = MainTheme.colors.secondary,
+    color: Color = ProgressIndicatorDefaults.circularColor,
 ) {
     var progressIndicatorVisible by remember { mutableStateOf(false) }
 

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Divider.kt

@@ -1,48 +0,0 @@
-package app.k9mail.core.ui.compose.designsystem.atom
-
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.Divider as MaterialDivider
-
-@Composable
-fun Divider(
-    modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DIVIDER_ALPHA),
-    thickness: Dp = 1.dp,
-    startIndent: Dp = 0.dp,
-) {
-    MaterialDivider(
-        modifier = modifier,
-        color = color,
-        thickness = thickness,
-        startIndent = startIndent,
-    )
-}
-
-private const val DIVIDER_ALPHA = 0.12f
-
-@Preview(showBackground = true)
-@Composable
-internal fun DividerPreview() {
-    PreviewWithThemes {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(MainTheme.spacings.double),
-        ) {
-            Divider(
-                modifier = Modifier.fillMaxWidth(),
-            )
-        }
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/DividerHorizontal.kt

@@ -0,0 +1,21 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.material3.DividerDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.material3.HorizontalDivider as Material3HorizontalDivider
+
+@Composable
+fun DividerHorizontal(
+    modifier: Modifier = Modifier,
+    thickness: Dp = DividerDefaults.Thickness,
+    color: Color = DividerDefaults.color,
+) {
+    Material3HorizontalDivider(
+        modifier = modifier,
+        thickness = thickness,
+        color = color,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/DividerVertical.kt

@@ -0,0 +1,21 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.material3.DividerDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.material3.VerticalDivider as Material3VerticalDivider
+
+@Composable
+fun DividerVertical(
+    modifier: Modifier = Modifier,
+    thickness: Dp = DividerDefaults.Thickness,
+    color: Color = DividerDefaults.color,
+) {
+    Material3VerticalDivider(
+        modifier = modifier,
+        thickness = thickness,
+        color = color,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Surface.kt

@@ -1,62 +1,27 @@
 package app.k9mail.core.ui.compose.designsystem.atom
 
-import androidx.compose.foundation.layout.requiredHeight
-import androidx.compose.foundation.layout.requiredWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.Surface as MaterialSurface
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Surface as Material3Surface
 
 @Composable
 fun Surface(
     modifier: Modifier = Modifier,
     shape: Shape = RectangleShape,
-    color: Color = MainTheme.colors.surface,
-    elevation: Dp = MainTheme.elevations.default,
+    color: Color = Color.Unspecified,
+    tonalElevation: Dp = MainTheme.elevations.level0,
     content: @Composable () -> Unit,
 ) {
-    MaterialSurface(
+    Material3Surface(
         modifier = modifier,
         shape = shape,
         content = content,
-        elevation = elevation,
+        tonalElevation = tonalElevation,
         color = color,
     )
 }
-
-@Preview(showBackground = true)
-@Composable
-internal fun SurfacePreview() {
-    PreviewWithThemes {
-        Surface(
-            modifier = Modifier
-                .requiredHeight(100.dp)
-                .requiredWidth(100.dp),
-            content = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun SurfaceWithShapePreview() {
-    PreviewWithThemes {
-        Background {
-            Surface(
-                modifier = Modifier
-                    .requiredHeight(MainTheme.sizes.larger)
-                    .requiredWidth(MainTheme.sizes.larger),
-                shape = MainTheme.shapes.small,
-                color = MainTheme.colors.primary,
-                content = {},
-            )
-        }
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Switch.kt

@@ -2,9 +2,7 @@ package app.k9mail.core.ui.compose.designsystem.atom
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.Switch as MaterialSwitch
+import androidx.compose.material3.Switch as Material3Switch
 
 @Composable
 fun Switch(
@@ -13,33 +11,10 @@ fun Switch(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
 ) {
-    MaterialSwitch(
+    Material3Switch(
         checked = checked,
         onCheckedChange = onCheckedChange,
         modifier = modifier,
         enabled = enabled,
     )
 }
-
-@Preview(showBackground = true)
-@Composable
-internal fun SwitchPreview() {
-    PreviewWithThemes {
-        Switch(
-            checked = true,
-            onCheckedChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun SwitchDisabledPreview() {
-    PreviewWithThemes {
-        Switch(
-            checked = true,
-            onCheckedChange = {},
-            enabled = false,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/Button.kt

@@ -1,69 +0,0 @@
-package app.k9mail.core.ui.compose.designsystem.atom.button
-
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.Button as MaterialButton
-
-@Composable
-fun Button(
-    text: String,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-    color: Color? = null,
-    contentPadding: PaddingValues = buttonContentPadding(),
-) {
-    MaterialButton(
-        onClick = onClick,
-        modifier = modifier,
-        enabled = enabled,
-        colors = ButtonDefaults.buttonColors(
-            backgroundColor = color ?: MainTheme.colors.primary,
-        ),
-        contentPadding = contentPadding,
-    ) {
-        TextButton(text = text)
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonPreview() {
-    PreviewWithThemes {
-        Button(
-            text = "Button",
-            onClick = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonColoredPreview() {
-    PreviewWithThemes {
-        Button(
-            text = "ButtonColored",
-            onClick = {},
-            color = Color.Magenta,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonDisabledPreview() {
-    PreviewWithThemes {
-        Button(
-            text = "ButtonDisabled",
-            onClick = {},
-            enabled = false,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonElevated.kt

@@ -0,0 +1,25 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.material3.ElevatedButton as Material3ElevatedButton
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun ButtonElevated(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    contentPadding: PaddingValues = buttonContentPadding(),
+) {
+    Material3ElevatedButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        contentPadding = contentPadding,
+    ) {
+        Material3Text(text = text)
+    }
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonFilled.kt

@@ -0,0 +1,25 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.material3.Button as Material3Button
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun ButtonFilled(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    contentPadding: PaddingValues = buttonContentPadding(),
+) {
+    Material3Button(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        contentPadding = contentPadding,
+    ) {
+        Material3Text(text = text)
+    }
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonFilledTonalButton.kt

@@ -0,0 +1,25 @@
+package app.k9mail.core.ui.compose.designsystem.atom.button
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.material3.FilledTonalButton as Material3FilledTonalButton
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun ButtonFilledTonal(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    contentPadding: PaddingValues = buttonContentPadding(),
+) {
+    Material3FilledTonalButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        contentPadding = contentPadding,
+    ) {
+        Material3Text(text = text)
+    }
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonIcon.kt

@@ -1,14 +1,12 @@
 package app.k9mail.core.ui.compose.designsystem.atom.button
 
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
 import app.k9mail.core.ui.compose.theme.MainTheme
-import androidx.compose.material.IconButton as MaterialIconButton
+import androidx.compose.material3.Icon as Material3Icon
+import androidx.compose.material3.IconButton as Material3IconButton
 
 @Composable
 fun ButtonIcon(
@@ -18,24 +16,15 @@ fun ButtonIcon(
     enabled: Boolean = true,
     contentDescription: String? = null,
 ) {
-    MaterialIconButton(
+    Material3IconButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
     ) {
-        Icon(
+        Material3Icon(
             modifier = Modifier.size(MainTheme.sizes.icon),
             imageVector = imageVector,
             contentDescription = contentDescription,
         )
     }
 }
-
-@Preview
-@Composable
-internal fun ButtonIconPreview() {
-    ButtonIcon(
-        onClick = { },
-        imageVector = Icons.Filled.user,
-    )
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonOutlined.kt

@@ -1,17 +1,10 @@
 package app.k9mail.core.ui.compose.designsystem.atom.button
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.material.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.OutlinedButton as MaterialOutlinedButton
+import androidx.compose.material3.OutlinedButton as Material3OutlinedButton
+import androidx.compose.material3.Text as Material3Text
 
 @Composable
 fun ButtonOutlined(
@@ -19,64 +12,14 @@ fun ButtonOutlined(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    color: Color? = null,
     contentPadding: PaddingValues = buttonContentPadding(),
 ) {
-    MaterialOutlinedButton(
+    Material3OutlinedButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        colors = ButtonDefaults.outlinedButtonColors(
-            contentColor = color ?: MainTheme.colors.primary,
-            backgroundColor = Color.Transparent,
-        ),
-        border = BorderStroke(
-            width = 1.dp,
-            color = if (enabled) {
-                color ?: MainTheme.colors.primary
-            } else {
-                MainTheme.colors.onSurface.copy(
-                    alpha = 0.12f,
-                )
-            },
-        ),
         contentPadding = contentPadding,
     ) {
-        TextButton(text = text)
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonOutlinedPreview() {
-    PreviewWithThemes {
-        ButtonOutlined(
-            text = "ButtonOutlined",
-            onClick = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonOutlinedColoredPreview() {
-    PreviewWithThemes {
-        ButtonOutlined(
-            text = "ButtonOutlinedColored",
-            onClick = {},
-            color = Color.Magenta,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonOutlinedDisabledPreview() {
-    PreviewWithThemes {
-        ButtonOutlined(
-            text = "ButtonOutlinedDisabled",
-            onClick = {},
-            enabled = false,
-        )
+        Material3Text(text = text)
     }
 }

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/button/ButtonText.kt

@@ -1,15 +1,13 @@
 package app.k9mail.core.ui.compose.designsystem.atom.button
 
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.material.ButtonDefaults
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.TextButton as MaterialTextButton
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+import androidx.compose.material3.TextButton as Material3TextButton
 
 @Composable
 fun ButtonText(
@@ -20,7 +18,7 @@ fun ButtonText(
     color: Color? = null,
     contentPadding: PaddingValues = buttonContentPadding(),
 ) {
-    MaterialTextButton(
+    Material3TextButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
@@ -29,41 +27,6 @@ fun ButtonText(
         ),
         contentPadding = contentPadding,
     ) {
-        TextButton(text = text)
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonTextPreview() {
-    PreviewWithThemes {
-        ButtonText(
-            text = "ButtonText",
-            onClick = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonTextColoredPreview() {
-    PreviewWithThemes {
-        ButtonText(
-            text = "ButtonTextColored",
-            onClick = {},
-            color = Color.Magenta,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun ButtonTextDisabledPreview() {
-    PreviewWithThemes {
-        ButtonText(
-            text = "ButtonTextDisabled",
-            onClick = {},
-            enabled = false,
-        )
+        Material3Text(text = text)
     }
 }

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/icon/Icons.kt

@@ -11,7 +11,6 @@ import androidx.compose.material.icons.filled.Security
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material.icons.outlined.ArrowDropDown
-import androidx.compose.material.icons.outlined.ArrowDropUp
 import androidx.compose.material.icons.outlined.Celebration
 import androidx.compose.material.icons.outlined.Check
 import androidx.compose.material.icons.outlined.ErrorOutline
@@ -61,9 +60,6 @@ object Icons {
         val arrowDropDown: ImageVector
             get() = MaterialIcons.Outlined.ArrowDropDown
 
-        val arrowDropUp: ImageVector
-            get() = MaterialIcons.Outlined.ArrowDropUp
-
         val celebration: ImageVector
             get() = MaterialIcons.Outlined.Celebration
 

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/image/FixedScaleImage.kt

@@ -2,20 +2,13 @@ package app.k9mail.core.ui.compose.designsystem.atom.image
 
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.FixedScale
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
 
 /**
  * An image that has a fixed size and does not scale with the available space. It could be cropped, if the size of the
@@ -41,68 +34,3 @@ fun FixedScaleImage(
         contentScale = FixedScale(scale),
     )
 }
-
-@Composable
-@Preview(showBackground = true)
-internal fun FixedScaleImageBottomCenterPreview() {
-    ThunderbirdTheme {
-        Box(
-            modifier = Modifier
-                .width(200.dp)
-                .height(200.dp),
-        ) {
-            FixedScaleImage(
-                id = MainTheme.images.logo,
-                alignment = Alignment.BottomCenter,
-            )
-        }
-    }
-}
-
-@Composable
-@Preview(showBackground = true)
-internal fun FixedScaleImageCroppedPreview() {
-    ThunderbirdTheme {
-        Box(
-            modifier = Modifier
-                .width(40.dp)
-                .height(40.dp),
-        ) {
-            FixedScaleImage(
-                id = MainTheme.images.logo,
-            )
-        }
-    }
-}
-
-@Composable
-@Preview(showBackground = true)
-internal fun FixedScaleImageHorizontallyCroppedPreview() {
-    ThunderbirdTheme {
-        Box(
-            modifier = Modifier
-                .width(200.dp)
-                .height(20.dp),
-        ) {
-            FixedScaleImage(
-                id = MainTheme.images.logo,
-            )
-        }
-    }
-}
-
-@Composable
-@Preview(showBackground = true)
-internal fun FixedScaleImageVerticallyCroppedPreview() {
-    ThunderbirdTheme {
-        Box(
-            modifier = Modifier
-                .width(20.dp)
-                .height(200.dp),
-        ) {
-            FixedScaleImage(
-                id = MainTheme.images.logo,
-            )
-        }
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextBodyLarge.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextBodyLarge(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.bodyLarge,
+    )
+}
+
+@Composable
+fun TextBodyLarge(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.bodyLarge,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextBodyMedium.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextBodyMedium(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.bodyMedium,
+    )
+}
+
+@Composable
+fun TextBodyMedium(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.bodyMedium,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextBodySmall.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextBodySmall(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.bodySmall,
+    )
+}
+
+@Composable
+fun TextBodySmall(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.bodySmall,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextDisplayLarge.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextDisplayLarge(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.displayLarge,
+    )
+}
+
+@Composable
+fun TextDisplayLarge(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.displayLarge,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextDisplayMedium.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextDisplayMedium(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.displayMedium,
+    )
+}
+
+@Composable
+fun TextDisplayMedium(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.displayMedium,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextDisplaySmall.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextDisplaySmall(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.displaySmall,
+    )
+}
+
+@Composable
+fun TextDisplaySmall(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.displaySmall,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextHeadlineLarge.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextHeadlineLarge(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.headlineLarge,
+    )
+}
+
+@Composable
+fun TextHeadlineLarge(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.headlineLarge,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextHeadlineMedium.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextHeadlineMedium(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.headlineMedium,
+    )
+}
+
+@Composable
+fun TextHeadlineMedium(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.headlineMedium,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextHeadlineSmall.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextHeadlineSmall(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.headlineSmall,
+    )
+}
+
+@Composable
+fun TextHeadlineSmall(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.headlineSmall,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextLabelLarge.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextLabelLarge(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.labelLarge,
+    )
+}
+
+@Composable
+fun TextLabelLarge(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.labelLarge,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextLabelMedium.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextLabelMedium(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.labelMedium,
+    )
+}
+
+@Composable
+fun TextLabelMedium(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.labelMedium,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextLabelSmall.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextLabelSmall(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.labelSmall,
+    )
+}
+
+@Composable
+fun TextLabelSmall(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.labelSmall,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextTitleLarge.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextTitleLarge(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.titleLarge,
+    )
+}
+
+@Composable
+fun TextTitleLarge(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.titleLarge,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextTitleMedium.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextTitleMedium(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.titleMedium,
+    )
+}
+
+@Composable
+fun TextTitleMedium(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.titleMedium,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/text/TextTitleSmall.kt

@@ -0,0 +1,41 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import app.k9mail.core.ui.compose.theme2.MainTheme
+import androidx.compose.material3.Text as Material3Text
+
+@Composable
+fun TextTitleSmall(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.titleSmall,
+    )
+}
+
+@Composable
+fun TextTitleSmall(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    textAlign: TextAlign? = null,
+) {
+    Material3Text(
+        text = text,
+        modifier = modifier,
+        color = color,
+        textAlign = textAlign,
+        style = MainTheme.typography.titleSmall,
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldCommon.kt

@@ -1,9 +1,6 @@
 package app.k9mail.core.ui.compose.designsystem.atom.textfield
 
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
 
 private val LINE_BREAK = "[\\r\\n]".toRegex()
 
@@ -23,52 +20,3 @@ internal fun selectLabel(
         null
     }
 }
-
-@Composable
-internal fun TextFieldLabel(
-    label: String,
-    isRequired: Boolean,
-) {
-    Text(
-        text = if (isRequired) {
-            "$label$ASTERISK"
-        } else {
-            label
-        },
-    )
-}
-
-private const val ASTERISK = "*"
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldLabelPreview() {
-    PreviewWithThemes {
-        TextFieldLabel(
-            label = "Label",
-            isRequired = false,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldLabelRequiredPreview() {
-    PreviewWithThemes {
-        TextFieldLabel(
-            label = "Label",
-            isRequired = true,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldLabelRequiredEmptyLabelPreview() {
-    PreviewWithThemes {
-        TextFieldLabel(
-            label = "",
-            isRequired = true,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldLabel.kt

@@ -0,0 +1,20 @@
+package app.k9mail.core.ui.compose.designsystem.atom.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.material3.Text as Material3Text
+
+private const val ASTERISK = "*"
+
+@Composable
+internal fun TextFieldLabel(
+    label: String,
+    isRequired: Boolean,
+) {
+    Material3Text(
+        text = if (isRequired) {
+            "$label$ASTERISK"
+        } else {
+            label
+        },
+    )
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlined.kt

@@ -3,11 +3,7 @@ package app.k9mail.core.ui.compose.designsystem.atom.textfield
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon
-import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.OutlinedTextField as MaterialOutlinedTextField
+import androidx.compose.material3.OutlinedTextField as Material3OutlinedTextField
 
 @Suppress("LongParameterList")
 @Composable
@@ -24,7 +20,7 @@ fun TextFieldOutlined(
     isSingleLine: Boolean = true,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
 ) {
-    MaterialOutlinedTextField(
+    Material3OutlinedTextField(
         value = value,
         onValueChange = if (isSingleLine) stripLineBreaks(onValueChange) else onValueChange,
         modifier = modifier,
@@ -37,76 +33,3 @@ fun TextFieldOutlined(
         keyboardOptions = keyboardOptions,
     )
 }
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedPreview() {
-    PreviewWithThemes {
-        TextFieldOutlined(
-            value = "Input text",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedWithLabelPreview() {
-    PreviewWithThemes {
-        TextFieldOutlined(
-            value = "Input text",
-            onValueChange = {},
-            label = "Label",
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedDisabledPreview() {
-    PreviewWithThemes {
-        TextFieldOutlined(
-            value = "Input text",
-            onValueChange = {},
-            isEnabled = false,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedErrorPreview() {
-    PreviewWithThemes {
-        TextFieldOutlined(
-            value = "Input text",
-            onValueChange = {},
-            hasError = true,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedRequiredPreview() {
-    PreviewWithThemes {
-        TextFieldOutlined(
-            value = "",
-            onValueChange = {},
-            label = "Label",
-            isRequired = true,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedWithTrailingIconPreview() {
-    PreviewWithThemes {
-        TextFieldOutlined(
-            value = "",
-            onValueChange = {},
-            trailingIcon = { Icon(imageVector = Icons.Filled.user) },
-            isRequired = true,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedEmailAddress.kt

@@ -4,9 +4,7 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.OutlinedTextField as MaterialOutlinedTextField
+import androidx.compose.material3.OutlinedTextField as Material3OutlinedTextField
 
 @Suppress("LongParameterList")
 @Composable
@@ -20,7 +18,7 @@ fun TextFieldOutlinedEmailAddress(
     isRequired: Boolean = false,
     hasError: Boolean = false,
 ) {
-    MaterialOutlinedTextField(
+    Material3OutlinedTextField(
         value = value,
         onValueChange = stripLineBreaks(onValueChange),
         modifier = modifier,
@@ -35,50 +33,3 @@ fun TextFieldOutlinedEmailAddress(
         singleLine = true,
     )
 }
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedEmailAddressPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedEmailAddress(
-            value = "Input text",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedEmailAddressWithLabelPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedEmailAddress(
-            value = "Input text",
-            label = "Label",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedEmailDisabledPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedEmailAddress(
-            value = "Input text",
-            onValueChange = {},
-            isEnabled = false,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedEmailErrorPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedEmailAddress(
-            value = "Input text",
-            onValueChange = {},
-            hasError = true,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedFakeSelect.kt

@@ -3,16 +3,14 @@ package app.k9mail.core.ui.compose.designsystem.atom.textfield
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon
 import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.OutlinedTextField as MaterialOutlinedTextField
+import androidx.compose.material3.OutlinedTextField as Material3OutlinedTextField
+import androidx.compose.material3.Text as Material3Text
 
 @Composable
 fun TextFieldOutlinedFakeSelect(
@@ -21,7 +19,7 @@ fun TextFieldOutlinedFakeSelect(
     modifier: Modifier = Modifier,
     label: String? = null,
 ) {
-    MaterialOutlinedTextField(
+    Material3OutlinedTextField(
         value = text,
         onValueChange = { },
         modifier = Modifier
@@ -44,27 +42,4 @@ fun TextFieldOutlinedFakeSelect(
     )
 }
 
-private fun optionalLabel(label: String?): @Composable (() -> Unit)? = label?.let { { Text(label) } }
-
-@Preview
-@Composable
-internal fun TextFieldOutlinedFakeSelectPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedFakeSelect(
-            text = "Current value",
-            onClick = {},
-        )
-    }
-}
-
-@Preview
-@Composable
-internal fun TextFieldOutlinedFakeSelectPreviewWithLabel() {
-    PreviewWithThemes {
-        TextFieldOutlinedFakeSelect(
-            text = "Current value",
-            onClick = {},
-            label = "Label",
-        )
-    }
-}
+private fun optionalLabel(label: String?): @Composable (() -> Unit)? = label?.let { { Material3Text(label) } }

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedNumber.kt

@@ -4,9 +4,7 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.OutlinedTextField as MaterialOutlinedTextField
+import androidx.compose.material3.OutlinedTextField as Material3OutlinedTextField
 
 @Suppress("LongParameterList")
 @Composable
@@ -20,7 +18,7 @@ fun TextFieldOutlinedNumber(
     isRequired: Boolean = false,
     hasError: Boolean = false,
 ) {
-    MaterialOutlinedTextField(
+    Material3OutlinedTextField(
         value = value?.toString() ?: "",
         onValueChange = {
             onValueChange(
@@ -38,50 +36,3 @@ fun TextFieldOutlinedNumber(
         singleLine = true,
     )
 }
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedNumberPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedNumber(
-            value = 123L,
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedNumberWithLabelPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedNumber(
-            value = 123L,
-            label = "Label",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedNumberDisabledPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedNumber(
-            value = 123L,
-            onValueChange = {},
-            isEnabled = false,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedNumberErrorPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedNumber(
-            value = 123L,
-            onValueChange = {},
-            hasError = true,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedPassword.kt

@@ -1,8 +1,6 @@
 package app.k9mail.core.ui.compose.designsystem.atom.textfield
 
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -13,11 +11,11 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.tooling.preview.Preview
 import app.k9mail.core.ui.compose.designsystem.R
 import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
-import androidx.compose.material.OutlinedTextField as MaterialOutlinedTextField
+import androidx.compose.material3.Icon as Material3Icon
+import androidx.compose.material3.IconButton as Material3IconButton
+import androidx.compose.material3.OutlinedTextField as Material3OutlinedTextField
 
 @Suppress("LongParameterList")
 @Composable
@@ -33,7 +31,7 @@ fun TextFieldOutlinedPassword(
 ) {
     var passwordVisibilityState by rememberSaveable { mutableStateOf(false) }
 
-    MaterialOutlinedTextField(
+    Material3OutlinedTextField(
         value = value,
         onValueChange = stripLineBreaks(onValueChange),
         modifier = modifier,
@@ -68,7 +66,7 @@ fun TextFieldOutlinedPassword(
     isRequired: Boolean = false,
     hasError: Boolean = false,
 ) {
-    MaterialOutlinedTextField(
+    Material3OutlinedTextField(
         value = value,
         onValueChange = stripLineBreaks(onValueChange),
         modifier = modifier,
@@ -110,8 +108,8 @@ private fun selectTrailingIcon(
                 stringResource(id = R.string.designsystem_atom_password_textfield_show_password)
             }
 
-            IconButton(onClick = onClick) {
-                Icon(imageVector = image, contentDescription = description)
+            Material3IconButton(onClick = onClick) {
+                Material3Icon(imageVector = image, contentDescription = description)
             }
         }
     } else {
@@ -131,50 +129,3 @@ private fun selectVisualTransformation(
 }
 
 private fun isShowPasswordAllowed(isEnabled: Boolean, isPasswordVisible: Boolean) = isEnabled && isPasswordVisible
-
-@Preview(showBackground = true)
-@Composable
-internal fun PasswordTextFieldOutlinedPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedPassword(
-            value = "Input text",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedPasswordWithLabelPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedPassword(
-            value = "Input text",
-            label = "Label",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedPasswordDisabledPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedPassword(
-            value = "Input text",
-            onValueChange = {},
-            isEnabled = false,
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-internal fun TextFieldOutlinedPasswordErrorPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedPassword(
-            value = "Input text",
-            onValueChange = {},
-            hasError = true,
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlinedSelect.kt

@@ -2,28 +2,30 @@ package app.k9mail.core.ui.compose.designsystem.atom.textfield
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.DropdownMenuItem
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ExposedDropdownMenuBox
-import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.withStyle
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon
-import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
-import app.k9mail.core.ui.compose.theme.PreviewWithThemes
 import kotlinx.collections.immutable.ImmutableList
-import kotlinx.collections.immutable.persistentListOf
-import androidx.compose.material.OutlinedTextField as MaterialOutlinedTextField
+import androidx.compose.material3.DropdownMenu as Material3DropdownMenu
+import androidx.compose.material3.DropdownMenuItem as Material3DropdownMenuItem
+import androidx.compose.material3.ExposedDropdownMenuBox as Material3ExposedDropdownMenuBox
+import androidx.compose.material3.OutlinedTextField as Material3OutlinedTextField
+import androidx.compose.material3.Text as Material3Text
 
-@Suppress("LongParameterList")
+// TODO replace Material3 DropdownMenu with Material3 ExposedDropdownMenu once it's size issue is fixed
+// see: https://issuetracker.google.com/issues/205589613
+@OptIn(ExperimentalMaterial3Api::class)
+@Suppress("LongParameterList", "LongMethod")
 @Composable
 fun <T> TextFieldOutlinedSelect(
     options: ImmutableList<T>,
@@ -37,30 +39,66 @@ fun <T> TextFieldOutlinedSelect(
     isRequired: Boolean = false,
     hasError: Boolean = false,
 ) {
-    TextFieldDropDownWrapper(
-        isReadOnlyOrDisabled = isReadOnly || !isEnabled,
-        options = options,
-        optionToAnnotatedStringTransformation = { option ->
-            transformOptionWithSelectionHighlight(option, optionToStringTransformation(option), selectedOption)
+    var isExpanded by remember {
+        mutableStateOf(false)
+    }
+
+    val isReadOnlyOrDisabled = isReadOnly || !isEnabled
+
+    Material3ExposedDropdownMenuBox(
+        expanded = isExpanded,
+        onExpandedChange = {
+            isExpanded = if (isReadOnlyOrDisabled) {
+                false
+            } else {
+                isExpanded.not()
+            }
         },
-        onValueChange = onValueChange,
-    ) { expanded ->
-        MaterialOutlinedTextField(
+    ) {
+        Material3OutlinedTextField(
             value = optionToStringTransformation(selectedOption),
             onValueChange = { },
             modifier = Modifier
                 .fillMaxWidth()
+                .menuAnchor()
                 .then(modifier),
             enabled = isEnabled,
             readOnly = true,
             label = selectLabel(label, isRequired),
-            trailingIcon = selectTrailingIcon(expanded),
+            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded) },
             isError = hasError,
             singleLine = true,
             interactionSource = remember {
                 MutableInteractionSource()
             },
         )
+
+        if (isReadOnlyOrDisabled.not()) {
+            Material3DropdownMenu(
+                expanded = isExpanded,
+                onDismissRequest = { isExpanded = false },
+                modifier = Modifier.exposedDropdownSize(),
+            ) {
+                options.forEach { option ->
+                    Material3DropdownMenuItem(
+                        text = {
+                            Material3Text(
+                                text = transformOptionWithSelectionHighlight(
+                                    option,
+                                    optionToStringTransformation(option),
+                                    selectedOption,
+                                ),
+                            )
+                        },
+                        onClick = {
+                            onValueChange(option)
+                            isExpanded = false
+                        },
+                        contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
+                    )
+                }
+            }
+        }
     }
 }
 
@@ -79,98 +117,3 @@ private fun <T> transformOptionWithSelectionHighlight(
         }
     }
 }
-
-private fun selectTrailingIcon(
-    isExpanded: Boolean,
-): @Composable () -> Unit {
-    return if (isExpanded) {
-        { Icon(Icons.Outlined.arrowDropUp) }
-    } else {
-        { Icon(Icons.Outlined.arrowDropDown) }
-    }
-}
-
-@Composable
-private fun <T> TextFieldDropDownWrapper(
-    isReadOnlyOrDisabled: Boolean,
-    options: ImmutableList<T>,
-    optionToAnnotatedStringTransformation: (T) -> AnnotatedString,
-    onValueChange: (T) -> Unit,
-    content: @Composable (expanded: Boolean) -> Unit,
-) {
-    if (isReadOnlyOrDisabled) {
-        content(false)
-    } else {
-        DropDownMenu(
-            options = options,
-            optionToAnnotatedStringTransformation = optionToAnnotatedStringTransformation,
-            onValueChange = onValueChange,
-            content = content,
-        )
-    }
-}
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-private fun <T> DropDownMenu(
-    options: ImmutableList<T>,
-    onValueChange: (T) -> Unit,
-    optionToAnnotatedStringTransformation: (T) -> AnnotatedString,
-    content: @Composable (expanded: Boolean) -> Unit,
-) {
-    var expanded = remember { mutableStateOf(false) }
-
-    ExposedDropdownMenuBox(
-        expanded = expanded.value,
-        onExpandedChange = {
-            expanded.value = expanded.value.not()
-        },
-    ) {
-        content(expanded.value)
-
-        ExposedDropdownMenu(
-            expanded = expanded.value,
-            onDismissRequest = {
-                expanded.value = false
-            },
-        ) {
-            options.forEach { option ->
-                DropdownMenuItem(
-                    onClick = {
-                        onValueChange(option)
-                        expanded.value = false
-                    },
-                ) {
-                    Text(
-                        text = optionToAnnotatedStringTransformation(option),
-                    )
-                }
-            }
-        }
-    }
-}
-
-@Preview
-@Composable
-internal fun TextFieldOutlinedSelectPreview() {
-    PreviewWithThemes {
-        TextFieldOutlinedSelect(
-            options = persistentListOf("Option 1", "Option 2", "Option 3"),
-            selectedOption = "Option 1",
-            onValueChange = {},
-        )
-    }
-}
-
-@Preview
-@Composable
-internal fun TextFieldOutlinedSelectPreviewWithLabel() {
-    PreviewWithThemes {
-        TextFieldOutlinedSelect(
-            options = persistentListOf("Option 1", "Option 2", "Option 3"),
-            selectedOption = "Option 1",
-            onValueChange = {},
-            label = "Label",
-        )
-    }
-}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/template/ResponsiveContent.kt

@@ -87,7 +87,7 @@ private fun ExpandedContent(
             ) {
                 Surface(
                     modifier = Modifier.requiredWidth(WindowSizeClass.MEDIUM_MAX_WIDTH.dp),
-                    elevation = MainTheme.elevations.raised,
+                    tonalElevation = MainTheme.elevations.raised,
                 ) {
                     content()
                 }
@@ -105,7 +105,7 @@ private fun ExpandedContent(
                     modifier = Modifier
                         .requiredWidth(WindowSizeClass.MEDIUM_MAX_WIDTH.dp)
                         .requiredHeight(WindowSizeClass.MEDIUM_MAX_HEIGHT.dp),
-                    elevation = MainTheme.elevations.raised,
+                    tonalElevation = MainTheme.elevations.raised,
                 ) {
                     content()
                 }

feature/account/common/src/main/kotlin/app/k9mail/feature/account/common/ui/WizardNavigationBar.kt

@@ -8,7 +8,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
 import app.k9mail.core.ui.compose.designsystem.template.ResponsiveWidthContainer
 import app.k9mail.core.ui.compose.theme.K9Theme
@@ -49,7 +49,7 @@ fun WizardNavigationBar(
                 )
             }
             if (state.showNext) {
-                Button(
+                ButtonFilled(
                     text = nextButtonText,
                     onClick = onNextClick,
                     enabled = state.isNextEnabled,

feature/account/oauth/src/main/kotlin/app/k9mail/feature/account/oauth/ui/view/SignInView.kt

@@ -8,7 +8,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
 import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.feature.account.oauth.R
@@ -36,7 +36,7 @@ internal fun SignInView(
                 enabled = isEnabled,
             )
         } else {
-            Button(
+            ButtonFilled(
                 text = stringResource(id = R.string.account_oauth_sign_in_button),
                 onClick = onSignInClick,
                 enabled = isEnabled,

feature/account/server/certificate/src/main/kotlin/app/k9mail/feature/account/server/certificate/ui/ServerCertificateErrorScreen.kt

@@ -18,7 +18,7 @@ import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
 import app.k9mail.core.ui.compose.common.koin.koinPreview
 import app.k9mail.core.ui.compose.common.mvi.observe
 import app.k9mail.core.ui.compose.designsystem.atom.Surface
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
 import app.k9mail.core.ui.compose.designsystem.template.ResponsiveWidthContainer
 import app.k9mail.core.ui.compose.designsystem.template.Scaffold
@@ -85,7 +85,9 @@ private fun ButtonBar(
         label = "BottomBarElevation",
     )
 
-    Surface(elevation = elevation) {
+    Surface(
+        tonalElevation = elevation,
+    ) {
         ResponsiveWidthContainer(
             modifier = Modifier
                 .padding(
@@ -96,7 +98,7 @@ private fun ButtonBar(
                 ),
         ) {
             Column(modifier = Modifier.animateContentSize()) {
-                Button(
+                ButtonFilled(
                     text = stringResource(R.string.account_server_certificate_button_back),
                     onClick = { dispatch(Event.OnBackClicked) },
                     modifier = Modifier.fillMaxWidth(),

feature/launcher/src/main/kotlin/app/k9mail/feature/launcher/FeatureLauncherExternalContract.kt

@@ -1,7 +1,22 @@
 package app.k9mail.feature.launcher
 
+import androidx.compose.runtime.Composable
+
+/**
+ * Contract defining the external functionality of the feature launcher to be provided by the host application.
+ */
 interface FeatureLauncherExternalContract {
 
+    /**
+     * Provides the theme for the feature.
+     */
+    fun interface FeatureThemeProvider {
+        @Composable
+        fun WithTheme(
+            content: @Composable () -> Unit,
+        )
+    }
+
     fun interface AccountSetupFinishedLauncher {
         fun launch(accountUuid: String?)
     }

feature/launcher/src/main/kotlin/app/k9mail/feature/launcher/ui/FeatureLauncherApp.kt

@@ -8,27 +8,32 @@ import androidx.navigation.compose.rememberNavController
 import app.k9mail.core.ui.compose.common.activity.LocalActivity
 import app.k9mail.core.ui.compose.designsystem.atom.Background
 import app.k9mail.core.ui.compose.theme.K9Theme
+import app.k9mail.feature.launcher.FeatureLauncherExternalContract.FeatureThemeProvider
 import app.k9mail.feature.launcher.navigation.FeatureLauncherNavHost
+import org.koin.compose.koinInject
 
 @Composable
 fun FeatureLauncherApp(
     modifier: Modifier = Modifier,
+    themeProvider: FeatureThemeProvider = koinInject<FeatureThemeProvider>(),
 ) {
     val navController = rememberNavController()
 
-    K9Theme {
-        Background(
-            modifier = Modifier
-                .fillMaxSize()
-                .safeDrawingPadding()
-                .then(modifier),
-        ) {
-            val activity = LocalActivity.current
+    themeProvider.WithTheme {
+        K9Theme {
+            Background(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .safeDrawingPadding()
+                    .then(modifier),
+            ) {
+                val activity = LocalActivity.current
 
-            FeatureLauncherNavHost(
-                navController = navController,
-                onBack = { activity.finish() },
-            )
+                FeatureLauncherNavHost(
+                    navController = navController,
+                    onBack = { activity.finish() },
+                )
+            }
         }
     }
 }

feature/onboarding/permissions/src/main/kotlin/app/k9mail/feature/onboarding/permissions/ui/PermissionBox.kt

@@ -20,7 +20,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import app.k9mail.core.ui.compose.common.image.ImageWithOverlayCoordinate
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon
 import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
 import app.k9mail.core.ui.compose.designsystem.atom.icon.IconsWithBottomRightOverlay
@@ -73,7 +73,7 @@ internal fun PermissionBox(
         ) {
             Spacer(modifier = Modifier.height(MainTheme.spacings.default))
 
-            Button(
+            ButtonFilled(
                 text = stringResource(R.string.onboarding_permissions_allow_button),
                 onClick = onAllowClick,
                 modifier = Modifier.alpha(buttonAlpha),

feature/onboarding/permissions/src/main/kotlin/app/k9mail/feature/onboarding/permissions/ui/PermissionsContent.kt

@@ -23,7 +23,7 @@ import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
 import app.k9mail.core.ui.compose.common.visibility.hide
 import app.k9mail.core.ui.compose.designsystem.atom.DelayedCircularProgressIndicator
 import app.k9mail.core.ui.compose.designsystem.atom.Surface
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText
 import app.k9mail.core.ui.compose.designsystem.atom.icon.IconsWithBottomRightOverlay
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline5
@@ -144,7 +144,9 @@ private fun BottomBar(
         label = "BottomBarElevation",
     )
 
-    Surface(elevation = elevation) {
+    Surface(
+        tonalElevation = elevation,
+    ) {
         ResponsiveWidthContainer(
             modifier = Modifier.fillMaxWidth(),
         ) {
@@ -163,7 +165,7 @@ private fun BottomBar(
                     targetState = state.isNextButtonVisible,
                     label = "NextButton",
                 ) { isNextButtonVisible ->
-                    Button(
+                    ButtonFilled(
                         text = stringResource(CommonR.string.account_common_button_next),
                         onClick = { onEvent(Event.NextClicked) },
                         modifier = Modifier.hide(!isNextButtonVisible),

feature/onboarding/welcome/src/main/kotlin/app/k9mail/feature/onboarding/welcome/ui/WelcomeContent.kt

@@ -21,7 +21,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
 import app.k9mail.core.ui.compose.designsystem.atom.Background
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled
 import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
 import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
@@ -147,7 +147,7 @@ private fun WelcomeFooter(
         verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.quarter),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        Button(
+        ButtonFilled(
             text = stringResource(id = R.string.onboarding_welcome_start_button),
             onClick = onStartClick,
         )