Use material3 for Compose views (readium#460)

stevenzeck · web-flow · commit 33a0c77acd6b · 2024-02-13T16:51:02.000+01:00
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -71,7 +71,6 @@ timber = "5.0.1"
 
 
 [libraries]
-accompanist-themeadapter-material = { group = "com.google.accompanist", name = "accompanist-themeadapter-material", version.ref = "accompanist" }
 
 androidx-activity-ktx = { group = "androidx.activity", name = "activity-ktx", version.ref = "androidx-activity" }
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidx-appcompat" }
diff --git a/test-app/build.gradle.kts b/test-app/build.gradle.kts
@@ -81,8 +81,6 @@ dependencies {
     // Only required if you want to support PDF files using PDFium.
     implementation(project(":readium:adapters:pdfium"))
 
-    implementation(libs.accompanist.themeadapter.material)
-
     implementation(libs.androidx.activity.ktx)
     implementation(libs.androidx.appcompat)
     implementation(libs.androidx.browser)
diff --git a/test-app/src/main/java/org/readium/r2/testapp/reader/preferences/UserPreferences.kt b/test-app/src/main/java/org/readium/r2/testapp/reader/preferences/UserPreferences.kt
@@ -9,7 +9,7 @@
 package org.readium.r2.testapp.reader.preferences
 
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -63,7 +63,8 @@ private fun <P : Configurable.Preferences<P>, E : PreferencesEditor<P>> UserPref
         Text(
             text = title,
             textAlign = TextAlign.Center,
-            style = MaterialTheme.typography.h6,
+            style = MaterialTheme.typography.headlineSmall,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier = Modifier
                 .fillMaxWidth()
         )
@@ -611,15 +612,14 @@ private fun PresetsMenuButton(
 
         for (preset in presets) {
             DropdownMenuItem(
+                text = { Text(preset.title) },
                 onClick = {
                     dismiss()
                     clear()
                     preset.apply()
                     commit()
                 }
-            ) {
-                Text(preset.title)
-            }
+            )
         }
     }
 }
diff --git a/test-app/src/main/java/org/readium/r2/testapp/reader/tts/TtsControls.kt b/test-app/src/main/java/org/readium/r2/testapp/reader/tts/TtsControls.kt
@@ -10,11 +10,11 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Card
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
diff --git a/test-app/src/main/java/org/readium/r2/testapp/shared/views/Group.kt b/test-app/src/main/java/org/readium/r2/testapp/shared/views/Group.kt
@@ -6,21 +6,21 @@
 
 package org.readium.r2.testapp.shared.views
 
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LocalContentAlpha
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
+import org.readium.r2.testapp.utils.compose.Emphasis
+import org.readium.r2.testapp.utils.compose.EmphasisProvider
+import org.readium.r2.testapp.utils.compose.LocalContentEmphasis
 
 /**
  * Sets the emphasis (alpha) of a group of [Composable] views.
  */
 @Composable
 fun Group(lowEmphasis: Boolean = false, enabled: Boolean = true, content: @Composable () -> Unit) {
-    val alpha = when {
-        !enabled -> ContentAlpha.disabled
-        lowEmphasis -> ContentAlpha.medium
-        else -> ContentAlpha.high
+    val emphasis = when {
+        !enabled -> Emphasis.Disabled
+        else -> Emphasis.Medium
+    }
+    EmphasisProvider(LocalContentEmphasis provides emphasis) {
+        content()
     }
-
-    CompositionLocalProvider(LocalContentAlpha provides alpha, content = content)
 }
diff --git a/test-app/src/main/java/org/readium/r2/testapp/shared/views/Preferences.kt b/test-app/src/main/java/org/readium/r2/testapp/shared/views/Preferences.kt
@@ -13,12 +13,12 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Backspace
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.filled.Backspace
 import androidx.compose.material.icons.filled.Palette
 import androidx.compose.material.icons.filled.Remove
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -90,7 +90,7 @@ private fun <T> ButtonGroupItem(
         ) { option ->
             Text(
                 text = formatValue(option),
-                style = MaterialTheme.typography.caption
+                style = MaterialTheme.typography.labelMedium
             )
         }
     }
@@ -139,19 +139,18 @@ private fun <T> MenuItem(
             text = {
                 Text(
                     text = formatValue(value),
-                    style = MaterialTheme.typography.caption
+                    style = MaterialTheme.typography.labelMedium
                 )
             }
         ) { dismiss ->
             for (aValue in values) {
                 DropdownMenuItem(
+                    text = { Text(formatValue(aValue)) },
                     onClick = {
                         dismiss()
                         onValueChanged(aValue)
                     }
-                ) {
-                    Text(formatValue(aValue))
-                }
+                )
             }
         }
     }
@@ -308,7 +307,7 @@ private fun ColorItem(
 
         OutlinedButton(
             onClick = { isPicking = true },
-            colors = ButtonDefaults.buttonColors(backgroundColor = color)
+            colors = ButtonDefaults.buttonColors(containerColor = color)
         ) {
             if (noValueSelected) {
                 Icon(
@@ -367,7 +366,6 @@ fun LanguageItem(
     )
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun Item(
     title: String,
@@ -383,19 +381,18 @@ private fun Item(
         } else {
             Modifier
         },
-        text = {
-            val alpha = if (isActive) 1.0f else ContentAlpha.disabled
-            CompositionLocalProvider(LocalContentAlpha provides alpha) {
+        headlineContent = {
+            Group(enabled = isActive) {
                 Text(title)
             }
         },
-        trailing = {
+        trailingContent = {
             Row {
                 content()
 
                 IconButton(onClick = onClear ?: {}, enabled = onClear != null) {
                     Icon(
-                        Icons.Default.Backspace,
+                        Icons.AutoMirrored.Filled.Backspace,
                         contentDescription = "Clear"
                     )
                 }
@@ -427,7 +424,6 @@ fun <T> SelectorListItem(
  * A Material [ListItem] displaying a dropdown menu to select a value. The current value is
  * displayed on the right.
  */
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun <T> SelectorListItem(
     title: String,
@@ -445,12 +441,12 @@ private fun <T> SelectorListItem(
             .clickable(enabled = enabled) {
                 isExpanded = true
             },
-        text = {
+        headlineContent = {
             Group(enabled = enabled) {
                 Text(title)
             }
         },
-        trailing = {
+        trailingContent = {
             Group(enabled = enabled) {
                 Text(formatValue(selection))
             }
@@ -461,13 +457,12 @@ private fun <T> SelectorListItem(
             ) {
                 for (value in values) {
                     DropdownMenuItem(
+                        text = { Text(formatValue(value)) },
                         onClick = {
                             onSelected(value)
                             dismiss()
                         }
-                    ) {
-                        Text(formatValue(value))
-                    }
+                    )
                 }
             }
         }
diff --git a/test-app/src/main/java/org/readium/r2/testapp/utils/compose/AppTheme.kt b/test-app/src/main/java/org/readium/r2/testapp/utils/compose/AppTheme.kt
@@ -6,16 +6,33 @@
 
 package org.readium.r2.testapp.utils.compose
 
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
-import com.google.accompanist.themeadapter.material.MdcTheme
+import androidx.compose.ui.platform.LocalContext
 
 /**
  * Setup the Compose app-wide theme.
  */
 @Composable
-fun AppTheme(content: @Composable () -> Unit) {
-    MdcTheme(
-        setDefaultFontFamily = true,
+fun AppTheme(useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+    val colors = when {
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            when {
+                useDarkTheme -> dynamicDarkColorScheme(LocalContext.current)
+                else -> dynamicLightColorScheme(LocalContext.current)
+            }
+        }
+        useDarkTheme -> lightColorScheme()
+        else -> darkColorScheme()
+    }
+    MaterialTheme(
+        colorScheme = colors,
         content = content
     )
 }
diff --git a/test-app/src/main/java/org/readium/r2/testapp/utils/compose/ComposeBottomSheetDialogFragment.kt b/test-app/src/main/java/org/readium/r2/testapp/utils/compose/ComposeBottomSheetDialogFragment.kt
@@ -11,6 +11,7 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.ComposeView
 import androidx.core.widget.NestedScrollView
@@ -32,7 +33,9 @@ abstract class ComposeBottomSheetDialogFragment(
         val composeView = ComposeView(context).apply {
             setContent {
                 AppTheme {
-                    this@ComposeBottomSheetDialogFragment.Content()
+                    Surface {
+                        this@ComposeBottomSheetDialogFragment.Content()
+                    }
                 }
             }
         }
diff --git a/test-app/src/main/java/org/readium/r2/testapp/utils/compose/DropdownMenuButton.kt b/test-app/src/main/java/org/readium/r2/testapp/utils/compose/DropdownMenuButton.kt
@@ -8,8 +8,8 @@ package org.readium.r2.testapp.utils.compose
 
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.material.DropdownMenu
-import androidx.compose.material.OutlinedButton
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.OutlinedButton
 import androidx.compose.runtime.*
 
 @Composable
diff --git a/test-app/src/main/java/org/readium/r2/testapp/utils/compose/EmphasisProvider.kt b/test-app/src/main/java/org/readium/r2/testapp/utils/compose/EmphasisProvider.kt
@@ -0,0 +1,41 @@
+package org.readium.r2.testapp.utils.compose
+
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.ProvidedValue
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+
+val LocalContentEmphasis = compositionLocalOf { Emphasis.Medium }
+
+enum class Emphasis {
+    Disabled,
+    Medium,
+    High
+}
+
+@Composable
+fun EmphasisProvider(emphasis: ProvidedValue<Emphasis>, content: @Composable () -> Unit) {
+    val contentColor = when (emphasis.value) {
+        Emphasis.Disabled -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
+        Emphasis.Medium -> MaterialTheme.colorScheme.onSurfaceVariant
+        Emphasis.High -> MaterialTheme.colorScheme.onSurface
+    }
+    val fontWeight = when (emphasis.value) {
+        Emphasis.High -> FontWeight.Bold
+        else -> FontWeight.Normal
+    }
+
+    CompositionLocalProvider(
+        LocalContentColor provides contentColor,
+        content = {
+            ProvideTextStyle(value = TextStyle(fontWeight = fontWeight)) {
+                content()
+            }
+        }
+    )
+}
diff --git a/test-app/src/main/java/org/readium/r2/testapp/utils/compose/ToggleButton.kt b/test-app/src/main/java/org/readium/r2/testapp/utils/compose/ToggleButton.kt
@@ -8,10 +8,10 @@ package org.readium.r2.testapp.utils.compose
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.Text
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.tooling.preview.Preview
@@ -55,22 +55,22 @@ fun ToggleButton(
         enabled = enabled,
         content = content,
         colors = ButtonDefaults.outlinedButtonColors(
-            contentColor = MaterialTheme.colors.onBackground,
-            backgroundColor = when {
+            contentColor = MaterialTheme.colorScheme.onBackground,
+            containerColor = when {
                 selected ->
-                    MaterialTheme.colors.onBackground
+                    MaterialTheme.colorScheme.onBackground
                         .copy(alpha = 0.15f)
-                        .compositeOver(MaterialTheme.colors.background)
+                        .compositeOver(MaterialTheme.colorScheme.background)
                 active ->
-                    MaterialTheme.colors.onBackground
+                    MaterialTheme.colorScheme.onBackground
                         .copy(alpha = 0.05f)
-                        .compositeOver(MaterialTheme.colors.background)
-                else -> MaterialTheme.colors.surface
+                        .compositeOver(MaterialTheme.colorScheme.background)
+                else -> MaterialTheme.colorScheme.surface
             }
         ),
         elevation =
         if (selected) {
-            ButtonDefaults.elevation(defaultElevation = 2.dp)
+            ButtonDefaults.buttonElevation(defaultElevation = 2.dp)
         } else {
             null
         }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ import android.view.LayoutInflater`
`11`	`11`	`import android.view.View`
`12`	`12`	`import android.view.ViewGroup`
`13`	`13`	`import android.widget.FrameLayout`
	`14`	`+import androidx.compose.material3.Surface`
`14`	`15`	`import androidx.compose.runtime.Composable`
`15`	`16`	`import androidx.compose.ui.platform.ComposeView`
`16`	`17`	`import androidx.core.widget.NestedScrollView`
`@@ -32,7 +33,9 @@ abstract class ComposeBottomSheetDialogFragment(`
`32`	`33`	`val composeView = ComposeView(context).apply {`
`33`	`34`	`setContent {`
`34`	`35`	`AppTheme {`
`35`		`- this@ComposeBottomSheetDialogFragment.Content()`
	`36`	`+ Surface {`
	`37`	`+ this@ComposeBottomSheetDialogFragment.Content()`
	`38`	`+ }`
`36`	`39`	`}`
`37`	`40`	`}`
`38`	`41`	`}`