From 2224708fb1075ce7d70448f19ed7fa0e146e0e62 Mon Sep 17 00:00:00 2001 From: David Perez Date: Tue, 1 Oct 2024 09:20:26 -0500 Subject: [PATCH] Add singular BitwardenTypography to manage all text-styles (#4002) --- .../ui/platform/theme/BitwardenTheme.kt | 17 + .../theme/type/BitwardenTypography.kt | 29 ++ .../ui/platform/theme/type/Typography.kt | 297 ++++++++++++++++++ 3 files changed, 343 insertions(+) create mode 100644 app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt create mode 100644 app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/Typography.kt diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/BitwardenTheme.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/BitwardenTheme.kt index 3babf3e9e..9c23ea077 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/BitwardenTheme.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/BitwardenTheme.kt @@ -28,6 +28,8 @@ import com.x8bit.bitwarden.ui.platform.theme.color.BitwardenColorScheme 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.lightBitwardenColorScheme +import com.x8bit.bitwarden.ui.platform.theme.type.BitwardenTypography +import com.x8bit.bitwarden.ui.platform.theme.type.bitwardenTypography /** * Static wrapper to make accessing the theme components easier. @@ -40,6 +42,14 @@ object BitwardenTheme { @Composable @ReadOnlyComposable get() = LocalBitwardenColorScheme.current + + /** + * Retrieves the current [BitwardenTypography]. + */ + val typography: BitwardenTypography + @Composable + @ReadOnlyComposable + get() = LocalBitwardenTypography.current } /** @@ -106,6 +116,7 @@ fun BitwardenTheme( CompositionLocalProvider( LocalBitwardenColorScheme provides bitwardenColorScheme, LocalNonMaterialColors provides nonMaterialColors, + LocalBitwardenTypography provides bitwardenTypography, LocalNonMaterialTypography provides nonMaterialTypography, ) { // Set overall theme based on color scheme and typography settings @@ -194,6 +205,12 @@ private fun lightColorScheme(context: Context): ColorScheme = @ColorRes private fun Int.toColor(context: Context): Color = Color(context.getColor(this)) +/** + * Provides access to the Bitwarden typography throughout the app. + */ +val LocalBitwardenTypography: ProvidableCompositionLocal = + compositionLocalOf { bitwardenTypography } + /** * Provides access to non material theme typography throughout the app. */ diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt new file mode 100644 index 000000000..4a9ba6981 --- /dev/null +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt @@ -0,0 +1,29 @@ +package com.x8bit.bitwarden.ui.platform.theme.type + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.text.TextStyle + +/** + * Defines all the text-styles for the app. + */ +@Immutable +data class BitwardenTypography( + val displayLarge: TextStyle, + val displayMedium: TextStyle, + val displaySmall: TextStyle, + val headlineLarge: TextStyle, + val headlineMedium: TextStyle, + val headlineSmall: TextStyle, + val titleLarge: TextStyle, + val titleMedium: TextStyle, + val titleSmall: TextStyle, + val bodyLarge: TextStyle, + val bodyMedium: TextStyle, + val bodySmall: TextStyle, + val labelLarge: TextStyle, + val labelMedium: TextStyle, + val labelSmall: TextStyle, + val sensitiveInfoSmall: TextStyle, + val sensitiveInfoMedium: TextStyle, + val eyebrowMedium: TextStyle, +) diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/Typography.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/Typography.kt new file mode 100644 index 000000000..57e263a12 --- /dev/null +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/Typography.kt @@ -0,0 +1,297 @@ +package com.x8bit.bitwarden.ui.platform.theme.type + +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 +import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme + +/** + * The default [BitwardenTypography] for the app. + */ +val bitwardenTypography: BitwardenTypography = BitwardenTypography( + displayLarge = TextStyle( + fontSize = 56.sp, + lineHeight = 64.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + displayMedium = TextStyle( + fontSize = 44.sp, + lineHeight = 52.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + displaySmall = TextStyle( + fontSize = 36.sp, + lineHeight = 44.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + headlineLarge = TextStyle( + fontSize = 32.sp, + lineHeight = 40.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + headlineMedium = TextStyle( + fontSize = 28.sp, + lineHeight = 36.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + headlineSmall = TextStyle( + 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, + trim = LineHeightStyle.Trim.None, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + titleLarge = TextStyle( + fontSize = 19.sp, + lineHeight = 28.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + titleMedium = TextStyle( + fontSize = 16.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + titleSmall = TextStyle( + fontSize = 14.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + bodyLarge = TextStyle( + fontSize = 15.sp, + lineHeight = 20.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + bodyMedium = TextStyle( + fontSize = 13.sp, + lineHeight = 18.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + bodySmall = TextStyle( + fontSize = 12.sp, + lineHeight = 16.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + labelLarge = TextStyle( + fontSize = 14.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + labelMedium = TextStyle( + fontSize = 12.sp, + lineHeight = 16.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + labelSmall = TextStyle( + fontSize = 12.sp, + lineHeight = 16.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, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + sensitiveInfoSmall = TextStyle( + fontSize = 14.sp, + lineHeight = 20.sp, + fontFamily = FontFamily(Font(R.font.roboto_regular_mono)), + fontWeight = FontWeight.W400, + letterSpacing = 0.5.sp, + lineHeightStyle = LineHeightStyle( + alignment = LineHeightStyle.Alignment.Center, + trim = LineHeightStyle.Trim.None, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + sensitiveInfoMedium = TextStyle( + fontSize = 16.sp, + lineHeight = 24.sp, + fontFamily = FontFamily(Font(R.font.roboto_regular_mono)), + fontWeight = FontWeight.W400, + letterSpacing = 0.5.sp, + lineHeightStyle = LineHeightStyle( + alignment = LineHeightStyle.Alignment.Center, + trim = LineHeightStyle.Trim.None, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), + eyebrowMedium = TextStyle( + fontSize = 12.sp, + lineHeight = 18.sp, + fontFamily = FontFamily(Font(R.font.dm_sans_bold)), + fontWeight = FontWeight.W700, + letterSpacing = 0.5.sp, + lineHeightStyle = LineHeightStyle( + alignment = LineHeightStyle.Alignment.Center, + trim = LineHeightStyle.Trim.None, + ), + platformStyle = PlatformTextStyle(includeFontPadding = false), + ), +) + +/** + * Derives a Material [Typography] from the [BitwardenTypography]. + */ +fun BitwardenTypography.toMaterialTypography(): Typography = Typography( + displayLarge = displayLarge, + displayMedium = displayMedium, + displaySmall = displaySmall, + headlineLarge = headlineLarge, + headlineMedium = headlineMedium, + headlineSmall = headlineSmall, + titleLarge = titleLarge, + titleMedium = titleMedium, + titleSmall = titleSmall, + bodyLarge = bodyLarge, + bodyMedium = bodyMedium, + bodySmall = bodySmall, + labelLarge = labelLarge, + labelMedium = labelMedium, + labelSmall = labelSmall, +) + +@Preview(showBackground = true) +@Composable +private fun BitwardenTypography_preview() { + BitwardenTheme { + Column( + modifier = Modifier + .padding(8.dp) + .verticalScroll(rememberScrollState()), + verticalArrangement = Arrangement.spacedBy(4.dp), + ) { + Text(text = "Display large", style = bitwardenTypography.displayLarge) + Text(text = "Display medium", style = bitwardenTypography.displayMedium) + Text(text = "Display small", style = bitwardenTypography.displaySmall) + Text(text = "Headline large", style = bitwardenTypography.headlineLarge) + Text(text = "Headline medium", style = bitwardenTypography.headlineMedium) + Text(text = "Headline small", style = bitwardenTypography.headlineSmall) + Text(text = "Title large", style = bitwardenTypography.titleLarge) + Text(text = "Title medium", style = bitwardenTypography.titleMedium) + Text(text = "Title small", style = bitwardenTypography.titleSmall) + Text(text = "Body large", style = bitwardenTypography.bodyLarge) + Text(text = "Body medium", style = bitwardenTypography.bodyMedium) + Text(text = "Body small", style = bitwardenTypography.bodySmall) + Text(text = "Label large", style = bitwardenTypography.labelLarge) + Text(text = "Label medium", style = bitwardenTypography.labelMedium) + Text(text = "Label small", style = bitwardenTypography.labelSmall) + Text(text = "Sensitive info small", style = bitwardenTypography.sensitiveInfoSmall) + Text(text = "Sensitive info medium", style = bitwardenTypography.sensitiveInfoMedium) + Text(text = "Eyebrow medium", style = bitwardenTypography.eyebrowMedium) + } + } +}