Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit c13ab36a authored by Yuchen Sun's avatar Yuchen Sun Committed by Android (Google) Code Review
Browse files

Merge "[Expressive design] Update SPA Text style." into main

parents 9de4aa2d d807ca87
Loading
Loading
Loading
Loading
+418 −123
Original line number Diff line number Diff line
@@ -16,6 +16,7 @@

package com.android.settingslib.spa.framework.theme

import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.Typography
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@@ -29,8 +30,10 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
    private val brand = settingsFontFamily.brand
    private val plain = settingsFontFamily.plain

    val typography = Typography(
        displayLarge = TextStyle(
    val typography =
        Typography(
            displayLarge =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 57.sp,
@@ -38,7 +41,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = (-0.2).sp,
                    hyphens = Hyphens.Auto,
                ),
        displayMedium = TextStyle(
            displayMedium =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 45.sp,
@@ -46,7 +50,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
        displaySmall = TextStyle(
            displaySmall =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 36.sp,
@@ -54,7 +59,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
        headlineLarge = TextStyle(
            headlineLarge =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 32.sp,
@@ -62,7 +68,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
        headlineMedium = TextStyle(
            headlineMedium =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 28.sp,
@@ -70,7 +77,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
        headlineSmall = TextStyle(
            headlineSmall =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 24.sp,
@@ -78,7 +86,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
        titleLarge = TextStyle(
            titleLarge =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 22.sp,
@@ -86,7 +95,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
        titleMedium = TextStyle(
            titleMedium =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 20.sp,
@@ -94,7 +104,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
        titleSmall = TextStyle(
            titleSmall =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 18.sp,
@@ -102,7 +113,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
        bodyLarge = TextStyle(
            bodyLarge =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Normal,
                    fontSize = 16.sp,
@@ -110,7 +122,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
        bodyMedium = TextStyle(
            bodyMedium =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Normal,
                    fontSize = 14.sp,
@@ -118,7 +131,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
        bodySmall = TextStyle(
            bodySmall =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Normal,
                    fontSize = 12.sp,
@@ -126,7 +140,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
        labelLarge = TextStyle(
            labelLarge =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 16.sp,
@@ -134,7 +149,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
        labelMedium = TextStyle(
            labelMedium =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 14.sp,
@@ -142,7 +158,8 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
        labelSmall = TextStyle(
            labelSmall =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 12.sp,
@@ -151,12 +168,290 @@ private class SettingsTypography(settingsFontFamily: SettingsFontFamily) {
                    hyphens = Hyphens.Auto,
                ),
        )

    @OptIn(ExperimentalMaterial3ExpressiveApi::class)
    val expressiveTypography =
        Typography(
            displayLarge =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 57.sp,
                    lineHeight = 64.sp,
                    letterSpacing = (-0.2).sp,
                    hyphens = Hyphens.Auto,
                ),
            displayLargeEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 57.sp,
                    lineHeight = 64.sp,
                    letterSpacing = (-0.2).sp,
                    hyphens = Hyphens.Auto,
                ),
            displayMedium =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 45.sp,
                    lineHeight = 52.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            displayMediumEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 45.sp,
                    lineHeight = 52.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            displaySmall =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 36.sp,
                    lineHeight = 44.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            displaySmallEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 36.sp,
                    lineHeight = 44.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            headlineLarge =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            headlineLargeEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            headlineMedium =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 28.sp,
                    lineHeight = 36.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            headlineMediumEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 28.sp,
                    lineHeight = 36.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            headlineSmall =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 24.sp,
                    lineHeight = 32.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            headlineSmallEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 24.sp,
                    lineHeight = 32.sp,
                    letterSpacing = 0.0.sp,
                    hyphens = Hyphens.Auto,
                ),
            titleLarge =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Normal,
                    fontSize = 22.sp,
                    lineHeight = 28.sp,
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
            titleLargeEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 22.sp,
                    lineHeight = 28.sp,
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
            titleMedium =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
            titleMediumEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
            titleSmall =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.Medium,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
            titleSmallEmphasized =
                TextStyle(
                    fontFamily = brand,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.02.em,
                    hyphens = Hyphens.Auto,
                ),
            bodyLarge =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Normal,
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            bodyLargeEmphasized =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            bodyMedium =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Normal,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            bodyMediumEmphasized =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            bodySmall =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Normal,
                    fontSize = 12.sp,
                    lineHeight = 16.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            bodySmallEmphasized =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 12.sp,
                    lineHeight = 16.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            labelLarge =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            labelLargeEmphasized =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            labelMedium =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 12.sp,
                    lineHeight = 16.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            labelMediumEmphasized =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 12.sp,
                    lineHeight = 16.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            labelSmall =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.Medium,
                    fontSize = 11.sp,
                    lineHeight = 16.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
            labelSmallEmphasized =
                TextStyle(
                    fontFamily = plain,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 11.sp,
                    lineHeight = 16.sp,
                    letterSpacing = 0.01.em,
                    hyphens = Hyphens.Auto,
                ),
        )
}

@Composable
internal fun rememberSettingsTypography(): Typography {
    val settingsFontFamily = rememberSettingsFontFamily()
    return remember { SettingsTypography(settingsFontFamily).typography }
    return remember {
        if (isSpaExpressiveEnabled) SettingsTypography(settingsFontFamily).expressiveTypography
        else SettingsTypography(settingsFontFamily).typography
    }
}

/** Creates a new [TextStyle] which font weight set to medium. */
+1 −2
Original line number Diff line number Diff line
@@ -56,7 +56,6 @@ import com.android.settingslib.spa.framework.theme.SettingsShape
import com.android.settingslib.spa.framework.theme.SettingsTheme
import com.android.settingslib.spa.framework.theme.divider
import com.android.settingslib.spa.framework.theme.isSpaExpressiveEnabled
import com.android.settingslib.spa.framework.theme.toSemiBoldWeight

data class ActionButton(
    val text: String,
@@ -130,7 +129,7 @@ private fun RowScope.ActionButton(actionButton: ActionButton) {
                Text(
                    text = actionButton.text,
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.labelLarge.toSemiBoldWeight(),
                    style = MaterialTheme.typography.titleSmall,
                )
            }
        }
+2 −3
Original line number Diff line number Diff line
@@ -36,7 +36,6 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import com.android.settingslib.spa.framework.theme.SettingsDimension
import com.android.settingslib.spa.framework.theme.toSemiBoldWeight

@Composable
fun IntroPreference(
@@ -113,7 +112,7 @@ private fun IntroTitle(title: String) {
        Text(
            text = title,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.titleLarge.toSemiBoldWeight(),
            style = MaterialTheme.typography.titleLarge,
            color = MaterialTheme.colorScheme.onSurface,
        )
    }
@@ -127,7 +126,7 @@ private fun IntroDescription(descriptions: List<String>?) {
            Text(
                text = description,
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.bodyLarge,
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.padding(top = SettingsDimension.paddingExtraSmall),
            )
+3 −2
Original line number Diff line number Diff line
@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.History
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
@@ -47,8 +48,8 @@ import androidx.graphics.shapes.CornerRounding
import androidx.graphics.shapes.RoundedPolygon
import androidx.graphics.shapes.star
import androidx.graphics.shapes.toPath
import com.android.settingslib.spa.framework.theme.toSemiBoldWeight

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun ZeroStatePreference(icon: ImageVector, text: String? = null, description: String? = null) {
    val zeroStateShape = remember {
@@ -81,7 +82,7 @@ fun ZeroStatePreference(icon: ImageVector, text: String? = null, description: St
            Text(
                text = text,
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.titleMedium.toSemiBoldWeight(),
                style = MaterialTheme.typography.titleMediumEmphasized,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.padding(top = 24.dp),
            )
+12 −3
Original line number Diff line number Diff line
@@ -28,6 +28,7 @@ import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.TouchApp
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -51,6 +52,7 @@ import com.android.settingslib.spa.widget.preference.Preference
import com.android.settingslib.spa.widget.preference.PreferenceModel

/** A category title that is placed before a group of similar items. */
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun CategoryTitle(title: String) {
    Text(
@@ -67,7 +69,9 @@ fun CategoryTitle(title: String) {
                bottom = 8.dp,
            ),
        color = MaterialTheme.colorScheme.primary,
        style = MaterialTheme.typography.labelMedium,
        style =
            if (isSpaExpressiveEnabled) MaterialTheme.typography.labelLargeEmphasized
            else MaterialTheme.typography.labelMedium,
    )
}

@@ -76,7 +80,11 @@ fun CategoryTitle(title: String) {
 * visually separates groups of items.
 */
@Composable
fun Category(title: String? = null, modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit) {
fun Category(
    title: String? = null,
    modifier: Modifier = Modifier,
    content: @Composable ColumnScope.() -> Unit,
) {
    var displayTitle by remember { mutableStateOf(false) }
    Column(
        modifier =
@@ -90,7 +98,8 @@ fun Category(title: String? = null, modifier: Modifier = Modifier, content: @Com
        if (title != null && displayTitle) CategoryTitle(title = title)
        Column(
            modifier =
                modifier.onGloballyPositioned { coordinates ->
                modifier
                    .onGloballyPositioned { coordinates ->
                        displayTitle = coordinates.size.height > 0
                    }
                    .then(
Loading