refactor(ui): migrate to tone-based surfaces in MD3

Ashinch · Feb 14, 2024 · 6c7caf3 · 6c7caf3
1 parent 4c7bea9
commit 6c7caf3
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 13 deletions.
diff --git a/app/src/main/java/me/ash/reader/ui/component/FilterBar.kt b/app/src/main/java/me/ash/reader/ui/component/FilterBar.kt
@@ -13,6 +13,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import me.ash.reader.domain.model.general.Filter
 import me.ash.reader.infrastructure.preference.FlowFilterBarStylePreference
 import me.ash.reader.infrastructure.preference.LocalThemeIndex
@@ -37,10 +38,9 @@ fun FilterBar(
     } onDark MaterialTheme.colorScheme.secondaryContainer
 
     NavigationBar(
-        modifier = Modifier
-            .background(MaterialTheme.colorScheme.surfaceColorAtElevation(filterBarTonalElevation))
-            .navigationBarsPadding(),
-        tonalElevation = filterBarTonalElevation,
+        modifier = Modifier,
+        containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(filterBarTonalElevation),
+        tonalElevation = 0.dp
     ) {
         Spacer(modifier = Modifier.width(filterBarPadding))
         Filter.values.forEach { item ->

diff --git a/app/src/main/java/me/ash/reader/ui/component/base/BlockButton.kt b/app/src/main/java/me/ash/reader/ui/component/base/BlockButton.kt
@@ -24,7 +24,7 @@ fun BlockButton(
     modifier: Modifier = Modifier,
     text: String = "",
     selected: Boolean = false,
-    containerColor: Color = MaterialTheme.colorScheme.surface.copy(0.7f) onDark MaterialTheme.colorScheme.inverseOnSurface,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceContainer onDark MaterialTheme.colorScheme.inverseOnSurface,
     selectedContainerColor: Color = MaterialTheme.colorScheme.primaryContainer alwaysLight true,
     contentColor: Color = MaterialTheme.colorScheme.inverseSurface,
     selectedContentColor: Color = MaterialTheme.colorScheme.onSurface alwaysLight true,

diff --git a/app/src/main/java/me/ash/reader/ui/component/base/RYScaffold.kt b/app/src/main/java/me/ash/reader/ui/component/base/RYScaffold.kt
@@ -45,7 +45,9 @@ fun RYScaffold(
                     navigationIcon = { navigationIcon?.invoke() },
                     actions = { actions?.invoke(this) },
                     colors = TopAppBarDefaults.smallTopAppBarColors(
-                        containerColor = Color.Transparent,
+                        containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
+                            topBarTonalElevation
+                        ),
                     )
                 )
             }

diff --git a/app/src/main/java/me/ash/reader/ui/ext/ColorScheme.kt b/app/src/main/java/me/ash/reader/ui/ext/ColorScheme.kt
@@ -7,13 +7,36 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import me.ash.reader.domain.model.constant.ElevationTokens
 import kotlin.math.ln
+import kotlin.math.roundToInt
 
 @Composable
+@Deprecated(
+    message = "Migrate to tone-based surfaces", level = DeprecationLevel.WARNING,
+    replaceWith = ReplaceWith(
+        "surfaceColorAtElevation(elevation: Dp)",
+        "androidx.compose.runtime.remember"
+    )
+)
 fun ColorScheme.surfaceColorAtElevation(
     elevation: Dp,
     color: Color = surface,
-): Color = remember(this, elevation, color) { color.atElevation(surfaceTint, elevation) }
+): Color = surfaceColorAtElevation(elevation = elevation)
+
+@Composable
+fun ColorScheme.surfaceColorAtElevation(
+    elevation: Dp,
+): Color = remember(this, elevation) {
+    when (elevation.value.roundToInt()) {
+        ElevationTokens.Level0 -> surface
+        ElevationTokens.Level1 -> surfaceContainerLow
+        ElevationTokens.Level2 -> surfaceContainer
+        ElevationTokens.Level3 -> surfaceContainerHigh
+        ElevationTokens.Level4, ElevationTokens.Level5 -> surfaceContainerHighest
+        else -> surface
+    }
+}
 
 fun Color.atElevation(
     sourceColor: Color,

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/reading/TopBar.kt b/app/src/main/java/me/ash/reader/ui/page/home/reading/TopBar.kt
@@ -25,6 +25,7 @@ import me.ash.reader.infrastructure.preference.LocalReadingPageTonalElevation
 import me.ash.reader.ui.component.base.FeedbackIconButton
 import me.ash.reader.ui.component.base.RYExtensibleVisibility
 import me.ash.reader.ui.ext.share
+import me.ash.reader.ui.ext.surfaceColorAtElevation
 import me.ash.reader.ui.page.common.RouteName
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -83,7 +84,7 @@ fun TopBar(
                         )
                     }
                 }, colors = TopAppBarDefaults.smallTopAppBarColors(
-                    containerColor = MaterialTheme.colorScheme.surface,
+                    containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(tonalElevation.value.dp),
                 )
             )
         }

diff --git a/app/src/main/java/me/ash/reader/ui/page/settings/color/ColorAndStylePage.kt b/app/src/main/java/me/ash/reader/ui/page/settings/color/ColorAndStylePage.kt
@@ -251,7 +251,7 @@ fun Palettes(
                 .clip(RoundedCornerShape(16.dp))
                 .background(
                     MaterialTheme.colorScheme.inverseOnSurface
-                            onLight MaterialTheme.colorScheme.surface.copy(0.7f),
+                            onLight MaterialTheme.colorScheme.surfaceContainer,
                 )
                 .clickable {},
             horizontalArrangement = Arrangement.Center,
@@ -330,7 +330,7 @@ fun SelectableMiniPalette(
                 .copy(0.5f) onDark MaterialTheme.colorScheme.onPrimaryContainer.copy(0.3f)
         } else {
             MaterialTheme.colorScheme
-                .inverseOnSurface onLight MaterialTheme.colorScheme.surface.copy(0.7f)
+                .inverseOnSurface onLight MaterialTheme.colorScheme.surfaceContainer
         },
     ) {
         Surface(

diff --git a/app/src/main/java/me/ash/reader/ui/page/settings/color/feeds/FeedsPagePreview.kt b/app/src/main/java/me/ash/reader/ui/page/settings/color/feeds/FeedsPagePreview.kt
@@ -89,7 +89,9 @@ fun FeedsPagePreview(
                     tint = MaterialTheme.colorScheme.onSurface,
                 )
             }, colors = TopAppBarDefaults.smallTopAppBarColors(
-                containerColor = Color.Transparent,
+                containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
+                    topBarTonalElevation.value.dp
+                ),
             )
         )
         Spacer(modifier = Modifier.height(12.dp))

diff --git a/app/src/main/java/me/ash/reader/ui/page/settings/color/flow/FlowPagePreview.kt b/app/src/main/java/me/ash/reader/ui/page/settings/color/flow/FlowPagePreview.kt
@@ -77,7 +77,7 @@ fun FlowPagePreview(
                     tint = MaterialTheme.colorScheme.onSurface,
                 ) {}
             }, colors = TopAppBarDefaults.smallTopAppBarColors(
-                containerColor = Color.Transparent,
+                containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(topBarTonalElevation.value.dp),
             )
         )
         Spacer(modifier = Modifier.height(12.dp))

diff --git a/app/src/main/java/me/ash/reader/ui/theme/palette/DynamicTonalPalette.kt b/app/src/main/java/me/ash/reader/ui/theme/palette/DynamicTonalPalette.kt
@@ -30,14 +30,22 @@ fun dynamicLightColorScheme(): ColorScheme {
         onTertiaryContainer = palettes tertiary 10,
         background = palettes neutral 99,
         onBackground = palettes neutral 10,
-        surface = palettes neutral 99,
+        surface = palettes neutral 98,
         onSurface = palettes neutral 10,
         surfaceVariant = palettes neutralVariant 90,
         onSurfaceVariant = palettes neutralVariant 30,
         surfaceTint = palettes primary 40,
         inverseSurface = palettes neutral 20,
         inverseOnSurface = palettes neutral 95,
         outline = palettes neutralVariant 50,
+        outlineVariant = palettes neutralVariant 80,
+        surfaceBright = palettes neutral 98,
+        surfaceDim = palettes neutral 87,
+        surfaceContainerLowest = palettes neutral 100,
+        surfaceContainerLow = palettes neutral 96,
+        surfaceContainer = palettes neutral 94,
+        surfaceContainerHigh = palettes neutral 92,
+        surfaceContainerHighest = palettes neutral 90,
     )
 }
 
@@ -70,6 +78,14 @@ fun dynamicDarkColorScheme(): ColorScheme {
         inverseSurface = palettes neutral 90,
         inverseOnSurface = palettes neutral 20,
         outline = palettes neutralVariant 60,
+        outlineVariant = palettes neutralVariant 30,
+        surfaceBright = palettes neutral 24,
+        surfaceDim = palettes neutral 6,
+        surfaceContainerLowest = palettes neutral 4,
+        surfaceContainerLow = palettes neutral 10,
+        surfaceContainer = palettes neutral 12,
+        surfaceContainerHigh = palettes neutral 17,
+        surfaceContainerHighest = palettes neutral 22,
     )
 }