From fc3494e6cf96089fca20258dbfd25c624618ac8e Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:36:29 +0100 Subject: [PATCH] ADD provide Ripple, Indication, default text style and content color --- .../kotlin/nl/q42/template/MainActivity.kt | 6 ++-- .../compose/composables/widgets/AppSurface.kt | 26 ++++++++++++++++ .../q42/template/ui/theme/AppColorTokens.kt | 1 + .../template/ui/theme/AppColorTokensDark.kt | 3 +- .../template/ui/theme/AppColorTokensLight.kt | 3 +- .../nl/q42/template/ui/theme/AppRipples.kt | 31 +++++++++++++++++++ .../kotlin/nl/q42/template/ui/theme/Colors.kt | 3 +- .../kotlin/nl/q42/template/ui/theme/Theme.kt | 16 +++++++++- 8 files changed, 83 insertions(+), 6 deletions(-) create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt diff --git a/app/src/main/kotlin/nl/q42/template/MainActivity.kt b/app/src/main/kotlin/nl/q42/template/MainActivity.kt index 5856ba3..f942d52 100644 --- a/app/src/main/kotlin/nl/q42/template/MainActivity.kt +++ b/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) } } diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt new file mode 100644 index 0000000..f527ccf --- /dev/null +++ b/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()) {} + } +} diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt index 246a9dd..e21b2eb 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt +++ b/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 } \ No newline at end of file diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt index c5cb782..1773efc 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt +++ b/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 } \ No newline at end of file diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt index 24a3862..41b4833 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt +++ b/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 } \ No newline at end of file diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt new file mode 100644 index 0000000..5e7558c --- /dev/null +++ b/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 + ) diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt index d36935c..80796f3 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt +++ b/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) \ No newline at end of file +val White = Color(0xFFFFFFFF) +val Gray10 = Color(0xFF1b1b1b) \ No newline at end of file diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt index a21a7ff..33610b0 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt +++ b/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() + } } } } \ No newline at end of file