UI: add material theme for compose

This commit is contained in:
Rohit Verma 2024-09-20 23:49:06 +05:30
parent 522f1fe192
commit b0bf55b384
3 changed files with 363 additions and 0 deletions

View file

@ -0,0 +1,219 @@
package fr.free.nrw.commons.ui.theme
import androidx.compose.ui.graphics.Color
val primaryLight = Color(0xFF004B7D)
val onPrimaryLight = Color(0xFFFFFFFF)
val primaryContainerLight = Color(0xFF2970AD)
val onPrimaryContainerLight = Color(0xFFFFFFFF)
val secondaryLight = Color(0xFF4A6079)
val onSecondaryLight = Color(0xFFFFFFFF)
val secondaryContainerLight = Color(0xFFD3E6FF)
val onSecondaryContainerLight = Color(0xFF354B63)
val tertiaryLight = Color(0xFF643377)
val onTertiaryLight = Color(0xFFFFFFFF)
val tertiaryContainerLight = Color(0xFF8B579E)
val onTertiaryContainerLight = Color(0xFFFFFFFF)
val errorLight = Color(0xFFBA1A1A)
val onErrorLight = Color(0xFFFFFFFF)
val errorContainerLight = Color(0xFFFFDAD6)
val onErrorContainerLight = Color(0xFF410002)
val backgroundLight = Color(0xFFF8F9FF)
val onBackgroundLight = Color(0xFF191C20)
val surfaceLight = Color(0xFFF8F9FF)
val onSurfaceLight = Color(0xFF191C20)
val surfaceVariantLight = Color(0xFFDDE3EE)
val onSurfaceVariantLight = Color(0xFF414750)
val outlineLight = Color(0xFF717781)
val outlineVariantLight = Color(0xFFC1C7D1)
val scrimLight = Color(0xFF000000)
val inverseSurfaceLight = Color(0xFF2E3135)
val inverseOnSurfaceLight = Color(0xFFEFF0F6)
val inversePrimaryLight = Color(0xFF9CCAFF)
val surfaceDimLight = Color(0xFFD8DADF)
val surfaceBrightLight = Color(0xFFF8F9FF)
val surfaceContainerLowestLight = Color(0xFFFFFFFF)
val surfaceContainerLowLight = Color(0xFFF2F3F9)
val surfaceContainerLight = Color(0xFFECEEF3)
val surfaceContainerHighLight = Color(0xFFE7E8EE)
val surfaceContainerHighestLight = Color(0xFFE1E2E8)
val primaryLightMediumContrast = Color(0xFF004574)
val onPrimaryLightMediumContrast = Color(0xFFFFFFFF)
val primaryContainerLightMediumContrast = Color(0xFF2970AD)
val onPrimaryContainerLightMediumContrast = Color(0xFFFFFFFF)
val secondaryLightMediumContrast = Color(0xFF2F445C)
val onSecondaryLightMediumContrast = Color(0xFFFFFFFF)
val secondaryContainerLightMediumContrast = Color(0xFF617690)
val onSecondaryContainerLightMediumContrast = Color(0xFFFFFFFF)
val tertiaryLightMediumContrast = Color(0xFF5F2E72)
val onTertiaryLightMediumContrast = Color(0xFFFFFFFF)
val tertiaryContainerLightMediumContrast = Color(0xFF8B579E)
val onTertiaryContainerLightMediumContrast = Color(0xFFFFFFFF)
val errorLightMediumContrast = Color(0xFF8C0009)
val onErrorLightMediumContrast = Color(0xFFFFFFFF)
val errorContainerLightMediumContrast = Color(0xFFDA342E)
val onErrorContainerLightMediumContrast = Color(0xFFFFFFFF)
val backgroundLightMediumContrast = Color(0xFFF8F9FF)
val onBackgroundLightMediumContrast = Color(0xFF191C20)
val surfaceLightMediumContrast = Color(0xFFF8F9FF)
val onSurfaceLightMediumContrast = Color(0xFF191C20)
val surfaceVariantLightMediumContrast = Color(0xFFDDE3EE)
val onSurfaceVariantLightMediumContrast = Color(0xFF3D434C)
val outlineLightMediumContrast = Color(0xFF596069)
val outlineVariantLightMediumContrast = Color(0xFF757B85)
val scrimLightMediumContrast = Color(0xFF000000)
val inverseSurfaceLightMediumContrast = Color(0xFF2E3135)
val inverseOnSurfaceLightMediumContrast = Color(0xFFEFF0F6)
val inversePrimaryLightMediumContrast = Color(0xFF9CCAFF)
val surfaceDimLightMediumContrast = Color(0xFFD8DADF)
val surfaceBrightLightMediumContrast = Color(0xFFF8F9FF)
val surfaceContainerLowestLightMediumContrast = Color(0xFFFFFFFF)
val surfaceContainerLowLightMediumContrast = Color(0xFFF2F3F9)
val surfaceContainerLightMediumContrast = Color(0xFFECEEF3)
val surfaceContainerHighLightMediumContrast = Color(0xFFE7E8EE)
val surfaceContainerHighestLightMediumContrast = Color(0xFFE1E2E8)
val primaryLightHighContrast = Color(0xFF002440)
val onPrimaryLightHighContrast = Color(0xFFFFFFFF)
val primaryContainerLightHighContrast = Color(0xFF004574)
val onPrimaryContainerLightHighContrast = Color(0xFFFFFFFF)
val secondaryLightHighContrast = Color(0xFF0B243A)
val onSecondaryLightHighContrast = Color(0xFFFFFFFF)
val secondaryContainerLightHighContrast = Color(0xFF2F445C)
val onSecondaryContainerLightHighContrast = Color(0xFFFFFFFF)
val tertiaryLightHighContrast = Color(0xFF3A064F)
val onTertiaryLightHighContrast = Color(0xFFFFFFFF)
val tertiaryContainerLightHighContrast = Color(0xFF5F2E72)
val onTertiaryContainerLightHighContrast = Color(0xFFFFFFFF)
val errorLightHighContrast = Color(0xFF4E0002)
val onErrorLightHighContrast = Color(0xFFFFFFFF)
val errorContainerLightHighContrast = Color(0xFF8C0009)
val onErrorContainerLightHighContrast = Color(0xFFFFFFFF)
val backgroundLightHighContrast = Color(0xFFF8F9FF)
val onBackgroundLightHighContrast = Color(0xFF191C20)
val surfaceLightHighContrast = Color(0xFFF8F9FF)
val onSurfaceLightHighContrast = Color(0xFF000000)
val surfaceVariantLightHighContrast = Color(0xFFDDE3EE)
val onSurfaceVariantLightHighContrast = Color(0xFF1E242C)
val outlineLightHighContrast = Color(0xFF3D434C)
val outlineVariantLightHighContrast = Color(0xFF3D434C)
val scrimLightHighContrast = Color(0xFF000000)
val inverseSurfaceLightHighContrast = Color(0xFF2E3135)
val inverseOnSurfaceLightHighContrast = Color(0xFFFFFFFF)
val inversePrimaryLightHighContrast = Color(0xFFE1EDFF)
val surfaceDimLightHighContrast = Color(0xFFD8DADF)
val surfaceBrightLightHighContrast = Color(0xFFF8F9FF)
val surfaceContainerLowestLightHighContrast = Color(0xFFFFFFFF)
val surfaceContainerLowLightHighContrast = Color(0xFFF2F3F9)
val surfaceContainerLightHighContrast = Color(0xFFECEEF3)
val surfaceContainerHighLightHighContrast = Color(0xFFE7E8EE)
val surfaceContainerHighestLightHighContrast = Color(0xFFE1E2E8)
val primaryDark = Color(0xFF9CCAFF)
val onPrimaryDark = Color(0xFF003257)
val primaryContainerDark = Color(0xFF00568E)
val onPrimaryContainerDark = Color(0xFFF1F5FF)
val secondaryDark = Color(0xFFB2C9E5)
val onSecondaryDark = Color(0xFF1B3249)
val secondaryContainerDark = Color(0xFF2B4159)
val onSecondaryContainerDark = Color(0xFFC0D7F4)
val tertiaryDark = Color(0xFFECB1FF)
val onTertiaryDark = Color(0xFF4A195E)
val tertiaryContainerDark = Color(0xFF713F84)
val onTertiaryContainerDark = Color(0xFFFFF2FD)
val errorDark = Color(0xFFFFB4AB)
val onErrorDark = Color(0xFF690005)
val errorContainerDark = Color(0xFF93000A)
val onErrorContainerDark = Color(0xFFFFDAD6)
val backgroundDark = Color(0xFF111417)
val onBackgroundDark = Color(0xFFE1E2E8)
val surfaceDark = Color(0xFF111417)
val onSurfaceDark = Color(0xFFE1E2E8)
val surfaceVariantDark = Color(0xFF414750)
val onSurfaceVariantDark = Color(0xFFC1C7D1)
val outlineDark = Color(0xFF8B919B)
val outlineVariantDark = Color(0xFF414750)
val scrimDark = Color(0xFF000000)
val inverseSurfaceDark = Color(0xFFE1E2E8)
val inverseOnSurfaceDark = Color(0xFF2E3135)
val inversePrimaryDark = Color(0xFF10629E)
val surfaceDimDark = Color(0xFF111417)
val surfaceBrightDark = Color(0xFF37393E)
val surfaceContainerLowestDark = Color(0xFF0B0E12)
val surfaceContainerLowDark = Color(0xFF191C20)
val surfaceContainerDark = Color(0xFF1D2024)
val surfaceContainerHighDark = Color(0xFF272A2E)
val surfaceContainerHighestDark = Color(0xFF323539)
val primaryDarkMediumContrast = Color(0xFFA4CEFF)
val onPrimaryDarkMediumContrast = Color(0xFF00172C)
val primaryContainerDarkMediumContrast = Color(0xFF5595D4)
val onPrimaryContainerDarkMediumContrast = Color(0xFF000000)
val secondaryDarkMediumContrast = Color(0xFFB6CDEA)
val onSecondaryDarkMediumContrast = Color(0xFF00172C)
val secondaryContainerDarkMediumContrast = Color(0xFF7D93AE)
val onSecondaryContainerDarkMediumContrast = Color(0xFF000000)
val tertiaryDarkMediumContrast = Color(0xFFEEB7FF)
val onTertiaryDarkMediumContrast = Color(0xFF2A003B)
val tertiaryContainerDarkMediumContrast = Color(0xFFB37CC6)
val onTertiaryContainerDarkMediumContrast = Color(0xFF000000)
val errorDarkMediumContrast = Color(0xFFFFBAB1)
val onErrorDarkMediumContrast = Color(0xFF370001)
val errorContainerDarkMediumContrast = Color(0xFFFF5449)
val onErrorContainerDarkMediumContrast = Color(0xFF000000)
val backgroundDarkMediumContrast = Color(0xFF111417)
val onBackgroundDarkMediumContrast = Color(0xFFE1E2E8)
val surfaceDarkMediumContrast = Color(0xFF111417)
val onSurfaceDarkMediumContrast = Color(0xFFFAFAFF)
val surfaceVariantDarkMediumContrast = Color(0xFF414750)
val onSurfaceVariantDarkMediumContrast = Color(0xFFC5CBD6)
val outlineDarkMediumContrast = Color(0xFF9DA3AD)
val outlineVariantDarkMediumContrast = Color(0xFF7D848D)
val scrimDarkMediumContrast = Color(0xFF000000)
val inverseSurfaceDarkMediumContrast = Color(0xFFE1E2E8)
val inverseOnSurfaceDarkMediumContrast = Color(0xFF272A2E)
val inversePrimaryDarkMediumContrast = Color(0xFF004B7D)
val surfaceDimDarkMediumContrast = Color(0xFF111417)
val surfaceBrightDarkMediumContrast = Color(0xFF37393E)
val surfaceContainerLowestDarkMediumContrast = Color(0xFF0B0E12)
val surfaceContainerLowDarkMediumContrast = Color(0xFF191C20)
val surfaceContainerDarkMediumContrast = Color(0xFF1D2024)
val surfaceContainerHighDarkMediumContrast = Color(0xFF272A2E)
val surfaceContainerHighestDarkMediumContrast = Color(0xFF323539)
val primaryDarkHighContrast = Color(0xFFFAFAFF)
val onPrimaryDarkHighContrast = Color(0xFF000000)
val primaryContainerDarkHighContrast = Color(0xFFA4CEFF)
val onPrimaryContainerDarkHighContrast = Color(0xFF000000)
val secondaryDarkHighContrast = Color(0xFFFAFAFF)
val onSecondaryDarkHighContrast = Color(0xFF000000)
val secondaryContainerDarkHighContrast = Color(0xFFB6CDEA)
val onSecondaryContainerDarkHighContrast = Color(0xFF000000)
val tertiaryDarkHighContrast = Color(0xFFFFF9FA)
val onTertiaryDarkHighContrast = Color(0xFF000000)
val tertiaryContainerDarkHighContrast = Color(0xFFEEB7FF)
val onTertiaryContainerDarkHighContrast = Color(0xFF000000)
val errorDarkHighContrast = Color(0xFFFFF9F9)
val onErrorDarkHighContrast = Color(0xFF000000)
val errorContainerDarkHighContrast = Color(0xFFFFBAB1)
val onErrorContainerDarkHighContrast = Color(0xFF000000)
val backgroundDarkHighContrast = Color(0xFF111417)
val onBackgroundDarkHighContrast = Color(0xFFE1E2E8)
val surfaceDarkHighContrast = Color(0xFF111417)
val onSurfaceDarkHighContrast = Color(0xFFFFFFFF)
val surfaceVariantDarkHighContrast = Color(0xFF414750)
val onSurfaceVariantDarkHighContrast = Color(0xFFFAFAFF)
val outlineDarkHighContrast = Color(0xFFC5CBD6)
val outlineVariantDarkHighContrast = Color(0xFFC5CBD6)
val scrimDarkHighContrast = Color(0xFF000000)
val inverseSurfaceDarkHighContrast = Color(0xFFE1E2E8)
val inverseOnSurfaceDarkHighContrast = Color(0xFF000000)
val inversePrimaryDarkHighContrast = Color(0xFF002C4C)
val surfaceDimDarkHighContrast = Color(0xFF111417)
val surfaceBrightDarkHighContrast = Color(0xFF37393E)
val surfaceContainerLowestDarkHighContrast = Color(0xFF0B0E12)
val surfaceContainerLowDarkHighContrast = Color(0xFF191C20)
val surfaceContainerDarkHighContrast = Color(0xFF1D2024)
val surfaceContainerHighDarkHighContrast = Color(0xFF272A2E)
val surfaceContainerHighestDarkHighContrast = Color(0xFF323539)

View file

@ -0,0 +1,111 @@
package fr.free.nrw.commons.ui.theme
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
private 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,
)
private 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,
)
@Composable
fun CommonsTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = false, /* TODO("Enable this when app is ready for dynamic colors") */
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> darkScheme
else -> lightScheme
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
}

View file

@ -0,0 +1,33 @@
package fr.free.nrw.commons.ui.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
val Typography = Typography(
bodyLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.5.sp
)
/* Other default text styles to override
titleLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
labelSmall = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Medium,
fontSize = 11.sp,
lineHeight = 16.sp,
letterSpacing = 0.5.sp
)
*/
)