mirror of
https://github.com/bitwarden/android.git
synced 2024-12-18 07:11:51 +03:00
Add singular BitwardenTypography to manage all text-styles (#4002)
This commit is contained in:
David Perez
GitHub
parent
b3e885bcb1
commit
2224708fb1
3 changed files with 343 additions and 0 deletions
|
|
@ -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<BitwardenTypography> =
|
||||
compositionLocalOf { bitwardenTypography }
|
||||
|
||||
/**
|
||||
* Provides access to non material theme typography throughout the app.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue