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:
committed by
Android (Google) Code Review
commit
d964925ed8
@@ -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(
|
||||||
|
|||||||
@@ -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,
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user