commit 9f1b12ff622d0ccd3b67863ec031f54fe0e23675
parent 2855afac30899195f3291c8118339ab8f6076c48
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 05:44:31 +0000
Bug 1993368 - Part 20: Migrate InfoCard and InfoCardContainer to M3 Acorn color tokens r=android-reviewers,007
- Migrated as much colors as it made sense at the time of writing for InfoCard and InfoCardContainer.
- Mapped existing colors to the new M3 Acorn color tokens if possible.
- Card background color maps to M3 Card specs at https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=61820-4186&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D273044
Diffstat:
2 files changed, 71 insertions(+), 39 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/InfoCard.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/InfoCard.kt
@@ -4,9 +4,7 @@
package org.mozilla.fenix.compose
-import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
@@ -16,6 +14,8 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
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
import androidx.compose.runtime.ReadOnlyComposable
@@ -99,7 +99,6 @@ fun InfoCard(
title?.let {
Text(
text = it,
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline8,
modifier = Modifier.semantics {
heading()
@@ -115,7 +114,6 @@ fun InfoCard(
Text(
text = remember(description) { parseHtml(description) },
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.body2,
)
}
@@ -127,9 +125,9 @@ fun InfoCard(
text = it.first,
linkTextStates = listOf(it.second),
style = FirefoxTheme.typography.body2.copy(
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
),
- linkTextColor = FirefoxTheme.colors.textPrimary,
+ linkTextColor = MaterialTheme.colorScheme.onSurface,
linkTextDecoration = TextDecoration.Underline,
)
}
@@ -158,7 +156,6 @@ private fun InfoCardIcon(
Icon(
painter = painterResource(id = iconId),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
modifier = modifier,
)
}
@@ -221,7 +218,7 @@ enum class InfoType {
get() = when {
this == Info && !isSystemInDarkTheme() -> FirefoxTheme.colors.textOnColorPrimary
this == InfoPlain -> FirefoxTheme.colors.textActionSecondary
- else -> FirefoxTheme.colors.textPrimary
+ else -> MaterialTheme.colorScheme.onSurface
}
}
@@ -247,15 +244,13 @@ private fun InfoCardPreview(
@PreviewParameter(PreviewModelParameterProvider::class) type: InfoType,
) {
FirefoxTheme {
- Box(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1)
- .padding(16.dp),
- ) {
+ Surface {
InfoCard(
title = "Title text",
type = type,
- modifier = Modifier.fillMaxWidth(),
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(all = 16.dp),
description = "Description text",
footer = "Primary link text with an underlined hyperlink." to LinkTextState(
text = "underlined hyperlink",
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/InfoCardContainer.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/InfoCardContainer.kt
@@ -20,6 +20,8 @@ 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.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@@ -34,12 +36,14 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import org.mozilla.fenix.R
import org.mozilla.fenix.shopping.ui.ext.headingResource
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import mozilla.components.ui.icons.R as iconsR
private val cardShape = RoundedCornerShape(8.dp)
@@ -87,7 +91,6 @@ fun ExpandableInfoCardContainer(
) {
Text(
text = title,
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline8,
modifier = Modifier.semantics {
contentDescription = titleContentDescription
@@ -107,7 +110,6 @@ fun ExpandableInfoCardContainer(
} else {
stringResource(R.string.a11y_state_label_collapsed)
},
- tint = FirefoxTheme.colors.iconPrimary,
)
}
@@ -137,7 +139,7 @@ fun ExpandableInfoCardContainer(
@Composable
fun InfoCardContainer(
modifier: Modifier,
- backgroundColor: Color = FirefoxTheme.colors.layer2,
+ backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
elevation: Dp = defaultCardElevation,
contentPadding: PaddingValues = PaddingValues(defaultCardContentPadding),
content: @Composable ColumnScope.() -> Unit,
@@ -160,32 +162,67 @@ fun InfoCardContainer(
@Composable
private fun InfoCardContainerPreview() {
FirefoxTheme {
- Column(modifier = Modifier.padding(16.dp)) {
- var isExpanded by remember { mutableStateOf(true) }
+ Surface {
+ Column(modifier = Modifier.padding(16.dp)) {
+ var isExpanded by remember { mutableStateOf(true) }
- InfoCardContainer(
- modifier = Modifier.fillMaxWidth(),
- ) {
- Text(
- text = "Info Check Card Content",
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.headline8,
- )
+ InfoCardContainer(
+ modifier = Modifier.fillMaxWidth(),
+ ) {
+ Text(
+ text = "Info Check Card Content",
+ style = FirefoxTheme.typography.headline8,
+ )
+ }
+
+ Spacer(modifier = Modifier.height(16.dp))
+
+ ExpandableInfoCardContainer(
+ title = "Info Expandable Card",
+ modifier = Modifier.fillMaxWidth(),
+ isExpanded = isExpanded,
+ onExpandToggleClick = { isExpanded = !isExpanded },
+ ) {
+ Text(
+ text = "content",
+ style = FirefoxTheme.typography.body2,
+ )
+ }
}
+ }
+ }
+}
- Spacer(modifier = Modifier.height(16.dp))
+@Preview
+@Composable
+private fun InfoCardContainerPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
+ Column(modifier = Modifier.padding(16.dp)) {
+ var isExpanded by remember { mutableStateOf(true) }
- ExpandableInfoCardContainer(
- title = "Info Expandable Card",
- modifier = Modifier.fillMaxWidth(),
- isExpanded = isExpanded,
- onExpandToggleClick = { isExpanded = !isExpanded },
- ) {
- Text(
- text = "content",
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.body2,
- )
+ InfoCardContainer(
+ modifier = Modifier.fillMaxWidth(),
+ ) {
+ Text(
+ text = "Info Check Card Content",
+ style = FirefoxTheme.typography.headline8,
+ )
+ }
+
+ Spacer(modifier = Modifier.height(16.dp))
+
+ ExpandableInfoCardContainer(
+ title = "Info Expandable Card",
+ modifier = Modifier.fillMaxWidth(),
+ isExpanded = isExpanded,
+ onExpandToggleClick = { isExpanded = !isExpanded },
+ ) {
+ Text(
+ text = "content",
+ style = FirefoxTheme.typography.body2,
+ )
+ }
}
}
}
