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
2022-05-24 14:13:29 +02:00
parent 3c86fce3a9
commit 8c222cabb6
5 changed files with 326 additions and 4 deletions
--- a/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/SystemUITheme.kt
+++ b/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/SystemUITheme.kt
@@ -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,
        ) {
--- a/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/SystemUITypography.kt
+++ b/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/SystemUITypography.kt
@@ -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,
+    )
--- a/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/TypeScaleTokens.kt
+++ b/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/TypeScaleTokens.kt
@@ -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
+}
--- a/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/TypefaceTokens.kt
+++ b/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/TypefaceTokens.kt
@@ -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))
+}
--- a/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/TypographyTokens.kt
+++ b/packages/SystemUI/compose/core/src/com/android/systemui/compose/theme/typography/TypographyTokens.kt
@@ -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,
+        )
+}