fix: resolve custom colors [WPB-11475] (#3656)

app/build.gradle.kts

@@ -123,6 +123,10 @@ android {
         getByName("androidTest") {
             java.srcDirs("src/androidTest/kotlin")
         }
+        create("screenshotTest") {
+            java.srcDirs("src/screenshotTest/kotlin")
+            res.srcDirs("src/main/res")
+        }
     }
 }
 

app/src/androidTest/kotlin/com/wire/android/ui/WireTestTheme.kt

@@ -22,17 +22,20 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import com.wire.android.ui.common.snackbar.LocalSnackbarHostState
+import com.wire.android.ui.theme.DefaultWireFixedColorScheme
 import com.wire.android.ui.theme.WireColorScheme
 import com.wire.android.ui.theme.WireColorSchemeTypes
 import com.wire.android.ui.theme.WireDimensions
 import com.wire.android.ui.theme.WireDimensionsTypes
+import com.wire.android.ui.theme.WireFixedColorScheme
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.WireTypography
 import com.wire.android.ui.theme.WireTypographyTypes
 
 @Composable
 fun WireTestTheme(
     wireColorScheme: WireColorScheme = WireColorSchemeTypes.currentTheme,
+    wireFixedColorScheme: WireFixedColorScheme = DefaultWireFixedColorScheme,
     wireTypography: WireTypography = WireTypographyTypes.currentScreenSize,
     wireDimensions: WireDimensions = WireDimensionsTypes.currentScreenSize.currentOrientation,
     content: @Composable () -> Unit
@@ -41,6 +44,7 @@ fun WireTestTheme(
         CompositionLocalProvider(LocalSnackbarHostState provides snackbarHostState) {
             WireTheme(
                 wireColorScheme,
+                wireFixedColorScheme,
                 wireTypography,
                 wireDimensions,
                 content

app/src/main/kotlin/com/wire/android/ui/authentication/devices/DeviceItem.kt

@@ -247,7 +247,7 @@ private fun MLSDetails(
     device.mlsClientIdentity?.let { identity ->
         Text(
             style = MaterialTheme.wireTypography.subline01,
-            color = MaterialTheme.wireColorScheme.labelText,
+            color = MaterialTheme.wireColorScheme.secondaryText,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
             text = stringResource(
@@ -289,7 +289,7 @@ private fun ProteusDetails(
     }
     Text(
         style = MaterialTheme.wireTypography.subline01,
-        color = MaterialTheme.wireColorScheme.labelText,
+        color = MaterialTheme.wireColorScheme.secondaryText,
         text = proteusDetails,
         minLines = 2,
         modifier = Modifier

app/src/main/kotlin/com/wire/android/ui/authentication/devices/remove/RemoveDeviceTopBar.kt

@@ -55,7 +55,7 @@ fun RemoveDeviceTopBar(elevation: Dp, onBackButtonClicked: () -> Unit, modifier:
         Text(
             text = stringResource(id = R.string.remove_device_label),
             style = MaterialTheme.wireTypography.title03,
-            color = MaterialTheme.wireColorScheme.labelText,
+            color = MaterialTheme.wireColorScheme.secondaryText,
             modifier = Modifier.padding(
                 horizontal = MaterialTheme.wireDimensions.removeDeviceHorizontalPadding,
                 vertical = MaterialTheme.wireDimensions.removeDeviceLabelVerticalPadding

app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailScreen.kt

@@ -150,7 +150,7 @@ private fun LoginEmailContent(
                 Text(
                     text = stringResource(R.string.label_wire_credentials),
                     style = MaterialTheme.wireTypography.title03.copy(
-                        color = colorsScheme().labelText
+                        color = colorsScheme().secondaryText
                     ),
                     modifier = Modifier
                         .fillMaxWidth()

app/src/main/kotlin/com/wire/android/ui/authentication/login/email/ProxyScreen.kt

@@ -63,7 +63,7 @@ fun ProxyScreen(
         Text(
             text = stringResource(R.string.label_proxy_credentials),
             style = MaterialTheme.wireTypography.title03.copy(
-                color = colorsScheme().labelText
+                color = colorsScheme().secondaryText
             ),
             modifier = Modifier
                 .fillMaxWidth()

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/WireCallControlButton.kt

@@ -48,14 +48,14 @@ fun WireCallControlButton(
         shape = CircleShape,
         colors = with(colorsScheme()) {
             wireSecondaryButtonColors().copy(
-                selected = callingControlButtonActive,
-                selectedOutline = callingControlButtonActiveOutline,
-                onSelected = onCallingControlButtonActive,
-                selectedRipple = onCallingControlButtonActive,
-                enabled = callingControlButtonInactive,
-                enabledOutline = callingControlButtonInactiveOutline,
-                onEnabled = onCallingControlButtonInactive,
-                enabledRipple = onCallingControlButtonInactive,
+                selected = inverseSurface,
+                selectedOutline = inverseSurface,
+                onSelected = inverseOnSurface,
+                selectedRipple = inverseOnSurface,
+                enabled = secondaryButtonEnabled,
+                enabledOutline = secondaryButtonEnabledOutline,
+                onEnabled = onSecondaryButtonEnabled,
+                enabledRipple = secondaryButtonRipple,
             )
         },
         contentDescription = contentDescription,

app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/FloatingSelfUserTile.kt

@@ -118,7 +118,7 @@ fun FloatingSelfUserTile(
     }
 
     Card(
-        border = BorderStroke(1.dp, colorsScheme().uncheckedColor),
+        border = BorderStroke(1.dp, colorsScheme().onSecondaryButtonDisabled),
         shape = RoundedCornerShape(dimensions().corner6x),
         modifier = modifier
             .height(selfVideoTileHeight)

app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantTile.kt

@@ -77,10 +77,10 @@ import com.wire.android.ui.calling.model.UICallParticipant
 import com.wire.android.ui.common.avatar.UserProfileAvatar
 import com.wire.android.ui.common.avatar.UserProfileAvatarType
 import com.wire.android.ui.common.colorsScheme
+import com.wire.android.ui.common.darkColorsScheme
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.home.conversationslist.model.Membership
 import com.wire.android.ui.theme.WireTheme
-import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.ui.PreviewMultipleThemes
 import com.wire.kalium.logic.data.id.QualifiedID
@@ -104,7 +104,7 @@ fun ParticipantTile(
     Surface(
         modifier = modifier
             .thenIf(participantTitleState.isSpeaking, activeSpeakerBorderModifier),
-        color = colorsScheme().callingParticipantTileBackgroundColor,
+        color = darkColorsScheme().surfaceContainer,
         shape = RoundedCornerShape(if (participantTitleState.isSpeaking) dimensions().corner8x else dimensions().corner3x),
     ) {
         ConstraintLayout {
@@ -273,7 +273,7 @@ private fun CameraPreview(
     if (isCameraOn) {
         isCameraStopped = false
         val context = LocalContext.current
-        val backgroundColor = colorsScheme().callingParticipantTileBackgroundColor.value.toInt()
+        val backgroundColor = darkColorsScheme().surfaceContainer.value.toInt()
         val videoPreview = remember {
             CameraPreviewBuilder(context)
                 .setBackgroundColor(backgroundColor)
@@ -308,8 +308,7 @@ private fun OthersVideoRenderer(
     var offsetY by remember { mutableStateOf(0f) }
 
     val context = LocalContext.current
-    val rendererFillColor =
-        (colorsScheme().callingParticipantTileBackgroundColor.value shr 32).toLong()
+    val rendererFillColor = (darkColorsScheme().surfaceContainer.value shr 32).toLong()
     if (isCameraOn || isSharingScreen) {
 
         val videoRenderer = remember {
@@ -391,12 +390,12 @@ private fun UsernameTile(
     modifier: Modifier = Modifier,
 ) {
     val color =
-        if (isSpeaking) colorsScheme().primary else colorsScheme().callingParticipantNameBackground
+        if (isSpeaking) colorsScheme().primary else darkColorsScheme().surfaceContainerLowest
     val nameLabelColor =
         when {
             isSpeaking -> colorsScheme().onPrimary
-            hasEstablishedAudio -> colorsScheme().callingParticipantNameText
-            else -> colorsScheme().callingParticipantNameConnectingText
+            hasEstablishedAudio -> darkColorsScheme().onSurface
+            else -> darkColorsScheme().secondaryText
         }
 
     Surface(
@@ -418,7 +417,7 @@ private fun UsernameTile(
             )
             if (!hasEstablishedAudio) {
                 Text(
-                    color = colorsScheme().callingParticipantError,
+                    color = darkColorsScheme().error,
                     style = MaterialTheme.wireTypography.label01,
                     text = stringResource(id = R.string.participant_tile_call_connecting_label),
                     maxLines = 1,
@@ -445,7 +444,7 @@ private fun MicrophoneTile(
                     .padding(dimensions().spacing3x)
                     .size(dimensions().spacing16x),
                 imageVector = ImageVector.vectorResource(id = R.drawable.ic_participant_muted),
-                tint = MaterialTheme.wireColorScheme.callingParticipantError,
+                tint = darkColorsScheme().error,
                 contentDescription = stringResource(R.string.content_description_calling_participant_muted)
             )
         }

app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/VerticalCallingPager.kt

@@ -46,7 +46,6 @@ import com.wire.android.ui.calling.ongoing.buildPreviewParticipantsList
 import com.wire.android.ui.calling.ongoing.fullscreen.SelectedParticipant
 import com.wire.android.ui.calling.ongoing.participantsview.gridview.GroupCallGrid
 import com.wire.android.ui.calling.ongoing.participantsview.horizentalview.CallingHorizontalView
-import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireDimensions
@@ -120,6 +119,7 @@ fun VerticalCallingPager(
                             onSelfClearVideoPreview = onSelfClearVideoPreview,
                             onDoubleTap = onDoubleTap,
                             currentUserId = currentUserId,
+                            isInPictureInPictureMode = isInPictureInPictureMode,
                         )
                     }
 
@@ -139,15 +139,10 @@ fun VerticalCallingPager(
                     modifier = Modifier
                         .align(Alignment.CenterEnd)
                         .padding(end = MaterialTheme.wireDimensions.spacing12x),
-                    color = colorsScheme().callingPagerIndicatorBackground,
                 ) {
                     VerticalPagerIndicator(
                         modifier = Modifier.padding(dimensions().spacing4x),
                         pagerState = pagerState,
-                        activeColor = colorsScheme().callingActiveIndicator,
-                        inactiveColor = colorsScheme().callingInActiveIndicator,
-                        inactiveBorderColor = colorsScheme().callingInActiveBorderIndicator,
-                        inactiveBorderWidth = dimensions().spacing2x,
                         indicatorHeight = dimensions().spacing12x,
                         indicatorWidth = dimensions().spacing12x,
                         spacing = dimensions().spacing6x,
@@ -183,7 +178,7 @@ private fun PreviewVerticalCallingPager(participants: List<UICallParticipant>) {
         requestVideoStreams = {},
         onDoubleTap = { },
         isInPictureInPictureMode = false,
-        currentUserId = UserId("id", "domain")
+        currentUserId = participants[0].id,
     )
 }
 
@@ -200,5 +195,5 @@ fun PreviewVerticalCallingPagerHorizontalView() = WireTheme {
 @PreviewMultipleThemes
 @Composable
 fun PreviewVerticalCallingPagerGrid() = WireTheme {
-    PreviewVerticalCallingPager(participants = buildPreviewParticipantsList(MAX_TILES_PER_PAGE))
+    PreviewVerticalCallingPager(participants = buildPreviewParticipantsList(MAX_TILES_PER_PAGE + 1))
 }

app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/VerticalPagerIndicator.kt

@@ -18,7 +18,6 @@
 
 package com.wire.android.ui.calling.ongoing.participantsview
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
@@ -36,37 +35,39 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
 import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 /**
  * Updating VerticalPagerIndicator from com.google.accompanist.pager to have the ability to add a border to the pager indicator
  */
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun VerticalPagerIndicator(
     pagerState: PagerState,
     modifier: Modifier = Modifier,
     activeColor: Color = colorsScheme().primary,
     inactiveColor: Color = colorsScheme().surface,
-    inactiveBorderColor: Color = colorsScheme().uncheckedColor,
-    inactiveBorderWidth: Dp = 1.dp,
-    indicatorHeight: Dp = 8.dp,
-    indicatorWidth: Dp = indicatorHeight,
-    spacing: Dp = indicatorHeight,
+    inactiveBorderColor: Color = colorsScheme().onSecondaryButtonDisabled,
+    backgroundColor: Color = colorsScheme().surfaceContainerHighest,
+    inactiveBorderWidth: Dp = dimensions().spacing1x,
+    indicatorHeight: Dp = dimensions().spacing12x,
+    indicatorWidth: Dp = dimensions().spacing12x,
+    spacing: Dp = dimensions().spacing6x,
     indicatorShape: Shape = CircleShape,
 ) {
 
     val indicatorHeightPx = LocalDensity.current.run { indicatorHeight.roundToPx() }
     val spacingPx = LocalDensity.current.run { spacing.roundToPx() }
 
     Box(
-        modifier = modifier,
-        contentAlignment = Alignment.TopCenter
+        modifier = Modifier
+            .background(backgroundColor)
+            .then(modifier),
+        contentAlignment = Alignment.TopCenter,
     ) {
         Column(
             verticalArrangement = Arrangement.spacedBy(spacing),
@@ -106,10 +107,9 @@ fun VerticalPagerIndicator(
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
-@Preview
+@PreviewMultipleThemes
 @Composable
-fun PreviewVerticalPagerIndicator() {
+fun PreviewVerticalPagerIndicator() = WireTheme {
     VerticalPagerIndicator(
         modifier = Modifier.padding(dimensions().spacing4x),
         pagerState = rememberPagerState(pageCount = { 3 })

app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/gridview/CallingGridView.kt

@@ -34,7 +34,6 @@ import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.times
-import com.wire.android.ui.LocalActivity
 import com.wire.android.ui.calling.model.UICallParticipant
 import com.wire.android.ui.calling.ongoing.buildPreviewParticipantsList
 import com.wire.android.ui.calling.ongoing.fullscreen.SelectedParticipant
@@ -58,9 +57,8 @@ fun GroupCallGrid(
     modifier: Modifier = Modifier,
     contentPadding: Dp = dimensions().spacing4x,
     spacedBy: Dp = dimensions().spacing2x,
+    isInPictureInPictureMode: Boolean,
 ) {
-    val activity = LocalActivity.current
-
     // We need the number of tiles rows needed to calculate their height
     val numberOfTilesRows = remember(participants.size) {
         tilesRowsCount(participants.size)
@@ -104,7 +102,7 @@ fun GroupCallGrid(
                     .height(tileHeight)
                     .animateItem(),
                 participantTitleState = participant,
-                isOnPiPMode = activity.isInPictureInPictureMode,
+                isOnPiPMode = isInPictureInPictureMode,
                 isSelfUser = isSelfUser,
                 isSelfUserMuted = isSelfUserMuted,
                 isSelfUserCameraOn = isSelfUserCameraOn,
@@ -141,7 +139,8 @@ private fun PreviewGroupCallGrid(participants: List<UICallParticipant>, modifier
             onSelfVideoPreviewCreated = {},
             onSelfClearVideoPreview = {},
             onDoubleTap = { },
-            currentUserId = UserId("id", "domain")
+            currentUserId = UserId("id", "domain"),
+            isInPictureInPictureMode = false,
         )
     }
 }

app/src/main/kotlin/com/wire/android/ui/common/BlockedLabel.kt

@@ -45,7 +45,7 @@ fun BlockedLabel(modifier: Modifier = Modifier) {
     ) {
         Text(
             text = stringResource(id = R.string.label_user_blocked),
-            color = colorsScheme().labelText,
+            color = colorsScheme().secondaryText,
             style = MaterialTheme.wireTypography.label03.copy(textAlign = TextAlign.Center),
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,

app/src/main/kotlin/com/wire/android/ui/common/SettingUpWireScreenContent.kt

@@ -93,7 +93,7 @@ fun SettingUpWireScreenContent(
                         )
                 )
                 AnimatedVisibility(visible = type is SettingUpWireScreenType.Progress) {
-                    WireCircularProgressIndicator(progressColor = MaterialTheme.wireColorScheme.badge)
+                    WireCircularProgressIndicator(progressColor = MaterialTheme.wireColorScheme.onBackground)
                 }
                 AnimatedVisibility(visible = title?.isNotEmpty() == true) {
                     Text(