Align colors with material design

Co-authored-by: Matilda <matilda@mullvad.net>

7 files changed, 334 insertions, 146 deletions

diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
index 51879c4a66..88ed41e6ab 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
@@ -9,37 +9,18 @@ import androidx.compose.material3.RippleConfiguration
 import androidx.compose.material3.Shapes
 import androidx.compose.material3.Typography
 import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadDarkBlue
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite60
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadYellow
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_error
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onError
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onPrimary
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onSurfaceVariant
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onTertiaryContainer
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_primary
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_secondaryContainer
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainer
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerHigh
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerHighest
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerLow
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerLowest
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceTint
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceVariant
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_tertiaryContainer
+import net.mullvad.mullvadvpn.lib.theme.color.ColorDarkTokens
+import net.mullvad.mullvadvpn.lib.theme.color.ColorLightTokens
 import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
 import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
@@ -70,42 +51,84 @@ private val MullvadTypography =
             )
     )
 
+private val lightColorScheme =
+    lightColorScheme(
+        primary = ColorLightTokens.Primary,
+        onPrimary = ColorLightTokens.OnPrimary,
+        primaryContainer = ColorLightTokens.PrimaryContainer,
+        onPrimaryContainer = ColorLightTokens.OnPrimaryContainer,
+        inversePrimary = ColorLightTokens.InversePrimary,
+        secondary = ColorLightTokens.Secondary,
+        onSecondary = ColorLightTokens.OnSecondary,
+        secondaryContainer = ColorLightTokens.SecondaryContainer,
+        onSecondaryContainer = ColorLightTokens.OnSecondaryContainer,
+        tertiary = ColorLightTokens.Tertiary,
+        onTertiary = ColorLightTokens.OnTertiary,
+        tertiaryContainer = ColorLightTokens.TertiaryContainer,
+        onTertiaryContainer = ColorLightTokens.OnTertiaryContainer,
+        background = ColorLightTokens.Background,
+        onBackground = ColorLightTokens.OnBackground,
+        surface = ColorLightTokens.Surface,
+        onSurface = ColorLightTokens.OnSurface,
+        surfaceVariant = ColorLightTokens.SurfaceVariant,
+        onSurfaceVariant = ColorLightTokens.OnSurfaceVariant,
+        surfaceTint = ColorLightTokens.SurfaceTint,
+        inverseSurface = ColorLightTokens.InverseSurface,
+        inverseOnSurface = ColorLightTokens.InverseOnSurface,
+        error = ColorLightTokens.Error,
+        onError = ColorLightTokens.OnError,
+        errorContainer = ColorLightTokens.ErrorContainer,
+        onErrorContainer = ColorLightTokens.OnErrorContainer,
+        outline = ColorLightTokens.Outline,
+        outlineVariant = ColorLightTokens.OutlineVariant,
+        scrim = ColorLightTokens.Scrim,
+        surfaceBright = ColorLightTokens.SurfaceBright,
+        surfaceContainer = ColorLightTokens.SurfaceContainer,
+        surfaceContainerHigh = ColorLightTokens.SurfaceContainerHigh,
+        surfaceContainerHighest = ColorLightTokens.SurfaceContainerHighest,
+        surfaceContainerLow = ColorLightTokens.SurfaceContainerLow,
+        surfaceContainerLowest = ColorLightTokens.SurfaceContainerLowest,
+        surfaceDim = ColorLightTokens.SurfaceDim,
+    )
+
 private val darkColorScheme =
     darkColorScheme(
-        primary = md_theme_dark_primary,
-        onPrimary = md_theme_dark_onPrimary,
-        // primaryContainer = md_theme_dark_primaryContainer,
-        // onPrimaryContainer = md_theme_dark_onPrimaryContainer,
-        secondary = MullvadDarkBlue,
-        onSecondary = MullvadWhite60,
-        secondaryContainer = md_theme_dark_secondaryContainer,
-        tertiary = MullvadRed,
-        // onTertiary = md_theme_dark_onTertiary,
-        tertiaryContainer = md_theme_dark_tertiaryContainer,
-        onTertiaryContainer = md_theme_dark_onTertiaryContainer,
-        error = md_theme_dark_error,
-        errorContainer = MullvadYellow,
-        onError = md_theme_dark_onError,
-        // onErrorContainer = md_theme_dark_onErrorContainer,
-        background = MullvadDarkBlue,
-        onBackground = MullvadWhite,
-        surface = MullvadGreen,
-        onSurface = MullvadWhite,
-        surfaceVariant = md_theme_dark_surfaceVariant,
-        onSurfaceVariant = md_theme_dark_onSurfaceVariant,
-        // outline = md_theme_dark_outline,
-        // inverseOnSurface = md_theme_dark_inverseOnSurface,
-        inverseSurface = MullvadWhite,
-        inversePrimary = MullvadGreen,
-        // surfaceTint = md_theme_dark_surfaceTint,
-        outlineVariant = Color.Transparent, // Used by divider,
-        // scrim = md_theme_dark_scrim,
-        surfaceContainerHighest = md_theme_dark_surfaceContainerHighest,
-        surfaceContainerHigh = md_theme_dark_surfaceContainerHigh,
-        surfaceContainerLow = md_theme_dark_surfaceContainerLow,
-        surfaceContainerLowest = md_theme_dark_surfaceContainerLowest,
-        surfaceContainer = md_theme_dark_surfaceContainer,
-        surfaceTint = md_theme_dark_surfaceTint
+        primary = ColorDarkTokens.Primary,
+        onPrimary = ColorDarkTokens.OnPrimary,
+        primaryContainer = ColorDarkTokens.PrimaryContainer,
+        onPrimaryContainer = ColorDarkTokens.OnPrimaryContainer,
+        inversePrimary = ColorDarkTokens.InversePrimary,
+        secondary = ColorDarkTokens.Secondary,
+        onSecondary = ColorDarkTokens.OnSecondary,
+        secondaryContainer = ColorDarkTokens.SecondaryContainer,
+        onSecondaryContainer = ColorDarkTokens.OnSecondaryContainer,
+        tertiary = ColorDarkTokens.Tertiary,
+        onTertiary = ColorDarkTokens.OnTertiary,
+        tertiaryContainer = ColorDarkTokens.TertiaryContainer,
+        onTertiaryContainer = ColorDarkTokens.OnTertiaryContainer,
+        background = ColorDarkTokens.Background,
+        onBackground = ColorDarkTokens.OnBackground,
+        surface = ColorDarkTokens.Surface,
+        onSurface = ColorDarkTokens.OnSurface,
+        surfaceVariant = ColorDarkTokens.SurfaceVariant,
+        onSurfaceVariant = ColorDarkTokens.OnSurfaceVariant,
+        surfaceTint = ColorDarkTokens.SurfaceTint,
+        inverseSurface = ColorDarkTokens.InverseSurface,
+        inverseOnSurface = ColorDarkTokens.InverseOnSurface,
+        error = ColorDarkTokens.Error,
+        onError = ColorDarkTokens.OnError,
+        errorContainer = ColorDarkTokens.ErrorContainer,
+        onErrorContainer = ColorDarkTokens.OnErrorContainer,
+        outline = ColorDarkTokens.Outline,
+        outlineVariant = ColorDarkTokens.OutlineVariant,
+        scrim = ColorDarkTokens.Scrim,
+        surfaceBright = ColorDarkTokens.SurfaceBright,
+        surfaceContainer = ColorDarkTokens.SurfaceContainer,
+        surfaceContainerHigh = ColorDarkTokens.SurfaceContainerHigh,
+        surfaceContainerHighest = ColorDarkTokens.SurfaceContainerHighest,
+        surfaceContainerLow = ColorDarkTokens.SurfaceContainerLow,
+        surfaceContainerLowest = ColorDarkTokens.SurfaceContainerLowest,
+        surfaceDim = ColorDarkTokens.SurfaceDim,
     )
 
 val Shapes =
@@ -145,14 +168,13 @@ private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions }
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AppTheme(content: @Composable () -> Unit) {
-    val colors = darkColorScheme
     val typography = MullvadTypography
     // Set dimensions and type scale based on configurations here
     val dimensions = defaultDimensions
 
     ProvideDimens(dimensions = dimensions) {
         MaterialTheme(
-            colorScheme = colors,
+            colorScheme = darkColorScheme,
             shapes = Shapes,
             typography = typography,
             content = {
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
index 343e41dc1a..1f37088911 100644
--- 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
@@ -7,34 +7,36 @@ import androidx.compose.material3.MenuItemColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-internal val MullvadYellow = Color(0xFFFFD524)
-internal val MullvadGreen = Color(0xFF44AD4D)
-internal val MullvadWhite60 = Color(0x99FFFFFF)
-internal val MullvadWhite = Color(0xFFFFFFFF)
-internal val MullvadRed = Color(0xFFE34039)
-internal val MullvadDarkBlue = Color(0xFF192E45)
-
 const val AlphaVisible = 1f
+const val Alpha10 = 0.1f
 const val AlphaDisabled = 0.2f
 const val Alpha20 = 0.2f
 const val AlphaInactive = 0.4f
 const val Alpha40 = 0.4f
-const val AlphaDescription = 0.6f
 const val AlphaDisconnectButton = 0.6f
-const val AlphaChevron = 0.6f
 const val AlphaScrollbar = 0.6f
-const val Alpha60 = 0.6f
-const val AlphaTopBar = 0.8f
 const val AlphaInvisible = 0f
 
 // Custom colors, they only link to normal material 3 colors for now
-val ColorScheme.variant: Color
-    @Composable get() = MaterialTheme.colorScheme.surface
-val ColorScheme.onVariant: Color
-    @Composable get() = MaterialTheme.colorScheme.onSurface
-
 val ColorScheme.selected: Color
-    @Composable get() = MaterialTheme.colorScheme.surface
+    @Composable get() = MaterialTheme.colorScheme.tertiary
+
+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
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorDarkTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorDarkTokens.kt
new file mode 100644
index 0000000000..6af43a42d2
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorDarkTokens.kt
@@ -0,0 +1,56 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal object ColorDarkTokens {
+    val Background = PaletteTokens.DarkBlue500 // Used by login screen and text fields
+    val Error = PaletteTokens.Red500 // General error color
+    val ErrorContainer = PaletteTokens.Red500 // Currently not used directly
+    val InverseOnSurface = PaletteTokens.White // Currently not used directly
+    val InversePrimary = PaletteTokens.Green500 // Currently not used directly (old selected color)
+    val InverseSurface = PaletteTokens.White // Used by text fields
+    val OnBackground = PaletteTokens.White // Used by some text on the login screen
+    val OnError = PaletteTokens.White // Text that is displayed on error
+    val OnErrorContainer = PaletteTokens.White // Currently not used directly
+    val OnPrimary = PaletteTokens.White // Text that is displayed on primary (f.e. toolbar)
+    val OnPrimaryContainer = PaletteTokens.White // Currently not used directly
+    val OnPrimaryFixed = PaletteTokens.Blue50 // Not in material 3 library yet
+    val OnPrimaryFixedVariant = PaletteTokens.Blue50 // Not in material 3 library yet
+    val OnSecondary = PaletteTokens.White // Used by text fields
+    val OnSecondaryContainer = OpacityTokens.WhiteOnDarkBlue60 // Currently not used directly
+    val OnSecondaryFixed = PaletteTokens.Green50 // Not in material 3 library yet
+    val OnSecondaryFixedVariant = PaletteTokens.Green50 // Not in material 3 library yet
+    val OnSurface = PaletteTokens.White // Text that is displayed on the background
+    val OnSurfaceVariant = OpacityTokens.WhiteOnDarkBlue60 // Description texts
+    val OnTertiary = PaletteTokens.White // Text that is displayed on selected and connect
+    val OnTertiaryContainer =
+        Color(0xffacb4bc) // Used by text fields, will be replaced in the future
+    val OnTertiaryFixed = PaletteTokens.Yellow50 // Not in material 3 library yet
+    val OnTertiaryFixedVariant = PaletteTokens.Yellow50 // Not in material 3 library yet
+    val Outline = PaletteTokens.Black // Currently not used directly
+    val OutlineVariant = PaletteTokens.DarkBlue500 // Currently not used directly
+    val Primary = PaletteTokens.Blue500 // Toolbar and top level cells
+    val PrimaryContainer = PaletteTokens.Black // Currently not used directly
+    val PrimaryFixed = PaletteTokens.Blue100 // Not in material 3 library yet
+    val PrimaryFixedDim = PaletteTokens.Blue100 // Not in material 3 library yet
+    val Scrim = PaletteTokens.Black // Overlay used by bottom sheet
+    val Secondary = PaletteTokens.AlertBlue500 // Currently not used directly
+    val SecondaryContainer = PaletteTokens.AlertBlue500 // Currently not used directly
+    val SecondaryFixed = PaletteTokens.Green100 // Not in material 3 library yet
+    val SecondaryFixedDim = PaletteTokens.Green100 // Not in material 3 library yet
+    val Surface = PaletteTokens.DarkBlue500 // Background
+    val SurfaceBright = PaletteTokens.DarkBlue700 // Currently not used directly
+    val SurfaceContainer =
+        PaletteTokens.AlertBlue500 // Background for in-app notification, bottom sheet
+    val SurfaceContainerHighest = OpacityTokens.BlueOnDarkBlue60 // Second level cell / Sub cell
+    val SurfaceContainerHigh = OpacityTokens.BlueOnDarkBlue40 // Third level cell
+    val SurfaceContainerLow = OpacityTokens.BlueOnDarkBlue20 // Fourth level cell
+    val SurfaceContainerLowest = OpacityTokens.BlueOnDarkBlue10 // Fifth level cell
+    val SurfaceDim = PaletteTokens.Black // Currently not used directly
+    val SurfaceTint = Primary // Currently not used directly
+    val SurfaceVariant = PaletteTokens.DarkBlue500 // Currently not used directly
+    val Tertiary = PaletteTokens.Green500 // Connected and selected color
+    val TertiaryContainer = OpacityTokens.WhiteOnDarkBlue10 // Used by text color
+    val TertiaryFixed = PaletteTokens.Yellow600 // Not in material 3 library yet
+    val TertiaryFixedDim = PaletteTokens.Yellow500 // Not in material 3 library yet
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorLightTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorLightTokens.kt
new file mode 100644
index 0000000000..e16d6fac56
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorLightTokens.kt
@@ -0,0 +1,53 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+// This is experimental and currently not used
+internal object ColorLightTokens {
+    val Background = PaletteTokens.DarkBlue100
+    val Error = PaletteTokens.Red600
+    val ErrorContainer = PaletteTokens.Red100
+    val InverseOnSurface = PaletteTokens.DarkBlue100
+    val InversePrimary = PaletteTokens.Blue200
+    val InverseSurface = PaletteTokens.DarkBlue800
+    val OnBackground = PaletteTokens.DarkBlue900
+    val OnError = PaletteTokens.Red900
+    val OnErrorContainer = PaletteTokens.Red900
+    val OnPrimary = PaletteTokens.Blue900
+    val OnPrimaryContainer = PaletteTokens.Blue900
+    val OnPrimaryFixed = PaletteTokens.Blue900
+    val OnPrimaryFixedVariant = PaletteTokens.Blue700
+    val OnSecondary = PaletteTokens.Green900
+    val OnSecondaryContainer = PaletteTokens.Green900
+    val OnSecondaryFixed = PaletteTokens.Green900
+    val OnSecondaryFixedVariant = PaletteTokens.Green700
+    val OnSurface = PaletteTokens.DarkBlue900
+    val OnSurfaceVariant = PaletteTokens.DarkBlue700
+    val OnTertiary = PaletteTokens.Yellow900
+    val OnTertiaryContainer = PaletteTokens.Yellow900
+    val OnTertiaryFixed = PaletteTokens.Yellow900
+    val OnTertiaryFixedVariant = PaletteTokens.Yellow700
+    val Outline = PaletteTokens.DarkBlue500
+    val OutlineVariant = PaletteTokens.DarkBlue200
+    val Primary = PaletteTokens.Blue600
+    val PrimaryContainer = PaletteTokens.Blue100
+    val PrimaryFixed = PaletteTokens.Blue100
+    val PrimaryFixedDim = PaletteTokens.Blue200
+    val Scrim = PaletteTokens.DarkBlue900
+    val Secondary = PaletteTokens.Green600
+    val SecondaryContainer = PaletteTokens.Green100
+    val SecondaryFixed = PaletteTokens.Green100
+    val SecondaryFixedDim = PaletteTokens.Green200
+    val Surface = PaletteTokens.DarkBlue100
+    val SurfaceBright = PaletteTokens.DarkBlue100
+    val SurfaceContainer = PaletteTokens.DarkBlue900
+    val SurfaceContainerHighest = OpacityTokens.WhiteOnBlue20
+    val SurfaceContainerHigh = OpacityTokens.WhiteOnBlue40
+    val SurfaceContainerLow = OpacityTokens.WhiteOnBlue50
+    val SurfaceContainerLowest = OpacityTokens.WhiteOnBlue60
+    val SurfaceDim = PaletteTokens.DarkBlue200
+    val SurfaceTint = Primary
+    val SurfaceVariant = PaletteTokens.DarkBlue100
+    val Tertiary = PaletteTokens.Yellow600
+    val TertiaryContainer = PaletteTokens.Yellow100
+    val TertiaryFixed = PaletteTokens.Yellow100
+    val TertiaryFixedDim = PaletteTokens.Yellow200
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
deleted file mode 100644
index 1915cc911a..0000000000
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
+++ /dev/null
@@ -1,71 +0,0 @@
-package net.mullvad.mullvadvpn.lib.theme.color
-
-import androidx.compose.ui.graphics.Color
-
-internal val md_theme_light_primary = Color(0xFF0561A3)
-internal val md_theme_light_onPrimary = Color(0xFFFFFFFF)
-internal val md_theme_light_primaryContainer = Color(0xFFD1E4FF)
-internal val md_theme_light_onPrimaryContainer = Color(0xFF001D36)
-internal val md_theme_light_secondary = Color(0xFF006E1F)
-internal val md_theme_light_onSecondary = Color(0xFFFFFFFF)
-internal val md_theme_light_secondaryContainer = Color(0xFF8FFA8F)
-internal val md_theme_light_onSecondaryContainer = Color(0xFF002204)
-internal val md_theme_light_tertiary = Color(0xFF845400)
-internal val md_theme_light_onTertiary = Color(0xFFFFFFFF)
-internal val md_theme_light_tertiaryContainer = Color(0xFFFFDDB5)
-internal val md_theme_light_onTertiaryContainer = Color(0xFF2A1800)
-internal val md_theme_light_error = Color(0xFFBA1A1A)
-internal val md_theme_light_errorContainer = Color(0xFFFFDAD6)
-internal val md_theme_light_onError = Color(0xFFFFFFFF)
-internal val md_theme_light_onErrorContainer = Color(0xFF410002)
-internal val md_theme_light_background = Color(0xFFFDFBFF)
-internal val md_theme_light_onBackground = Color(0xFF001B3D)
-internal val md_theme_light_surface = Color(0xFFFDFBFF)
-internal val md_theme_light_onSurface = Color(0xFF001B3D)
-internal val md_theme_light_surfaceVariant = Color(0xFFDFE2EB)
-internal val md_theme_light_onSurfaceVariant = Color(0xFF43474E)
-internal val md_theme_light_outline = Color(0xFF73777F)
-internal val md_theme_light_inverseOnSurface = Color(0xFFECF0FF)
-internal val md_theme_light_inverseSurface = Color(0xFF003062)
-internal val md_theme_light_inversePrimary = Color(0xFF9FCAFF)
-internal val md_theme_light_surfaceTint = Color(0xFF0561A3)
-internal val md_theme_light_outlineVariant = Color(0xFFC3C6CF)
-internal val md_theme_light_scrim = Color(0xFFFFD524) // Helmet Yellow
-
-internal val md_theme_dark_primary = Color(0xFF294D73) // MullvadBlue
-internal val md_theme_dark_onPrimary = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_primaryContainer = Color(0xFF1C344E) // Sub-container
-internal val md_theme_dark_onPrimaryContainer = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_secondary = Color(0xFF44AD4D) // MullvadGreen
-internal val md_theme_dark_onSecondary = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_secondaryContainer =
-    Color(0xFF1c344e) // MullvadBlue Alpha 20 composite over MullvadDarkBlue
-internal val md_theme_dark_onSecondaryContainer = Color(0xFFD9EEDB) // Text in titlebar
-internal val md_theme_dark_tertiary = Color(0xFF99454F) // Disconnect button
-internal val md_theme_dark_onTertiary = Color(0xFFFFFFFF) // MullvadWhite/Text on disconnect button
-internal val md_theme_dark_tertiaryContainer =
-    Color(0xff304358) // MullvadWhite Alpha 10 composite over MullvadDarkBlue
-internal val md_theme_dark_onTertiaryContainer =
-    Color(0xffacb4bc) // MullvadWhite Alpha 60 composite over tertiary container
-internal val md_theme_dark_error = Color(0xFFE34039) // MullvadRed
-internal val md_theme_dark_errorContainer = Color(0xFFE34039) // MullvadRed //Duplicate
-internal val md_theme_dark_onError = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) // Generated
-internal val md_theme_dark_background = Color(0xFF192E45) // MullvadDarkBlue //Duplicate
-internal val md_theme_dark_onBackground = Color(0xFFFFFFFF) // MullvadWhite //Duplicate
-internal val md_theme_dark_surface = Color(0xFF192E45) // MullvadDarkBlue
-internal val md_theme_dark_onSurface = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_surfaceVariant = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_onSurfaceVariant = Color(0xFF294D73) // MullvadBlue
-internal val md_theme_dark_outline = Color(0xFF8D9199) // Generated
-internal val md_theme_dark_inverseOnSurface = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_inverseSurface = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_inversePrimary = Color(0xFF0561A3) // Generated
-internal val md_theme_dark_surfaceTint = Color(0xFF233953) // Custom list disabled
-internal val md_theme_dark_outlineVariant = Color(0xFF43474E) // Generated
-internal val md_theme_dark_scrim = Color(0xFF000000) // Generated
-internal val md_theme_dark_surfaceContainerHighest = Color(0xFF234161) // Relay list depth 0
-internal val md_theme_dark_surfaceContainerHigh = Color(0xFF1F3A57) // Relay list depth 1
-internal val md_theme_dark_surfaceContainerLow = Color(0xFF1C344E) // Relay list depth 2
-internal val md_theme_dark_surfaceContainerLowest = Color(0xFF1B314A) // Relay list depth 3
-internal val md_theme_dark_surfaceContainer = Color(0xFF192638) // Alert Blue
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/OpacityTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/OpacityTokens.kt
new file mode 100644
index 0000000000..5f3766e852
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/OpacityTokens.kt
@@ -0,0 +1,38 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal object OpacityTokens {
+    val BlueOnDarkBlue100 = Color(0xFF294d73)
+    val BlueOnDarkBlue90 = Color(0xFF274a6e)
+    val BlueOnDarkBlue80 = Color(0xFF26476a)
+    val BlueOnDarkBlue70 = Color(0xFF244465)
+    val BlueOnDarkBlue60 = Color(0xFF234161)
+    val BlueOnDarkBlue50 = Color(0xFF213e5c)
+    val BlueOnDarkBlue40 = Color(0xFF1f3a57)
+    val BlueOnDarkBlue30 = Color(0xFF1e3753)
+    val BlueOnDarkBlue20 = Color(0xFF1c344e)
+    val BlueOnDarkBlue10 = Color(0xFF1b314a)
+
+    val WhiteOnDarkBlue100 = Color(0xFFFFFFFF)
+    val WhiteOnDarkBlue90 = Color(0xFFE8EAEC)
+    val WhiteOnDarkBlue80 = Color(0xFFD1D5DA)
+    val WhiteOnDarkBlue70 = Color(0xFFBAC0C7)
+    val WhiteOnDarkBlue60 = Color(0xFFA3ABB5)
+    val WhiteOnDarkBlue50 = Color(0xFF8C96A2)
+    val WhiteOnDarkBlue40 = Color(0xFF75828F)
+    val WhiteOnDarkBlue30 = Color(0xFF5E6D7D)
+    val WhiteOnDarkBlue20 = Color(0xFF47586A)
+    val WhiteOnDarkBlue10 = Color(0xFF304358)
+
+    val WhiteOnBlue100 = Color(0xFFFFFFFF)
+    val WhiteOnBlue90 = Color(0xFFEAEDF1)
+    val WhiteOnBlue80 = Color(0xFFD4DBE3)
+    val WhiteOnBlue70 = Color(0xFFBFCAD5)
+    val WhiteOnBlue60 = Color(0xFFA9B8C7)
+    val WhiteOnBlue50 = Color(0xFF94A6B9)
+    val WhiteOnBlue40 = Color(0xFF7F94AB)
+    val WhiteOnBlue30 = Color(0xFF69829D)
+    val WhiteOnBlue20 = Color(0xFF54718F)
+    val WhiteOnBlue10 = Color(0xFF3E5F81)
+}
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
new file mode 100644
index 0000000000..763121ec4e
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/PaletteTokens.kt
@@ -0,0 +1,88 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal object PaletteTokens {
+    // Dark blue
+    val DarkBlue50 = Color(0xFFE8EAEC)
+    val DarkBlue100 = Color(0xFFB8BEC5)
+    val DarkBlue200 = Color(0xFF959FA9)
+    val DarkBlue300 = Color(0xFF657382)
+    val DarkBlue400 = Color(0xFF47586A)
+    val DarkBlue500 = Color(0xFF192E45) // Base color
+    val DarkBlue600 = Color(0xFF172A3F)
+    val DarkBlue700 = Color(0xFF122131)
+    val DarkBlue800 = Color(0xFF0E1926)
+    val DarkBlue900 = Color(0xFF0B131D)
+
+    // Blue
+    val Blue50 = Color(0xFFEAEDF1)
+    val Blue100 = Color(0xFFBDC8D4)
+    val Blue200 = Color(0xFF9DADBF)
+    val Blue300 = Color(0xFF7088A1)
+    val Blue400 = Color(0xFF54718F)
+    val Blue500 = Color(0xFF294D73) // Base color
+    val Blue600 = Color(0xFF254669)
+    val Blue700 = Color(0xFF1D3752)
+    val Blue800 = Color(0xFF172A3F)
+    val Blue900 = Color(0xFF112030)
+
+    // Red
+    val Red50 = Color(0xFFFCECEB)
+    val Red100 = Color(0xFFF6C4C2)
+    val Red200 = Color(0xFFF2A7A4)
+    val Red300 = Color(0xFFEC7F7A)
+    val Red400 = Color(0xFFE96661)
+    val Red500 = Color(0xFFE34039) // Base color
+    val Red600 = Color(0xFFCF3A34)
+    val Red700 = Color(0xFFA12D28)
+    val Red800 = Color(0xFF7D231F)
+    val Red900 = Color(0xFF5F1B18)
+
+    // Yellow
+    val Yellow50 = Color(0xFFFFFBEF)
+    val Yellow100 = Color(0xFFFFF1CA)
+    val Yellow200 = Color(0xFFFFEAB0)
+    val Yellow300 = Color(0xFFFFE18C)
+    val Yellow400 = Color(0xFFFFDB76)
+    val Yellow500 = Color(0xFFFFD254) // Base color
+    val Yellow600 = Color(0xFFE8BF4C)
+    val Yellow700 = Color(0xFFB5953C)
+    val Yellow800 = Color(0xFF8C742E)
+    val Yellow900 = Color(0xFF6B5823)
+
+    // Green
+    val Green50 = Color(0xFFECF7ED)
+    val Green100 = Color(0xFFC5E6C8)
+    val Green200 = Color(0xFFA9D9AD)
+    val Green300 = Color(0xFF82C888)
+    val Green400 = Color(0xFF69BD71)
+    val Green500 = Color(0xFF44AD4D) // Base color
+    val Green600 = Color(0xFF3E9D46)
+    val Green700 = Color(0xFF307B37)
+    val Green800 = Color(0xFF255F2A)
+    val Green900 = Color(0xFF1D4920)
+
+    // Alert Blue
+    val AlertBlue50 = Color(0xFFE8E9EB)
+    val AlertBlue100 = Color(0xFFB8BCC1)
+    val AlertBlue200 = Color(0xFF959BA3)
+    val AlertBlue300 = Color(0xFF656E7A)
+    val AlertBlue400 = Color(0xFF475160)
+    val AlertBlue500 = Color(0xFF192638) // Base color
+    val AlertBlue600 = Color(0xFF172333)
+    val AlertBlue700 = Color(0xFF121B28)
+    val AlertBlue800 = Color(0xFF0E151F)
+    val AlertBlue900 = Color(0xFF0B1018)
+
+    // White
+    val White = Color(0xFFFFFFFF)
+
+    // Black
+    val Black = Color(0xFF000000)
+
+    // Disabled container colors
+    val DisabledContainerPrimary = Color(0xFF1F3A57)
+    val DisabledContainerTiertary = Color(0xFF2A6148)
+    val DisabledContainerDestructive = Color(0xFF6A3540)
+}