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

This commit is contained in:
Benoit Marty 2023-07-10 15:22:54 +02:00 committed by Benoit Marty
parent bcb64f7d44
commit e2f3f2966b
9 changed files with 29 additions and 146 deletions

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,
)

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)