Use material3 for Compose views (readium#460)

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" }

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)

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)
- }
+ )
  }
  }
 }

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

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

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))
- }
+ )
  }
  }
  }

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

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()
+ }
  }
  }
  }

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

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()
+ }
+ }
+ )
+}

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
  }