letro/letro-android
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Remove ElementColors. We should use semantics and material colors now.

Browse Source
This commit is contained in:
Benoit Marty
2023-07-10 15:22:54 +02:00
committed by Benoit Marty
parent 288ebab4ac
commit 9b042cf056
9 changed files with 29 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt
View File

@@ -162,7 +162,7 @@ private fun AnalyticsOptInContentRow(
modifier = modifier
.fillMaxWidth()
.background(
color = ElementTheme.legacyColors.quinary,
color = ElementTheme.materialColors.surfaceVariant,
shape = bgShape,
)
.padding(vertical = 12.dp, horizontal = 20.dp),

2
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt
View File

@@ -393,7 +393,7 @@ private fun MessageEventBubbleContent(
onLongClick = ::onTimestampLongClick,
modifier = timestampModifier
.padding(horizontal = 4.dp, vertical = 4.dp) // Outer padding
.background(ElementTheme.legacyColors.gray300, RoundedCornerShape(10.0.dp))
.background(ElementTheme.colors.bgSubtleSecondary, RoundedCornerShape(10.0.dp))
.align(Alignment.BottomEnd)
.padding(horizontal = 4.dp, vertical = 2.dp) // Inner padding
)

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt
View File

@@ -59,7 +59,7 @@ fun RoundedIconAtom(
modifier = modifier
.size(size.toContainerSize())
.background(
color = ElementTheme.legacyColors.quinary,
color = ElementTheme.materialColors.surfaceVariant,
shape = RoundedCornerShape(size.toCornerSize())
)
) {

37
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt
View File

@@ -156,10 +156,10 @@ object ElementSearchBarDefaults {
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun inactiveColors() = SearchBarDefaults.colors(
containerColor = ElementTheme.legacyColors.gray300,
containerColor = ElementTheme.materialColors.surfaceVariant,
inputFieldColors = TextFieldDefaults.colors(
unfocusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
focusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
focusedPlaceholderColor = ElementTheme.colors.textDisabled,
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 = ElementTheme.legacyColors.placeholder,
focusedPlaceholderColor = ElementTheme.legacyColors.placeholder,
unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
focusedPlaceholderColor = ElementTheme.colors.textDisabled,
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
@@ -243,19 +243,28 @@ internal fun SearchBarPreviewActiveWithContent() = ElementThemedPreview {
active = true,
resultState = SearchBarResultState.Results("result!"),
contentPrefix = {
Text(text = "Content that goes before the search results", modifier = Modifier
.background(color = Color.Red)
.fillMaxWidth())
Text(
text = "Content that goes before the search results",
modifier = Modifier
.background(color = Color.Red)
.fillMaxWidth()
)
},
contentSuffix = {
Text(text = "Content that goes after the search results", modifier = Modifier
.background(color = Color.Blue)
.fillMaxWidth())
Text(
text = "Content that goes after the search results",
modifier = Modifier
.background(color = Color.Blue)
.fillMaxWidth()
)
},
resultHandler = {
Text(text = "Results go here", modifier = Modifier
.background(color = Color.Green)
.fillMaxWidth())
Text(
text = "Results go here",
modifier = Modifier
.background(color = Color.Green)
.fillMaxWidth()
)
}
)
}

2
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt
View File

@@ -69,7 +69,7 @@ fun UnsavedAvatar(
contentDescription = null,
)
} else {
Box(modifier = commonModifier.background(ElementTheme.legacyColors.quinary)) {
Box(modifier = commonModifier.background(ElementTheme.materialColors.surfaceVariant)) {
Icon(
imageVector = Icons.Outlined.AddAPhoto,
contentDescription = "",

3
libraries/theme/README.md
View File

@@ -8,7 +8,6 @@ The module contains public tokens and color schemes that are later used in `Mate
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`.
@@ -17,5 +16,3 @@ All tokens can be accessed through the `ElementTheme` object, which contains the
## 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`.
As we're still migrating to using Compound tokens, it's possible that you might need to add some tokens manually. In that case, you should add them to `LegacyColors.kt` and map them later in `ElementColors.kt` so they can be used in light and dark themes. However, keep in mind this is just a temporary step, as those tokens should either be added later to Compound or replaced by Compound tokens in the future.

107
libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementColors.kt
View File

@@ -1,107 +0,0 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* 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 io.element.android.libraries.theme
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
import io.element.android.libraries.theme.compound.generated.internal.DarkDesignTokens
import io.element.android.libraries.theme.compound.generated.internal.LightDesignTokens
import io.element.android.libraries.theme.compound.generated.SemanticColors
/**
* Element Android legacy color palette.
*
* ## IMPORTANT!
* **We should not add any new colors here, all new colors should come from [SemanticColors] instead.**
*
* If a design needs you to add a different color here, talk to some designer first, as they'll probably be using
* the legacy color palette.
*/
@Deprecated("Use SemanticColors instead")
@Stable
class ElementColors(
quaternary: Color,
quinary: Color,
gray300: Color,
accentColor: Color,
placeholder: Color,
isLight: Boolean
) {
var quaternary by mutableStateOf(quaternary)
private set
var quinary by mutableStateOf(quinary)
private set
var gray300 by mutableStateOf(gray300)
private set
var accentColor by mutableStateOf(accentColor)
private set
var placeholder by mutableStateOf(placeholder)
private set
var isLight by mutableStateOf(isLight)
private set
fun copy(
quaternary: Color = this.quaternary,
quinary: Color = this.quinary,
gray300: Color = this.gray300,
accentColor: Color = this.accentColor,
placeholder: Color = this.placeholder,
isLight: Boolean = this.isLight,
) = ElementColors(
quaternary = quaternary,
quinary = quinary,
gray300 = gray300,
accentColor = accentColor,
placeholder = placeholder,
isLight = isLight,
)
fun updateColorsFrom(other: ElementColors) {
quaternary = other.quaternary
quinary = other.quinary
gray300 = other.gray300
accentColor = other.accentColor
placeholder = other.placeholder
isLight = other.isLight
}
}
internal fun elementColorsLight() = ElementColors(
quaternary = Gray_100,
quinary = Gray_50,
gray300 = LightDesignTokens.colorGray300,
accentColor = ElementGreen,
placeholder = LightDesignTokens.colorGray800,
isLight = true,
)
internal fun elementColorsDark() = ElementColors(
quaternary = Gray_400,
quinary = Gray_450,
gray300 = DarkDesignTokens.colorGray300,
accentColor = ElementGreen,
placeholder = DarkDesignTokens.colorGray800,
isLight = false,
)

17
libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt
View File

@@ -44,15 +44,6 @@ import io.element.android.libraries.theme.compound.generated.TypographyTokens
* Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace
*/
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 legacyColors: ElementColors
@Composable
@ReadOnlyComposable
get() = LocalLegacyColors.current
/**
* The current [SemanticColors] provided by [ElementTheme].
* These come from Compound and are the recommended colors to use for custom components.
@@ -95,14 +86,12 @@ object ElementTheme {
}
/* Global variables (application level) */
internal val LocalLegacyColors = staticCompositionLocalOf { elementColorsLight() }
internal val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLight }
@Composable
fun ElementTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = false, /* true to enable MaterialYou */
legacyColors: ElementColors = if (darkTheme) elementColorsDark() else elementColorsLight(),
compoundColors: SemanticColors = if (darkTheme) compoundColorsDark else compoundColorsLight,
materialLightColors: ColorScheme = materialColorSchemeLight,
materialDarkColors: ColorScheme = materialColorSchemeDark,
@@ -110,9 +99,6 @@ fun ElementTheme(
content: @Composable () -> Unit,
) {
val systemUiController = rememberSystemUiController()
val currentLegacyColor = remember(darkTheme) {
legacyColors.copy()
}.apply { updateColorsFrom(legacyColors) }
val currentCompoundColor = remember(darkTheme) {
compoundColors.copy()
}.apply { updateColorsFrom(compoundColors) }
@@ -128,7 +114,6 @@ fun ElementTheme(
systemUiController.applyTheme(colorScheme = colorScheme, darkTheme = darkTheme)
}
CompositionLocalProvider(
LocalLegacyColors provides currentLegacyColor,
LocalCompoundColors provides currentCompoundColor,
) {
MaterialTheme(
@@ -149,7 +134,7 @@ fun ForcedDarkElementTheme(
) {
val systemUiController = rememberSystemUiController()
val colorScheme = MaterialTheme.colorScheme
val wasDarkTheme = !ElementTheme.legacyColors.isLight
val wasDarkTheme = !ElementTheme.colors.isLight
DisposableEffect(Unit) {
onDispose {
systemUiController.applyTheme(colorScheme, wasDarkTheme)

3
tools/detekt/detekt.yml
View File

@@ -113,8 +113,7 @@ Compose:
CompositionLocalAllowlist:
active: true
# You can optionally define a list of CompositionLocals that are allowed here
allowedCompositionLocals: LocalLegacyColors, LocalCompoundColors, LocalSnackbarDispatcher
allowedCompositionLocals: LocalCompoundColors, LocalSnackbarDispatcher
CompositionLocalNaming:
active: true
ContentEmitterReturningValues: