Remove ElementColors. We should use semantics and material colors now.
This commit is contained in:
parent
bcb64f7d44
commit
e2f3f2966b
9 changed files with 29 additions and 146 deletions
|
|
@ -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,
|
||||
)
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue