feat: migrate to Material3

app/src/androidMain/kotlin/dev/alvr/katana/ui/main/components/SessionExpiredDialog.kt

@@ -1,8 +1,8 @@
 package dev.alvr.katana.ui.main.components
 
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.window.DialogProperties

app/src/androidMain/kotlin/dev/alvr/katana/ui/main/navigation/KatanaDestinations.kt

@@ -11,13 +11,13 @@ import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Scaffold
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hierarchy
@@ -60,7 +60,10 @@ internal fun KatanaDestinations(
 
     ModalBottomSheetLayout(
         bottomSheetNavigator = bottomSheetNavigator,
-        sheetShape = RoundedCornerShape(16.dp),
+        sheetShape = MaterialTheme.shapes.large,
+        sheetBackgroundColor = MaterialTheme.colorScheme.surface,
+        sheetContentColor = contentColorFor(MaterialTheme.colorScheme.surface),
+        scrimColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.32f),
     ) {
         Scaffold(
             modifier = Modifier.systemBarsPadding(),

app/src/androidMain/kotlin/dev/alvr/katana/ui/main/navigation/NavigationBar.kt

@@ -12,13 +12,12 @@ import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
-import androidx.compose.material.BottomNavigation
-import androidx.compose.material.BottomNavigationItem
-import androidx.compose.material.Icon
-import androidx.compose.material.LocalContentColor
-import androidx.compose.material.NavigationRail
-import androidx.compose.material.NavigationRailItem
-import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationRail
+import androidx.compose.material3.NavigationRailItem
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -104,9 +103,9 @@ private fun BottomNavigationBar(
     isItemSelected: (NavigationBarItem) -> Boolean,
     onClick: (NavigationBarItem) -> Unit,
 ) {
-    BottomNavigation {
+    NavigationBar {
         destinations.forEach { destination ->
-            BottomNavigationItem(
+            NavigationBarItem(
                 icon = { NavigationBarIcon(destination) },
                 label = { NavigationBarLabel(destination) },
                 selected = isItemSelected(destination),
@@ -136,7 +135,6 @@ private fun RailNavigationBar(
                 icon = { NavigationBarIcon(destination) },
                 label = { NavigationBarLabel(destination) },
                 selected = isItemSelected(destination),
-                selectedContentColor = LocalContentColor.current,
                 onClick = { onClick(destination) },
                 alwaysShowLabel = false,
             )

gradle/libs.versions.toml

@@ -29,6 +29,7 @@ ksp = "1.9.22-1.0.16"
 ktor = "2.3.7"
 lifecycle = "2.7.0"
 lyricist = "1.6.2-1.8.20"
+materialkolor = "1.3.0"
 mockk = "1.13.9"
 mockmp = "1.16.0"
 okio = "3.7.0"
@@ -76,7 +77,7 @@ arrow = { module = "io.arrow-kt:arrow-core", version.ref = "arrow" }
 # Compose
 compose-compiler = { module = "org.jetbrains.compose.compiler:compiler", version.ref = "compose-compiler" }
 compose-material3-windowsize = { module = "dev.chrisbanes.material3:material3-window-size-class-multiplatform", version.ref = "window-size" }
-compose-placeholder = { module = "com.eygraber:compose-placeholder-material", version.ref = "placeholder" }
+compose-placeholder = { module = "com.eygraber:compose-placeholder-material3", version.ref = "placeholder" }
 
 # Coroutines
 coroutines = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }
@@ -144,6 +145,9 @@ lifecycle-viewmodel = { module = "androidx.lifecycle:lifecycle-viewmodel", versi
 # Lyricist
 lyricist = { module = "cafe.adriel.lyricist:lyricist", version.ref = "lyricist" }
 
+# MaterialKolor
+materialkolor = { module = "com.materialkolor:material-kolor", version.ref = "materialkolor" }
+
 # Okio
 okio-fakefilesystem = { module = "com.squareup.okio:okio-fakefilesystem", version.ref = "okio" }
 

ui/account/src/commonMain/kotlin/dev/alvr/katana/ui/account/view/AccountScreen.kt

@@ -1,7 +1,7 @@
 package dev.alvr.katana.ui.account.view
 
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Scaffold
+import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier

ui/account/src/commonMain/kotlin/dev/alvr/katana/ui/account/view/UserInfo.kt

@@ -8,8 +8,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Button
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

ui/base/build.gradle.kts

@@ -6,6 +6,7 @@ katanaMultiplatform {
     commonMainDependencies {
         implementation(projects.common.core)
         implementation(libs.compose.placeholder)
+        implementation(libs.materialkolor)
     }
 
     commonTestDependencies {

ui/base/src/commonMain/kotlin/dev/alvr/katana/ui/base/components/KatanaSearchTopAppBar.kt

@@ -3,16 +3,15 @@ package dev.alvr.katana.ui.base.components
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
-import androidx.compose.material.TextFieldDefaults
-import androidx.compose.material.TextFieldDefaults.BackgroundOpacity
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowBack
 import androidx.compose.material.icons.outlined.Clear
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -89,10 +88,12 @@ fun KatanaSearchTopAppBar(
         shape = RectangleShape,
         keyboardActions = KeyboardActions(onSearch = { focusManager.clearFocus() }),
         keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Search),
-        colors = TextFieldDefaults.textFieldColors(
-            cursorColor = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),
+        colors = TextFieldDefaults.colors(
+            cursorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = BackgroundOpacity),
             focusedIndicatorColor = Color.Transparent,
             unfocusedIndicatorColor = Color.Transparent,
         ),
     )
 }
+
+private const val BackgroundOpacity = 0.12f

ui/base/src/commonMain/kotlin/dev/alvr/katana/ui/base/components/KatanaStates.kt

@@ -8,15 +8,15 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.Text
-import androidx.compose.material.contentColorFor
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.twotone.Error
 import androidx.compose.material.icons.twotone.Inbox
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -61,8 +61,8 @@ fun KatanaErrorState(
             onClick = onRetry,
             enabled = !loading,
             colors = ButtonDefaults.outlinedButtonColors(
-                backgroundColor = MaterialTheme.colors.secondaryVariant,
-                contentColor = contentColorFor(MaterialTheme.colors.primaryVariant),
+                containerColor = MaterialTheme.colorScheme.secondary,
+                contentColor = contentColorFor(MaterialTheme.colorScheme.primary),
             ),
         ) {
             Text(text = buttonText, fontWeight = FontWeight.Bold)

ui/base/src/commonMain/kotlin/dev/alvr/katana/ui/base/components/home/KatanaHomeScaffold.kt

@@ -15,9 +15,11 @@ import androidx.compose.material.BackdropScaffold
 import androidx.compose.material.BackdropScaffoldState
 import androidx.compose.material.BackdropValue
 import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Surface
 import androidx.compose.material.rememberBackdropScaffoldState
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
@@ -63,8 +65,13 @@ fun KatanaHomeScaffold(
                 searchPlaceholder = searchPlaceholder,
             )
         },
+        backLayerBackgroundColor = MaterialTheme.colorScheme.primary,
+        backLayerContentColor = contentColorFor(MaterialTheme.colorScheme.primary),
         backLayerContent = backContent,
         frontLayerShape = RectangleShape,
+        frontLayerBackgroundColor = MaterialTheme.colorScheme.surface,
+        frontLayerContentColor = contentColorFor(MaterialTheme.colorScheme.surface),
+        frontLayerScrimColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.60f),
         frontLayerContent = {
             Scaffold(
                 floatingActionButton = { fab?.invoke() },

ui/base/src/commonMain/kotlin/dev/alvr/katana/ui/base/components/home/KatanaHomeTopAppBar.kt

@@ -1,21 +1,21 @@
 package dev.alvr.katana.ui.base.components.home
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.FilterAlt
 import androidx.compose.material.icons.outlined.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import dev.alvr.katana.common.core.zero
 import dev.alvr.katana.ui.base.strings.LocalBaseStrings
 
 @Composable
+@OptIn(ExperimentalMaterial3Api::class)
 fun KatanaHomeTopAppBar(
     title: String,
     subtitle: String?,
@@ -31,7 +31,7 @@ fun KatanaHomeTopAppBar(
             Column {
                 Text(text = title)
                 if (!subtitle.isNullOrBlank()) {
-                    Text(text = subtitle, style = MaterialTheme.typography.caption)
+                    Text(text = subtitle, style = MaterialTheme.typography.titleSmall)
                 }
             }
         },
@@ -54,6 +54,5 @@ fun KatanaHomeTopAppBar(
                 }
             }
         },
-        elevation = Int.zero.dp,
     )
 }

ui/base/src/commonMain/kotlin/dev/alvr/katana/ui/base/design/Katana.kt

@@ -1,16 +1,25 @@
 package dev.alvr.katana.ui.base.design
 
-import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import com.materialkolor.PaletteStyle.Vibrant
+import com.materialkolor.dynamicColorScheme
 
 @Composable
 fun KatanaTheme(
     content: @Composable () -> Unit,
 ) {
     MaterialTheme(
-        colors = KatanaDarkTheme,
+        colorScheme = dynamicColorScheme(
+            seedColor = Color(ColorSeed),
+            isDark = isSystemInDarkTheme(),
+            style = Vibrant,
+        ),
         typography = KatanaTypography,
-        shapes = KatanaShapes,
         content = content,
     )
 }
+
+private const val ColorSeed = 0xFF333941 // Same as Android's windowSplashScreenBackground attr

ui/base/src/commonMain/kotlin/dev/alvr/katana/ui/base/design/typography.kt

@@ -1,21 +1,39 @@
 package dev.alvr.katana.ui.base.design
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 
 internal val KatanaTypography
-    @Composable get() = Typography(
-        defaultFontFamily = FontFamily(
+    @Composable get() = Typography().apply {
+        val fontFamily = FontFamily(
             font("barlow_light", FontWeight.Light, FontStyle.Normal),
             font("barlow_normal", FontWeight.Normal, FontStyle.Normal),
             font("barlow_medium", FontWeight.Medium, FontStyle.Normal),
             font("barlow_bold", FontWeight.Bold, FontStyle.Normal),
-        ),
-    )
+        )
+
+        copy(
+            displayLarge = displayLarge.copy(fontFamily = fontFamily),
+            displayMedium = displayMedium.copy(fontFamily = fontFamily),
+            displaySmall = displaySmall.copy(fontFamily = fontFamily),
+            headlineLarge = headlineLarge.copy(fontFamily = fontFamily),
+            headlineMedium = headlineMedium.copy(fontFamily = fontFamily),
+            headlineSmall = headlineSmall.copy(fontFamily = fontFamily),
+            titleLarge = titleLarge.copy(fontFamily = fontFamily),
+            titleMedium = titleMedium.copy(fontFamily = fontFamily),
+            titleSmall = titleSmall.copy(fontFamily = fontFamily),
+            bodyLarge = bodyLarge.copy(fontFamily = fontFamily),
+            bodyMedium = bodyMedium.copy(fontFamily = fontFamily),
+            bodySmall = bodySmall.copy(fontFamily = fontFamily),
+            labelLarge = labelLarge.copy(fontFamily = fontFamily),
+            labelMedium = labelMedium.copy(fontFamily = fontFamily),
+            labelSmall = labelSmall.copy(fontFamily = fontFamily),
+        )
+    }
 
 @Composable
 internal expect fun font(font: String, weight: FontWeight, style: FontStyle): Font