diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt new file mode 100644 index 000000000000..1541bccd1d9b --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -0,0 +1,118 @@ +package org.wordpress.android.designsystem + +import android.content.res.Configuration +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Divider +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.dimensionResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.wordpress.android.R + +@Composable +fun DesignSystemColorsScreen( + modifier: Modifier = Modifier +) { + LazyColumn( + modifier = modifier, + horizontalAlignment = Alignment.Start, + verticalArrangement = Arrangement.spacedBy( + dimensionResource(id = R.dimen.reader_follow_sheet_button_margin_top) + ) + ) { + item { + ColorTitle("Foreground") + val listForeground: List = listOf( + ColorOption("Primary", MaterialTheme.colorScheme.primary), + ColorOption("Secondary", MaterialTheme.colorScheme.secondary), + ColorOption("Tertiary", MaterialTheme.colorScheme.tertiary), + ColorOption("Brand", MaterialTheme.colorScheme.brand), + ColorOption("Error", MaterialTheme.colorScheme.error), + ColorOption("Warning", MaterialTheme.colorScheme.warning), + ColorOption("WP", MaterialTheme.colorScheme.wp), + ) + ColorCardList(listForeground) + + ColorTitle("Background") + val listBackground: List = listOf( + ColorOption("Primary", MaterialTheme.colorScheme.primaryContainer), + ColorOption("Secondary", MaterialTheme.colorScheme.secondaryContainer), + ColorOption("Tertiary", MaterialTheme.colorScheme.tertiaryContainer), + ColorOption("Quaternary", MaterialTheme.colorScheme.quaternaryContainer), + ColorOption("Brand", MaterialTheme.colorScheme.brandContainer), + ColorOption("WP", MaterialTheme.colorScheme.wpContainer), + ) + ColorCardList(listBackground) + } + } +} +@OptIn(ExperimentalStdlibApi::class) +@Composable +fun ColorCard (colorName: String, color: Color) { + Row (modifier = Modifier.padding(10.dp, 3.dp).fillMaxWidth()) { + Column { + Box( + modifier = Modifier + .size(45.dp) + .clip(shape = RoundedCornerShape(5.dp, 5.dp, 5.dp, 5.dp)) + .background(color) + ) + } + Column { + Text( + modifier = Modifier.padding(start = 25.dp, end = 40.dp), + text = colorName, + color = MaterialTheme.colorScheme.primary, + ) + Text( + modifier = Modifier.padding(start = 25.dp, end = 40.dp), + text = "#" + color.value.toHexString().uppercase().substring(0,8), + color = MaterialTheme.colorScheme.secondary + ) + } + } + Divider(modifier = Modifier.padding(start = 10.dp, end = 10.dp)) +} +@Composable +fun ColorCardList(colorOptions: List) { + colorOptions.forEach { colorOption -> + ColorCard(colorOption.title, colorOption.color) + } +} +class ColorOption(var title: String, var color: Color) +@Composable +fun ColorTitle(title: String) { + Text( + modifier = Modifier.padding(start = 10.dp, top = 10.dp, bottom = 10.dp), + text = title, + style = MaterialTheme.typography.titleMedium.copy(color = MaterialTheme.colorScheme.primary), + ) +} +@Preview(name = "Light Mode") +@Preview( + uiMode = Configuration.UI_MODE_NIGHT_YES, + showBackground = true, + name = "Dark Mode" +) +@Composable +fun DesignSystemColorsScreenPreview() { + DesignSystemTheme { + DesignSystemColorsScreen() + } +} + diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemComponentsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemComponentsScreen.kt index 9ad12beb4467..31cdff2649ff 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemComponentsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemComponentsScreen.kt @@ -1,5 +1,6 @@ package org.wordpress.android.designsystem +import android.content.res.Configuration import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding @@ -33,13 +34,20 @@ fun DesignSystemComponentsScreen( } } -@Preview +@Preview(name = "Light Mode") +@Preview( + uiMode = Configuration.UI_MODE_NIGHT_YES, + showBackground = true, + name = "Dark Mode" +) @Composable fun StartDesignSystemComponentsScreenPreview(){ - DesignSystemComponentsScreen( - modifier = Modifier - .fillMaxSize() - .padding(dimensionResource(R.dimen.button_container_shadow_height)) - ) + DesignSystemTheme { + DesignSystemComponentsScreen( + modifier = Modifier + .fillMaxSize() + .padding(dimensionResource(R.dimen.button_container_shadow_height)) + ) + } } diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt index dba23937a37e..a7499a0ce818 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt @@ -8,9 +8,7 @@ object DesignSystemDataSource { Pair(R.string.design_system_components, DesignSystemScreen.Components.name), ) val foundationScreenButtonOptions = listOf( - R.string.design_system_foundation_colors, - R.string.design_system_foundation_fonts, - R.string.design_system_foundation_lengths + Pair(R.string.design_system_foundation_colors, DesignSystemScreen.Colors.name) ) val componentsScreenButtonOptions = listOf( R.string.design_system_components_dsbutton diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemFoundationScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemFoundationScreen.kt index 6564580c0606..5f31209a37b2 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemFoundationScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemFoundationScreen.kt @@ -13,6 +13,7 @@ import org.wordpress.android.R @Composable fun DesignSystemFoundationScreen( + onButtonClicked: (String) -> Unit, modifier: Modifier = Modifier ) { LazyColumn ( @@ -25,8 +26,8 @@ fun DesignSystemFoundationScreen( item { DesignSystemDataSource.foundationScreenButtonOptions.forEach { item -> SelectOptionButton( - labelResourceId = item, - onClick = {} + labelResourceId = item.first, + onClick = { onButtonClicked(item.second) } ) } } @@ -36,10 +37,13 @@ fun DesignSystemFoundationScreen( @Preview @Composable fun StartDesignSystemFoundationScreenPreview(){ - DesignSystemFoundationScreen( - modifier = Modifier - .fillMaxSize() - .padding(dimensionResource(R.dimen.button_container_shadow_height)) - ) + DesignSystemTheme { + DesignSystemFoundationScreen( + onButtonClicked = {}, + modifier = Modifier + .fillMaxSize() + .padding(dimensionResource(R.dimen.button_container_shadow_height)) + ) + } } diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt index bbe2753a09ac..858ad9b59f02 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt @@ -12,6 +12,11 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview @@ -20,14 +25,14 @@ import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController -import org.wordpress.android.R import org.wordpress.android.ui.compose.components.MainTopAppBar import org.wordpress.android.ui.compose.components.NavigationIcons enum class DesignSystemScreen { Start, Foundation, - Components + Components, + Colors } @Composable @@ -55,16 +60,31 @@ fun StartDesignSystemPreview(){ DesignSystem {} } } +private fun getTitleForRoute(route: String): String { + return when (route) { + "Start" -> "Design System" + "Foundation" -> "Foundation" + "Components" -> "Components" + "Colors" -> "Colors" + else -> "" + } +} @Composable fun DesignSystem( onBackTapped: () -> Unit ) { val navController: NavHostController = rememberNavController() + var actionBarTitle by remember { mutableStateOf("") } + LaunchedEffect(navController) { + navController.currentBackStackEntryFlow.collect { backStackEntry -> + actionBarTitle = getTitleForRoute(backStackEntry.destination.route.toString()) + } + } Scaffold( topBar = { MainTopAppBar( - title = stringResource(R.string.preference_design_system), + title = actionBarTitle, navigationIcon = NavigationIcons.BackIcon, onNavigationIconClick = { onBackTapped() }, backgroundColor = MaterialTheme.colorScheme.primaryContainer, @@ -89,6 +109,9 @@ fun DesignSystem( } composable(route = DesignSystemScreen.Foundation.name) { DesignSystemFoundationScreen( + onButtonClicked = { + navController.navigate(it) + }, modifier = Modifier .fillMaxSize() .padding(innerPadding) @@ -101,6 +124,13 @@ fun DesignSystem( .padding(innerPadding) ) } + composable(route = DesignSystemScreen.Colors.name) { + DesignSystemColorsScreen( + modifier = Modifier + .fillMaxSize() + .padding(innerPadding) + ) + } } } } diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt index 42e76196ac5e..a9fd5cfb3908 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt @@ -64,7 +64,7 @@ private val paletteDarkScheme = darkColorScheme( ) private val extraPaletteLight = ExtraColors( - quartenaryContainer = DesignSystemAppColor.Gray30, + quaternaryContainer = DesignSystemAppColor.Gray30, brand = DesignSystemAppColor.Green, brandContainer = DesignSystemAppColor.Green, warning = DesignSystemAppColor.Orange, @@ -73,7 +73,7 @@ private val extraPaletteLight = ExtraColors( ) private val extraPaletteDark = ExtraColors( - quartenaryContainer = DesignSystemAppColor.Gray60, + quaternaryContainer = DesignSystemAppColor.Gray60, brand = DesignSystemAppColor.Green10, brandContainer = DesignSystemAppColor.Green20, warning = DesignSystemAppColor.Orange10, @@ -82,7 +82,7 @@ private val extraPaletteDark = ExtraColors( ) data class ExtraColors( - val quartenaryContainer: Color, + val quaternaryContainer: Color, val brand: Color, val brandContainer: Color, val warning: Color, @@ -90,10 +90,10 @@ data class ExtraColors( val wpContainer: Color, ) @Suppress("UnusedReceiverParameter") -val ColorScheme.quartenary +val ColorScheme.quaternaryContainer @Composable @ReadOnlyComposable - get() = localColors.current.quartenaryContainer + get() = localColors.current.quaternaryContainer @Suppress("UnusedReceiverParameter") val ColorScheme.brand