commit d999dc2ce806a920fd696efc5c797971f6c8bc25
parent 77838b2de4c9edf4c89ce1c1e7063c1c9dada6b0
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 23 Oct 2025 21:00:36 +0000
Bug 1993655 - Part 4: Align menu items with M3 Acorn Specs r=android-reviewers,007
- Aligns menu items with the M3 Acorn Specs
- Color migration roughly follows: layer1- > surface, layer3 -> surfaceDimVariant
- Use "surface" background color for all the previews
Acorn Menu Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64071-14847&m=dev
Menu Figma: https://www.figma.com/design/FWc4e0Z7ZZZOQwTxkhWo34/Menu-Handoff---2025?node-id=15693-4879&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268423
Diffstat:
8 files changed, 84 insertions(+), 65 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/AddonMenuItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/AddonMenuItem.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
@@ -27,6 +28,7 @@ import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.modifier.animateRotation
+import mozilla.components.compose.base.theme.surfaceDimVariant
import mozilla.components.feature.addons.Addon
import mozilla.components.feature.addons.ui.displayName
import mozilla.components.feature.addons.ui.summary
@@ -76,7 +78,7 @@ internal fun AddonMenuItem(
.testTag(RECOMMENDED_ADDON_ITEM)
.clip(shape = RoundedCornerShape(4.dp))
.background(
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
)
.semantics {
role = Role.Button
@@ -140,8 +142,8 @@ private fun AddonMenuItemPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3)
- .padding(16.dp),
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
MenuGroup {
AddonMenuItem(
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/CustomTabMenu.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/CustomTabMenu.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -145,11 +146,11 @@ internal fun CustomTabMenu(
if (isDesktopMode) {
badgeText = stringResource(id = R.string.browser_feature_desktop_site_on)
- badgeBackgroundColor = FirefoxTheme.colors.badgeActive
+ badgeBackgroundColor = MaterialTheme.colorScheme.primaryContainer
menuItemState = if (isPdf) MenuItemState.DISABLED else MenuItemState.ACTIVE
} else {
badgeText = stringResource(id = R.string.browser_feature_desktop_site_off)
- badgeBackgroundColor = FirefoxTheme.colors.layer2
+ badgeBackgroundColor = MaterialTheme.colorScheme.surfaceContainerHighest
menuItemState = if (isPdf) MenuItemState.DISABLED else MenuItemState.ENABLED
}
@@ -243,7 +244,7 @@ private fun PoweredByFirefoxItem(modifier: Modifier = Modifier) {
id = R.string.browser_menu_powered_by2,
stringResource(id = R.string.app_name),
),
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.caption,
)
}
@@ -255,7 +256,8 @@ private fun CustomTabMenuPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
CustomTabMenu(
canGoBack = true,
@@ -287,7 +289,8 @@ private fun CustomTabMenuPrivatePreview() {
FirefoxTheme(theme = Theme.Private) {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
CustomTabMenu(
canGoBack = false,
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/LibraryMenuItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/LibraryMenuItem.kt
@@ -6,6 +6,7 @@ package org.mozilla.fenix.components.menu.compose
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
+import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
@@ -21,6 +22,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Badge
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -41,6 +43,8 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.theme.information
+import mozilla.components.compose.base.theme.surfaceDimVariant
import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
import mozilla.components.ui.icons.R as iconsR
@@ -87,7 +91,7 @@ fun LibraryMenuItem(
this.contentDescription = contentDescription
role = Role.Button
},
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
shape = shape,
) {
Column(
@@ -97,17 +101,19 @@ fun LibraryMenuItem(
BadgedBox(
badge = {
if (isHighlighted) {
- Badge(containerColor = FirefoxTheme.colors.actionInformation)
+ Badge(containerColor = MaterialTheme.colorScheme.information)
}
},
) {
Icon(
painter = painterResource(iconRes),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
)
}
+
Spacer(Modifier.height(4.dp))
+
Text(
text = stringResource(labelRes),
style = FirefoxTheme.typography.caption.copy(
@@ -118,7 +124,7 @@ fun LibraryMenuItem(
textAlign = TextAlign.Center,
maxLines = 2,
softWrap = true,
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
)
}
}
@@ -146,8 +152,10 @@ private fun LibraryMenuItemPreview(
FirefoxTheme {
Row(
Modifier
+ .background(color = MaterialTheme.colorScheme.surface)
.fillMaxWidth()
- .height(IntrinsicSize.Min),
+ .height(IntrinsicSize.Min)
+ .padding(all = FirefoxTheme.layout.space.static100),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
) {
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MainMenu.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MainMenu.kt
@@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@@ -59,6 +60,7 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.theme.surfaceDimVariant
import mozilla.components.feature.addons.Addon
import mozilla.components.feature.addons.ui.displayName
import mozilla.components.feature.addons.ui.summary
@@ -394,7 +396,7 @@ private fun ExtensionsMenuItem(
Icon(
painter = painterResource(id = iconsR.drawable.mozac_ic_settings_24),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
)
return@MenuItem
}
@@ -402,7 +404,7 @@ private fun ExtensionsMenuItem(
Row(
modifier = Modifier
.background(
- color = FirefoxTheme.colors.layer2,
+ color = MaterialTheme.colorScheme.surfaceContainerHighest,
shape = RoundedCornerShape(16.dp),
)
.padding(start = leftPadding, top = 2.dp, bottom = 2.dp, end = 2.dp),
@@ -412,7 +414,7 @@ private fun ExtensionsMenuItem(
if (webExtensionMenuCount > 0) {
Text(
text = webExtensionMenuCount.toString(),
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
overflow = TextOverflow.Ellipsis,
style = FirefoxTheme.typography.caption,
maxLines = 1,
@@ -426,7 +428,7 @@ private fun ExtensionsMenuItem(
painterResource(id = iconsR.drawable.mozac_ic_chevron_down_20)
},
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = EXTENSIONS_OPTION_CHEVRON
@@ -520,7 +522,7 @@ private fun ToolsAndActionsMenuGroup(
moreSettingsSubmenu: @Composable ColumnScope.() -> Unit,
extensionSubmenu: @Composable ColumnScope.() -> Unit,
extensionsMenuItemDescription: String?,
- ) {
+) {
MenuGroup {
val labelId = R.string.browser_menu_desktop_site
val badgeText: String
@@ -529,11 +531,11 @@ private fun ToolsAndActionsMenuGroup(
if (isDesktopMode) {
badgeText = stringResource(id = R.string.browser_feature_desktop_site_on)
- badgeBackgroundColor = FirefoxTheme.colors.badgeActive
+ badgeBackgroundColor = MaterialTheme.colorScheme.primaryContainer
menuItemState = if (isPdf) MenuItemState.DISABLED else MenuItemState.ACTIVE
} else {
badgeText = stringResource(id = R.string.browser_feature_desktop_site_off)
- badgeBackgroundColor = FirefoxTheme.colors.layer2
+ badgeBackgroundColor = MaterialTheme.colorScheme.surfaceContainerHighest
menuItemState = if (isPdf) MenuItemState.DISABLED else MenuItemState.ENABLED
}
@@ -623,7 +625,7 @@ private fun MoreMenuButtonGroup(
Row(
modifier = Modifier
.background(
- color = FirefoxTheme.colors.layer2,
+ color = MaterialTheme.colorScheme.surfaceContainerHighest,
shape = RoundedCornerShape(16.dp),
)
.padding(2.dp),
@@ -633,7 +635,7 @@ private fun MoreMenuButtonGroup(
Icon(
painter = painterResource(id = iconsR.drawable.mozac_ic_chevron_down_20),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.semantics {
testTagsAsResourceId = true
testTag = MORE_OPTION_CHEVRON
@@ -884,7 +886,7 @@ private fun WebExtensionMenuItems(
}
?: painterResource(iconsR.drawable.mozac_ic_web_extension_default_icon),
iconTint = when (webExtensionMenuItem.icon) {
- null -> FirefoxTheme.colors.iconPrimary
+ null -> MaterialTheme.colorScheme.onSurface
else -> Color.Unspecified
},
enabled = webExtensionMenuItem.enabled,
@@ -921,7 +923,7 @@ private fun MoreExtensionsMenuItem(
.wrapContentSize()
.clip(shape = RoundedCornerShape(4.dp))
.background(
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
),
) {
MenuTextItem(
@@ -938,7 +940,7 @@ private fun MenuDialogPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1),
+ .background(color = MaterialTheme.colorScheme.surface),
) {
MainMenu(
accessPoint = MenuAccessPoint.Browser,
@@ -1002,7 +1004,7 @@ private fun MenuDialogPrivatePreview(
FirefoxTheme(theme = Theme.Private) {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1),
+ .background(color = MaterialTheme.colorScheme.surface),
) {
MainMenu(
accessPoint = MenuAccessPoint.Home,
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuDialogBottomSheet.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuDialogBottomSheet.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -64,7 +65,7 @@ fun MenuDialogBottomSheet(
Column(
modifier = Modifier
.background(
- color = FirefoxTheme.colors.layer1,
+ color = MaterialTheme.colorScheme.surface,
shape = cornerShape,
)
.nestedScroll(rememberNestedScrollInteropConnection()),
@@ -111,7 +112,7 @@ private fun MenuBottomSheetHandle(
.fillMaxWidth()
.background(
color = if (isMenuDragBarDark) {
- FirefoxTheme.colors.layerSearch
+ MaterialTheme.colorScheme.surfaceContainerHighest
} else {
Color.Transparent
},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuGroup.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuGroup.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
@@ -44,8 +45,8 @@ private fun MenuGroupPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1)
- .padding(16.dp),
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
MenuGroup {
MenuItem(
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuItem.kt
@@ -17,9 +17,9 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.Composable
@@ -43,6 +43,7 @@ import androidx.compose.ui.semantics.testTagsAsResourceId
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.theme.surfaceDimVariant
import org.mozilla.fenix.R
import org.mozilla.fenix.components.menu.MenuDialogTestTag.WEB_EXTENSION_ITEM
import org.mozilla.fenix.compose.list.IconListItem
@@ -137,7 +138,7 @@ internal fun MenuItem(
.wrapContentSize()
.clip(shape = ROUNDED_CORNER_SHAPE)
.background(
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
),
labelModifier = labelModifier,
labelTextColor = labelTextColor,
@@ -194,7 +195,7 @@ internal fun MenuTextItem(
modifier = modifier
.clip(shape = ROUNDED_CORNER_SHAPE)
.background(
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
),
iconPainter = iconPainter,
onClick = onClick,
@@ -248,7 +249,7 @@ internal fun WebExtensionMenuItem(
.wrapContentSize()
.clip(shape = ROUNDED_CORNER_SHAPE)
.background(
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
),
afterListAction = {
Row(
@@ -259,7 +260,6 @@ internal fun WebExtensionMenuItem(
if (!badgeText.isNullOrEmpty()) {
Badge(
badgeText = badgeText,
- badgeBackgroundColor = FirefoxTheme.colors.layer2,
)
}
@@ -271,7 +271,7 @@ internal fun WebExtensionMenuItem(
) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_settings_24),
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
contentDescription = null,
)
}
@@ -293,10 +293,10 @@ internal fun MenuBadgeItem(
val badgeBackgroundColor: Color
if (checked) {
- badgeBackgroundColor = FirefoxTheme.colors.badgeActive
+ badgeBackgroundColor = MaterialTheme.colorScheme.primaryContainer
state = MenuItemState.ACTIVE
} else {
- badgeBackgroundColor = FirefoxTheme.colors.layer2
+ badgeBackgroundColor = MaterialTheme.colorScheme.surfaceContainerHighest
state = MenuItemState.DISABLED
}
@@ -308,7 +308,7 @@ internal fun MenuBadgeItem(
) { onClick() }
.clip(shape = ROUNDED_CORNER_SHAPE)
.background(
- color = FirefoxTheme.colors.layer3,
+ color = MaterialTheme.colorScheme.surfaceDimVariant,
)
.padding(horizontal = 16.dp, vertical = 8.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
@@ -331,7 +331,7 @@ internal fun MenuBadgeItem(
modifier = Modifier
.defaultMinSize(minHeight = 20.dp)
.wrapContentHeight(),
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.caption,
)
}
@@ -348,13 +348,13 @@ internal fun MenuBadgeItem(
internal fun Badge(
badgeText: String,
state: MenuItemState = MenuItemState.ENABLED,
- badgeBackgroundColor: Color?,
+ badgeBackgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerHighest,
) {
Column(
modifier = Modifier
.clip(shape = RoundedCornerShape(BADGE_ROUNDED_CORNER))
.background(
- color = badgeBackgroundColor ?: FirefoxTheme.colors.layer2,
+ color = badgeBackgroundColor,
)
.padding(horizontal = 16.dp, vertical = 8.dp),
horizontalAlignment = Alignment.CenterHorizontally,
@@ -364,7 +364,7 @@ internal fun Badge(
text = badgeText,
color = getLabelTextColor(state),
overflow = TextOverflow.Ellipsis,
- style = FirefoxTheme.typography.subtitle2,
+ style = FirefoxTheme.typography.headline8,
maxLines = 1,
)
}
@@ -403,29 +403,29 @@ enum class MenuItemState {
@Composable
private fun getLabelTextColor(state: MenuItemState): Color {
return when (state) {
- MenuItemState.ACTIVE -> FirefoxTheme.colors.textAccent
- MenuItemState.WARNING -> FirefoxTheme.colors.textCritical
- else -> FirefoxTheme.colors.textPrimary
+ MenuItemState.ACTIVE -> MaterialTheme.colorScheme.tertiary
+ MenuItemState.WARNING -> MaterialTheme.colorScheme.error
+ else -> MaterialTheme.colorScheme.onSurface
}
}
@Composable
private fun getDescriptionTextColor(state: MenuItemState): Color {
return when (state) {
- MenuItemState.ACTIVE -> FirefoxTheme.colors.textAccent
- MenuItemState.WARNING -> FirefoxTheme.colors.textCritical
- MenuItemState.DISABLED -> FirefoxTheme.colors.textDisabled
- else -> FirefoxTheme.colors.textSecondary
+ MenuItemState.ACTIVE -> MaterialTheme.colorScheme.tertiary
+ MenuItemState.WARNING -> MaterialTheme.colorScheme.error
+ MenuItemState.DISABLED -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
+ else -> MaterialTheme.colorScheme.onSurfaceVariant
}
}
@Composable
private fun getIconTint(state: MenuItemState): Color {
return when (state) {
- MenuItemState.ACTIVE -> FirefoxTheme.colors.iconAccentViolet
- MenuItemState.WARNING -> FirefoxTheme.colors.iconCritical
+ MenuItemState.ACTIVE -> MaterialTheme.colorScheme.tertiary
+ MenuItemState.WARNING -> MaterialTheme.colorScheme.error
MenuItemState.CRITICAL -> Color.Unspecified
- else -> FirefoxTheme.colors.iconPrimary
+ else -> MaterialTheme.colorScheme.onSurface
}
}
@@ -435,11 +435,12 @@ private fun WebExtensionMenuItemPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer2),
+ .background(color = MaterialTheme.colorScheme.surface),
) {
WebExtensionMenuItem(
label = "label",
iconPainter = painterResource(iconsR.drawable.mozac_ic_web_extension_default_icon),
+ iconTint = MaterialTheme.colorScheme.onSurface,
enabled = true,
badgeText = "17",
onClick = {},
@@ -455,7 +456,7 @@ private fun MenuItemPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3)
+ .background(color = MaterialTheme.colorScheme.surface)
.padding(16.dp),
) {
MenuGroup {
@@ -466,8 +467,6 @@ private fun MenuItemPreview() {
state = state,
onClick = {},
)
-
- HorizontalDivider(color = FirefoxTheme.colors.borderSecondary)
}
for (state in MenuItemState.entries) {
@@ -478,8 +477,6 @@ private fun MenuItemPreview() {
onClick = {},
afterIconPainter = painterResource(id = iconsR.drawable.mozac_ic_chevron_right_24),
)
-
- HorizontalDivider(color = FirefoxTheme.colors.borderSecondary)
}
for (state in MenuItemState.entries) {
@@ -492,8 +489,6 @@ private fun MenuItemPreview() {
afterIconPainter = painterResource(id = iconsR.drawable.mozac_ic_plus_24),
onAfterIconClick = {},
)
-
- HorizontalDivider(color = FirefoxTheme.colors.borderSecondary)
}
}
}
@@ -506,7 +501,8 @@ private fun MenuBadgeItemPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer2),
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
MenuBadgeItem(
label = stringResource(id = R.string.protection_panel_etp_toggle_label),
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MoreSettingsSubmenu.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MoreSettingsSubmenu.kt
@@ -7,6 +7,8 @@ package org.mozilla.fenix.components.menu.compose
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
@@ -136,7 +138,7 @@ private fun TranslationMenuItem(
Badge(
badgeText = translationInfo.translatedLanguage,
state = state,
- badgeBackgroundColor = FirefoxTheme.colors.badgeActive,
+ badgeBackgroundColor = MaterialTheme.colorScheme.primaryContainer,
)
}
} else {
@@ -179,7 +181,9 @@ private fun ShortcutsMenuItem(
private fun MoreSettingsSubmenuPreview() {
FirefoxTheme {
Column(
- modifier = Modifier.background(color = FirefoxTheme.colors.layer3),
+ modifier = Modifier
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
MenuGroup {
MoreSettingsSubmenu(
@@ -218,7 +222,9 @@ private fun MoreSettingsSubmenuPreview() {
private fun MoreSettingsSubmenuPrivatePreview() {
FirefoxTheme(theme = Theme.Private) {
Column(
- modifier = Modifier.background(color = FirefoxTheme.colors.layer3),
+ modifier = Modifier
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
) {
MenuGroup {
MoreSettingsSubmenu(
