Move theme classes to theme lib

6 files changed, 285 insertions, 0 deletions

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.kt
new file mode 100644
index 0000000000..f2708eec2f
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt
@@ -0,0 +1,30 @@
+package net.mullvad.mullvadvpn.lib.theme
+
+import androidx.compose.ui.graphics.Color
+
+val MullvadBeige = Color(0xFFFFCD86)
+val MullvadBlue = Color(0xFF294D73)
+val MullvadBlue60 = Color(0x99294D73)
+val MullvadBlue40 = Color(0x66294D73)
+val MullvadBlue20 = Color(0x33294D73)
+val MullvadBrown = Color(0xFFD2943B)
+val MullvadDarkBlue = Color(0xFF192E45)
+val MullvadGreen = Color(0xFF44AD4D)
+val MullvadGreen40 = Color(0x6644AD4D)
+val MullvadRed = Color(0xFFE34039)
+val MullvadYellow = Color(0xFFFFD524)
+val MullvadHelmetYellow = Color(0xFFFFD524)
+val MullvadWhite = Color(0xFFFFFFFF)
+val MullvadWhite10 = Color(0x1AFFFFFF)
+val MullvadWhite20 = Color(0x33FFFFFF)
+val MullvadWhite40 = Color(0x66FFFFFF)
+val MullvadWhite60 = Color(0x99FFFFFF)
+val MullvadWhite80 = Color(0xCCFFFFFF)
+
+const val AlphaVisible = 1f
+const val AlphaDisabled = 0.2f
+const val Alpha20 = 0.2f
+const val AlphaInactive = 0.4f
+const val AlphaDescription = 0.6f
+const val AlphaDisconnectButton = 0.6f
+const val AlphaInvisible = 0f
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
new file mode 100644
index 0000000000..cad213e548
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
@@ -0,0 +1,113 @@
+package net.mullvad.mullvadvpn.lib.theme
+
+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.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.FontWeight
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
+import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
+import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
+
+// Add our own definitions here
+private val MullvadTypography =
+    Typography(
+        headlineLarge = TextStyle(fontSize = TypeScale.TextHuge, fontWeight = FontWeight.Bold),
+        headlineSmall =
+            TextStyle(
+                color = MullvadWhite,
+                fontSize = TypeScale.TextBig,
+                fontWeight = FontWeight.Bold
+            ),
+        bodySmall = TextStyle(color = MullvadWhite, fontSize = TypeScale.TextSmall),
+        titleSmall =
+            TextStyle(
+                color = MullvadWhite,
+                fontSize = TypeScale.TextMedium,
+                fontWeight = FontWeight.SemiBold
+            ),
+        titleMedium =
+            TextStyle(
+                color = MullvadWhite,
+                fontSize = TypeScale.TextMediumPlus,
+                fontWeight = FontWeight.SemiBold
+            ),
+        labelMedium =
+            TextStyle(
+                color = MullvadWhite60,
+                fontSize = TypeScale.TextSmall,
+                fontWeight = FontWeight.SemiBold
+            ),
+        labelLarge =
+            TextStyle(
+                fontWeight = FontWeight.Normal,
+                letterSpacing = TextUnit.Unspecified,
+                fontSize = TypeScale.TextMedium
+            )
+    )
+
+private val MullvadColorPalette =
+    lightColorScheme(
+        primary = MullvadBlue,
+        secondary = MullvadDarkBlue,
+        tertiary = MullvadRed,
+        background = MullvadDarkBlue,
+        surface = MullvadGreen,
+        primaryContainer = MullvadBlue40,
+        secondaryContainer = MullvadBlue20,
+        onBackground = MullvadWhite,
+        onSurfaceVariant = MullvadWhite,
+        onPrimary = MullvadWhite,
+        onSecondary = MullvadWhite60,
+        onError = MullvadWhite,
+        onSurface = MullvadWhite,
+        inversePrimary = MullvadGreen,
+        error = MullvadRed,
+        outlineVariant = Color.Transparent, // Used by divider
+        inverseSurface = MullvadWhite
+    )
+
+val Shapes =
+    Shapes(
+        small = RoundedCornerShape(4.dp),
+        medium = RoundedCornerShape(4.dp),
+        large = RoundedCornerShape(0.dp),
+        extraLarge = RoundedCornerShape(4.dp)
+    )
+
+val Dimens: Dimensions
+    @Composable get() = LocalAppDimens.current
+
+@Composable
+fun ProvideDimens(dimensions: Dimensions, content: @Composable () -> Unit) {
+    val dimensionSet = remember { dimensions }
+    CompositionLocalProvider(LocalAppDimens provides dimensionSet, content = content)
+}
+
+private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions }
+
+@Composable
+fun AppTheme(content: @Composable () -> Unit) {
+    val colors = MullvadColorPalette
+    val typography = MullvadTypography
+    // Set dimensions and type scale based on configurations here
+    val dimensions = defaultDimensions
+
+    ProvideDimens(dimensions = dimensions) {
+        MaterialTheme(
+            colorScheme = colors,
+            shapes = Shapes,
+            typography = typography,
+            content = content
+        )
+    }
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt
new file mode 100644
index 0000000000..55997a8f71
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Type.kt
@@ -0,0 +1,33 @@
+package net.mullvad.mullvadvpn.lib.theme
+
+import androidx.compose.material3.Typography
+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.sp
+
+internal val MullvadMaterial3Typography =
+    Typography(
+        displayLarge = TextStyle(fontFamily = FontFamily.SansSerif),
+        displayMedium = TextStyle(fontFamily = FontFamily.SansSerif),
+        displaySmall = TextStyle(fontFamily = FontFamily.SansSerif),
+        headlineLarge = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Black),
+        headlineMedium = TextStyle(fontFamily = FontFamily.SansSerif),
+        headlineSmall = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Black),
+        titleLarge = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Black),
+        titleMedium = TextStyle(fontFamily = FontFamily.SansSerif),
+        titleSmall = TextStyle(fontFamily = FontFamily.SansSerif),
+        bodyLarge = TextStyle(fontFamily = FontFamily.SansSerif),
+        bodyMedium = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
+        bodySmall = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
+        labelLarge =
+            TextStyle(
+                fontFamily = FontFamily.SansSerif,
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 18.sp,
+                lineHeight = 23.sp
+            ),
+        labelMedium =
+            TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold),
+        labelSmall = TextStyle(fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.SemiBold)
+    )
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
new file mode 100644
index 0000000000..fa922eac9e
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
@@ -0,0 +1,52 @@
+package net.mullvad.mullvadvpn.lib.theme.dimensions
+
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+data class Dimensions(
+    val backButtonSideMargin: Dp = 30.dp,
+    val buttonHeight: Dp = 44.dp,
+    val buttonSeparation: Dp = 18.dp,
+    val cellEndPadding: Dp = 16.dp,
+    val cellFooterTopPadding: Dp = 6.dp,
+    val cellHeight: Dp = 52.dp,
+    val cellLabelVerticalPadding: Dp = 14.dp,
+    val cellStartPadding: Dp = 22.dp,
+    val cellTopPadding: Dp = 6.dp,
+    val cellVerticalSpacing: Dp = 14.dp,
+    val chevronMargin: Dp = 4.dp,
+    val cityRowPadding: Dp = 34.dp,
+    val connectButtonHeight: Dp = 50.dp,
+    val countryRowPadding: Dp = 18.dp,
+    val customPortBoxMinWidth: Dp = 80.dp,
+    val expandableCellChevronSize: Dp = 30.dp,
+    val indentedCellStartPadding: Dp = 38.dp,
+    val infoButtonVerticalPadding: Dp = 13.dp,
+    val listIconSize: Dp = 24.dp,
+    val listItemDivider: Dp = 1.dp,
+    val listItemHeight: Dp = 50.dp,
+    val listItemHeightExtra: Dp = 60.dp,
+    val loadingSpinnerPadding: Dp = 12.dp,
+    val loadingSpinnerSize: Dp = 24.dp,
+    val loadingSpinnerSizeMedium: Dp = 28.dp,
+    val loadingSpinnerStrokeWidth: Dp = 3.dp,
+    val mediumPadding: Dp = 16.dp,
+    val progressIndicatorSize: Dp = 60.dp,
+    val relayCircleSize: Dp = 16.dp,
+    val relayRowPadding: Dp = 50.dp,
+    val screenVerticalMargin: Dp = 22.dp,
+    val searchFieldHeight: Dp = 42.dp,
+    val searchFieldHorizontalPadding: Dp = 22.dp,
+    val searchIconSize: Dp = 24.dp,
+    val selectLocationButtonHeight: Dp = 50.dp,
+    val selectLocationTitlePadding: Dp = 12.dp,
+    val selectableCellTextMargin: Dp = 12.dp,
+    val sideMargin: Dp = 22.dp,
+    val smallPadding: Dp = 8.dp,
+    val titleIconSize: Dp = 24.dp,
+    val verticalSpace: Dp = 20.dp,
+    val verticalSpacer: Dp = 1.dp
+)
+
+val defaultDimensions = Dimensions()
+// Add more configurations here if needed
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
new file mode 100644
index 0000000000..09ee7cafde
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
@@ -0,0 +1,19 @@
+package net.mullvad.mullvadvpn.lib.theme.typeface
+
+import androidx.compose.ui.unit.sp
+
+/**
+ * Font sizes used by text styles in the app.
+ *
+ * NOTE:
+ * * Do not use these font sizes directly. Instead use the styles defined in Typeface and/or the
+ *   standard styles in the material theme
+ * * Order entries within each type by descending size.
+ */
+internal object TypeScale {
+    val TextHuge = 30.sp
+    val TextBig = 24.sp
+    val TextMediumPlus = 18.sp
+    val TextMedium = 16.sp
+    val TextSmall = 13.sp
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt
new file mode 100644
index 0000000000..5b79b1df15
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/Typeface.kt
@@ -0,0 +1,38 @@
+package net.mullvad.mullvadvpn.lib.theme.typeface
+
+import androidx.compose.material3.Typography
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.TextUnit
+
+// Add text styles not in the material theme here
+val Typography.listItemText: TextStyle
+    @Composable
+    get() {
+        return TextStyle(
+            fontWeight = FontWeight.Normal,
+            letterSpacing = TextUnit.Unspecified,
+            fontSize = TypeScale.TextMediumPlus
+        )
+    }
+
+val Typography.listItemSubText: TextStyle
+    @Composable
+    get() {
+        return TextStyle(
+            fontWeight = FontWeight.SemiBold,
+            letterSpacing = TextUnit.Unspecified,
+            fontSize = TypeScale.TextSmall
+        )
+    }
+
+val Typography.connectionStatus: TextStyle
+    @Composable
+    get() {
+        return TextStyle(
+            fontWeight = FontWeight.Bold,
+            letterSpacing = TextUnit.Unspecified,
+            fontSize = TypeScale.TextMedium
+        )
+    }