Skip to content

Commit

Permalink
Add singular BitwardenTypography to manage all text-styles (#4002)
Browse files Browse the repository at this point in the history
  • Loading branch information
@david-livefront
david-livefront authored Oct 1, 2024
1 parent b3e885b commit 2224708
Show file tree
Hide file tree
Showing 3 changed files with 343 additions and 0 deletions.
17 changes: 17 additions & 0 deletions app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/BitwardenTheme.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -40,6 +42,14 @@ object BitwardenTheme {
@Composable
@ReadOnlyComposable
get() = LocalBitwardenColorScheme.current

/**
* Retrieves the current [BitwardenTypography].
*/
val typography: BitwardenTypography
@Composable
@ReadOnlyComposable
get() = LocalBitwardenTypography.current
}

/**
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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<BitwardenTypography> =
compositionLocalOf { bitwardenTypography }

/**
* Provides access to non material theme typography throughout the app.
*/
Expand Down
29 changes: 29 additions & 0 deletions app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt
View file
Original file line number Diff line number Diff line change
@@ -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,
)
297 changes: 297 additions & 0 deletions app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/Typography.kt
View file
Original file line number Diff line number Diff line change
@@ -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)
}
}
}

0 comments on commit 2224708

Please sign in to comment.