Cleanup UI with Material3 color schemes

build.gradle.kts

@@ -158,7 +158,7 @@ dependencies {
     // Core
     implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21")
     implementation("androidx.core:core-ktx:1.9.0-alpha04")
-    implementation("androidx.appcompat:appcompat:1.4.1")
+    implementation("androidx.appcompat:appcompat:1.4.2")
     implementation("androidx.fragment:fragment-ktx:1.5.0-rc01")
     implementation("androidx.activity:activity-ktx:1.6.0-alpha04")
     implementation("androidx.activity:activity-compose:1.6.0-alpha03")
@@ -209,10 +209,9 @@ dependencies {
     implementation("androidx.compose.foundation:foundation:$composeVersion")
     implementation("androidx.compose.runtime:runtime-livedata:$composeVersion")
     implementation("androidx.compose.material3:material3:1.0.0-alpha13")
-    implementation("androidx.compose.material:material:$composeVersion")
     implementation("androidx.compose.animation:animation:$composeVersion")
     implementation("androidx.compose.material:material-icons-extended:$composeVersion")
-    implementation("com.google.android.material:compose-theme-adapter-3:1.0.10")
+    implementation("com.google.android.material:compose-theme-adapter-3:1.0.11")
 
     debugImplementation ("androidx.compose.ui:ui-tooling:$composeVersion")
     debugImplementation ("androidx.compose.ui:ui-tooling-preview:$composeVersion")

src/main/kotlin/com/looker/droidify/ui/compose/components/ExpandableBlock.kt

@@ -1,8 +1,8 @@
 package com.looker.droidify.ui.compose.components
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
@@ -23,17 +23,16 @@ fun ExpandableBlock(
     content: @Composable ColumnScope.() -> Unit
 ) {
     var expanded by rememberSaveable { mutableStateOf(preExpanded) }
-    val backgroundColor by animateColorAsState(
-        targetValue = if (expanded) MaterialTheme.colorScheme.surface
-        else MaterialTheme.colorScheme.background
+    val tonalElevation by animateDpAsState(
+        targetValue = if (expanded) 8.dp
+        else 0.dp
     )
 
     Surface(
         modifier = Modifier.animateContentSize(),
         shape = MaterialTheme.shapes.large,
         onClick = { expanded = !expanded },
-        color = backgroundColor,
-        tonalElevation = 8.dp
+        tonalElevation = tonalElevation
     ) {
         Column(modifier = modifier) {
             ExpandableBlockHeader(heading, positive)

src/main/kotlin/com/looker/droidify/ui/compose/components/ProductCard.kt

@@ -1,14 +1,9 @@
 package com.looker.droidify.ui.compose.components
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.requiredSize
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -16,7 +11,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.looker.droidify.database.entity.Repository
@@ -24,6 +18,7 @@ import com.looker.droidify.entity.ProductItem
 import com.looker.droidify.network.CoilDownloader
 import com.looker.droidify.ui.compose.utils.NetworkImage
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ProductCard(
     item: ProductItem,
@@ -43,39 +38,42 @@ fun ProductCard(
             ).toString()
         )
     }
-
-    Column(
+    Surface(
         modifier = Modifier
             .padding(4.dp)
-            .requiredSize(80.dp, 116.dp)
-            .clip(shape = RoundedCornerShape(8.dp))
-            .background(color = MaterialTheme.colorScheme.surface)
-            .clickable(onClick = { onUserClick(product) }),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
+            .requiredSize(80.dp, 116.dp),
+        tonalElevation = 8.dp,
+        shape = MaterialTheme.shapes.medium,
+        onClick = { onUserClick(product) }
     ) {
-        NetworkImage(
-            modifier = Modifier.size(64.dp),
-            data = imageData
-        )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            NetworkImage(
+                modifier = Modifier.size(64.dp),
+                data = imageData
+            )
 
-        Text(
-            modifier = Modifier.padding(4.dp, 2.dp),
-            text = product.name,
-            style = MaterialTheme.typography.bodySmall,
-            overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
-            color = MaterialTheme.colorScheme.onSurface
-        )
-        Text(
-            modifier = Modifier.padding(4.dp, 1.dp),
-            text = product.version,
-            style = MaterialTheme.typography.labelSmall,
-            overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
-            color = MaterialTheme.colorScheme.onSurfaceVariant
-        )
+            Text(
+                modifier = Modifier.padding(4.dp, 2.dp),
+                text = product.name,
+                style = MaterialTheme.typography.bodySmall,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+            Text(
+                modifier = Modifier.padding(4.dp, 1.dp),
+                text = product.version,
+                style = MaterialTheme.typography.labelSmall,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+                color = MaterialTheme.colorScheme.onSurfaceVariant
+            )
+        }
     }
+
 }
 
 //@Preview

src/main/kotlin/com/looker/droidify/ui/compose/components/ProductsListItem.kt

@@ -1,25 +1,12 @@
 package com.looker.droidify.ui.compose.components
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.FavoriteBorder
+import androidx.compose.material3.*
 import androidx.compose.material3.ButtonDefaults.buttonColors
-import androidx.compose.material3.FilledTonalButton
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf

src/main/kotlin/com/looker/droidify/ui/compose/components/TopBar.kt

@@ -1,29 +1,14 @@
 package com.looker.droidify.ui.compose.components
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Close
 import androidx.compose.material.icons.rounded.Search
-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.SideEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
@@ -38,22 +23,22 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.dp
 import com.looker.droidify.R
+import com.looker.droidify.ui.compose.theme.surfaceColorAtElevation
 import com.looker.droidify.ui.compose.utils.HorizontalExpandingVisibility
 
-
 @Composable
 fun TopBar(
     title: String,
     actions: @Composable (RowScope.() -> Unit)
 ) {
-    TopAppBar(
+    SmallTopAppBar(
         modifier = Modifier.wrapContentHeight(),
         title = {
             Text(text = title, style = MaterialTheme.typography.headlineSmall)
         },
-        backgroundColor = MaterialTheme.colorScheme.surface,
-        contentColor = MaterialTheme.colorScheme.onSurface,
-        elevation = 0.dp,
+        colors = TopAppBarDefaults.smallTopAppBarColors(
+            containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp)
+        ),
         actions = actions
     )
 }
@@ -66,12 +51,10 @@ fun ExpandableSearchAction(
     onClose: () -> Unit,
     onQueryChanged: (String) -> Unit
 ) {
-    val (expanded, onExpanded) = remember {
-        mutableStateOf(expanded)
-    }
+    val (isExpanded, onExpanded) = remember { mutableStateOf(expanded) }
 
     HorizontalExpandingVisibility(
-        expanded = expanded,
+        expanded = isExpanded,
         expandedView = {
             ExpandedSearchView(
                 query = query,
@@ -83,7 +66,6 @@ fun ExpandableSearchAction(
         },
         collapsedView = {
             CollapsedSearchView(
-                modifier = modifier,
                 onExpanded = onExpanded
             )
         }
@@ -92,7 +74,6 @@ fun ExpandableSearchAction(
 
 @Composable
 fun CollapsedSearchView(
-    modifier: Modifier = Modifier,
     onExpanded: (Boolean) -> Unit
 ) {
     TopBarAction(

src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Header.kt

@@ -54,7 +54,8 @@ fun AppInfoHeader(
 
     Surface(
         modifier = modifier.fillMaxWidth(),
-        shape = MaterialTheme.shapes.large
+        shape = MaterialTheme.shapes.large,
+        tonalElevation = 8.dp
     ) {
         Column(
             modifier = Modifier.padding(8.dp),
@@ -85,7 +86,7 @@ fun AppInfoHeader(
                 }
                 MainActionButton(
                     modifier = Modifier.weight(1f),
-                    actionState = mainAction ?: ActionState.NoAction,
+                    actionState = mainAction ?: ActionState.Install,
                     onClick = {
                         onAction(mainAction)
                     }
@@ -117,7 +118,8 @@ fun TopBarHeader(
         modifier = modifier
             .padding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 0.dp)
             .fillMaxWidth(),
-        shape = MaterialTheme.shapes.large
+        shape = MaterialTheme.shapes.large,
+        tonalElevation = 8.dp
     ) {
         Column {
             Row(

src/main/kotlin/com/looker/droidify/ui/compose/pages/home/components/CategoryChipList.kt

@@ -103,7 +103,8 @@ fun CategoryChip(
                 shape = RoundedCornerShape(categoryChipTransitionState.cornerRadius)
                 clip = true
             },
-        color = categoryChipTransitionState.contentColor
+        color = categoryChipTransitionState.contentColor,
+        tonalElevation = 8.dp
     ) {
         Row(
             modifier = Modifier

src/main/kotlin/com/looker/droidify/ui/compose/theme/Color.kt

@@ -6,55 +6,62 @@ val PitchBlack = Color(0xFF000000)
 val GreyDark = Color(0xFF2C2C2C)
 
 // Light Theme
-val LightPrimary = Color(0xFF006D3E)
-val LightOnPrimary = Color(0xFFFFFFFF)
-val LightPrimaryContainer = Color(0xFF71FCAD)
-val LightOnPrimaryContainer = Color(0xFF00210F)
-val LightSecondary = Color(0xFF924C00)
-val LightOnSecondary = Color(0xFFFFFFFF)
-val LightSecondaryContainer = Color(0xFFFFDCC1)
-val LightOnSecondaryContainer = Color(0xFF2F1400)
-val LightError = Color(0xFFBA1B1B)
-val LightErrorContainer = Color(0xFFFFDAD4)
-val LightOnError = Color(0xFFFFFFFF)
-val LightOnErrorContainer = Color(0xFF410001)
-val LightBackground = Color(0xFFFBFDF8)
-val LightOnBackground = Color(0xFF191C1A)
-val LightSurface = Color(0xFFE8F5E9)
-val LightOnSurface = Color(0xFF191C1A)
-val LightSurfaceVariant = Color(0xFFDDE5DC)
-val LightOnSurfaceVariant = Color(0xFF414942)
-val LightOutline = Color(0xFF707971)
-val LightInversePrimary = Color(0xFF51DF93)
-val LightInverseSurface = Color(0xFF2E312E)
-val LightInverseOnSurface = Color(0xFFEFF1EC)
+val md_theme_light_primary = Color(0xFF006D3E)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFF96F7B8)
+val md_theme_light_onPrimaryContainer = Color(0xFF00210F)
+val md_theme_light_secondary = Color(0xFF4F6354)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFD1E8D5)
+val md_theme_light_onSecondaryContainer = Color(0xFF0C1F13)
+val md_theme_light_tertiary = Color(0xFF3B6470)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFBEEAF7)
+val md_theme_light_onTertiaryContainer = Color(0xFF001F26)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFFBFDF8)
+val md_theme_light_onBackground = Color(0xFF191C1A)
+val md_theme_light_surface = Color(0xFFFBFDF8)
+val md_theme_light_onSurface = Color(0xFF191C1A)
+val md_theme_light_surfaceVariant = Color(0xFFDCE5DB)
+val md_theme_light_onSurfaceVariant = Color(0xFF414942)
+val md_theme_light_outline = Color(0xFF717971)
+val md_theme_light_inverseOnSurface = Color(0xFFF0F1EC)
+val md_theme_light_inverseSurface = Color(0xFF2E312E)
+val md_theme_light_inversePrimary = Color(0xFF7ADA9D)
+val md_theme_light_shadow = Color(0xFF000000)
 
 // Dark Theme
-val DarkPrimary = Color(0xFF51DF93)
-val DarkOnPrimary = Color(0xFF00391D)
-val DarkPrimaryContainer = Color(0xFF00522D)
-val DarkOnPrimaryContainer = Color(0xFF71FCAD)
-val DarkSecondary = Color(0xFFFFB77B)
-val DarkOnSecondary = Color(0xFF4E2600)
-val DarkSecondaryContainer = Color(0xFF6F3800)
-val DarkOnSecondaryContainer = Color(0xFFFFDCC1)
-val DarkError = Color(0xFFFFB4A9)
-val DarkErrorContainer = Color(0xFF930006)
-val DarkOnError = Color(0xFF680003)
-val DarkOnErrorContainer = Color(0xFFFFDAD4)
-val DarkBackground = Color(0xFF191C1A)
-val DarkOnBackground = Color(0xFFE1E3DE)
-val DarkSurface = Color(0xFF2C2C2C)
-val DarkOnSurface = Color(0xFFE1E3DE)
-val DarkSurfaceVariant = Color(0xFF414942)
-val DarkOnSurfaceVariant = Color(0xFFC0C9C0)
-val DarkOutline = Color(0xFF8A938A)
-val DarkInversePrimary = Color(0xFFE1E3DE)
-val DarkInverseSurface = Color(0xFF191C1A)
-val DarkInverseOnSurface = Color(0xFF006D3E)
+val md_theme_dark_primary = Color(0xFF7ADA9D)
+val md_theme_dark_onPrimary = Color(0xFF00391E)
+val md_theme_dark_primaryContainer = Color(0xFF00522D)
+val md_theme_dark_onPrimaryContainer = Color(0xFF96F7B8)
+val md_theme_dark_secondary = Color(0xFFB6CCB9)
+val md_theme_dark_onSecondary = Color(0xFF213527)
+val md_theme_dark_secondaryContainer = Color(0xFF384B3D)
+val md_theme_dark_onSecondaryContainer = Color(0xFFD1E8D5)
+val md_theme_dark_tertiary = Color(0xFFA3CDDB)
+val md_theme_dark_onTertiary = Color(0xFF023640)
+val md_theme_dark_tertiaryContainer = Color(0xFF214C57)
+val md_theme_dark_onTertiaryContainer = Color(0xFFBEEAF7)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
+val md_theme_dark_background = Color(0xFF191C1A)
+val md_theme_dark_onBackground = Color(0xFFE1E3DE)
+val md_theme_dark_surface = Color(0xFF191C1A)
+val md_theme_dark_onSurface = Color(0xFFE1E3DE)
+val md_theme_dark_surfaceVariant = Color(0xFF414942)
+val md_theme_dark_onSurfaceVariant = Color(0xFFC0C9C0)
+val md_theme_dark_outline = Color(0xFF8A938B)
+val md_theme_dark_inverseOnSurface = Color(0xFF191C1A)
+val md_theme_dark_inverseSurface = Color(0xFFE1E3DE)
+val md_theme_dark_inversePrimary = Color(0xFF006D3E)
+val md_theme_dark_shadow = Color(0xFF000000)
 
-// Black Theme
-val BlackBackground = Color(0xFF000000)
-val BlackSurface = Color(0xFF191C1A)
 
-val Seed = Color(0xFF51DF93)
+val seed = Color(0xFF006D3E)

src/main/kotlin/com/looker/droidify/ui/compose/theme/Shape.kt

@@ -0,0 +1,13 @@
+package com.looker.droidify.ui.compose.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Shapes
+import androidx.compose.ui.unit.dp
+
+val shapes: Shapes = Shapes(
+    extraSmall = RoundedCornerShape(8.dp),
+    small = RoundedCornerShape(12.dp),
+    medium = RoundedCornerShape(16.dp),
+    large = RoundedCornerShape(18.dp),
+    extraLarge = RoundedCornerShape(24.dp)
+)

src/main/kotlin/com/looker/droidify/ui/compose/theme/Theme.kt

@@ -19,81 +19,95 @@ fun AppTheme(
             darkTheme -> DarkColors
             else -> LightColors
         },
+        shapes = shapes,
         content = content
     )
 }
 
 private val LightColors = lightColorScheme(
-    primary = LightPrimary,
-    onPrimary = LightOnPrimary,
-    primaryContainer = LightPrimaryContainer,
-    onPrimaryContainer = LightOnPrimaryContainer,
-    secondary = LightSecondary,
-    onSecondary = LightOnSecondary,
-    secondaryContainer = LightSecondaryContainer,
-    onSecondaryContainer = LightOnSecondaryContainer,
-    surface = LightSurface,
-    onSurface = LightOnSurface,
-    surfaceVariant = LightSurfaceVariant,
-    onSurfaceVariant = LightOnSurfaceVariant,
-    outline = LightOutline,
-    background = LightBackground,
-    onBackground = LightOnBackground,
-    inversePrimary = LightInversePrimary,
-    inverseSurface = LightInverseSurface,
-    inverseOnSurface = LightInverseOnSurface,
-    error = LightError,
-    onError = LightOnError,
-    errorContainer = LightErrorContainer,
-    onErrorContainer = LightOnErrorContainer
+    primary = md_theme_light_primary,
+    onPrimary = md_theme_light_onPrimary,
+    primaryContainer = md_theme_light_primaryContainer,
+    onPrimaryContainer = md_theme_light_onPrimaryContainer,
+    secondary = md_theme_light_secondary,
+    onSecondary = md_theme_light_onSecondary,
+    secondaryContainer = md_theme_light_secondaryContainer,
+    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,
+    inversePrimary = md_theme_light_inversePrimary,
 )
 
+
 private val DarkColors = darkColorScheme(
-    primary = DarkPrimary,
-    onPrimary = DarkOnPrimary,
-    primaryContainer = DarkPrimaryContainer,
-    onPrimaryContainer = DarkOnPrimaryContainer,
-    secondary = DarkSecondary,
-    onSecondary = DarkOnSecondary,
-    secondaryContainer = DarkSecondaryContainer,
-    onSecondaryContainer = DarkOnSecondaryContainer,
-    surface = DarkSurface,
-    onSurface = DarkOnSurface,
-    surfaceVariant = DarkSurfaceVariant,
-    onSurfaceVariant = DarkOnSurfaceVariant,
-    outline = DarkOutline,
-    background = DarkBackground,
-    onBackground = DarkOnBackground,
-    inversePrimary = DarkInversePrimary,
-    inverseSurface = DarkInverseSurface,
-    inverseOnSurface = DarkInverseOnSurface,
-    error = DarkError,
-    onError = DarkOnError,
-    errorContainer = DarkErrorContainer,
-    onErrorContainer = DarkOnErrorContainer
+    primary = md_theme_dark_primary,
+    onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+    secondary = md_theme_dark_secondary,
+    onSecondary = md_theme_dark_onSecondary,
+    secondaryContainer = md_theme_dark_secondaryContainer,
+    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,
+    inversePrimary = md_theme_dark_inversePrimary,
 )
 
 private val BlackColors = darkColorScheme(
-    primary = DarkPrimary,
-    onPrimary = DarkOnPrimary,
-    primaryContainer = DarkPrimaryContainer,
-    onPrimaryContainer = DarkOnPrimaryContainer,
-    secondary = DarkSecondary,
-    onSecondary = DarkOnSecondary,
-    secondaryContainer = DarkSecondaryContainer,
-    onSecondaryContainer = DarkOnSecondaryContainer,
-    surface = BlackSurface,
-    onSurface = DarkOnSurface,
-    surfaceVariant = DarkSurfaceVariant,
-    onSurfaceVariant = DarkOnSurfaceVariant,
-    outline = DarkOutline,
-    background = BlackBackground,
-    onBackground = DarkOnBackground,
-    inversePrimary = DarkInversePrimary,
-    inverseSurface = DarkInverseSurface,
-    inverseOnSurface = DarkInverseOnSurface,
-    error = DarkError,
-    onError = DarkOnError,
-    errorContainer = DarkErrorContainer,
-    onErrorContainer = DarkOnErrorContainer
+    primary = md_theme_dark_primary,
+    onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+    secondary = md_theme_dark_secondary,
+    onSecondary = md_theme_dark_onSecondary,
+    secondaryContainer = md_theme_dark_secondaryContainer,
+    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 = PitchBlack,
+    onBackground = md_theme_dark_onBackground,
+    surface = PitchBlack,
+    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,
+    inversePrimary = md_theme_dark_inversePrimary,
 )

src/main/kotlin/com/looker/droidify/ui/compose/theme/Utils.kt

@@ -0,0 +1,16 @@
+package com.looker.droidify.ui.compose.theme
+
+import androidx.compose.material3.ColorScheme
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.math.ln
+
+fun ColorScheme.surfaceColorAtElevation(
+    elevation: Dp,
+): Color {
+    if (elevation == 0.dp) return surface
+    val alpha = ((4.5f * ln(elevation.value + 1)) + 2f) / 100f
+    return surfaceTint.copy(alpha = alpha).compositeOver(surface)
+}

src/main/kotlin/com/looker/droidify/ui/compose/utils/Chip.kt

@@ -1,12 +1,8 @@
 package com.looker.droidify.ui.compose.utils
 
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.material.Chip
-import androidx.compose.material.ChipDefaults.chipColors
 import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Shapes
-import androidx.compose.material3.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -18,7 +14,7 @@ import androidx.compose.ui.unit.dp
 /**
  * Basically a OutlineChip without spamming "ExperimentalMaterialApi"
  */
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun CustomChip(
     modifier: Modifier = Modifier,
@@ -28,21 +24,10 @@ fun CustomChip(
     borderWidth: Dp = 1.dp,
     onClick: (String) -> Unit = {}
 ) {
-    Chip(
+    ElevatedAssistChip(
         modifier = modifier,
         shape = Shapes.Full,
-        border = BorderStroke(
-            width = borderWidth,
-            color = borderColor.compositeOverBackground(
-                alpha = 0.5f,
-                MaterialTheme.colorScheme.surface
-            )
-        ),
-        colors = chipColors(
-            backgroundColor = containerColor.compositeOverBackground(alpha = 0.1f)
-        ),
-        onClick = { onClick(text) }
-    ) {
-        Text(text = text, color = borderColor)
-    }
+        onClick = { onClick(text) },
+        label = { Text(text = text, color = borderColor) }
+    )
 }

src/main/kotlin/com/looker/droidify/ui/fragments/InstalledFragment.kt

@@ -9,33 +9,13 @@ import android.view.ViewGroup
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.Chip
-import androidx.compose.material.ChipDefaults
-import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Settings
 import androidx.compose.material.icons.rounded.Sync
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ElevatedButton
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
@@ -86,7 +66,7 @@ class InstalledFragment : MainNavFragmentX() {
         }
     }
 
-    @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
+    @OptIn(ExperimentalMaterial3Api::class)
     @Composable
     private fun InstalledPage() {
         val primaryList by viewModel.primaryProducts.observeAsState(null)
@@ -158,11 +138,11 @@ class InstalledFragment : MainNavFragmentX() {
                                     )
                                 }
                                 Spacer(modifier = Modifier.weight(1f))
-                                Chip(
+                                SuggestionChip(
                                     shape = MaterialTheme.shapes.medium,
-                                    colors = ChipDefaults.chipColors(
-                                        backgroundColor = MaterialTheme.colorScheme.surface,
-                                        contentColor = MaterialTheme.colorScheme.onSurface,
+                                    colors = SuggestionChipDefaults.suggestionChipColors(
+                                        containerColor = MaterialTheme.colorScheme.surface,
+                                        labelColor = MaterialTheme.colorScheme.onSurface,
                                     ),
                                     onClick = {
                                         secondaryList?.let {
@@ -172,16 +152,18 @@ class InstalledFragment : MainNavFragmentX() {
                                                 )
                                             )
                                         }
+                                    },
+                                    icon = {
+                                        Icon(
+                                            modifier = Modifier.size(18.dp),
+                                            painter = painterResource(id = R.drawable.ic_download),
+                                            contentDescription = stringResource(id = R.string.update_all)
+                                        )
+                                    },
+                                    label = {
+                                        Text(text = stringResource(id = R.string.update_all))
                                     }
-                                ) {
-                                    Icon(
-                                        modifier = Modifier.size(18.dp),
-                                        painter = painterResource(id = R.drawable.ic_download),
-                                        contentDescription = stringResource(id = R.string.update_all)
-                                    )
-                                    Spacer(modifier = Modifier.width(8.dp))
-                                    Text(text = stringResource(id = R.string.update_all))
-                                }
+                                )
                             }
                             AnimatedVisibility(visible = updatesVisible) {
                                 ProductsHorizontalRecycler(secondaryList, repositories) { item ->
@@ -198,22 +180,24 @@ class InstalledFragment : MainNavFragmentX() {
                             text = stringResource(id = R.string.installed_applications),
                             modifier = Modifier.weight(1f),
                         )
-                        Chip(
+                        SuggestionChip(
                             shape = MaterialTheme.shapes.medium,
-                            colors = ChipDefaults.chipColors(
-                                backgroundColor = MaterialTheme.colorScheme.surface,
-                                contentColor = MaterialTheme.colorScheme.onSurface,
+                            colors = SuggestionChipDefaults.suggestionChipColors(
+                                containerColor = MaterialTheme.colorScheme.surface,
+                                labelColor = MaterialTheme.colorScheme.onSurface,
                             ),
-                            onClick = { } // TODO add sort & filter
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(18.dp),
-                                painter = painterResource(id = R.drawable.ic_sort),
-                                contentDescription = stringResource(id = R.string.sort_filter)
-                            )
-                            Spacer(modifier = Modifier.width(8.dp))
-                            Text(text = stringResource(id = R.string.sort_filter))
-                        }
+                            onClick = { }, // TODO add sort & filter
+                            icon = {
+                                Icon(
+                                    modifier = Modifier.size(18.dp),
+                                    painter = painterResource(id = R.drawable.ic_sort),
+                                    contentDescription = stringResource(id = R.string.sort_filter)
+                                )
+                            },
+                            label = {
+                                Text(text = stringResource(id = R.string.sort_filter))
+                            }
+                        )
                     }
                     ProductsVerticalRecycler(primaryList?.sortedBy(Product::label),
                         repositories,

src/main/kotlin/com/looker/droidify/ui/fragments/LatestFragment.kt

@@ -8,25 +8,11 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.Chip
-import androidx.compose.material.ChipDefaults
-import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Settings
 import androidx.compose.material.icons.rounded.Sync
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -78,7 +64,7 @@ class LatestFragment : MainNavFragmentX() {
         }
     }
 
-    @OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
+    @OptIn(ExperimentalMaterial3Api::class)
     @Composable
     private fun LatestPage() {
         val primaryList by viewModel.primaryProducts.observeAsState(null)
@@ -137,22 +123,24 @@ class LatestFragment : MainNavFragmentX() {
                             text = stringResource(id = R.string.recently_updated),
                             modifier = Modifier.weight(1f),
                         )
-                        Chip(
+                        SuggestionChip(
                             shape = MaterialTheme.shapes.medium,
-                            colors = ChipDefaults.chipColors(
-                                backgroundColor = MaterialTheme.colorScheme.surface,
-                                contentColor = MaterialTheme.colorScheme.onSurface,
+                            colors = SuggestionChipDefaults.suggestionChipColors(
+                                containerColor = MaterialTheme.colorScheme.surface,
+                                labelColor = MaterialTheme.colorScheme.onSurface,
                             ),
-                            onClick = { } // TODO add sort & filter
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(18.dp),
-                                painter = painterResource(id = R.drawable.ic_sort),
-                                contentDescription = stringResource(id = R.string.sort_filter)
-                            )
-                            Spacer(modifier = Modifier.width(8.dp))
-                            Text(text = stringResource(id = R.string.sort_filter))
-                        }
+                            onClick = { }, // TODO add sort & filter
+                            icon = {
+                                Icon(
+                                    modifier = Modifier.size(18.dp),
+                                    painter = painterResource(id = R.drawable.ic_sort),
+                                    contentDescription = stringResource(id = R.string.sort_filter)
+                                )
+                            },
+                            label = {
+                                Text(text = stringResource(id = R.string.sort_filter))
+                            }
+                        )
                     }
                     ProductsVerticalRecycler(primaryList, repositories,
                         modifier = Modifier