Link Compound's TypographyTokens to ElementTheme. (#700)
* Link Compound's `TypographyTokens` to `ElementTheme`. Also add some docs about when we should use each set of tokens. * Renamed `LocalColors` to `LocalLegacyColors`. Made both `LocalLegacyColors` and `LocalCompoundColors` internal. This means it will need to always be used through `ElementTheme.` Also, removed any usages of `LocalColors.current` accross the project, they're now used through `ElementTheme.legacyColors`.
This commit is contained in:
Jorge Martin Espinosa
GitHub
parent
e472975069
commit
683b0b3594
21 changed files with 78 additions and 53 deletions
|
|
@ -36,7 +36,7 @@ fun PlaceholderAtom(
|
|||
width: Dp,
|
||||
height: Dp,
|
||||
modifier: Modifier = Modifier,
|
||||
color: Color = ElementTheme.compoundColors.textPlaceholder,
|
||||
color: Color = ElementTheme.colors.textPlaceholder,
|
||||
) {
|
||||
Box(
|
||||
modifier = modifier
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ import androidx.compose.ui.unit.Dp
|
|||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
|
||||
import io.element.android.libraries.theme.LocalColors
|
||||
import io.element.android.libraries.designsystem.theme.components.Icon
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
|
||||
/**
|
||||
* RoundedIconAtom is an atom which displays an icon inside a rounded container.
|
||||
|
|
@ -59,7 +59,7 @@ fun RoundedIconAtom(
|
|||
modifier = modifier
|
||||
.size(size.toContainerSize())
|
||||
.background(
|
||||
color = LocalColors.current.quinary,
|
||||
color = ElementTheme.legacyColors.quinary,
|
||||
shape = RoundedCornerShape(size.toCornerSize())
|
||||
)
|
||||
) {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ fun ModalBottomSheet(
|
|||
shape: Shape = BottomSheetDefaults.ExpandedShape,
|
||||
containerColor: Color = BottomSheetDefaults.ContainerColor,
|
||||
contentColor: Color = contentColorFor(containerColor),
|
||||
tonalElevation: Dp = if (ElementTheme.colors.isLight) 0.dp else BottomSheetDefaults.Elevation,
|
||||
tonalElevation: Dp = if (ElementTheme.isLightTheme) 0.dp else BottomSheetDefaults.Elevation,
|
||||
scrimColor: Color = BottomSheetDefaults.ScrimColor,
|
||||
dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
|
||||
windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ import androidx.compose.ui.unit.dp
|
|||
import io.element.android.libraries.designsystem.components.button.BackButton
|
||||
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.theme.LocalColors
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
|
|
@ -156,10 +156,10 @@ object ElementSearchBarDefaults {
|
|||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun inactiveColors() = SearchBarDefaults.colors(
|
||||
containerColor = LocalColors.current.gray300,
|
||||
containerColor = ElementTheme.legacyColors.gray300,
|
||||
inputFieldColors = TextFieldDefaults.colors(
|
||||
unfocusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
focusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
unfocusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
|
||||
focusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
|
||||
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
|
||||
|
|
@ -172,8 +172,8 @@ object ElementSearchBarDefaults {
|
|||
fun activeColors() = SearchBarDefaults.colors(
|
||||
containerColor = Color.Transparent,
|
||||
inputFieldColors = TextFieldDefaults.colors(
|
||||
unfocusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
focusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
unfocusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
|
||||
focusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
|
||||
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ import coil.request.ImageRequest
|
|||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
|
||||
import io.element.android.libraries.designsystem.preview.debugPlaceholderBackground
|
||||
import io.element.android.libraries.theme.LocalColors
|
||||
import io.element.android.libraries.designsystem.theme.components.Icon
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
|
||||
/**
|
||||
* An avatar that the user has selected, but which has not yet been uploaded to Matrix.
|
||||
|
|
@ -69,7 +69,7 @@ fun UnsavedAvatar(
|
|||
contentDescription = null,
|
||||
)
|
||||
} else {
|
||||
Box(modifier = commonModifier.background(LocalColors.current.quinary)) {
|
||||
Box(modifier = commonModifier.background(ElementTheme.legacyColors.quinary)) {
|
||||
Icon(
|
||||
imageVector = Icons.Outlined.AddAPhoto,
|
||||
contentDescription = "",
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ import io.element.android.libraries.matrix.api.media.MediaSource
|
|||
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
|
||||
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
|
||||
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
|
||||
import io.element.android.libraries.theme.LocalColors
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
|
|
@ -136,7 +136,7 @@ fun TextComposer(
|
|||
lineCount = it.lineCount
|
||||
},
|
||||
textStyle = defaultTypography.copy(color = MaterialTheme.colorScheme.primary),
|
||||
cursorBrush = SolidColor(LocalColors.current.accentColor),
|
||||
cursorBrush = SolidColor(ElementTheme.legacyColors.accentColor),
|
||||
decorationBox = { innerTextField ->
|
||||
TextFieldDefaults.DecorationBox(
|
||||
value = text,
|
||||
|
|
@ -346,7 +346,7 @@ private fun BoxScope.SendButton(
|
|||
Box(
|
||||
modifier = modifier
|
||||
.clip(CircleShape)
|
||||
.background(if (canSendMessage) LocalColors.current.accentColor else Color.Transparent)
|
||||
.background(if (canSendMessage) ElementTheme.legacyColors.accentColor else Color.Transparent)
|
||||
.size(30.dp)
|
||||
.align(Alignment.BottomEnd)
|
||||
.applyIf(composerMode !is MessageComposerMode.Edit, ifTrue = {
|
||||
|
|
@ -373,7 +373,7 @@ private fun BoxScope.SendButton(
|
|||
modifier = Modifier.size(16.dp),
|
||||
resourceId = iconId,
|
||||
contentDescription = contentDescription,
|
||||
tint = if (canSendMessage) Color.White else LocalColors.current.quaternary
|
||||
tint = if (canSendMessage) Color.White else ElementTheme.legacyColors.quaternary
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@ This module contains the theme tokens for the application, including those auto-
|
|||
|
||||
The module contains public tokens and color schemes that are later used in `MaterialTheme` and added to `ElementTheme` for use in the application.
|
||||
|
||||
All tokens can be accessed through the `ElementTheme` object, which contains the following properties:
|
||||
|
||||
* `ElementTheme.legacyColors`: contains legacy colors and custom colors not present in either Material or Compound. Usage of these colors should be avoided, and they're usually prefixed in Figma with the `Zzz/` prefix or have no name at all.
|
||||
* `ElementTheme.materialColors`: contains all Material color tokens. In Figma, they're prefixed with `M3/`. It's an alias to `MaterialTheme.colorScheme`.
|
||||
* `ElementTheme.colors`: contains all Compound semantic color tokens. In Figma, they're prefixed with either `Light/` or `Dark/`.
|
||||
* `ElementTheme.materialTypography`: contains the Material `Typography` values. In Figma, they're prefixed with `M3/`. It's an alias to `MaterialTheme.typography`.
|
||||
* `ElementTheme.typography`: contains the Compound `TypographyTokens` values. In Figma, they're prefixed with `Android/font/`.
|
||||
|
||||
## Adding new tokens
|
||||
|
||||
All new tokens **should** come from Compound and added to the `compound.generated` package. To map the literal tokens to the semantic ones, you'll have to update both `compoundColorsLight` and `compoundColorsDark` in `CompoundColors.kt`.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import io.element.android.libraries.theme.compound.generated.internal.LightDesig
|
|||
import io.element.android.libraries.theme.compound.generated.SemanticColors
|
||||
|
||||
/**
|
||||
* Element color palette.
|
||||
* Element Android legacy color palette.
|
||||
*
|
||||
* ## IMPORTANT!
|
||||
* **We should not add any new colors here, all new colors should come from [SemanticColors] instead.**
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import io.element.android.libraries.theme.compound.compoundColorsDark
|
|||
import io.element.android.libraries.theme.compound.compoundColorsLight
|
||||
import io.element.android.libraries.theme.compound.compoundTypography
|
||||
import io.element.android.libraries.theme.compound.generated.SemanticColors
|
||||
import io.element.android.libraries.theme.compound.generated.TypographyTokens
|
||||
|
||||
/**
|
||||
* Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace
|
||||
|
|
@ -45,23 +46,26 @@ import io.element.android.libraries.theme.compound.generated.SemanticColors
|
|||
object ElementTheme {
|
||||
/**
|
||||
* The current [ElementColors] provided by [ElementTheme]. Usage of these colors is discouraged.
|
||||
* In Figma, they usually have the `Zzz` prefix or have no name at all.
|
||||
*/
|
||||
val colors: ElementColors
|
||||
val legacyColors: ElementColors
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = LocalColors.current
|
||||
get() = LocalLegacyColors.current
|
||||
|
||||
/**
|
||||
* The current [SemanticColors] provided by [ElementTheme].
|
||||
* These come from Compound and are the recommended colors to use for custom components.
|
||||
* In Figma, these colors usually have the `Light/` or `Dark/` prefix.
|
||||
*/
|
||||
val compoundColors: SemanticColors
|
||||
val colors: SemanticColors
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = LocalCompoundColors.current
|
||||
|
||||
/**
|
||||
* The current Material 3 [ColorScheme] provided by [ElementTheme], coming from [MaterialTheme].
|
||||
* In Figma, these colors usually have the `M3/` prefix.
|
||||
*/
|
||||
val materialColors: ColorScheme
|
||||
@Composable
|
||||
|
|
@ -69,23 +73,36 @@ object ElementTheme {
|
|||
get() = MaterialTheme.colorScheme
|
||||
|
||||
/**
|
||||
* Material 3 [Typography] tokens.
|
||||
* Material 3 [Typography] tokens. In Figma, these have the `M3/` prefix.
|
||||
*/
|
||||
val typography: Typography
|
||||
val materialTypography: Typography
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = MaterialTheme.typography
|
||||
|
||||
/**
|
||||
* Compound [Typography] tokens. In Figma, these have the `Android/font/` prefix.
|
||||
*/
|
||||
val typography: TypographyTokens = TypographyTokens
|
||||
|
||||
/**
|
||||
* Returns whether the theme version used is the light or the dark one.
|
||||
*/
|
||||
val isLightTheme: Boolean
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = LocalCompoundColors.current.isLight
|
||||
}
|
||||
|
||||
/* Global variables (application level) */
|
||||
val LocalColors = staticCompositionLocalOf { elementColorsLight() }
|
||||
val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLight }
|
||||
internal val LocalLegacyColors = staticCompositionLocalOf { elementColorsLight() }
|
||||
internal val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLight }
|
||||
|
||||
@Composable
|
||||
fun ElementTheme(
|
||||
darkTheme: Boolean = isSystemInDarkTheme(),
|
||||
dynamicColor: Boolean = false, /* true to enable MaterialYou */
|
||||
colors: ElementColors = if (darkTheme) elementColorsDark() else elementColorsLight(),
|
||||
legacyColors: ElementColors = if (darkTheme) elementColorsDark() else elementColorsLight(),
|
||||
compoundColors: SemanticColors = if (darkTheme) compoundColorsDark else compoundColorsLight,
|
||||
materialLightColors: ColorScheme = materialColorSchemeLight,
|
||||
materialDarkColors: ColorScheme = materialColorSchemeDark,
|
||||
|
|
@ -93,9 +110,9 @@ fun ElementTheme(
|
|||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val systemUiController = rememberSystemUiController()
|
||||
val currentColor = remember(darkTheme) {
|
||||
colors.copy()
|
||||
}.apply { updateColorsFrom(colors) }
|
||||
val currentLegacyColor = remember(darkTheme) {
|
||||
legacyColors.copy()
|
||||
}.apply { updateColorsFrom(legacyColors) }
|
||||
val currentCompoundColor = remember(darkTheme) {
|
||||
compoundColors.copy()
|
||||
}.apply { updateColorsFrom(compoundColors) }
|
||||
|
|
@ -111,7 +128,7 @@ fun ElementTheme(
|
|||
systemUiController.applyTheme(colorScheme = colorScheme, darkTheme = darkTheme)
|
||||
}
|
||||
CompositionLocalProvider(
|
||||
LocalColors provides currentColor,
|
||||
LocalLegacyColors provides currentLegacyColor,
|
||||
LocalCompoundColors provides currentCompoundColor,
|
||||
) {
|
||||
MaterialTheme(
|
||||
|
|
@ -132,7 +149,7 @@ fun ForcedDarkElementTheme(
|
|||
) {
|
||||
val systemUiController = rememberSystemUiController()
|
||||
val colorScheme = MaterialTheme.colorScheme
|
||||
val wasDarkTheme = !ElementTheme.colors.isLight
|
||||
val wasDarkTheme = !ElementTheme.legacyColors.isLight
|
||||
DisposableEffect(Unit) {
|
||||
onDispose {
|
||||
systemUiController.applyTheme(colorScheme, wasDarkTheme)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue