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 index fcb2859..1657b27 100644 --- 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 index 1df0f90..51ec47c 100644 --- 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 index 103a708..3997087 100644 --- 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 index a4c388d..994cd3b 100644 --- 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 = surfaceColorAtElevation(elevation = elevation) @Composable fun ColorScheme.surfaceColorAtElevation( elevation: Dp, - color: Color = surface, -): Color = remember(this, elevation, color) { color.atElevation(surfaceTint, elevation) } +): 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 index fbff008..8b10558 100644 --- 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 index 10e6a39..2243586 100644 --- 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 index 1ab90c1..6753354 100644 --- 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 index 4ae33e0..e76da1a 100644 --- 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 index 4cdc289..880c028 100644 --- 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,7 +30,7 @@ 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, @@ -38,6 +38,14 @@ fun dynamicLightColorScheme(): ColorScheme { 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, ) }