[#603] Refactor to use Material3

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/common/AppBar.kt

@@ -1,16 +1,19 @@
 package co.nimblehq.sample.compose.ui.common
 
 import androidx.annotation.StringRes
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import co.nimblehq.sample.compose.R
-import co.nimblehq.sample.compose.ui.theme.AppTheme.colors
+import co.nimblehq.sample.compose.ui.theme.AppTheme
 import co.nimblehq.sample.compose.ui.theme.ComposeTheme
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AppBar(
     @StringRes title: Int,
@@ -19,7 +22,9 @@ fun AppBar(
     TopAppBar(
         modifier = modifier,
         title = { Text(text = stringResource(title)) },
-        backgroundColor = colors.topAppBarBackground
+        colors = TopAppBarDefaults.topAppBarColors().copy(
+            containerColor = AppTheme.colors.topAppBarBackground
+        )
     )
 }
 

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt

@@ -2,8 +2,8 @@ package co.nimblehq.sample.compose.ui.screens.main.home
 
 import android.Manifest.permission.*
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.Scaffold
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -22,7 +22,6 @@ import co.nimblehq.sample.compose.ui.models.UiModel
 import co.nimblehq.sample.compose.ui.showToast
 import co.nimblehq.sample.compose.ui.theme.ComposeTheme
 import com.google.accompanist.permissions.*
-import kotlinx.coroutines.flow.*
 
 @Composable
 fun HomeScreen(

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/Item.kt

@@ -2,7 +2,9 @@ package co.nimblehq.sample.compose.ui.screens.main.home
 
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -49,9 +51,11 @@ fun Item(
             expanded = expanded,
             onDismissRequest = { expanded = false }
         ) {
-            DropdownMenuItem(onClick = { onLongClick(uiModel) }) {
-                Text(stringResource(id = R.string.third_edit_menu_title))
-            }
+            DropdownMenuItem(
+                text = { Text(stringResource(id = R.string.third_edit_menu_title)) },
+                onClick = { onLongClick(uiModel) }
+            )
+
         }
     }
 }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/ItemList.kt

@@ -2,7 +2,7 @@ package co.nimblehq.sample.compose.ui.screens.main.home
 
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
@@ -23,7 +23,7 @@ fun ItemList(
                 onClick = onItemClick,
                 onLongClick = onItemLongClick
             )
-            Divider()
+            HorizontalDivider()
         }
     }
 }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt

@@ -4,9 +4,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Button
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt

@@ -3,8 +3,8 @@ package co.nimblehq.sample.compose.ui.screens.main.third
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppColors.kt

@@ -1,28 +1,31 @@
 package co.nimblehq.sample.compose.ui.theme
 
-import androidx.compose.material.*
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 
 // Base colors here
 internal val GreenCitrus = Color(0xFF99CC00)
 
 /**
- * Expand the final [Colors] class to provide more custom app colors.
+ * Expand the final [ColorScheme] class to provide more custom app colors.
  */
-data class AppColors(
-    val themeColors: Colors,
+abstract class AppColors(
+    var colorScheme: ColorScheme = LightColorPalette,
 
     // Custom colors here
     val topAppBarBackground: Color = GreenCitrus
-)
+) {
+    open val themeColors: ColorScheme
+        get() = colorScheme
+}
 
-internal val LightColorPalette = AppColors(
-    themeColors = lightColors()
-)
+internal val LightColorPalette: ColorScheme = lightColorScheme()
 
-internal val DarkColorPalette = AppColors(
-    themeColors = darkColors()
-)
+internal val DarkColorPalette: ColorScheme = darkColorScheme()
 
-internal val LocalAppColors = staticCompositionLocalOf { LightColorPalette }
+internal object AppColorsImpl : AppColors()
+
+internal val LocalAppColors = staticCompositionLocalOf<AppColors> { AppColorsImpl }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppShapes.kt

@@ -1,10 +1,15 @@
 package co.nimblehq.sample.compose.ui.theme
 
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.runtime.staticCompositionLocalOf
 
-private val Shapes = Shapes(
-    // Custom shapes here
-)
+interface AppShapes {
+    val themeShapes: Shapes
+        get() = Shapes(
+            // Custom shapes here
+        )
+}
 
-internal val LocalAppShapes = staticCompositionLocalOf { Shapes }
+object AppShapesImpl : AppShapes
+
+internal val LocalAppShapes = staticCompositionLocalOf<AppShapes> { AppShapesImpl }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppTypography.kt

@@ -1,10 +1,14 @@
 package co.nimblehq.sample.compose.ui.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.runtime.staticCompositionLocalOf
 
-private val Typography = Typography(
+interface AppTypography {
     // Custom typography here
-)
+    val themeTypography: Typography
+        get() = Typography()
+}
 
-internal val LocalAppTypography = staticCompositionLocalOf { Typography }
+object AppTypographyImpl : AppTypography
+
+internal val LocalAppTypography = staticCompositionLocalOf<AppTypography> { AppTypographyImpl }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/Theme.kt

@@ -1,37 +1,47 @@
 package co.nimblehq.sample.compose.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.*
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.*
 
 @Composable
 fun ComposeTheme(
+    colors: AppColors = LocalAppColors.current,
+    dimensions: AppDimensions = LocalAppDimensions.current,
+    shapes: AppShapes = LocalAppShapes.current,
+    styles: AppStyles = LocalAppStyles.current,
+    typography: AppTypography = LocalAppTypography.current,
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit
 ) {
-    val colors = if (darkTheme) {
+    val colorScheme = if (darkTheme) {
         DarkColorPalette
     } else {
         LightColorPalette
     }
-    val typography = LocalAppTypography.current
-    val shapes = LocalAppShapes.current
+    colors.run {
+        this.colorScheme = colorScheme
+    }
 
     CompositionLocalProvider(
-        LocalAppColors provides colors
+        LocalAppColors provides colors,
+        LocalAppDimensions provides dimensions,
+        LocalAppShapes provides shapes,
+        LocalAppTypography provides typography,
+        LocalAppStyles provides styles,
     ) {
         MaterialTheme(
-            colors = colors.themeColors,
-            typography = typography,
-            shapes = shapes,
+            colorScheme = colors.themeColors,
+            shapes = shapes.themeShapes,
+            typography = typography.themeTypography,
             content = content
         )
     }
 }
 
 /**
  * Alternate to [MaterialTheme] allowing us to add our own theme systems
- * or to extend [MaterialTheme]'s types e.g. return our own [Colors] extension.
+ * or to extend [MaterialTheme]'s types e.g. return our own [AppColors] extension.
  */
 object AppTheme {
 
@@ -40,12 +50,12 @@ object AppTheme {
         @ReadOnlyComposable
         get() = LocalAppColors.current
 
-    val typography: Typography
+    val typography: AppTypography
         @Composable
         @ReadOnlyComposable
         get() = LocalAppTypography.current
 
-    val shapes: Shapes
+    val shapes: AppShapes
         @Composable
         @ReadOnlyComposable
         get() = LocalAppShapes.current

sample-compose/gradle/libs.versions.toml

@@ -50,7 +50,7 @@ compose-ui = { group = "androidx.compose.ui", name = "ui" }
 compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
 compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
 compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }
-compose-material = { group = "androidx.compose.material", name = "material" }
+compose-material3 = { group = "androidx.compose.material3", name = "material3" }
 compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" }
 accompanist-permissions = { group = "com.google.accompanist", name = "accompanist-permissions", version.ref = "accompanist" }
 accompanist-systemUiController = { group = "com.google.accompanist", name = "accompanist-systemuicontroller", version.ref = "accompanist" }
@@ -103,7 +103,7 @@ compose = [
     "compose-ui",
     "compose-ui-tooling-preview",
     "compose-foundation",
-    "compose-material",
+    "compose-material3",
     "compose-navigation",
 ]
 hilt = [

template-compose/app/src/main/java/co/nimblehq/template/compose/ui/screens/main/home/HomeScreen.kt

@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Text
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier

template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppColors.kt

@@ -1,26 +1,30 @@
 package co.nimblehq.template.compose.ui.theme
 
-import androidx.compose.material.*
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.staticCompositionLocalOf
 
 // Base colors here
 // e.g. internal val GreenCitrus = Color(0xFF99CC00)
 
 /**
- * Expand the final [Colors] class to provide more custom app colors.
+ * Expand the final [ColorScheme] class to provide more custom app colors.
  */
-data class AppColors(
-    val themeColors: Colors
+abstract class AppColors(
+    var colorScheme: ColorScheme = LightColorPalette,
 
     // Custom colors here
-)
+) {
+    open val themeColors: ColorScheme
+        get() = colorScheme
+}
 
-internal val LightColorPalette = AppColors(
-    themeColors = lightColors()
-)
+internal val LightColorPalette: ColorScheme = lightColorScheme()
 
-internal val DarkColorPalette = AppColors(
-    themeColors = darkColors()
-)
+internal val DarkColorPalette: ColorScheme = darkColorScheme()
+
+internal object AppColorsImpl : AppColors()
+
+internal val LocalAppColors = staticCompositionLocalOf<AppColors> { AppColorsImpl }
 
-internal val LocalAppColors = staticCompositionLocalOf { LightColorPalette }

template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppShapes.kt

@@ -1,10 +1,15 @@
 package co.nimblehq.template.compose.ui.theme
 
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.runtime.staticCompositionLocalOf
 
-private val Shapes = Shapes(
-    // Custom shapes here
-)
+interface AppShapes {
+    val themeShapes: Shapes
+        get() = Shapes(
+            // Custom shapes here
+        )
+}
 
-internal val LocalAppShapes = staticCompositionLocalOf { Shapes }
+object AppShapesImpl : AppShapes
+
+internal val LocalAppShapes = staticCompositionLocalOf<AppShapes> { AppShapesImpl }

template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppTypography.kt

@@ -1,10 +1,15 @@
 package co.nimblehq.template.compose.ui.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.runtime.staticCompositionLocalOf
 
-private val Typography = Typography(
+interface AppTypography {
     // Custom typography here
-)
+    val themeTypography: Typography
+        get() = Typography()
+}
+
+object AppTypographyImpl : AppTypography
+
+internal val LocalAppTypography = staticCompositionLocalOf<AppTypography> { AppTypographyImpl }
 
-internal val LocalAppTypography = staticCompositionLocalOf { Typography }