From ae407d9092bc1cce323cef56c6040840a085c7df Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 9 Feb 2024 16:35:52 -0800 Subject: [PATCH 01/15] Add Colors screen --- .../designsystem/DesignSystemColorsScreen.kt | 110 ++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt 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..79805e65b886 --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -0,0 +1,110 @@ +package org.wordpress.android.designsystem + +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.layout.wrapContentSize +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material3.CardDefaults +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 +import org.wordpress.android.designsystem.DesignSystemDataSource.list + +@Composable +fun DesignSystemColorsScreen( + modifier: Modifier = Modifier +) { + LazyColumn( + modifier = modifier, + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy( + dimensionResource(id = R.dimen.reader_follow_sheet_button_margin_top) + ) + ) { + item { + ColorCardList(list) + } + } +} +@Composable +fun ColorCard (colorName: String, colorHex: String) { + Row (modifier = Modifier.padding(all = 8.dp)) { + Box (Modifier.background(DesignSystemTheme.colors.tertiaryBackground)) { + Column( + modifier = Modifier + .padding(30.dp) + .then( + Modifier + .fillMaxWidth() + .wrapContentSize(Alignment.TopCenter) + ) + ) { + Text( + modifier = Modifier + .padding(start = 36.dp, end = 64.dp), + text = colorName, + color = DesignSystemTheme.colors.primaryForeground, + ) + Text( + modifier = Modifier.padding(start = 36.dp, end = 64.dp), + text = colorHex, + color = DesignSystemTheme.colors.primaryForeground + ) + } + Column( + modifier = Modifier + .padding(15.dp) + .then( + Modifier + .fillMaxWidth() + .wrapContentSize(Alignment.TopStart) + ) + ) { + Box( + modifier = Modifier + .size(75.dp) + .clip(CardDefaults.shape) + .background(Color.Red) + ) + } + } + } +} +@Composable +fun ColorCardList(colorOptions: List) { + colorOptions.forEach { colorOption -> + ColorCard(colorOption.title, colorOption.hex) + } +} + class ColorOption(var title: String, var hex: String) { + fun getInfo(): String { + return "$title $hex" + } + } + +@Preview +@Composable +fun DesignSystemColorsScreenPreview() { + val list: List = listOf( + ColorOption("Primary Foreground", "#000000"), + ColorOption("Primary Background", "#FFFFFF") + ) + + DesignSystemTheme { + ColorCardList(list) + } +} + From 6606bcecdf69b9002ce1700570e43a85c080e7f0 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 9 Feb 2024 16:36:11 -0800 Subject: [PATCH 02/15] Add navigation to Colors screen + onClick --- .../DesignSystemFoundationScreen.kt | 18 +++++++++++------- .../android/designsystem/DesignSystemScreen.kt | 13 ++++++++++++- 2 files changed, 23 insertions(+), 8 deletions(-) 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 9d154c4c7b94..1613bbefffb7 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt @@ -25,7 +25,8 @@ import org.wordpress.android.ui.compose.components.NavigationIcons enum class DesignSystemScreen { Start, Foundation, - Components + Components, + Colors } @Composable @@ -82,6 +83,9 @@ fun DesignSystem( } composable(route = DesignSystemScreen.Foundation.name) { DesignSystemFoundationScreen( + onButtonClicked = { + navController.navigate(it) + }, modifier = Modifier .fillMaxSize() .padding(innerPadding) @@ -94,6 +98,13 @@ fun DesignSystem( .padding(innerPadding) ) } + composable(route = DesignSystemScreen.Colors.name) { + DesignSystemColorsScreen( + modifier = Modifier + .fillMaxSize() + .padding(innerPadding) + ) + } } } } From bcd4039887947c1b20a555872c1ad56fe47333ac Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 9 Feb 2024 17:36:19 -0800 Subject: [PATCH 03/15] Add color list --- .../designsystem/DesignSystemColorsScreen.kt | 40 +++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 79805e65b886..04dd4e0e6821 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.CardDefaults +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -21,7 +22,6 @@ import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.wordpress.android.R -import org.wordpress.android.designsystem.DesignSystemDataSource.list @Composable fun DesignSystemColorsScreen( @@ -35,14 +35,30 @@ fun DesignSystemColorsScreen( ) ) { item { + val list: List = listOf( + ColorOption("Primary Foreground", MaterialTheme.colorScheme.primary), + ColorOption("Primary Background", MaterialTheme.colorScheme.primaryContainer), + ColorOption("Secondary Foreground", MaterialTheme.colorScheme.secondary), + ColorOption("Secondary Background", MaterialTheme.colorScheme.secondaryContainer), + ColorOption("Tertiary Foreground", MaterialTheme.colorScheme.tertiary), + ColorOption("Tertiary Background", MaterialTheme.colorScheme.tertiaryContainer), + ColorOption("Quartenary", MaterialTheme.colorScheme.quartenary), + ColorOption("Brand", MaterialTheme.colorScheme.brand), + ColorOption("Brand Background", MaterialTheme.colorScheme.brandContainer), + ColorOption("Error", MaterialTheme.colorScheme.error), + ColorOption("Warning", MaterialTheme.colorScheme.warning), + ColorOption("WP Foreground", MaterialTheme.colorScheme.wp), + ColorOption("WP Background", MaterialTheme.colorScheme.wpContainer), + ) ColorCardList(list) } } } +@OptIn(ExperimentalStdlibApi::class) @Composable -fun ColorCard (colorName: String, colorHex: String) { +fun ColorCard (colorName: String, color: Color) { Row (modifier = Modifier.padding(all = 8.dp)) { - Box (Modifier.background(DesignSystemTheme.colors.tertiaryBackground)) { + Box (Modifier.background(MaterialTheme.colorScheme.tertiaryContainer)) { Column( modifier = Modifier .padding(30.dp) @@ -56,12 +72,12 @@ fun ColorCard (colorName: String, colorHex: String) { modifier = Modifier .padding(start = 36.dp, end = 64.dp), text = colorName, - color = DesignSystemTheme.colors.primaryForeground, + color = MaterialTheme.colorScheme.primary, ) Text( modifier = Modifier.padding(start = 36.dp, end = 64.dp), - text = colorHex, - color = DesignSystemTheme.colors.primaryForeground + text = color.value.toHexString(), + color = MaterialTheme.colorScheme.primaryContainer ) } Column( @@ -77,7 +93,7 @@ fun ColorCard (colorName: String, colorHex: String) { modifier = Modifier .size(75.dp) .clip(CardDefaults.shape) - .background(Color.Red) + .background(color) ) } } @@ -86,12 +102,12 @@ fun ColorCard (colorName: String, colorHex: String) { @Composable fun ColorCardList(colorOptions: List) { colorOptions.forEach { colorOption -> - ColorCard(colorOption.title, colorOption.hex) + ColorCard(colorOption.title, colorOption.color) } } - class ColorOption(var title: String, var hex: String) { + class ColorOption(var title: String, var color: Color) { fun getInfo(): String { - return "$title $hex" + return "$title ${color.value}" } } @@ -99,8 +115,8 @@ fun ColorCardList(colorOptions: List) { @Composable fun DesignSystemColorsScreenPreview() { val list: List = listOf( - ColorOption("Primary Foreground", "#000000"), - ColorOption("Primary Background", "#FFFFFF") + ColorOption("Primary Foreground", MaterialTheme.colorScheme.primary), + ColorOption("Primary Background", MaterialTheme.colorScheme.primaryContainer) ) DesignSystemTheme { From 7ebf7cbeaa706745d1854d24c9183cd7cb3e830f Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Thu, 22 Feb 2024 13:57:42 -0800 Subject: [PATCH 04/15] UI cleanup --- .../designsystem/DesignSystemColorsScreen.kt | 28 ++++++++++++------- .../DesignSystemComponentsScreen.kt | 20 +++++++++---- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 04dd4e0e6821..233e452ceeb2 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -1,6 +1,8 @@ package org.wordpress.android.designsystem +import android.content.res.Configuration import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -10,7 +12,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.material3.CardDefaults +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -76,8 +78,8 @@ fun ColorCard (colorName: String, color: Color) { ) Text( modifier = Modifier.padding(start = 36.dp, end = 64.dp), - text = color.value.toHexString(), - color = MaterialTheme.colorScheme.primaryContainer + text = "#" + color.value.toHexString().uppercase().substring(0,8), + color = MaterialTheme.colorScheme.secondary ) } Column( @@ -92,8 +94,11 @@ fun ColorCard (colorName: String, color: Color) { Box( modifier = Modifier .size(75.dp) - .clip(CardDefaults.shape) + .clip(shape = RoundedCornerShape(5.dp, 5.dp, 5.dp, 5.dp)) .background(color) + .border(width = 2.dp, + color = MaterialTheme.colorScheme.primary, + shape = RoundedCornerShape(5.dp)) ) } } @@ -111,15 +116,18 @@ fun ColorCardList(colorOptions: List) { } } -@Preview +@Preview(name = "Light Mode") +@Preview( + uiMode = Configuration.UI_MODE_NIGHT_YES, + showBackground = true, + name = "Dark Mode" +) @Composable fun DesignSystemColorsScreenPreview() { - val list: List = listOf( - ColorOption("Primary Foreground", MaterialTheme.colorScheme.primary), - ColorOption("Primary Background", MaterialTheme.colorScheme.primaryContainer) - ) - DesignSystemTheme { + val list: List = listOf( + ColorOption("Primary Foreground", MaterialTheme.colorScheme.primary) + ) ColorCardList(list) } } 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)) + ) + } } From 22d4b7c2191aec40166c673c5f0e318e669a7999 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Thu, 22 Feb 2024 15:50:44 -0800 Subject: [PATCH 05/15] Cleanup continued --- .../android/designsystem/DesignSystemColorsScreen.kt | 3 ++- .../wordpress/android/designsystem/DesignSystemDataSource.kt | 4 +--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 233e452ceeb2..080856867cf6 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -62,12 +62,13 @@ fun ColorCard (colorName: String, color: Color) { Row (modifier = Modifier.padding(all = 8.dp)) { Box (Modifier.background(MaterialTheme.colorScheme.tertiaryContainer)) { Column( + horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier .padding(30.dp) .then( Modifier .fillMaxWidth() - .wrapContentSize(Alignment.TopCenter) + .wrapContentSize(Alignment.TopCenter), ) ) { Text( 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 From 32f82119117ade26dac5e7ee2d5cb2fc258b9c81 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Thu, 22 Feb 2024 16:00:49 -0800 Subject: [PATCH 06/15] Make rows smaller --- .../android/designsystem/DesignSystemColorsScreen.kt | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 080856867cf6..2d6e553ee007 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -59,12 +59,12 @@ fun DesignSystemColorsScreen( @OptIn(ExperimentalStdlibApi::class) @Composable fun ColorCard (colorName: String, color: Color) { - Row (modifier = Modifier.padding(all = 8.dp)) { + Row (modifier = Modifier.padding(all = 3.dp)) { Box (Modifier.background(MaterialTheme.colorScheme.tertiaryContainer)) { Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier - .padding(30.dp) + .padding(15.dp) .then( Modifier .fillMaxWidth() @@ -72,13 +72,12 @@ fun ColorCard (colorName: String, color: Color) { ) ) { Text( - modifier = Modifier - .padding(start = 36.dp, end = 64.dp), + modifier = Modifier.padding(start = 25.dp, end = 40.dp), text = colorName, color = MaterialTheme.colorScheme.primary, ) Text( - modifier = Modifier.padding(start = 36.dp, end = 64.dp), + modifier = Modifier.padding(start = 25.dp, end = 40.dp), text = "#" + color.value.toHexString().uppercase().substring(0,8), color = MaterialTheme.colorScheme.secondary ) @@ -94,7 +93,7 @@ fun ColorCard (colorName: String, color: Color) { ) { Box( modifier = Modifier - .size(75.dp) + .size(45.dp) .clip(shape = RoundedCornerShape(5.dp, 5.dp, 5.dp, 5.dp)) .background(color) .border(width = 2.dp, From 709bf2f897c2dba685a8db983d5566167b0e5b4b Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 23 Feb 2024 14:16:05 -0800 Subject: [PATCH 07/15] Remove background color --- .../designsystem/DesignSystemColorsScreen.kt | 47 +++++-------------- 1 file changed, 12 insertions(+), 35 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 2d6e553ee007..8888fe656c9c 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -60,17 +60,18 @@ fun DesignSystemColorsScreen( @Composable fun ColorCard (colorName: String, color: Color) { Row (modifier = Modifier.padding(all = 3.dp)) { - Box (Modifier.background(MaterialTheme.colorScheme.tertiaryContainer)) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, + Column{ + Box( modifier = Modifier - .padding(15.dp) - .then( - Modifier - .fillMaxWidth() - .wrapContentSize(Alignment.TopCenter), - ) - ) { + .size(45.dp) + .clip(shape = RoundedCornerShape(5.dp, 5.dp, 5.dp, 5.dp)) + .background(color) + .border(width = 1.dp, + color = MaterialTheme.colorScheme.primary, + shape = RoundedCornerShape(5.dp)) + ) + } + Column { Text( modifier = Modifier.padding(start = 25.dp, end = 40.dp), text = colorName, @@ -82,26 +83,6 @@ fun ColorCard (colorName: String, color: Color) { color = MaterialTheme.colorScheme.secondary ) } - Column( - modifier = Modifier - .padding(15.dp) - .then( - Modifier - .fillMaxWidth() - .wrapContentSize(Alignment.TopStart) - ) - ) { - Box( - modifier = Modifier - .size(45.dp) - .clip(shape = RoundedCornerShape(5.dp, 5.dp, 5.dp, 5.dp)) - .background(color) - .border(width = 2.dp, - color = MaterialTheme.colorScheme.primary, - shape = RoundedCornerShape(5.dp)) - ) - } - } } } @Composable @@ -110,11 +91,7 @@ fun ColorCardList(colorOptions: List) { ColorCard(colorOption.title, colorOption.color) } } - class ColorOption(var title: String, var color: Color) { - fun getInfo(): String { - return "$title ${color.value}" - } - } +class ColorOption(var title: String, var color: Color) @Preview(name = "Light Mode") @Preview( From ada1e9f3a7d2954690a10f68bbf73df3fa608ecc Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 23 Feb 2024 14:55:09 -0800 Subject: [PATCH 08/15] Separate colors into sections, create titles --- .../designsystem/DesignSystemColorsScreen.kt | 68 +++++++++++-------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 8888fe656c9c..4eee3f9f8d10 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -10,7 +10,6 @@ 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.layout.wrapContentSize import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme @@ -31,36 +30,42 @@ fun DesignSystemColorsScreen( ) { LazyColumn( modifier = modifier, - horizontalAlignment = Alignment.CenterHorizontally, + horizontalAlignment = Alignment.Start, verticalArrangement = Arrangement.spacedBy( dimensionResource(id = R.dimen.reader_follow_sheet_button_margin_top) ) ) { item { - val list: List = listOf( - ColorOption("Primary Foreground", MaterialTheme.colorScheme.primary), - ColorOption("Primary Background", MaterialTheme.colorScheme.primaryContainer), - ColorOption("Secondary Foreground", MaterialTheme.colorScheme.secondary), - ColorOption("Secondary Background", MaterialTheme.colorScheme.secondaryContainer), - ColorOption("Tertiary Foreground", MaterialTheme.colorScheme.tertiary), - ColorOption("Tertiary Background", MaterialTheme.colorScheme.tertiaryContainer), + ColorTitle("Foreground") + val listForeground: List = listOf( + ColorOption("Primary", MaterialTheme.colorScheme.primary), + ColorOption("Secondary", MaterialTheme.colorScheme.secondary), + ColorOption("Tertiary", MaterialTheme.colorScheme.tertiary), ColorOption("Quartenary", MaterialTheme.colorScheme.quartenary), ColorOption("Brand", MaterialTheme.colorScheme.brand), - ColorOption("Brand Background", MaterialTheme.colorScheme.brandContainer), ColorOption("Error", MaterialTheme.colorScheme.error), ColorOption("Warning", MaterialTheme.colorScheme.warning), - ColorOption("WP Foreground", MaterialTheme.colorScheme.wp), - ColorOption("WP Background", MaterialTheme.colorScheme.wpContainer), + ColorOption("WP", MaterialTheme.colorScheme.wp), ) - ColorCardList(list) + ColorCardList(listForeground) + + ColorTitle("Background") + val listBackground: List = listOf( + ColorOption("Primary", MaterialTheme.colorScheme.primaryContainer), + ColorOption("Secondary", MaterialTheme.colorScheme.secondaryContainer), + ColorOption("Tertiary", MaterialTheme.colorScheme.tertiaryContainer), + 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(all = 3.dp)) { - Column{ + Row (modifier = Modifier.padding(10.dp, 3.dp).fillMaxWidth()) { + Column { Box( modifier = Modifier .size(45.dp) @@ -71,18 +76,18 @@ fun ColorCard (colorName: String, color: Color) { shape = RoundedCornerShape(5.dp)) ) } - 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 - ) - } + 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 + ) + } } } @Composable @@ -92,7 +97,14 @@ fun ColorCardList(colorOptions: List) { } } 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, From a22330d0ed157b505e119488c211fe8183a84f08 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Fri, 23 Feb 2024 14:55:17 -0800 Subject: [PATCH 09/15] Update preview --- .../android/designsystem/DesignSystemColorsScreen.kt | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 4eee3f9f8d10..d6d31f6ef8c7 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -114,10 +114,7 @@ fun ColorTitle(title: String) { @Composable fun DesignSystemColorsScreenPreview() { DesignSystemTheme { - val list: List = listOf( - ColorOption("Primary Foreground", MaterialTheme.colorScheme.primary) - ) - ColorCardList(list) + DesignSystemColorsScreen() } } From 1961ea35075c36d4b776fc4808c5cd569c58cc6a Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Mon, 26 Feb 2024 17:19:20 -0800 Subject: [PATCH 10/15] Remove border from color icons --- .../wordpress/android/designsystem/DesignSystemColorsScreen.kt | 3 --- 1 file changed, 3 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index d6d31f6ef8c7..7783d399f8e3 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -71,9 +71,6 @@ fun ColorCard (colorName: String, color: Color) { .size(45.dp) .clip(shape = RoundedCornerShape(5.dp, 5.dp, 5.dp, 5.dp)) .background(color) - .border(width = 1.dp, - color = MaterialTheme.colorScheme.primary, - shape = RoundedCornerShape(5.dp)) ) } Column { From 8a8193d027139192775b9527cac98d97188f8d3c Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Mon, 26 Feb 2024 18:32:42 -0800 Subject: [PATCH 11/15] Add divider --- .../wordpress/android/designsystem/DesignSystemColorsScreen.kt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 7783d399f8e3..9573cd3cd582 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -12,6 +12,7 @@ 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 @@ -86,6 +87,7 @@ fun ColorCard (colorName: String, color: Color) { ) } } + Divider(modifier = Modifier.padding(start = 10.dp, end = 10.dp)) } @Composable fun ColorCardList(colorOptions: List) { From 21223c0fc4879411feb87737dfcce637f54e5a0a Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 27 Feb 2024 00:36:54 -0800 Subject: [PATCH 12/15] Update screen title based on route navigation --- .../designsystem/DesignSystemScreen.kt | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) 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 e4692038d2ae..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,7 +25,6 @@ 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 @@ -56,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, From baacee59a5d812ad57f5822fccb304a049f0cc99 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 27 Feb 2024 00:44:02 -0800 Subject: [PATCH 13/15] Detekt --- .../wordpress/android/designsystem/DesignSystemColorsScreen.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 9573cd3cd582..8b8a81fa5e9d 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -2,7 +2,6 @@ package org.wordpress.android.designsystem import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column From 7e851b6c3ba083b1cf327bef5d01d1e8d43bfa60 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 27 Feb 2024 16:36:44 -0800 Subject: [PATCH 14/15] Fix quartenary color naming to quartenaryContainer since it's a background color (not foreground) --- .../wordpress/android/designsystem/DesignSystemColorsScreen.kt | 2 +- .../org/wordpress/android/designsystem/DesignSystemTheme.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 8b8a81fa5e9d..2f08b1fd75ee 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -41,7 +41,6 @@ fun DesignSystemColorsScreen( ColorOption("Primary", MaterialTheme.colorScheme.primary), ColorOption("Secondary", MaterialTheme.colorScheme.secondary), ColorOption("Tertiary", MaterialTheme.colorScheme.tertiary), - ColorOption("Quartenary", MaterialTheme.colorScheme.quartenary), ColorOption("Brand", MaterialTheme.colorScheme.brand), ColorOption("Error", MaterialTheme.colorScheme.error), ColorOption("Warning", MaterialTheme.colorScheme.warning), @@ -54,6 +53,7 @@ fun DesignSystemColorsScreen( ColorOption("Primary", MaterialTheme.colorScheme.primaryContainer), ColorOption("Secondary", MaterialTheme.colorScheme.secondaryContainer), ColorOption("Tertiary", MaterialTheme.colorScheme.tertiaryContainer), + ColorOption("Quartenary", MaterialTheme.colorScheme.quartenaryContainer), ColorOption("Brand", MaterialTheme.colorScheme.brandContainer), ColorOption("WP", MaterialTheme.colorScheme.wpContainer), ) 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..8db84d12cf85 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemTheme.kt @@ -90,7 +90,7 @@ data class ExtraColors( val wpContainer: Color, ) @Suppress("UnusedReceiverParameter") -val ColorScheme.quartenary +val ColorScheme.quartenaryContainer @Composable @ReadOnlyComposable get() = localColors.current.quartenaryContainer From 19123337a2f642be9c7cee5b13c06d469482df89 Mon Sep 17 00:00:00 2001 From: Aditi Bhatia Date: Tue, 27 Feb 2024 18:03:09 -0800 Subject: [PATCH 15/15] Typo in quaternary --- .../android/designsystem/DesignSystemColorsScreen.kt | 2 +- .../android/designsystem/DesignSystemTheme.kt | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt index 2f08b1fd75ee..1541bccd1d9b 100644 --- a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt +++ b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemColorsScreen.kt @@ -53,7 +53,7 @@ fun DesignSystemColorsScreen( ColorOption("Primary", MaterialTheme.colorScheme.primaryContainer), ColorOption("Secondary", MaterialTheme.colorScheme.secondaryContainer), ColorOption("Tertiary", MaterialTheme.colorScheme.tertiaryContainer), - ColorOption("Quartenary", MaterialTheme.colorScheme.quartenaryContainer), + ColorOption("Quaternary", MaterialTheme.colorScheme.quaternaryContainer), ColorOption("Brand", MaterialTheme.colorScheme.brandContainer), ColorOption("WP", MaterialTheme.colorScheme.wpContainer), ) 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 8db84d12cf85..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.quartenaryContainer +val ColorScheme.quaternaryContainer @Composable @ReadOnlyComposable - get() = localColors.current.quartenaryContainer + get() = localColors.current.quaternaryContainer @Suppress("UnusedReceiverParameter") val ColorScheme.brand