From 2ef58764982fbd53953dc20ac0c3b44d275de0c0 Mon Sep 17 00:00:00 2001 From: Nick Rout Date: Wed, 9 Mar 2022 15:02:58 +0200 Subject: [PATCH] Implement Now in Android Material 3 theme Bug: 216019424 Change-Id: I84dfa9bda4c4512d696bb2295e90bf013ab8933c --- .../apps/nowinandroid/core/ui/theme/Color.kt | 65 +++++++- .../apps/nowinandroid/core/ui/theme/Theme.kt | 140 ++++++++++++++++-- .../apps/nowinandroid/core/ui/theme/Type.kt | 96 +++++++++++- 3 files changed, 286 insertions(+), 15 deletions(-) diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Color.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Color.kt index f5e912a8c..ffa628dbe 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Color.kt +++ b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Color.kt @@ -18,7 +18,64 @@ package com.google.samples.apps.nowinandroid.core.ui.theme import androidx.compose.ui.graphics.Color -val Purple200 = Color(0xFFBB86FC) -val Purple500 = Color(0xFF6200EE) -val Purple700 = Color(0xFF3700B3) -val Teal200 = Color(0xFF03DAC5) +/** + * Now in Android colors. + */ +val Blue10 = Color(0xFF001F29) +val Blue20 = Color(0xFF003544) +val Blue30 = Color(0xFF004D61) +val Blue40 = Color(0xFF006781) +val Blue80 = Color(0xFF5DD4FB) +val Blue90 = Color(0xFFB5EAFF) +val DarkGreen10 = Color(0xFF0D1F12) +val DarkGreen20 = Color(0xFF223526) +val DarkGreen30 = Color(0xFF394B3C) +val DarkGreen40 = Color(0xFF4F6352) +val DarkGreen80 = Color(0xFFB7CCB8) +val DarkGreen90 = Color(0xFFD3E8D3) +val DarkGreenGray10 = Color(0xFF1A1C1A) +val DarkGreenGray90 = Color(0xFFE2E3DE) +val DarkGreenGray99 = Color(0xFFFBFDF7) +val DarkPurpleGray10 = Color(0xFF201A1B) +val DarkPurpleGray90 = Color(0xFFECDFE0) +val DarkPurpleGray99 = Color(0xFFFCFCFC) +val Green10 = Color(0xFF00210B) +val Green20 = Color(0xFF003919) +val Green30 = Color(0xFF005227) +val Green40 = Color(0xFF006D36) +val Green80 = Color(0xFF0EE37C) +val Green90 = Color(0xFF5AFF9D) +val GreenGray30 = Color(0xFF414941) +val GreenGray50 = Color(0xFF727971) +val GreenGray60 = Color(0xFF8B938A) +val GreenGray80 = Color(0xFFC1C9BF) +val GreenGray90 = Color(0xFFDDE5DB) +val Orange10 = Color(0xFF390C00) +val Orange20 = Color(0xFF5D1900) +val Orange30 = Color(0xFF812800) +val Orange40 = Color(0xFFA23F16) +val Orange80 = Color(0xFFFFB599) +val Orange90 = Color(0xFFFFDBCE) +val Purple10 = Color(0xFF36003D) +val Purple20 = Color(0xFF560A5E) +val Purple30 = Color(0xFF702776) +val Purple40 = Color(0xFF8C4190) +val Purple80 = Color(0xFFFFA8FF) +val Purple90 = Color(0xFFFFD5FC) +val PurpleGray30 = Color(0xFF4E444C) +val PurpleGray50 = Color(0xFF7F747C) +val PurpleGray60 = Color(0xFF998D96) +val PurpleGray80 = Color(0xFFD0C2CC) +val PurpleGray90 = Color(0xFFEDDEE8) +val Red10 = Color(0xFF410001) +val Red20 = Color(0xFF680003) +val Red30 = Color(0xFF930006) +val Red40 = Color(0xFFBA1B1B) +val Red80 = Color(0xFFFFB4A9) +val Red90 = Color(0xFFFFDAD4) +val Teal10 = Color(0xFF001F26) +val Teal20 = Color(0xFF02363F) +val Teal30 = Color(0xFF214D56) +val Teal40 = Color(0xFF3A656F) +val Teal80 = Color(0xFFA2CED9) +val Teal90 = Color(0xFFBEEAF6) diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Theme.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Theme.kt index 4854210a0..1b9e8d47b 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Theme.kt +++ b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Theme.kt @@ -24,22 +24,141 @@ import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext -private val DarkColorScheme = darkColorScheme( - primary = Purple200, - secondary = Teal200 +/** + * Light default theme color scheme + */ +private val LightDefaultColorScheme = lightColorScheme( + primary = Purple40, + onPrimary = Color.White, + primaryContainer = Purple90, + onPrimaryContainer = Purple10, + secondary = Orange40, + onSecondary = Color.White, + secondaryContainer = Orange90, + onSecondaryContainer = Orange10, + tertiary = Blue40, + onTertiary = Color.White, + tertiaryContainer = Blue90, + onTertiaryContainer = Blue10, + error = Red40, + onError = Color.White, + errorContainer = Red90, + onErrorContainer = Red10, + background = DarkPurpleGray99, + onBackground = DarkPurpleGray10, + surface = DarkPurpleGray99, + onSurface = DarkPurpleGray10, + surfaceVariant = PurpleGray90, + onSurfaceVariant = PurpleGray30, + outline = PurpleGray50 +) + +/** + * Dark default theme color scheme + */ +private val DarkDefaultColorScheme = darkColorScheme( + primary = Purple80, + onPrimary = Purple20, + primaryContainer = Purple30, + onPrimaryContainer = Purple90, + secondary = Orange80, + onSecondary = Orange20, + secondaryContainer = Orange30, + onSecondaryContainer = Orange90, + tertiary = Blue80, + onTertiary = Blue20, + tertiaryContainer = Blue30, + onTertiaryContainer = Blue90, + error = Red80, + onError = Red20, + errorContainer = Red30, + onErrorContainer = Red90, + background = DarkPurpleGray10, + onBackground = DarkPurpleGray90, + surface = DarkPurpleGray10, + onSurface = DarkPurpleGray90, + surfaceVariant = PurpleGray30, + onSurfaceVariant = PurpleGray80, + outline = PurpleGray60 +) + +/** + * Light Android theme color scheme + */ +private val LightAndroidColorScheme = lightColorScheme( + primary = Green40, + onPrimary = Color.White, + primaryContainer = Green90, + onPrimaryContainer = Green10, + secondary = DarkGreen40, + onSecondary = Color.White, + secondaryContainer = DarkGreen90, + onSecondaryContainer = DarkGreen10, + tertiary = Teal40, + onTertiary = Color.White, + tertiaryContainer = Teal90, + onTertiaryContainer = Teal10, + error = Red40, + onError = Color.White, + errorContainer = Red90, + onErrorContainer = Red10, + background = DarkGreenGray99, + onBackground = DarkGreenGray10, + surface = DarkGreenGray99, + onSurface = DarkGreenGray10, + surfaceVariant = GreenGray90, + onSurfaceVariant = GreenGray30, + outline = GreenGray50 ) -private val LightColorScheme = lightColorScheme( - primary = Purple500, - secondary = Teal200 +/** + * Dark Android theme color scheme + */ +private val DarkAndroidColorScheme = darkColorScheme( + primary = Green80, + onPrimary = Green20, + primaryContainer = Green30, + onPrimaryContainer = Green90, + secondary = DarkGreen80, + onSecondary = DarkGreen20, + secondaryContainer = DarkGreen30, + onSecondaryContainer = DarkGreen90, + tertiary = Teal80, + onTertiary = Teal20, + tertiaryContainer = Teal30, + onTertiaryContainer = Teal90, + error = Red80, + onError = Red20, + errorContainer = Red30, + onErrorContainer = Red90, + background = DarkGreenGray10, + onBackground = DarkGreenGray90, + surface = DarkGreenGray10, + onSurface = DarkGreenGray90, + surfaceVariant = GreenGray30, + onSurfaceVariant = GreenGray80, + outline = GreenGray60 ) +/** + * Now in Android theme. + * + * The order of precedence for the color scheme is: Dynamic color > Android theme > Default theme. + * Dark theme is independent as all the aforementioned color schemes have light and dark versions. + * The default theme color scheme is used by default. + * + * @param darkTheme Whether the theme should use a dark color scheme (follows system by default). + * @param dynamicColor Whether the theme should use a dynamic color scheme (Android 12+ only). + * @param androidTheme Whether the theme should use the Android theme color scheme. + */ @Composable fun NiaTheme( darkTheme: Boolean = isSystemInDarkTheme(), - dynamicColor: Boolean = true, + dynamicColor: Boolean = false, + androidTheme: Boolean = false, content: @Composable() () -> Unit ) { val colorScheme = when { @@ -47,10 +166,11 @@ fun NiaTheme( val context = LocalContext.current if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) } - darkTheme -> DarkColorScheme - else -> LightColorScheme + androidTheme && darkTheme -> DarkAndroidColorScheme + androidTheme -> LightAndroidColorScheme + darkTheme -> DarkDefaultColorScheme + else -> LightDefaultColorScheme } - MaterialTheme( colorScheme = colorScheme, typography = NiaTypography, diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Type.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Type.kt index ad0ebb554..d65a75add 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Type.kt +++ b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/theme/Type.kt @@ -17,5 +17,99 @@ package com.google.samples.apps.nowinandroid.core.ui.theme import androidx.compose.material3.Typography +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp -val NiaTypography = Typography() +/** + * Now in Android typography. + * + * TODO: Add custom font + */ +val NiaTypography = Typography( + displayLarge = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 57.sp, + lineHeight = 64.sp, + letterSpacing = (-0.25).sp + ), + displayMedium = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 45.sp, + lineHeight = 52.sp + ), + displaySmall = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 36.sp, + lineHeight = 44.sp + ), + headlineLarge = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 32.sp, + lineHeight = 40.sp + ), + headlineMedium = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 28.sp, + lineHeight = 36.sp + ), + headlineSmall = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 24.sp, + lineHeight = 32.sp + ), + titleLarge = TextStyle( + fontWeight = FontWeight.W700, + fontSize = 22.sp, + lineHeight = 28.sp + ), + titleMedium = TextStyle( + fontWeight = FontWeight.W700, + fontSize = 16.sp, + lineHeight = 24.sp, + letterSpacing = 0.1.sp + ), + titleSmall = TextStyle( + fontWeight = FontWeight.W500, + fontSize = 14.sp, + lineHeight = 20.sp, + letterSpacing = 0.1.sp + ), + bodyLarge = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 16.sp, + lineHeight = 24.sp, + letterSpacing = 0.5.sp + ), + bodyMedium = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 14.sp, + lineHeight = 20.sp, + letterSpacing = 0.25.sp + ), + bodySmall = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 12.sp, + lineHeight = 16.sp, + letterSpacing = 0.4.sp + ), + labelLarge = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 14.sp, + lineHeight = 20.sp, + letterSpacing = 0.1.sp + ), + labelMedium = TextStyle( + fontWeight = FontWeight.W400, + fontSize = 12.sp, + lineHeight = 16.sp, + letterSpacing = 0.5.sp + ), + labelSmall = TextStyle( + fontFamily = FontFamily.Monospace, + fontWeight = FontWeight.W500, + fontSize = 10.sp, + lineHeight = 16.sp + ) +)