[fenix] For https://github.com/mozilla-mobile/fenix/issues/25379 - Create a Compose Typography system
parent
f95e3ce070
commit
9b48f56750
@ -0,0 +1,162 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
package org.mozilla.fenix.theme
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
||||
/**
|
||||
* A custom typography for Mozilla Firefox for Android (Fenix).
|
||||
*
|
||||
* @param headline5 Currently not in-use.
|
||||
* @param headline6 Used for headings on Onboarding Modals and App Bar Titles.
|
||||
* @param headline7 Used for headings on Cards, Dialogs, Banners, and Homepage.
|
||||
* @param headline8 Used for Small Headings.
|
||||
* @param subtitle1 Used for Lists.
|
||||
* @param subtitle2 Currently not in-use.
|
||||
* @param body1 Currently not in-use.
|
||||
* @param body2 Used for body text.
|
||||
* @param button Used for Buttons.
|
||||
* @param caption Used for captions.
|
||||
* @param overline Used for Sheets.
|
||||
*/
|
||||
@Suppress("LongParameterList")
|
||||
class FenixTypography(
|
||||
val headline5: TextStyle,
|
||||
val headline6: TextStyle,
|
||||
val headline7: TextStyle,
|
||||
val headline8: TextStyle,
|
||||
val subtitle1: TextStyle,
|
||||
val subtitle2: TextStyle,
|
||||
val body1: TextStyle,
|
||||
val body2: TextStyle,
|
||||
val button: TextStyle,
|
||||
val caption: TextStyle,
|
||||
val overline: TextStyle,
|
||||
)
|
||||
|
||||
val defaultTypography = FenixTypography(
|
||||
headline5 = TextStyle(
|
||||
fontSize = 24.sp,
|
||||
fontWeight = FontWeight.W400,
|
||||
letterSpacing = 0.18.sp,
|
||||
lineHeight = 24.sp,
|
||||
),
|
||||
|
||||
headline6 = TextStyle(
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.W500,
|
||||
letterSpacing = 0.15.sp,
|
||||
lineHeight = 24.sp,
|
||||
),
|
||||
|
||||
headline7 = TextStyle(
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.W500,
|
||||
letterSpacing = 0.15.sp,
|
||||
lineHeight = 24.sp,
|
||||
),
|
||||
|
||||
headline8 = TextStyle(
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.W500,
|
||||
letterSpacing = 0.4.sp,
|
||||
lineHeight = 20.sp,
|
||||
),
|
||||
|
||||
subtitle1 = TextStyle(
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.W400,
|
||||
letterSpacing = 0.15.sp,
|
||||
lineHeight = 24.sp,
|
||||
),
|
||||
|
||||
subtitle2 = TextStyle(
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.W500,
|
||||
letterSpacing = 0.1.sp,
|
||||
lineHeight = 24.sp,
|
||||
),
|
||||
|
||||
body1 = TextStyle(
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.W400,
|
||||
letterSpacing = 0.5.sp,
|
||||
lineHeight = 24.sp,
|
||||
),
|
||||
|
||||
body2 = TextStyle(
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.W400,
|
||||
letterSpacing = 0.25.sp,
|
||||
lineHeight = 20.sp,
|
||||
),
|
||||
|
||||
button = TextStyle(
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.W500,
|
||||
letterSpacing = 0.25.sp,
|
||||
lineHeight = 14.sp,
|
||||
),
|
||||
|
||||
caption = TextStyle(
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.W400,
|
||||
letterSpacing = 0.4.sp,
|
||||
lineHeight = 16.sp,
|
||||
),
|
||||
|
||||
overline = TextStyle(
|
||||
fontSize = 10.sp,
|
||||
fontWeight = FontWeight.W400,
|
||||
letterSpacing = 1.5.sp,
|
||||
lineHeight = 16.sp,
|
||||
),
|
||||
)
|
||||
|
||||
@Composable
|
||||
@Preview
|
||||
private fun TypographyPreview() {
|
||||
val textStyles = listOf(
|
||||
Pair("Headline 5", defaultTypography.headline5),
|
||||
Pair("Headline 6", defaultTypography.headline6),
|
||||
Pair("Headline 7", defaultTypography.headline7),
|
||||
Pair("Headline 8", defaultTypography.headline8),
|
||||
Pair("Subtitle1", defaultTypography.subtitle1),
|
||||
Pair("Subtitle2", defaultTypography.subtitle2),
|
||||
Pair("Body1", defaultTypography.body1),
|
||||
Pair("Body2", defaultTypography.body2),
|
||||
Pair("Button", defaultTypography.button),
|
||||
Pair("Caption", defaultTypography.caption),
|
||||
Pair("Overline", defaultTypography.overline),
|
||||
)
|
||||
|
||||
FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
|
||||
LazyColumn(
|
||||
modifier = Modifier
|
||||
.background(FirefoxTheme.colors.layer1)
|
||||
.padding(horizontal = 16.dp),
|
||||
verticalArrangement = Arrangement.SpaceBetween,
|
||||
) {
|
||||
items(textStyles) { style ->
|
||||
Text(
|
||||
text = style.first,
|
||||
style = style.second,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue