Merge pull request #20259 from wordpress-mobile/feature/19802-designs…

…ystem-part4

Add Colors screen for Design System

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<ColorOption> = 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<ColorOption> = 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<ColorOption>) {
+    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()
+    }
+}
+

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))
+        )
+    }
 }
 

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

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))
+         )
+     }
 }
 

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)
+                )
+            }
         }
     }
 }

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,18 +82,18 @@ private val extraPaletteDark = ExtraColors(
     )
 
 data class ExtraColors(
-    val quartenaryContainer: Color,
+    val quaternaryContainer: Color,
     val brand: Color,
     val brandContainer: Color,
     val warning: Color,
     val wp: Color,
     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