[fenix] For https://github.com/mozilla-mobile/fenix/issues/23575 - Use design system colors for the Pocket filter and Customize homepage buttons

app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt

@@ -7,7 +7,6 @@ package org.mozilla.fenix.compose
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -25,7 +24,6 @@ import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
@@ -41,27 +39,27 @@ fun SelectableChip(
     isSelected: Boolean,
     onClick: () -> Unit
 ) {
-    val backgroundColor = when (isSystemInDarkTheme()) {
-        true -> if (isSelected) PhotonColors.Violet50 else PhotonColors.DarkGrey50
-        false -> if (isSelected) PhotonColors.Ink20 else PhotonColors.LightGrey40
-    }
-
     Box(
         modifier = Modifier
             .selectable(isSelected) { onClick() }
             .clip(MaterialTheme.shapes.small)
-            .background(backgroundColor)
+            .background(
-            .padding(16.dp, 10.dp)
+                color = if (isSelected) {
+                    FirefoxTheme.colors.actionPrimary
+                } else {
+                    FirefoxTheme.colors.actionTertiary
+                }
+            )
+            .padding(horizontal = 16.dp, vertical = 10.dp)
     ) {
-        val contentColor = when {
-            isSystemInDarkTheme() || isSelected -> PhotonColors.LightGrey10
-            else -> PhotonColors.DarkGrey90
-        }
-
         Text(
             text = text.capitalize(Locale.current),
             style = TextStyle(fontSize = 14.sp),
-            color = contentColor
+            color = if (isSelected) {
+                FirefoxTheme.colors.textActionPrimary
+            } else {
+                FirefoxTheme.colors.textActionTertiary
+            }
         )
     }
 }
@@ -71,10 +69,12 @@ fun SelectableChip(
 private fun SelectableChipDarkThemePreview() {
     FirefoxTheme {
         Row(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(FirefoxTheme.colors.layer1),
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
-            SelectableChip("Chirp", false) { }
+            SelectableChip(text = "Chirp", isSelected = false) { }
             SelectableChip(text = "Chirp", isSelected = true) { }
         }
     }
@@ -87,10 +87,10 @@ private fun SelectableChipLightThemePreview() {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(FirefoxTheme.colors.layer2),
+                .background(FirefoxTheme.colors.layer1),
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
-            SelectableChip("Chirp", false) { }
+            SelectableChip(text = "Chirp", isSelected = false) { }
             SelectableChip(text = "Chirp", isSelected = true) { }
         }
     }

app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt

@@ -5,7 +5,6 @@
 package org.mozilla.fenix.home.sessioncontrol.viewholders
 
 import android.view.View
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -25,7 +24,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.LifecycleOwner
-import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.home.sessioncontrol.CustomizeHomeIteractor
@@ -62,11 +60,6 @@ class CustomizeHomeButtonViewHolder(
 fun CustomizeHomeButton(
     onButtonClick: () -> Unit
 ) {
-    val backgroundColor = when (isSystemInDarkTheme()) {
-        true -> PhotonColors.DarkGrey50
-        false -> PhotonColors.LightGrey40
-    }
-
     Button(
         onClick = { onButtonClick() },
         modifier = Modifier
@@ -75,8 +68,8 @@ fun CustomizeHomeButton(
             .height(36.dp),
         elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp),
         colors = outlinedButtonColors(
-            backgroundColor = backgroundColor,
+            backgroundColor = FirefoxTheme.colors.actionTertiary,
-            contentColor = FirefoxTheme.colors.textPrimary
+            contentColor = FirefoxTheme.colors.textActionTertiary
         )
     ) {
         Text(
@@ -93,5 +86,7 @@ fun CustomizeHomeButton(
 @Composable
 @Preview
 fun CustomizeHomeButtonPreview() {
-    CustomizeHomeButton(onButtonClick = {})
+    FirefoxTheme {
+        CustomizeHomeButton(onButtonClick = {})
+    }
 }