Merge branch 'android-materialize-colors'

12 files changed, 336 insertions, 151 deletions

diff --git a/android/lib/resource/src/main/res/drawable/icon_account.xml b/android/lib/resource/src/main/res/drawable/icon_account.xml
index 7fe5c11f05..c007ae4596 100644
--- a/android/lib/resource/src/main/res/drawable/icon_account.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_account.xml
@@ -6,7 +6,6 @@
     <path android:pathData="M12,24A12,12 0,0 1,3.515 3.515a12,12 0,1 1,16.97 16.97A11.922,11.922 0,0 1,12 24zM12,12.175a12.164,12.164 0,0 0,-2.873 0.348,17.625 17.625,0 0,0 -2.99,1.048A2.85,2.85 0,0 0,5 14.525a2.573,2.573 0,0 0,-0.442 1.512v0.791a1.39,1.39 0,0 0,1.4 1.4h12.1a1.392,1.392 0,0 0,1.4 -1.4v-0.791A2.567,2.567 0,0 0,19 14.525a2.809,2.809 0,0 0,-1.163 -0.954,19.906 19.906,0 0,0 -2.978,-1.036 11.634,11.634 0,0 0,-2.859 -0.36zM12,3.775a3.345,3.345 0,0 0,-3.49 3.491,3.346 3.346,0 0,0 3.49,3.49 3.348,3.348 0,0 0,3.49 -3.49A3.346,3.346 0,0 0,12 3.776z"
           android:strokeWidth="1"
           android:fillColor="#FFFFFF"
-          android:fillAlpha="0.8"
           android:fillType="evenOdd"
           android:strokeColor="#00000000" />
 </vector>
diff --git a/android/lib/resource/src/main/res/drawable/icon_back.xml b/android/lib/resource/src/main/res/drawable/icon_back.xml
index 7b5534c928..15ad00f442 100644
--- a/android/lib/resource/src/main/res/drawable/icon_back.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_back.xml
@@ -6,7 +6,6 @@
     <path android:pathData="M12,24C5.3731,24 -0,18.6269 -0,12C-0,5.3731 5.3731,0 12,0C18.6269,0 24,5.3731 24,12C24,18.6269 18.6269,24 12,24ZM7.0055,11.9979C6.9755,12.2732 7.0685,12.5604 7.2852,12.7774L13.2129,18.7118C13.5936,19.0929 14.2231,19.0908 14.6233,18.7027L14.6942,18.634C15.0925,18.2478 15.1055,17.6196 14.7109,17.218L9.5805,11.9979L14.7109,6.7777C15.1055,6.3762 15.0925,5.7479 14.6942,5.3618L14.6233,5.293C14.2231,4.9049 13.5936,4.9028 13.2129,5.2839L7.2852,11.2184C7.0685,11.4353 6.9755,11.7225 7.0055,11.9979L7.0055,11.9979Z"
           android:strokeWidth="1"
           android:fillColor="#FFFFFF"
-          android:fillAlpha="0.6"
           android:fillType="evenOdd"
           android:strokeColor="#00000000" />
 </vector>
diff --git a/android/lib/resource/src/main/res/drawable/icon_close.xml b/android/lib/resource/src/main/res/drawable/icon_close.xml
index 7de0a4ac04..f00f638dc3 100644
--- a/android/lib/resource/src/main/res/drawable/icon_close.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_close.xml
@@ -4,7 +4,7 @@
         android:height="24dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
-    <path android:fillColor="#99FFFFFF"
+    <path android:fillColor="#FFFFFFFF"
           android:pathData="
                 M 12,24
                 C 5.37312,24 0,18.62688 0,12
diff --git a/android/lib/resource/src/main/res/drawable/icon_settings.xml b/android/lib/resource/src/main/res/drawable/icon_settings.xml
index 3d670e5124..65de785d70 100644
--- a/android/lib/resource/src/main/res/drawable/icon_settings.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_settings.xml
@@ -6,7 +6,6 @@
     <path android:pathData="M21.2552,12C21.2552,12.408 21.2182,12.792 21.1688,13.176L23.7719,15.156C24.0063,15.336 24.068,15.66 23.9199,15.924L21.4526,20.076C21.3045,20.34 20.9838,20.448 20.7001,20.34L17.6282,19.14C16.9867,19.608 16.2959,20.016 15.5433,20.316L15.0745,23.496C15.0375,23.784 14.7785,24 14.4701,24L9.5354,24C9.227,24 8.9679,23.784 8.9309,23.496L8.4621,20.316C7.7096,20.016 7.0187,19.62 6.3772,19.14L3.3054,20.34C3.034,20.436 2.7009,20.34 2.5529,20.076L0.0855,15.924C-0.0625,15.66 -0.0008,15.336 0.2336,15.156L2.8366,13.176C2.7873,12.792 2.7502,12.396 2.7502,12C2.7502,11.604 2.7873,11.208 2.8366,10.824L0.2336,8.844C-0.0008,8.664 -0.0748,8.34 0.0855,8.076L2.5529,3.924C2.7009,3.66 3.0217,3.552 3.3054,3.66L6.3772,4.86C7.0187,4.392 7.7096,3.984 8.4621,3.684L8.9309,0.504C8.9679,0.216 9.227,0 9.5354,0L14.4701,0C14.7785,0 15.0375,0.216 15.0745,0.504L15.5433,3.684C16.2959,3.984 16.9867,4.38 17.6282,4.86L20.7001,3.66C20.9715,3.564 21.3046,3.66 21.4526,3.924L23.9199,8.076C24.068,8.34 24.0063,8.664 23.7719,8.844L21.1688,10.824C21.2182,11.208 21.2552,11.592 21.2552,12ZM12,17C14.7571,17 17,14.7571 17,12C17,9.2429 14.7571,7 12,7C9.2429,7 7,9.2429 7,12C7,14.7571 9.2429,17 12,17Z"
           android:strokeWidth="1"
           android:fillColor="#FFFFFF"
-          android:fillAlpha="0.8"
           android:fillType="evenOdd"
           android:strokeColor="#00000000" />
 </vector>
diff --git a/android/lib/resource/src/main/res/drawable/icons_more_circle.xml b/android/lib/resource/src/main/res/drawable/icons_more_circle.xml
index 605975ea37..331e12b080 100644
--- a/android/lib/resource/src/main/res/drawable/icons_more_circle.xml
+++ b/android/lib/resource/src/main/res/drawable/icons_more_circle.xml
@@ -3,7 +3,7 @@
         android:height="24dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
-    <path android:fillAlpha="0.6"
+    <path
           android:fillColor="#FFFFFF"
           android:fillType="evenOdd"
           android:pathData="M12,24A12,12 0,0 1,3.515 3.515a12,12 0,1 1,16.97 16.97A11.922,11.922 0,0 1,12 24zM10.445,16.044L10.445,17.6h3.111v-1.556zM7.333,12.155v1.556h9.333v-1.556zM5,8.267v1.556h14L19,8.267z"
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)
+}