BIT-1204: Improve avatar color visiblity (#270)

app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ColorExtensions.kt

@@ -0,0 +1,39 @@
+package com.x8bit.bitwarden.ui.platform.base.util
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
+
+/**
+ * A fractional luminance value beyond which we will consider the associated color to be light
+ * enough to require a dark overlay to be used.
+ */
+private const val DARK_OVERLAY_LUMINANCE_THRESHOLD = 0.65f
+
+/**
+ * Returns `true` if the given [Color] would require a light color to be used in any kind of
+ * overlay when high contrast is important.
+ */
+val Color.isLightOverlayRequired: Boolean
+    get() = this.luminance() < DARK_OVERLAY_LUMINANCE_THRESHOLD
+
+/**
+ * Returns a [Color] within the current theme that can safely be overlaid on top of the given
+ * [Color].
+ */
+@Composable
+fun Color.toSafeOverlayColor(): Color {
+    val surfaceColor = MaterialTheme.colorScheme.surface
+    val onSurfaceColor = MaterialTheme.colorScheme.onSurface
+    val lightColor: Color
+    val darkColor: Color
+    if (surfaceColor.luminance() > onSurfaceColor.luminance()) {
+        lightColor = surfaceColor
+        darkColor = onSurfaceColor
+    } else {
+        lightColor = onSurfaceColor
+        darkColor = surfaceColor
+    }
+    return if (this.isLightOverlayRequired) lightColor else darkColor
+}

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenAccountActionItem.kt

@@ -15,6 +15,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.R
+import com.x8bit.bitwarden.ui.platform.base.util.toSafeOverlayColor
 import com.x8bit.bitwarden.ui.platform.base.util.toUnscaledTextUnit
 
 /**
@@ -48,7 +49,7 @@ fun BitwardenAccountActionItem(
                 fontFamily = FontFamily(Font(R.font.sf_pro)),
                 fontWeight = FontWeight.W400,
             ),
-            color = colorResource(id = R.color.white),
+            color = color.toSafeOverlayColor(),
         )
     }
 }

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenAccountSwitcher.kt

@@ -29,15 +29,14 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.unit.dp
-import androidx.core.graphics.toColorInt
 import com.x8bit.bitwarden.R
 import com.x8bit.bitwarden.ui.platform.base.util.lowercaseWithCurrentLocal
+import com.x8bit.bitwarden.ui.platform.base.util.toSafeOverlayColor
 import com.x8bit.bitwarden.ui.platform.base.util.toUnscaledTextUnit
 import com.x8bit.bitwarden.ui.platform.components.model.AccountSummary
 import com.x8bit.bitwarden.ui.vault.feature.vault.util.iconRes
@@ -185,7 +184,7 @@ private fun AccountSummaryItem(
             Icon(
                 painter = painterResource(id = R.drawable.ic_account_initials_container),
                 contentDescription = null,
-                tint = Color(accountSummary.avatarColorHex.toColorInt()),
+                tint = accountSummary.avatarColor,
                 modifier = Modifier.size(40.dp),
             )
 
@@ -194,7 +193,7 @@ private fun AccountSummaryItem(
                 style = MaterialTheme.typography.titleMedium
                     // Do not allow scaling
                     .copy(fontSize = 16.dp.toUnscaledTextUnit()),
-                color = MaterialTheme.colorScheme.surface,
+                color = accountSummary.avatarColor.toSafeOverlayColor(),
                 modifier = Modifier.clearAndSetSemantics { },
             )
         }

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/model/AccountSummary.kt

@@ -1,6 +1,8 @@
 package com.x8bit.bitwarden.ui.platform.components.model
 
 import android.os.Parcelable
+import androidx.compose.ui.graphics.Color
+import com.x8bit.bitwarden.ui.platform.base.util.hexToColor
 import kotlinx.parcelize.Parcelize
 
 /**
@@ -21,6 +23,12 @@ data class AccountSummary(
     val status: Status,
 ) : Parcelable {
 
+    /**
+     * The [avatarColorHex] represented as a [Color].
+     */
+    val avatarColor: Color
+        get() = avatarColorHex.hexToColor()
+
     /**
      * Describes the status of the given account.
      */