Timeline: start refine bubbles

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt

@@ -6,4 +6,7 @@ val LightGrey = Color(0x993C3C43)
 val DarkGrey = Color(0x99EBEBF5)
 
 val AvatarGradientStart = Color(0xFF4CA1AF)
-val AvatarGradientEnd = Color(0xFFC4E0E5)
+val AvatarGradientEnd = Color(0xFFC4E0E5)
+
+val SystemGreyLight = Color(0xFFE5E5EA)
+val SystemGreyDark = Color(0xFF1C1C1E)

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Theme.kt

@@ -16,7 +16,9 @@ private val DarkColorScheme = darkColorScheme(
     background = Color.Black,
     onBackground = Color.White,
     surface = Color.Black,
-    onSurface = Color.White
+    surfaceVariant = SystemGreyDark,
+    onSurface = Color.White,
+    onSurfaceVariant = Color.White,
 )
 
 private val LightColorScheme = lightColorScheme(
@@ -26,7 +28,9 @@ private val LightColorScheme = lightColorScheme(
     background = Color.White,
     onBackground = Color.Black,
     surface = Color.White,
-    onSurface = Color.Black
+    surfaceVariant = SystemGreyLight,
+    onSurface = Color.Black,
+    onSurfaceVariant = Color.Black,
 
     /* Other default colors to override
     background = Color(0xFFFFFBFE),