Merge pull request #230 from imashnake0/rid-pastelize

Replace Pastelize with MaterialKolor APIs
imashnake0 · Dec 28, 2024 · 0e4df88 · 0e4df88
2 parents 8f958e2 + 6cde02a
commit 0e4df88
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 120 deletions.
diff --git a/app/src/main/kotlin/com/imashnake/animite/dev/ext/ColorExt.kt b/app/src/main/kotlin/com/imashnake/animite/dev/ext/ColorExt.kt
diff --git a/app/src/main/kotlin/com/imashnake/animite/dev/ext/ColorSchemeExt.kt b/app/src/main/kotlin/com/imashnake/animite/dev/ext/ColorSchemeExt.kt
@@ -1,7 +1,9 @@
 package com.imashnake.animite.dev.ext
 
 import androidx.compose.material3.ColorScheme
+import com.materialkolor.ktx.blend
 
-fun ColorScheme.pastelize(backgroundToPrimary: Float) = with(this) {
-    copy(background = background.blendWith(primary, backgroundToPrimary))
+fun ColorScheme.modify(useDarkTheme: Boolean) = when {
+    useDarkTheme -> copy(surfaceContainerHighest = surfaceContainerHighest.blend(background, 0.5f))
+    else -> copy(background = background.blend(primary, 0.05f))
 }
diff --git a/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt b/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt
@@ -73,6 +73,7 @@ import com.imashnake.animite.navigation.SharedContentKey.Component.Image
 import com.imashnake.animite.navigation.SharedContentKey.Component.Page
 import com.imashnake.animite.navigation.SharedContentKey.Component.Text
 import com.imashnake.animite.features.media.MediaPage
+import com.materialkolor.ktx.hasEnoughContrast
 import com.imashnake.animite.core.R as coreR
 import com.imashnake.animite.navigation.R as navigationR
 
@@ -126,7 +127,7 @@ fun HomeScreen(
                                             listOf(
                                                 Color.Transparent,
                                                 MaterialTheme.colorScheme.secondaryContainer
-                                                    .copy(alpha = 0.5f)
+                                                    .copy(alpha = 0.2f)
                                             )
                                         )
                                     )
@@ -141,7 +142,10 @@ fun HomeScreen(
                                 ) {
                                     Text(
                                         text = stringResource(R.string.okaeri),
-                                        color = MaterialTheme.colorScheme.onSecondaryContainer,
+                                        color = MaterialTheme.colorScheme.onSecondaryContainer.takeIf {
+                                            // This color is what is behind "okaeri".
+                                            it.hasEnoughContrast(Color(0xFF252B33))
+                                        } ?: MaterialTheme.colorScheme.secondaryContainer,
                                         style = MaterialTheme.typography.displayMedium,
                                         modifier = Modifier
                                             .padding(

diff --git a/app/src/main/kotlin/com/imashnake/animite/features/media/MediaPage.kt b/app/src/main/kotlin/com/imashnake/animite/features/media/MediaPage.kt
@@ -108,7 +108,7 @@ fun MediaPage(
 
     val media = viewModel.uiState
 
-    MaterialTheme(colorScheme = rememberColorSchemeFor(color = media.color)) {
+    MaterialTheme(colorScheme = rememberColorSchemeFor(media.color)) {
         TranslucentStatusBarLayout(
             scrollState = scrollState,
             modifier = Modifier.background(MaterialTheme.colorScheme.background)

diff --git a/app/src/main/kotlin/com/imashnake/animite/features/media/MediaThemeUtil.kt b/app/src/main/kotlin/com/imashnake/animite/features/media/MediaThemeUtil.kt
@@ -5,8 +5,8 @@ import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
-import com.imashnake.animite.core.Constants.PASTELIZE_RATIO
-import com.imashnake.animite.dev.ext.pastelize
+import com.imashnake.animite.dev.ext.modify
+import com.materialkolor.PaletteStyle
 import com.materialkolor.rememberDynamicColorScheme
 
 /**
@@ -15,16 +15,18 @@ import com.materialkolor.rememberDynamicColorScheme
  *
  * @param color The color to create and remember a color scheme for.
  * @param fallbackColorScheme The color scheme to fall back to if [color] is null.
- * @param isDark Whether the new color scheme is to be used in dark mode.
+ * @param useDarkTheme Whether the new color scheme is to be used in dark mode.
  */
 @Composable
 fun rememberColorSchemeFor(
     color: Int?,
     fallbackColorScheme: ColorScheme = MaterialTheme.colorScheme,
-    isDark: Boolean = isSystemInDarkTheme()
-): ColorScheme {
-    return color?.let {
-        rememberDynamicColorScheme(Color(it), isDark = isDark, isAmoled = false)
-            .pastelize(PASTELIZE_RATIO)
-    } ?: fallbackColorScheme
-}
+    useDarkTheme: Boolean = isSystemInDarkTheme()
+) = color?.let {
+    rememberDynamicColorScheme(
+        seedColor = Color(it),
+        isDark = useDarkTheme,
+        isAmoled = false,
+        style = PaletteStyle.Vibrant,
+    ).modify(useDarkTheme)
+} ?: fallbackColorScheme
diff --git a/app/src/main/kotlin/com/imashnake/animite/features/theme/Color.kt b/app/src/main/kotlin/com/imashnake/animite/features/theme/Color.kt
diff --git a/app/src/main/kotlin/com/imashnake/animite/features/theme/Theme.kt b/app/src/main/kotlin/com/imashnake/animite/features/theme/Theme.kt
@@ -3,6 +3,7 @@ package com.imashnake.animite.features.theme
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.ripple.RippleAlpha
+import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LocalRippleConfiguration
 import androidx.compose.material3.MaterialTheme
@@ -11,47 +12,53 @@ import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import com.imashnake.animite.core.Constants.PASTELIZE_RATIO
 import com.imashnake.animite.core.ui.LocalPaddings
 import com.imashnake.animite.core.ui.Paddings
 import com.imashnake.animite.core.ui.rememberDefaultPaddings
-import com.imashnake.animite.dev.ext.pastelize
+import com.imashnake.animite.dev.ext.modify
+import com.materialkolor.PaletteStyle
+import com.materialkolor.rememberDynamicColorScheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AnimiteTheme(
     paddings: Paddings = rememberDefaultPaddings(),
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) {
     val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
-    val darkTheme = isSystemInDarkTheme()
+    val useDarkTheme = isSystemInDarkTheme()
     val animiteColorScheme = when {
-        dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
-        dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
-            .pastelize(PASTELIZE_RATIO)
-        darkTheme -> KimiNoDarkColorScheme
-        else -> KimiNoLightColorScheme
-            .pastelize(PASTELIZE_RATIO)
-    }
+        dynamicColor && useDarkTheme -> dynamicDarkColorScheme(LocalContext.current)
+        dynamicColor && !useDarkTheme -> dynamicLightColorScheme(LocalContext.current)
+        else -> rememberDynamicColorScheme(
+            seedColor = Color(0xFF2D7AB0),
+            secondary = Color(0xFF687797),
+            isDark = useDarkTheme,
+            isAmoled = false,
+            style = PaletteStyle.Vibrant,
+        )
+    }.modify(useDarkTheme)
+
     val animiteRippleTheme = RippleConfiguration(
         color = MaterialTheme.colorScheme.primary,
         rippleAlpha = RippleAlpha(
             draggedAlpha = 0.16f,
             focusedAlpha = 0.12f,
             hoveredAlpha = 0.08f,
-            pressedAlpha = 0.12f
+            pressedAlpha = 0.12f,
         )
     )
 
     MaterialTheme(
         colorScheme = animiteColorScheme,
-        typography = AnimiteTypography
+        typography = AnimiteTypography,
     ) {
         CompositionLocalProvider(
             LocalRippleConfiguration provides animiteRippleTheme,
             LocalPaddings provides paddings,
-            content = content
+            content = content,
         )
     }
 }
diff --git a/core/src/main/kotlin/com/imashnake/animite/core/Constants.kt b/core/src/main/kotlin/com/imashnake/animite/core/Constants.kt
@@ -4,6 +4,4 @@ object Constants {
     const val ANILIST_BASE_URL = "https://graphql.anilist.co/"
     const val CROSSFADE_DURATION = 500
     const val MEDIA_TYPE = "mediaType"
-
-    const val PASTELIZE_RATIO = 0.05f
 }
diff --git a/core/src/main/kotlin/com/imashnake/animite/core/ui/MediaSmall.kt b/core/src/main/kotlin/com/imashnake/animite/core/ui/MediaSmall.kt
@@ -16,7 +16,6 @@ import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -104,12 +103,9 @@ fun MediaSmall(
     label: String? = null,
 ) {
     Card(
-        modifier = modifier.width(cardWidth),
         onClick = onClick,
-        colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.3f)
-        ),
-        shape = RoundedCornerShape(dimensionResource(R.dimen.media_card_corner_radius))
+        shape = RoundedCornerShape(dimensionResource(R.dimen.media_card_corner_radius)),
+        modifier = modifier.width(cardWidth),
     ) {
         AsyncImage(
             model = crossfadeModel(image),