commit 85fca1e921b9a197b1ee6d9dd9591b51744df9ca
parent 66abdf3ff5588af1157a07fd8c73456557022959
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 06:47:53 +0000
Bug 1993856 - Part 9: Migrate Collections Placeholder to use the M3 Acorn color tokens r=android-reviewers,007
Button: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=53923-27634&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D272766
Diffstat:
3 files changed, 42 insertions(+), 44 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/PlaceholderCard.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/PlaceholderCard.kt
@@ -17,7 +17,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -29,6 +29,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.button.FilledButton
+import mozilla.components.compose.base.button.IconButton
import mozilla.components.compose.base.modifier.dashedBorder
import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
@@ -47,27 +48,27 @@ fun PlaceholderCard(
description: @Composable () -> Unit,
modifier: Modifier = Modifier,
) {
- FirefoxTheme {
- Card(
- modifier = Modifier
- .dashedBorder(
- color = FirefoxTheme.colors.borderPrimary,
- cornerRadius = 8.dp,
- dashHeight = 2.dp,
- dashWidth = 4.dp,
- )
- .then(modifier),
- colors = CardDefaults.cardColors(containerColor = Color.Transparent),
+ Card(
+ modifier = Modifier
+ .dashedBorder(
+ color = MaterialTheme.colorScheme.outlineVariant,
+ cornerRadius = 8.dp,
+ dashHeight = 2.dp,
+ dashWidth = 4.dp,
+ )
+ .then(modifier),
+ colors = CardDefaults.cardColors(containerColor = Color.Transparent),
+ ) {
+ Column(
+ Modifier
+ .padding(16.dp)
+ .fillMaxWidth(),
) {
- Column(
- Modifier
- .padding(16.dp)
- .fillMaxWidth(),
- ) {
- title()
- Spacer(modifier = Modifier.height(4.dp))
- description()
- }
+ title()
+
+ Spacer(modifier = Modifier.height(4.dp))
+
+ description()
}
}
}
@@ -89,20 +90,19 @@ private fun PlaceholderCardPreview() {
) {
Text(
text = stringResource(R.string.collections_header),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline7,
)
IconButton(
onClick = {},
+ contentDescription = stringResource(
+ R.string.remove_home_collection_placeholder_content_description,
+ ),
modifier = Modifier.size(20.dp),
) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_cross_20),
- contentDescription = stringResource(
- R.string.remove_home_collection_placeholder_content_description,
- ),
- tint = FirefoxTheme.colors.textPrimary,
+ contentDescription = null,
)
}
}
@@ -110,7 +110,7 @@ private fun PlaceholderCardPreview() {
description = {
Text(
text = stringResource(R.string.no_collections_description2),
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.body2,
)
@@ -121,7 +121,7 @@ private fun PlaceholderCardPreview() {
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
- icon = painterResource(R.drawable.ic_tab_collection),
+ icon = painterResource(iconsR.drawable.mozac_ic_collection_24),
onClick = {},
)
},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/CollectionsState.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/CollectionsState.kt
@@ -4,7 +4,8 @@
package org.mozilla.fenix.home.collections
-import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import mozilla.components.browser.state.selector.normalTabs
@@ -13,7 +14,6 @@ import mozilla.components.browser.state.state.BrowserState
import mozilla.components.feature.tab.collections.TabCollection
import org.mozilla.fenix.browser.browsingmode.BrowsingModeManager
import org.mozilla.fenix.components.appstate.AppState
-import org.mozilla.fenix.theme.FirefoxTheme
import org.mozilla.fenix.wallpapers.WallpaperState
/**
@@ -109,10 +109,10 @@ data class CollectionColors(
*/
@Composable
fun colors(
- buttonBackgroundColor: Color = FirefoxTheme.colors.actionPrimary,
- buttonTextColor: Color = FirefoxTheme.colors.textActionPrimary,
- titleTextColor: Color = FirefoxTheme.colors.textPrimary,
- descriptionTextColor: Color = FirefoxTheme.colors.textSecondary,
+ buttonBackgroundColor: Color = ButtonDefaults.buttonColors().containerColor,
+ buttonTextColor: Color = ButtonDefaults.buttonColors().contentColor,
+ titleTextColor: Color = MaterialTheme.colorScheme.onSurface,
+ descriptionTextColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
) = CollectionColors(
buttonBackgroundColor = buttonBackgroundColor,
buttonTextColor = buttonTextColor,
@@ -129,24 +129,22 @@ data class CollectionColors(
val textColor = wallpaperState.currentWallpaper.textColor
val titleTextColor: Color
val descriptionTextColor: Color
+
if (textColor == null) {
- titleTextColor = FirefoxTheme.colors.textPrimary
- descriptionTextColor = FirefoxTheme.colors.textSecondary
+ titleTextColor = MaterialTheme.colorScheme.onSurface
+ descriptionTextColor = MaterialTheme.colorScheme.onSurfaceVariant
} else {
val color = Color(textColor)
titleTextColor = color
descriptionTextColor = color
}
- var buttonColor = FirefoxTheme.colors.actionPrimary
- var buttonTextColor = FirefoxTheme.colors.textActionPrimary
+ var buttonColor = ButtonDefaults.buttonColors().containerColor
+ var buttonTextColor = ButtonDefaults.buttonColors().contentColor
wallpaperState.ComposeRunIfWallpaperCardColorsAreAvailable { _, _ ->
- buttonColor = FirefoxTheme.colors.layer1
-
- if (!isSystemInDarkTheme()) {
- buttonTextColor = FirefoxTheme.colors.textActionSecondary
- }
+ buttonColor = MaterialTheme.colorScheme.surface
+ buttonTextColor = MaterialTheme.colorScheme.onSurface
}
return CollectionColors(
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/CollectionsPlaceholder.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/CollectionsPlaceholder.kt
@@ -117,7 +117,7 @@ internal fun CollectionsPlaceholder(
@Composable
private fun CollectionsPlaceholderPreview() {
FirefoxTheme {
- Surface(color = FirefoxTheme.colors.layer1) {
+ Surface {
Column(modifier = Modifier.padding(16.dp)) {
CollectionsPlaceholder(
interactor = FakeHomepagePreview.collectionInteractor,
