Add disable button colors

mullvad · Aug 16, 2024 · 788847f · 788847f
1 parent 630ef0b
commit 788847f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
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,16 +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.errorDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.primaryDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.tertiaryDisabled
 
 @Preview
 @Composable
@@ -71,7 +72,7 @@ fun NegativeButton(
             containerColor = MaterialTheme.colorScheme.error,
             contentColor = MaterialTheme.colorScheme.onError,
             disabledContentColor = MaterialTheme.colorScheme.onError.copy(alpha = Alpha20),
-            disabledContainerColor = MaterialTheme.colorScheme.error.copy(alpha = AlphaInactive)
+            disabledContainerColor = MaterialTheme.colorScheme.errorDisabled
         ),
     isEnabled: Boolean = true,
     icon: @Composable (() -> Unit)? = null
@@ -97,7 +98,7 @@ fun VariantButton(
             containerColor = background,
             contentColor = MaterialTheme.colorScheme.onTertiary,
             disabledContentColor = MaterialTheme.colorScheme.onTertiary.copy(alpha = Alpha20),
-            disabledContainerColor = background.copy(alpha = AlphaInactive),
+            disabledContainerColor = MaterialTheme.colorScheme.tertiaryDisabled,
         ),
     isEnabled: Boolean = true,
     icon: @Composable (() -> Unit)? = null
@@ -121,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/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
@@ -24,9 +24,21 @@ val ColorScheme.selected: Color
 val ColorScheme.onSelected: Color
     @Composable get() = MaterialTheme.colorScheme.onTertiary
 
+// Static defined waring color
 val ColorScheme.warning: Color
     @Composable get() = PaletteTokens.Yellow500
 
+// Disabled colors for buttons
+val ColorScheme.tertiaryDisabled: Color
+    @Composable get() = PaletteTokens.DisabledContainerTiertary
+
+val ColorScheme.primaryDisabled: Color
+    @Composable get() = PaletteTokens.DisabledContainerPrimary
+
+val ColorScheme.errorDisabled: Color
+    @Composable get() = PaletteTokens.DisabledContainerDestructive
+
+
 val menuItemColors: MenuItemColors
     @Composable
     get() =

diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/PaletteTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/PaletteTokens.kt
@@ -80,4 +80,9 @@ internal object PaletteTokens {
 
     // Black
     val Black = Color(0xFF000000)
+
+    //Disabled container colors
+    val DisabledContainerPrimary = Color(0xFF1F3A57)
+    val DisabledContainerTiertary = Color(0xFF2A6148)
+    val DisabledContainerDestructive = Color(0xFF6A3540)
 }