Skip to content

Commit

Permalink
Material 3 theming: colors, schemes and custom font
Browse files Browse the repository at this point in the history
  • Loading branch information
sdsantos committed Jul 31, 2024
1 parent 3778278 commit eaee57f
Show file tree
Hide file tree
Showing 13 changed files with 374 additions and 152 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
2 changes: 1 addition & 1 deletion composeApp/src/commonMain/kotlin/org/ooni/probe/App.kt
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import androidx.navigation.compose.rememberNavController
import co.touchlab.kermit.Logger
import org.jetbrains.compose.ui.tooling.preview.Preview
import org.ooni.probe.di.Dependencies
import org.ooni.probe.ui.AppTheme
import org.ooni.probe.ui.navigation.BottomNavigationBar
import org.ooni.probe.ui.navigation.Navigation
import org.ooni.probe.ui.theme.AppTheme

@Composable
@Preview
Expand Down
30 changes: 0 additions & 30 deletions composeApp/src/commonMain/kotlin/org/ooni/probe/ui/Theme.kt

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,43 @@ package org.ooni.probe.ui.dashboard
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import ooniprobe.composeapp.generated.resources.Res
import ooniprobe.composeapp.generated.resources.app_name
import ooniprobe.composeapp.generated.resources.logo
import ooniprobe.composeapp.generated.resources.run_tests
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.resources.stringResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import org.ooni.probe.ui.AppTheme
import org.ooni.probe.ui.theme.AppTheme

@Composable
fun DashboardScreen(
state: DashboardViewModel.State,
onEvent: (DashboardViewModel.Event) -> Unit,
) {
Column {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth(),
) {
TopAppBar(
title = { Text(stringResource(Res.string.app_name)) },
)

Image(
painterResource(Res.drawable.logo),
contentDescription = stringResource(Res.string.app_name),
modifier = Modifier.align(Alignment.CenterHorizontally),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onBackground),
)

Button(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import ooniprobe.composeapp.generated.resources.Res
import ooniprobe.composeapp.generated.resources.settings
import org.jetbrains.compose.resources.stringResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import org.ooni.probe.ui.AppTheme
import org.ooni.probe.ui.theme.AppTheme

@Composable
fun SettingsScreen() {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
package org.ooni.probe.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable

@Composable
fun AppTheme(
useDarkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit,
) {
MaterialTheme(
colorScheme = if (useDarkTheme) darkScheme else lightScheme,
typography = AppTypography(),
content = content,
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
package org.ooni.probe.ui.theme

import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import org.ooni.probe.ui.backgroundDark
import org.ooni.probe.ui.backgroundLight
import org.ooni.probe.ui.errorContainerDark
import org.ooni.probe.ui.errorContainerLight
import org.ooni.probe.ui.errorDark
import org.ooni.probe.ui.errorLight
import org.ooni.probe.ui.inverseOnSurfaceDark
import org.ooni.probe.ui.inverseOnSurfaceLight
import org.ooni.probe.ui.inversePrimaryDark
import org.ooni.probe.ui.inversePrimaryLight
import org.ooni.probe.ui.inverseSurfaceDark
import org.ooni.probe.ui.inverseSurfaceLight
import org.ooni.probe.ui.onBackgroundDark
import org.ooni.probe.ui.onBackgroundLight
import org.ooni.probe.ui.onErrorContainerDark
import org.ooni.probe.ui.onErrorContainerLight
import org.ooni.probe.ui.onErrorDark
import org.ooni.probe.ui.onErrorLight
import org.ooni.probe.ui.onPrimaryContainerDark
import org.ooni.probe.ui.onPrimaryContainerLight
import org.ooni.probe.ui.onPrimaryDark
import org.ooni.probe.ui.onPrimaryLight
import org.ooni.probe.ui.onSecondaryContainerDark
import org.ooni.probe.ui.onSecondaryContainerLight
import org.ooni.probe.ui.onSecondaryDark
import org.ooni.probe.ui.onSecondaryLight
import org.ooni.probe.ui.onSurfaceDark
import org.ooni.probe.ui.onSurfaceLight
import org.ooni.probe.ui.onSurfaceVariantDark
import org.ooni.probe.ui.onSurfaceVariantLight
import org.ooni.probe.ui.onTertiaryContainerDark
import org.ooni.probe.ui.onTertiaryContainerLight
import org.ooni.probe.ui.onTertiaryDark
import org.ooni.probe.ui.onTertiaryLight
import org.ooni.probe.ui.outlineDark
import org.ooni.probe.ui.outlineLight
import org.ooni.probe.ui.outlineVariantDark
import org.ooni.probe.ui.outlineVariantLight
import org.ooni.probe.ui.primaryContainerDark
import org.ooni.probe.ui.primaryContainerLight
import org.ooni.probe.ui.primaryDark
import org.ooni.probe.ui.primaryLight
import org.ooni.probe.ui.scrimDark
import org.ooni.probe.ui.scrimLight
import org.ooni.probe.ui.secondaryContainerDark
import org.ooni.probe.ui.secondaryContainerLight
import org.ooni.probe.ui.secondaryDark
import org.ooni.probe.ui.secondaryLight
import org.ooni.probe.ui.surfaceBrightDark
import org.ooni.probe.ui.surfaceBrightLight
import org.ooni.probe.ui.surfaceContainerDark
import org.ooni.probe.ui.surfaceContainerHighDark
import org.ooni.probe.ui.surfaceContainerHighLight
import org.ooni.probe.ui.surfaceContainerHighestDark
import org.ooni.probe.ui.surfaceContainerHighestLight
import org.ooni.probe.ui.surfaceContainerLight
import org.ooni.probe.ui.surfaceContainerLowDark
import org.ooni.probe.ui.surfaceContainerLowLight
import org.ooni.probe.ui.surfaceContainerLowestDark
import org.ooni.probe.ui.surfaceContainerLowestLight
import org.ooni.probe.ui.surfaceDark
import org.ooni.probe.ui.surfaceDimDark
import org.ooni.probe.ui.surfaceDimLight
import org.ooni.probe.ui.surfaceLight
import org.ooni.probe.ui.surfaceVariantDark
import org.ooni.probe.ui.surfaceVariantLight
import org.ooni.probe.ui.tertiaryContainerDark
import org.ooni.probe.ui.tertiaryContainerLight
import org.ooni.probe.ui.tertiaryDark
import org.ooni.probe.ui.tertiaryLight

val lightScheme =
lightColorScheme(
primary = primaryLight,
onPrimary = onPrimaryLight,
primaryContainer = primaryContainerLight,
onPrimaryContainer = onPrimaryContainerLight,
secondary = secondaryLight,
onSecondary = onSecondaryLight,
secondaryContainer = secondaryContainerLight,
onSecondaryContainer = onSecondaryContainerLight,
tertiary = tertiaryLight,
onTertiary = onTertiaryLight,
tertiaryContainer = tertiaryContainerLight,
onTertiaryContainer = onTertiaryContainerLight,
error = errorLight,
onError = onErrorLight,
errorContainer = errorContainerLight,
onErrorContainer = onErrorContainerLight,
background = backgroundLight,
onBackground = onBackgroundLight,
surface = surfaceLight,
onSurface = onSurfaceLight,
surfaceVariant = surfaceVariantLight,
onSurfaceVariant = onSurfaceVariantLight,
outline = outlineLight,
outlineVariant = outlineVariantLight,
scrim = scrimLight,
inverseSurface = inverseSurfaceLight,
inverseOnSurface = inverseOnSurfaceLight,
inversePrimary = inversePrimaryLight,
surfaceDim = surfaceDimLight,
surfaceBright = surfaceBrightLight,
surfaceContainerLowest = surfaceContainerLowestLight,
surfaceContainerLow = surfaceContainerLowLight,
surfaceContainer = surfaceContainerLight,
surfaceContainerHigh = surfaceContainerHighLight,
surfaceContainerHighest = surfaceContainerHighestLight,
)

val darkScheme =
darkColorScheme(
primary = primaryDark,
onPrimary = onPrimaryDark,
primaryContainer = primaryContainerDark,
onPrimaryContainer = onPrimaryContainerDark,
secondary = secondaryDark,
onSecondary = onSecondaryDark,
secondaryContainer = secondaryContainerDark,
onSecondaryContainer = onSecondaryContainerDark,
tertiary = tertiaryDark,
onTertiary = onTertiaryDark,
tertiaryContainer = tertiaryContainerDark,
onTertiaryContainer = onTertiaryContainerDark,
error = errorDark,
onError = onErrorDark,
errorContainer = errorContainerDark,
onErrorContainer = onErrorContainerDark,
background = backgroundDark,
onBackground = onBackgroundDark,
surface = surfaceDark,
onSurface = onSurfaceDark,
surfaceVariant = surfaceVariantDark,
onSurfaceVariant = onSurfaceVariantDark,
outline = outlineDark,
outlineVariant = outlineVariantDark,
scrim = scrimDark,
inverseSurface = inverseSurfaceDark,
inverseOnSurface = inverseOnSurfaceDark,
inversePrimary = inversePrimaryDark,
surfaceDim = surfaceDimDark,
surfaceBright = surfaceBrightDark,
surfaceContainerLowest = surfaceContainerLowestDark,
surfaceContainerLow = surfaceContainerLowDark,
surfaceContainer = surfaceContainerDark,
surfaceContainerHigh = surfaceContainerHighDark,
surfaceContainerHighest = surfaceContainerHighestDark,
)
54 changes: 54 additions & 0 deletions composeApp/src/commonMain/kotlin/org/ooni/probe/ui/theme/Type.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
package org.ooni.probe.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import ooniprobe.composeapp.generated.resources.Res
import ooniprobe.composeapp.generated.resources.firasans_italic
import ooniprobe.composeapp.generated.resources.firasans_regular
import ooniprobe.composeapp.generated.resources.firasans_semibold
import org.jetbrains.compose.resources.Font

@Composable
fun customFontFamily() =
FontFamily(
Font(
resource = Res.font.firasans_regular,
weight = FontWeight.Normal,
style = FontStyle.Normal,
),
Font(
resource = Res.font.firasans_italic,
weight = FontWeight.Normal,
style = FontStyle.Normal,
),
Font(
resource = Res.font.firasans_semibold,
weight = FontWeight.Bold,
style = FontStyle.Normal,
),
)

private val defaultTypography = Typography()

@Composable
fun AppTypography() =
Typography(
displayLarge = defaultTypography.displayLarge.copy(fontFamily = customFontFamily()),
displayMedium = defaultTypography.displayMedium.copy(fontFamily = customFontFamily()),
displaySmall = defaultTypography.displaySmall.copy(fontFamily = customFontFamily()),
headlineLarge = defaultTypography.headlineLarge.copy(fontFamily = customFontFamily()),
headlineMedium = defaultTypography.headlineMedium.copy(fontFamily = customFontFamily()),
headlineSmall = defaultTypography.headlineSmall.copy(fontFamily = customFontFamily()),
titleLarge = defaultTypography.titleLarge.copy(fontFamily = customFontFamily()),
titleMedium = defaultTypography.titleMedium.copy(fontFamily = customFontFamily()),
titleSmall = defaultTypography.titleSmall.copy(fontFamily = customFontFamily()),
bodyLarge = defaultTypography.bodyLarge.copy(fontFamily = customFontFamily()),
bodyMedium = defaultTypography.bodyMedium.copy(fontFamily = customFontFamily()),
bodySmall = defaultTypography.bodySmall.copy(fontFamily = customFontFamily()),
labelLarge = defaultTypography.labelLarge.copy(fontFamily = customFontFamily()),
labelMedium = defaultTypography.labelMedium.copy(fontFamily = customFontFamily()),
labelSmall = defaultTypography.labelSmall.copy(fontFamily = customFontFamily()),
)
Loading

0 comments on commit eaee57f

Please sign in to comment.