Update button styles

2025-12-23 14:58:45 +01:00
parent d6214ef9fa
commit c73ce596f0
19 changed files with 360 additions and 647 deletions
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/common/FavoritesTagSelector.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/common/FavoritesTagSelector.kt
@@ -13,12 +13,12 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
-import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.SmallFloatingActionButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -130,12 +130,12 @@ fun FavoritesTagSelector(
                        }
                    }

-                    }
+                }

                if (editButton) {
-                    SmallFloatingActionButton(
-                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
-                        onClick = { sheetManager.showEditFavoritesSheet() }
+                    FilledTonalIconButton(
+                        onClick = { sheetManager.showEditFavoritesSheet() },
+                        shapes = IconButtonDefaults.shapes(),
                    ) {
                        Icon(
                            painter = painterResource(R.drawable.edit_24px),
@@ -216,9 +216,9 @@ fun FavoritesTagSelector(
                    }

                    if (editButton) {
-                        SmallFloatingActionButton(
-                            elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
-                            onClick = { sheetManager.showEditFavoritesSheet() }
+                        FilledTonalIconButton(
+                            onClick = { sheetManager.showEditFavoritesSheet() },
+                            shapes = IconButtonDefaults.shapes(),
                        ) {
                            Icon(
                                painter = painterResource(R.drawable.edit_24px),
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/common/ImportThemeSheet.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/common/ImportThemeSheet.kt
@@ -1,302 +0,0 @@
-package de.mm20.launcher2.ui.common
-
-import android.net.Uri
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Button
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SegmentedButton
-import androidx.compose.material3.SegmentedButtonDefaults
-import androidx.compose.material3.SingleChoiceSegmentedButtonRow
-import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
-import androidx.lifecycle.viewmodel.compose.viewModel
-import de.mm20.launcher2.themes.colors.Colors
-import de.mm20.launcher2.ui.R
-import de.mm20.launcher2.ui.component.BottomSheetDialog
-import de.mm20.launcher2.ui.component.LargeMessage
-import de.mm20.launcher2.ui.component.preferences.SwitchPreference
-import de.mm20.launcher2.ui.locals.LocalDarkTheme
-import de.mm20.launcher2.ui.theme.colorscheme.darkColorSchemeOf
-import de.mm20.launcher2.ui.theme.colorscheme.lightColorSchemeOf
-import hct.Hct
-
-@Composable
-fun ImportThemeSheet(
-    uri: Uri,
-    onDismiss: () -> Unit,
-) {
-    val viewModel: ImportThemeSheetVM = viewModel()
-
-    val context = LocalContext.current
-
-    LaunchedEffect(uri) {
-        viewModel.readTheme(context, uri)
-    }
-
-    val theme by viewModel.colors
-    val error by viewModel.error
-    var apply by viewModel.apply
-
-    BottomSheetDialog(onDismiss) {
-        if (theme == null && !error) {
-            Box(
-                modifier = Modifier
-                    .padding(it)
-                    .fillMaxWidth()
-                    .aspectRatio(1f),
-                contentAlignment = Alignment.Center
-            ) {
-                CircularProgressIndicator()
-            }
-        } else if (error) {
-            Box(
-                modifier = Modifier
-                    .padding(it)
-                    .fillMaxWidth()
-                    .aspectRatio(1f),
-                contentAlignment = Alignment.Center
-            ) {
-                LargeMessage(
-                    icon = R.drawable.error_48px,
-                    text = stringResource(R.string.import_theme_error),
-                )
-            }
-        } else {
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(it),
-                horizontalAlignment = Alignment.End
-            ) {
-                ThemePreview(
-                    theme!!,
-                )
-                Surface(
-                    modifier = Modifier.padding(top = 8.dp),
-                    color = MaterialTheme.colorScheme.surfaceContainer,
-                    shape = MaterialTheme.shapes.medium,
-                    border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant)
-                ) {
-
-                    SwitchPreference(
-                        title = stringResource(R.string.import_theme_apply),
-                        iconPadding = false,
-                        value = apply,
-                        onValueChanged = {
-                            apply = it
-                        })
-                }
-                Button(
-                    modifier = Modifier.padding(top = 8.dp),
-                    onClick = {
-                        viewModel.import()
-                        onDismiss()
-                    },
-                ) {
-                    Text(stringResource(R.string.action_import))
-                }
-            }
-        }
-    }
-}
-
-@Composable
-fun ThemePreview(
-    colors: Colors,
-    modifier: Modifier = Modifier,
-) {
-    val darkMode = LocalDarkTheme.current
-    var darkTheme by remember { mutableStateOf(darkMode) }
-
-    val colorScheme = if (darkTheme) darkColorSchemeOf(colors) else lightColorSchemeOf(colors)
-
-    Column(modifier = modifier) {
-        Row(
-            modifier = Modifier.padding(top = 8.dp, bottom = 16.dp),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Text(
-                text = colors.name,
-                style = MaterialTheme.typography.titleMedium,
-                modifier = Modifier.weight(1f),
-                color = MaterialTheme.colorScheme.onSurfaceVariant
-            )
-            SingleChoiceSegmentedButtonRow {
-                SegmentedButton(
-                    shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2),
-                    selected = !darkTheme,
-                    onClick = { darkTheme = false }
-                ) {
-                    Icon(painterResource(R.drawable.light_mode_24px), null)
-                }
-                SegmentedButton(
-                    shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2),
-                    selected = darkTheme,
-                    onClick = { darkTheme = true }
-                ) {
-                    Icon(painterResource(R.drawable.dark_mode_24px), null)
-                }
-            }
-        }
-    MaterialTheme(
-        colorScheme = colorScheme
-    ) {
-        Column(
-            modifier = Modifier
-                .clip(MaterialTheme.shapes.medium)
-                .border(1.dp, MaterialTheme.colorScheme.outlineVariant, MaterialTheme.shapes.medium)
-                .background(MaterialTheme.colorScheme.surfaceContainer)
-                .padding(start = 14.dp, end = 14.dp, bottom = 14.dp, top = 14.dp)
-        ) {
-            Row {
-                ColorSwatch(color = MaterialTheme.colorScheme.primary, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.onPrimary, darkTheme = darkTheme)
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.primaryContainer,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.onPrimaryContainer,
-                    darkTheme = darkTheme
-                )
-            }
-            Row {
-                ColorSwatch(color = MaterialTheme.colorScheme.secondary, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.onSecondary, darkTheme = darkTheme)
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.secondaryContainer,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.onSecondaryContainer,
-                    darkTheme = darkTheme
-                )
-            }
-            Row {
-                ColorSwatch(color = MaterialTheme.colorScheme.tertiary, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.onTertiary, darkTheme = darkTheme)
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.tertiaryContainer,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.onTertiaryContainer,
-                    darkTheme = darkTheme
-                )
-            }
-            Row {
-                ColorSwatch(color = MaterialTheme.colorScheme.error, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.onError, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.errorContainer, darkTheme = darkTheme)
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.onErrorContainer,
-                    darkTheme = darkTheme
-                )
-            }
-            Row {
-                ColorSwatch(color = MaterialTheme.colorScheme.surfaceDim, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.surface, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.surfaceBright, darkTheme = darkTheme)
-            }
-            Row {
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.surfaceContainerLowest,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.surfaceContainerLow,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.surfaceContainer,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.surfaceContainerHigh,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.surfaceContainerHighest,
-                    darkTheme = darkTheme
-                )
-            }
-            Row {
-                ColorSwatch(color = MaterialTheme.colorScheme.onSurface, darkTheme = darkTheme)
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(color = MaterialTheme.colorScheme.outline, darkTheme = darkTheme)
-                ColorSwatch(color = MaterialTheme.colorScheme.outlineVariant, darkTheme = darkTheme)
-            }
-            Row {
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.inverseSurface,
-                    darkTheme = darkTheme,
-                    weight = 2f
-                )
-                ColorSwatch(
-                    color = MaterialTheme.colorScheme.inverseOnSurface,
-                    darkTheme = darkTheme
-                )
-                ColorSwatch(color = MaterialTheme.colorScheme.inversePrimary, darkTheme = darkTheme)
-            }
-
-        }
-    }
-    }
-}
-
-@Composable
-fun RowScope.ColorSwatch(
-    color: Color,
-    darkTheme: Boolean,
-    weight: Float = 1f,
-) {
-    val borderColor = Color(Hct.fromInt(color.toArgb()).let {
-        val tone = if (darkTheme) 30f else 80f
-        it.apply {
-            this.tone = tone.toDouble()
-        }.toInt()
-    })
-    Box(
-        modifier = Modifier
-            .weight(weight)
-            .padding(2.dp)
-            .height(36.dp)
-            .clip(MaterialTheme.shapes.small)
-            .border(
-                1.dp,
-                borderColor,
-                MaterialTheme.shapes.small
-            )
-            .background(color),
-    )
-}
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/common/ImportThemeSheetVM.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/common/ImportThemeSheetVM.kt
@@ -1,65 +0,0 @@
-package de.mm20.launcher2.ui.common
-
-import android.content.Context
-import android.net.Uri
-import androidx.compose.runtime.mutableStateOf
-import androidx.lifecycle.ViewModel
-import androidx.lifecycle.viewModelScope
-import de.mm20.launcher2.preferences.ui.UiSettings
-import de.mm20.launcher2.themes.colors.Colors
-import de.mm20.launcher2.themes.ThemeRepository
-import de.mm20.launcher2.themes.fromLegacyJson
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.launch
-import org.koin.core.component.KoinComponent
-import org.koin.core.component.inject
-
-class ImportThemeSheetVM : ViewModel(), KoinComponent {
-
-    private val themeRepository: ThemeRepository by inject()
-    private val uiSettings: UiSettings by inject()
-
-    val colors = mutableStateOf<Colors?>(null)
-    val error = mutableStateOf<Boolean>(false)
-    val apply = mutableStateOf<Boolean>(false)
-
-    fun import() {
-        val theme = colors.value
-        val apply = apply.value
-        if (theme != null) {
-            viewModelScope.launch {
-                importTheme(theme, apply)
-            }
-        }
-    }
-
-
-    fun readTheme(context: Context, uri: Uri) {
-        error.value = false
-        colors.value = null
-        apply.value = true
-        viewModelScope.launch(Dispatchers.IO) {
-            val inputStream =
-                context.contentResolver.openInputStream(uri) ?: return@launch
-            val colors = inputStream.use {
-                val json = it.readBytes().toString(Charsets.UTF_8)
-                try {
-                    Colors.fromLegacyJson(json)
-                } catch (e: IllegalArgumentException) {
-                    null
-                }
-            }
-            this@ImportThemeSheetVM.colors.value = colors
-            if (colors == null) {
-                error.value = true
-            }
-        }
-    }
-
-    private fun importTheme(colors: Colors, apply: Boolean) {
-        themeRepository.colors.create(colors)
-        if (apply) {
-            uiSettings.setColorsId(colors.id)
-        }
-    }
-}
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/component/BottomSheetDialog.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/component/BottomSheetDialog.kt
@@ -5,6 +5,8 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -27,7 +29,8 @@ fun BottomSheetDialog(
            .padding(top = 8.dp),
        sheetState = bottomSheetState,
        onDismissRequest = onDismissRequest,
-        contentWindowInsets = { windowInsets }
+        contentWindowInsets = { windowInsets },
+        containerColor = BottomSheetDefaults.ContainerColor
    ) {
        content(PaddingValues(
            bottom = WindowInsets.navigationBars.getBottom(LocalDensity.current).toDp() + 8.dp,
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/ImportThemeActivity.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/ImportThemeActivity.kt
@@ -4,7 +4,6 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import de.mm20.launcher2.ui.base.BaseActivity
 import de.mm20.launcher2.ui.base.ProvideSettings
-import de.mm20.launcher2.ui.common.ImportThemeSheet
 import de.mm20.launcher2.ui.overlays.OverlayHost
 import de.mm20.launcher2.ui.settings.appearance.ImportThemeSettingsScreen
 import de.mm20.launcher2.ui.theme.LauncherTheme
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/searchbar/LauncherSearchBar.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/searchbar/LauncherSearchBar.kt
@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardActionScope
 import androidx.compose.material3.Badge
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.IconToggleButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -85,6 +86,7 @@ fun LauncherSearchBar(
                    IconToggleButton(
                        checked = sheetManager.hiddenItemsSheetShown.value,
                        onCheckedChange = { if (it) sheetManager.showHiddenItemsSheet() },
+                        shapes = IconButtonDefaults.toggleableShapes(),
                    ) {
                        Icon(
                            painter = painterResource(
@@ -105,6 +107,7 @@ fun LauncherSearchBar(
                        onCheckedChange = {
                            searchVM.showFilters.value = it
                        },
+                        shapes = IconButtonDefaults.toggleableShapes(),
                    ) {
                        Box {
                            Icon(
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/searchbar/SearchBarMenu.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/searchbar/SearchBarMenu.kt
@@ -15,6 +15,7 @@ import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.DropdownMenuPopup
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MenuDefaults
@@ -43,10 +44,13 @@ fun RowScope.SearchBarMenu(
    val rightIcon = AnimatedImageVector.animatedVectorResource(R.drawable.anim_ic_menu_clear)

    Box(contentAlignment = Alignment.TopEnd) {
-        IconButton(onClick = {
-            if (searchBarValue.isNotBlank()) onInputClear()
-            else showOverflowMenu = true
-        }) {
+        IconButton(
+            onClick = {
+                if (searchBarValue.isNotBlank()) onInputClear()
+                else showOverflowMenu = true
+            },
+            shapes = IconButtonDefaults.shapes()
+        ) {
            Icon(
                painter = rememberAnimatedVectorPainter(
                    rightIcon,
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/sheets/EditTagSheet.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/sheets/EditTagSheet.kt
@@ -4,6 +4,7 @@ import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -24,6 +25,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -35,6 +37,8 @@ import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -139,18 +143,20 @@ fun CreateNewTagPage(viewModel: EditTagSheetVM, paddingValues: PaddingValues) {
 fun PickItems(viewModel: EditTagSheetVM, paddingValues: PaddingValues) {
    val columns = LocalGridSettings.current.columnCount - 1

-    Scaffold (
+    Scaffold(
        contentWindowInsets = WindowInsets(0.dp),
        containerColor = Color.Transparent,
        bottomBar = {
-            Box (
-              modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp),
-              contentAlignment = Alignment.CenterEnd
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 8.dp),
+                contentAlignment = Alignment.CenterEnd
            ) {

-                ExtendedFloatingActionButton (
+                ExtendedFloatingActionButton(
                    modifier = Modifier.padding(paddingValues),
-                    onClick = {viewModel.closeItemPicker()}
+                    onClick = { viewModel.closeItemPicker() }
                ) {
                    Text(stringResource(R.string.action_next))
                }
@@ -421,23 +427,43 @@ fun PickIcon(
    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
-        SingleChoiceSegmentedButtonRow(
+        Row(
            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
        ) {
-            SegmentedButton(
-                selected = selectedTabIndex.intValue == 0,
-                icon = { Icon(painterResource(R.drawable.apps_24px), null) },
-                label = { Text("Icon") },
-                onClick = { selectedTabIndex.intValue = 0 },
-                shape = SegmentedButtonDefaults.itemShape(0, 2)
-            )
-            SegmentedButton(
-                selected = selectedTabIndex.intValue == 1,
-                icon = { Icon(painterResource(R.drawable.mood_24px), null) },
-                label = { Text("Emoji") },
-                onClick = { selectedTabIndex.intValue = 1 },
-                shape = SegmentedButtonDefaults.itemShape(1, 2)
-            )
+            ToggleButton(
+                modifier = Modifier.weight(1f),
+                checked = selectedTabIndex.intValue == 0,
+                onCheckedChange = { selectedTabIndex.intValue = 0 },
+                shapes = ButtonGroupDefaults.connectedLeadingButtonShapes()
+            ) {
+                Icon(
+                    painterResource(
+                        if (selectedTabIndex.intValue == 0) R.drawable.check_20px else R.drawable.apps_20px
+                    ),
+                    null,
+                    modifier = Modifier.padding(end = ToggleButtonDefaults.IconSpacing).size(
+                        ToggleButtonDefaults.IconSize)
+                )
+                Text("Icon")
+            }
+            ToggleButton(
+                modifier = Modifier.weight(1f),
+                checked = selectedTabIndex.intValue == 1,
+                onCheckedChange = { selectedTabIndex.intValue = 1 },
+                shapes = ButtonGroupDefaults.connectedTrailingButtonShapes()
+            ) {
+                Icon(
+                    painterResource(
+                        if (selectedTabIndex.intValue == 1) R.drawable.check_20px else R.drawable.mood_20px
+                    ),
+                    null,
+                    modifier = Modifier
+                        .padding(end = ToggleButtonDefaults.IconSpacing)
+                        .size(ToggleButtonDefaults.IconSize)
+                )
+                Text("Emoji")
+            }
        }
        AnimatedContent(
            selectedTabIndex.intValue,
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/ClockWidget.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/ClockWidget.kt
@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.DropdownMenuGroup
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.DropdownMenuPopup
@@ -26,11 +27,10 @@ import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MenuDefaults
 import androidx.compose.material3.OutlinedCard
-import androidx.compose.material3.SegmentedButton
-import androidx.compose.material3.SegmentedButtonDefaults
-import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -364,57 +364,42 @@ fun ConfigureClockWidgetSheet(
                .fillMaxWidth()
                .padding(it)
        ) {
-            SingleChoiceSegmentedButtonRow(
+            Row(
                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
            ) {
-                SegmentedButton(
-                    selected = compact == false,
-                    onClick = {
-                        viewModel.setCompact(false)
+                ToggleButton(
+                    modifier = Modifier.weight(1f),
+                    checked = compact == false,
+                    onCheckedChange = {
+                        if (it) viewModel.setCompact(false)
                    },
-                    shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2),
-                    icon = {
-                        SegmentedButtonDefaults.Icon(
-                            active = compact == false,
-                            activeContent = {
-                                Icon(
-                                    painterResource(R.drawable.check_20px),
-                                    contentDescription = null,
-                                )
-                            }
-                        ) {
-                            Icon(
-                                painterResource(R.drawable.splitscreen_top_20px),
-                                contentDescription = null,
-                            )
-                        }
-                    }
+                    shapes = ButtonGroupDefaults.connectedLeadingButtonShapes(),
                ) {
+                    Icon(
+                        painterResource(if (compact == false) R.drawable.check_20px else R.drawable.splitscreen_top_20px),
+                        null,
+                        modifier = Modifier
+                            .padding(end = ToggleButtonDefaults.IconSpacing)
+                            .size(ToggleButtonDefaults.IconSize)
+                    )
                    Text(text = stringResource(R.string.preference_clockwidget_layout_vertical))
                }
-                SegmentedButton(
-                    selected = compact == true,
-                    onClick = {
-                        viewModel.setCompact(true)
+                ToggleButton(
+                    modifier = Modifier.weight(1f),
+                    checked = compact == true,
+                    onCheckedChange = {
+                        if (it) viewModel.setCompact(true)
                    },
-                    shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2),
-                    icon = {
-                        SegmentedButtonDefaults.Icon(
-                            active = compact == true,
-                            activeContent = {
-                                Icon(
-                                    painterResource(R.drawable.check_20px),
-                                    contentDescription = null,
-                                )
-                            }
-                        ) {
-                            Icon(
-                                painterResource(R.drawable.splitscreen_right_20px),
-                                contentDescription = null,
-                            )
-                        }
-                    }
+                    shapes = ButtonGroupDefaults.connectedTrailingButtonShapes(),
                ) {
+                    Icon(
+                        painterResource(if (compact == true) R.drawable.check_20px else R.drawable.splitscreen_right_20px),
+                        null,
+                        modifier = Modifier
+                            .padding(end = ToggleButtonDefaults.IconSpacing)
+                            .size(ToggleButtonDefaults.IconSize)
+                    )
                    Text(text = stringResource(R.string.preference_clockwidget_layout_horizontal))
                }
            }
@@ -433,46 +418,47 @@ fun ConfigureClockWidgetSheet(
                    })
            }

-            SingleChoiceSegmentedButtonRow(
+            Row(
                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
            ) {
-                SegmentedButton(
-                    selected = color == ClockWidgetColors.Auto,
-                    onClick = {
-                        viewModel.setColor(ClockWidgetColors.Auto)
+                ToggleButton(
+                    modifier = Modifier.weight(1f),
+                    checked = color == ClockWidgetColors.Auto,
+                    onCheckedChange = {
+                        if (it) viewModel.setColor(ClockWidgetColors.Auto)
                    },
-                    shape = SegmentedButtonDefaults.itemShape(index = 0, count = 3),
+                    shapes = ButtonGroupDefaults.connectedLeadingButtonShapes(),
                ) {
                    Icon(
-                        painterResource(R.drawable.auto_awesome_20dp),
+                        painterResource(R.drawable.auto_awesome_24dp),
                        contentDescription = null,
-                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                    )
                }
-                SegmentedButton(
-                    selected = color == ClockWidgetColors.Dark,
-                    onClick = {
-                        viewModel.setColor(ClockWidgetColors.Dark)
+                ToggleButton(
+                    modifier = Modifier.weight(1f),
+                    checked = color == ClockWidgetColors.Dark,
+                    onCheckedChange = {
+                        if (it) viewModel.setColor(ClockWidgetColors.Dark)
                    },
-                    shape = SegmentedButtonDefaults.itemShape(index = 1, count = 3),
+                    shapes = ButtonGroupDefaults.connectedMiddleButtonShapes(),
                ) {
                    Icon(
-                        painterResource(R.drawable.light_mode_20px),
+                        painterResource(R.drawable.light_mode_24px),
                        contentDescription = null,
-                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                    )
                }
-                SegmentedButton(
-                    selected = color == ClockWidgetColors.Light,
-                    onClick = {
-                        viewModel.setColor(ClockWidgetColors.Light)
+                ToggleButton(
+                    modifier = Modifier.weight(1f),
+                    checked = color == ClockWidgetColors.Light,
+                    onCheckedChange = {
+                        if (it) viewModel.setColor(ClockWidgetColors.Light)
                    },
-                    shape = SegmentedButtonDefaults.itemShape(index = 2, count = 3),
+                    shapes = ButtonGroupDefaults.connectedTrailingButtonShapes(),
                ) {
                    Icon(
-                        painterResource(R.drawable.dark_mode_20px),
+                        painterResource(R.drawable.dark_mode_24px),
                        contentDescription = null,
-                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                    )
                }
            }
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/music/MusicWidget.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/music/MusicWidget.kt
@@ -34,7 +34,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.DropdownMenuGroup
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.DropdownMenuPopup
-import androidx.compose.material3.FilledTonalIconButton
+import androidx.compose.material3.FilledTonalIconToggleButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
@@ -61,6 +61,7 @@ import androidx.compose.ui.layout.boundsInWindow
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.platform.LocalResources
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
@@ -103,6 +104,7 @@ fun MusicWidget(widget: MusicWidget) {
    val supportedActions by viewModel.supportedActions.collectAsStateWithLifecycle(SupportedActions())

    val context = LocalContext.current
+    val resources = LocalResources.current

    Column(
        modifier = Modifier.fillMaxWidth()
@@ -250,7 +252,7 @@ fun MusicWidget(widget: MusicWidget) {
                            )
                            .semantics {
                                contentDescription =
-                                    context.getString(R.string.music_widget_open_player)
+                                    resources.getString(R.string.music_widget_open_player)
                            }
                            .conditional(
                                art == null,
@@ -326,7 +328,9 @@ fun MusicWidget(widget: MusicWidget) {
                        IconButton(
                            onClick = {
                                viewModel.skipPrevious()
-                            }) {
+                            },
+                            shapes = IconButtonDefaults.shapes(),
+                        ) {
                            Icon(
                                painter = painterResource(R.drawable.skip_previous_24px),
                                stringResource(R.string.music_widget_previous_track)
@@ -341,11 +345,10 @@ fun MusicWidget(widget: MusicWidget) {
                        else R.string.music_widget_play
                    )
                ) {
-                    FilledTonalIconButton(
-                        colors = IconButtonDefaults.filledTonalIconButtonColors(
-                            containerColor = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = MaterialTheme.transparency.surface),
-                        ),
-                        onClick = { viewModel.togglePause() },
+                    FilledTonalIconToggleButton(
+                        onCheckedChange = { viewModel.togglePause() },
+                        shapes = IconButtonDefaults.toggleableShapes(),
+                        checked = playbackState == PlaybackState.Playing
                    ) {
                        AnimatedContent(
                            playbackState == PlaybackState.Playing,
@@ -360,7 +363,7 @@ fun MusicWidget(widget: MusicWidget) {
                        ) {
                            if (it) {
                                Icon(
-                                    painterResource(R.drawable.pause_24px),
+                                    painterResource(R.drawable.pause_24px_filled),
                                    stringResource(R.string.music_widget_pause),
                                    modifier = Modifier.rotate(-90f)
                                )
@@ -377,9 +380,12 @@ fun MusicWidget(widget: MusicWidget) {
                    Tooltip(
                        tooltipText = stringResource(R.string.music_widget_next_track)
                    ) {
-                        IconButton(onClick = {
-                            viewModel.skipNext()
-                        }) {
+                        IconButton(
+                            onClick = {
+                                viewModel.skipNext()
+                            },
+                            shapes = IconButtonDefaults.shapes(),
+                        ) {
                            Icon(
                                painter = painterResource(R.drawable.skip_next_24px),
                                stringResource(R.string.music_widget_next_track)
@@ -478,7 +484,8 @@ fun CustomActions(
            IconButton(
                onClick = {
                    onActionSelected(action)
-                }
+                },
+                shapes = IconButtonDefaults.shapes(),
            ) {
                CustomActionIcon(action, playerPackage)
            }
@@ -521,7 +528,6 @@ fun CustomActionIcon(action: CustomAction, playerPackage: String?) {
            .build(),
    )
    Icon(
-        modifier = Modifier.size(24.dp),
        painter = painter,
        contentDescription = null,
    )
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/appearance/ImportThemeSettingsScreen.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/appearance/ImportThemeSettingsScreen.kt
@@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonGroupDefaults
+import androidx.compose.material3.ElevatedToggleButton
 import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
@@ -24,6 +26,7 @@ import androidx.compose.material3.SegmentedButton
 import androidx.compose.material3.SegmentedButtonDefaults
 import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Text
+import androidx.compose.material3.ToggleButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -375,18 +378,24 @@ private fun ThemePreview(
                .padding(12.dp),
            contentAlignment = Alignment.CenterEnd,
        ) {
-            SingleChoiceSegmentedButtonRow {
-                SegmentedButton(
-                    shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2),
-                    selected = !darkMode,
-                    onClick = { onDarkModeChanged(false) }
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
+            ) {
+                ToggleButton(
+                    checked = !darkMode,
+                    onCheckedChange = {
+                        if (it) onDarkModeChanged(false)
+                    },
+                    shapes = ButtonGroupDefaults.connectedLeadingButtonShapes(),
                ) {
                    Icon(painterResource(R.drawable.light_mode_24px), null)
                }
-                SegmentedButton(
-                    shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2),
-                    selected = darkMode,
-                    onClick = { onDarkModeChanged(true) }
+                ToggleButton(
+                    checked = darkMode,
+                    onCheckedChange = {
+                        if (it) onDarkModeChanged(true)
+                    },
+                    shapes = ButtonGroupDefaults.connectedTrailingButtonShapes(),
                ) {
                    Icon(painterResource(R.drawable.dark_mode_24px), null)
                }
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemePreferenceCategory.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemePreferenceCategory.kt
@@ -9,12 +9,14 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.FilledIconToggleButton
+import androidx.compose.material3.FilledTonalIconToggleButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.IconToggleButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SegmentedButton
-import androidx.compose.material3.SegmentedButtonDefaults
-import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -49,20 +51,28 @@ fun ColorSchemePreferenceCategory(
                color = MaterialTheme.colorScheme.secondary,
                modifier = Modifier.weight(1f)
            )
-            SingleChoiceSegmentedButtonRow {
-                SegmentedButton(
-                    shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2),
-                    selected = !darkMode,
-                    onClick = { onDarkModeChanged(false) }
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween),
+            ) {
+                FilledTonalIconToggleButton(
+                    shapes = IconButtonDefaults.toggleableShapes(),
+                    checked = !darkMode,
+                    onCheckedChange = { onDarkModeChanged(false) }
                ) {
-                    Icon(painterResource(R.drawable.light_mode_24px), null)
+                    Icon(
+                        painterResource(R.drawable.light_mode_24px),
+                        null
+                    )
                }
-                SegmentedButton(
-                    shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2),
-                    selected = darkMode,
-                    onClick = { onDarkModeChanged(true) }
+                FilledTonalIconToggleButton(
+                    shapes = IconButtonDefaults.toggleableShapes(),
+                    checked = darkMode,
+                    onCheckedChange = { onDarkModeChanged(true) }
                ) {
-                    Icon(painterResource(R.drawable.dark_mode_24px), null)
+                    Icon(
+                        painterResource(R.drawable.dark_mode_24px),
+                        null
+                    )
                }
            }
        }
@@ -81,7 +91,10 @@ fun ColorSchemePreferenceCategory(
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
-                        .background(MaterialTheme.colorScheme.surfaceContainerLowest, MaterialTheme.shapes.extraSmall)
+                        .background(
+                            MaterialTheme.colorScheme.surfaceContainerLowest,
+                            MaterialTheme.shapes.extraSmall
+                        )
                        .horizontalScroll(rememberScrollState())
                        .padding(16.dp),
                    verticalAlignment = Alignment.CenterVertically,
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemeColorPreference.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemeColorPreference.kt
@@ -4,6 +4,7 @@ import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -17,6 +18,7 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -26,6 +28,8 @@ import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -110,50 +114,47 @@ fun ThemeColorPreference(
                    .verticalScroll(rememberScrollState())
                    .padding(it),
            ) {
-                SingleChoiceSegmentedButtonRow(
-                    modifier = Modifier.fillMaxWidth()
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
                ) {
-                    SegmentedButton(
-                        selected = actualValue is ColorRef,
-                        onClick = {
-                            if (actualValue is ColorRef) return@SegmentedButton
+                    ToggleButton(
+                        modifier = Modifier.weight(1f),
+                        checked = actualValue is ColorRef,
+                        onCheckedChange = {
+                            if (actualValue is ColorRef) return@ToggleButton
                            currentValue = defaultValue
                        },
-                        icon = {
-                            SegmentedButtonDefaults.Icon(
-                                active = actualValue is ColorRef,
-                            ) {
-                                Icon(
-                                    painterResource(R.drawable.palette_20px),
-                                    null,
-                                    modifier = Modifier
-                                        .size(SegmentedButtonDefaults.IconSize)
-                                )
-                            }
-                        },
-                        shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2)
+                        shapes = ButtonGroupDefaults.connectedLeadingButtonShapes()
                    ) {
+                        Icon(
+                            painterResource(
+                                if (actualValue is ColorRef) R.drawable.check_20px else R.drawable.palette_20px
+                            ),
+                            null,
+                            modifier = Modifier
+                                .padding(end = ToggleButtonDefaults.IconSpacing)
+                                .size(ToggleButtonDefaults.IconSize)
+                        )
                        Text(stringResource(R.string.theme_color_scheme_palette_color))
                    }
-                    SegmentedButton(
-                        selected = actualValue is StaticColor,
-                        onClick = {
+                    ToggleButton(
+                        modifier = Modifier.weight(1f),
+                        checked = actualValue is StaticColor,
+                        onCheckedChange = {
                            currentValue = StaticColor(actualValue.get(corePalette))
                        },
-                        icon = {
-                            SegmentedButtonDefaults.Icon(
-                                active = actualValue is StaticColor,
-                            ) {
-                                Icon(
-                                    painterResource(R.drawable.colorize_20px),
-                                    null,
-                                    modifier = Modifier
-                                        .size(SegmentedButtonDefaults.IconSize)
-                                )
-                            }
-                        },
-                        shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2)
+                        shapes = ButtonGroupDefaults.connectedTrailingButtonShapes()
                    ) {
+                        Icon(
+                            painterResource(
+                                if (actualValue is StaticColor) R.drawable.check_20px else R.drawable.colorize_20px
+                            ),
+                            null,
+                            modifier = Modifier
+                                .padding(end = ToggleButtonDefaults.IconSpacing)
+                                .size(ToggleButtonDefaults.IconSize)
+                        )
                        Text(stringResource(R.string.theme_color_scheme_custom_color))
                    }
                }
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/homescreen/HomescreenSettingsScreen.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/homescreen/HomescreenSettingsScreen.kt
@@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -24,6 +25,7 @@ import androidx.compose.material3.SegmentedButton
 import androidx.compose.material3.SegmentedButtonDefaults
 import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Text
+import androidx.compose.material3.ToggleButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -391,57 +393,49 @@ fun SearchBarStylePreference(
                                )
                            }
                            if (style == SearchBarStyle.Transparent) {
-                                SingleChoiceSegmentedButtonRow(
+                                Row(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(top = 16.dp),
+                                    horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
                                ) {
-                                    SegmentedButton(
-                                        selected = colors == SearchBarColors.Auto,
-                                        onClick = {
+                                    ToggleButton(
+                                        modifier = Modifier.weight(1f),
+                                        checked = colors == SearchBarColors.Auto,
+                                        onCheckedChange = {
                                            onColorsChanged(SearchBarColors.Auto)
                                        },
-                                        shape = SegmentedButtonDefaults.itemShape(
-                                            index = 0,
-                                            count = 3
-                                        ),
+                                        shapes = ButtonGroupDefaults.connectedLeadingButtonShapes(),
                                    ) {
                                        Icon(
                                            painterResource(R.drawable.auto_awesome_20dp),
                                            contentDescription = null,
-                                            modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                                        )
                                    }
-                                    SegmentedButton(
-                                        selected = colors == SearchBarColors.Dark,
-                                        onClick = {
-                                            onColorsChanged(SearchBarColors.Dark)
-                                        },
-                                        shape = SegmentedButtonDefaults.itemShape(
-                                            index = 1,
-                                            count = 3
-                                        ),
-                                    ) {
-                                        Icon(
-                                            painterResource(R.drawable.light_mode_20px),
-                                            contentDescription = null,
-                                            modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
-                                        )
-                                    }
-                                    SegmentedButton(
-                                        selected = colors == SearchBarColors.Light,
-                                        onClick = {
+                                    ToggleButton(
+                                        modifier = Modifier.weight(1f),
+                                        checked = colors == SearchBarColors.Light,
+                                        onCheckedChange = {
                                            onColorsChanged(SearchBarColors.Light)
                                        },
-                                        shape = SegmentedButtonDefaults.itemShape(
-                                            index = 2,
-                                            count = 3
-                                        ),
+                                        shapes = ButtonGroupDefaults.connectedMiddleButtonShapes(),
                                    ) {
                                        Icon(
-                                            painterResource(R.drawable.dark_mode_20px),
+                                            painterResource(R.drawable.light_mode_24px),
+                                            contentDescription = null,
+                                        )
+                                    }
+                                    ToggleButton(
+                                        modifier = Modifier.weight(1f),
+                                        checked = colors == SearchBarColors.Dark,
+                                        onCheckedChange = {
+                                            onColorsChanged(SearchBarColors.Dark)
+                                        },
+                                        shapes = ButtonGroupDefaults.connectedTrailingButtonShapes(),
+                                    ) {
+                                        Icon(
+                                            painterResource(R.drawable.dark_mode_24px),
                                            contentDescription = null,
-                                            modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                                        )
                                    }
                                }
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/searchactions/EditSearchActionSheet.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/searchactions/EditSearchActionSheet.kt
@@ -30,6 +30,7 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenuGroup
 import androidx.compose.material3.DropdownMenuItem
@@ -45,13 +46,12 @@ import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
-import androidx.compose.material3.SegmentedButton
-import androidx.compose.material3.SegmentedButtonDefaults
-import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -673,25 +673,42 @@ fun CustomizeCustomIntent(viewModel: EditSearchActionSheetVM) {
            style = MaterialTheme.typography.titleSmall,
        )

-        SingleChoiceSegmentedButtonRow(
-            modifier = Modifier.fillMaxWidth()
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)
        ) {
-            SegmentedButton(
-                selected = action.queryKey == null,
-                onClick = {
+            ToggleButton(
+                modifier = Modifier.weight(1f),
+                checked = action.queryKey == null,
+                onCheckedChange = {
                    viewModel.setQueryKey(null)
                },
-                shape = SegmentedButtonDefaults.itemShape(0, 2)
+                shapes = ButtonGroupDefaults.connectedLeadingButtonShapes()
            ) {
+                AnimatedVisibility(action.queryKey == null) {
+                    Icon(
+                        painterResource(R.drawable.check_20px),
+                        contentDescription = null,
+                        modifier = Modifier.padding(end = ToggleButtonDefaults.IconSpacing).size(ToggleButtonDefaults.IconSize)
+                    )
+                }
                Text("Data")
            }
-            SegmentedButton(
-                selected = action.queryKey != null,
-                onClick = {
+            ToggleButton(
+                modifier = Modifier.weight(1f),
+                checked = action.queryKey != null,
+                onCheckedChange = {
                    viewModel.setQueryKey("")
                },
-                shape = SegmentedButtonDefaults.itemShape(1, 2)
+                shapes = ButtonGroupDefaults.connectedTrailingButtonShapes()
            ) {
+                AnimatedVisibility(action.queryKey != null) {
+                    Icon(
+                        painterResource(R.drawable.check_20px),
+                        contentDescription = null,
+                        modifier = Modifier.padding(end = ToggleButtonDefaults.IconSpacing).size(ToggleButtonDefaults.IconSize)
+                    )
+                }
                Text("String extra")
            }
        }
@@ -723,7 +740,7 @@ fun CustomizeCustomIntent(viewModel: EditSearchActionSheetVM) {
            supportingText = {
                Text(
                    if (action.queryKey == null) {
-                        "The URI template that is used to construct the intent\\'s data URI. Use ‘\${1}’ as a placeholder for the actual search term"
+                        "The URI template that is used to construct the intent\'s data URI. Use ‘\${1}’ as a placeholder for the actual search term"
                    } else {
                        "The template that is used to construct the string that is passed to the intent as a string extra. Use ‘\${1}’ as a placeholder for the actual search term"
                    }
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/shapes/ShapeSchemeSettingsScreen.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/shapes/ShapeSchemeSettingsScreen.kt
@@ -23,6 +23,7 @@ import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ButtonGroupDefaults
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FloatingActionButton
@@ -38,6 +39,8 @@ import androidx.compose.material3.Slider
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -539,47 +542,47 @@ fun ShapePreference(
                        )
                )

-                SingleChoiceSegmentedButtonRow(
+                Row(
                    modifier = Modifier
-                        .fillMaxWidth()
+                        .fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween),
                ) {
-                    SegmentedButton(
-                        selected = actualCornerStyle == CornerStyle.Rounded,
-                        onClick = {
+                    ToggleButton(
+                        modifier = Modifier.weight(1f),
+                        checked = actualCornerStyle == CornerStyle.Rounded,
+                        onCheckedChange = {
                            currentCornerStyle = CornerStyle.Rounded
                        },
-                        shape = SegmentedButtonDefaults.itemShape(0, 2),
-                        icon = {
-                            SegmentedButtonDefaults.Icon(
-                                active = actualCornerStyle == CornerStyle.Rounded,
-                            ) {
-                                Icon(
-                                    painterResource(R.drawable.rounded_corner_alt_24px),
-                                    null,
-                                    modifier = Modifier.size(SegmentedButtonDefaults.IconSize),
-                                )
-                            }
-                        }
+                        shapes = ButtonGroupDefaults.connectedLeadingButtonShapes(),
                    ) {
+                        Icon(
+                            painterResource(
+                                if (actualCornerStyle == CornerStyle.Rounded) R.drawable.check_20px else R.drawable.rounded_corner_alt_24px
+                            ),
+                            contentDescription = null,
+                            modifier = Modifier
+                                .padding(end = ToggleButtonDefaults.IconSpacing)
+                                .size(ToggleButtonDefaults.IconSize)
+                        )
                        Text(stringResource(R.string.preference_cards_shape_rounded))
                    }
-                    SegmentedButton(
-                        selected = actualCornerStyle == CornerStyle.Cut,
-                        onClick = {
+                    ToggleButton(
+                        modifier = Modifier.weight(1f),
+                        checked = actualCornerStyle == CornerStyle.Cut,
+                        onCheckedChange = {
                            currentCornerStyle = CornerStyle.Cut
                        },
-                        shape = SegmentedButtonDefaults.itemShape(1, 2),
-                        icon = {
-                            SegmentedButtonDefaults.Icon(
-                                active = actualCornerStyle == CornerStyle.Cut,
-                            ) {
-                                Icon(
-                                    painterResource(R.drawable.cut_corner_20px),
-                                    null,
-                                    modifier = Modifier.size(SegmentedButtonDefaults.IconSize),)
-                            }
-                        }
+                        shapes = ButtonGroupDefaults.connectedTrailingButtonShapes(),
                    ) {
+                        Icon(
+                            painterResource(
+                                if (actualCornerStyle == CornerStyle.Cut) R.drawable.check_20px else R.drawable.cut_corner_20px
+                            ),
+                            contentDescription = null,
+                            modifier = Modifier
+                                .padding(end = ToggleButtonDefaults.IconSpacing)
+                                .size(ToggleButtonDefaults.IconSize)
+                        )
                        Text(stringResource(R.string.preference_cards_shape_cut))
                    }
                }
--- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/typography/TypographySettingsScreen.kt
+++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/typography/TypographySettingsScreen.kt
@@ -3,37 +3,33 @@ package de.mm20.launcher2.ui.settings.typography
 import android.content.Context
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LeadingIconTab
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedIconToggleButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.PrimaryTabRow
 import androidx.compose.material3.Slider
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.Typography
@@ -47,7 +43,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -89,7 +84,7 @@ import de.mm20.launcher2.themes.typography.TextStyle as ThemeTextStyle
@Serializable
 data class TypographySettingsRoute(
    @Serializable(with = UUIDSerializer::class) val id: UUID
-): NavKey
+) : NavKey

@Composable
 fun TypographySettingsScreen(themeId: UUID) {
@@ -174,7 +169,11 @@ fun TypographySettingsScreen(themeId: UUID) {
                            size = 48.dp,
                            modifier = Modifier.padding(bottom = 8.dp),
                        )
-                        Text(previewTexts.Medium1, textAlign = TextAlign.Center, style = MaterialTheme.typography.bodySmall)
+                        Text(
+                            previewTexts.Medium1,
+                            textAlign = TextAlign.Center,
+                            style = MaterialTheme.typography.bodySmall
+                        )
                    }
                }
                TextStylePreference(
@@ -281,8 +280,11 @@ fun TypographySettingsScreen(themeId: UUID) {
                    FilterChip(
                        modifier = Modifier
                            .padding(end = 16.dp),
-                        label = { Text(previewTexts.Short1
-                        ) },
+                        label = {
+                            Text(
+                                previewTexts.Short1
+                            )
+                        },
                        leadingIcon = {
                            Icon(
                                painterResource(R.drawable.tag_20px),
@@ -1066,19 +1068,13 @@ private fun TextStylePreference(
                            verticalArrangement = Arrangement.spacedBy(8.dp),
                        ) {

-                            Box(
-                                modifier = Modifier
-                                    .size(56.dp)
-                                    .border(
-                                        if (name == actualFontFamily) 2.dp else 1.dp,
-                                        if (name == actualFontFamily) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.outlineVariant,
-                                        CircleShape
-                                    )
-                                    .clip(CircleShape)
-                                    .clickable {
-                                        fontFamily = name
-                                    },
-                                contentAlignment = Alignment.Center,
+                            OutlinedIconToggleButton(
+                                modifier = Modifier.size(56.dp),
+                                checked = name == actualFontFamily,
+                                onCheckedChange = {
+                                    if (it) fontFamily = name
+                                },
+                                shapes = IconButtonDefaults.toggleableShapes(),
                            ) {
                                Text(
                                    text = previewTexts.ExtraShort,
--- a/core/base/src/main/res/drawable/mood_20px.xml
+++ b/core/base/src/main/res/drawable/mood_20px.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M612,444Q637,444 654.5,426.5Q672,409 672,384Q672,359 654.5,341.5Q637,324 612,324Q587,324 569.5,341.5Q552,359 552,384Q552,409 569.5,426.5Q587,444 612,444ZM348,444Q373,444 390.5,426.5Q408,409 408,384Q408,359 390.5,341.5Q373,324 348,324Q323,324 305.5,341.5Q288,359 288,384Q288,409 305.5,426.5Q323,444 348,444ZM480.28,864Q401,864 331,834Q261,804 208.5,751.5Q156,699 126,629.04Q96,559.08 96,479.54Q96,400 126,330.5Q156,261 208.5,208.5Q261,156 330.96,126Q400.92,96 480.46,96Q560,96 629.5,126Q699,156 751.5,208.5Q804,261 834,330.72Q864,400.45 864,479.72Q864,559 834,629Q804,699 751.5,751.5Q699,804 629.28,834Q559.55,864 480.28,864ZM480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480ZM480,792Q610,792 701,701Q792,610 792,480Q792,350 701,259Q610,168 480,168Q350,168 259,259Q168,350 168,480Q168,610 259,701Q350,792 480,792ZM479.56,672Q531,672 575.5,649.5Q620,627 650.83,587Q657,577 651.5,567Q646,557 635,557L325,557Q314,557 308.5,567Q303,577 309,587Q339,627 384,649.5Q429,672 479.56,672Z"/>
+</vector>
--- a/core/base/src/main/res/drawable/pause_24px_filled.xml
+++ b/core/base/src/main/res/drawable/pause_24px_filled.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M640,760Q607,760 583.5,736.5Q560,713 560,680L560,280Q560,247 583.5,223.5Q607,200 640,200L640,200Q673,200 696.5,223.5Q720,247 720,280L720,680Q720,713 696.5,736.5Q673,760 640,760ZM320,760Q287,760 263.5,736.5Q240,713 240,680L240,280Q240,247 263.5,223.5Q287,200 320,200L320,200Q353,200 376.5,223.5Q400,247 400,280L400,680Q400,713 376.5,736.5Q353,760 320,760Z"/>
+</vector>