ADD provide Ripple, Indication, default text style and content color

app/src/main/kotlin/nl/q42/template/MainActivity.kt

@@ -5,12 +5,12 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
 import androidx.navigation.compose.rememberNavController
 import dagger.hilt.android.AndroidEntryPoint
 import nl.q42.template.navigation.AppNavigation
 import nl.q42.template.navigation.NavGraphs
+import nl.q42.template.ui.compose.composables.widgets.AppSurface
 import nl.q42.template.ui.theme.AppTheme
 
 @AndroidEntryPoint
@@ -25,7 +25,9 @@ class MainActivity : ComponentActivity() {
 
                 val navController = rememberNavController()
 
-                Surface(modifier = Modifier.fillMaxSize(), color = AppTheme.colors.surface) {
+                AppSurface (
+                    modifier = Modifier.fillMaxSize(),
+                ) {
                     AppNavigation(navController = navController, navGraph = NavGraphs.root)
                 }
             }

core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt

@@ -0,0 +1,26 @@
+package nl.q42.template.ui.compose.composables.widgets
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import nl.q42.template.ui.theme.AppTheme
+import nl.q42.template.ui.theme.PreviewLightDark
+
+@Composable
+fun AppSurface(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
+    Surface(
+        modifier = modifier,
+        color = AppTheme.colors.surface,
+        contentColor = AppTheme.colors.textPrimary,
+        content = content
+    )
+}
+
+@Composable
+@PreviewLightDark
+private fun AppSurfacePreview() {
+    AppTheme {
+        AppSurface(Modifier.fillMaxSize()) {}
+    }
+}

core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt

@@ -7,5 +7,6 @@ interface AppColorTokens {
     val accent: Color
     val textPrimary: Color
     val surface: Color
+    val surfaceSelected: Color
     val error: Color
 }

core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt

@@ -6,6 +6,7 @@ object AppColorTokensDark: AppColorTokens {
     override val buttonText: Color = White
     override val accent: Color =  PurpleGrey80
     override val textPrimary = White
-    override val surface = White
+    override val surface = Black
+    override val surfaceSelected = White
     override val error = Pink80
 }

core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt

@@ -6,6 +6,7 @@ object AppColorTokensLight : AppColorTokens {
     override val buttonText: Color = White
     override val accent: Color = Purple40
     override val textPrimary = Black
-    override val surface: Color = White
+    override val surface = White
+    override val surfaceSelected = Color(0xff1b1b1b)
     override val error: Color = Red80
 }

core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt

@@ -0,0 +1,31 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.foundation.Indication
+import androidx.compose.material.ripple.RippleAlpha
+import androidx.compose.material3.RippleConfiguration
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.graphics.Color
+
+val AppRippleConfiguration: RippleConfiguration
+    @Composable
+    @ReadOnlyComposable
+    get() = RippleConfiguration(
+        color = AppTheme.colors.surfaceSelected
+    )
+
+val NoRippleConfiguration: RippleConfiguration
+    @Composable
+    @ReadOnlyComposable
+    get() = RippleConfiguration(
+        color = Color.Transparent,
+        rippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
+    )
+
+val AppRipple: Indication
+    @Composable
+    @ReadOnlyComposable
+    get() = ripple(
+        color = AppTheme.colors.surfaceSelected
+    )

core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt

@@ -12,4 +12,5 @@ val PurpleGrey40 = Color(0xFF625b71)
 val Pink40 = Color(0xFF7D5260)
 
 val Black = Color(0xFF000000)
-val White = Color(0xFFFFFFFF)
+val White = Color(0xFFFFFFFF)
+val Gray10 = Color(0xFF1b1b1b)

core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt

@@ -2,8 +2,12 @@ package nl.q42.template.ui.theme
 
 import android.annotation.SuppressLint
 import android.app.Activity
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.LocalRippleConfiguration
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -15,6 +19,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
+import nl.q42.template.ui.compose.composables.widgets.AppSurface
 
 /**
  * Generate this using: https://m2.material.io/material-theme-builder/. For more info and resources: see the
@@ -50,6 +55,13 @@ fun AppTheme(
         LocalAppTypography provides typography,
         LocalAppColorTokens provides if (darkTheme) AppColorTokensDark else AppColorTokensLight,
         LocalAppShapes provides shapes,
+        /** configures the ripple for material components */
+        LocalRippleConfiguration provides AppRippleConfiguration,
+        /** needed for non-material components to have a material ripple. eg [Modifier.clickable] */
+        LocalIndication provides AppRipple,
+        /** merges the platform style with our type, @see [ProvideTextStyle] for more context */
+        LocalTextStyle provides LocalTextStyle.current.merge(typography.body),
+        LocalContentColor provides colors.textPrimary,
         content = content
     )
 }
@@ -81,7 +93,9 @@ data class AppShapes(
 fun PreviewAppTheme(content: @Composable () -> Unit) {
     AppTheme {
         Scaffold {
-            content()
+            AppSurface {
+                content()
+            }
         }
     }
 }