Inital

18 files changed, 631 insertions, 0 deletions

diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogActivity.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogActivity.kt
new file mode 100644
index 0000000..6d5f011
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogActivity.kt
@@ -0,0 +1,18 @@
+package app.k9mail.ui.catalog
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.core.view.WindowCompat
+
+class CatalogActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+
+        setContent {
+            CatalogScreen()
+        }
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogContent.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogContent.kt
new file mode 100644
index 0000000..19e4ed2
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogContent.kt
@@ -0,0 +1,89 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import app.k9mail.core.ui.compose.common.DevicePreviews
+import app.k9mail.core.ui.compose.designsystem.atom.Surface
+import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContent
+import app.k9mail.core.ui.compose.theme.K9Theme
+import app.k9mail.core.ui.compose.theme.MainTheme
+import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
+import app.k9mail.ui.catalog.items.buttonItems
+import app.k9mail.ui.catalog.items.colorItems
+import app.k9mail.ui.catalog.items.imageItems
+import app.k9mail.ui.catalog.items.selectionControlItems
+import app.k9mail.ui.catalog.items.textFieldItems
+import app.k9mail.ui.catalog.items.themeHeaderItem
+import app.k9mail.ui.catalog.items.themeSelectorItems
+import app.k9mail.ui.catalog.items.typographyItems
+
+@Composable
+fun CatalogContent(
+    catalogTheme: CatalogTheme,
+    catalogThemeVariant: CatalogThemeVariant,
+    onThemeChange: () -> Unit,
+    onThemeVariantChange: () -> Unit,
+    contentPadding: PaddingValues,
+    modifier: Modifier = Modifier,
+) {
+    Surface {
+        ResponsiveContent {
+            LazyVerticalGrid(
+                columns = GridCells.Adaptive(300.dp),
+                contentPadding = contentPadding,
+                horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
+                verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
+                modifier = modifier.padding(MainTheme.spacings.double),
+            ) {
+                themeHeaderItem(text = "Thunderbird Catalog")
+                themeSelectorItems(
+                    catalogTheme = catalogTheme,
+                    catalogThemeVariant = catalogThemeVariant,
+                    onThemeChange = onThemeChange,
+                    onThemeVariantChange = onThemeVariantChange,
+                )
+
+                typographyItems()
+                colorItems()
+                buttonItems()
+                selectionControlItems()
+                textFieldItems()
+                imageItems()
+            }
+        }
+    }
+}
+
+@DevicePreviews
+@Composable
+internal fun CatalogContentK9ThemePreview() {
+    K9Theme {
+        CatalogContent(
+            catalogTheme = CatalogTheme.K9,
+            catalogThemeVariant = CatalogThemeVariant.LIGHT,
+            onThemeChange = {},
+            onThemeVariantChange = {},
+            contentPadding = PaddingValues(),
+        )
+    }
+}
+
+@DevicePreviews
+@Composable
+internal fun CatalogContentThunderbirdThemePreview() {
+    ThunderbirdTheme {
+        CatalogContent(
+            catalogTheme = CatalogTheme.THUNDERBIRD,
+            catalogThemeVariant = CatalogThemeVariant.LIGHT,
+            onThemeChange = {},
+            onThemeVariantChange = {},
+            contentPadding = PaddingValues(),
+        )
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogScreen.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogScreen.kt
new file mode 100644
index 0000000..f1100a7
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogScreen.kt
@@ -0,0 +1,50 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.common.DevicePreviews
+
+@Composable
+fun CatalogScreen(
+    modifier: Modifier = Modifier,
+) {
+    val themeState = remember { mutableStateOf(CatalogTheme.K9) }
+    val themeVariantState = remember { mutableStateOf(CatalogThemeVariant.LIGHT) }
+
+    CatalogThemeSwitch(theme = themeState.value, themeVariation = themeVariantState.value) {
+        val contentPadding = WindowInsets.systemBars.asPaddingValues()
+
+        CatalogContent(
+            catalogTheme = themeState.value,
+            catalogThemeVariant = themeVariantState.value,
+            onThemeChange = {
+                themeState.value = when (themeState.value) {
+                    CatalogTheme.K9 -> CatalogTheme.THUNDERBIRD
+                    CatalogTheme.THUNDERBIRD -> CatalogTheme.K9
+                }
+            },
+            onThemeVariantChange = {
+                themeVariantState.value = when (themeVariantState.value) {
+                    CatalogThemeVariant.LIGHT -> CatalogThemeVariant.DARK
+                    CatalogThemeVariant.DARK -> CatalogThemeVariant.LIGHT
+                }
+            },
+            contentPadding = contentPadding,
+            modifier = Modifier
+                .fillMaxSize()
+                .then(modifier),
+        )
+    }
+}
+
+@DevicePreviews
+@Composable
+internal fun CatalogScreenPreview() {
+    CatalogScreen()
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogTheme.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogTheme.kt
new file mode 100644
index 0000000..123dd4e
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogTheme.kt
@@ -0,0 +1,13 @@
+package app.k9mail.ui.catalog
+
+enum class CatalogTheme(
+    private val displayName: String,
+) {
+    K9("K-9"),
+    THUNDERBIRD("Thunderbird"),
+    ;
+
+    override fun toString(): String {
+        return displayName
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSelector.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSelector.kt
new file mode 100644
index 0000000..88896fa
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSelector.kt
@@ -0,0 +1,29 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.foundation.layout.Arrangement
+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.text.TextBody1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+@Composable
+fun CatalogThemeSelector(
+    catalogTheme: CatalogTheme,
+    modifier: Modifier = Modifier,
+    onThemeChangeClick: () -> Unit,
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+    ) {
+        TextBody1(text = "Change theme:")
+        Button(
+            text = catalogTheme.toString(),
+            onClick = onThemeChangeClick,
+        )
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSwitch.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSwitch.kt
new file mode 100644
index 0000000..c0138b2
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSwitch.kt
@@ -0,0 +1,26 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.runtime.Composable
+import app.k9mail.core.ui.compose.theme.K9Theme
+import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
+
+@Composable
+fun CatalogThemeSwitch(
+    theme: CatalogTheme,
+    themeVariation: CatalogThemeVariant,
+    content: @Composable () -> Unit,
+) {
+    when (theme) {
+        CatalogTheme.K9 -> K9Theme(
+            darkTheme = isDarkVariation(themeVariation),
+            content = content,
+        )
+        CatalogTheme.THUNDERBIRD -> ThunderbirdTheme(
+            darkTheme = isDarkVariation(themeVariation),
+            content = content,
+        )
+    }
+}
+
+private fun isDarkVariation(themeVariation: CatalogThemeVariant): Boolean =
+    themeVariation == CatalogThemeVariant.DARK
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariant.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariant.kt
new file mode 100644
index 0000000..0b8cee4
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariant.kt
@@ -0,0 +1,5 @@
+package app.k9mail.ui.catalog
+
+enum class CatalogThemeVariant {
+    LIGHT, DARK
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariantSelector.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariantSelector.kt
new file mode 100644
index 0000000..31c85e7
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariantSelector.kt
@@ -0,0 +1,29 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.foundation.layout.Arrangement
+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.Checkbox
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+@Composable
+fun CatalogThemeVariantSelector(
+    catalogThemeVariant: CatalogThemeVariant,
+    modifier: Modifier = Modifier,
+    onThemeVariantChange: () -> Unit,
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+    ) {
+        TextBody1(text = "Set dark mode:")
+        Checkbox(
+            checked = catalogThemeVariant == CatalogThemeVariant.DARK,
+            onCheckedChange = { onThemeVariantChange() },
+        )
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ButtonItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ButtonItems.kt
new file mode 100644
index 0000000..c2f03df
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ButtonItems.kt
@@ -0,0 +1,40 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+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
+
+fun LazyGridScope.buttonItems() {
+    sectionHeaderItem(text = "Buttons")
+    sectionSubtitleItem(text = "Contained")
+    item {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+        ) {
+            Button(text = "Enabled", onClick = { })
+            Button(text = "Disabled", onClick = { }, enabled = false)
+        }
+    }
+    sectionSubtitleItem(text = "Outlined")
+    item {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+        ) {
+            ButtonOutlined(text = "Enabled", onClick = { })
+            ButtonOutlined(text = "Disabled", onClick = { }, enabled = false)
+        }
+    }
+    sectionSubtitleItem(text = "Text")
+    item {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+        ) {
+            ButtonText(text = "Enabled", onClick = { })
+            ButtonText(text = "Disabled", onClick = { }, enabled = false)
+        }
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ColorItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ColorItems.kt
new file mode 100644
index 0000000..34a49ce
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ColorItems.kt
@@ -0,0 +1,78 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import app.k9mail.core.ui.compose.designsystem.atom.Surface
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.colorItems() {
+    sectionHeaderItem(text = "Colors")
+    item {
+        ColorContent(
+            name = "Primary",
+            color = MainTheme.colors.primary,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Primary Variant",
+            color = MainTheme.colors.primaryVariant,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Secondary",
+            color = MainTheme.colors.secondary,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Secondary Variant",
+            color = MainTheme.colors.secondaryVariant,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Background",
+            color = MainTheme.colors.background,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Surface",
+            color = MainTheme.colors.surface,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Error",
+            color = MainTheme.colors.error,
+        )
+    }
+}
+
+@Composable
+private fun ColorContent(
+    name: String,
+    color: Color,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        color = color,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = modifier.padding(MainTheme.spacings.double),
+        ) {
+            TextBody1(text = name)
+        }
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ImageItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ImageItems.kt
new file mode 100644
index 0000000..e4ff3e9
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ImageItems.kt
@@ -0,0 +1,13 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.res.painterResource
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.imageItems() {
+    sectionHeaderItem(text = "Images")
+    item {
+        Image(painter = painterResource(id = MainTheme.images.logo), contentDescription = "logo")
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionHeaderItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionHeaderItem.kt
new file mode 100644
index 0000000..7e14402
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionHeaderItem.kt
@@ -0,0 +1,16 @@
+package app.k9mail.ui.catalog.items
+
+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.text.TextHeadline6
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.sectionHeaderItem(
+    text: String,
+) {
+    item(span = { GridItemSpan(maxLineSpan) }) {
+        TextHeadline6(text = text, modifier = Modifier.padding(top = MainTheme.spacings.default))
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionSubtitleItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionSubtitleItem.kt
new file mode 100644
index 0000000..015466a
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionSubtitleItem.kt
@@ -0,0 +1,16 @@
+package app.k9mail.ui.catalog.items
+
+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.text.TextSubtitle1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.sectionSubtitleItem(
+    text: String,
+) {
+    item(span = { GridItemSpan(maxLineSpan) }) {
+        TextSubtitle1(text = text, modifier = Modifier.padding(top = MainTheme.spacings.default))
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SelectionControlItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SelectionControlItems.kt
new file mode 100644
index 0000000..cd583cb
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SelectionControlItems.kt
@@ -0,0 +1,39 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import app.k9mail.core.ui.compose.designsystem.atom.Checkbox
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
+
+fun LazyGridScope.selectionControlItems() {
+    sectionHeaderItem(text = "Selection Controls")
+    sectionSubtitleItem(text = "Checkbox")
+    captionItem(caption = "Checked") {
+        Checkbox(checked = true, onCheckedChange = {})
+    }
+    captionItem(caption = "Unchecked") {
+        Checkbox(checked = false, onCheckedChange = {})
+    }
+    captionItem(caption = "Disabled Checked") {
+        Checkbox(checked = true, onCheckedChange = {}, enabled = false)
+    }
+    captionItem(caption = "Disabled") {
+        Checkbox(checked = false, onCheckedChange = {}, enabled = false)
+    }
+}
+
+private fun LazyGridScope.captionItem(
+    caption: String,
+    content: @Composable () -> Unit,
+) {
+    item {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            content()
+            TextCaption(text = caption)
+        }
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TextFieldItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TextFieldItems.kt
new file mode 100644
index 0000000..9bfdc5f
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TextFieldItems.kt
@@ -0,0 +1,90 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import app.k9mail.core.ui.compose.designsystem.atom.textfield.PasswordTextFieldOutlined
+import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlined
+
+fun LazyGridScope.textFieldItems() {
+    sectionHeaderItem(text = "Text fields")
+    textFieldOutlinedItems()
+    passwordTextFieldOutlinedItems()
+}
+
+private fun LazyGridScope.textFieldOutlinedItems() {
+    sectionSubtitleItem(text = "Outlined")
+    item {
+        WithRememberedInput(text = "Initial text") { input ->
+            TextFieldOutlined(
+                value = input.value,
+                label = "Label",
+                onValueChange = { input.value = it },
+            )
+        }
+    }
+    item {
+        WithRememberedInput(text = "Input text with error") { input ->
+            TextFieldOutlined(
+                value = input.value,
+                label = "Label",
+                onValueChange = { input.value = it },
+                isError = true,
+            )
+        }
+    }
+    item {
+        WithRememberedInput(text = "Input text disabled") { input ->
+            TextFieldOutlined(
+                value = input.value,
+                label = "Label",
+                onValueChange = { input.value = it },
+                enabled = false,
+            )
+        }
+    }
+}
+
+private fun LazyGridScope.passwordTextFieldOutlinedItems() {
+    sectionSubtitleItem(text = "Password outlined")
+    item {
+        WithRememberedInput(text = "Input text") { input ->
+            PasswordTextFieldOutlined(
+                value = input.value,
+                label = "Label",
+                onValueChange = { input.value = it },
+            )
+        }
+    }
+    item {
+        WithRememberedInput(text = "Input text with error") { input ->
+            PasswordTextFieldOutlined(
+                value = input.value,
+                label = "Label",
+                onValueChange = { input.value = it },
+                isError = true,
+            )
+        }
+    }
+    item {
+        WithRememberedInput(text = "Input text disabled") { input ->
+            PasswordTextFieldOutlined(
+                value = input.value,
+                label = "Label",
+                onValueChange = { input.value = it },
+                enabled = false,
+            )
+        }
+    }
+}
+
+@Composable
+private fun WithRememberedInput(
+    text: String,
+    content: @Composable (text: MutableState<String>) -> Unit,
+) {
+    val inputText = remember { mutableStateOf(text) }
+    content(inputText)
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeHeaderItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeHeaderItem.kt
new file mode 100644
index 0000000..023b72e
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeHeaderItem.kt
@@ -0,0 +1,16 @@
+package app.k9mail.ui.catalog.items
+
+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.text.TextHeadline4
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.themeHeaderItem(
+    text: String,
+) {
+    item(span = { GridItemSpan(maxLineSpan) }) {
+        TextHeadline4(text = text, modifier = Modifier.padding(top = MainTheme.spacings.default))
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeSelectorItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeSelectorItems.kt
new file mode 100644
index 0000000..38dc19a
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeSelectorItems.kt
@@ -0,0 +1,31 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.Modifier
+import app.k9mail.ui.catalog.CatalogTheme
+import app.k9mail.ui.catalog.CatalogThemeSelector
+import app.k9mail.ui.catalog.CatalogThemeVariant
+import app.k9mail.ui.catalog.CatalogThemeVariantSelector
+
+fun LazyGridScope.themeSelectorItems(
+    catalogTheme: CatalogTheme,
+    catalogThemeVariant: CatalogThemeVariant,
+    onThemeChange: () -> Unit,
+    onThemeVariantChange: () -> Unit,
+) {
+    item {
+        CatalogThemeSelector(
+            catalogTheme = catalogTheme,
+            modifier = Modifier.fillMaxWidth(),
+            onThemeChangeClick = onThemeChange,
+        )
+    }
+    item {
+        CatalogThemeVariantSelector(
+            catalogThemeVariant = catalogThemeVariant,
+            modifier = Modifier.fillMaxWidth(),
+            onThemeVariantChange = onThemeVariantChange,
+        )
+    }
+}
diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TypographyItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TypographyItems.kt
new file mode 100644
index 0000000..7ad1735
--- /dev/null
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TypographyItems.kt
@@ -0,0 +1,33 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody2
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline1
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline3
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline5
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline6
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextOverline
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle2
+
+fun LazyGridScope.typographyItems() {
+    sectionHeaderItem(text = "Typography")
+    item { TextHeadline1(text = "Headline1") }
+    item { TextHeadline2(text = "Headline2") }
+    item { TextHeadline3(text = "Headline3") }
+    item { TextHeadline4(text = "Headline4") }
+    item { TextHeadline5(text = "Headline5") }
+    item { TextHeadline6(text = "Headline6") }
+    item { TextSubtitle1(text = "Subtitle1") }
+    item { TextSubtitle2(text = "Subtitle2") }
+    item { TextBody1(text = "Body1") }
+    item { TextBody2(text = "Body2") }
+    item { TextButton(text = "Button") }
+    item { TextCaption(text = "Caption") }
+    item { TextOverline(text = "Overline") }
+}