PM-12321 Update typography for V3 design (#3946)

This commit is contained in:
Dave Severns 2024-09-20 11:34:30 -04:00 committed by GitHub
parent d0c2bb5b7e
commit 39cc24c13a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 98 additions and 76 deletions

View file

@ -60,7 +60,6 @@ import com.x8bit.bitwarden.ui.platform.components.text.BitwardenClickableText
import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenSwitch import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenSwitch
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.theme.nonMaterialTypography
import com.x8bit.bitwarden.ui.platform.util.isPortrait import com.x8bit.bitwarden.ui.platform.util.isPortrait
/** /**
@ -302,7 +301,7 @@ private fun CompleteRegistrationContent(
id = R.string.learn_about_other_ways_to_prevent_account_lockout, id = R.string.learn_about_other_ways_to_prevent_account_lockout,
), ),
onClick = handler.onLearnToPreventLockout, onClick = handler.onLearnToPreventLockout,
style = nonMaterialTypography.labelMediumProminent, style = MaterialTheme.typography.labelMedium,
modifier = Modifier.standardHorizontalMargin(), modifier = Modifier.standardHorizontalMargin(),
) )
} }

View file

@ -1,22 +1,32 @@
package com.x8bit.bitwarden.ui.platform.theme package com.x8bit.bitwarden.ui.platform.theme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.material3.Typography import androidx.compose.material3.Typography
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.PlatformTextStyle import androidx.compose.ui.text.PlatformTextStyle
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineHeightStyle import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
val Typography: Typography = Typography( val Typography: Typography = Typography(
displayLarge = TextStyle( displayLarge = TextStyle(
fontSize = 57.sp, fontSize = 56.sp,
lineHeight = 64.sp, lineHeight = 64.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = (-0.25).sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -24,11 +34,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
displayMedium = TextStyle( displayMedium = TextStyle(
fontSize = 45.sp, fontSize = 44.sp,
lineHeight = 52.sp, lineHeight = 52.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = (0).sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -38,8 +48,8 @@ val Typography: Typography = Typography(
displaySmall = TextStyle( displaySmall = TextStyle(
fontSize = 36.sp, fontSize = 36.sp,
lineHeight = 44.sp, lineHeight = 44.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = 0.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
@ -50,8 +60,8 @@ val Typography: Typography = Typography(
headlineLarge = TextStyle( headlineLarge = TextStyle(
fontSize = 32.sp, fontSize = 32.sp,
lineHeight = 40.sp, lineHeight = 40.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = 0.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
@ -62,8 +72,8 @@ val Typography: Typography = Typography(
headlineMedium = TextStyle( headlineMedium = TextStyle(
fontSize = 28.sp, fontSize = 28.sp,
lineHeight = 36.sp, lineHeight = 36.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = 0.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
@ -72,10 +82,10 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
headlineSmall = TextStyle( headlineSmall = TextStyle(
fontSize = 24.sp, fontSize = 18.sp,
lineHeight = 32.sp, lineHeight = 22.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = 0.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
@ -84,10 +94,10 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
titleLarge = TextStyle( titleLarge = TextStyle(
fontSize = 22.sp, fontSize = 19.sp,
lineHeight = 28.sp, lineHeight = 28.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W600,
letterSpacing = 0.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
@ -97,10 +107,10 @@ val Typography: Typography = Typography(
), ),
titleMedium = TextStyle( titleMedium = TextStyle(
fontSize = 16.sp, fontSize = 16.sp,
lineHeight = 24.sp, lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W500, fontWeight = FontWeight.W600,
letterSpacing = 0.15.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -109,10 +119,10 @@ val Typography: Typography = Typography(
), ),
titleSmall = TextStyle( titleSmall = TextStyle(
fontSize = 14.sp, fontSize = 14.sp,
lineHeight = 20.sp, lineHeight = 18.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)), fontFamily = FontFamily(Font(R.font.dm_sans_medium)),
fontWeight = FontWeight.W500, fontWeight = FontWeight.W600,
letterSpacing = 0.1.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -120,11 +130,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
bodyLarge = TextStyle( bodyLarge = TextStyle(
fontSize = 16.sp, fontSize = 15.sp,
lineHeight = 24.sp, lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W400,
letterSpacing = 0.5.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -132,11 +142,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
bodyMedium = TextStyle( bodyMedium = TextStyle(
fontSize = 14.sp, fontSize = 13.sp,
lineHeight = 20.sp, lineHeight = 18.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W400,
letterSpacing = 0.25.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -146,9 +156,9 @@ val Typography: Typography = Typography(
bodySmall = TextStyle( bodySmall = TextStyle(
fontSize = 12.sp, fontSize = 12.sp,
lineHeight = 16.sp, lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400, fontWeight = FontWeight.W400,
letterSpacing = 0.4.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -158,9 +168,9 @@ val Typography: Typography = Typography(
labelLarge = TextStyle( labelLarge = TextStyle(
fontSize = 14.sp, fontSize = 14.sp,
lineHeight = 20.sp, lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W500, fontWeight = FontWeight.W600,
letterSpacing = 0.1.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -170,9 +180,9 @@ val Typography: Typography = Typography(
labelMedium = TextStyle( labelMedium = TextStyle(
fontSize = 12.sp, fontSize = 12.sp,
lineHeight = 16.sp, lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)), fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W500, fontWeight = FontWeight.W600,
letterSpacing = 0.5.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -180,11 +190,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
labelSmall = TextStyle( labelSmall = TextStyle(
fontSize = 11.sp, fontSize = 12.sp,
lineHeight = 16.sp, lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)), fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W500, fontWeight = FontWeight.W400,
letterSpacing = 0.5.sp, letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None, trim = LineHeightStyle.Trim.None,
@ -218,23 +228,11 @@ val nonMaterialTypography: NonMaterialTypography = NonMaterialTypography(
), ),
platformStyle = PlatformTextStyle(includeFontPadding = false), platformStyle = PlatformTextStyle(includeFontPadding = false),
), ),
bodySmallProminent = TextStyle( eyebrowMedium = TextStyle(
fontSize = 12.sp, fontSize = 12.sp,
lineHeight = 16.sp, lineHeight = 18.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)), fontFamily = FontFamily(Font(R.font.dm_sans_bold)),
fontWeight = FontWeight.W700, fontWeight = FontWeight.W700,
letterSpacing = 0.4.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
),
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
labelMediumProminent = TextStyle(
fontSize = 12.sp,
lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W600,
letterSpacing = 0.5.sp, letterSpacing = 0.5.sp,
lineHeightStyle = LineHeightStyle( lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center, alignment = LineHeightStyle.Alignment.Center,
@ -248,8 +246,37 @@ val nonMaterialTypography: NonMaterialTypography = NonMaterialTypography(
* Models typography that live outside of the Material Theme spec. * Models typography that live outside of the Material Theme spec.
*/ */
data class NonMaterialTypography( data class NonMaterialTypography(
val bodySmallProminent: TextStyle,
val labelMediumProminent: TextStyle,
val sensitiveInfoSmall: TextStyle, val sensitiveInfoSmall: TextStyle,
val sensitiveInfoMedium: TextStyle, val sensitiveInfoMedium: TextStyle,
val eyebrowMedium: TextStyle,
) )
@Preview(showBackground = true)
@Composable
private fun Typography_preview() {
Column(
modifier = Modifier
.padding(8.dp)
.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.spacedBy(4.dp),
) {
Text(text = "Display large", style = Typography.displayLarge)
Text(text = "Display medium", style = Typography.displayMedium)
Text(text = "Display small", style = Typography.displaySmall)
Text(text = "Headline large", style = Typography.headlineLarge)
Text(text = "Headline medium", style = Typography.headlineMedium)
Text(text = "Headline small", style = Typography.headlineSmall)
Text(text = "Title large", style = Typography.titleLarge)
Text(text = "Title medium", style = Typography.titleMedium)
Text(text = "Title small", style = Typography.titleSmall)
Text(text = "Body large", style = Typography.bodyLarge)
Text(text = "Body medium", style = Typography.bodyMedium)
Text(text = "Body small", style = Typography.bodySmall)
Text(text = "Label large", style = Typography.labelLarge)
Text(text = "Label medium", style = Typography.labelMedium)
Text(text = "Label small", style = Typography.labelSmall)
Text(text = "Sensitive info small", style = nonMaterialTypography.sensitiveInfoSmall)
Text(text = "Sensitive info medium", style = nonMaterialTypography.sensitiveInfoMedium)
Text(text = "Eyebrow medium", style = nonMaterialTypography.eyebrowMedium)
}
}

View file

@ -46,7 +46,6 @@ import com.x8bit.bitwarden.ui.platform.components.text.BitwardenPolicyWarningTex
import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenWideSwitch import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenWideSwitch
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.manager.permissions.PermissionsManager import com.x8bit.bitwarden.ui.platform.manager.permissions.PermissionsManager
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialTypography
import com.x8bit.bitwarden.ui.tools.feature.send.addsend.handlers.AddSendHandlers import com.x8bit.bitwarden.ui.tools.feature.send.addsend.handlers.AddSendHandlers
import kotlinx.collections.immutable.persistentListOf import kotlinx.collections.immutable.persistentListOf
@ -472,7 +471,7 @@ private fun AddSendOptions(
Spacer(modifier = Modifier.width(4.dp)) Spacer(modifier = Modifier.width(4.dp))
Text( Text(
text = it.toString(), text = it.toString(),
style = LocalNonMaterialTypography.current.bodySmallProminent, style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = MaterialTheme.colorScheme.onSurfaceVariant,
) )
} }

View file

@ -27,7 +27,6 @@ import com.x8bit.bitwarden.ui.platform.components.icon.BitwardenIconButtonWithRe
import com.x8bit.bitwarden.ui.platform.components.indicator.BitwardenCircularCountdownIndicator import com.x8bit.bitwarden.ui.platform.components.indicator.BitwardenCircularCountdownIndicator
import com.x8bit.bitwarden.ui.platform.components.model.IconResource import com.x8bit.bitwarden.ui.platform.components.model.IconResource
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialTypography
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCommonItemTypeHandlers import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCommonItemTypeHandlers
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultLoginItemTypeHandlers import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultLoginItemTypeHandlers
import com.x8bit.bitwarden.ui.vault.feature.item.model.TotpCodeItemData import com.x8bit.bitwarden.ui.vault.feature.item.model.TotpCodeItemData
@ -351,7 +350,7 @@ private fun PasswordHistoryCount(
) { ) {
Text( Text(
text = "${stringResource(id = R.string.password_history)}: ", text = "${stringResource(id = R.string.password_history)}: ",
style = LocalNonMaterialTypography.current.labelMediumProminent, style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = MaterialTheme.colorScheme.onSurfaceVariant,
) )
Text( Text(

View file

@ -19,7 +19,6 @@ import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialTypography
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCommonItemTypeHandlers import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCommonItemTypeHandlers
/** /**
@ -140,7 +139,7 @@ fun VaultItemSecureNoteContent(
) { ) {
Text( Text(
text = "${stringResource(id = R.string.date_updated)}: ", text = "${stringResource(id = R.string.date_updated)}: ",
style = LocalNonMaterialTypography.current.labelMediumProminent, style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = MaterialTheme.colorScheme.onSurfaceVariant,
) )
Text( Text(

View file

@ -6,7 +6,6 @@ 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
import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.semantics
import com.x8bit.bitwarden.ui.platform.theme.LocalNonMaterialTypography
/** /**
* Update Text UI common for all item types. * Update Text UI common for all item types.
@ -23,7 +22,7 @@ fun VaultItemUpdateText(
) { ) {
Text( Text(
text = header, text = header,
style = LocalNonMaterialTypography.current.labelMediumProminent, style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = MaterialTheme.colorScheme.onSurfaceVariant,
) )
Text( Text(

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.