TP-67560 | Material 3 toggle button (#460)

navi-uitron/src/main/java/com/navi/uitron/model/ui/SwitchProperty.kt

@@ -10,7 +10,7 @@ package com.navi.uitron.model.ui
 data class SwitchProperty(
     var isChecked: Boolean? = null,
     var enabled: Boolean? = null,
-    var switchColors: SwitchColors,
+    var switchColors: SwitchColors? = null,
 ) : BaseProperty() {
     override fun copyNonNullFrom(property: BaseProperty?) {
         super.copyNonNullFrom(property)
@@ -24,12 +24,28 @@ data class SwitchProperty(
 data class SwitchColors(
     val checkedThumbColor: String? = null,
     val checkedTrackColor: String? = null,
-    val checkedTrackAlpha: Float? = null,
+    val checkedBorderColor: String? = null,
+    val checkedIconColor: String? = null,
     val uncheckedThumbColor: String? = null,
     val uncheckedTrackColor: String? = null,
-    val uncheckedTrackAlpha: Float? = null,
+    val uncheckedBorderColor: String? = null,
+    val uncheckedIconColor: String? = null,
     val disabledCheckedThumbColor: String? = null,
     val disabledCheckedTrackColor: String? = null,
+    val disabledCheckedBorderColor: String? = null,
+    val disabledCheckedIconColor: String? = null,
     val disabledUncheckedThumbColor: String? = null,
-    val disabledUncheckedTrackColor: String? = null
+    val disabledUncheckedTrackColor: String? = null,
+    val checkedTrackAlpha: Float? = null,
+    val uncheckedTrackAlpha: Float? = null,
+    val disabledUncheckedBorderColor: String? = null,
+    val disabledUncheckedIconColor: String? = null,
+    val disabledCheckedThumbAlpha: Float? = null,
+    val disabledCheckedTrackAlpha: Float? = null,
+    val disabledCheckedBorderAlpha: Float? = null,
+    val disabledCheckedIconAlpha: Float? = null,
+    val disabledUncheckedThumbAlpha: Float? = null,
+    val disabledUncheckedTrackAlpha: Float? = null,
+    val disabledUncheckedBorderAlpha: Float? = null,
+    val disabledUncheckedIconAlpha: Float? = null,
 )

navi-uitron/src/main/java/com/navi/uitron/render/SwitchRenderer.kt

@@ -8,10 +8,9 @@
 package com.navi.uitron.render
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Switch
-import androidx.compose.material.SwitchDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.mutableStateOf
@@ -19,12 +18,18 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.LocalView
 import com.navi.uitron.model.data.SwitchData
 import com.navi.uitron.model.data.UiTronData
+import com.navi.uitron.model.ui.SwitchColors
 import com.navi.uitron.model.ui.SwitchProperty
+import com.navi.uitron.utils.CHECKED_SWITCH_TRACK_OPACITY
+import com.navi.uitron.utils.DISABLED_SWITCH_TRACK_OPACITY
+import com.navi.uitron.utils.FULL_OPACITY
+import com.navi.uitron.utils.UNCHECKED_SWITCH_TRACK_OPACITY
 import com.navi.uitron.utils.alfredMaskSensitiveComposable
 import com.navi.uitron.utils.hexToComposeColor
 import com.navi.uitron.utils.orFalse
@@ -86,43 +91,101 @@ class SwitchRenderer : Renderer<SwitchProperty> {
                 enabled = property.enabled ?: true,
                 interactionSource = remember { MutableInteractionSource() },
                 colors =
-                    SwitchDefaults.colors(
-                        checkedThumbColor =
-                            property.switchColors.checkedThumbColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.secondaryVariant,
-                        checkedTrackColor =
-                            property.switchColors.checkedTrackColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.secondaryVariant,
-                        checkedTrackAlpha = property.switchColors.checkedTrackAlpha ?: 0.54f,
-                        uncheckedThumbColor =
-                            property.switchColors.uncheckedThumbColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.surface,
-                        uncheckedTrackColor =
-                            property.switchColors.uncheckedTrackColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.onSurface,
-                        uncheckedTrackAlpha = property.switchColors.uncheckedTrackAlpha ?: 0.38f,
-                        disabledCheckedThumbColor =
-                            property.switchColors.disabledCheckedThumbColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.secondaryVariant
-                                    .copy(alpha = ContentAlpha.disabled)
-                                    .compositeOver(MaterialTheme.colors.surface),
-                        disabledCheckedTrackColor =
-                            property.switchColors.disabledCheckedTrackColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.secondaryVariant
-                                    .copy(alpha = ContentAlpha.disabled)
-                                    .compositeOver(MaterialTheme.colors.surface),
-                        disabledUncheckedThumbColor =
-                            property.switchColors.disabledUncheckedThumbColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.surface
-                                    .copy(alpha = ContentAlpha.disabled)
-                                    .compositeOver(MaterialTheme.colors.surface),
-                        disabledUncheckedTrackColor =
-                            property.switchColors.disabledUncheckedTrackColor?.hexToComposeColor
-                                ?: MaterialTheme.colors.onSurface
-                                    .copy(alpha = ContentAlpha.disabled)
-                                    .compositeOver(MaterialTheme.colors.surface),
-                    )
+                    property.switchColors?.let { getSwitchColors(it) } ?: SwitchDefaults.colors()
             )
         }
     }
+
+    @Composable
+    private fun getSwitchColors(switchColors: SwitchColors) =
+        SwitchDefaults.colors(
+            checkedThumbColor =
+                switchColors.checkedThumbColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.onPrimary,
+            checkedTrackColor =
+                switchColors.checkedTrackColor
+                    ?.hexToComposeColor
+                    ?.copy(alpha = switchColors.checkedTrackAlpha ?: CHECKED_SWITCH_TRACK_OPACITY)
+                    ?: MaterialTheme.colorScheme.primary,
+            checkedBorderColor =
+                switchColors.checkedBorderColor?.hexToComposeColor ?: Color.Transparent,
+            checkedIconColor =
+                switchColors.checkedIconColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.onPrimaryContainer,
+            uncheckedThumbColor =
+                switchColors.uncheckedThumbColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.outline,
+            uncheckedTrackColor =
+                switchColors.uncheckedTrackColor
+                    ?.hexToComposeColor
+                    ?.copy(
+                        alpha = switchColors.uncheckedTrackAlpha ?: UNCHECKED_SWITCH_TRACK_OPACITY
+                    ) ?: MaterialTheme.colorScheme.surfaceVariant,
+            uncheckedBorderColor =
+                switchColors.uncheckedBorderColor?.hexToComposeColor ?: Color.Transparent,
+            uncheckedIconColor =
+                switchColors.uncheckedIconColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.surfaceVariant,
+            disabledCheckedThumbColor =
+                switchColors.disabledCheckedThumbColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.surface
+                        .copy(alpha = switchColors.disabledCheckedThumbAlpha ?: FULL_OPACITY)
+                        .compositeOver(MaterialTheme.colorScheme.surface),
+            disabledCheckedTrackColor =
+                switchColors.disabledCheckedTrackColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.surface
+                        .copy(
+                            alpha =
+                                switchColors.disabledCheckedTrackAlpha
+                                    ?: DISABLED_SWITCH_TRACK_OPACITY
+                        )
+                        .compositeOver(MaterialTheme.colorScheme.onSurface),
+            disabledCheckedBorderColor =
+                switchColors.disabledCheckedBorderColor?.hexToComposeColor ?: Color.Transparent,
+            disabledCheckedIconColor =
+                switchColors.disabledCheckedIconColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.surface
+                        .copy(
+                            alpha =
+                                switchColors.disabledCheckedIconAlpha
+                                    ?: UNCHECKED_SWITCH_TRACK_OPACITY
+                        )
+                        .compositeOver(MaterialTheme.colorScheme.onSurface),
+            disabledUncheckedThumbColor =
+                switchColors.disabledUncheckedThumbColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.onSurface
+                        .copy(
+                            alpha =
+                                switchColors.disabledUncheckedThumbAlpha
+                                    ?: UNCHECKED_SWITCH_TRACK_OPACITY
+                        )
+                        .compositeOver(MaterialTheme.colorScheme.surface),
+            disabledUncheckedTrackColor =
+                switchColors.disabledUncheckedTrackColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.surfaceVariant
+                        .copy(
+                            alpha =
+                                switchColors.disabledUncheckedTrackAlpha
+                                    ?: DISABLED_SWITCH_TRACK_OPACITY
+                        )
+                        .compositeOver(MaterialTheme.colorScheme.surface),
+            disabledUncheckedBorderColor =
+                switchColors.disabledUncheckedBorderColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.onSurface
+                        .copy(
+                            alpha =
+                                switchColors.disabledUncheckedBorderAlpha
+                                    ?: DISABLED_SWITCH_TRACK_OPACITY
+                        )
+                        .compositeOver(MaterialTheme.colorScheme.surface),
+            disabledUncheckedIconColor =
+                switchColors.disabledUncheckedIconColor?.hexToComposeColor
+                    ?: MaterialTheme.colorScheme.surfaceVariant
+                        .copy(
+                            alpha =
+                                switchColors.disabledUncheckedIconAlpha
+                                    ?: UNCHECKED_SWITCH_TRACK_OPACITY
+                        )
+                        .compositeOver(MaterialTheme.colorScheme.surface)
+        )
 }

navi-uitron/src/main/java/com/navi/uitron/utils/Constants.kt

@@ -47,3 +47,7 @@ const val COLOR_ANIMATION = "ColorAnimation"
 const val INT_ANIMATION = "IntAnimation"
 const val OFFSET_ANIMATION = "OffsetAnimation"
 const val INVALID_INDEX = -1
+const val DISABLED_SWITCH_TRACK_OPACITY = 0.12f
+const val UNCHECKED_SWITCH_TRACK_OPACITY = 0.38f
+const val CHECKED_SWITCH_TRACK_OPACITY = 0.54f
+const val FULL_OPACITY = 1f