Merge changes from topic "sysui-typography" into tm-qpr-dev

* changes:
  Remove references to "google-sans" in SystemUITypography
  Define the SystemUI typography
This commit is contained in:
Jordan Demeulenaere
2022-12-12 11:59:34 +00:00
committed by Android (Google) Code Review
5 changed files with 371 additions and 3 deletions

View File

@@ -18,12 +18,17 @@ 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.runtime.remember
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import com.android.systemui.compose.theme.typography.TypeScaleTokens
import com.android.systemui.compose.theme.typography.TypefaceNames
import com.android.systemui.compose.theme.typography.TypefaceTokens
import com.android.systemui.compose.theme.typography.TypographyTokens
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 +38,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,7 +46,11 @@ fun SystemUITheme(
dynamicLightColorScheme(context) dynamicLightColorScheme(context)
} }
val androidColorScheme = AndroidColorScheme(context) val androidColorScheme = AndroidColorScheme(context)
val typography = Typography() val typefaceNames = remember(context) { TypefaceNames.get(context) }
val typography =
remember(typefaceNames) {
systemUITypography(TypographyTokens(TypeScaleTokens(TypefaceTokens(typefaceNames))))
}
MaterialTheme(colorScheme, typography = typography) { MaterialTheme(colorScheme, typography = typography) {
CompositionLocalProvider( CompositionLocalProvider(

View File

@@ -0,0 +1,46 @@
/*
* 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 fun systemUITypography(typographyTokens: TypographyTokens): Typography {
return 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
internal class TypeScaleTokens(typefaceTokens: TypefaceTokens) {
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,74 @@
/*
* 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 android.content.Context
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
internal class TypefaceTokens(typefaceNames: TypefaceNames) {
companion object {
val WeightMedium = FontWeight.Medium
val WeightRegular = FontWeight.Normal
}
private val brandFont = DeviceFontFamilyName(typefaceNames.brand)
private val plainFont = DeviceFontFamilyName(typefaceNames.plain)
val brand =
FontFamily(
Font(brandFont, weight = WeightMedium),
Font(brandFont, weight = WeightRegular),
)
val plain =
FontFamily(
Font(plainFont, weight = WeightMedium),
Font(plainFont, weight = WeightRegular),
)
}
internal data class TypefaceNames
private constructor(
val brand: String,
val plain: String,
) {
private enum class Config(val configName: String, val default: String) {
Brand("config_headlineFontFamily", "sans-serif"),
Plain("config_bodyFontFamily", "sans-serif"),
}
companion object {
fun get(context: Context): TypefaceNames {
return TypefaceNames(
brand = getTypefaceName(context, Config.Brand),
plain = getTypefaceName(context, Config.Plain),
)
}
private fun getTypefaceName(context: Context, config: Config): String {
return context
.getString(context.resources.getIdentifier(config.configName, "string", "android"))
.takeIf { it.isNotEmpty() }
?: config.default
}
}
}

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
internal class TypographyTokens(typeScaleTokens: TypeScaleTokens) {
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,
)
}