commit 19a5938d18760916e8ed3db568e874520f7b6b31 parent 1641cfad2817da46e141f6b38c42aebb30d681c7 Author: Gabriel Luong <gabriel.luong@gmail.com> Date: Thu, 4 Dec 2025 17:10:28 +0000 Bug 1993856 - Part 8: Migrate Collections to use the M3 Acorn color tokens r=android-reviewers,devota Cards: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-6278&m=dev Differential Revision: https://phabricator.services.mozilla.com/D272765 Diffstat:
3 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt @@ -13,7 +13,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape 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.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -30,9 +30,9 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.semantics import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp +import mozilla.components.compose.base.button.IconButton import mozilla.components.feature.tab.collections.TabCollection import org.mozilla.fenix.R -import org.mozilla.fenix.R.drawable import org.mozilla.fenix.R.string import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.MenuItem @@ -40,6 +40,7 @@ import org.mozilla.fenix.compose.list.ExpandableListHeader import org.mozilla.fenix.ext.getIconColor import org.mozilla.fenix.home.fake.FakeHomepagePreview import org.mozilla.fenix.theme.FirefoxTheme +import mozilla.components.ui.icons.R as iconsR /** * Rectangular shape with all corners rounded used to display a collapsed collection. @@ -86,7 +87,7 @@ fun Collection( ) .height(48.dp), shape = if (isExpanded) expandedCollectionShape else collapsedCollectionShape, - colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer2), + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerLowest), elevation = CardDefaults.cardElevation(defaultElevation = 5.dp), ) { Row( @@ -95,7 +96,7 @@ fun Collection( verticalAlignment = Alignment.CenterVertically, ) { Icon( - painter = painterResource(drawable.ic_tab_collection), + painter = painterResource(iconsR.drawable.mozac_ic_collection_24), contentDescription = null, modifier = Modifier.padding( start = 16.dp, @@ -116,11 +117,11 @@ fun Collection( Row { IconButton( onClick = { onCollectionShareTabsClicked(collection) }, + contentDescription = stringResource(string.share_button_content_description), ) { Icon( - painter = painterResource(drawable.ic_share), - contentDescription = stringResource(string.share_button_content_description), - tint = FirefoxTheme.colors.iconPrimary, + painter = painterResource(iconsR.drawable.mozac_ic_share_android_24), + contentDescription = null, ) } @@ -128,13 +129,13 @@ fun Collection( onClick = { isMenuExpanded = !isMenuExpanded }, + contentDescription = stringResource( + string.collection_menu_button_content_description, + ), ) { Icon( - painter = painterResource(drawable.ic_menu), - contentDescription = stringResource( - string.collection_menu_button_content_description, - ), - tint = FirefoxTheme.colors.iconPrimary, + painter = painterResource(iconsR.drawable.mozac_ic_ellipsis_vertical_24), + contentDescription = null, ) ContextualMenu( diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/CollectionItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/CollectionItem.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.SwipeToDismissBox import androidx.compose.material3.SwipeToDismissBoxValue import androidx.compose.material3.rememberSwipeToDismissBoxState @@ -28,13 +29,13 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.Constraints import androidx.compose.ui.unit.dp import mozilla.components.feature.tab.collections.Tab -import org.mozilla.fenix.R.drawable import org.mozilla.fenix.R.string import org.mozilla.fenix.compose.DismissibleItemBackground import org.mozilla.fenix.compose.list.FaviconListItem import org.mozilla.fenix.ext.toShortUrl import org.mozilla.fenix.home.fake.FakeHomepagePreview import org.mozilla.fenix.theme.FirefoxTheme +import mozilla.components.ui.icons.R as iconsR /** * Rectangular shape with only right angles used to display a middle tab. @@ -103,7 +104,7 @@ fun CollectionItem( modifier = clippingModifier .fillMaxWidth(), shape = if (isLastInCollection) BOTTOM_TAB_SHAPE else MIDDLE_TAB_SHAPE, - colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer2), + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerLowest), elevation = CardDefaults.cardElevation(defaultElevation = 5.dp), ) { FaviconListItem( @@ -111,7 +112,7 @@ fun CollectionItem( url = tab.url, description = tab.url.toShortUrl(), onClick = onClick, - iconPainter = painterResource(drawable.ic_close), + iconPainter = painterResource(iconsR.drawable.mozac_ic_cross_24), iconDescription = stringResource(string.remove_tab_from_collection), onIconClick = { onRemove(false) }, ) diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/Collections.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/collections/Collections.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState @@ -108,13 +109,13 @@ private fun getMenuItems( return listOfNotNull( MenuItem( title = stringResource(R.string.collection_open_tabs), - color = FirefoxTheme.colors.textPrimary, + color = MaterialTheme.colorScheme.onSurface, ) { onOpenTabsTapped(collection) }, MenuItem( title = stringResource(R.string.collection_rename), - color = FirefoxTheme.colors.textPrimary, + color = MaterialTheme.colorScheme.onSurface, ) { onRenameCollectionTapped(collection) }, @@ -122,7 +123,7 @@ private fun getMenuItems( if (showAddTabs) { MenuItem( title = stringResource(R.string.add_tab), - color = FirefoxTheme.colors.textPrimary, + color = MaterialTheme.colorScheme.onSurface, ) { onAddTabTapped(collection) } @@ -132,7 +133,7 @@ private fun getMenuItems( MenuItem( title = stringResource(R.string.collection_delete), - color = FirefoxTheme.colors.textCritical, + color = MaterialTheme.colorScheme.error, ) { onDeleteCollectionTapped(collection) }, @@ -145,7 +146,7 @@ private fun CollectionsPreview() { val expandedCollections: MutableState<Set<Long>> = remember { mutableStateOf(setOf(1L)) } FirefoxTheme { - Surface(color = FirefoxTheme.colors.layer1) { + Surface { Collections( modifier = Modifier.padding(8.dp), collections = listOf(