diff --git a/features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt b/features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt index 48f9e60258..43629a002a 100644 --- a/features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt +++ b/features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt @@ -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), diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt index 7f18ad2fdf..4f6854409e 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt @@ -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 ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt index c007e52a29..e7fdb47ede 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt @@ -59,7 +59,7 @@ fun RoundedIconAtom( modifier = modifier .size(size.toContainerSize()) .background( - color = ElementTheme.legacyColors.quinary, + color = ElementTheme.materialColors.surfaceVariant, shape = RoundedCornerShape(size.toCornerSize()) ) ) { diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt index 23f656d21c..c129499a56 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt @@ -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() + ) } ) } diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt index 8a7ac0afca..8a462b8a1f 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt @@ -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 = "", diff --git a/libraries/theme/README.md b/libraries/theme/README.md index 76e656f651..3ab81305b3 100644 --- a/libraries/theme/README.md +++ b/libraries/theme/README.md @@ -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. diff --git a/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementColors.kt b/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementColors.kt deleted file mode 100644 index 4d20d97a22..0000000000 --- a/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementColors.kt +++ /dev/null @@ -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, -) diff --git a/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt b/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt index 100e7410b9..c6a1917954 100644 --- a/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt +++ b/libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt @@ -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) diff --git a/tools/detekt/detekt.yml b/tools/detekt/detekt.yml index d1606ec1f7..f18f49a358 100644 --- a/tools/detekt/detekt.yml +++ b/tools/detekt/detekt.yml @@ -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: