[Compound] implement IconButton changes (#1049)

* Compound: implement IconButton changes.

* Use `LocalContentColor` for tinting

* Update screenshots

* Add changelog

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

changelog.d/1049.misc

@@ -0,0 +1 @@
+Compound: customise `IconButton` component.

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

@@ -17,16 +17,22 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
+import io.element.android.libraries.theme.ElementTheme
+
+// Figma designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=1182%3A48861&mode=design&t=Shlcvznm1oUyqGC2-1
 
 @Composable
 fun IconButton(
@@ -36,11 +42,15 @@ fun IconButton(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable () -> Unit
 ) {
+    val colors = IconButtonDefaults.iconButtonColors(
+        contentColor = LocalContentColor.current,
+        disabledContentColor = ElementTheme.colors.iconDisabled,
+    )
     androidx.compose.material3.IconButton(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        colors = IconButtonDefaults.iconButtonColors(),
+        colors = colors,
         interactionSource = interactionSource,
         content = content,
     )
@@ -53,12 +63,26 @@ internal fun IconButtonPreview() =
 
 @Composable
 private fun ContentToPreview() {
-    Row {
-        IconButton(onClick = {}) {
-            Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+    Column {
+        CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.iconPrimary) {
+            Row {
+                IconButton(onClick = {}) {
+                    Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+                }
+                IconButton(enabled = false, onClick = {}) {
+                    Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+                }
+            }
         }
-        IconButton(enabled = false, onClick = {}) {
-            Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+        CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.iconSecondary) {
+            Row {
+                IconButton(onClick = {}) {
+                    Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+                }
+                IconButton(enabled = false, onClick = {}) {
+                    Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+                }
+            }
         }
     }
 }