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

Commit 8c222cab authored by Jordan Demeulenaere's avatar Jordan Demeulenaere
Browse files

Define the SystemUI typography 

This CL defines the material typography that is going to be used by
Compose code in SystemUI. Most of the code from this CL was forked from
the Google Material implementation in google3 [1, 2, 3, 4], so that our
typography is consistent from 1P apps (and with the Google Material
spec). For this reason, I changed only what I had to + reformatted the
files using ktfmt. The direct references to "google-sans" will be
removed in http://ag/19500381 to keep this CL as close as possible from
the google3 classes.

Note that this new typography might not be 100% consistent with the
current text styles used in SystemUI, given that they are not consistent
with the new M3 spec. Those kind of inconsistencies will be fixed later,
as we figure out how SystemUI is going to be aligned with M3 in general
(and not w.r.t. Compose in particular).

[1] http://google3/java/com/google/android/libraries/material/compose/Typography.kt
[2] http://google3/java/com/google/android/libraries/material/compose/tools/tokens/library/md/first_party/TypographyTokens.kt
[3] http://google3/java/com/google/android/libraries/material/compose/tools/tokens/library/md/first_party/TypeScaleTokens.kt
[4] http://google3/java/com/google/android/libraries/material/compose/tools/tokens/library/md/first_party/asynctype/TypefaceTokens.kt

Bug: 230605885
Test: Manual
Change-Id: I116ef944c79e09fb0d4b0914c3da71a946fc169a
parent 3c86fce3

packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/SystemUITheme.kt

+3 −4
Original line number Diff line number Diff line
@@ -18,12 +18,12 @@ package com.android.systemui.compose.theme 


import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Typography

import androidx.compose.material3.dynamicDarkColorScheme

import androidx.compose.material3.dynamicLightColorScheme

import androidx.compose.runtime.Composable

import androidx.compose.runtime.CompositionLocalProvider

import androidx.compose.ui.platform.LocalContext

import com.android.systemui.compose.theme.typography.SystemUITypography



/** The Material 3 theme that should wrap all SystemUI Composables. */

@Composable
@@ -33,7 +33,7 @@ fun SystemUITheme( 
) {

    val context = LocalContext.current



    // TODO(b/230605885): Define our typography and color scheme.

    // TODO(b/230605885): Define our color scheme.

    val colorScheme =

        if (isDarkTheme) {

            dynamicDarkColorScheme(context)
@@ -41,9 +41,8 @@ fun SystemUITheme( 
            dynamicLightColorScheme(context)

        }

    val androidColorScheme = AndroidColorScheme(context)

    val typography = Typography()



    MaterialTheme(colorScheme, typography = typography) {

    MaterialTheme(colorScheme, typography = SystemUITypography) {

        CompositionLocalProvider(

            LocalAndroidColorScheme provides androidColorScheme,

        ) {

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

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

 * Copyright (C) 2022 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.systemui.compose.theme.typography



import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Typography



/**

 * The SystemUI typography.

 *

 * Do not use directly and call [MaterialTheme.typography] instead to access the different text

 * styles.

 */

internal val SystemUITypography =

    Typography(

        displayLarge = TypographyTokens.DisplayLarge,

        displayMedium = TypographyTokens.DisplayMedium,

        displaySmall = TypographyTokens.DisplaySmall,

        headlineLarge = TypographyTokens.HeadlineLarge,

        headlineMedium = TypographyTokens.HeadlineMedium,

        headlineSmall = TypographyTokens.HeadlineSmall,

        titleLarge = TypographyTokens.TitleLarge,

        titleMedium = TypographyTokens.TitleMedium,

        titleSmall = TypographyTokens.TitleSmall,

        bodyLarge = TypographyTokens.BodyLarge,

        bodyMedium = TypographyTokens.BodyMedium,

        bodySmall = TypographyTokens.BodySmall,

        labelLarge = TypographyTokens.LabelLarge,

        labelMedium = TypographyTokens.LabelMedium,

        labelSmall = TypographyTokens.LabelSmall,

    )

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

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

 * Copyright (C) 2022 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.systemui.compose.theme.typography



import androidx.compose.ui.unit.sp



object TypeScaleTokens {

    val BodyLargeFont = TypefaceTokens.Plain

    val BodyLargeLineHeight = 24.0.sp

    val BodyLargeSize = 16.sp

    val BodyLargeTracking = 0.0.sp

    val BodyLargeWeight = TypefaceTokens.WeightRegular

    val BodyMediumFont = TypefaceTokens.Plain

    val BodyMediumLineHeight = 20.0.sp

    val BodyMediumSize = 14.sp

    val BodyMediumTracking = 0.0.sp

    val BodyMediumWeight = TypefaceTokens.WeightRegular

    val BodySmallFont = TypefaceTokens.Plain

    val BodySmallLineHeight = 16.0.sp

    val BodySmallSize = 12.sp

    val BodySmallTracking = 0.1.sp

    val BodySmallWeight = TypefaceTokens.WeightRegular

    val DisplayLargeFont = TypefaceTokens.Brand

    val DisplayLargeLineHeight = 64.0.sp

    val DisplayLargeSize = 57.sp

    val DisplayLargeTracking = 0.0.sp

    val DisplayLargeWeight = TypefaceTokens.WeightRegular

    val DisplayMediumFont = TypefaceTokens.Brand

    val DisplayMediumLineHeight = 52.0.sp

    val DisplayMediumSize = 45.sp

    val DisplayMediumTracking = 0.0.sp

    val DisplayMediumWeight = TypefaceTokens.WeightRegular

    val DisplaySmallFont = TypefaceTokens.Brand

    val DisplaySmallLineHeight = 44.0.sp

    val DisplaySmallSize = 36.sp

    val DisplaySmallTracking = 0.0.sp

    val DisplaySmallWeight = TypefaceTokens.WeightRegular

    val HeadlineLargeFont = TypefaceTokens.Brand

    val HeadlineLargeLineHeight = 40.0.sp

    val HeadlineLargeSize = 32.sp

    val HeadlineLargeTracking = 0.0.sp

    val HeadlineLargeWeight = TypefaceTokens.WeightRegular

    val HeadlineMediumFont = TypefaceTokens.Brand

    val HeadlineMediumLineHeight = 36.0.sp

    val HeadlineMediumSize = 28.sp

    val HeadlineMediumTracking = 0.0.sp

    val HeadlineMediumWeight = TypefaceTokens.WeightRegular

    val HeadlineSmallFont = TypefaceTokens.Brand

    val HeadlineSmallLineHeight = 32.0.sp

    val HeadlineSmallSize = 24.sp

    val HeadlineSmallTracking = 0.0.sp

    val HeadlineSmallWeight = TypefaceTokens.WeightRegular

    val LabelLargeFont = TypefaceTokens.Plain

    val LabelLargeLineHeight = 20.0.sp

    val LabelLargeSize = 14.sp

    val LabelLargeTracking = 0.0.sp

    val LabelLargeWeight = TypefaceTokens.WeightMedium

    val LabelMediumFont = TypefaceTokens.Plain

    val LabelMediumLineHeight = 16.0.sp

    val LabelMediumSize = 12.sp

    val LabelMediumTracking = 0.1.sp

    val LabelMediumWeight = TypefaceTokens.WeightMedium

    val LabelSmallFont = TypefaceTokens.Plain

    val LabelSmallLineHeight = 16.0.sp

    val LabelSmallSize = 11.sp

    val LabelSmallTracking = 0.1.sp

    val LabelSmallWeight = TypefaceTokens.WeightMedium

    val TitleLargeFont = TypefaceTokens.Brand

    val TitleLargeLineHeight = 28.0.sp

    val TitleLargeSize = 22.sp

    val TitleLargeTracking = 0.0.sp

    val TitleLargeWeight = TypefaceTokens.WeightRegular

    val TitleMediumFont = TypefaceTokens.Plain

    val TitleMediumLineHeight = 24.0.sp

    val TitleMediumSize = 16.sp

    val TitleMediumTracking = 0.0.sp

    val TitleMediumWeight = TypefaceTokens.WeightMedium

    val TitleSmallFont = TypefaceTokens.Plain

    val TitleSmallLineHeight = 20.0.sp

    val TitleSmallSize = 14.sp

    val TitleSmallTracking = 0.0.sp

    val TitleSmallWeight = TypefaceTokens.WeightMedium

}

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

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

 * Copyright (C) 2022 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.

 */



@file:OptIn(ExperimentalTextApi::class)



package com.android.systemui.compose.theme.typography



import androidx.compose.ui.text.ExperimentalTextApi

import androidx.compose.ui.text.font.DeviceFontFamilyName

import androidx.compose.ui.text.font.Font

import androidx.compose.ui.text.font.FontFamily

import androidx.compose.ui.text.font.FontWeight



val brandFont = DeviceFontFamilyName("google-sans")

val plainFont = DeviceFontFamilyName("google-sans-text")



object TypefaceTokens {



    val WeightMedium = FontWeight.Medium

    val WeightRegular = FontWeight.Normal



    val Brand =

        FontFamily(Font(brandFont, weight = WeightMedium), Font(brandFont, weight = WeightRegular))

    val Plain =

        FontFamily(Font(plainFont, weight = WeightMedium), Font(plainFont, weight = WeightRegular))

}

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

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

 * Copyright (C) 2022 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.systemui.compose.theme.typography



import androidx.compose.ui.text.TextStyle



object TypographyTokens {

    val BodyLarge =

        TextStyle(

            fontFamily = TypeScaleTokens.BodyLargeFont,

            fontWeight = TypeScaleTokens.BodyLargeWeight,

            fontSize = TypeScaleTokens.BodyLargeSize,

            lineHeight = TypeScaleTokens.BodyLargeLineHeight,

            letterSpacing = TypeScaleTokens.BodyLargeTracking,

        )

    val BodyMedium =

        TextStyle(

            fontFamily = TypeScaleTokens.BodyMediumFont,

            fontWeight = TypeScaleTokens.BodyMediumWeight,

            fontSize = TypeScaleTokens.BodyMediumSize,

            lineHeight = TypeScaleTokens.BodyMediumLineHeight,

            letterSpacing = TypeScaleTokens.BodyMediumTracking,

        )

    val BodySmall =

        TextStyle(

            fontFamily = TypeScaleTokens.BodySmallFont,

            fontWeight = TypeScaleTokens.BodySmallWeight,

            fontSize = TypeScaleTokens.BodySmallSize,

            lineHeight = TypeScaleTokens.BodySmallLineHeight,

            letterSpacing = TypeScaleTokens.BodySmallTracking,

        )

    val DisplayLarge =

        TextStyle(

            fontFamily = TypeScaleTokens.DisplayLargeFont,

            fontWeight = TypeScaleTokens.DisplayLargeWeight,

            fontSize = TypeScaleTokens.DisplayLargeSize,

            lineHeight = TypeScaleTokens.DisplayLargeLineHeight,

            letterSpacing = TypeScaleTokens.DisplayLargeTracking,

        )

    val DisplayMedium =

        TextStyle(

            fontFamily = TypeScaleTokens.DisplayMediumFont,

            fontWeight = TypeScaleTokens.DisplayMediumWeight,

            fontSize = TypeScaleTokens.DisplayMediumSize,

            lineHeight = TypeScaleTokens.DisplayMediumLineHeight,

            letterSpacing = TypeScaleTokens.DisplayMediumTracking,

        )

    val DisplaySmall =

        TextStyle(

            fontFamily = TypeScaleTokens.DisplaySmallFont,

            fontWeight = TypeScaleTokens.DisplaySmallWeight,

            fontSize = TypeScaleTokens.DisplaySmallSize,

            lineHeight = TypeScaleTokens.DisplaySmallLineHeight,

            letterSpacing = TypeScaleTokens.DisplaySmallTracking,

        )

    val HeadlineLarge =

        TextStyle(

            fontFamily = TypeScaleTokens.HeadlineLargeFont,

            fontWeight = TypeScaleTokens.HeadlineLargeWeight,

            fontSize = TypeScaleTokens.HeadlineLargeSize,

            lineHeight = TypeScaleTokens.HeadlineLargeLineHeight,

            letterSpacing = TypeScaleTokens.HeadlineLargeTracking,

        )

    val HeadlineMedium =

        TextStyle(

            fontFamily = TypeScaleTokens.HeadlineMediumFont,

            fontWeight = TypeScaleTokens.HeadlineMediumWeight,

            fontSize = TypeScaleTokens.HeadlineMediumSize,

            lineHeight = TypeScaleTokens.HeadlineMediumLineHeight,

            letterSpacing = TypeScaleTokens.HeadlineMediumTracking,

        )

    val HeadlineSmall =

        TextStyle(

            fontFamily = TypeScaleTokens.HeadlineSmallFont,

            fontWeight = TypeScaleTokens.HeadlineSmallWeight,

            fontSize = TypeScaleTokens.HeadlineSmallSize,

            lineHeight = TypeScaleTokens.HeadlineSmallLineHeight,

            letterSpacing = TypeScaleTokens.HeadlineSmallTracking,

        )

    val LabelLarge =

        TextStyle(

            fontFamily = TypeScaleTokens.LabelLargeFont,

            fontWeight = TypeScaleTokens.LabelLargeWeight,

            fontSize = TypeScaleTokens.LabelLargeSize,

            lineHeight = TypeScaleTokens.LabelLargeLineHeight,

            letterSpacing = TypeScaleTokens.LabelLargeTracking,

        )

    val LabelMedium =

        TextStyle(

            fontFamily = TypeScaleTokens.LabelMediumFont,

            fontWeight = TypeScaleTokens.LabelMediumWeight,

            fontSize = TypeScaleTokens.LabelMediumSize,

            lineHeight = TypeScaleTokens.LabelMediumLineHeight,

            letterSpacing = TypeScaleTokens.LabelMediumTracking,

        )

    val LabelSmall =

        TextStyle(

            fontFamily = TypeScaleTokens.LabelSmallFont,

            fontWeight = TypeScaleTokens.LabelSmallWeight,

            fontSize = TypeScaleTokens.LabelSmallSize,

            lineHeight = TypeScaleTokens.LabelSmallLineHeight,

            letterSpacing = TypeScaleTokens.LabelSmallTracking,

        )

    val TitleLarge =

        TextStyle(

            fontFamily = TypeScaleTokens.TitleLargeFont,

            fontWeight = TypeScaleTokens.TitleLargeWeight,

            fontSize = TypeScaleTokens.TitleLargeSize,

            lineHeight = TypeScaleTokens.TitleLargeLineHeight,

            letterSpacing = TypeScaleTokens.TitleLargeTracking,

        )

    val TitleMedium =

        TextStyle(

            fontFamily = TypeScaleTokens.TitleMediumFont,

            fontWeight = TypeScaleTokens.TitleMediumWeight,

            fontSize = TypeScaleTokens.TitleMediumSize,

            lineHeight = TypeScaleTokens.TitleMediumLineHeight,

            letterSpacing = TypeScaleTokens.TitleMediumTracking,

        )

    val TitleSmall =

        TextStyle(

            fontFamily = TypeScaleTokens.TitleSmallFont,

            fontWeight = TypeScaleTokens.TitleSmallWeight,

            fontSize = TypeScaleTokens.TitleSmallSize,

            lineHeight = TypeScaleTokens.TitleSmallLineHeight,

            letterSpacing = TypeScaleTokens.TitleSmallTracking,

        )

}