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

3 years ago · 175a230b50
parent a1b0dd184a
commit 175a230b50
12 changed files with 350 additions and 31 deletions
--- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt
+++ b/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(
--- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt
+++ b/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(
--- a/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt
+++ b/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) { }
--- a/app/src/main/java/org/mozilla/fenix/compose/StaggeredHorizontalGrid.kt
+++ b/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
--- a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt
+++ b/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",
            )
--- a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt
+++ b/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",
--- a/app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt
+++ b/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
--- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt
+++ b/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),
--- a/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt
+++ b/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
--- a/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt
+++ b/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
    )
 }
--- a/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt
+++ b/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,
-    dividerLine = PhotonColors.DarkGrey05
+    textSecondary = PhotonColors.LightGrey40,
+    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
    )
 }

--- a/buildSrc/src/main/java/AndroidComponents.kt
+++ b/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"
 }