Segmented colors

samples/shared/src/commonMain/kotlin/com/alorma/compose/settings/sample/shared/SettingsScreen.kt

@@ -51,6 +51,7 @@ fun SettingsScreen(
         .padding(top = padding.calculateTopPadding()),
     ) {
       val iconState = remember { mutableStateOf(false) }
+      SettingsGroupSectionSample(iconState.value)
 
       SettingsSwitch(
         state = iconState.value,
@@ -73,7 +74,6 @@ fun SettingsScreen(
         },
       )
 
-      SettingsGroupSectionSample(iconState.value)
       SettingsSwitchSampleSection(iconState.value)
       SettingsCheckboxSampleSection(iconState.value)
       SettingsTriStateCheckboxSampleSection(iconState.value)

ui-base/src/commonMain/kotlin/com/alorma/compose/settings/ui/base/internal/SettingsTileDefaults.kt

@@ -8,16 +8,16 @@ import androidx.compose.ui.unit.Dp
 
 object SettingsTileDefaults {
   val Elevation: Dp = ListItemDefaults.Elevation
-  private const val DisabledAlpha: Float = 0.38f
+  val DisabledAlpha: Float = 0.38f
 
   @Composable
   fun colors(
     containerColor: Color = LocalSettingsTileColors.current?.containerColor
       ?: MaterialTheme.colorScheme.surface,
     titleColor: Color = LocalSettingsTileColors.current?.titleColor
       ?: MaterialTheme.colorScheme.primary,
-    iconColor: Color = LocalSettingsTileColors.current?.iconColor ?: titleColor,
-    subtitleColor: Color = LocalSettingsTileColors.current?.subtitleColor ?: titleColor,
+    iconColor: Color = LocalSettingsTileColors.current?.iconColor ?: MaterialTheme.colorScheme.onSurface,
+    subtitleColor: Color = LocalSettingsTileColors.current?.subtitleColor ?: MaterialTheme.colorScheme.onSurface,
     actionColor: Color = LocalSettingsTileColors.current?.actionColor
       ?: MaterialTheme.colorScheme.primary,
     disabledTitleColor: Color = titleColor.copy(alpha = DisabledAlpha),

ui-tiles-extended/src/commonMain/kotlin/com/alorma/compose/settings/ui/SettingsSegmented.kt

@@ -1,5 +1,6 @@
 package com.alorma.compose.settings.ui
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.MaterialTheme
@@ -10,10 +11,12 @@ import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.alorma.compose.settings.ui.base.internal.LocalSettingsGroupEnabled
 import com.alorma.compose.settings.ui.base.internal.SettingsTileColors
 import com.alorma.compose.settings.ui.base.internal.SettingsTileDefaults
@@ -40,12 +43,28 @@ fun <T> SettingsSegmented(
   buttonColors: SegmentedButtonColors = SegmentedButtonDefaults.colors(
     activeContainerColor = colors.actionColor(enabled).copy(alpha = 0.4f)
       .compositeOver(MaterialTheme.colorScheme.surfaceContainerLowest),
+    inactiveContainerColor = colors.containerColor,
+
+    activeContentColor = colors.subtitleColor(enabled),
+    inactiveContentColor = colors.subtitleColor(enabled),
+
+    activeBorderColor = colors.subtitleColor,
+
+    inactiveBorderColor = colors.subtitleColor,
+
     disabledActiveContainerColor = colors.actionColor(enabled).copy(alpha = 0.12f)
       .compositeOver(MaterialTheme.colorScheme.surfaceContainerLowest),
+    disabledInactiveContainerColor = MaterialTheme.colorScheme.surface
+      .copy(alpha = SettingsTileDefaults.DisabledAlpha)
+      .compositeOver(colors.containerColor),
+
+    disabledActiveContentColor = colors.subtitleColor(enabled),
+    disabledInactiveContentColor = colors.subtitleColor(enabled),
+
+    disabledActiveBorderColor = colors.subtitleColor(enabled),
+    disabledInactiveBorderColor = colors.subtitleColor(enabled),
   ),
-  buttonIcon: @Composable (Boolean) -> Unit = { selected ->
-    SegmentedButtonDefaults.Icon(selected)
-  },
+  buttonIcon: @Composable (Boolean) -> Unit = { selected -> SegmentedButtonDefaults.Icon(selected) },
   subtitle: @Composable (() -> Unit)? = null,
   icon: @Composable (() -> Unit)? = null,
   tonalElevation: Dp = SettingsTileDefaults.Elevation,
@@ -56,7 +75,9 @@ fun <T> SettingsSegmented(
     enabled = enabled,
     title = title,
     subtitle = {
-      Column {
+      Column(
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+      ) {
         subtitle?.invoke()
         SingleChoiceSegmentedButtonRow(
           modifier = Modifier.fillMaxWidth(),

ui-tiles-extended/src/commonMain/kotlin/com/alorma/compose/settings/ui/SettingsSlider.kt

@@ -1,9 +1,8 @@
 package com.alorma.compose.settings.ui
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ListItemColors
-import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderColors
 import androidx.compose.material3.SliderDefaults
@@ -12,7 +11,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.alorma.compose.settings.ui.base.internal.LocalSettingsGroupEnabled
-import com.alorma.compose.settings.ui.base.internal.LocalSettingsTileColors
 import com.alorma.compose.settings.ui.base.internal.SettingsTileColors
 import com.alorma.compose.settings.ui.base.internal.SettingsTileDefaults
 import com.alorma.compose.settings.ui.base.internal.SettingsTileScaffold
@@ -30,8 +28,12 @@ fun SettingsSlider(
   valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
   steps: Int = 0,
   onValueChangeFinished: (() -> Unit)? = null,
-  sliderColors: SliderColors = SliderDefaults.colors(),
   colors: SettingsTileColors = SettingsTileDefaults.colors(),
+  sliderColors: SliderColors = SliderDefaults.colors(
+    thumbColor = colors.actionColor(enabled),
+    activeTrackColor = colors.actionColor(enabled),
+    inactiveTrackColor = colors.actionColor(enabled).copy(alpha = 0.12f),
+  ),
   tonalElevation: Dp = SettingsTileDefaults.Elevation,
   shadowElevation: Dp = SettingsTileDefaults.Elevation,
 ) {
@@ -40,7 +42,9 @@ fun SettingsSlider(
     enabled = enabled,
     title = title,
     subtitle = {
-      Column {
+      Column(
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+      ) {
         subtitle?.invoke()
         Slider(
           value = value,