Add shapes to the BitwardenTheme (#4052)

This commit is contained in:
David Perez 2024-10-08 13:35:59 -05:00 committed by GitHub
parent cda4e47414
commit ccb52ae6c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 76 additions and 21 deletions

View file

@ -58,6 +58,7 @@ fun BitwardenOverflowActionItem(
modifier = Modifier.testTag(tag = "HeaderBarOptionsButton"), modifier = Modifier.testTag(tag = "HeaderBarOptionsButton"),
) )
DropdownMenu( DropdownMenu(
shape = BitwardenTheme.shapes.menu,
expanded = isOverflowMenuVisible, expanded = isOverflowMenuVisible,
onDismissRequest = { isOverflowMenuVisible = false }, onDismissRequest = { isOverflowMenuVisible = false },
offset = DpOffset(x = (-12).dp, y = 0.dp), offset = DpOffset(x = (-12).dp, y = 0.dp),

View file

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -52,7 +51,7 @@ fun BitwardenActionCard(
) { ) {
Card( Card(
modifier = modifier, modifier = modifier,
shape = RoundedCornerShape(12.dp), shape = BitwardenTheme.shapes.actionCard,
colors = bitwardenCardColors(), colors = bitwardenCardColors(),
elevation = CardDefaults.elevatedCardElevation(), elevation = CardDefaults.elevatedCardElevation(),
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border), border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
@ -41,7 +40,7 @@ fun BitwardenActionCardSmall(
) { ) {
Card( Card(
onClick = onCardClicked, onClick = onCardClicked,
shape = RoundedCornerShape(size = 12.dp), shape = BitwardenTheme.shapes.actionCard,
modifier = modifier, modifier = modifier,
colors = bitwardenCardColors(), colors = bitwardenCardColors(),
elevation = CardDefaults.elevatedCardElevation(), elevation = CardDefaults.elevatedCardElevation(),

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.card
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
@ -30,7 +29,7 @@ fun BitwardenInfoCalloutCard(
modifier = modifier modifier = modifier
.background( .background(
color = BitwardenTheme.colorScheme.background.tertiary, color = BitwardenTheme.colorScheme.background.tertiary,
shape = RoundedCornerShape(size = 8.dp), shape = BitwardenTheme.shapes.infoCallout,
) )
.padding(all = 16.dp), .padding(all = 16.dp),
) )

View file

@ -59,6 +59,7 @@ fun BitwardenBasicDialog(
modifier = Modifier.testTag("AlertContentText"), modifier = Modifier.testTag("AlertContentText"),
) )
}, },
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary, containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary, iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary, titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -105,6 +105,7 @@ fun BitwardenDateSelectButton(
initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(), initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(),
) )
DatePickerDialog( DatePickerDialog(
shape = BitwardenTheme.shapes.dialog,
colors = bitwardenDatePickerColors(), colors = bitwardenDatePickerColors(),
onDismissRequest = { shouldShowDialog = false }, onDismissRequest = { shouldShowDialog = false },
confirmButton = { confirmButton = {

View file

@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -49,7 +48,7 @@ fun BitwardenLoadingDialog(
), ),
) { ) {
Card( Card(
shape = RoundedCornerShape(28.dp), shape = BitwardenTheme.shapes.dialog,
colors = CardDefaults.cardColors( colors = CardDefaults.cardColors(
containerColor = BitwardenTheme.colorScheme.background.primary, containerColor = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary, contentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -83,6 +83,7 @@ fun BitwardenMasterPasswordDialog(
) )
} }
}, },
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary, containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary, iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary, titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -69,6 +69,7 @@ fun BitwardenPinDialog(
autoFocus = true, autoFocus = true,
) )
}, },
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary, containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary, iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary, titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -62,7 +61,7 @@ fun BitwardenSelectionDialog(
// This background is necessary for the dialog to not be transparent. // This background is necessary for the dialog to not be transparent.
.background( .background(
color = BitwardenTheme.colorScheme.background.primary, color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp), shape = BitwardenTheme.shapes.dialog,
), ),
horizontalAlignment = Alignment.End, horizontalAlignment = Alignment.End,
) { ) {

View file

@ -85,6 +85,7 @@ fun BitwardenTextEntryDialog(
}, },
) )
}, },
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary, containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary, iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary, titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -144,7 +143,7 @@ private fun TimePickerDialog(
properties = DialogProperties(usePlatformDefaultWidth = false), properties = DialogProperties(usePlatformDefaultWidth = false),
) { ) {
Surface( Surface(
shape = RoundedCornerShape(28.dp), shape = BitwardenTheme.shapes.dialog,
color = BitwardenTheme.colorScheme.background.primary, color = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary, contentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier

View file

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.layout.requiredWidthIn import androidx.compose.foundation.layout.requiredWidthIn
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -83,7 +82,7 @@ fun BitwardenTwoButtonDialog(
// This background is necessary for the dialog to not be transparent. // This background is necessary for the dialog to not be transparent.
.background( .background(
color = BitwardenTheme.colorScheme.background.primary, color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp), shape = BitwardenTheme.shapes.dialog,
), ),
horizontalAlignment = Alignment.End, horizontalAlignment = Alignment.End,
) { ) {

View file

@ -24,6 +24,7 @@ fun BitwardenSnackbarHost(
) { ) {
Snackbar( Snackbar(
snackbarData = it, snackbarData = it,
shape = BitwardenTheme.shapes.snackbar,
containerColor = BitwardenTheme.colorScheme.background.alert, containerColor = BitwardenTheme.colorScheme.background.alert,
contentColor = BitwardenTheme.colorScheme.text.reversed, contentColor = BitwardenTheme.colorScheme.text.reversed,
actionColor = BitwardenTheme.colorScheme.background.alert, actionColor = BitwardenTheme.colorScheme.background.alert,

View file

@ -24,6 +24,8 @@ import com.x8bit.bitwarden.ui.platform.theme.color.darkBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.dynamicBitwardenColorScheme import com.x8bit.bitwarden.ui.platform.theme.color.dynamicBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.lightBitwardenColorScheme import com.x8bit.bitwarden.ui.platform.theme.color.lightBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.toMaterialColorScheme import com.x8bit.bitwarden.ui.platform.theme.color.toMaterialColorScheme
import com.x8bit.bitwarden.ui.platform.theme.shape.BitwardenShapes
import com.x8bit.bitwarden.ui.platform.theme.shape.bitwardenShapes
import com.x8bit.bitwarden.ui.platform.theme.type.BitwardenTypography import com.x8bit.bitwarden.ui.platform.theme.type.BitwardenTypography
import com.x8bit.bitwarden.ui.platform.theme.type.bitwardenTypography import com.x8bit.bitwarden.ui.platform.theme.type.bitwardenTypography
import com.x8bit.bitwarden.ui.platform.theme.type.toMaterialTypography import com.x8bit.bitwarden.ui.platform.theme.type.toMaterialTypography
@ -40,6 +42,14 @@ object BitwardenTheme {
@ReadOnlyComposable @ReadOnlyComposable
get() = LocalBitwardenColorScheme.current get() = LocalBitwardenColorScheme.current
/**
* Retrieves the current [BitwardenShapes].
*/
val shapes: BitwardenShapes
@Composable
@ReadOnlyComposable
get() = LocalBitwardenShapes.current
/** /**
* Retrieves the current [BitwardenTypography]. * Retrieves the current [BitwardenTypography].
*/ */
@ -107,6 +117,7 @@ fun BitwardenTheme(
CompositionLocalProvider( CompositionLocalProvider(
LocalBitwardenColorScheme provides bitwardenColorScheme, LocalBitwardenColorScheme provides bitwardenColorScheme,
LocalBitwardenShapes provides bitwardenShapes,
LocalBitwardenTypography provides bitwardenTypography, LocalBitwardenTypography provides bitwardenTypography,
) { ) {
MaterialTheme( MaterialTheme(
@ -119,14 +130,20 @@ fun BitwardenTheme(
} }
} }
/**
* Provides access to the Bitwarden typography throughout the app.
*/
val LocalBitwardenTypography: ProvidableCompositionLocal<BitwardenTypography> =
compositionLocalOf { bitwardenTypography }
/** /**
* Provides access to the Bitwarden colors throughout the app. * Provides access to the Bitwarden colors throughout the app.
*/ */
val LocalBitwardenColorScheme: ProvidableCompositionLocal<BitwardenColorScheme> = val LocalBitwardenColorScheme: ProvidableCompositionLocal<BitwardenColorScheme> =
compositionLocalOf { lightBitwardenColorScheme } compositionLocalOf { lightBitwardenColorScheme }
/**
* Provides access to the Bitwarden shapes throughout the app.
*/
val LocalBitwardenShapes: ProvidableCompositionLocal<BitwardenShapes> =
compositionLocalOf { bitwardenShapes }
/**
* Provides access to the Bitwarden typography throughout the app.
*/
val LocalBitwardenTypography: ProvidableCompositionLocal<BitwardenTypography> =
compositionLocalOf { bitwardenTypography }

View file

@ -0,0 +1,20 @@
package com.x8bit.bitwarden.ui.platform.theme.shape
import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.runtime.Immutable
/**
* Defines all the shapes for the app.
*/
@Immutable
data class BitwardenShapes(
val actionCard: CornerBasedShape,
val coachmark: CornerBasedShape,
val content: CornerBasedShape,
val contentBottom: CornerBasedShape,
val contentTop: CornerBasedShape,
val dialog: CornerBasedShape,
val infoCallout: CornerBasedShape,
val menu: CornerBasedShape,
val snackbar: CornerBasedShape,
)

View file

@ -0,0 +1,19 @@
package com.x8bit.bitwarden.ui.platform.theme.shape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.unit.dp
/**
* The default [BitwardenShapes] for the app.
*/
val bitwardenShapes: BitwardenShapes = BitwardenShapes(
actionCard = RoundedCornerShape(size = 12.dp),
coachmark = RoundedCornerShape(size = 8.dp),
content = RoundedCornerShape(size = 8.dp),
contentBottom = RoundedCornerShape(bottomStart = 8.dp, bottomEnd = 8.dp),
contentTop = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp),
dialog = RoundedCornerShape(size = 28.dp),
infoCallout = RoundedCornerShape(size = 8.dp),
menu = RoundedCornerShape(size = 4.dp),
snackbar = RoundedCornerShape(size = 8.dp),
)

View file

@ -20,7 +20,6 @@ import com.x8bit.bitwarden.ui.platform.base.util.orZeroWidthSpace
import com.x8bit.bitwarden.ui.platform.util.toFormattedPattern import com.x8bit.bitwarden.ui.platform.util.toFormattedPattern
import com.x8bit.bitwarden.ui.vault.feature.item.VaultItemState import com.x8bit.bitwarden.ui.vault.feature.item.VaultItemState
import com.x8bit.bitwarden.ui.vault.feature.item.model.TotpCodeItemData import com.x8bit.bitwarden.ui.vault.feature.item.model.TotpCodeItemData
import com.x8bit.bitwarden.ui.vault.feature.vault.VaultState
import com.x8bit.bitwarden.ui.vault.model.VaultCardBrand import com.x8bit.bitwarden.ui.vault.model.VaultCardBrand
import com.x8bit.bitwarden.ui.vault.model.VaultLinkedFieldType import com.x8bit.bitwarden.ui.vault.model.VaultLinkedFieldType
import com.x8bit.bitwarden.ui.vault.model.findVaultCardBrandWithNameOrNull import com.x8bit.bitwarden.ui.vault.model.findVaultCardBrandWithNameOrNull