Add color tokens and user some of them in our theme

Also switch to dark theme as base theme

3 files changed, 105 insertions, 28 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 9ab3fc1e0f..33a6081099 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
@@ -4,7 +4,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Shapes
 import androidx.compose.material3.Typography
-import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
@@ -15,6 +15,19 @@ 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.MullvadBlue20
+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_primary
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceVariant
 import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
 import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
@@ -39,25 +52,37 @@ private val MullvadTypography =
             )
     )
 
-private val MullvadColorPalette =
-    lightColorScheme(
-        primary = MullvadBlue,
+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 = MullvadBlue20,
+        // onSecondaryContainer = md_theme_dark_onSecondaryContainer,
         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,
-        surface = MullvadGreen,
-        secondaryContainer = MullvadBlue20,
         onBackground = MullvadWhite,
-        onSurfaceVariant = MullvadWhite,
-        onPrimary = MullvadWhite,
-        onSecondary = MullvadWhite60,
-        onError = 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,
-        error = MullvadRed,
-        errorContainer = MullvadYellow,
-        outlineVariant = Color.Transparent, // Used by divider
-        inverseSurface = MullvadWhite
+        // surfaceTint = md_theme_dark_surfaceTint,
+        outlineVariant = Color.Transparent, // Used by divider,
+        // scrim = md_theme_dark_scrim,
     )
 
 val Shapes =
@@ -81,7 +106,7 @@ private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions }
 
 @Composable
 fun AppTheme(content: @Composable () -> Unit) {
-    val colors = MullvadColorPalette
+    val colors = darkColorScheme
     val typography = MullvadTypography
     // Set dimensions and type scale based on configurations here
     val dimensions = defaultDimensions
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
index 0ae3ae9c07..f81c0b4409 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
@@ -1,13 +1,9 @@
-package net.mullvad.mullvadvpn.lib.theme
+package net.mullvad.mullvadvpn.lib.theme.color
 
 import androidx.compose.ui.graphics.Color
 
-internal val MullvadBeige = Color(0xFFFFCD86)
-internal val MullvadBlue60 = Color(0x99294D73)
 internal val MullvadBlue20 = Color(0x33294D73)
-internal val MullvadBrown = Color(0xFFD2943B)
 internal val MullvadYellow = Color(0xFFFFD524)
-internal val MullvadWhite40 = Color(0x66FFFFFF)
 
 @Deprecated(
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
@@ -24,10 +20,6 @@ val MullvadGreen = Color(0xFF44AD4D)
 @Deprecated(
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
 )
-val MullvadGreen40 = Color(0x6644AD4D)
-@Deprecated(
-    "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
-)
 val MullvadRed = Color(0xFFE34039)
 @Deprecated(
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
@@ -45,10 +37,6 @@ val MullvadWhite20 = Color(0x33FFFFFF)
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
 )
 val MullvadWhite60 = Color(0x99FFFFFF)
-@Deprecated(
-    "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
-)
-val MullvadWhite80 = Color(0xCCFFFFFF)
 
 const val AlphaVisible = 1f
 const val AlphaDisabled = 0.2f
@@ -57,5 +45,6 @@ const val AlphaInactive = 0.4f
 const val Alpha40 = 0.4f
 const val AlphaDescription = 0.6f
 const val AlphaDisconnectButton = 0.6f
+const val AlphaScrollbar = 0.6f
 const val AlphaTopBar = 0.8f
 const val AlphaInvisible = 0f
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
new file mode 100644
index 0000000000..31dd7a6c6f
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
@@ -0,0 +1,63 @@
+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(0xFF47AC4C) // Text in connection fragment
+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(0xFF643F00) // Generated
+internal val md_theme_dark_onTertiaryContainer = Color(0xFFFFFFFF) // MullvadWhite
+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(0xFF9FCAFF) // Generated
+internal val md_theme_dark_outlineVariant = Color(0xFF43474E) // Generated
+internal val md_theme_dark_scrim = Color(0xFF000000) // Generated