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
This commit is contained in:
Jordan Demeulenaere
2022-05-24 14:13:29 +02:00
parent 3c86fce3a9
commit 8c222cabb6
5 changed files with 326 additions and 4 deletions

View File

@@ -18,12 +18,12 @@ package com.android.systemui.compose.theme
import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Typography
import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import com.android.systemui.compose.theme.typography.SystemUITypography
/** The Material 3 theme that should wrap all SystemUI Composables. */ /** The Material 3 theme that should wrap all SystemUI Composables. */
@Composable @Composable
@@ -33,7 +33,7 @@ fun SystemUITheme(
) { ) {
val context = LocalContext.current val context = LocalContext.current
// TODO(b/230605885): Define our typography and color scheme. // TODO(b/230605885): Define our color scheme.
val colorScheme = val colorScheme =
if (isDarkTheme) { if (isDarkTheme) {
dynamicDarkColorScheme(context) dynamicDarkColorScheme(context)
@@ -41,9 +41,8 @@ fun SystemUITheme(
dynamicLightColorScheme(context) dynamicLightColorScheme(context)
} }
val androidColorScheme = AndroidColorScheme(context) val androidColorScheme = AndroidColorScheme(context)
val typography = Typography()
MaterialTheme(colorScheme, typography = typography) { MaterialTheme(colorScheme, typography = SystemUITypography) {
CompositionLocalProvider( CompositionLocalProvider(
LocalAndroidColorScheme provides androidColorScheme, LocalAndroidColorScheme provides androidColorScheme,
) { ) {

View File

@@ -0,0 +1,45 @@
/*
* 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,
)

View File

@@ -0,0 +1,97 @@
/*
* 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
}

View File

@@ -0,0 +1,39 @@
/*
* 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))
}

View File

@@ -0,0 +1,142 @@
/*
* 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,
)
}