commit 03c38d952e128e25ae4f41e257bb998cb26d39bd
parent 9e59d2f22b2fcdf0548c939b8b460cabe0e72e25
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Mon, 24 Nov 2025 08:48:40 +0000
Bug 2000327 - Part 3: Migrate PagerIndicator to use M3 Acorn color tokens r=android-reviewers,007
- Colors were suggested over in Slack. https://mozilla.slack.com/archives/C08MZ1Z840K/p1763146837346939?thread_ts=1763068302.883939&cid=C08MZ1Z840K.
- For the onboarding redesign that utilizes a gradient background, Maggie suggested the following: use 'on surface' for the active state and 'on surface inverse' for the inactive state.
- For surface backgrounds, use 'On Surface' for the active indicator and 'Outline Variant' for the inactive indicator.
Differential Revision: https://phabricator.services.mozilla.com/D273038
Diffstat:
3 files changed, 46 insertions(+), 50 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/PagerIndicator.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/PagerIndicator.kt
@@ -17,6 +17,8 @@ import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
+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
@@ -44,8 +46,8 @@ import org.mozilla.fenix.theme.FirefoxTheme
fun PagerIndicator(
pagerState: PagerState,
modifier: Modifier = Modifier,
- activeColor: Color = FirefoxTheme.colors.indicatorActive,
- inactiveColor: Color = FirefoxTheme.colors.indicatorInactive,
+ activeColor: Color = MaterialTheme.colorScheme.onSurface,
+ inactiveColor: Color = MaterialTheme.colorScheme.inverseOnSurface,
leaveTrail: Boolean = false,
spacing: Dp = 8.dp,
) {
@@ -82,59 +84,55 @@ fun PagerIndicator(
@Composable
private fun PagerIndicatorPreview() {
FirefoxTheme {
- Column(
- modifier = Modifier
- .background(FirefoxTheme.colors.layer1)
- .padding(32.dp),
- horizontalAlignment = Alignment.CenterHorizontally,
- ) {
- Text(
- text = "Without trail",
- style = FirefoxTheme.typography.caption,
- color = FirefoxTheme.colors.textPrimary,
- )
+ Surface {
+ Column(
+ modifier = Modifier.padding(32.dp),
+ horizontalAlignment = Alignment.CenterHorizontally,
+ ) {
+ Text(
+ text = "Without trail",
+ style = FirefoxTheme.typography.caption,
+ )
- Spacer(modifier = Modifier.height(8.dp))
+ Spacer(modifier = Modifier.height(8.dp))
- PagerIndicator(
- pagerState = rememberPagerState(1, pageCount = { 3 }),
- activeColor = FirefoxTheme.colors.actionPrimary,
- inactiveColor = FirefoxTheme.colors.actionSecondary,
- modifier = Modifier.align(Alignment.CenterHorizontally),
- )
+ PagerIndicator(
+ pagerState = rememberPagerState(1, pageCount = { 3 }),
+ modifier = Modifier.align(Alignment.CenterHorizontally),
+ inactiveColor = MaterialTheme.colorScheme.outlineVariant,
+ )
- Spacer(modifier = Modifier.height(16.dp))
+ Spacer(modifier = Modifier.height(16.dp))
- Text(
- text = "With trail",
- style = FirefoxTheme.typography.caption,
- color = FirefoxTheme.colors.textPrimary,
- )
+ Text(
+ text = "With trail",
+ style = FirefoxTheme.typography.caption,
+ )
- Spacer(modifier = Modifier.height(8.dp))
+ Spacer(modifier = Modifier.height(8.dp))
- PagerIndicator(
- pagerState = rememberPagerState(1, pageCount = { 3 }),
- activeColor = FirefoxTheme.colors.actionPrimary,
- inactiveColor = FirefoxTheme.colors.actionSecondary,
- leaveTrail = true,
- modifier = Modifier.align(Alignment.CenterHorizontally),
- )
+ PagerIndicator(
+ pagerState = rememberPagerState(1, pageCount = { 3 }),
+ modifier = Modifier.align(Alignment.CenterHorizontally),
+ inactiveColor = MaterialTheme.colorScheme.outlineVariant,
+ leaveTrail = true,
+ )
- Spacer(modifier = Modifier.height(8.dp))
+ Spacer(modifier = Modifier.height(8.dp))
- Text(
- text = "Default colors",
- style = FirefoxTheme.typography.caption,
- color = FirefoxTheme.colors.textPrimary,
- )
+ Text(
+ text = "Default colors",
+ style = FirefoxTheme.typography.caption,
+ )
- Spacer(modifier = Modifier.height(8.dp))
+ Spacer(modifier = Modifier.height(8.dp))
- PagerIndicator(
- pagerState = rememberPagerState(1, pageCount = { 3 }),
- modifier = Modifier.align(Alignment.CenterHorizontally),
- )
+ PagerIndicator(
+ pagerState = rememberPagerState(1, pageCount = { 3 }),
+ modifier = Modifier.align(Alignment.CenterHorizontally),
+ inactiveColor = MaterialTheme.colorScheme.outlineVariant,
+ )
+ }
}
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingScreenRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingScreenRedesign.kt
@@ -356,8 +356,6 @@ private fun OnboardingContent(
if (!isSmallPhoneScreen) {
PagerIndicator(
pagerState = pagerState,
- activeColor = FirefoxTheme.colors.actionPrimary,
- inactiveColor = FirefoxTheme.colors.actionSecondary,
leaveTrail = true,
modifier = Modifier
.align(Alignment.CenterHorizontally)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingScreen.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.State
@@ -307,12 +308,11 @@ private fun OnboardingContent(
PagerIndicator(
pagerState = pagerState,
- activeColor = FirefoxTheme.colors.actionPrimary,
- inactiveColor = FirefoxTheme.colors.actionSecondary,
- leaveTrail = true,
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(bottom = 16.dp),
+ inactiveColor = MaterialTheme.colorScheme.outlineVariant,
+ leaveTrail = true,
)
}
}
