Merge "Update some UX style and apply dynamic color"

packages/CredentialManager/src/com/android/credentialmanager/common/material/ModalBottomSheet.kt

@@ -62,6 +62,7 @@ import com.android.credentialmanager.R
 import com.android.credentialmanager.common.material.ModalBottomSheetValue.Expanded
 import com.android.credentialmanager.common.material.ModalBottomSheetValue.HalfExpanded
 import com.android.credentialmanager.common.material.ModalBottomSheetValue.Hidden
+import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme
 import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.launch
 import kotlin.math.max
@@ -318,7 +319,7 @@ fun ModalBottomSheetLayout(
         rememberModalBottomSheetState(Hidden),
     sheetShape: Shape = MaterialTheme.shapes.large,
     sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
-    sheetBackgroundColor: Color = MaterialTheme.colorScheme.surface,
+    sheetBackgroundColor: Color = ModalBottomSheetDefaults.scrimColor,
     sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
     scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
     content: @Composable () -> Unit
@@ -476,5 +477,5 @@ object ModalBottomSheetDefaults {
      */
     val scrimColor: Color
         @Composable
-        get() = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.32f)
+        get() = LocalAndroidColorScheme.current.colorSurfaceHighlight
 }

packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt

@@ -1,3 +1,5 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package com.android.credentialmanager.createflow
 
 import android.credentials.Credential.TYPE_PASSWORD_CREDENTIAL
@@ -19,6 +21,7 @@ import androidx.compose.material3.SuggestionChip
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.outlined.NewReleases
@@ -40,6 +43,7 @@ import com.android.credentialmanager.common.material.ModalBottomSheetValue
 import com.android.credentialmanager.common.material.rememberModalBottomSheetState
 import com.android.credentialmanager.common.ui.CancelButton
 import com.android.credentialmanager.common.ui.ConfirmButton
+import com.android.credentialmanager.ui.theme.EntryShape
 import com.android.credentialmanager.jetpack.developer.PublicKeyCredential.Companion.TYPE_PUBLIC_KEY_CREDENTIAL
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -91,7 +95,7 @@ fun CreatePasskeyScreen(
       }
     },
     scrimColor = MaterialTheme.colorScheme.scrim,
-    sheetShape = MaterialTheme.shapes.medium,
+    sheetShape = EntryShape.TopRoundedCorner,
   ) {}
   LaunchedEffect(state.currentValue) {
     if (state.currentValue == ModalBottomSheetValue.Hidden) {
@@ -100,6 +104,7 @@ fun CreatePasskeyScreen(
   }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ConfirmationCard(
   onConfirm: () -> Unit,
@@ -179,7 +184,7 @@ fun ProviderSelectionCard(
         color = Color.Transparent
       )
       Card(
-        shape = MaterialTheme.shapes.large,
+        shape = EntryShape.FullRoundedCorner,
         modifier = Modifier
           .padding(horizontal = 24.dp)
           .align(alignment = Alignment.CenterHorizontally),
@@ -243,14 +248,16 @@ fun MoreOptionsSelectionCard(
               Icons.Filled.ArrowBack,
               stringResource(R.string.accessibility_back_arrow_button))
           }
-        }
+        },
+        colors = TopAppBarDefaults.smallTopAppBarColors
+          (containerColor = Color.Transparent),
       )
       Divider(
          thickness = 8.dp,
          color = Color.Transparent
       )
       Card(
-        shape = MaterialTheme.shapes.large,
+        shape = EntryShape.FullRoundedCorner,
         modifier = Modifier
           .padding(horizontal = 24.dp)
           .align(alignment = Alignment.CenterHorizontally)
@@ -362,7 +369,7 @@ fun ProviderRow(providerInfo: ProviderInfo, onProviderSelected: (String) -> Unit
             // TODO: add description.
             contentDescription = "")
     },
-    shape = MaterialTheme.shapes.large,
+    shape = EntryShape.FullRoundedCorner,
     label = {
       Text(
         text = providerInfo.displayName,
@@ -391,7 +398,8 @@ fun CreationSelectionCard(
         bitmap = providerInfo.icon.toBitmap().asImageBitmap(),
         contentDescription = null,
         tint = Color.Unspecified,
-        modifier = Modifier.align(alignment = Alignment.CenterHorizontally).padding(all = 24.dp)
+        modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
+          .padding(all = 24.dp).size(32.dp)
       )
       Text(
         text = when (requestDisplayInfo.type) {
@@ -425,7 +433,7 @@ fun CreationSelectionCard(
         )
       }
       Card(
-        shape = MaterialTheme.shapes.large,
+        shape = EntryShape.FullRoundedCorner,
         modifier = Modifier
           .padding(horizontal = 24.dp)
           .align(alignment = Alignment.CenterHorizontally),
@@ -499,7 +507,7 @@ fun PrimaryCreateOptionRow(
         bitmap = createOptionInfo.credentialTypeIcon.toBitmap().asImageBitmap(),
         contentDescription = null)
     },
-    shape = MaterialTheme.shapes.large,
+    shape = EntryShape.FullRoundedCorner,
     label = {
       Column() {
         Text(
@@ -532,7 +540,7 @@ fun MoreOptionsInfoRow(
                 bitmap = providerInfo.icon.toBitmap().asImageBitmap(),
                 contentDescription = null)
         },
-        shape = MaterialTheme.shapes.large,
+        shape = EntryShape.FullRoundedCorner,
         label = {
           Column() {
               Text(
@@ -603,7 +611,7 @@ fun MoreOptionsDisabledProvidersRow(
         modifier = Modifier.padding(start = 16.dp)
       )
     },
-    shape = MaterialTheme.shapes.large,
+    shape = EntryShape.FullRoundedCorner,
     label = {
       Column() {
         Text(
@@ -637,7 +645,7 @@ fun RemoteEntryRow(
         modifier = Modifier.padding(start = 18.dp)
       )
     },
-    shape = MaterialTheme.shapes.large,
+    shape = EntryShape.FullRoundedCorner,
     label = {
       Column() {
         Text(

packages/CredentialManager/src/com/android/credentialmanager/ui/theme/AndroidColorScheme.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.android.credentialmanager.ui.theme
+
+import android.annotation.ColorInt
+import android.content.Context
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import com.android.internal.R
+
+/** CompositionLocal used to pass [AndroidColorScheme] down the tree. */
+val LocalAndroidColorScheme =
+    staticCompositionLocalOf<AndroidColorScheme> {
+        throw IllegalStateException(
+            "No AndroidColorScheme configured. Make sure to use LocalAndroidColorScheme in a " +
+                    "Composable surrounded by a CredentialSelectorTheme {}."
+        )
+    }
+
+/**
+ * The Android color scheme.
+ *
+ * Important: Use M3 colors from MaterialTheme.colorScheme whenever possible instead. In the future,
+ * most of the colors in this class will be removed in favor of their M3 counterpart.
+ */
+class AndroidColorScheme internal constructor(context: Context) {
+
+    val colorSurfaceHighlight = getColor(context, R.attr.colorSurfaceHighlight)
+
+    private fun getColor(context: Context, attr: Int): Color {
+        val ta = context.obtainStyledAttributes(intArrayOf(attr))
+        @ColorInt val color = ta.getColor(0, 0)
+        ta.recycle()
+        return Color(color)
+    }
+}

packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Shape.kt

@@ -9,3 +9,8 @@ val Shapes = Shapes(
   medium = RoundedCornerShape(20.dp),
   large = RoundedCornerShape(0.dp)
 )
+
+object EntryShape {
+  val TopRoundedCorner = RoundedCornerShape(28.dp, 28.dp, 0.dp, 0.dp)
+  val FullRoundedCorner = RoundedCornerShape(28.dp, 28.dp, 28.dp, 28.dp)
+}

packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Theme.kt

@@ -2,37 +2,37 @@ package com.android.credentialmanager.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.lightColorScheme
-import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
-
-private val AppDarkColorScheme = darkColorScheme(
-  primary = Purple200,
-  secondary = Purple700,
-  tertiary = Teal200
-)
-
-private val AppLightColorScheme = lightColorScheme(
-  primary = Purple500,
-  secondary = Purple700,
-  tertiary = Teal200
-)
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.platform.LocalContext
 
 @Composable
 fun CredentialSelectorTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
   content: @Composable () -> Unit
 ) {
-  val AppColorScheme = if (darkTheme) {
-    AppDarkColorScheme
-  } else {
-    AppLightColorScheme
-  }
+  val context = LocalContext.current
+
+  val colorScheme =
+    if (darkTheme) {
+      dynamicDarkColorScheme(context)
+    } else {
+      dynamicLightColorScheme(context)
+    }
+  val androidColorScheme = AndroidColorScheme(context)
+  val typography = Typography
 
   MaterialTheme(
-    colorScheme = AppColorScheme,
-    typography = Typography,
-    shapes = Shapes,
-    content = content
-  )
+    colorScheme,
+    typography = typography,
+    shapes = Shapes
+  ) {
+    CompositionLocalProvider(
+      LocalAndroidColorScheme provides androidColorScheme,
+    ) {
+      content()
+    }
+  }
 }