all: migrate to M3

android/build.gradle.kts

@@ -1,3 +1,5 @@
+@file:OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+
 import java.util.Properties
 
 plugins {
@@ -13,6 +15,7 @@ dependencies {
   implementation(projects.api)
   implementation(projects.common)
   implementation(projects.database)
+  implementation(compose.material3)
   implementation(libs.accompanist.insets)
   implementation(libs.accompanist.swiperefresh)
   implementation(libs.accompanist.sysuicontroller)

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/ClawFab.kt

@@ -8,8 +8,8 @@ import androidx.compose.animation.core.tween
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.material.FloatingActionButton
+import androidx.compose.material3.FloatingActionButton
-import androidx.compose.material.Icon
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt

@@ -1,12 +1,11 @@
 package dev.msfjarvis.claw.android.ui
 
-import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material.Scaffold
+import androidx.compose.material3.MaterialTheme
-import androidx.compose.material.primarySurface
+import androidx.compose.material3.Scaffold
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.rememberScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
@@ -40,7 +39,7 @@ import dev.msfjarvis.claw.database.local.SavedPost
 
 private const val ScrollDelta = 50
 
-@OptIn(ExperimentalAnimationApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun LobstersApp(
   viewModel: ClawViewModel = viewModel(),
@@ -101,11 +100,10 @@ fun LobstersApp(
       ),
   ) {
     ProvideWindowInsets {
-      val useDarkIcons = MaterialTheme.colors.isLight
+      val statusBarColor = MaterialTheme.colorScheme.background
-      val statusBarColor = MaterialTheme.colors.primarySurface
 
       SideEffect {
-        systemUiController.setStatusBarColor(color = statusBarColor, darkIcons = useDarkIcons)
+        systemUiController.setStatusBarColor(color = statusBarColor)
         systemUiController.setNavigationBarColor(color = Color.Transparent)
       }
       val items = viewModel.pagerFlow.collectAsLazyPagingItems()

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/TopAppBar.kt

@@ -1,8 +1,8 @@
 package dev.msfjarvis.claw.android.ui
 
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Text
+import androidx.compose.material3.SmallTopAppBar
-import androidx.compose.material.TopAppBar
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -14,7 +14,7 @@ import dev.msfjarvis.claw.android.R
 fun ClawAppBar(
   modifier: Modifier = Modifier,
 ) {
-  TopAppBar(
+  SmallTopAppBar(
     title = {
       Text(
         text = stringResource(R.string.app_name),

common/build.gradle.kts

@@ -1,3 +1,5 @@
+@file:OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+
 import org.jetbrains.compose.compose
 
 plugins {
@@ -14,6 +16,7 @@ kotlin {
       api(compose.runtime)
       api(compose.foundation)
       api(compose.material)
+      api(compose.material3)
       api(projects.database)
       api(projects.model)
       implementation(libs.compose.richtext.markdown)

common/src/androidMain/kotlin/dev/msfjarvis/claw/common/theme/Theme.kt

@@ -7,7 +7,7 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import dev.msfjarvis.claw.common.R
 
-actual val manropeFontFamily =
+actual val Manrope =
   FontFamily(
     Font(R.font.manrope_bold, FontWeight.Bold),
     Font(R.font.manrope_extrabold, FontWeight.ExtraBold),

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/comments/CommentEntry.kt

@@ -7,7 +7,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.Divider
-import androidx.compose.material.Surface
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/comments/Comments.kt

@@ -8,7 +8,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Divider
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -66,6 +66,6 @@ private fun ProgressBar(
   modifier: Modifier,
 ) {
   Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-    CircularProgressIndicator(color = MaterialTheme.colors.secondary)
+    CircularProgressIndicator(color = MaterialTheme.colorScheme.secondary)
   }
 }

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/posts/LobstersItem.kt

@@ -18,10 +18,10 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
+import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.Icon
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
-import androidx.compose.material.primarySurface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,7 +37,11 @@ import dev.msfjarvis.claw.common.ui.NetworkImage
 import dev.msfjarvis.claw.database.local.SavedPost
 
 @Composable
-@OptIn(ExperimentalMaterialApi::class, ExperimentalFoundationApi::class)
+@OptIn(
+  ExperimentalMaterial3Api::class,
+  ExperimentalMaterialApi::class,
+  ExperimentalFoundationApi::class,
+)
 fun LobstersCard(
   post: SavedPost,
   isSaved: Boolean,
@@ -45,7 +49,7 @@ fun LobstersCard(
   modifier: Modifier = Modifier,
 ) {
   Card(
-    modifier = modifier.background(MaterialTheme.colors.primarySurface),
+    modifier = modifier.background(MaterialTheme.colorScheme.background),
     onClick = { postActions.viewPost(post.url, post.commentsUrl) },
   ) {
     Column(
@@ -163,7 +167,7 @@ fun SaveButton(
   Crossfade(targetState = isSaved) { saved ->
     Icon(
       painter = if (saved) heartIcon else heartBorderIcon,
-      tint = MaterialTheme.colors.secondary,
+      tint = MaterialTheme.colorScheme.secondary,
       contentDescription = if (saved) "Remove from saved posts" else "Add to saved posts",
       modifier = modifier,
     )
@@ -176,7 +180,7 @@ fun CommentsButton(
 ) {
   Icon(
     painter = commentIcon,
-    tint = MaterialTheme.colors.secondary,
+    tint = MaterialTheme.colorScheme.secondary,
     contentDescription = "Open comments",
     modifier = modifier,
   )
@@ -199,11 +203,11 @@ fun TagRow(
           text = tag,
           modifier =
             Modifier.background(
-                MaterialTheme.colors.secondary.copy(alpha = 0.75f),
+                MaterialTheme.colorScheme.secondary.copy(alpha = 0.75f),
                 RoundedCornerShape(8.dp)
               )
               .padding(vertical = 2.dp, horizontal = 6.dp),
-          color = MaterialTheme.colors.onSecondary,
+          color = MaterialTheme.colorScheme.onSecondary,
         )
       }
     }

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/theme/Color.kt

@@ -0,0 +1,58 @@
+package dev.msfjarvis.claw.common.theme
+
+import androidx.compose.ui.graphics.Color
+
+val md_theme_light_primary = Color(0xFFac3325)
+val md_theme_light_onPrimary = Color(0xFFffffff)
+val md_theme_light_primaryContainer = Color(0xFFffdad3)
+val md_theme_light_onPrimaryContainer = Color(0xFF410000)
+val md_theme_light_secondary = Color(0xFF775752)
+val md_theme_light_onSecondary = Color(0xFFffffff)
+val md_theme_light_secondaryContainer = Color(0xFFffdad3)
+val md_theme_light_onSecondaryContainer = Color(0xFF2c1511)
+val md_theme_light_tertiary = Color(0xFF705c2e)
+val md_theme_light_onTertiary = Color(0xFFffffff)
+val md_theme_light_tertiaryContainer = Color(0xFFfbdfa5)
+val md_theme_light_onTertiaryContainer = Color(0xFF261a00)
+val md_theme_light_error = Color(0xFFba1b1b)
+val md_theme_light_errorContainer = Color(0xFFffdad4)
+val md_theme_light_onError = Color(0xFFffffff)
+val md_theme_light_onErrorContainer = Color(0xFF410001)
+val md_theme_light_background = Color(0xFFfcfcfc)
+val md_theme_light_onBackground = Color(0xFF201a19)
+val md_theme_light_surface = Color(0xFFfcfcfc)
+val md_theme_light_onSurface = Color(0xFF201a19)
+val md_theme_light_surfaceVariant = Color(0xFFf5deda)
+val md_theme_light_onSurfaceVariant = Color(0xFF534341)
+val md_theme_light_outline = Color(0xFF867370)
+val md_theme_light_inverseOnSurface = Color(0xFFfbeeec)
+val md_theme_light_inverseSurface = Color(0xFF362f2e)
+
+val md_theme_dark_primary = Color(0xFFffb4a6)
+val md_theme_dark_onPrimary = Color(0xFF690000)
+val md_theme_dark_primaryContainer = Color(0xFF8a1a10)
+val md_theme_dark_onPrimaryContainer = Color(0xFFffdad3)
+val md_theme_dark_secondary = Color(0xFFe7bdb6)
+val md_theme_dark_onSecondary = Color(0xFF442925)
+val md_theme_dark_secondaryContainer = Color(0xFF5d3f3a)
+val md_theme_dark_onSecondaryContainer = Color(0xFFffdad3)
+val md_theme_dark_tertiary = Color(0xFFdec48c)
+val md_theme_dark_onTertiary = Color(0xFF3e2e04)
+val md_theme_dark_tertiaryContainer = Color(0xFF564418)
+val md_theme_dark_onTertiaryContainer = Color(0xFFfbdfa5)
+val md_theme_dark_error = Color(0xFFffb4a9)
+val md_theme_dark_errorContainer = Color(0xFF930006)
+val md_theme_dark_onError = Color(0xFF680003)
+val md_theme_dark_onErrorContainer = Color(0xFFffdad4)
+val md_theme_dark_background = Color(0xFF201a19)
+val md_theme_dark_onBackground = Color(0xFFede0de)
+val md_theme_dark_surface = Color(0xFF201a19)
+val md_theme_dark_onSurface = Color(0xFFede0de)
+val md_theme_dark_surfaceVariant = Color(0xFF534341)
+val md_theme_dark_onSurfaceVariant = Color(0xFFd8c2be)
+val md_theme_dark_outline = Color(0xFFa08c89)
+val md_theme_dark_inverseOnSurface = Color(0xFF201a19)
+val md_theme_dark_inverseSurface = Color(0xFFede0de)
+
+val seed = Color(0xFF6c0000)
+val error = Color(0xFFba1b1b)

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/theme/Theme.kt

@@ -1,57 +1,87 @@
 package dev.msfjarvis.claw.common.theme
 
-import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.Typography
+import androidx.compose.material3.MaterialTheme
-import androidx.compose.material.darkColors
+import androidx.compose.material3.darkColorScheme
-import androidx.compose.material.lightColors
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ProvidedValue
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontFamily
-
-expect val manropeFontFamily: FontFamily
 
 val titleColor = Color(0xFF7395D9)
 
-val lightColors =
+private val LightThemeColors =
-  lightColors(
+  lightColorScheme(
-    primary = Color.White,
+    primary = md_theme_light_primary,
-    secondary = Color(0xFF6C0000),
+    onPrimary = md_theme_light_onPrimary,
-    background = Color.White,
+    primaryContainer = md_theme_light_primaryContainer,
-    surface = Color.White,
+    onPrimaryContainer = md_theme_light_onPrimaryContainer,
-    onPrimary = Color.DarkGray,
+    secondary = md_theme_light_secondary,
-    onSecondary = Color.White,
+    onSecondary = md_theme_light_onSecondary,
-    onBackground = Color.White,
+    secondaryContainer = md_theme_light_secondaryContainer,
-    onSurface = Color.White,
+    onSecondaryContainer = md_theme_light_onSecondaryContainer,
+    tertiary = md_theme_light_tertiary,
+    onTertiary = md_theme_light_onTertiary,
+    tertiaryContainer = md_theme_light_tertiaryContainer,
+    onTertiaryContainer = md_theme_light_onTertiaryContainer,
+    error = md_theme_light_error,
+    errorContainer = md_theme_light_errorContainer,
+    onError = md_theme_light_onError,
+    onErrorContainer = md_theme_light_onErrorContainer,
+    background = md_theme_light_background,
+    onBackground = md_theme_light_onBackground,
+    surface = md_theme_light_surface,
+    onSurface = md_theme_light_onSurface,
+    surfaceVariant = md_theme_light_surfaceVariant,
+    onSurfaceVariant = md_theme_light_onSurfaceVariant,
+    outline = md_theme_light_outline,
+    inverseOnSurface = md_theme_light_inverseOnSurface,
+    inverseSurface = md_theme_light_inverseSurface,
   )
 
-val darkColors =
+private val DarkThemeColors =
-  darkColors(
+  darkColorScheme(
-    primary = Color.White,
+    primary = md_theme_dark_primary,
-    secondary = Color(0xFFD2362D),
+    onPrimary = md_theme_dark_onPrimary,
-    background = Color.Black,
+    primaryContainer = md_theme_dark_primaryContainer,
-    surface = Color.Black,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
-    onPrimary = Color.Black,
+    secondary = md_theme_dark_secondary,
-    onSecondary = Color.White,
+    onSecondary = md_theme_dark_onSecondary,
-    onBackground = Color.White,
+    secondaryContainer = md_theme_dark_secondaryContainer,
-    onSurface = Color.White,
+    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+    tertiary = md_theme_dark_tertiary,
+    onTertiary = md_theme_dark_onTertiary,
+    tertiaryContainer = md_theme_dark_tertiaryContainer,
+    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+    error = md_theme_dark_error,
+    errorContainer = md_theme_dark_errorContainer,
+    onError = md_theme_dark_onError,
+    onErrorContainer = md_theme_dark_onErrorContainer,
+    background = md_theme_dark_background,
+    onBackground = md_theme_dark_onBackground,
+    surface = md_theme_dark_surface,
+    onSurface = md_theme_dark_onSurface,
+    surfaceVariant = md_theme_dark_surfaceVariant,
+    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+    outline = md_theme_dark_outline,
+    inverseOnSurface = md_theme_dark_inverseOnSurface,
+    inverseSurface = md_theme_dark_inverseSurface,
   )
 
 @Composable
 fun LobstersTheme(
-  darkTheme: Boolean,
+  darkTheme: Boolean = isSystemInDarkTheme(),
   providedValues: Array<ProvidedValue<*>> = emptyArray(),
-  children: @Composable () -> Unit
+  content: @Composable () -> Unit,
 ) {
+  val colors =
+    if (!darkTheme) {
+      LightThemeColors
+    } else {
+      DarkThemeColors
+    }
   CompositionLocalProvider(*providedValues) {
-    MaterialTheme(
+    MaterialTheme(colorScheme = colors, typography = AppTypography, content = content)
-      colors = if (darkTheme) darkColors else lightColors,
-      typography =
-        Typography(
-          defaultFontFamily = manropeFontFamily,
-        ),
-      content = children,
-    )
   }
 }

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/theme/Type.kt

@@ -0,0 +1,133 @@
+package dev.msfjarvis.claw.common.theme
+
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+expect val Manrope: FontFamily
+
+val AppTypography =
+  Typography(
+    displayLarge =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 57.sp,
+        lineHeight = 64.sp,
+        letterSpacing = (-0.25).sp,
+      ),
+    displayMedium =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 45.sp,
+        lineHeight = 52.sp,
+        letterSpacing = 0.sp,
+      ),
+    displaySmall =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 36.sp,
+        lineHeight = 44.sp,
+        letterSpacing = 0.sp,
+      ),
+    headlineLarge =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 32.sp,
+        lineHeight = 40.sp,
+        letterSpacing = 0.sp,
+      ),
+    headlineMedium =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 28.sp,
+        lineHeight = 36.sp,
+        letterSpacing = 0.sp,
+      ),
+    headlineSmall =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 24.sp,
+        lineHeight = 32.sp,
+        letterSpacing = 0.sp,
+      ),
+    titleLarge =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp,
+      ),
+    titleMedium =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.Medium,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.1.sp,
+      ),
+    titleSmall =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.Medium,
+        fontSize = 14.sp,
+        lineHeight = 20.sp,
+        letterSpacing = 0.1.sp,
+      ),
+    labelLarge =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.Medium,
+        fontSize = 14.sp,
+        lineHeight = 20.sp,
+        letterSpacing = 0.1.sp,
+      ),
+    bodyLarge =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp,
+      ),
+    bodyMedium =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 14.sp,
+        lineHeight = 20.sp,
+        letterSpacing = 0.25.sp,
+      ),
+    bodySmall =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.W400,
+        fontSize = 12.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.4.sp,
+      ),
+    labelMedium =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.Medium,
+        fontSize = 12.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp,
+      ),
+    labelSmall =
+      TextStyle(
+        fontFamily = Manrope,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp,
+      ),
+  )

common/src/desktopMain/kotlin/dev/msfjarvis/claw/common/theme/Theme.kt

@@ -6,7 +6,7 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.platform.Font
 
-actual val manropeFontFamily =
+actual val Manrope =
   FontFamily(
     Font("font/manrope_bold.ttf", FontWeight.Bold),
     Font("font/manrope_extrabold.ttf", FontWeight.ExtraBold),