mirrors/bitwarden-android
1
0
Fork 0
mirror of https://github.com/bitwarden/android.git synced 2024-10-31 07:05:35 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/completeregistration/CompleteRegistrationScreen.kt
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.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import com.x8bit.bitwarden.ui.platform.theme.nonMaterialTypography
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,
),
onClick = handler.onLearnToPreventLockout,
style = nonMaterialTypography.labelMediumProminent,
style = MaterialTheme.typography.labelMedium,
modifier = Modifier.standardHorizontalMargin(),
)
}

159
app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/Type.kt
View file

@ -1,22 +1,32 @@
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.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.PlatformTextStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
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 com.x8bit.bitwarden.R
val Typography: Typography = Typography(
displayLarge = TextStyle(
fontSize = 57.sp,
fontSize = 56.sp,
lineHeight = 64.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
letterSpacing = (-0.25).sp,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -24,11 +34,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
displayMedium = TextStyle(
fontSize = 45.sp,
fontSize = 44.sp,
lineHeight = 52.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
letterSpacing = (0).sp,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -38,8 +48,8 @@ val Typography: Typography = Typography(
displaySmall = TextStyle(
fontSize = 36.sp,
lineHeight = 44.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
@ -50,8 +60,8 @@ val Typography: Typography = Typography(
headlineLarge = TextStyle(
fontSize = 32.sp,
lineHeight = 40.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
@ -62,8 +72,8 @@ val Typography: Typography = Typography(
headlineMedium = TextStyle(
fontSize = 28.sp,
lineHeight = 36.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
@ -72,10 +82,10 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
headlineSmall = TextStyle(
fontSize = 24.sp,
lineHeight = 32.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
fontSize = 18.sp,
lineHeight = 22.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
@ -84,10 +94,10 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
titleLarge = TextStyle(
fontSize = 22.sp,
fontSize = 19.sp,
lineHeight = 28.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontWeight = FontWeight.W400,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
@ -97,10 +107,10 @@ val Typography: Typography = Typography(
),
titleMedium = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)),
fontWeight = FontWeight.W500,
letterSpacing = 0.15.sp,
lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -109,10 +119,10 @@ val Typography: Typography = Typography(
),
titleSmall = TextStyle(
fontSize = 14.sp,
lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)),
fontWeight = FontWeight.W500,
letterSpacing = 0.1.sp,
lineHeight = 18.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_medium)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -120,11 +130,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
bodyLarge = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontSize = 15.sp,
lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400,
letterSpacing = 0.5.sp,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -132,11 +142,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
bodyMedium = TextStyle(
fontSize = 14.sp,
lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontSize = 13.sp,
lineHeight = 18.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400,
letterSpacing = 0.25.sp,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -146,9 +156,9 @@ val Typography: Typography = Typography(
bodySmall = TextStyle(
fontSize = 12.sp,
lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400,
letterSpacing = 0.4.sp,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -158,9 +168,9 @@ val Typography: Typography = Typography(
labelLarge = TextStyle(
fontSize = 14.sp,
lineHeight = 20.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)),
fontWeight = FontWeight.W500,
letterSpacing = 0.1.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -170,9 +180,9 @@ val Typography: Typography = Typography(
labelMedium = TextStyle(
fontSize = 12.sp,
lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)),
fontWeight = FontWeight.W500,
letterSpacing = 0.5.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_semi_bold)),
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -180,11 +190,11 @@ val Typography: Typography = Typography(
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
labelSmall = TextStyle(
fontSize = 11.sp,
fontSize = 12.sp,
lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_medium)),
fontWeight = FontWeight.W500,
letterSpacing = 0.5.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
fontWeight = FontWeight.W400,
letterSpacing = 0.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
@ -218,23 +228,11 @@ val nonMaterialTypography: NonMaterialTypography = NonMaterialTypography(
),
platformStyle = PlatformTextStyle(includeFontPadding = false),
),
bodySmallProminent = TextStyle(
eyebrowMedium = TextStyle(
fontSize = 12.sp,
lineHeight = 16.sp,
fontFamily = FontFamily(Font(R.font.roboto_regular)),
lineHeight = 18.sp,
fontFamily = FontFamily(Font(R.font.dm_sans_bold)),
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,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
@ -248,8 +246,37 @@ val nonMaterialTypography: NonMaterialTypography = NonMaterialTypography(
* Models typography that live outside of the Material Theme spec.
*/
data class NonMaterialTypography(
val bodySmallProminent: TextStyle,
val labelMediumProminent: TextStyle,
val sensitiveInfoSmall: 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)
}
}

3
app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/send/addsend/AddSendContent.kt
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.util.rememberVectorPainter
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 kotlinx.collections.immutable.persistentListOf
@ -472,7 +471,7 @@ private fun AddSendOptions(
Spacer(modifier = Modifier.width(4.dp))
Text(
text = it.toString(),
style = LocalNonMaterialTypography.current.bodySmallProminent,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}

3
app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/item/VaultItemLoginContent.kt
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.model.IconResource
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.VaultLoginItemTypeHandlers
import com.x8bit.bitwarden.ui.vault.feature.item.model.TotpCodeItemData
@ -351,7 +350,7 @@ private fun PasswordHistoryCount(
) {
Text(
text = "${stringResource(id = R.string.password_history)}: ",
style = LocalNonMaterialTypography.current.labelMediumProminent,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
Text(

3
app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/item/VaultItemSecureNoteContent.kt
View file

@ -19,7 +19,6 @@ import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
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
/**
@ -140,7 +139,7 @@ fun VaultItemSecureNoteContent(
) {
Text(
text = "${stringResource(id = R.string.date_updated)}: ",
style = LocalNonMaterialTypography.current.labelMediumProminent,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
Text(

3
app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/item/VaultItemUpdateText.kt
View file

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

BIN
app/src/main/res/font/dm_sans_bold.ttf Normal file
View file

Binary file not shown.

BIN
app/src/main/res/font/dm_sans_medium.ttf Normal file
View file

Binary file not shown.

BIN
app/src/main/res/font/dm_sans_regular.ttf Normal file
View file

Binary file not shown.

BIN
app/src/main/res/font/dm_sans_semi_bold.ttf Normal file
View file

Binary file not shown.