Fix SearchBar colors. Also fix tertiary color in dark mode. (#516)

* Fix SearchBar colors. Also fix tertiary color in dark mode.

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchUserBar.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -32,6 +33,7 @@ import io.element.android.libraries.ui.strings.R
 import io.element.android.libraries.usersearch.api.UserSearchResult
 import kotlinx.collections.immutable.ImmutableList
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SearchUserBar(
     query: String,

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/invite/RoomInviteMembersView.kt

@@ -138,6 +138,7 @@ fun RoomInviteMembersTopBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun RoomInviteMembersSearchBar(
     query: String,

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListView.kt

@@ -229,6 +229,7 @@ private fun RoomMemberListTopBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun RoomMemberSearchBar(
     query: String,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/Color.kt

@@ -80,5 +80,8 @@ val Compound_Gray_300_Dark = Color(0xFF1D1F24)
 val Compound_Gray_400_Light = Color(0xFFE1E6EC)
 val Compound_Gray_400_Dark = Color(0xFF26282D)
 
-val Gray_1400_Light = Color(0xFF1B1D22)
-val Gray_1400_Dark = Color(0xFFEBEEF2)
+val Compound_Gray_800_Light = Color(0xFF818A95)
+val Compound_Gray_800_Dark = Color(0xFF656C76)
+
+val Compound_Gray_1400_Light = Color(0xFF1B1D22)
+val Compound_Gray_1400_Dark = Color(0xFFEBEEF2)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/BackButton.kt

@@ -36,7 +36,7 @@ fun BackButton(
     modifier: Modifier = Modifier,
     imageVector: ImageVector = Icons.Default.ArrowBack,
     contentDescription: String = stringResource(StringR.string.action_back),
-    enabled: Boolean = true
+    enabled: Boolean = true,
 ) {
     IconButton(
         modifier = modifier,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt

@@ -25,10 +25,11 @@ import io.element.android.libraries.designsystem.Black_800
 import io.element.android.libraries.designsystem.Black_950
 import io.element.android.libraries.designsystem.Compound_Gray_300_Dark
 import io.element.android.libraries.designsystem.DarkGrey
-import io.element.android.libraries.designsystem.Gray_1400_Dark
+import io.element.android.libraries.designsystem.Compound_Gray_1400_Dark
 import io.element.android.libraries.designsystem.Gray_300
 import io.element.android.libraries.designsystem.Gray_400
 import io.element.android.libraries.designsystem.Compound_Gray_400_Dark
+import io.element.android.libraries.designsystem.Compound_Gray_800_Dark
 import io.element.android.libraries.designsystem.Gray_450
 import io.element.android.libraries.designsystem.SystemGrey5Dark
 import io.element.android.libraries.designsystem.SystemGrey6Dark
@@ -43,8 +44,9 @@ fun elementColorsDark() = ElementColors(
     quinary = Gray_450,
     gray300 = Compound_Gray_300_Dark,
     gray400 = Compound_Gray_400_Dark,
-    gray1400 = Gray_1400_Dark,
+    gray1400 = Compound_Gray_1400_Dark,
     textActionCritical = TextColorCriticalDark,
+    placeholder = Compound_Gray_800_Dark,
     isLight = false,
 )
 
@@ -59,7 +61,7 @@ val materialColorSchemeDark = darkColorScheme(
     // TODO onSecondary = ColorDarkTokens.OnSecondary,
     // TODO secondaryContainer = ColorDarkTokens.SecondaryContainer,
     // TODO onSecondaryContainer = ColorDarkTokens.OnSecondaryContainer,
-    tertiary = Color.White,
+    tertiary = Gray_300,
     // TODO onTertiary = ColorDarkTokens.OnTertiary,
     // TODO tertiaryContainer = ColorDarkTokens.TertiaryContainer,
     // TODO onTertiaryContainer = ColorDarkTokens.OnTertiaryContainer,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt

@@ -24,8 +24,9 @@ import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.Black_900
 import io.element.android.libraries.designsystem.Compound_Gray_300_Light
 import io.element.android.libraries.designsystem.Compound_Gray_400_Light
+import io.element.android.libraries.designsystem.Compound_Gray_800_Light
 import io.element.android.libraries.designsystem.Gray_100
-import io.element.android.libraries.designsystem.Gray_1400_Light
+import io.element.android.libraries.designsystem.Compound_Gray_1400_Light
 import io.element.android.libraries.designsystem.Gray_150
 import io.element.android.libraries.designsystem.Gray_200
 import io.element.android.libraries.designsystem.Gray_25
@@ -43,8 +44,9 @@ fun elementColorsLight() = ElementColors(
     quinary = Gray_50,
     gray300 = Compound_Gray_300_Light,
     gray400 = Compound_Gray_400_Light,
-    gray1400 = Gray_1400_Light,
+    gray1400 = Compound_Gray_1400_Light,
     textActionCritical = TextColorCriticalLight,
+    placeholder = Compound_Gray_800_Light,
     isLight = true,
 )
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt

@@ -33,6 +33,7 @@ class ElementColors(
     gray400: Color,
     gray1400: Color,
     textActionCritical: Color,
+    placeholder: Color,
     isLight: Boolean
 ) {
     var messageFromMeBackground by mutableStateOf(messageFromMeBackground)
@@ -60,6 +61,9 @@ class ElementColors(
     var textActionCritical by mutableStateOf(textActionCritical)
         private set
 
+    var placeholder by mutableStateOf(placeholder)
+        private set
+
     var isLight by mutableStateOf(isLight)
         private set
 
@@ -73,6 +77,7 @@ class ElementColors(
         gray400: Color = this.gray400,
         gray1400: Color = this.gray1400,
         textActionCritical: Color = this.textActionCritical,
+        placeholder: Color = this.placeholder,
         isLight: Boolean = this.isLight,
     ) = ElementColors(
         messageFromMeBackground = messageFromMeBackground,
@@ -84,6 +89,7 @@ class ElementColors(
         gray400 = gray400,
         gray1400 = gray1400,
         textActionCritical = textActionCritical,
+        placeholder = placeholder,
         isLight = isLight,
     )
 
@@ -97,6 +103,7 @@ class ElementColors(
         gray400 = other.gray400
         gray1400 = other.gray1400
         textActionCritical = other.textActionCritical
+        placeholder = other.placeholder
         isLight = other.isLight
     }
 }

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

@@ -29,11 +29,12 @@ import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBarColors
 import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalFocusManager
@@ -45,6 +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.designsystem.theme.LocalColors
 import io.element.android.libraries.ui.strings.R
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -63,6 +65,8 @@ fun <T> SearchBar(
     tonalElevation: Dp = SearchBarDefaults.Elevation,
     windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    inactiveColors: SearchBarColors = ElementSearchBarDefaults.inactiveColors(),
+    activeColors: SearchBarColors = ElementSearchBarDefaults.activeColors(),
     contentPrefix: @Composable ColumnScope.() -> Unit = {},
     contentSuffix: @Composable ColumnScope.() -> Unit = {},
     resultHandler: @Composable ColumnScope.(T) -> Unit = {},
@@ -83,10 +87,7 @@ fun <T> SearchBar(
         modifier = modifier.padding(horizontal = if (!active) 16.dp else 0.dp),
         enabled = enabled,
         placeholder = {
-            Text(
-                text = placeHolderTitle,
-                modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
-            )
+            Text(text = placeHolderTitle)
         },
         leadingIcon = if (showBackButton && active) {
             { BackButton(onClick = { onActiveChange(false) }) }
@@ -97,7 +98,10 @@ fun <T> SearchBar(
             active && query.isNotEmpty() -> {
                 {
                     IconButton(onClick = { onQueryChange("") }) {
-                        Icon(Icons.Default.Close, stringResource(R.string.action_clear))
+                        Icon(
+                            imageVector = Icons.Default.Close,
+                            contentDescription = stringResource(R.string.action_clear),
+                        )
                     }
                 }
             }
@@ -107,7 +111,7 @@ fun <T> SearchBar(
                     Icon(
                         imageVector = Icons.Default.Search,
                         contentDescription = stringResource(R.string.action_search),
-                        modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
+                        tint = MaterialTheme.colorScheme.tertiary,
                     )
                 }
             }
@@ -115,7 +119,7 @@ fun <T> SearchBar(
             else -> null
         },
         shape = shape,
-        colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
+        colors = if (active) activeColors else inactiveColors,
         tonalElevation = tonalElevation,
         windowInsets = windowInsets,
         interactionSource = interactionSource,
@@ -147,6 +151,37 @@ fun <T> SearchBar(
     )
 }
 
+object ElementSearchBarDefaults {
+
+    @OptIn(ExperimentalMaterial3Api::class)
+    @Composable
+    fun inactiveColors() = SearchBarDefaults.colors(
+        containerColor = LocalColors.current.gray300,
+        inputFieldColors = TextFieldDefaults.colors(
+            unfocusedPlaceholderColor = LocalColors.current.placeholder,
+            focusedPlaceholderColor = LocalColors.current.placeholder,
+            unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
+            focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
+            unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
+            focusedTrailingIconColor = MaterialTheme.colorScheme.primary,
+        )
+    )
+
+    @OptIn(ExperimentalMaterial3Api::class)
+    @Composable
+    fun activeColors() = SearchBarDefaults.colors(
+        containerColor = Color.Transparent,
+        inputFieldColors = TextFieldDefaults.colors(
+            unfocusedPlaceholderColor = LocalColors.current.placeholder,
+            focusedPlaceholderColor = LocalColors.current.placeholder,
+            unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
+            focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
+            unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
+            focusedTrailingIconColor = MaterialTheme.colorScheme.primary,
+        )
+    )
+}
+
 sealed interface SearchBarResultState<in T> {
     /** No search results are available yet (e.g. because the user hasn't entered a search term). */
     class NotSearching<T> : SearchBarResultState<T>
@@ -208,17 +243,24 @@ 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())
         }
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun ContentToPreview(
     query: String = "",