Improve preference group ui

lawnchair/src/app/lawnchair/ui/preferences/components/DividerColumn.kt

@@ -1,6 +1,5 @@
 package app.lawnchair.ui.preferences.components
 
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
@@ -11,12 +10,13 @@ import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import app.lawnchair.ui.theme.dividerColor
 import kotlin.math.roundToInt
 
 @Composable
 fun DividerColumn(
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.16f),
+    color: Color = dividerColor(),
     thickness: Dp = 1.dp,
     startIndent: Dp = 0.dp,
     endIndent: Dp = 0.dp,

lawnchair/src/app/lawnchair/ui/preferences/components/LazyColumnPreferenceGroup.kt

@@ -16,6 +16,7 @@
 
 package app.lawnchair.ui.preferences.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
@@ -27,10 +28,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import app.lawnchair.util.smartBorder
+import app.lawnchair.theme.surfaceColorAtElevation
+import app.lawnchair.ui.theme.dividerColor
 
 fun LazyListScope.preferenceGroupItems(
     count: Int,
@@ -49,7 +50,7 @@ fun LazyListScope.preferenceGroupItems(
         PreferenceGroupItem(cutTop = it > 0, cutBottom = it < count - 1) {
             if (showDividers && it > 0) {
                 Divider(
-                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.16f),
+                    color = dividerColor(),
                     modifier = Modifier.padding(
                         start = actualStartIndent,
                         end = actualEndIndent
@@ -98,14 +99,8 @@ fun PreferenceGroupItem(
     Column(
         modifier = Modifier
             .padding(start = 16.dp, end = 16.dp)
-            .smartBorder(
-                1.dp,
-                brush = SolidColor(MaterialTheme.colorScheme.onBackground.copy(alpha = 0.16f)),
-                shape,
-                cutTop,
-                cutBottom,
-            )
             .clip(shape)
+            .background(MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp))
     ) {
         content()
     }

lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceGroup.kt

@@ -17,6 +17,7 @@
 package app.lawnchair.ui.preferences.components
 
 import androidx.compose.animation.*
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
@@ -27,7 +28,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import app.lawnchair.util.smartBorder
+import app.lawnchair.theme.surfaceColorAtElevation
 import androidx.compose.material3.MaterialTheme as Material3Theme
 
 @Composable
@@ -47,12 +48,8 @@ fun PreferenceGroup(
         PreferenceGroupHeading(heading, isFirstChild)
         val columnModifier = Modifier
             .padding(horizontal = 16.dp)
-            .smartBorder(
-                1.dp,
-                color = Material3Theme.colorScheme.onBackground.copy(alpha = 0.16f),
-                shape = MaterialTheme.shapes.large
-            )
             .clip(shape = MaterialTheme.shapes.large)
+            .background(Material3Theme.colorScheme.surfaceColorAtElevation(1.dp))
         if (showDividers) {
             DividerColumn(
                 modifier = columnModifier,

lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceTemplate.kt

@@ -28,6 +28,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import app.lawnchair.ui.theme.dividerColor
 import app.lawnchair.ui.util.addIf
 import androidx.compose.material3.MaterialTheme as Material3Theme
 
@@ -52,7 +53,7 @@ fun PreferenceTemplate(
             Divider(
                 modifier = Modifier.padding(horizontal = 16.dp),
                 startIndent = dividerIndent,
-                color = Material3Theme.colorScheme.onBackground.copy(alpha = 0.16f)
+                color = dividerColor()
             )
         }
         Row(

lawnchair/src/app/lawnchair/ui/theme/Color.kt

@@ -6,9 +6,13 @@ import android.text.TextUtils
 import android.util.TypedValue
 import android.view.ContextThemeWrapper
 import androidx.annotation.ColorInt
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
 import androidx.core.graphics.ColorUtils
 import app.lawnchair.theme.UiColorMode
 import app.lawnchair.theme.color.ColorTokens
+import app.lawnchair.theme.surfaceColorAtElevation
 import com.android.launcher3.R
 import com.android.launcher3.Utilities
 import com.android.launcher3.util.Themes
@@ -61,3 +65,6 @@ fun Context.getSystemAccent(darkTheme: Boolean): Int {
         typedValue.data
     }
 }
+
+@Composable
+fun dividerColor() = MaterialTheme.colorScheme.surfaceColorAtElevation(32.dp)