Fix message color bubbles.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt

@@ -44,6 +44,8 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.messageFromMeBackground
+import io.element.android.libraries.designsystem.theme.messageFromOtherBackground
 import io.element.android.libraries.theme.ElementTheme
 
 private val BUBBLE_RADIUS = 12.dp
@@ -99,9 +101,9 @@ fun MessageEventBubble(
 
     // Ignore state.isHighlighted for now, we need a design decision on it.
     val backgroundBubbleColor = if (state.isMine) {
-        ElementTheme.legacyColors.messageFromMeBackground
+        ElementTheme.colors.messageFromMeBackground
     } else {
-        ElementTheme.legacyColors.messageFromOtherBackground
+        ElementTheme.colors.messageFromOtherBackground
     }
     val bubbleShape = bubbleShape()
     Box(

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

@@ -45,6 +45,26 @@ val SemanticColors.unreadIndicator
 val SemanticColors.roomListPlaceholder
     get() = bgSubtleSecondary
 
+// This color is not present in Semantic color, so put hard-coded value for now
+val SemanticColors.messageFromMeBackground
+    get() = if (isLight) {
+        // We want LightDesignTokens.colorGray400
+        Color(0xFFE1E6EC)
+    } else {
+        // We want DarkDesignTokens.colorGray500
+        Color(0xFF323539)
+    }
+
+// This color is not present in Semantic color, so put hard-coded value for now
+val SemanticColors.messageFromOtherBackground
+    get() = if (isLight) {
+        // We want LightDesignTokens.colorGray300
+        Color(0xFFF0F2F5)
+    } else {
+        // We want DarkDesignTokens.colorGray400
+        Color(0xFF26282D)
+    }
+
 @Preview
 @Composable
 internal fun ColorAliasesLightPreview() = ElementPreviewLight { ContentToPreview() }
@@ -64,6 +84,8 @@ private fun ContentToPreview() {
             "roomListRoomMessageDate" to MaterialTheme.roomListRoomMessageDate(),
             "unreadIndicator" to ElementTheme.colors.unreadIndicator,
             "roomListPlaceholder" to ElementTheme.colors.roomListPlaceholder,
+            "messageFromMeBackground" to ElementTheme.colors.messageFromMeBackground,
+            "messageFromOtherBackground" to ElementTheme.colors.messageFromOtherBackground,
         )
     )
 }

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

@@ -37,8 +37,6 @@ import io.element.android.libraries.theme.compound.generated.SemanticColors
 @Deprecated("Use SemanticColors instead")
 @Stable
 class ElementColors(
-    messageFromMeBackground: Color,
-    messageFromOtherBackground: Color,
     quaternary: Color,
     quinary: Color,
     gray300: Color,
@@ -46,11 +44,6 @@ class ElementColors(
     placeholder: Color,
     isLight: Boolean
 ) {
-    var messageFromMeBackground by mutableStateOf(messageFromMeBackground)
-        private set
-    var messageFromOtherBackground by mutableStateOf(messageFromOtherBackground)
-        private set
-
     var quaternary by mutableStateOf(quaternary)
         private set
 
@@ -70,8 +63,6 @@ class ElementColors(
         private set
 
     fun copy(
-        messageFromMeBackground: Color = this.messageFromMeBackground,
-        messageFromOtherBackground: Color = this.messageFromOtherBackground,
         quaternary: Color = this.quaternary,
         quinary: Color = this.quinary,
         gray300: Color = this.gray300,
@@ -79,8 +70,6 @@ class ElementColors(
         placeholder: Color = this.placeholder,
         isLight: Boolean = this.isLight,
     ) = ElementColors(
-        messageFromMeBackground = messageFromMeBackground,
-        messageFromOtherBackground = messageFromOtherBackground,
         quaternary = quaternary,
         quinary = quinary,
         gray300 = gray300,
@@ -90,8 +79,6 @@ class ElementColors(
     )
 
     fun updateColorsFrom(other: ElementColors) {
-        messageFromMeBackground = other.messageFromMeBackground
-        messageFromOtherBackground = other.messageFromOtherBackground
         quaternary = other.quaternary
         quinary = other.quinary
         gray300 = other.gray300
@@ -102,8 +89,6 @@ class ElementColors(
 }
 
 internal fun elementColorsLight() = ElementColors(
-    messageFromMeBackground = SystemGrey5Light,
-    messageFromOtherBackground = SystemGrey6Light,
     quaternary = Gray_100,
     quinary = Gray_50,
     gray300 = LightDesignTokens.colorGray300,
@@ -113,8 +98,6 @@ internal fun elementColorsLight() = ElementColors(
 )
 
 internal fun elementColorsDark() = ElementColors(
-    messageFromMeBackground = SystemGrey5Dark,
-    messageFromOtherBackground = SystemGrey6Dark,
     quaternary = Gray_400,
     quinary = Gray_450,
     gray300 = DarkDesignTokens.colorGray300,