[CredManUi] Bottom sheet color change

Replace our surface1 with materialColorSurfaceBright and surface3 with materialColorSurfaceContainerHigh.

Bug: 271512532
Test: manual (see screenshots in bug)
Change-Id: Idc26b4535cf8f4891ce14fecfb564a34e74338cd
This commit is contained in:
Helen Qin
2023-03-04 03:21:34 +00:00
parent b508865fad
commit e7d98867f4
8 changed files with 11 additions and 101 deletions

View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.CredentialSelector" parent="@android:style/ThemeOverlay.Material">
<style name="Theme.CredentialSelector" parent="@*android:style/ThemeOverlay.DeviceDefault.Accent.DayNight">
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>

View File

@@ -18,7 +18,6 @@ package com.android.credentialmanager.common.ui
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
@@ -27,6 +26,7 @@ import com.android.credentialmanager.common.material.ModalBottomSheetLayout
import com.android.credentialmanager.common.material.ModalBottomSheetValue
import com.android.credentialmanager.common.material.rememberModalBottomSheetState
import com.android.credentialmanager.ui.theme.EntryShape
import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme
/** Draws a modal bottom sheet with the same styles and effects shared by various flows. */
@Composable
@@ -39,9 +39,7 @@ fun ModalBottomSheet(
skipHalfExpanded = true
)
ModalBottomSheetLayout(
sheetBackgroundColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
ElevationTokens.Level1
),
sheetBackgroundColor = LocalAndroidColorScheme.current.colorSurfaceBright,
modifier = Modifier.background(Color.Transparent),
sheetState = state,
sheetContent = sheetContent,

View File

@@ -25,13 +25,13 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.android.credentialmanager.ui.theme.Shapes
import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme
/**
* Container card for the whole sheet.
@@ -50,9 +50,7 @@ fun SheetContainerCard(
modifier = modifier.fillMaxWidth().wrapContentHeight(),
border = null,
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
ElevationTokens.Level1
),
containerColor = LocalAndroidColorScheme.current.colorSurfaceBright,
),
) {
if (topAppBar != null) {

View File

@@ -1,30 +0,0 @@
/*
* Copyright (C) 2023 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.common.ui
import androidx.compose.material3.ColorScheme
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.compositeOver
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import kotlin.math.ln
fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color {
if (elevation == 0.dp) return surface
val alpha = ((4.5f * ln(elevation.value + 1)) + 2f) / 100f
return surfaceTint.copy(alpha = alpha).compositeOver(surface)
}

View File

@@ -1,29 +0,0 @@
/*
* Copyright (C) 2023 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.common.ui
import androidx.compose.ui.unit.dp
/** Copied from androidx.compose.material3.tokens. */
internal object ElevationTokens {
val Level0 = 0.0.dp
val Level1 = 1.0.dp
val Level2 = 3.0.dp
val Level3 = 6.0.dp
val Level4 = 8.0.dp
val Level5 = 12.0.dp
}

View File

@@ -53,6 +53,7 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import com.android.credentialmanager.R
import com.android.credentialmanager.ui.theme.EntryShape
import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme
import com.android.credentialmanager.ui.theme.Shapes
@Composable
@@ -198,9 +199,7 @@ fun Entry(
},
border = null,
colors = SuggestionChipDefaults.suggestionChipColors(
containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
ElevationTokens.Level3
),
containerColor = LocalAndroidColorScheme.current.colorSurfaceContainerHigh,
// TODO: remove?
labelColor = MaterialTheme.colorScheme.onSurfaceVariant,
iconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,

View File

@@ -16,11 +16,11 @@
package com.android.credentialmanager.common.ui
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.android.compose.SystemUiController
import com.android.credentialmanager.common.material.ModalBottomSheetDefaults
import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme
@Composable
fun setTransparentSystemBarsColor(sysUiController: SystemUiController) {
@@ -34,9 +34,7 @@ fun setBottomSheetSystemBarsColor(sysUiController: SystemUiController) {
darkIcons = false
)
sysUiController.setNavigationBarColor(
color = MaterialTheme.colorScheme.surfaceColorAtElevation(
ElevationTokens.Level1
),
color = LocalAndroidColorScheme.current.colorSurfaceBright,
darkIcons = false
)
}

View File

@@ -40,32 +40,8 @@ val LocalAndroidColorScheme =
* most of the colors in this class will be removed in favor of their M3 counterpart.
*/
class AndroidColorScheme internal constructor(context: Context) {
val colorPrimary = getColor(context, R.attr.colorPrimary)
val colorPrimaryDark = getColor(context, R.attr.colorPrimaryDark)
val colorAccent = getColor(context, R.attr.colorAccent)
val colorAccentPrimary = getColor(context, R.attr.colorAccentPrimary)
val colorAccentSecondary = getColor(context, R.attr.colorAccentSecondary)
val colorAccentTertiary = getColor(context, R.attr.colorAccentTertiary)
val colorAccentPrimaryVariant = getColor(context, R.attr.colorAccentPrimaryVariant)
val colorAccentSecondaryVariant = getColor(context, R.attr.colorAccentSecondaryVariant)
val colorAccentTertiaryVariant = getColor(context, R.attr.colorAccentTertiaryVariant)
val colorSurface = getColor(context, R.attr.colorSurface)
val colorSurfaceHighlight = getColor(context, R.attr.colorSurfaceHighlight)
val colorSurfaceVariant = getColor(context, R.attr.colorSurfaceVariant)
val colorSurfaceHeader = getColor(context, R.attr.colorSurfaceHeader)
val colorError = getColor(context, R.attr.colorError)
val colorBackground = getColor(context, R.attr.colorBackground)
val colorBackgroundFloating = getColor(context, R.attr.colorBackgroundFloating)
val panelColorBackground = getColor(context, R.attr.panelColorBackground)
val textColorPrimary = getColor(context, R.attr.textColorPrimary)
val textColorSecondary = getColor(context, R.attr.textColorSecondary)
val textColorTertiary = getColor(context, R.attr.textColorTertiary)
val textColorPrimaryInverse = getColor(context, R.attr.textColorPrimaryInverse)
val textColorSecondaryInverse = getColor(context, R.attr.textColorSecondaryInverse)
val textColorTertiaryInverse = getColor(context, R.attr.textColorTertiaryInverse)
val textColorOnAccent = getColor(context, R.attr.textColorOnAccent)
val colorForeground = getColor(context, R.attr.colorForeground)
val colorForegroundInverse = getColor(context, R.attr.colorForegroundInverse)
val colorSurfaceBright = getColor(context, R.attr.materialColorSurfaceBright)
val colorSurfaceContainerHigh = getColor(context, R.attr.materialColorSurfaceContainerHigh)
companion object {
fun getColor(context: Context, attr: Int): Color {