commit 0a9d66331dcb27da9e4eddb2de44855464bf1e19 parent 173caad29426ee4489039bc421c68161d578665d Author: Gabriel Luong <gabriel.luong@gmail.com> Date: Thu, 20 Nov 2025 01:11:17 +0000 Bug 1983833 - Part 7: Migrate DotHighlight to use M3 Acorn color tokens r=android-reviewers,petru - The `iconAccentBlue` color had the wrong dark theme color. Instead of changing `iconAccentBlue`, added a new `information` color to `AcornColors` since we will want to deprecate `iconAccentBlue` and remove. - Color: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64745-6688&m=dev - Dot Highlight: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=66379-5182&m=dev Differential Revision: https://phabricator.services.mozilla.com/D270639 Diffstat:
2 files changed, 24 insertions(+), 12 deletions(-)
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/theme/AcornColors.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/theme/AcornColors.kt @@ -106,6 +106,7 @@ class AcornColors( tabActive: Color, tabInactive: Color, badgeActive: Color, + information: Color, surfaceDimVariant: Color, ) { // Layers @@ -445,6 +446,13 @@ class AcornColors( */ /** + * Attention-grabbing color against surface for fills, icons, and text, + * indicating neutral information. + */ + var information by mutableStateOf(information) + private set + + /** * Surface Dim Variant * * Slightly dimmer surface color in light theme. @@ -538,6 +546,7 @@ class AcornColors( tabActive = other.tabActive tabInactive = other.tabInactive badgeActive = other.badgeActive + information = other.information surfaceDimVariant = other.surfaceDimVariant } @@ -630,6 +639,7 @@ class AcornColors( tabActive: Color = this.tabActive, tabInactive: Color = this.tabInactive, badgeActive: Color = this.badgeActive, + information: Color = this.information, surfaceDimVariant: Color = this.surfaceDimVariant, ): AcornColors = AcornColors( layer1 = layer1, @@ -716,6 +726,7 @@ class AcornColors( tabActive = tabActive, tabInactive = tabInactive, badgeActive = badgeActive, + information = information, surfaceDimVariant = surfaceDimVariant, ) } @@ -805,6 +816,7 @@ val darkColorPalette = AcornColors( tabActive = PhotonColors.DarkGrey30, tabInactive = PhotonColors.DarkGrey80, badgeActive = PhotonColors.Ink60, + information = PhotonColors.Blue30, surfaceDimVariant = PhotonColors.DarkGrey80, ) @@ -893,6 +905,7 @@ val lightColorPalette = AcornColors( tabActive = PhotonColors.LightGrey10, tabInactive = PhotonColors.LightGrey20, badgeActive = PhotonColors.Violet05, + information = PhotonColors.Blue60, surfaceDimVariant = PhotonColors.LightGrey20, ) @@ -1050,14 +1063,12 @@ fun acornPrivateColorScheme(): ColorScheme = privateColorPalette.toM3ColorScheme */ /** - * Information - * - * Attention-grabbing color against surface for fills, icons, and text, indicating neutral information. + * @see AcornColors.information */ val ColorScheme.information: Color @Composable @ReadOnlyComposable - get() = AcornTheme.colors.iconAccentBlue + get() = AcornTheme.colors.information /** * @see AcornColors.surfaceDimVariant diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/DotHighlight.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/DotHighlight.kt @@ -5,26 +5,27 @@ package mozilla.components.compose.browser.toolbar.ui import androidx.compose.foundation.Canvas -import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.size +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import mozilla.components.compose.base.theme.AcornTheme +import mozilla.components.compose.base.theme.information import mozilla.components.ui.icons.R as iconsR @Composable internal fun DotHighlight( modifier: Modifier = Modifier, - color: Color = AcornTheme.colors.iconNotice, + color: Color = MaterialTheme.colorScheme.information, ) { Canvas(modifier = modifier.size(10.dp)) { val canvasWidth = size.width @@ -42,15 +43,15 @@ internal fun DotHighlight( @Composable private fun HighlightedActionButtonPreview() { AcornTheme { - Box(modifier = Modifier.background(AcornTheme.colors.layer1)) { - Image( - painter = painterResource(id = iconsR.drawable.mozac_ic_web_extension_default_icon), + Box(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) { + Icon( + painter = painterResource(id = iconsR.drawable.mozac_ic_ellipsis_vertical_24), contentDescription = null, modifier = Modifier.size(32.dp), - colorFilter = ColorFilter.tint(AcornTheme.colors.iconPrimary), + tint = MaterialTheme.colorScheme.onSurface, ) DotHighlight( - modifier = Modifier.align(Alignment.BottomEnd), + modifier = Modifier.align(Alignment.TopEnd), ) } }