For #22637 - Add new color tokens provided by the mobile styles to Fi…

…refoxTheme
mozilla-mobile · Dec 3, 2021 · e20ef25 · e20ef25
1 parent caea828
commit e20ef25
Show file tree

Hide file tree

Showing 12 changed files with 350 additions and 31 deletions.
diff --git 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(

diff --git 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(

diff --git 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) { }

diff --git 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

diff --git 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,15 +33,18 @@ 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
+        }
     )
 }
 
 @Composable
 @Preview
 private fun TabSubtitlePreview() {
     FirefoxTheme {
-        Box(Modifier.background(FirefoxTheme.colors.surface)) {
+        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
             TabSubtitle(
                 "Awesome tab subtitle",
             )

diff --git 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",

diff --git 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

diff --git 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),

diff --git 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

diff --git 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
     )
 }