commit 3c16aeaf4c367ad1bbdb5543eab23f68c0d5938e
parent 5f24a39fe002077697b75fda8c8e7ee5b730b2fc
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 06:47:53 +0000
Bug 1993856 - Part 12: Migrate SetupChecklist and ChecklistView to M3 Acorn color tokens r=android-reviewers,007
Card: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=61820-4186&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D273047
Diffstat:
2 files changed, 11 insertions(+), 31 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/setup/ui/ChecklistView.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/setup/ui/ChecklistView.kt
@@ -4,9 +4,7 @@
package org.mozilla.fenix.home.setup.ui
-import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@@ -16,6 +14,8 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.HorizontalDivider
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.ui.Alignment
@@ -95,14 +95,12 @@ private fun Task(
.weight(1f)
.semantics { heading() },
style = FirefoxTheme.typography.subtitle1,
- color = FirefoxTheme.colors.textPrimary,
)
Icon(
painter = painterResource(task.icon),
contentDescription = stringResource(R.string.a11y_task_icon_description),
modifier = Modifier.padding(16.dp),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
}
@@ -147,24 +145,22 @@ private fun Group(
Text(
text = stringResource(group.title, stringResource(R.string.firefox)),
style = FirefoxTheme.typography.subtitle1,
- color = FirefoxTheme.colors.textPrimary,
modifier = Modifier.semantics { heading() },
)
Text(
text = "${group.progress.completedTasks}/${group.progress.totalTasks}",
style = FirefoxTheme.typography.body2,
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
Icon(
- painter = painterResource(id = R.drawable.ic_arrowhead_down),
+ painter = painterResource(id = iconsR.drawable.mozac_ic_chevron_down_24),
contentDescription = "",
modifier = Modifier
.padding(16.dp)
.rotate(if (group.isExpanded) ROTATE_180 else 0f),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
}
@@ -173,22 +169,18 @@ private fun Group(
@Composable
private fun TasksChecklistPreview() {
FirefoxTheme {
- Box(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1)
- .padding(top = 16.dp),
- ) {
+ Surface {
val tasks = listOf(
ChecklistItem.Task(
type = ChecklistItem.Task.Type.EXPLORE_EXTENSION,
title = R.string.setup_checklist_task_explore_extensions,
- icon = R.drawable.ic_addons_extensions,
+ icon = iconsR.drawable.mozac_ic_extension_24,
isCompleted = true,
),
ChecklistItem.Task(
type = ChecklistItem.Task.Type.INSTALL_SEARCH_WIDGET,
title = R.string.setup_checklist_task_search_widget_2,
- icon = R.drawable.ic_search,
+ icon = iconsR.drawable.mozac_ic_search_24,
isCompleted = false,
),
)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/setup/ui/SetupChecklist.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/setup/ui/SetupChecklist.kt
@@ -4,21 +4,18 @@
package org.mozilla.fenix.home.setup.ui
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -57,7 +54,7 @@ fun SetupChecklist(setupChecklistState: SetupChecklistState, interactor: SetupCh
Card(
modifier = Modifier.padding(16.dp),
shape = shapeChecklist,
- colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer1),
+ colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerLowest),
elevation = CardDefaults.cardElevation(defaultElevation = elevation),
) {
Column(
@@ -99,7 +96,6 @@ private fun Header(state: SetupChecklistState) {
allTasksCompleted = progress.allTasksCompleted(),
),
style = FirefoxTheme.typography.headline7,
- color = FirefoxTheme.colors.textPrimary,
modifier = Modifier.semantics { heading() },
)
@@ -112,7 +108,6 @@ private fun Header(state: SetupChecklistState) {
Text(
text = it,
style = FirefoxTheme.typography.body2,
- color = FirefoxTheme.colors.textPrimary,
)
}
@@ -229,14 +224,7 @@ private fun SetupChecklistPreview(
@PreviewParameter(SetupChecklistPreviewParameterProvider::class) initialState: SetupChecklistState,
) {
FirefoxTheme {
- Spacer(Modifier.height(16.dp))
-
- Box(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1)
- .fillMaxHeight()
- .padding(16.dp),
- ) {
+ Surface {
SetupChecklist(
setupChecklistState = initialState,
interactor = object : SetupChecklistInteractor {
