Merge pull request #6700 from thundernest/add_design_system

Add design system

build-plugin/src/main/kotlin/thunderbird.app.android.compose.gradle.kts

@@ -21,7 +21,7 @@ dependencies {
     implementation(composeBom)
     androidTestImplementation(composeBom)
 
-    implementation("androidx.compose.material:material")
+    implementation("androidx.compose.foundation:foundation")
 
     // Android Studio Preview support
     implementation("androidx.compose.ui:ui-tooling-preview")

build-plugin/src/main/kotlin/thunderbird.library.android.compose.gradle.kts

@@ -11,7 +11,7 @@ dependencies {
     implementation(composeBom)
     androidTestImplementation(composeBom)
 
-    implementation("androidx.compose.material:material")
+    implementation("androidx.compose.foundation:foundation")
 
     // Android Studio Preview support
     implementation("androidx.compose.ui:ui-tooling-preview")

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

@@ -13,7 +13,7 @@ android {
 }
 
 dependencies {
-    implementation(projects.core.ui.compose.theme)
+    implementation(projects.core.ui.compose.designsystem)
 
     androidTestImplementation(libs.androidx.test.ext.junit.ktx)
     androidTestImplementation(libs.androidx.test.espresso.core)

core/ui/compose/demo/src/main/java/app/k9mail/core/ui/compose/demo/MainView.kt

@@ -4,12 +4,29 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+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.ButtonOutlined
+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.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
 import app.k9mail.core.ui.compose.theme.K9Theme
 import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
@@ -18,9 +35,12 @@ import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
 fun MainView(
     modifier: Modifier = Modifier,
 ) {
+    val scrollState = rememberScrollState()
+
     Column(
         modifier = Modifier
             .fillMaxSize()
+            .verticalScroll(scrollState)
             .then(modifier),
     ) {
         K9Theme {
@@ -39,7 +59,7 @@ fun MainView(
 }
 
 @Composable
-fun MainContent(
+private fun MainContent(
     name: String,
     modifier: Modifier = Modifier,
 ) {
@@ -47,15 +67,49 @@ fun MainContent(
         modifier = Modifier
             .fillMaxWidth()
             .then(modifier),
-        color = MainTheme.colors.background,
     ) {
         Column {
-            Text(text = "Hello $name!")
+            TextHeadline4(text = "$name theme")
             Image(painter = painterResource(id = MainTheme.images.logo), contentDescription = "logo")
+
+            ButtonContent()
+            TypographyContent()
         }
     }
 }
 
+@Composable
+private fun ButtonContent() {
+    Column {
+        TextHeadline6(text = "Buttons")
+
+        Button(text = "Button", onClick = { })
+        ButtonOutlined(text = "ButtonOutlined", onClick = { })
+        ButtonText(text = "ButtonText", onClick = { })
+    }
+}
+
+@Composable
+private fun TypographyContent() {
+    Column {
+        TextHeadline6(text = "Typography")
+
+        TextHeadline1(text = "Headline1")
+        TextHeadline2(text = "Headline2")
+        TextHeadline3(text = "Headline3")
+        TextHeadline4(text = "Headline4")
+        TextHeadline5(text = "Headline5")
+        TextHeadline6(text = "Headline6")
+        TextSubtitle1(text = "Subtitle1")
+        TextSubtitle2(text = "Subtitle2")
+        TextBody1(text = "Body1")
+        TextBody2(text = "Body2")
+        TextButton(text = "Button")
+        TextCaption(text = "Caption")
+        TextOverline(text = "Overline")
+    }
+}
+
 @Preview(showBackground = true)
 @Composable
 fun Preview() {

core/ui/compose/designsystem/README.md

@@ -0,0 +1,38 @@
+## Core - UI - Compose - Design system
+
+Uses [`:core:ui:compose:theme`](../theme/README.md)
+
+## Background
+
+[Jetpack Compose](https://developer.android.com/jetpack/compose) is a declarative UI toolkit for Android that provides a modern and efficient way to build UIs for Android apps. In this context, design systems and atomic design can help designers and developers create more scalable, maintainable, and reusable UIs.
+
+### Design system
+
+A design system is a collection of guidelines, principles, and tools that help teams create consistent and cohesive visual designs and user experiences.
+It typically includes a set of reusable components, such as icons, typography, color palettes, and layouts, that can be combined and customized to create new designs.
+
+The design system also provides documentation and resources for designers and developers to ensure that the designs are implemented consistently and efficiently across all platforms and devices.
+The goal of a design system is to streamline the design process, improve design quality, and maintain brand consistency.
+
+An example is Google's [Material Design](https://m3.material.io/) that is used to develop cohesive apps.
+
+### Atomic Design
+
+![Atomic design](assets/images/atomic_design.svg)
+
+Atomic design is a methodology for creating user interfaces (UI) in a design system by breaking them down into smaller, reusable components.
+These components are classified into five categories based on their level of abstraction: **atoms**, **molecules**, **organisms**, **templates**, and **pages**.
+
+- **Atoms** are the smallest building blocks, such as buttons, labels, and input fields and could be combined to create more complex components.
+- **Molecules** are groups of atoms that work together, like search bars, forms or menus
+- **Organisms** are more complex components that combine molecules and atoms, such as headers or cards.
+- **Templates** are pages with placeholders for components
+- **Pages** are the final UI
+
+By using atomic design, designers and developers can create more consistent and reusable UIs.
+This can save time and improve the overall quality, as well as facilitate collaboration between team members.
+
+## Acknowledgement
+
+- [Atomic Design Methodology | Atomic Design by Brad Frost](https://atomicdesign.bradfrost.com/chapter-2/)
+- [Atomic Design: Getting Started | Blog | We Are Mobile First](https://www.wearemobilefirst.com/blog/atomic-design)

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

@@ -0,0 +1,13 @@
+plugins {
+    id(ThunderbirdPlugins.Library.androidCompose)
+}
+
+android {
+    namespace = "app.k9mail.core.ui.compose.designsystem"
+    resourcePrefix = "core_ui_designsystem_"
+}
+
+dependencies {
+    api(projects.core.ui.compose.theme)
+    implementation(libs.androidx.compose.material)
+}

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

@@ -0,0 +1,32 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Surface as MaterialSurface
+
+@Composable
+fun Background(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    MaterialSurface(
+        modifier = modifier,
+        content = content,
+        color = MainTheme.colors.background,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun BackgroundPreview() {
+    PreviewWithThemes {
+        Background(
+            modifier = Modifier.fillMaxSize(),
+            content = {},
+        )
+    }
+}

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

@@ -0,0 +1,32 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Surface as MaterialSurface
+
+@Composable
+fun Surface(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    MaterialSurface(
+        modifier = modifier,
+        content = content,
+        color = MainTheme.colors.surface,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun SurfacePreview() {
+    PreviewWithThemes {
+        Surface(
+            modifier = Modifier.fillMaxSize(),
+            content = {},
+        )
+    }
+}

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

@@ -0,0 +1,52 @@
+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.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
+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,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
+) {
+    MaterialButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        colors = ButtonDefaults.buttonColors(),
+        contentPadding = contentPadding,
+    ) {
+        TextButton(text = text)
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun ButtonPreview() {
+    PreviewWithThemes {
+        Button(
+            text = "Button",
+            onClick = {},
+        )
+    }
+}
+
+@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/ButtonOutlined.kt

@@ -0,0 +1,65 @@
+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.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
+
+@Composable
+fun ButtonOutlined(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
+) {
+    MaterialOutlinedButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        colors = ButtonDefaults.outlinedButtonColors(),
+        border = BorderStroke(
+            width = 1.dp,
+            color = if (enabled) {
+                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 ButtonOutlinedDisabledPreview() {
+    PreviewWithThemes {
+        ButtonOutlined(
+            text = "ButtonOutlinedDisabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

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

@@ -0,0 +1,52 @@
+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.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
+import app.k9mail.core.ui.compose.theme.PreviewWithThemes
+import androidx.compose.material.TextButton as MaterialTextButton
+
+@Composable
+fun ButtonText(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
+) {
+    MaterialTextButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        colors = ButtonDefaults.textButtonColors(),
+        contentPadding = contentPadding,
+    ) {
+        TextButton(text = text)
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun ButtonTextPreview() {
+    PreviewWithThemes {
+        ButtonText(
+            text = "ButtonText",
+            onClick = {},
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun ButtonTextDisabledPreview() {
+    PreviewWithThemes {
+        ButtonText(
+            text = "ButtonTextDisabled",
+            onClick = {},
+            enabled = false,
+        )
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextBody1(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.body1,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextBody1Preview() {
+    PreviewWithThemes {
+        TextBody1(text = "TextBody1")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextBody2(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.body2,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextBody2Preview() {
+    PreviewWithThemes {
+        TextBody2(text = "TextBody2")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextButton(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text.uppercase(),
+        style = MainTheme.typography.button,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextButtonPreview() {
+    PreviewWithThemes {
+        TextButton(text = "TextButton")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextCaption(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.caption,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextCaptionPreview() {
+    PreviewWithThemes {
+        TextCaption(text = "TextCaption")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextHeadline1(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.h1,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextHeadline1Preview() {
+    PreviewWithThemes {
+        TextHeadline1(text = "TextHeadline1")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextHeadline2(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.h2,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextHeadline2Preview() {
+    PreviewWithThemes {
+        TextHeadline2(text = "TextHeadline2")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextHeadline3(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.h3,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextHeadline3Preview() {
+    PreviewWithThemes {
+        TextHeadline3(text = "TextHeadline3")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextHeadline4(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.h4,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextHeadline4Preview() {
+    PreviewWithThemes {
+        TextHeadline4(text = "TextHeadline4")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextHeadline5(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.h5,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextHeadline5Preview() {
+    PreviewWithThemes {
+        TextHeadline5(text = "TextHeadline5")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextHeadline6(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.h6,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextHeadline6Preview() {
+    PreviewWithThemes {
+        TextHeadline6(text = "TextHeadline6")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextOverline(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text.uppercase(),
+        style = MainTheme.typography.overline,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextOverlinePreview() {
+    PreviewWithThemes {
+        TextOverline(text = "TextOverline")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextSubtitle1(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.subtitle1,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextSubtitle1Preview() {
+    PreviewWithThemes {
+        TextSubtitle1(text = "TextSubtitle1")
+    }
+}

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

@@ -0,0 +1,28 @@
+package app.k9mail.core.ui.compose.designsystem.atom.text
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.Text as MaterialText
+
+@Composable
+fun TextSubtitle2(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    MaterialText(
+        text = text,
+        style = MainTheme.typography.subtitle2,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextSubtitle2Preview() {
+    PreviewWithThemes {
+        TextSubtitle2(text = "TextSubtitle2")
+    }
+}

core/ui/compose/theme/README.md

@@ -0,0 +1,27 @@
+## Core - UI - Compose - Theme
+
+This provides the `MainTheme` with dark/light variation, a wrapper for the Compose Material2 theme. It supports [CompositionLocal](https://developer.android.com/jetpack/compose/compositionlocal) changes to colors, typography, shapes and adds additionally elevations, sizes, spacings and images.
+
+To change Material2 related properties use `MainTheme` instead of `MaterialTheme`:
+
+- `MainTheme.colors`: Material2 colors
+- `MainTheme.typography`: Material 2 typography
+- `MainTheme.shapes`: Material2 shapes
+- `MainTheme.spacings`: Spacings (quarter, half, default, oneHalf, double, triple, quadruple) while default is 8 dp.
+- `MainTheme.sizes`: Sizes (smaller, small, medium, large, larger, huge, huger)
+- `MainTheme.elevations`: Elevation, e.g. card
+- `MainTheme.images`: Images used across the theme, e.g. logo
+
+Included are two derived themes for K-9 and Thunderbird look: `K9Theme` and `ThunderbirdTheme`.
+
+To render previews for both themes use `PreviewWithThemes`. This also includes a dark/light variation:
+
+```
+@Preview(showBackground = true)
+@Composable
+fun MyViewPreview() {
+    PreviewWithThemes {
+        MyView()
+    }
+}
+```

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

@@ -4,4 +4,9 @@ plugins {
 
 android {
     namespace = "app.k9mail.core.ui.compose.theme"
+    resourcePrefix = "core_ui_theme_"
+}
+
+dependencies {
+    implementation(libs.androidx.compose.material)
 }

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/K9Theme.kt

@@ -24,7 +24,7 @@ fun K9Theme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit,
 ) {
-    val images = Images(logo = app.k9mail.core.ui.compose.demo.R.drawable.logo_orange)
+    val images = Images(logo = R.drawable.core_ui_theme_logo_orange)
 
     MainTheme(
         lightColorPalette = k9LightColorPalette,

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/MainTheme.kt

@@ -7,6 +7,7 @@ import androidx.compose.material.Shapes
 import androidx.compose.material.Typography
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.ReadOnlyComposable
 
 @Composable
 fun MainTheme(
@@ -46,29 +47,36 @@ fun MainTheme(
 object MainTheme {
     val colors: Colors
         @Composable
+        @ReadOnlyComposable
         get() = MaterialTheme.colors
 
     val typography: Typography
         @Composable
+        @ReadOnlyComposable
         get() = MaterialTheme.typography
 
     val shapes: Shapes
         @Composable
+        @ReadOnlyComposable
         get() = MaterialTheme.shapes
 
     val spacings: Spacings
         @Composable
+        @ReadOnlyComposable
         get() = LocalSpacings.current
 
     val sizes: Sizes
         @Composable
+        @ReadOnlyComposable
         get() = LocalSizes.current
 
     val elevations: Elevations
         @Composable
+        @ReadOnlyComposable
         get() = LocalElevations.current
 
     val images: Images
         @Composable
+        @ReadOnlyComposable
         get() = LocalImages.current
 }

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/PreviewWithThemes.kt

@@ -0,0 +1,64 @@
+package app.k9mail.core.ui.compose.theme
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun PreviewWithThemes(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    Column(
+        modifier = modifier,
+    ) {
+        PreviewHeader(themeName = "K9Theme")
+        K9Theme {
+            PreviewSurface(content = content)
+        }
+        K9Theme(darkTheme = true) {
+            PreviewSurface(content = content)
+        }
+
+        PreviewHeader(themeName = "ThunderbirdTheme")
+        ThunderbirdTheme {
+            PreviewSurface(content = content)
+        }
+        ThunderbirdTheme(darkTheme = true) {
+            PreviewSurface(content = content)
+        }
+    }
+}
+
+@Composable
+private fun PreviewHeader(
+    themeName: String,
+) {
+    Surface(
+        color = Color.Cyan,
+    ) {
+        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.background,
+        content = content,
+    )
+}

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/Sizes.kt

@@ -1,15 +1,19 @@
 package app.k9mail.core.ui.compose.theme
 
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
+@Immutable
 data class Sizes(
     val smaller: Dp = 8.dp,
     val small: Dp = 16.dp,
     val medium: Dp = 32.dp,
     val large: Dp = 64.dp,
     val larger: Dp = 128.dp,
+    val huge: Dp = 256.dp,
+    val huger: Dp = 384.dp,
 )
 
 internal val LocalSizes = staticCompositionLocalOf { Sizes() }

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/Spacings.kt

@@ -1,13 +1,15 @@
 package app.k9mail.core.ui.compose.theme
 
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
+@Immutable
 data class Spacings(
     val quarter: Dp = 2.dp,
     val half: Dp = 4.dp,
-    val single: Dp = 8.dp,
+    val default: Dp = 8.dp,
     val oneHalf: Dp = 12.dp,
     val double: Dp = 16.dp,
     val triple: Dp = 24.dp,

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/ThunderbirdTheme.kt

@@ -24,7 +24,7 @@ fun ThunderbirdTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit,
 ) {
-    val images = Images(logo = app.k9mail.core.ui.compose.demo.R.drawable.logo_teal)
+    val images = Images(logo = R.drawable.core_ui_theme_logo_teal)
 
     MainTheme(
         lightColorPalette = thunderbirdLightColorPalette,

gradle/libs.versions.toml

@@ -74,6 +74,7 @@ androidx-preference = { module = "androidx.preference:preference", version.ref =
 androidx-swiperefreshlayout = "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
 androidx-compose-activity = "androidx.activity:activity-compose:1.6.1"
 androidx-compose-lifecycle-viewmodel = "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
+androidx-compose-material = "androidx.compose.material:material:1.3.1"
 androidx-test-core = "androidx.test:core:1.5.0"
 androidx-test-ext-junit-ktx = "androidx.test.ext:junit-ktx:1.1.5"
 androidx-test-espresso-core = "androidx.test.espresso:espresso-core:3.5.1"

settings.gradle.kts

@@ -40,6 +40,7 @@ include(
 
 include(
     ":core:ui:compose:demo",
+    ":core:ui:compose:designsystem",
     ":core:ui:compose:theme",
 )