mullvad · albin-mullvad · Aug 21, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/android/CHANGELOG.md b/android/CHANGELOG.md
@@ -29,6 +29,7 @@ Line wrap the file at 100 chars.                                              Th
 ### Changed
 - Migrate underlaying communication wtih daemon to gRPC. This also implies major changes and
   improvements throughout the app.
+- Update colors in the app to be more in line with material design.
 
 ### Fixed
 - Fix VPN service being recreated multiple times when toggling certain options.

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt
@@ -20,8 +20,8 @@ fun AnimatedIconButton(
     defaultIcon: Painter,
     secondaryIcon: Painter,
     pressEffectDuration: Long = PRESS_EFFECT_TIME_SPAN,
-    defaultIconTint: Color = Color.Unspecified,
-    secondaryIconTint: Color = Color.Unspecified,
+    defaultIconTint: Color,
+    secondaryIconTint: Color,
     contentDescription: String,
     isToggleButton: Boolean = false,
     onClick: () -> Unit

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
@@ -24,7 +24,7 @@ private fun PreviewApplyButton() {
 @Composable
 fun ApplyButton(
     modifier: Modifier = Modifier,
-    background: Color = MaterialTheme.colorScheme.background,
+    background: Color = MaterialTheme.colorScheme.tertiary,
     onClick: () -> Unit,
     isEnabled: Boolean
 ) {

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
@@ -37,8 +37,6 @@ import net.mullvad.mullvadvpn.lib.model.TunnelState
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisconnectButton
-import net.mullvad.mullvadvpn.lib.theme.color.onVariant
-import net.mullvad.mullvadvpn.lib.theme.color.variant
 
 @Composable
 fun ConnectionButton(
@@ -52,14 +50,14 @@ fun ConnectionButton(
 ) {
     val containerColor =
         if (state is TunnelState.Disconnected) {
-            MaterialTheme.colorScheme.variant
+            MaterialTheme.colorScheme.tertiary
         } else {
             MaterialTheme.colorScheme.error.copy(alpha = AlphaDisconnectButton)
         }
 
     val contentColor =
         if (state is TunnelState.Disconnected) {
-            MaterialTheme.colorScheme.onVariant
+            MaterialTheme.colorScheme.onTertiary
         } else {
             MaterialTheme.colorScheme.onError
         }

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt
@@ -14,18 +14,17 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.Alpha20
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
-import net.mullvad.mullvadvpn.lib.theme.color.onVariant
-import net.mullvad.mullvadvpn.lib.theme.color.variant
+import net.mullvad.mullvadvpn.lib.theme.color.errorDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.primaryDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.tertiaryDisabled
 
 @Preview
 @Composable
@@ -72,14 +71,8 @@ fun NegativeButton(
         ButtonDefaults.buttonColors(
             containerColor = MaterialTheme.colorScheme.error,
             contentColor = MaterialTheme.colorScheme.onError,
-            disabledContentColor =
-                MaterialTheme.colorScheme.onError
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(MaterialTheme.colorScheme.background),
-            disabledContainerColor =
-                MaterialTheme.colorScheme.error
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(MaterialTheme.colorScheme.background),
+            disabledContentColor = MaterialTheme.colorScheme.onError.copy(alpha = Alpha20),
+            disabledContainerColor = MaterialTheme.colorScheme.errorDisabled
         ),
     isEnabled: Boolean = true,
     icon: @Composable (() -> Unit)? = null
@@ -99,19 +92,13 @@ fun VariantButton(
     onClick: () -> Unit,
     text: String,
     modifier: Modifier = Modifier,
-    background: Color = MaterialTheme.colorScheme.background,
+    background: Color = MaterialTheme.colorScheme.tertiary,
     colors: ButtonColors =
         ButtonDefaults.buttonColors(
-            containerColor = MaterialTheme.colorScheme.variant,
-            contentColor = MaterialTheme.colorScheme.onVariant,
-            disabledContentColor =
-                MaterialTheme.colorScheme.onVariant
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(background),
-            disabledContainerColor =
-                MaterialTheme.colorScheme.variant
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(background),
+            containerColor = background,
+            contentColor = MaterialTheme.colorScheme.onTertiary,
+            disabledContentColor = MaterialTheme.colorScheme.onTertiary.copy(alpha = Alpha20),
+            disabledContainerColor = MaterialTheme.colorScheme.tertiaryDisabled,
         ),
     isEnabled: Boolean = true,
     icon: @Composable (() -> Unit)? = null
@@ -135,14 +122,8 @@ fun PrimaryButton(
         ButtonDefaults.buttonColors(
             containerColor = MaterialTheme.colorScheme.primary,
             contentColor = MaterialTheme.colorScheme.onPrimary,
-            disabledContentColor =
-                MaterialTheme.colorScheme.onPrimary
-                    .copy(alpha = Alpha20)
-                    .compositeOver(MaterialTheme.colorScheme.background),
-            disabledContainerColor =
-                MaterialTheme.colorScheme.primary
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(MaterialTheme.colorScheme.background),
+            disabledContentColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = Alpha20),
+            disabledContainerColor = MaterialTheme.colorScheme.primaryDisabled,
         ),
     isEnabled: Boolean = true,
     leadingIcon: @Composable (() -> Unit)? = null,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
@@ -1,9 +1,7 @@
 package net.mullvad.mullvadvpn.compose.button
 
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
@@ -22,14 +20,8 @@ private fun PreviewRedeemVoucherButton() {
 }
 
 @Composable
-fun RedeemVoucherButton(
-    modifier: Modifier = Modifier,
-    background: Color = MaterialTheme.colorScheme.background,
-    onClick: () -> Unit,
-    isEnabled: Boolean
-) {
+fun RedeemVoucherButton(modifier: Modifier = Modifier, onClick: () -> Unit, isEnabled: Boolean) {
     VariantButton(
-        background = background,
         text = stringResource(id = R.string.redeem_voucher),
         onClick = onClick,
         modifier = modifier,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
@@ -17,7 +17,7 @@ private fun PreviewSitePaymentButton() {
     AppTheme {
         SpacedColumn(
             spacing = Dimens.cellVerticalSpacing,
-            modifier = Modifier.background(color = MaterialTheme.colorScheme.background)
+            modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)
         ) {
             SitePaymentButton(onClick = {}, isEnabled = true)
             SitePaymentButton(onClick = {}, isEnabled = false)

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
@@ -34,8 +34,8 @@ fun SwitchLocationButton(
         onClick = onClick,
         colors =
             ButtonDefaults.buttonColors(
-                containerColor = MaterialTheme.colorScheme.inverseSurface.copy(alpha = Alpha20),
-                contentColor = MaterialTheme.colorScheme.inverseSurface
+                containerColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = Alpha20),
+                contentColor = MaterialTheme.colorScheme.onPrimary
             ),
         modifier = modifier,
         text = text,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
@@ -33,7 +33,7 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens
 @Composable
 private fun PreviewBaseCell() {
     AppTheme {
-        SpacedColumn {
+        SpacedColumn(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
             BaseCell(
                 headlineContent = {
                     BaseCellTitle(
@@ -102,31 +102,46 @@ internal fun BaseCellTitle(
     title: String,
     style: TextStyle,
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onPrimary,
-    textAlign: TextAlign = TextAlign.Start
+    textAlign: TextAlign = TextAlign.Start,
+    textColor: Color = MaterialTheme.colorScheme.onPrimary
 ) {
     Text(
         text = title,
         textAlign = textAlign,
         style = style,
-        color = color,
+        color = textColor,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1,
         modifier = modifier
     )
 }
 
 @Composable
-fun BaseSubtitleCell(text: String, modifier: Modifier = Modifier) {
-    BaseSubtitleCell(text = AnnotatedString(text), modifier = modifier)
+fun BaseSubtitleCell(
+    text: String,
+    modifier: Modifier = Modifier,
+    style: TextStyle = MaterialTheme.typography.labelMedium,
+    color: Color
+) {
+    BaseSubtitleCell(
+        text = AnnotatedString(text),
+        modifier = modifier,
+        style = style,
+        color = color
+    )
 }
 
 @Composable
-fun BaseSubtitleCell(text: AnnotatedString, modifier: Modifier = Modifier) {
+fun BaseSubtitleCell(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    style: TextStyle = MaterialTheme.typography.labelMedium,
+    color: Color
+) {
     Text(
         text = text,
-        style = MaterialTheme.typography.labelMedium,
-        color = MaterialTheme.colorScheme.onSecondary,
+        style = style,
+        color = color,
         modifier =
             modifier
                 .padding(

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
@@ -32,7 +32,7 @@ internal fun CheckboxCell(
     title: String,
     checked: Boolean,
     onCheckedChange: (Boolean) -> Unit,
-    background: Color = MaterialTheme.colorScheme.secondaryContainer,
+    background: Color = MaterialTheme.colorScheme.surfaceContainerLow,
     startPadding: Dp = Dimens.mediumPadding,
     endPadding: Dp = Dimens.cellEndPadding,
     minHeight: Dp = Dimens.cellHeight
@@ -54,7 +54,7 @@ internal fun CheckboxCell(
         Text(
             text = title,
             style = MaterialTheme.typography.labelLarge,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier =
                 Modifier.weight(1f)
                     .padding(top = Dimens.mediumPadding, bottom = Dimens.mediumPadding)

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
@@ -31,13 +31,14 @@ import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.color.onSelected
 import net.mullvad.mullvadvpn.lib.theme.color.selected
 
 @Preview
 @Composable
 private fun PreviewCustomPortCell() {
     AppTheme {
-        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.background)) {
+        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
             CustomPortCell(title = "Title", isSelected = true, port = Port(444))
             CustomPortCell(title = "Title", isSelected = false, port = null)
         }
@@ -70,7 +71,7 @@ fun CustomPortCell(
                         if (isSelected) {
                             MaterialTheme.colorScheme.selected
                         } else {
-                            MaterialTheme.colorScheme.secondaryContainer
+                            MaterialTheme.colorScheme.surfaceContainerLow
                         }
                     )
                     .padding(start = Dimens.cellStartPadding)
@@ -79,15 +80,21 @@ fun CustomPortCell(
             Icon(
                 painter = painterResource(id = R.drawable.icon_tick),
                 contentDescription = null,
-                tint = MaterialTheme.colorScheme.onPrimary,
+                tint = MaterialTheme.colorScheme.onSelected,
                 modifier =
                     Modifier.padding(end = Dimens.selectableCellTextMargin)
                         .alpha(if (isSelected) AlphaVisible else AlphaInvisible)
             )
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.labelLarge,
-                textAlign = TextAlign.Start
+                textAlign = TextAlign.Start,
+                textColor =
+                    if (isSelected) {
+                        MaterialTheme.colorScheme.onSelected
+                    } else {
+                        MaterialTheme.colorScheme.onSurface
+                    }
             )
         }
         Spacer(modifier = Modifier.width(Dimens.verticalSpacer))

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
@@ -6,14 +6,14 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.color.warning
 
 @Preview
 @Composable
@@ -40,12 +40,12 @@ fun DnsCell(
                 Icon(
                     painter = painterResource(id = R.drawable.icon_alert),
                     contentDescription = stringResource(id = R.string.confirm_local_dns),
-                    tint = MaterialTheme.colorScheme.errorContainer
+                    tint = MaterialTheme.colorScheme.warning
                 )
             }
         },
         onCellClicked = { onClick.invoke() },
-        background = MaterialTheme.colorScheme.secondaryContainer,
+        background = MaterialTheme.colorScheme.surfaceContainerLow,
         startPadding = startPadding,
         modifier = modifier
     )
@@ -55,7 +55,7 @@ fun DnsCell(
 private fun RowScope.DnsTitle(address: String, modifier: Modifier = Modifier) {
     Text(
         text = address,
-        color = Color.White,
+        color = MaterialTheme.colorScheme.onSurface,
         style = MaterialTheme.typography.labelLarge,
         textAlign = TextAlign.Start,
         modifier = modifier.weight(1f)

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt
@@ -37,7 +37,7 @@ fun ThreeDotCell(
             BaseCellTitle(
                 title = text,
                 style = textStyle,
-                color = textColor,
+                textColor = textColor,
                 modifier = Modifier.weight(1f, true)
             )
         },