Update home page with the new design and colors to GM3 baseline.

PiperOrigin-RevId: 784712094

Author: Google AI Edge Gallery

Android/src/app/src/main/java/com/google/ai/edge/gallery/GalleryAppTopBar.kt

@@ -44,7 +44,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.google.ai.edge.gallery.data.AppBarAction
@@ -61,7 +60,7 @@ fun GalleryTopAppBar(
   scrollBehavior: TopAppBarScrollBehavior? = null,
   subtitle: String = "",
 ) {
-  val titleColor = MaterialTheme.colorScheme.primary
+  val titleColor = MaterialTheme.colorScheme.onSurface
   CenterAlignedTopAppBar(
     title = {
       Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -81,9 +80,9 @@ fun GalleryTopAppBar(
             text = title,
             maxLines = 1,
             color = { titleColor },
-            style = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.SemiBold),
+            style = MaterialTheme.typography.titleMedium,
             autoSize =
-              TextAutoSize.StepBased(minFontSize = 14.sp, maxFontSize = 22.sp, stepSize = 1.sp),
+              TextAutoSize.StepBased(minFontSize = 14.sp, maxFontSize = 16.sp, stepSize = 1.sp),
           )
         }
         if (subtitle.isNotEmpty()) {
@@ -136,7 +135,7 @@ fun GalleryTopAppBar(
             Icon(
               imageVector = Icons.Rounded.Settings,
               contentDescription = "",
-              tint = MaterialTheme.colorScheme.primary,
+              tint = MaterialTheme.colorScheme.onSurface,
             )
           }
         }

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/ClickableLink.kt

@@ -63,7 +63,7 @@ fun ClickableLink(url: String, linkText: String, icon: ImageVector) {
     Text(
       text = annotatedText,
       textAlign = TextAlign.Center,
-      style = MaterialTheme.typography.bodyLarge,
+      style = MaterialTheme.typography.bodyMedium,
       modifier =
         Modifier.padding(start = 6.dp).clickable {
           uriHandler.openUri(url)

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/ColorUtils.kt

@@ -28,6 +28,12 @@ fun getTaskBgColor(task: Task): Color {
   return MaterialTheme.customColors.taskBgColors[colorIndex]
 }
 
+@Composable
+fun getTaskBgGradientColors(task: Task): List<Color> {
+  val colorIndex: Int = task.index % MaterialTheme.customColors.taskBgColors.size
+  return MaterialTheme.customColors.taskBgGradientColors[colorIndex]
+}
+
 @Composable
 fun getTaskIconColor(task: Task): Color {
   val colorIndex: Int = task.index % MaterialTheme.customColors.taskIconColors.size

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/MarkdownText.kt

@@ -21,6 +21,7 @@ import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextLinkStyles
 import androidx.compose.ui.text.TextStyle
@@ -34,12 +35,19 @@ import com.halilibo.richtext.ui.string.RichTextStringStyle
 
 /** Composable function to display Markdown-formatted text. */
 @Composable
-fun MarkdownText(text: String, modifier: Modifier = Modifier, smallFontSize: Boolean = false) {
+fun MarkdownText(
+  text: String,
+  modifier: Modifier = Modifier,
+  smallFontSize: Boolean = false,
+  textColor: Color = MaterialTheme.colorScheme.onSurface,
+) {
   val fontSize =
     if (smallFontSize) MaterialTheme.typography.bodyMedium.fontSize
     else MaterialTheme.typography.bodyLarge.fontSize
   CompositionLocalProvider {
-    ProvideTextStyle(value = TextStyle(fontSize = fontSize, lineHeight = fontSize * 1.3)) {
+    ProvideTextStyle(
+      value = TextStyle(fontSize = fontSize, lineHeight = fontSize * 1.3, color = textColor)
+    ) {
       RichText(
         modifier = modifier,
         style =

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/ModelPageAppBar.kt

@@ -48,7 +48,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.google.ai.edge.gallery.data.Model
 import com.google.ai.edge.gallery.data.ModelDownloadStatusType
@@ -100,7 +99,7 @@ fun ModelPageAppBar(
           )
           Text(
             task.type.label,
-            style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.SemiBold),
+            style = MaterialTheme.typography.titleMedium,
             color = getTaskIconColor(task = task),
           )
         }
@@ -144,7 +143,7 @@ fun ModelPageAppBar(
             Icon(
               imageVector = Icons.Rounded.Tune,
               contentDescription = "",
-              tint = MaterialTheme.colorScheme.primary,
+              tint = MaterialTheme.colorScheme.onSurface,
               modifier = Modifier.size(20.dp),
             )
           }
@@ -173,7 +172,7 @@ fun ModelPageAppBar(
                 Icon(
                   imageVector = Icons.Rounded.MapsUgc,
                   contentDescription = "",
-                  tint = MaterialTheme.colorScheme.primary,
+                  tint = MaterialTheme.colorScheme.onSurface,
                   modifier = Modifier.size(20.dp),
                 )
               }

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/TaskIcon.kt

@@ -25,14 +25,15 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.CompositingStrategy
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
@@ -46,10 +47,18 @@ import com.google.ai.edge.gallery.data.TASKS
 import com.google.ai.edge.gallery.data.TASK_LLM_CHAT
 import com.google.ai.edge.gallery.data.Task
 import com.google.ai.edge.gallery.ui.theme.GalleryTheme
-import com.google.ai.edge.gallery.ui.theme.customColors
 
 private val SHAPES: List<Int> =
-  listOf(R.drawable.pantegon, R.drawable.double_circle, R.drawable.circle, R.drawable.four_circle)
+  listOf(
+    // Ask image.
+    R.drawable.circle,
+    // Audio scribe
+    R.drawable.double_circle,
+    // Prompt lab
+    R.drawable.pantegon,
+    // AI chat,
+    R.drawable.four_circle,
+  )
 
 /**
  * Composable that displays an icon representing a task. It consists of a background image and a
@@ -58,21 +67,27 @@ private val SHAPES: List<Int> =
 @Composable
 fun TaskIcon(task: Task, modifier: Modifier = Modifier, width: Dp = 56.dp) {
   Box(modifier = modifier.width(width).aspectRatio(1f), contentAlignment = Alignment.Center) {
+    val brush = Brush.linearGradient(colors = getTaskBgGradientColors(task = task))
     Image(
       painter = getTaskIconBgShape(task = task),
       contentDescription = "",
-      modifier = Modifier.fillMaxSize().alpha(0.6f),
-      contentScale = ContentScale.Fit,
-      colorFilter =
-        ColorFilter.tint(
-          MaterialTheme.customColors.taskIconShapeBgColor,
-          blendMode = BlendMode.SrcIn,
-        ),
+      modifier =
+        Modifier.fillMaxSize()
+          .graphicsLayer(
+            // This is important to make blending mode work.
+            alpha = 0.99f,
+            compositingStrategy = CompositingStrategy.Offscreen,
+          )
+          .drawWithContent {
+            drawContent()
+            drawRect(brush = brush, blendMode = BlendMode.SrcIn)
+          },
+      contentScale = ContentScale.FillHeight,
     )
     Icon(
       task.icon ?: ImageVector.vectorResource(task.iconVectorResourceId!!),
-      tint = getTaskIconColor(task = task),
-      modifier = Modifier.size(width * 0.6f),
+      tint = Color.White,
+      modifier = Modifier.size(width * 0.55f),
       contentDescription = "",
     )
   }

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/TosSheet.kt

@@ -25,7 +25,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.google.ai.edge.gallery.ui.common.MarkdownText
 
@@ -35,7 +34,7 @@ fun MessageBodyText(message: ChatMessageText) {
   if (message.side == ChatSide.USER) {
     Text(
       message.content,
-      style = MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Medium),
+      style = MaterialTheme.typography.bodyLarge,
       color = Color.White,
       modifier = Modifier.padding(12.dp),
     )
@@ -45,7 +44,7 @@ fun MessageBodyText(message: ChatMessageText) {
     } else {
       Text(
         message.content,
-        style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Medium),
+        style = MaterialTheme.typography.bodyMedium,
         color = MaterialTheme.colorScheme.onSurface,
         modifier = Modifier.padding(12.dp),
       )

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/chat/MessageBodyText.kt

@@ -528,7 +528,7 @@ fun MessageInputText(
               Icons.AutoMirrored.Rounded.Send,
               contentDescription = "",
               modifier = Modifier.offset(x = 2.dp),
-              tint = MaterialTheme.colorScheme.primary,
+              tint = MaterialTheme.colorScheme.onSurface,
             )
           }
         }

Android/src/app/src/main/java/com/google/ai/edge/gallery/ui/common/chat/MessageInputText.kt

@@ -219,7 +219,7 @@ fun ModelDownloadingAnimation(
         }
         Text(
           sizeLabel,
-          color = MaterialTheme.colorScheme.secondary,
+          color = MaterialTheme.colorScheme.onSurfaceVariant,
           style = MaterialTheme.typography.labelMedium,
           textAlign = TextAlign.Center,
           overflow = TextOverflow.Visible,