commit 0f323f52757b3ecc1c4e99b5994d74a6f347f4b6
parent c6e797fee9468252c5ec5ec1255bbc08a6347c02
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 18 Nov 2025 23:32:37 +0000
Bug 1993856 - Part 3: Align the Top Sites with the M3 Acorn Specs r=android-reviewers,devota
M3 Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63944-21968&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268820
Diffstat:
2 files changed, 62 insertions(+), 48 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/topsites/TopSites.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/topsites/TopSites.kt
@@ -25,6 +25,7 @@ import androidx.compose.foundation.shape.CircleShape
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.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -44,13 +45,16 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag
import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
+import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import mozilla.components.compose.base.modifier.rightClickable
import mozilla.components.feature.top.sites.TopSite
+import mozilla.components.ui.colors.PhotonColors
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.ContextualMenu
import org.mozilla.fenix.compose.Favicon
@@ -59,7 +63,9 @@ import org.mozilla.fenix.home.fake.FakeHomepagePreview
import org.mozilla.fenix.home.topsites.TopSitesTestTag.TOP_SITE_CARD_FAVICON
import org.mozilla.fenix.home.topsites.interactor.TopSiteInteractor
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import org.mozilla.fenix.wallpapers.WallpaperState
+import mozilla.components.ui.icons.R as iconsR
/**
* The size of a top site item.
@@ -72,10 +78,6 @@ private const val TOP_SITES_ROW_WIDTH = TOP_SITES_PER_ROW * TOP_SITES_ITEM_SIZE
private const val TOP_SITES_FAVICON_CARD_SIZE = 60
private const val TOP_SITES_FAVICON_SIZE = 36
-// These intentionally do not reference the design system because they should always be the same colors
-private const val PIN_BACKGROUND_COLOR = 0xFFF0F0F4
-private const val PIN_COLOR = 0xFF15141A
-
/**
* A list of top sites.
*
@@ -234,9 +236,9 @@ data class TopSiteColors(
*/
@Composable
fun colors(
- titleTextColor: Color = FirefoxTheme.colors.textPrimary,
- sponsoredTextColor: Color = FirefoxTheme.colors.textSecondary,
- faviconCardBackgroundColor: Color = FirefoxTheme.colors.layer2,
+ titleTextColor: Color = MaterialTheme.colorScheme.onSurface,
+ sponsoredTextColor: Color = MaterialTheme.colorScheme.onSurface,
+ faviconCardBackgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
) = TopSiteColors(
titleTextColor = titleTextColor,
sponsoredTextColor = sponsoredTextColor,
@@ -251,7 +253,7 @@ data class TopSiteColors(
fun colors(wallpaperState: WallpaperState): TopSiteColors {
val textColor: Long? = wallpaperState.currentWallpaper.textColor
val (titleTextColor, sponsoredTextColor) = if (textColor == null) {
- FirefoxTheme.colors.textPrimary to FirefoxTheme.colors.textSecondary
+ MaterialTheme.colorScheme.onSurface to MaterialTheme.colorScheme.onSurface
} else {
Color(textColor) to Color(textColor)
}
@@ -259,7 +261,7 @@ data class TopSiteColors(
return TopSiteColors(
titleTextColor = titleTextColor,
sponsoredTextColor = sponsoredTextColor,
- faviconCardBackgroundColor = FirefoxTheme.colors.layer2,
+ faviconCardBackgroundColor = MaterialTheme.colorScheme.surfaceContainerLowest,
)
}
}
@@ -337,13 +339,13 @@ fun TopSiteItem(
Box(
modifier = Modifier
.size(16.dp)
- .background(color = Color(PIN_BACKGROUND_COLOR), shape = CircleShape),
+ .background(color = PhotonColors.LightGrey20, shape = CircleShape),
contentAlignment = Alignment.Center,
) {
Image(
- modifier = Modifier.size(10.dp),
- painter = painterResource(id = R.drawable.ic_new_pin),
- colorFilter = ColorFilter.tint(Color(PIN_COLOR)),
+ modifier = Modifier.size(12.dp),
+ painter = painterResource(id = iconsR.drawable.mozac_ic_pin_fill_24),
+ colorFilter = ColorFilter.tint(PhotonColors.DarkGrey90),
contentDescription = null,
)
}
@@ -367,19 +369,19 @@ fun TopSiteItem(
color = topSiteColors.titleTextColor,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
- style = FirefoxTheme.typography.caption,
+ style = FirefoxTheme.typography.caption.copy(fontWeight = FontWeight.W700),
)
}
Text(
text = if (topSite is TopSite.Provided) stringResource(id = R.string.top_sites_sponsored_label) else "",
- modifier = Modifier
- .width(TOP_SITES_ITEM_SIZE.dp),
+ modifier = Modifier.width(TOP_SITES_ITEM_SIZE.dp),
color = topSiteColors.sponsoredTextColor,
fontSize = 10.sp,
textAlign = TextAlign.Center,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
+ style = FirefoxTheme.typography.caption,
)
}
@@ -528,26 +530,51 @@ internal fun getMenuItems(
}
@Composable
-@PreviewLightDark
+@FlexibleWindowLightDarkPreview
private fun TopSitesPreview() {
FirefoxTheme {
- Box(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1)
- .padding(16.dp),
- ) {
- TopSites(
- topSites = FakeHomepagePreview.topSites(),
- onTopSiteClick = {},
- onTopSiteLongClick = {},
- onTopSiteImpression = { _, _ -> },
- onOpenInPrivateTabClicked = {},
- onEditTopSiteClicked = {},
- onRemoveTopSiteClicked = {},
- onSettingsClicked = {},
- onSponsorPrivacyClicked = {},
- onTopSitesItemBound = {},
- )
+ Surface {
+ Box(
+ modifier = Modifier.padding(all = FirefoxTheme.layout.space.static200),
+ ) {
+ TopSites(
+ topSites = FakeHomepagePreview.topSites(),
+ onTopSiteClick = {},
+ onTopSiteLongClick = {},
+ onTopSiteImpression = { _, _ -> },
+ onOpenInPrivateTabClicked = {},
+ onEditTopSiteClicked = {},
+ onRemoveTopSiteClicked = {},
+ onSettingsClicked = {},
+ onSponsorPrivacyClicked = {},
+ onTopSitesItemBound = {},
+ )
+ }
+ }
+ }
+}
+
+@Composable
+@Preview
+private fun TopSitesPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
+ Box(
+ modifier = Modifier.padding(all = FirefoxTheme.layout.space.static200),
+ ) {
+ TopSites(
+ topSites = FakeHomepagePreview.topSites(),
+ onTopSiteClick = {},
+ onTopSiteLongClick = {},
+ onTopSiteImpression = { _, _ -> },
+ onOpenInPrivateTabClicked = {},
+ onEditTopSiteClicked = {},
+ onRemoveTopSiteClicked = {},
+ onSettingsClicked = {},
+ onSponsorPrivacyClicked = {},
+ onTopSitesItemBound = {},
+ )
+ }
}
}
}
diff --git a/mobile/android/fenix/app/src/main/res/drawable/ic_new_pin.xml b/mobile/android/fenix/app/src/main/res/drawable/ic_new_pin.xml
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
- - License, v. 2.0. If a copy of the MPL was not distributed with this
- - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
- android:width="12dp"
- android:height="12dp"
- android:viewportWidth="12"
- android:viewportHeight="12">
- <path
- android:fillColor="?attr/colorOnSurface"
- android:pathData="M9.05,4.055H7.6L7.156,3.89C7.156,3.89 6.19,2.926 5.612,2.349L6.106,1.855C6.302,1.659 6.302,1.342 6.106,1.147C5.91,0.951 5.593,0.951 5.398,1.147L4.689,1.855L1.147,5.398C0.951,5.594 0.951,5.911 1.147,6.106C1.343,6.302 1.66,6.302 1.855,6.106L2.349,5.612C2.93,6.194 3.904,7.17 3.904,7.17L4.054,7.597L4.055,9.049C4.055,9.425 4.279,9.76 4.626,9.904C4.742,9.952 4.862,9.975 4.981,9.975C5.221,9.975 5.457,9.881 5.634,9.703L7.314,8.023L10.144,10.853C10.34,11.049 10.657,11.049 10.852,10.853C11.048,10.657 11.048,10.34 10.852,10.145L8.022,7.315L9.702,5.635C9.968,5.369 10.046,4.974 9.903,4.627C9.761,4.279 9.425,4.055 9.05,4.055Z" />
-</vector>
