From ea6bb3d97964c41d8ff359f4f60c2ef29676adc3 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Tue, 10 Sep 2024 11:46:18 +0200 Subject: [PATCH 01/15] REMOVE theming from wishlist because that is what we are implementing here --- README.MD | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.MD b/README.MD index 309046b..1325300 100644 --- a/README.MD +++ b/README.MD @@ -45,8 +45,6 @@ note on changes: - Switch build files to KTS, also build some custom plugins. - Use lifecycle events from Google (we use our own now) - Use preview light dark from google (we use our own now) -- Optionally: Setup proper Typography in AppTheme, using custom (non-material) Typography keys, - because that is what we have in 90%+ of our projects. - Optionally: Add compose events from VM to View (https://github.com/leonard-palm/compose-state-events) and showcase with snackbar or toast. - Optionally: Switch from retrofit to ktor (because Ktor is multiplatform) From 6c6ca7c3e319361134c6c48728fa8d5d09b22cf0 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Tue, 10 Sep 2024 13:57:35 +0200 Subject: [PATCH 02/15] ADD custom theming Inspired by Hema implementation --- .../composables/widgets/TemplateButton.kt | 33 +++++++ .../q42/template/ui/theme/AppColorTokens.kt | 11 +++ .../template/ui/theme/AppColorTokensDark.kt | 11 +++ .../template/ui/theme/AppColorTokensLight.kt | 11 +++ .../template/ui/theme/{Color.kt => Colors.kt} | 1 + .../kotlin/nl/q42/template/ui/theme/Dimens.kt | 10 +++ .../kotlin/nl/q42/template/ui/theme/Theme.kt | 87 +++++++++---------- .../kotlin/nl/q42/template/ui/theme/Type.kt | 29 +++++++ .../q42/template/home/main/ui/HomeContent.kt | 26 +++--- .../home/second/ui/HomeSecondScreen.kt | 8 +- 10 files changed, 169 insertions(+), 58 deletions(-) create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt rename core/ui/src/main/kotlin/nl/q42/template/ui/theme/{Color.kt => Colors.kt} (91%) create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt new file mode 100644 index 0000000..fae0c7e --- /dev/null +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt @@ -0,0 +1,33 @@ +package nl.q42.template.ui.compose.composables.widgets + +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import nl.q42.template.ui.theme.AppTheme +import nl.q42.template.ui.theme.PreviewLightDark + +@Composable +fun TemplateButton(text: String, onClick: () -> Unit) { + Button( + onClick = onClick, + colors = ButtonDefaults.buttonColors( + containerColor = AppTheme.colors.accent, + contentColor = AppTheme.colors.buttonText + ) + ) { + Text( + text = text, + style = AppTheme.typography.body, + color = AppTheme.colors.buttonText + ) + } +} + +@Composable +@PreviewLightDark +private fun TemplateButtonPreview() { + AppTheme { + TemplateButton("Button", {}) + } +} \ No newline at end of file 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 new file mode 100644 index 0000000..246a9dd --- /dev/null +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt @@ -0,0 +1,11 @@ +package nl.q42.template.ui.theme + +import androidx.compose.ui.graphics.Color + +interface AppColorTokens { + val buttonText: Color + val accent: Color + val textPrimary: Color + val surface: 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 new file mode 100644 index 0000000..c5cb782 --- /dev/null +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt @@ -0,0 +1,11 @@ +package nl.q42.template.ui.theme + +import androidx.compose.ui.graphics.Color + +object AppColorTokensDark: AppColorTokens { + override val buttonText: Color = White + override val accent: Color = PurpleGrey80 + override val textPrimary = White + override val surface = 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 new file mode 100644 index 0000000..24a3862 --- /dev/null +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt @@ -0,0 +1,11 @@ +package nl.q42.template.ui.theme + +import androidx.compose.ui.graphics.Color + +object AppColorTokensLight : AppColorTokens { + override val buttonText: Color = White + override val accent: Color = Purple40 + override val textPrimary = Black + override val surface: Color = White + override val error: Color = Red80 +} \ No newline at end of file diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Color.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt similarity index 91% rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/Color.kt rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt index 3750eeb..d36935c 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Color.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt @@ -5,6 +5,7 @@ import androidx.compose.ui.graphics.Color val Purple80 = Color(0xFFD0BCFF) val PurpleGrey80 = Color(0xFFCCC2DC) val Pink80 = Color(0xFFEFB8C8) +val Red80 = Color(0xFFE57373) val Purple40 = Color(0xFF6650a4) val PurpleGrey40 = Color(0xFF625b71) diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt new file mode 100644 index 0000000..d4d76a1 --- /dev/null +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt @@ -0,0 +1,10 @@ +package nl.q42.template.ui.theme + +import androidx.compose.ui.unit.dp + +object Dimens { + object Containers { + val cornerRadius = 8.dp + val cornerRadiusLarge = 16.dp + } +} \ 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 7435580..caff444 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,19 +2,18 @@ package nl.q42.template.ui.theme import android.annotation.SuppressLint import android.app.Activity -import android.os.Build import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold -import androidx.compose.material3.darkColorScheme -import androidx.compose.material3.dynamicDarkColorScheme -import androidx.compose.material3.dynamicLightColorScheme -import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.SideEffect +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.toArgb -import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalView import androidx.core.view.WindowCompat @@ -23,64 +22,64 @@ import androidx.core.view.WindowCompat * README file of our project. */ -private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80, - background = Black, -) - -private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40, - background = White - - /* Other default colors to override - background = Color(0xFFFFFBFE), - surface = Color(0xFFFFFBFE), - onPrimary = Color.White, - onSecondary = Color.White, - onTertiary = Color.White, - onBackground = Color(0xFF1C1B1F), - onSurface = Color(0xFF1C1B1F), - */ -) +private val LocalAppTypography = staticCompositionLocalOf { AppTypography() } +private val LocalAppColorTokens = staticCompositionLocalOf { + // Dummy default, will be replaced for the actual theme by the Provider + AppColorTokensLight +} +private val LocalAppShapes = staticCompositionLocalOf { AppShapes() } @Composable fun AppTheme( darkTheme: Boolean = isSystemInDarkTheme(), + typography: AppTypography = AppTheme.typography, + colors: AppColorTokens = AppTheme.colors, + shapes: AppShapes = AppTheme.shapes, + // Dynamic color is available on Android 12+ dynamicColor: Boolean = true, content: @Composable () -> Unit ) { - val colorScheme = when { - dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { - val context = LocalContext.current - if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) - } - - darkTheme -> DarkColorScheme - else -> LightColorScheme - } val view = LocalView.current if (!view.isInEditMode) { SideEffect { val window = (view.context as Activity).window - window.statusBarColor = colorScheme.primary.toArgb() + window.statusBarColor = colors.accent.toArgb() WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme } } - MaterialTheme( - colorScheme = colorScheme, - typography = Typography, + CompositionLocalProvider( + LocalAppTypography provides typography, + LocalAppColorTokens provides if (darkTheme) AppColorTokensDark else AppColorTokensLight, + LocalAppShapes provides shapes, content = content ) } +object AppTheme { + val typography: AppTypography + @Composable + @ReadOnlyComposable + get() = LocalAppTypography.current + val colors: AppColorTokens + @Composable + @ReadOnlyComposable + get() = LocalAppColorTokens.current + val shapes: AppShapes + @Composable + @ReadOnlyComposable + get() = LocalAppShapes.current +} + +@Immutable +data class AppShapes( + val small: Shape = RoundedCornerShape(Dimens.Containers.cornerRadius), + val medium: Shape = RoundedCornerShape(Dimens.Containers.cornerRadius), + val large: Shape = RoundedCornerShape(Dimens.Containers.cornerRadiusLarge) +) + @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter") -@OptIn(ExperimentalMaterial3Api::class) @Composable fun PreviewAppTheme(content: @Composable () -> Unit) { AppTheme { diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt index ea9a95a..f1d728c 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt @@ -1,6 +1,7 @@ package nl.q42.template.ui.theme import androidx.compose.material3.Typography +import androidx.compose.runtime.Immutable import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight @@ -31,4 +32,32 @@ val Typography = Typography( letterSpacing = 0.5.sp ) */ +) + +val defaultFontFamily = FontFamily.Default + +@Immutable +data class AppTypography ( + // The names of these styles are shared with your team's design system + // So it is easy to communicate with designers about what text style to use + + val body: TextStyle = TextStyle( + fontFamily = defaultFontFamily, + fontWeight = FontWeight.Normal, + fontSize = 16.sp + ), + val h1: TextStyle = TextStyle( + fontFamily = defaultFontFamily, + fontWeight = FontWeight.Bold, + fontSize = 22.sp, + lineHeight = 28.sp, + letterSpacing = 0.sp + ), + val label: TextStyle = TextStyle( + fontFamily = defaultFontFamily, + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + lineHeight = 16.sp, + letterSpacing = 0.5.sp + ) ) \ No newline at end of file diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt index b113920..6f7d8df 100644 --- a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt +++ b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt @@ -10,8 +10,10 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment.Companion.CenterHorizontally import androidx.compose.ui.Modifier import nl.q42.template.home.main.presentation.HomeViewState +import nl.q42.template.ui.compose.composables.widgets.TemplateButton import nl.q42.template.ui.compose.get import nl.q42.template.ui.presentation.toViewStateString +import nl.q42.template.ui.theme.AppTheme import nl.q42.template.ui.theme.PreviewAppTheme import nl.q42.template.ui.theme.PreviewLightDark @@ -36,21 +38,25 @@ internal fun HomeContent( viewState.userEmailTitle?.get()?.let { Text(text = it) } if (viewState.isLoading) CircularProgressIndicator() - if (viewState.showError) Text(text = "Error") + if (viewState.showError) Text( + text = "Error", + style = AppTheme.typography.body, + color = AppTheme.colors.error + ) - Button(onClick = onLoadClicked) { - Text("Refresh") - } + TemplateButton("Refresh", onLoadClicked) - Button(onClick = onOpenSecondScreenClicked) { - Text("Open second screen") - } - Button(onClick = onOpenOnboardingClicked) { - Text("Open onboarding") - } + TemplateButton("Open second screen", onOpenSecondScreenClicked) + +// Button(onClick = onOpenOnboardingClicked) { +// Text("Open onboarding") +// } + TemplateButton("Open Onboarding", onOpenOnboardingClicked) } } + + @PreviewLightDark @Composable private fun HomeContentErrorPreview() { diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt b/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt index d114769..bf3f638 100644 --- a/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt +++ b/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt @@ -16,6 +16,8 @@ import com.ramcosta.composedestinations.annotation.Destination import com.ramcosta.composedestinations.navigation.DestinationsNavigator import nl.q42.template.home.second.presentation.HomeSecondViewModel import nl.q42.template.navigation.viewmodel.InitNavigator +import nl.q42.template.ui.compose.composables.widgets.TemplateButton +import nl.q42.template.ui.theme.AppTheme @Destination @Composable @@ -40,10 +42,8 @@ fun HomeSecondScreen( verticalArrangement = Arrangement.Center, ) { - Text(viewState.title, style = MaterialTheme.typography.titleMedium) + Text(viewState.title, style = AppTheme.typography.h1, color = AppTheme.colors.textPrimary) - Button(onClick = viewModel::onBackClicked) { - Text("Close") - } + TemplateButton("Close", viewModel::onBackClicked) } } From 43f2e2307aaa2be148380a8616ca728a40a7c3c5 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Tue, 10 Sep 2024 13:59:58 +0200 Subject: [PATCH 03/15] REMOVE dynamic color --- core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt | 3 --- 1 file changed, 3 deletions(-) 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 caff444..964d8e4 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 @@ -4,7 +4,6 @@ import android.annotation.SuppressLint import android.app.Activity import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider @@ -36,8 +35,6 @@ fun AppTheme( colors: AppColorTokens = AppTheme.colors, shapes: AppShapes = AppTheme.shapes, - // Dynamic color is available on Android 12+ - dynamicColor: Boolean = true, content: @Composable () -> Unit ) { val view = LocalView.current From 0572554cf8c6d875b736f7468627e32479f27956 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Tue, 10 Sep 2024 14:03:51 +0200 Subject: [PATCH 04/15] CHANGE small typo --- core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 964d8e4..a21a7ff 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 @@ -23,7 +23,7 @@ import androidx.core.view.WindowCompat private val LocalAppTypography = staticCompositionLocalOf { AppTypography() } private val LocalAppColorTokens = staticCompositionLocalOf { - // Dummy default, will be replaced for the actual theme by the Provider + // Dummy default, will be replaced for the actual tokens by the Provider AppColorTokensLight } private val LocalAppShapes = staticCompositionLocalOf { AppShapes() } From 6faf296c0a5d253412e93ee462ba5d1c74031fb3 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Tue, 10 Sep 2024 14:05:16 +0200 Subject: [PATCH 05/15] REMOVE leftover comment --- .../main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt | 3 --- 1 file changed, 3 deletions(-) diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt index 6f7d8df..0b0c92e 100644 --- a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt +++ b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt @@ -48,9 +48,6 @@ internal fun HomeContent( TemplateButton("Open second screen", onOpenSecondScreenClicked) -// Button(onClick = onOpenOnboardingClicked) { -// Text("Open onboarding") -// } TemplateButton("Open Onboarding", onOpenOnboardingClicked) } } From 0d2e89ee4cc17e1309ec0a26fcda8dcb2f3b669d Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:21:57 +0100 Subject: [PATCH 06/15] FIX use app backgroundcolor from app theme --- app/src/main/kotlin/nl/q42/template/MainActivity.kt | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/src/main/kotlin/nl/q42/template/MainActivity.kt b/app/src/main/kotlin/nl/q42/template/MainActivity.kt index df6fcac..5856ba3 100644 --- a/app/src/main/kotlin/nl/q42/template/MainActivity.kt +++ b/app/src/main/kotlin/nl/q42/template/MainActivity.kt @@ -5,7 +5,6 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.ui.Modifier import androidx.navigation.compose.rememberNavController @@ -26,7 +25,7 @@ class MainActivity : ComponentActivity() { val navController = rememberNavController() - Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) { + Surface(modifier = Modifier.fillMaxSize(), color = AppTheme.colors.surface) { AppNavigation(navController = navController, navGraph = NavGraphs.root) } } From fc3494e6cf96089fca20258dbfd25c624618ac8e Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:36:29 +0100 Subject: [PATCH 07/15] 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 From 86a9990f2c88b3b9ad274d68b0a0e06477f9568e Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:40:57 +0100 Subject: [PATCH 08/15] REFACTOR AppShapes to its own file --- .../nl/q42/template/ui/theme/AppShapes.kt | 13 ++++++++ .../ui/theme/{Theme.kt => AppTheme.kt} | 10 ------- .../ui/theme/{Type.kt => AppTypography.kt} | 30 +------------------ .../kotlin/nl/q42/template/ui/theme/Dimens.kt | 7 +---- 4 files changed, 15 insertions(+), 45 deletions(-) create mode 100644 core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt rename core/ui/src/main/kotlin/nl/q42/template/ui/theme/{Theme.kt => AppTheme.kt} (88%) rename core/ui/src/main/kotlin/nl/q42/template/ui/theme/{Type.kt => AppTypography.kt} (55%) diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt new file mode 100644 index 0000000..184f078 --- /dev/null +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt @@ -0,0 +1,13 @@ +package nl.q42.template.ui.theme + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.unit.dp + +@Immutable +data class AppShapes( + val small: Shape = RoundedCornerShape(8.dp), + val medium: Shape = RoundedCornerShape(16.dp), + val large: Shape = RoundedCornerShape(20.dp) +) \ 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/AppTheme.kt similarity index 88% rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt index 33610b0..e7eab71 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/AppTheme.kt @@ -4,18 +4,15 @@ 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 -import androidx.compose.runtime.Immutable import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.SideEffect import androidx.compose.runtime.staticCompositionLocalOf -import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.platform.LocalView import androidx.core.view.WindowCompat @@ -81,13 +78,6 @@ object AppTheme { get() = LocalAppShapes.current } -@Immutable -data class AppShapes( - val small: Shape = RoundedCornerShape(Dimens.Containers.cornerRadius), - val medium: Shape = RoundedCornerShape(Dimens.Containers.cornerRadius), - val large: Shape = RoundedCornerShape(Dimens.Containers.cornerRadiusLarge) -) - @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter") @Composable fun PreviewAppTheme(content: @Composable () -> Unit) { diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTypography.kt similarity index 55% rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTypography.kt index f1d728c..70c02b0 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTypography.kt @@ -1,43 +1,15 @@ package nl.q42.template.ui.theme -import androidx.compose.material3.Typography import androidx.compose.runtime.Immutable 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 -// Set of Material typography styles to start with -val Typography = Typography( - bodyLarge = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Normal, - fontSize = 16.sp, - lineHeight = 24.sp, - letterSpacing = 0.5.sp - ) - /* Other default text styles to override - titleLarge = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Normal, - fontSize = 22.sp, - lineHeight = 28.sp, - letterSpacing = 0.sp - ), - labelSmall = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Medium, - fontSize = 11.sp, - lineHeight = 16.sp, - letterSpacing = 0.5.sp - ) - */ -) - val defaultFontFamily = FontFamily.Default @Immutable -data class AppTypography ( +data class AppTypography( // The names of these styles are shared with your team's design system // So it is easy to communicate with designers about what text style to use diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt index d4d76a1..6d0c460 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt @@ -1,10 +1,5 @@ package nl.q42.template.ui.theme -import androidx.compose.ui.unit.dp - object Dimens { - object Containers { - val cornerRadius = 8.dp - val cornerRadiusLarge = 16.dp - } + } \ No newline at end of file From d2ee06b2bf472622a4a575f802380b36afa37f6b Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:44:21 +0100 Subject: [PATCH 09/15] ADD use Dimens for vertical spacing --- .../kotlin/nl/q42/template/ui/theme/Dimens.kt | 5 ++++- .../q42/template/home/main/ui/HomeContent.kt | 19 +++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt index 6d0c460..650e6db 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt @@ -1,5 +1,8 @@ package nl.q42.template.ui.theme -object Dimens { +import androidx.compose.ui.unit.dp +object Dimens { + val componentSpacingVertical = 24.dp + val buttonSpacingVertical = 8.dp } \ No newline at end of file diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt index 0b0c92e..ed2c486 100644 --- a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt +++ b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt @@ -1,9 +1,11 @@ package nl.q42.template.home.main.ui import androidx.compose.foundation.layout.Arrangement.Center +import androidx.compose.foundation.layout.Arrangement.spacedBy import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.material3.Button +import androidx.compose.foundation.layout.height import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -14,6 +16,7 @@ import nl.q42.template.ui.compose.composables.widgets.TemplateButton import nl.q42.template.ui.compose.get import nl.q42.template.ui.presentation.toViewStateString import nl.q42.template.ui.theme.AppTheme +import nl.q42.template.ui.theme.Dimens import nl.q42.template.ui.theme.PreviewAppTheme import nl.q42.template.ui.theme.PreviewLightDark @@ -44,11 +47,19 @@ internal fun HomeContent( color = AppTheme.colors.error ) - TemplateButton("Refresh", onLoadClicked) + Spacer(Modifier.height(Dimens.componentSpacingVertical)) - TemplateButton("Open second screen", onOpenSecondScreenClicked) + Column( + horizontalAlignment = CenterHorizontally, + verticalArrangement = spacedBy(Dimens.buttonSpacingVertical) + ) { + TemplateButton("Refresh", onLoadClicked) + + TemplateButton("Open second screen", onOpenSecondScreenClicked) + + TemplateButton("Open Onboarding", onOpenOnboardingClicked) + } - TemplateButton("Open Onboarding", onOpenOnboardingClicked) } } From 157a9536180b808ff2b0c15cfce449531f63109b Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:47:52 +0100 Subject: [PATCH 10/15] ADD buttonSpacing comment --- core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt index 650e6db..0258a28 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt @@ -4,5 +4,6 @@ import androidx.compose.ui.unit.dp object Dimens { val componentSpacingVertical = 24.dp + /** Spacing between 2 vertically stacked buttons */ val buttonSpacingVertical = 8.dp } \ No newline at end of file From b708aa7dc6a962ffc2d17895cc0810c7006e0c5f Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 11:54:26 +0100 Subject: [PATCH 11/15] RENAME ColorTokens to ColorScheme --- .../{AppColorTokens.kt => AppColorScheme.kt} | 2 +- ...ppColorTokensDark.kt => AppColorSchemeDark.kt} | 2 +- ...ColorTokensLight.kt => AppColorSchemeLight.kt} | 2 +- .../kotlin/nl/q42/template/ui/theme/AppTheme.kt | 15 +++++++++------ 4 files changed, 12 insertions(+), 9 deletions(-) rename core/ui/src/main/kotlin/nl/q42/template/ui/theme/{AppColorTokens.kt => AppColorScheme.kt} (89%) rename core/ui/src/main/kotlin/nl/q42/template/ui/theme/{AppColorTokensDark.kt => AppColorSchemeDark.kt} (87%) rename core/ui/src/main/kotlin/nl/q42/template/ui/theme/{AppColorTokensLight.kt => AppColorSchemeLight.kt} (87%) 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/AppColorScheme.kt similarity index 89% rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokens.kt rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorScheme.kt index e21b2eb..83a7720 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/AppColorScheme.kt @@ -2,7 +2,7 @@ package nl.q42.template.ui.theme import androidx.compose.ui.graphics.Color -interface AppColorTokens { +interface AppColorScheme { val buttonText: Color val accent: Color val textPrimary: Color 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/AppColorSchemeDark.kt similarity index 87% rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensDark.kt rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeDark.kt index 1773efc..9464548 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/AppColorSchemeDark.kt @@ -2,7 +2,7 @@ package nl.q42.template.ui.theme import androidx.compose.ui.graphics.Color -object AppColorTokensDark: AppColorTokens { +object AppColorSchemeDark: AppColorScheme { override val buttonText: Color = White override val accent: Color = PurpleGrey80 override val textPrimary = White 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/AppColorSchemeLight.kt similarity index 87% rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorTokensLight.kt rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeLight.kt index 41b4833..06d4532 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/AppColorSchemeLight.kt @@ -2,7 +2,7 @@ package nl.q42.template.ui.theme import androidx.compose.ui.graphics.Color -object AppColorTokensLight : AppColorTokens { +object AppColorSchemeLight : AppColorScheme { override val buttonText: Color = White override val accent: Color = Purple40 override val textPrimary = Black diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt index e7eab71..e3abf4d 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt @@ -3,16 +3,19 @@ package nl.q42.template.ui.theme import android.annotation.SuppressLint import android.app.Activity import androidx.compose.foundation.LocalIndication +import androidx.compose.foundation.clickable import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.LocalContentColor import androidx.compose.material3.LocalRippleConfiguration import androidx.compose.material3.LocalTextStyle +import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.SideEffect import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.platform.LocalView import androidx.core.view.WindowCompat @@ -24,9 +27,9 @@ import nl.q42.template.ui.compose.composables.widgets.AppSurface */ private val LocalAppTypography = staticCompositionLocalOf { AppTypography() } -private val LocalAppColorTokens = staticCompositionLocalOf { +private val LocalAppColorScheme = staticCompositionLocalOf { // Dummy default, will be replaced for the actual tokens by the Provider - AppColorTokensLight + AppColorSchemeLight } private val LocalAppShapes = staticCompositionLocalOf { AppShapes() } @@ -34,7 +37,7 @@ private val LocalAppShapes = staticCompositionLocalOf { AppShapes() } fun AppTheme( darkTheme: Boolean = isSystemInDarkTheme(), typography: AppTypography = AppTheme.typography, - colors: AppColorTokens = AppTheme.colors, + colors: AppColorScheme = AppTheme.colors, shapes: AppShapes = AppTheme.shapes, content: @Composable () -> Unit @@ -50,7 +53,7 @@ fun AppTheme( CompositionLocalProvider( LocalAppTypography provides typography, - LocalAppColorTokens provides if (darkTheme) AppColorTokensDark else AppColorTokensLight, + LocalAppColorScheme provides if (darkTheme) AppColorSchemeDark else AppColorSchemeLight, LocalAppShapes provides shapes, /** configures the ripple for material components */ LocalRippleConfiguration provides AppRippleConfiguration, @@ -68,10 +71,10 @@ object AppTheme { @Composable @ReadOnlyComposable get() = LocalAppTypography.current - val colors: AppColorTokens + val colors: AppColorScheme @Composable @ReadOnlyComposable - get() = LocalAppColorTokens.current + get() = LocalAppColorScheme.current val shapes: AppShapes @Composable @ReadOnlyComposable From 17c00cfb7ccf6e9d709c60322e278c10c4ab6cc3 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 13 Dec 2024 12:01:27 +0100 Subject: [PATCH 12/15] ADD disabled state to TemplateButton --- .../ui/compose/composables/widgets/TemplateButton.kt | 9 ++++++--- .../kotlin/nl/q42/template/home/main/ui/HomeContent.kt | 8 +++++--- .../nl/q42/template/home/second/ui/HomeSecondScreen.kt | 4 +--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt index fae0c7e..d0e253b 100644 --- a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt +++ b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt @@ -8,12 +8,15 @@ import nl.q42.template.ui.theme.AppTheme import nl.q42.template.ui.theme.PreviewLightDark @Composable -fun TemplateButton(text: String, onClick: () -> Unit) { +fun TemplateButton(text: String, enabled: Boolean = true, onClick: () -> Unit) { Button( onClick = onClick, + enabled = enabled, colors = ButtonDefaults.buttonColors( containerColor = AppTheme.colors.accent, - contentColor = AppTheme.colors.buttonText + contentColor = AppTheme.colors.buttonText, + disabledContentColor = AppTheme.colors.buttonText.copy(alpha = 0.5f), + disabledContainerColor = AppTheme.colors.accent.copy(alpha = 0.5f) ) ) { Text( @@ -28,6 +31,6 @@ fun TemplateButton(text: String, onClick: () -> Unit) { @PreviewLightDark private fun TemplateButtonPreview() { AppTheme { - TemplateButton("Button", {}) + TemplateButton("Button",) {} } } \ No newline at end of file diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt index ed2c486..2f5e051 100644 --- a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt +++ b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt @@ -53,11 +53,13 @@ internal fun HomeContent( horizontalAlignment = CenterHorizontally, verticalArrangement = spacedBy(Dimens.buttonSpacingVertical) ) { - TemplateButton("Refresh", onLoadClicked) + TemplateButton("Refresh", onClick = onLoadClicked) - TemplateButton("Open second screen", onOpenSecondScreenClicked) + TemplateButton("Open second screen", onClick = onOpenSecondScreenClicked) - TemplateButton("Open Onboarding", onOpenOnboardingClicked) + TemplateButton("Open Onboarding", onClick = onOpenOnboardingClicked) + + TemplateButton("Disabled button", enabled = false) {} } } diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt b/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt index bf3f638..1fe97e7 100644 --- a/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt +++ b/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt @@ -3,8 +3,6 @@ package nl.q42.template.home.second.ui import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.material3.Button -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -44,6 +42,6 @@ fun HomeSecondScreen( Text(viewState.title, style = AppTheme.typography.h1, color = AppTheme.colors.textPrimary) - TemplateButton("Close", viewModel::onBackClicked) + TemplateButton("Close", onClick = viewModel::onBackClicked) } } From bfdf91bdc5f468f2aa70879602c7eb6a2d5fb619 Mon Sep 17 00:00:00 2001 From: Nino van Hooff Date: Fri, 24 Jan 2025 14:33:30 +0100 Subject: [PATCH 13/15] ADD LadyBug Android Studio config files --- .idea/git_toolbox_blame.xml | 6 ++++++ .idea/gradle.xml | 1 + .idea/inspectionProfiles/Project_Default.xml | 3 +++ .idea/runConfigurations.xml | 17 +++++++++++++++++ 4 files changed, 27 insertions(+) create mode 100644 .idea/git_toolbox_blame.xml create mode 100644 .idea/runConfigurations.xml diff --git a/.idea/git_toolbox_blame.xml b/.idea/git_toolbox_blame.xml new file mode 100644 index 0000000..7dc1249 --- /dev/null +++ b/.idea/git_toolbox_blame.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/gradle.xml b/.idea/gradle.xml index e976615..dd538c7 100644 --- a/.idea/gradle.xml +++ b/.idea/gradle.xml @@ -4,6 +4,7 @@