refactor(ui): migrate tonal elevations of Material3 Cards

flixclusiveorg · Sep 26, 2024 · c5a351e · c5a351e
1 parent 13f3ad0
commit c5a351e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/...rc/main/kotlin/com/flixclusive/core/ui/mobile/component/provider/InstalledProviderCard.kt b/...rc/main/kotlin/com/flixclusive/core/ui/mobile/component/provider/InstalledProviderCard.kt
@@ -13,6 +13,7 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.contentColorFor
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -43,11 +44,11 @@ fun InstalledProviderCard(
         displacementOffset != null
     }
 
-    val cardColor = MaterialTheme.colorScheme.surface
     val elevation = when {
         isBeingDragged && enabled && isDraggable -> 20.dp
         else -> 3.dp
     }
+    val cardColor = MaterialTheme.colorScheme.surfaceColorAtElevation(elevation)
 
     Box(
         modifier = Modifier
@@ -59,11 +60,9 @@ fun InstalledProviderCard(
             onClick = onClick,
             interactionSource = interactionSource,
             shape = MaterialTheme.shapes.medium,
-            elevation = CardDefaults.cardElevation(
-                defaultElevation = elevation
-            ),
+            elevation = CardDefaults.cardElevation(defaultElevation = 20.dp),
             colors = CardDefaults.cardColors(
-                containerColor = cardColor,
+                containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(elevation),
                 contentColor = contentColorFor(
                     backgroundColor = cardColor.copy(
                         if (!enabled) 0.4F else 1F

diff --git a/.../mobile/src/main/kotlin/com/flixclusive/core/ui/mobile/component/provider/ProviderCard.kt b/.../mobile/src/main/kotlin/com/flixclusive/core/ui/mobile/component/provider/ProviderCard.kt
@@ -7,13 +7,15 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -56,6 +58,9 @@ fun ProviderCard(
 
     Card(
         shape = MaterialTheme.shapes.medium,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)
+        ),
         modifier = modifier
             .fillMaxWidth()
     ) {

diff --git a/...er-list/src/main/kotlin/com/flixclusive/feature/mobile/provider/component/CustomButton.kt b/...er-list/src/main/kotlin/com/flixclusive/feature/mobile/provider/component/CustomButton.kt
@@ -9,6 +9,7 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
@@ -25,10 +26,10 @@ internal fun CustomButton(
     Button(
         onClick = onClick,
         colors = ButtonDefaults.buttonColors(
-            containerColor = MaterialTheme.colorScheme.surface,
+            containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp),
             contentColor = MaterialTheme.colorScheme.onSurface.onMediumEmphasis(0.8F)
         ),
-        elevation = ButtonDefaults.buttonElevation(defaultElevation = 1.dp),
+        elevation = ButtonDefaults.buttonElevation(defaultElevation = 20.dp),
         contentPadding = PaddingValues(vertical = 15.dp),
         shape = MaterialTheme.shapes.small,
         modifier = modifier,

diff --git a/...ain/kotlin/com/flixclusive/feature/mobile/repository/search/component/AddRepositoryBar.kt b/...ain/kotlin/com/flixclusive/feature/mobile/repository/search/component/AddRepositoryBar.kt
@@ -18,6 +18,7 @@ import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -44,8 +45,8 @@ import com.flixclusive.core.theme.FlixclusiveTheme
 import com.flixclusive.core.ui.common.util.createTextFieldValue
 import com.flixclusive.core.ui.common.util.onMediumEmphasis
 import com.flixclusive.feature.mobile.repository.search.util.parseGithubUrl
-import com.flixclusive.core.ui.common.R as UiCommonR
 import com.flixclusive.core.locale.R as LocaleR
+import com.flixclusive.core.ui.common.R as UiCommonR
 
 @Composable
 internal fun AddRepositoryBar(
@@ -59,6 +60,9 @@ internal fun AddRepositoryBar(
     val keyboardController = LocalSoftwareKeyboardController.current
     val clipboardManager = LocalClipboardManager.current
 
+    val containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)
+    val focusedContainerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(5.dp)
+
     var textFieldValue by remember {
         val text = clipboardManager.getText()
             ?.text?.let(::parseGithubUrl)
@@ -103,6 +107,9 @@ internal fun AddRepositoryBar(
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Go),
             shape = MaterialTheme.shapes.extraSmall,
             colors = TextFieldDefaults.colors(
+                focusedContainerColor = focusedContainerColor,
+                unfocusedContainerColor = containerColor,
+                errorContainerColor = containerColor,
                 disabledTextColor = Color.Transparent,
                 focusedIndicatorColor = Color.Transparent,
                 unfocusedIndicatorColor = Color.Transparent,

diff --git a/.../main/kotlin/com/flixclusive/feature/mobile/repository/search/component/RepositoryCard.kt b/.../main/kotlin/com/flixclusive/feature/mobile/repository/search/component/RepositoryCard.kt
@@ -10,10 +10,12 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -28,9 +30,9 @@ import androidx.compose.ui.unit.sp
 import com.flixclusive.core.theme.FlixclusiveTheme
 import com.flixclusive.core.ui.mobile.component.ImageWithSmallPlaceholder
 import com.flixclusive.model.provider.Repository
+import com.flixclusive.core.locale.R as LocaleR
 import com.flixclusive.core.ui.common.R as UiCommonR
 import com.flixclusive.core.ui.mobile.R as UiMobileR
-import com.flixclusive.core.locale.R as LocaleR
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
@@ -48,9 +50,14 @@ internal fun RepositoryCard(
             else -> null
         }
     }
+
     Card(
         shape = MaterialTheme.shapes.medium,
         border = border,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(6.dp)
+        ),
+        elevation = CardDefaults.cardElevation(20.dp),
         modifier = modifier
             .fillMaxWidth()
             .combinedClickable(