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

Commit 2c0a5183 authored by Florence Yang's avatar Florence Yang
Browse files

Update Compose typography API for Variable Emphasized 

Align with current Compose M3 API that introduces Variable Emphasized
text tokens (GSF-emphasized styles).

This allows for system surfaces implemented in Compose to use the new
GSF-emphasized font styles. This is also the most performant method of
rendering the font in Compose since it directly access the font styles
that are created at system server boot time.

Flag: EXEMPT internal Compose API update
Bug: 397759091
Test: manual
Change-Id: I58a0c41d02dadeac2b4c0717f0e1c9f3fa929534
parent aa76f42b

packages/SystemUI/compose/core/src/com/android/compose/theme/PlatformTheme.kt

+9 −2
Original line number Diff line number Diff line
@@ -31,6 +31,7 @@ import com.android.compose.theme.typography.TypeScaleTokens 
import com.android.compose.theme.typography.TypefaceNames

import com.android.compose.theme.typography.TypefaceTokens

import com.android.compose.theme.typography.TypographyTokens

import com.android.compose.theme.typography.VariableFontTypeScaleEmphasizedTokens

import com.android.compose.theme.typography.platformTypography

import com.android.compose.windowsizeclass.LocalWindowSizeClass

import com.android.compose.windowsizeclass.calculateWindowSizeClass
@@ -44,9 +45,15 @@ fun PlatformTheme(isDarkTheme: Boolean = isSystemInDarkTheme(), content: @Compos 
    val colorScheme = remember(context, isDarkTheme) { platformColorScheme(isDarkTheme, context) }

    val androidColorScheme = remember(context) { AndroidColorScheme(context) }

    val typefaceNames = remember(context) { TypefaceNames.get(context) }

    val typefaceTokens = remember(typefaceNames) { TypefaceTokens(typefaceNames) }

    val typography =

        remember(typefaceNames) {

            platformTypography(TypographyTokens(TypeScaleTokens(TypefaceTokens(typefaceNames))))

        remember(typefaceTokens) {

            platformTypography(

                TypographyTokens(

                    TypeScaleTokens(typefaceTokens),

                    VariableFontTypeScaleEmphasizedTokens(typefaceTokens),

                )

            )

        }

    val windowSizeClass = calculateWindowSizeClass()

packages/SystemUI/compose/core/src/com/android/compose/theme/typography/PlatformTypography.kt

+18 −0
Original line number Diff line number Diff line
@@ -16,6 +16,7 @@ 


package com.android.compose.theme.typography



import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Typography
@@ -25,6 +26,7 @@ import androidx.compose.material3.Typography 
 * Do not use directly and call [MaterialTheme.typography] instead to access the different text

 * styles.

 */

@OptIn(ExperimentalMaterial3ExpressiveApi::class)

internal fun platformTypography(typographyTokens: TypographyTokens): Typography {

    return Typography(

        displayLarge = typographyTokens.displayLarge,
@@ -42,5 +44,21 @@ internal fun platformTypography(typographyTokens: TypographyTokens): Typography 
        labelLarge = typographyTokens.labelLarge,

        labelMedium = typographyTokens.labelMedium,

        labelSmall = typographyTokens.labelSmall,

        // GSF emphasized tokens

        displayLargeEmphasized = typographyTokens.displayLargeEmphasized,

        displayMediumEmphasized = typographyTokens.displayMediumEmphasized,

        displaySmallEmphasized = typographyTokens.displaySmallEmphasized,

        headlineLargeEmphasized = typographyTokens.headlineLargeEmphasized,

        headlineMediumEmphasized = typographyTokens.headlineMediumEmphasized,

        headlineSmallEmphasized = typographyTokens.headlineSmallEmphasized,

        titleLargeEmphasized = typographyTokens.titleLargeEmphasized,

        titleMediumEmphasized = typographyTokens.titleMediumEmphasized,

        titleSmallEmphasized = typographyTokens.titleSmallEmphasized,

        bodyLargeEmphasized = typographyTokens.bodyLargeEmphasized,

        bodyMediumEmphasized = typographyTokens.bodyMediumEmphasized,

        bodySmallEmphasized = typographyTokens.bodySmallEmphasized,

        labelLargeEmphasized = typographyTokens.labelLargeEmphasized,

        labelMediumEmphasized = typographyTokens.labelMediumEmphasized,

        labelSmallEmphasized = typographyTokens.labelSmallEmphasized,

    )

}

packages/SystemUI/compose/core/src/com/android/compose/theme/typography/TypefaceTokens.kt

+39 −0
Original line number Diff line number Diff line
@@ -34,6 +34,29 @@ internal class TypefaceTokens(typefaceNames: TypefaceNames) { 
    private val brandFont = DeviceFontFamilyName(typefaceNames.brand)

    private val plainFont = DeviceFontFamilyName(typefaceNames.plain)



    // Google Sans Flex emphasized styles

    private val displayLargeEmphasizedFont =

        DeviceFontFamilyName("variable-display-large-emphasized")

    private val displayMediumEmphasizedFont =

        DeviceFontFamilyName("variable-display-medium-emphasized")

    private val displaySmallEmphasizedFont =

        DeviceFontFamilyName("variable-display-small-emphasized")

    private val headlineLargeEmphasizedFont =

        DeviceFontFamilyName("variable-headline-large-emphasized")

    private val headlineMediumEmphasizedFont =

        DeviceFontFamilyName("variable-headline-medium-emphasized")

    private val headlineSmallEmphasizedFont =

        DeviceFontFamilyName("variable-headline-small-emphasized")

    private val titleLargeEmphasizedFont = DeviceFontFamilyName("variable-title-large-emphasized")

    private val titleMediumEmphasizedFont = DeviceFontFamilyName("variable-title-medium-emphasized")

    private val titleSmallEmphasizedFont = DeviceFontFamilyName("variable-title-small-emphasized")

    private val bodyLargeEmphasizedFont = DeviceFontFamilyName("variable-body-large-emphasized")

    private val bodyMediumEmphasizedFont = DeviceFontFamilyName("variable-body-medium-emphasized")

    private val bodySmallEmphasizedFont = DeviceFontFamilyName("variable-body-small-emphasized")

    private val labelLargeEmphasizedFont = DeviceFontFamilyName("variable-label-large-emphasized")

    private val labelMediumEmphasizedFont = DeviceFontFamilyName("variable-label-medium-emphasized")

    private val labelSmallEmphasizedFont = DeviceFontFamilyName("variable-label-small-emphasized")



    val brand =

        FontFamily(

            Font(brandFont, weight = WeightMedium),
@@ -44,6 +67,22 @@ internal class TypefaceTokens(typefaceNames: TypefaceNames) { 
            Font(plainFont, weight = WeightMedium),

            Font(plainFont, weight = WeightRegular),

        )



    val displayLargeEmphasized = FontFamily(Font(displayLargeEmphasizedFont))

    val displayMediumEmphasized = FontFamily(Font(displayMediumEmphasizedFont))

    val displaySmallEmphasized = FontFamily(Font(displaySmallEmphasizedFont))

    val headlineLargeEmphasized = FontFamily(Font(headlineLargeEmphasizedFont))

    val headlineMediumEmphasized = FontFamily(Font(headlineMediumEmphasizedFont))

    val headlineSmallEmphasized = FontFamily(Font(headlineSmallEmphasizedFont))

    val titleLargeEmphasized = FontFamily(Font(titleLargeEmphasizedFont))

    val titleMediumEmphasized = FontFamily(Font(titleMediumEmphasizedFont))

    val titleSmallEmphasized = FontFamily(Font(titleSmallEmphasizedFont))

    val bodyLargeEmphasized = FontFamily(Font(bodyLargeEmphasizedFont))

    val bodyMediumEmphasized = FontFamily(Font(bodyMediumEmphasizedFont))

    val bodySmallEmphasized = FontFamily(Font(bodySmallEmphasizedFont))

    val labelLargeEmphasized = FontFamily(Font(labelLargeEmphasizedFont))

    val labelMediumEmphasized = FontFamily(Font(labelMediumEmphasizedFont))

    val labelSmallEmphasized = FontFamily(Font(labelSmallEmphasizedFont))

}



internal data class TypefaceNames

packages/SystemUI/compose/core/src/com/android/compose/theme/typography/TypographyTokens.kt

+112 −1
Original line number Diff line number Diff line
@@ -18,7 +18,10 @@ package com.android.compose.theme.typography 


import androidx.compose.ui.text.TextStyle



internal class TypographyTokens(typeScaleTokens: TypeScaleTokens) {

internal class TypographyTokens(

    typeScaleTokens: TypeScaleTokens,

    variableTypeScaleTokens: VariableFontTypeScaleEmphasizedTokens,

) {

    val bodyLarge =

        TextStyle(

            fontFamily = typeScaleTokens.bodyLargeFont,
@@ -139,4 +142,112 @@ internal class TypographyTokens(typeScaleTokens: TypeScaleTokens) { 
            lineHeight = typeScaleTokens.titleSmallLineHeight,

            letterSpacing = typeScaleTokens.titleSmallTracking,

        )

    // GSF emphasized styles

    // note: we don't need to define fontWeight or axes values because they are pre-defined

    // as part of the font family in fonts_customization.xml (for performance optimization)

    val displayLargeEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.displayLargeFont,

            fontSize = variableTypeScaleTokens.displayLargeSize,

            lineHeight = variableTypeScaleTokens.displayLargeLineHeight,

            letterSpacing = variableTypeScaleTokens.displayLargeTracking,

        )

    val displayMediumEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.displayMediumFont,

            fontSize = variableTypeScaleTokens.displayMediumSize,

            lineHeight = variableTypeScaleTokens.displayMediumLineHeight,

            letterSpacing = variableTypeScaleTokens.displayMediumTracking,

        )

    val displaySmallEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.displaySmallFont,

            fontSize = variableTypeScaleTokens.displaySmallSize,

            lineHeight = variableTypeScaleTokens.displaySmallLineHeight,

            letterSpacing = variableTypeScaleTokens.displaySmallTracking,

        )

    val headlineLargeEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.headlineLargeFont,

            fontSize = variableTypeScaleTokens.headlineLargeSize,

            lineHeight = variableTypeScaleTokens.headlineLargeLineHeight,

            letterSpacing = variableTypeScaleTokens.headlineLargeTracking,

        )

    val headlineMediumEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.headlineMediumFont,

            fontSize = variableTypeScaleTokens.headlineMediumSize,

            lineHeight = variableTypeScaleTokens.headlineMediumLineHeight,

            letterSpacing = variableTypeScaleTokens.headlineMediumTracking,

        )

    val headlineSmallEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.headlineSmallFont,

            fontSize = variableTypeScaleTokens.headlineSmallSize,

            lineHeight = variableTypeScaleTokens.headlineSmallLineHeight,

            letterSpacing = variableTypeScaleTokens.headlineSmallTracking,

        )

    val titleLargeEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.titleLargeFont,

            fontSize = variableTypeScaleTokens.titleLargeSize,

            lineHeight = variableTypeScaleTokens.titleLargeLineHeight,

            letterSpacing = variableTypeScaleTokens.titleLargeTracking,

        )

    val titleMediumEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.titleMediumFont,

            fontSize = variableTypeScaleTokens.titleMediumSize,

            lineHeight = variableTypeScaleTokens.titleMediumLineHeight,

            letterSpacing = variableTypeScaleTokens.titleMediumTracking,

        )

    val titleSmallEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.titleSmallFont,

            fontSize = variableTypeScaleTokens.titleSmallSize,

            lineHeight = variableTypeScaleTokens.titleSmallLineHeight,

            letterSpacing = variableTypeScaleTokens.titleSmallTracking,

        )

    val bodyLargeEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.bodyLargeFont,

            fontSize = variableTypeScaleTokens.bodyLargeSize,

            lineHeight = variableTypeScaleTokens.bodyLargeLineHeight,

            letterSpacing = variableTypeScaleTokens.bodyLargeTracking,

        )

    val bodyMediumEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.bodyMediumFont,

            fontSize = variableTypeScaleTokens.bodyMediumSize,

            lineHeight = variableTypeScaleTokens.bodyMediumLineHeight,

            letterSpacing = variableTypeScaleTokens.bodyMediumTracking,

        )

    val bodySmallEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.bodySmallFont,

            fontSize = variableTypeScaleTokens.bodySmallSize,

            lineHeight = variableTypeScaleTokens.bodySmallLineHeight,

            letterSpacing = variableTypeScaleTokens.bodySmallTracking,

        )

    val labelLargeEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.labelLargeFont,

            fontSize = variableTypeScaleTokens.labelLargeSize,

            lineHeight = variableTypeScaleTokens.labelLargeLineHeight,

            letterSpacing = variableTypeScaleTokens.labelLargeTracking,

        )

    val labelMediumEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.labelMediumFont,

            fontSize = variableTypeScaleTokens.labelMediumSize,

            lineHeight = variableTypeScaleTokens.labelMediumLineHeight,

            letterSpacing = variableTypeScaleTokens.labelMediumTracking,

        )

    val labelSmallEmphasized =

        TextStyle(

            fontFamily = variableTypeScaleTokens.labelSmallFont,

            fontSize = variableTypeScaleTokens.labelSmallSize,

            lineHeight = variableTypeScaleTokens.labelSmallLineHeight,

            letterSpacing = variableTypeScaleTokens.labelSmallTracking,

        )

}

packages/SystemUI/compose/core/src/com/android/compose/theme/typography/VariableFontTypeScaleEmphasizedTokens.kt

0 → 100644
+82 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025 The Android Open Source Project

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *      http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



package com.android.compose.theme.typography



import androidx.compose.ui.unit.sp



internal class VariableFontTypeScaleEmphasizedTokens(typefaceTokens: TypefaceTokens) {

    val bodyLargeFont = typefaceTokens.bodyLargeEmphasized

    val bodyLargeLineHeight = 24.0.sp

    val bodyLargeSize = 16.sp

    val bodyLargeTracking = 0.0.sp

    val bodyMediumFont = typefaceTokens.bodyMediumEmphasized

    val bodyMediumLineHeight = 20.0.sp

    val bodyMediumSize = 14.sp

    val bodyMediumTracking = 0.0.sp

    val bodySmallFont = typefaceTokens.bodySmallEmphasized

    val bodySmallLineHeight = 16.0.sp

    val bodySmallSize = 12.sp

    val bodySmallTracking = 0.0.sp

    val displayLargeFont = typefaceTokens.displayLargeEmphasized

    val displayLargeLineHeight = 64.0.sp

    val displayLargeSize = 57.sp

    val displayLargeTracking = 0.0.sp

    val displayMediumFont = typefaceTokens.displayMediumEmphasized

    val displayMediumLineHeight = 52.0.sp

    val displayMediumSize = 45.sp

    val displayMediumTracking = 0.0.sp

    val displaySmallFont = typefaceTokens.displaySmallEmphasized

    val displaySmallLineHeight = 44.0.sp

    val displaySmallSize = 36.sp

    val displaySmallTracking = 0.0.sp

    val headlineLargeFont = typefaceTokens.headlineLargeEmphasized

    val headlineLargeLineHeight = 40.0.sp

    val headlineLargeSize = 32.sp

    val headlineLargeTracking = 0.0.sp

    val headlineMediumFont = typefaceTokens.headlineMediumEmphasized

    val headlineMediumLineHeight = 36.0.sp

    val headlineMediumSize = 28.sp

    val headlineMediumTracking = 0.0.sp

    val headlineSmallFont = typefaceTokens.headlineSmallEmphasized

    val headlineSmallLineHeight = 32.0.sp

    val headlineSmallSize = 24.sp

    val headlineSmallTracking = 0.0.sp

    val labelLargeFont = typefaceTokens.labelLargeEmphasized

    val labelLargeLineHeight = 20.0.sp

    val labelLargeSize = 14.sp

    val labelLargeTracking = 0.0.sp

    val labelMediumFont = typefaceTokens.labelMediumEmphasized

    val labelMediumLineHeight = 16.0.sp

    val labelMediumSize = 12.sp

    val labelMediumTracking = 0.0.sp

    val labelSmallFont = typefaceTokens.labelSmallEmphasized

    val labelSmallLineHeight = 16.0.sp

    val labelSmallSize = 11.sp

    val labelSmallTracking = 0.0.sp

    val titleLargeFont = typefaceTokens.titleLargeEmphasized

    val titleLargeLineHeight = 28.0.sp

    val titleLargeSize = 22.sp

    val titleLargeTracking = 0.0.sp

    val titleMediumFont = typefaceTokens.titleMediumEmphasized

    val titleMediumLineHeight = 24.0.sp

    val titleMediumSize = 16.sp

    val titleMediumTracking = 0.0.sp

    val titleSmallFont = typefaceTokens.titleSmallEmphasized

    val titleSmallLineHeight = 20.0.sp

    val titleSmallSize = 14.sp

    val titleSmallTracking = 0.0.sp

}