[fenix] For https://github.com/mozilla-mobile/fenix/issues/22637 - Add new color tokens provided by the mobile styles to FirefoxTheme

app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt

@@ -110,7 +110,7 @@ private fun ListItemTabSurface(
     Card(
         modifier = modifier,
         shape = RoundedCornerShape(8.dp),
-        backgroundColor = FirefoxTheme.colors.surface,
+        backgroundColor = FirefoxTheme.colors.layer2,
         elevation = 6.dp
     ) {
         Row(

app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt

@@ -49,7 +49,7 @@ fun ListItemTabLargePlaceholder(
             .size(328.dp, 116.dp)
             .clickable { onClick() },
         shape = RoundedCornerShape(8.dp),
-        backgroundColor = FirefoxTheme.colors.surface,
+        backgroundColor = FirefoxTheme.colors.layer2,
         elevation = 6.dp,
     ) {
         Column(

app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt

@@ -87,7 +87,7 @@ private fun SelectableChipLightThemePreview() {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(FirefoxTheme.colors.surface),
+                .background(FirefoxTheme.colors.layer2),
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
             SelectableChip("Chirp", false) { }

app/src/main/java/org/mozilla/fenix/compose/StaggeredHorizontalGrid.kt

@@ -121,7 +121,7 @@ fun StaggeredHorizontalGrid(
 @Preview
 private fun StaggeredHorizontalGridPreview() {
     FirefoxTheme {
-        Box(Modifier.background(FirefoxTheme.colors.surface)) {
+        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
             StaggeredHorizontalGrid(
                 horizontalItemsSpacing = 8.dp,
                 arrangement = Arrangement.Center

app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt

@@ -5,6 +5,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.material.Text
 import androidx.compose.runtime.Composable
@@ -32,7 +33,10 @@ fun TabSubtitle(
         text = text,
         style = TextStyle(fontSize = 12.sp),
         overflow = TextOverflow.Ellipsis,
-        color = FirefoxTheme.colors.textSecondary
+        color = when (isSystemInDarkTheme()) {
+            true -> FirefoxTheme.colors.textPrimary
+            false -> FirefoxTheme.colors.textSecondary
+        }
     )
 }
 
@@ -40,7 +44,7 @@ fun TabSubtitle(
 @Preview
 private fun TabSubtitlePreview() {
     FirefoxTheme {
-        Box(Modifier.background(FirefoxTheme.colors.surface)) {
+        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
             TabSubtitle(
                 "Awesome tab subtitle",
             )

app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt

@@ -85,7 +85,7 @@ fun TabSubtitleWithInterdot(
 @Preview
 private fun TabSubtitleWithInterdotPreview() {
     FirefoxTheme {
-        Box(Modifier.background(FirefoxTheme.colors.surface)) {
+        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
             TabSubtitleWithInterdot(
                 firstText = "firstText",
                 secondText = "secondText",

app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt

@@ -43,7 +43,7 @@ fun TabTitle(
 @Preview
 private fun TabTitlePreview() {
     FirefoxTheme {
-        Box(Modifier.background(FirefoxTheme.colors.surface)) {
+        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
             TabTitle(
                 "Awesome tab title",
                 2

app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt

@@ -243,7 +243,7 @@ fun PoweredByPocketHeader(
 @Preview
 private fun PocketStoriesComposablesPreview() {
     FirefoxTheme {
-        Box(Modifier.background(FirefoxTheme.colors.surface)) {
+        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
             Column {
                 PocketStories(
                     stories = getFakePocketStories(8),

app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt

@@ -114,7 +114,7 @@ private fun RecentTabItem(
             .height(112.dp)
             .clickable { onRecentTabClick(tab.state.id) },
         shape = RoundedCornerShape(8.dp),
-        backgroundColor = FirefoxTheme.colors.surface,
+        backgroundColor = FirefoxTheme.colors.layer2,
         elevation = 6.dp
     ) {
         Row(
@@ -175,7 +175,7 @@ private fun RecentSearchGroupItem(
             .height(112.dp)
             .clickable { onSearchGroupClicked(tabId) },
         shape = RoundedCornerShape(8.dp),
-        backgroundColor = FirefoxTheme.colors.surface,
+        backgroundColor = FirefoxTheme.colors.layer2,
         elevation = 6.dp
     ) {
         Row(
@@ -202,7 +202,10 @@ private fun RecentSearchGroupItem(
                         painter = painterResource(id = R.drawable.ic_all_tabs),
                         modifier = Modifier.size(18.dp),
                         contentDescription = null,
-                        tint = FirefoxTheme.colors.textSecondary
+                        tint = when (isSystemInDarkTheme()) {
+                            true -> FirefoxTheme.colors.textPrimary
+                            false -> FirefoxTheme.colors.textSecondary
+                        }
                     )
 
                     Spacer(modifier = Modifier.width(8.dp))
@@ -376,7 +379,10 @@ private fun RecentTabTitle(title: String) {
 private fun RecentTabSubtitle(subtitle: String) {
     Text(
         text = subtitle.getRepresentativeSnippet(),
-        color = FirefoxTheme.colors.textSecondary,
+        color = when (isSystemInDarkTheme()) {
+            true -> FirefoxTheme.colors.textPrimary
+            false -> FirefoxTheme.colors.textSecondary
+        },
         fontSize = 12.sp,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1

app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt

@@ -11,6 +11,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.gestures.scrollable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -73,7 +74,7 @@ fun RecentlyVisited(
     Card(
         modifier = Modifier.fillMaxWidth(),
         shape = RoundedCornerShape(8.dp),
-        backgroundColor = FirefoxTheme.colors.surface,
+        backgroundColor = FirefoxTheme.colors.layer2,
         elevation = 6.dp
     ) {
         LazyRow(
@@ -258,7 +259,10 @@ private fun RecentlyVisitedCaption(count: Int) {
 
     Text(
         text = String.format(LocalContext.current.getString(stringId), count),
-        color = FirefoxTheme.colors.textSecondary,
+        color = when (isSystemInDarkTheme()) {
+            true -> FirefoxTheme.colors.textPrimary
+            false -> FirefoxTheme.colors.textSecondary
+        },
         fontSize = 12.sp,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1
@@ -286,7 +290,7 @@ private fun RecentlyVisitedMenu(
         expanded = showMenu,
         onDismissRequest = { onDismissRequest() },
         modifier = Modifier
-            .background(color = FirefoxTheme.colors.surface)
+            .background(color = FirefoxTheme.colors.layer2)
             .height(52.dp)
             .scrollable(
                 state = ScrollState(0),
@@ -332,7 +336,7 @@ private fun RecentlyVisitedDivider(
 ) {
     Divider(
         modifier = modifier,
-        color = FirefoxTheme.colors.dividerLine,
+        color = FirefoxTheme.colors.borderDivider,
         thickness = 0.5.dp
     )
 }

app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt

@@ -41,50 +41,355 @@ object FirefoxTheme {
 }
 
 private val darkColorPalette = FirefoxColors(
-    surface = PhotonColors.DarkGrey50,
+    layer1 = PhotonColors.DarkGrey80,
+    layer2 = PhotonColors.DarkGrey50,
+    layer3 = PhotonColors.DarkGrey60,
+    layerAccent = PhotonColors.Violet40,
+    layerNonOpaque = PhotonColors.Violet40A12,
+    scrim = PhotonColors.DarkGrey05A45,
+    scrimAccentStart = PhotonColors.DarkGrey90,
+    scrimAccentEnd = PhotonColors.DarkGrey30,
+    gradientStart = PhotonColors.Violet40,
+    gradientEnd = PhotonColors.Violet70,
+    actionPrimary = PhotonColors.Violet60,
+    actionSecondary = PhotonColors.DarkGrey50,
+    actionTertiary = PhotonColors.LightGrey40,
+    actionDisabled = PhotonColors.DarkGrey05,
+    control = PhotonColors.DarkGrey05,
+    controlDark = PhotonColors.Violet40A30,
+    controlActive = PhotonColors.LightGrey90,
     textPrimary = PhotonColors.LightGrey05,
-    textSecondary = PhotonColors.LightGrey05,
+    textSecondary = PhotonColors.LightGrey40,
-    dividerLine = PhotonColors.DarkGrey05
+    textDisabled = PhotonColors.LightGrey05A40,
+    textWarning = PhotonColors.Red40,
+    textLink = PhotonColors.Violet40,
+    textAccent = PhotonColors.Violet40,
+    textInverted = PhotonColors.White,
+    iconPrimary = PhotonColors.LightGrey05,
+    iconSecondary = PhotonColors.LightGrey40,
+    iconDisabled = PhotonColors.LightGrey70,
+    iconInverted = PhotonColors.White,
+    iconNotice = PhotonColors.Blue30,
+    iconButton = PhotonColors.LightGrey05,
+    iconWarning = PhotonColors.Red40,
+    iconAccentViolet = PhotonColors.Violet20,
+    iconAccentBlue = PhotonColors.Blue20,
+    iconAccentPink = PhotonColors.Pink20,
+    iconAccentGreen = PhotonColors.Green20,
+    iconAccentYellow = PhotonColors.Yellow20,
+    borderDefault = PhotonColors.LightGrey05,
+    borderSelected = PhotonColors.Violet40,
+    borderDisabled = PhotonColors.LightGrey70,
+    borderWarning = PhotonColors.Red40,
+    borderDivider = PhotonColors.DarkGrey05
 )
 
 private val lightColorPalette = FirefoxColors(
-    surface = PhotonColors.White,
+    layer1 = PhotonColors.LightGrey20,
+    layer2 = PhotonColors.White,
+    layer3 = PhotonColors.LightGrey10,
+    layerAccent = PhotonColors.Violet90,
+    layerNonOpaque = PhotonColors.Violet90A20,
+    scrim = PhotonColors.DarkGrey05A45,
+    scrimAccentStart = PhotonColors.DarkGrey90,
+    scrimAccentEnd = PhotonColors.DarkGrey30,
+    gradientStart = PhotonColors.Violet40,
+    gradientEnd = PhotonColors.Violet70,
+    actionPrimary = PhotonColors.Violet90,
+    actionSecondary = PhotonColors.LightGrey40,
+    actionTertiary = PhotonColors.DarkGrey05,
+    actionDisabled = PhotonColors.LightGrey50,
+    control = PhotonColors.LightGrey30,
+    controlDark = PhotonColors.Violet40A30,
+    controlActive = PhotonColors.LightGrey50,
     textPrimary = PhotonColors.DarkGrey90,
     textSecondary = PhotonColors.DarkGrey05,
-    dividerLine = PhotonColors.LightGrey30
+    textDisabled = PhotonColors.DarkGrey90A40,
+    textWarning = PhotonColors.Red80,
+    textLink = PhotonColors.Violet70,
+    textAccent = PhotonColors.Violet90,
+    textInverted = PhotonColors.White,
+    iconPrimary = PhotonColors.DarkGrey90,
+    iconSecondary = PhotonColors.DarkGrey05,
+    iconDisabled = PhotonColors.LightGrey70,
+    iconInverted = PhotonColors.White,
+    iconNotice = PhotonColors.Blue30,
+    iconButton = PhotonColors.Violet90,
+    iconWarning = PhotonColors.Red80,
+    iconAccentViolet = PhotonColors.Violet60,
+    iconAccentBlue = PhotonColors.Blue60,
+    iconAccentPink = PhotonColors.Pink60,
+    iconAccentGreen = PhotonColors.Green60,
+    iconAccentYellow = PhotonColors.Yellow60,
+    borderDefault = PhotonColors.DarkGrey90,
+    borderSelected = PhotonColors.Violet90,
+    borderDisabled = PhotonColors.LightGrey70,
+    borderWarning = PhotonColors.Red80,
+    borderDivider = PhotonColors.LightGrey40,
 )
 
 /**
  * A custom Color Palette for Mozilla Firefox for Android (Fenix).
  */
+@Suppress("LargeClass", "LongParameterList")
 @Stable
 class FirefoxColors(
-    surface: Color,
+    layer1: Color,
+    layer2: Color,
+    layer3: Color,
+    layerAccent: Color,
+    layerNonOpaque: Color,
+    scrim: Color,
+    scrimAccentStart: Color,
+    scrimAccentEnd: Color,
+    gradientStart: Color,
+    gradientEnd: Color,
+    actionPrimary: Color,
+    actionSecondary: Color,
+    actionTertiary: Color,
+    actionDisabled: Color,
+    control: Color,
+    controlDark: Color,
+    controlActive: Color,
     textPrimary: Color,
     textSecondary: Color,
-    dividerLine: Color
+    textDisabled: Color,
+    textWarning: Color,
+    textLink: Color,
+    textAccent: Color,
+    textInverted: Color,
+    iconPrimary: Color,
+    iconSecondary: Color,
+    iconDisabled: Color,
+    iconInverted: Color,
+    iconNotice: Color,
+    iconButton: Color,
+    iconWarning: Color,
+    iconAccentViolet: Color,
+    iconAccentBlue: Color,
+    iconAccentPink: Color,
+    iconAccentGreen: Color,
+    iconAccentYellow: Color,
+    borderDefault: Color,
+    borderSelected: Color,
+    borderDisabled: Color,
+    borderWarning: Color,
+    borderDivider: Color
 ) {
-    var surface by mutableStateOf(surface)
+    // Layers
+
+    // Default Screen, Search, Frontlayer background
+    var layer1 by mutableStateOf(layer1)
         private set
+    // Card background, Menu background
+    var layer2 by mutableStateOf(layer2)
+        private set
+    // App Bar Top, App Bar Bottom, Toolbar background, Frontlayer header
+    var layer3 by mutableStateOf(layer3)
+        private set
+    // Frontlayer header (edit), Header (edit)
+    var layerAccent by mutableStateOf(layerAccent)
+        private set
+    // Selected tab
+    var layerNonOpaque by mutableStateOf(layerNonOpaque)
+        private set
+    var scrim by mutableStateOf(scrim)
+        private set
+    var scrimAccentStart by mutableStateOf(scrimAccentStart)
+        private set
+    var scrimAccentEnd by mutableStateOf(scrimAccentEnd)
+        private set
+    // Tooltip
+    var gradientStart by mutableStateOf(gradientStart)
+        private set
+    // Tooltip
+    var gradientEnd by mutableStateOf(gradientEnd)
+        private set
+
+    // Actions
+
+    // Primary button, Snackbar, Floating action button, Controls
+    var actionPrimary by mutableStateOf(actionPrimary)
+        private set
+    // Secondary button, Pill button
+    var actionSecondary by mutableStateOf(actionSecondary)
+        private set
+    // Checkbox enabled, Radio enabled
+    var actionTertiary by mutableStateOf(actionTertiary)
+        private set
+    // Checkbox disabled, Radio disabled
+    var actionDisabled by mutableStateOf(actionDisabled)
+        private set
+    // Switch background OFF, Indicator OFF
+    var control by mutableStateOf(control)
+        private set
+    // Switch background ON
+    var controlDark by mutableStateOf(controlDark)
+        private set
+    // Indicator active
+    var controlActive by mutableStateOf(controlActive)
+        private set
+
+    // Text
+
+    // Primary text
     var textPrimary by mutableStateOf(textPrimary)
         private set
+    // Secondary text
     var textSecondary by mutableStateOf(textSecondary)
         private set
-    var dividerLine by mutableStateOf(dividerLine)
+    // Disabled text
+    var textDisabled by mutableStateOf(textDisabled)
+        private set
+    // Warning text
+    var textWarning by mutableStateOf(textWarning)
+        private set
+    // Text link
+    var textLink by mutableStateOf(textLink)
+        private set
+    // Small heading
+    var textAccent by mutableStateOf(textAccent)
+        private set
+    // Text/Icon inverted (on color)
+    var textInverted by mutableStateOf(textInverted)
+        private set
+
+    // Icon
+
+    // Primary icon
+    var iconPrimary by mutableStateOf(iconPrimary)
+        private set
+    // Secondary icon
+    var iconSecondary by mutableStateOf(iconSecondary)
+        private set
+    // Disabled icon
+    var iconDisabled by mutableStateOf(iconDisabled)
+        private set
+    // Icon inverted (on color)
+    var iconInverted by mutableStateOf(iconInverted)
+        private set
+    // New
+    var iconNotice by mutableStateOf(iconNotice)
+        private set
+    // Icon button
+    var iconButton by mutableStateOf(iconButton)
+        private set
+    var iconWarning by mutableStateOf(iconWarning)
+        private set
+    var iconAccentViolet by mutableStateOf(iconAccentViolet)
+        private set
+    var iconAccentBlue by mutableStateOf(iconAccentBlue)
+        private set
+    var iconAccentPink by mutableStateOf(iconAccentPink)
+        private set
+    var iconAccentGreen by mutableStateOf(iconAccentGreen)
+        private set
+    var iconAccentYellow by mutableStateOf(iconAccentYellow)
+        private set
+
+    // Border
+
+    // Form parts
+    var borderDefault by mutableStateOf(borderDefault)
+        private set
+    // Selected tab
+    var borderSelected by mutableStateOf(borderSelected)
+        private set
+    // Form parts
+    var borderDisabled by mutableStateOf(borderDisabled)
+        private set
+    // Form parts
+    var borderWarning by mutableStateOf(borderWarning)
+        private set
+    var borderDivider by mutableStateOf(borderDivider)
         private set
 
     fun update(other: FirefoxColors) {
-        surface = other.surface
+        layer1 = other.layer1
+        layer2 = other.layer2
+        layer3 = other.layer3
+        layerAccent = other.layerAccent
+        layerNonOpaque = other.layerNonOpaque
+        scrim = other.scrim
+        scrimAccentStart = other.scrimAccentStart
+        scrimAccentEnd = other.scrimAccentEnd
+        gradientStart = other.gradientStart
+        gradientEnd = other.gradientEnd
+        actionPrimary = other.actionPrimary
+        actionSecondary = other.actionSecondary
+        actionTertiary = other.actionTertiary
+        actionDisabled = other.actionDisabled
+        control = other.control
+        controlDark = other.controlDark
+        controlActive = other.controlActive
         textPrimary = other.textPrimary
         textSecondary = other.textSecondary
-        dividerLine = other.dividerLine
+        textDisabled = other.textDisabled
+        textWarning = other.textWarning
+        textLink = other.textLink
+        textAccent = other.textAccent
+        textInverted = other.textInverted
+        iconPrimary = other.iconPrimary
+        iconSecondary = other.iconSecondary
+        iconDisabled = other.iconDisabled
+        iconInverted = other.iconInverted
+        iconNotice = other.iconNotice
+        iconButton = other.iconButton
+        iconWarning = other.iconWarning
+        iconAccentViolet = other.iconAccentViolet
+        iconAccentBlue = other.iconAccentBlue
+        iconAccentPink = other.iconAccentPink
+        iconAccentGreen = other.iconAccentGreen
+        iconAccentYellow = other.iconAccentYellow
+        borderDefault = other.borderDefault
+        borderSelected = other.borderSelected
+        borderDisabled = other.borderDisabled
+        borderWarning = other.borderWarning
+        borderDivider = other.borderDivider
     }
 
     fun copy(): FirefoxColors = FirefoxColors(
-        surface = surface,
+        layer1 = layer1,
+        layer2 = layer2,
+        layer3 = layer3,
+        layerAccent = layerAccent,
+        layerNonOpaque = layerNonOpaque,
+        scrim = scrim,
+        scrimAccentStart = scrimAccentStart,
+        scrimAccentEnd = scrimAccentEnd,
+        gradientStart = gradientStart,
+        gradientEnd = gradientEnd,
+        actionPrimary = actionPrimary,
+        actionSecondary = actionSecondary,
+        actionTertiary = actionTertiary,
+        actionDisabled = actionDisabled,
+        control = control,
+        controlDark = controlDark,
+        controlActive = controlActive,
         textPrimary = textPrimary,
         textSecondary = textSecondary,
-        dividerLine = dividerLine
+        textDisabled = textDisabled,
+        textWarning = textWarning,
+        textLink = textLink,
+        textAccent = textAccent,
+        textInverted = textInverted,
+        iconPrimary = iconPrimary,
+        iconSecondary = iconSecondary,
+        iconDisabled = iconDisabled,
+        iconInverted = iconInverted,
+        iconNotice = iconNotice,
+        iconButton = iconButton,
+        iconWarning = iconWarning,
+        iconAccentViolet = iconAccentViolet,
+        iconAccentBlue = iconAccentBlue,
+        iconAccentPink = iconAccentPink,
+        iconAccentGreen = iconAccentGreen,
+        iconAccentYellow = iconAccentYellow,
+        borderDefault = borderDefault,
+        borderSelected = borderSelected,
+        borderDisabled = borderDisabled,
+        borderWarning = borderWarning,
+        borderDivider = borderDivider
     )
 }
 

buildSrc/src/main/java/AndroidComponents.kt

@@ -3,5 +3,5 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 object AndroidComponents {
-    const val VERSION = "96.0.20211202143140"
+    const val VERSION = "96.0.20211202171215"
 }