[Reply] Contrast aware updates. (#1284)

jwill · web-flow · commit 050a1b63cf78 · 2024-03-28T09:40:00.000-07:00
Added colors for standard, medium, and high in both light and dark
themes.
Added helper function to select contrast level based on values from
SysUI controls.
Added more variance in application of surface container roles to better
indicate elevation and emphasis.
diff --git a/Reply/app/src/main/java/com/example/reply/ui/MainActivity.kt b/Reply/app/src/main/java/com/example/reply/ui/MainActivity.kt
@@ -31,7 +31,7 @@ import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.example.reply.data.local.LocalEmailsDataProvider
-import com.example.reply.ui.theme.ReplyTheme
+import com.example.reply.ui.theme.ContrastAwareReplyTheme
 import com.google.accompanist.adaptive.calculateDisplayFeatures
 
 class MainActivity : ComponentActivity() {
@@ -44,7 +44,7 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
 
         setContent {
-            ReplyTheme {
+            ContrastAwareReplyTheme {
                 val windowSize = calculateWindowSizeClass(this)
                 val displayFeatures = calculateDisplayFeatures(this)
                 val uiState by viewModel.uiState.collectAsStateWithLifecycle()
@@ -72,7 +72,7 @@ class MainActivity : ComponentActivity() {
 @Preview(showBackground = true)
 @Composable
 fun ReplyAppPreview() {
-    ReplyTheme {
+    ContrastAwareReplyTheme {
         ReplyApp(
             replyHomeUIState = ReplyHomeUIState(emails = LocalEmailsDataProvider.allEmails),
             windowSize = WindowSizeClass.calculateFromSize(DpSize(400.dp, 900.dp)),
@@ -85,7 +85,7 @@ fun ReplyAppPreview() {
 @Preview(showBackground = true, widthDp = 700, heightDp = 500)
 @Composable
 fun ReplyAppPreviewTablet() {
-    ReplyTheme {
+    ContrastAwareReplyTheme {
         ReplyApp(
             replyHomeUIState = ReplyHomeUIState(emails = LocalEmailsDataProvider.allEmails),
             windowSize = WindowSizeClass.calculateFromSize(DpSize(700.dp, 500.dp)),
@@ -98,7 +98,7 @@ fun ReplyAppPreviewTablet() {
 @Preview(showBackground = true, widthDp = 500, heightDp = 700)
 @Composable
 fun ReplyAppPreviewTabletPortrait() {
-    ReplyTheme {
+    ContrastAwareReplyTheme {
         ReplyApp(
             replyHomeUIState = ReplyHomeUIState(emails = LocalEmailsDataProvider.allEmails),
             windowSize = WindowSizeClass.calculateFromSize(DpSize(500.dp, 700.dp)),
@@ -111,7 +111,7 @@ fun ReplyAppPreviewTabletPortrait() {
 @Preview(showBackground = true, widthDp = 1100, heightDp = 600)
 @Composable
 fun ReplyAppPreviewDesktop() {
-    ReplyTheme {
+    ContrastAwareReplyTheme {
         ReplyApp(
             replyHomeUIState = ReplyHomeUIState(emails = LocalEmailsDataProvider.allEmails),
             windowSize = WindowSizeClass.calculateFromSize(DpSize(1100.dp, 600.dp)),
@@ -124,7 +124,7 @@ fun ReplyAppPreviewDesktop() {
 @Preview(showBackground = true, widthDp = 600, heightDp = 1100)
 @Composable
 fun ReplyAppPreviewDesktopPortrait() {
-    ReplyTheme {
+    ContrastAwareReplyTheme {
         ReplyApp(
             replyHomeUIState = ReplyHomeUIState(emails = LocalEmailsDataProvider.allEmails),
             windowSize = WindowSizeClass.calculateFromSize(DpSize(600.dp, 1100.dp)),
diff --git a/Reply/app/src/main/java/com/example/reply/ui/ReplyApp.kt b/Reply/app/src/main/java/com/example/reply/ui/ReplyApp.kt
@@ -255,7 +255,7 @@ fun ReplyAppContent(
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .background(MaterialTheme.colorScheme.inverseOnSurface)
+                .background(MaterialTheme.colorScheme.surfaceContainerLow)
         ) {
             ReplyNavHost(
                 navController = navController,
diff --git a/Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt b/Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt
@@ -181,7 +181,7 @@ fun ReplyEmailList(
             },
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 16.dp)
+                .padding(horizontal = 16.dp, vertical = 16.dp)
         )
 
         LazyColumn(
diff --git a/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailListItem.kt b/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailListItem.kt
@@ -115,14 +115,13 @@ fun ReplyEmailListItem(
                     Text(
                         text = email.createdAt,
                         style = MaterialTheme.typography.labelMedium,
-                        color = MaterialTheme.colorScheme.outline
                     )
                 }
                 IconButton(
                     onClick = { /*TODO*/ },
                     modifier = Modifier
                         .clip(CircleShape)
-                        .background(MaterialTheme.colorScheme.surface)
+                        .background(MaterialTheme.colorScheme.surfaceContainerHigh)
                 ) {
                     Icon(
                         imageVector = Icons.Default.StarBorder,
@@ -135,15 +134,12 @@ fun ReplyEmailListItem(
             Text(
                 text = email.subject,
                 style = MaterialTheme.typography.bodyLarge,
-                color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
-                else MaterialTheme.colorScheme.onSurface,
                 modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
             )
             Text(
                 text = email.body,
                 style = MaterialTheme.typography.bodyMedium,
                 maxLines = 2,
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
                 overflow = TextOverflow.Ellipsis
             )
         }
diff --git a/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailThreadItem.kt b/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailThreadItem.kt
@@ -50,7 +50,9 @@ fun ReplyEmailThreadItem(
 ) {
     Card(
         modifier = modifier.padding(horizontal = 16.dp, vertical = 4.dp),
-        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceContainerHigh
+        )
     ) {
         Column(
             modifier = Modifier
@@ -82,7 +84,7 @@ fun ReplyEmailThreadItem(
                     onClick = { /*TODO*/ },
                     modifier = Modifier
                         .clip(CircleShape)
-                        .background(MaterialTheme.colorScheme.surface)
+                        .background(MaterialTheme.colorScheme.surfaceContainer)
                 ) {
                     Icon(
                         imageVector = Icons.Default.StarBorder,
@@ -107,31 +109,31 @@ fun ReplyEmailThreadItem(
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(vertical = 20.dp),
-                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    .padding(top = 20.dp, bottom = 8.dp),
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
             ) {
                 Button(
                     onClick = { /*TODO*/ },
                     modifier = Modifier.weight(1f),
                     colors = ButtonDefaults.buttonColors(
-                        containerColor = MaterialTheme.colorScheme.inverseOnSurface
+                        containerColor = MaterialTheme.colorScheme.surfaceBright
                     )
                 ) {
                     Text(
                         text = stringResource(id = R.string.reply),
-                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                        color = MaterialTheme.colorScheme.onSurface
                     )
                 }
                 Button(
                     onClick = { /*TODO*/ },
                     modifier = Modifier.weight(1f),
                     colors = ButtonDefaults.buttonColors(
-                        containerColor = MaterialTheme.colorScheme.inverseOnSurface
+                        containerColor = MaterialTheme.colorScheme.surfaceBright
                     )
                 ) {
                     Text(
                         text = stringResource(id = R.string.reply_all),
-                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                        color = MaterialTheme.colorScheme.onSurface
                     )
                 }
             }
diff --git a/Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt b/Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt
@@ -30,6 +30,7 @@ import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.MenuOpen
 import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material.icons.filled.MenuOpen
@@ -157,12 +158,12 @@ fun PermanentNavigationDrawerContent(
 ) {
     PermanentDrawerSheet(
         modifier = Modifier.sizeIn(minWidth = 200.dp, maxWidth = 300.dp),
-        drawerContainerColor = MaterialTheme.colorScheme.inverseOnSurface,
+        drawerContainerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
     ) {
         // TODO remove custom nav drawer content positioning when NavDrawer component supports it. ticket : b/232495216
         Layout(
             modifier = Modifier
-                .background(MaterialTheme.colorScheme.inverseOnSurface)
+                .background(MaterialTheme.colorScheme.surfaceContainerHigh)
                 .padding(16.dp),
             content = {
                 Column(
@@ -188,7 +189,7 @@ fun PermanentNavigationDrawerContent(
                         Icon(
                             imageVector = Icons.Default.Edit,
                             contentDescription = stringResource(id = R.string.edit),
-                            modifier = Modifier.size(18.dp)
+                            modifier = Modifier.size(24.dp)
                         )
                         Text(
                             text = stringResource(id = R.string.compose),
@@ -268,7 +269,7 @@ fun ModalNavigationDrawerContent(
                         )
                         IconButton(onClick = onDrawerClicked) {
                             Icon(
-                                imageVector = Icons.Default.MenuOpen,
+                                imageVector = Icons.AutoMirrored.Filled.MenuOpen,
                                 contentDescription = stringResource(id = R.string.navigation_drawer)
                             )
                         }
diff --git a/Reply/app/src/main/java/com/example/reply/ui/theme/Color.kt b/Reply/app/src/main/java/com/example/reply/ui/theme/Color.kt
diff --git a/Reply/app/src/main/java/com/example/reply/ui/theme/Theme.kt b/Reply/app/src/main/java/com/example/reply/ui/theme/Theme.kt

Original file line number	Diff line number	Diff line change
`@@ -181,7 +181,7 @@ fun ReplyEmailList(`
`181`	`181`	`},`
`182`	`182`	`modifier = Modifier`
`183`	`183`	`.fillMaxWidth()`
`184`		`- .padding(horizontal = 16.dp)`
	`184`	`+ .padding(horizontal = 16.dp, vertical = 16.dp)`
`185`	`185`	`)`
`186`	`186`
`187`	`187`	`LazyColumn(`