commit 08dd702662ba90103082e23e918e6529b4ceb409 parent 03c38d952e128e25ae4f41e257bb998cb26d39bd Author: Gabriel Luong <gabriel.luong@gmail.com> Date: Mon, 24 Nov 2025 08:48:40 +0000 Bug 2000327 - Part 4: Migrate Onboarding Redesign UI to use M3 Acorn color tokens r=android-reviewers,007 - borderPrimary -> outlineVariant following the Divider colors - borderAccent -> primary following the Checkbox colors - layerSearch -> surfaceDim following the Toolbar colors Differential Revision: https://phabricator.services.mozilla.com/D273039 Diffstat:
4 files changed, 26 insertions(+), 37 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/MarketingDataOnboardingPageRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/MarketingDataOnboardingPageRedesign.kt @@ -5,7 +5,6 @@ package org.mozilla.fenix.onboarding.redesign.view import androidx.compose.foundation.Image -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -21,7 +20,7 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Checkbox -import androidx.compose.material3.CheckboxDefaults +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -67,11 +66,11 @@ fun MarketingDataOnboardingPageRedesign( onMarketingDataContinueClick: (allowMarketingDataCollection: Boolean) -> Unit, ) { Card( + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface), elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), ) { Column( modifier = Modifier - .background(FirefoxTheme.colors.layer1) .padding(horizontal = 36.dp, vertical = 24.dp) .fillMaxHeight() .verticalScroll(rememberScrollState()), @@ -81,7 +80,6 @@ fun MarketingDataOnboardingPageRedesign( Text( text = state.title, - color = FirefoxTheme.colors.textPrimary, textAlign = TextAlign.Start, style = FirefoxTheme.typography.headline5, ) @@ -91,7 +89,6 @@ fun MarketingDataOnboardingPageRedesign( Image( painter = painterResource(id = state.imageRes), contentDescription = null, - modifier = Modifier, ) Spacer(modifier = Modifier.height(32.dp)) @@ -155,15 +152,10 @@ private fun MarketingDataView( onCheckedChange = { onMarketingOptInToggle.invoke(!checkboxChecked) }, - colors = CheckboxDefaults.colors( - checkedColor = FirefoxTheme.colors.formSelected, - uncheckedColor = FirefoxTheme.colors.formDefault, - ), ) Text( text = marketingData.bodyTwoText, - color = FirefoxTheme.colors.textPrimary, style = FirefoxTheme.typography.body2, textAlign = TextAlign.Start, ) diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingPageRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingPageRedesign.kt @@ -4,7 +4,6 @@ package org.mozilla.fenix.onboarding.redesign.view -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer @@ -13,7 +12,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.MaterialTheme @@ -82,9 +80,6 @@ private fun SecondaryButton( }, text = secondaryButton.text, onClick = secondaryButton.onClick, - colors = ButtonDefaults.textButtonColors( - contentColor = FirefoxTheme.colors.textActionSecondary, - ), ) } @@ -96,12 +91,11 @@ private fun CardView( ) { Card( modifier = modifier, + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface), elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), ) { Column( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(horizontal = 16.dp, vertical = 24.dp), + modifier = Modifier.padding(horizontal = 16.dp, vertical = 24.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { Spacer(modifier = Modifier.weight(TITLE_TOP_SPACER_WEIGHT)) @@ -133,15 +127,12 @@ private fun Content( mainImage: @Composable () -> Unit, ) { Column( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(horizontal = 20.dp), + modifier = Modifier.padding(horizontal = 20.dp), verticalArrangement = Arrangement.spacedBy(32.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { Text( text = pageState.title, - color = FirefoxTheme.colors.textPrimary, style = MaterialTheme.typography.headlineMedium, ) @@ -149,7 +140,7 @@ private fun Content( Text( text = pageState.description, - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, style = FirefoxTheme.typography.body1, ) } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/TermsOfServiceOnboardingPageRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/TermsOfServiceOnboardingPageRedesign.kt @@ -5,7 +5,6 @@ package org.mozilla.fenix.onboarding.redesign.view import androidx.compose.foundation.Image -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer @@ -53,11 +52,11 @@ fun TermsOfServiceOnboardingPageRedesign( eventHandler: OnboardingTermsOfServiceEventHandler, ) { Card( + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface), elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), ) { Column( modifier = Modifier - .background(FirefoxTheme.colors.layer1) .fillMaxSize() .padding(horizontal = 16.dp, vertical = 24.dp) .verticalScroll(rememberScrollState()), @@ -107,7 +106,6 @@ private fun Header(pageState: OnboardingPageState) { ) { Text( text = pageState.title, - color = FirefoxTheme.colors.textPrimary, textAlign = TextAlign.Center, style = MaterialTheme.typography.headlineMedium, ) @@ -137,7 +135,7 @@ private fun SubHeaderText(text: String) { Text( text = text, style = FirefoxTheme.typography.body2.copy( - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.Center, ), ) @@ -190,7 +188,7 @@ private fun BodyLinkText( ) { val style = FirefoxTheme.typography.caption.copy( textAlign = TextAlign.Start, - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, ) LinkText( diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/ToolbarOnboardingPageRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/ToolbarOnboardingPageRedesign.kt @@ -26,6 +26,7 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -52,6 +53,7 @@ import org.mozilla.fenix.onboarding.view.OnboardingPageState import org.mozilla.fenix.onboarding.view.ToolbarOption import org.mozilla.fenix.onboarding.view.ToolbarOptionType import org.mozilla.fenix.theme.FirefoxTheme +import mozilla.components.ui.icons.R as iconsR /** * A Composable for displaying toolbar placement onboarding page content. @@ -67,11 +69,11 @@ fun ToolbarOnboardingPageRedesign( onToolbarSelectionClicked: (ToolbarOptionType) -> Unit, ) { Card( + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface), elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), ) { Column( modifier = Modifier - .background(FirefoxTheme.colors.layer1) .padding(horizontal = 32.dp, vertical = 24.dp) .fillMaxHeight() .verticalScroll(rememberScrollState()), @@ -81,7 +83,6 @@ fun ToolbarOnboardingPageRedesign( Text( text = pageState.title, - color = FirefoxTheme.colors.textPrimary, textAlign = TextAlign.Start, style = FirefoxTheme.typography.headline5, ) @@ -153,7 +154,6 @@ private fun ToolbarPositionOption( Text( text = option.label, - color = FirefoxTheme.colors.textPrimary, modifier = Modifier.align(Alignment.CenterHorizontally), style = FirefoxTheme.typography.headline7, ) @@ -258,7 +258,7 @@ private fun AddressBarIllustration( .background(addressBarBackground), ) { Icon( - painter = painterResource(R.drawable.ic_search), + painter = painterResource(iconsR.drawable.mozac_ic_search_24), tint = iconTint, contentDescription = null, modifier = Modifier @@ -280,23 +280,31 @@ private fun TabIllustration(modifier: Modifier) { @Composable private fun imageColors(isSelected: Boolean): ImageColors { val borderColor by animateColorAsState( - targetValue = if (isSelected) FirefoxTheme.colors.borderAccent else FirefoxTheme.colors.borderPrimary, + targetValue = if (isSelected) { + MaterialTheme.colorScheme.primary + } else { + MaterialTheme.colorScheme.outlineVariant + }, label = "borderColor", ) val cardBackground by animateColorAsState( - targetValue = if (isSelected) FirefoxTheme.colors.badgeActive else Color.White, + targetValue = if (isSelected) MaterialTheme.colorScheme.primaryContainer else Color.White, label = "cardBackground", ) val addressBarBackground by animateColorAsState( - targetValue = if (isSelected) FirefoxTheme.colors.borderAccent else Color.White, + targetValue = if (isSelected) MaterialTheme.colorScheme.primary else Color.White, label = "addressBarBackground", ) val toolbarBackground by animateColorAsState( - targetValue = if (isSelected) FirefoxTheme.colors.layerSearch else FirefoxTheme.colors.borderPrimary, + targetValue = if (isSelected) { + MaterialTheme.colorScheme.surfaceDim + } else { + MaterialTheme.colorScheme.outlineVariant + }, label = "toolbarBackground", ) val iconColor by animateColorAsState( - targetValue = if (isSelected) Color.White else FirefoxTheme.colors.iconSecondary, + targetValue = if (isSelected) Color.White else MaterialTheme.colorScheme.onSurfaceVariant, label = "iconColor", )