Merge pull request android#86 from android/nb/theme

Update structure of theming.

Author: nickbutcher

JetNews/app/build.gradle

@@ -63,6 +63,7 @@ dependencies {
     implementation("androidx.ui:ui-core:$compose_version")
     implementation("androidx.ui:ui-layout:$compose_version")
     implementation("androidx.ui:ui-material:$compose_version")
+    implementation("androidx.ui:ui-material-icons-extended:$compose_version")
     implementation("androidx.ui:ui-foundation:$compose_version")
     implementation("androidx.ui:ui-animation:$compose_version")
     implementation "androidx.ui:ui-tooling:$compose_version"

JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/FakePostsRepository.kt

@@ -22,7 +22,6 @@ import androidx.ui.graphics.imageFromResource
 import com.example.jetnews.data.Result
 import com.example.jetnews.data.posts.PostsRepository
 import com.example.jetnews.model.Post
-import java.lang.IllegalStateException
 import java.util.concurrent.ExecutorService
 import kotlin.random.Random
 

JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt

@@ -47,14 +47,11 @@ import com.example.jetnews.data.posts.PostsRepository
 import com.example.jetnews.ui.article.ArticleScreen
 import com.example.jetnews.ui.home.HomeScreen
 import com.example.jetnews.ui.interests.InterestsScreen
+import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
 fun JetnewsApp(appContainer: AppContainer) {
-
-    MaterialTheme(
-        colors = lightThemeColors,
-        typography = themeTypography
-    ) {
+    JetnewsTheme {
         AppContent(
             interestsRepository = appContainer.interestsRepository,
             postsRepository = appContainer.postsRepository
@@ -192,7 +189,7 @@ fun PreviewJetnewsApp() {
 @Preview("Drawer contents dark theme")
 @Composable
 fun PreviewJetnewsAppDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         AppDrawer(
             currentScreen = JetnewsStatus.currentScreen,
             closeDrawer = { }

JetNews/app/src/main/java/com/example/jetnews/ui/PreviewUtils.kt

@@ -17,18 +17,15 @@
 package com.example.jetnews.ui
 
 import androidx.compose.Composable
-import androidx.ui.material.ColorPalette
-import androidx.ui.material.MaterialTheme
 import androidx.ui.material.Surface
-import androidx.ui.material.Typography
+import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
 internal fun ThemedPreview(
-    colors: ColorPalette = lightThemeColors,
-    typography: Typography = themeTypography,
+    darkTheme: Boolean = false,
     children: @Composable() () -> Unit
 ) {
-    MaterialTheme(colors = colors, typography = typography) {
+    JetnewsTheme(darkTheme = darkTheme) {
         Surface {
             children()
         }

JetNews/app/src/main/java/com/example/jetnews/ui/Themes.kt

@@ -55,7 +55,6 @@ import com.example.jetnews.data.successOr
 import com.example.jetnews.model.Post
 import com.example.jetnews.ui.Screen
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
 import com.example.jetnews.ui.effect.fetchPost
 import com.example.jetnews.ui.home.BookmarkButton
 import com.example.jetnews.ui.home.isFavorite
@@ -173,7 +172,7 @@ fun PreviewArticle() {
 @Preview("Article screen dark theme")
 @Composable
 fun PreviewArticleDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         val post = loadFakePost(post3.id)
         ArticleScreen(post)
     }

JetNews/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt

@@ -69,7 +69,6 @@ import com.example.jetnews.model.Paragraph
 import com.example.jetnews.model.ParagraphType
 import com.example.jetnews.model.Post
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
 
 private val defaultSpacerSize = 16.dp
 
@@ -208,21 +207,21 @@ private fun BulletParagraph(
             // this box is acting as a character, so it's sized with font scaling (sp)
             Box(
                 modifier = Modifier
-                        .preferredSize(8.sp.toDp(), 8.sp.toDp())
-                        .alignWithSiblings {
-                            // Add an alignment "baseline" 1sp below the bottom of the circle
-                            9.sp.toIntPx()
-                        },
+                    .preferredSize(8.sp.toDp(), 8.sp.toDp())
+                    .alignWithSiblings {
+                        // Add an alignment "baseline" 1sp below the bottom of the circle
+                        9.sp.toIntPx()
+                    },
                 backgroundColor = contentColor(),
                 shape = CircleShape
             )
         }
         Text(
-                modifier = Modifier
-                        .weight(1f)
-                        .alignWithSiblings(FirstBaseline),
-                text = text,
-                style = textStyle.merge(paragraphStyle)
+            modifier = Modifier
+                .weight(1f)
+                .alignWithSiblings(FirstBaseline),
+            text = text,
+            style = textStyle.merge(paragraphStyle)
         )
     }
 }
@@ -334,7 +333,7 @@ fun PreviewPost() {
 @Preview("Post content dark theme")
 @Composable
 fun PreviewPostDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         PostContent(post = post3)
     }
 }

JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt

@@ -64,7 +64,6 @@ import com.example.jetnews.ui.AppDrawer
 import com.example.jetnews.ui.Screen
 import com.example.jetnews.ui.SwipeToRefreshLayout
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
 import com.example.jetnews.ui.navigateTo
 import com.example.jetnews.ui.state.RefreshableUiState
 import com.example.jetnews.ui.state.currentData
@@ -306,7 +305,7 @@ private fun PreviewDrawerOpen() {
 @Preview("Home screen dark theme")
 @Composable
 fun PreviewHomeScreenBodyDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         val posts = loadFakePosts()
         HomeScreenBody(posts)
     }
@@ -315,7 +314,7 @@ fun PreviewHomeScreenBodyDark() {
 @Preview("Home screen, open drawer dark theme")
 @Composable
 private fun PreviewDrawerOpenDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         HomeScreen(
             postsRepository = BlockingFakePostsRepository(ContextAmbient.current),
             scaffoldState = ScaffoldState(drawerState = DrawerState.Opened)

JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt

@@ -30,7 +30,6 @@ import androidx.ui.layout.fillMaxWidth
 import androidx.ui.layout.padding
 import androidx.ui.layout.preferredHeight
 import androidx.ui.layout.preferredHeightIn
-import androidx.ui.material.ColorPalette
 import androidx.ui.material.EmphasisAmbient
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.ProvideEmphasis
@@ -41,12 +40,10 @@ import com.example.jetnews.data.posts.impl.post2
 import com.example.jetnews.data.posts.impl.posts
 import com.example.jetnews.model.Post
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
-import com.example.jetnews.ui.lightThemeColors
 
 @Composable
 fun PostCardTop(post: Post) {
-// TUTORIAL CONTENT STARTS HERE
+    // TUTORIAL CONTENT STARTS HERE
     val typography = MaterialTheme.typography
     Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
         post.image?.let { image ->
@@ -90,7 +87,7 @@ fun TutorialPreview() {
 @Preview("Dark theme")
 @Composable
 fun TutorialPreviewDark() {
-    TutorialPreviewTemplate(colors = darkThemeColors)
+    TutorialPreviewTemplate(darkTheme = true)
 }
 
 @Preview("Font scaling 1.5", fontScale = 1.5f)
@@ -101,13 +98,13 @@ fun TutorialPreviewFontscale() {
 
 @Composable
 fun TutorialPreviewTemplate(
-    colors: ColorPalette = lightThemeColors
+    darkTheme: Boolean = false
 ) {
     val context = ContextAmbient.current
     val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
     val post = previewPosts[0]
 
-    ThemedPreview(colors) {
+    ThemedPreview(darkTheme) {
         PostCardTop(post)
     }
 }
@@ -123,7 +120,7 @@ fun PreviewPostCardTop() {
 @Preview("Post card top dark theme")
 @Composable
 fun PreviewPostCardTopDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         PostCardTop(post = post2)
     }
 }

JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardTop.kt

@@ -42,7 +42,6 @@ import com.example.jetnews.model.Post
 import com.example.jetnews.model.PostAuthor
 import com.example.jetnews.ui.Screen
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
 import com.example.jetnews.ui.navigateTo
 
 @Composable
@@ -95,7 +94,7 @@ fun PreviewPostCardPopular() {
 @Preview("Dark colors")
 @Composable
 fun PreviewPostCardPopularDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         PostCardPopular(post = post1)
     }
 }

JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardYourNetwork.kt

@@ -43,7 +43,6 @@ import com.example.jetnews.model.Post
 import com.example.jetnews.ui.JetnewsStatus
 import com.example.jetnews.ui.Screen
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
 import com.example.jetnews.ui.navigateTo
 
 @Composable
@@ -157,7 +156,7 @@ fun PreviewHistoryPost() {
 @Preview("Simple post card dark theme")
 @Composable
 fun PreviewSimplePostDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         PostCardSimple(post = post3)
     }
 }

JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt

@@ -54,7 +54,6 @@ import com.example.jetnews.ui.AppDrawer
 import com.example.jetnews.ui.JetnewsStatus
 import com.example.jetnews.ui.Screen
 import com.example.jetnews.ui.ThemedPreview
-import com.example.jetnews.ui.darkThemeColors
 import com.example.jetnews.ui.state.UiState
 import com.example.jetnews.ui.state.previewDataFrom
 import com.example.jetnews.ui.state.uiStateFrom
@@ -270,7 +269,7 @@ fun PreviewInterestsScreen() {
 @Preview("Interests screen dark theme")
 @Composable
 fun PreviewInterestsScreenDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         InterestsScreen(
             scaffoldState = ScaffoldState(drawerState = DrawerState.Opened),
             interestsRepository = FakeInterestsRepository()
@@ -292,7 +291,7 @@ private fun PreviewDrawerOpen() {
 @Preview("Interests screen drawer open dark theme")
 @Composable
 private fun PreviewDrawerOpenDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         InterestsScreen(
             scaffoldState = ScaffoldState(drawerState = DrawerState.Opened),
             interestsRepository = FakeInterestsRepository()
@@ -311,7 +310,7 @@ fun PreviewTopicsTab() {
 @Preview("Interests screen topics tab dark theme")
 @Composable
 fun PreviewTopicsTabDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         TopicsTab(loadFakeTopics())
     }
 }
@@ -332,7 +331,7 @@ fun PreviewPeopleTab() {
 @Preview("Interests screen people tab dark theme")
 @Composable
 fun PreviewPeopleTabDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         PeopleTab(loadFakePeople())
     }
 }
@@ -353,7 +352,7 @@ fun PreviewPublicationsTab() {
 @Preview("Interests screen publications tab dark theme")
 @Composable
 fun PreviewPublicationsTabDark() {
-    ThemedPreview(darkThemeColors) {
+    ThemedPreview(darkTheme = true) {
         PublicationsTab(loadFakePublications())
     }
 }
@@ -374,7 +373,7 @@ fun PreviewTabWithTopics() {
 @Preview("Interests screen tab with topics dark theme")
 @Composable
 fun PreviewTabWithTopicsDark() {
-    ThemedPreview {
+    ThemedPreview(darkTheme = true) {
         TabWithTopics(tabName = "preview", topics = listOf("Hello", "Compose"))
     }
 }