KOA-6017 Update Switch design to MD3 (#1602)

* Switched Switch to MD3

* Updated View switch to MD3

* Updated the screenshots

* Updated snapshots for 'themed'

* Updated snapshots for 'dm'

* Updated snapshots for 'rtl'

* Updated snapshots for 'default'

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Backpack/src/main/java/net/skyscanner/backpack/toggle/BpkSwitch.kt

@@ -20,64 +20,85 @@ package net.skyscanner.backpack.toggle
 
 import android.content.Context
 import android.content.res.ColorStateList
+import android.graphics.Color
 import android.util.AttributeSet
-import androidx.appcompat.widget.SwitchCompat
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.appcompat.view.ContextThemeWrapper
+import com.google.android.material.materialswitch.MaterialSwitch
 import net.skyscanner.backpack.R
+import net.skyscanner.backpack.util.colorStateList
 import net.skyscanner.backpack.util.createContextThemeWrapper
 import net.skyscanner.backpack.util.use
 
-private fun wrapContext(context: Context, attrs: AttributeSet?): Context {
-    val withBaseStyle = createContextThemeWrapper(context, attrs, androidx.appcompat.R.attr.switchStyle)
-    return createContextThemeWrapper(withBaseStyle, attrs, R.attr.bpkSwitchStyle)
-}
-
 /**
  * BpkSwitch allow users to toggle between two states, on or off.
  *
- * This class extends [SwitchCompat] directly and thus follows the same interface and design,
- * with the exception of [SwitchCompat.getTrackTintList] and [SwitchCompat.getThumbTintList] that are set
+ * This class extends [MaterialSwitch] directly and thus follows the same interface and design,
+ * with the exception of [MaterialSwitch.getTrackTintList] and [MaterialSwitch.getThumbTintList] that are set
  * according to Backpack's design.
  *
- * @see SwitchCompat
+ * @see MaterialSwitch
  */
 open class BpkSwitch @JvmOverloads constructor(
     context: Context,
     attrs: AttributeSet? = null,
     defStyleAttr: Int = 0,
-) : SwitchCompat(wrapContext(context, attrs), attrs, defStyleAttr) {
+) : MaterialSwitch(
+    createContextThemeWrapper(
+        ContextThemeWrapper(context, R.style.Widget_Material3_CompoundButton_MaterialSwitch),
+        attrs,
+        R.attr.bpkSwitchStyle,
+    ),
+    attrs,
+    defStyleAttr,
+) {
 
     init {
         initialize(attrs, defStyleAttr)
     }
 
-    fun initialize(attrs: AttributeSet?, defStyleAttr: Int) {
+    private fun initialize(attrs: AttributeSet?, defStyleAttr: Int) {
         val textDisabledColor = context.getColor(R.color.bpkTextDisabled)
         val textEnabledColor = context.getColor(R.color.bpkTextPrimary)
+        val textSecondaryColor = context.getColor(R.color.bpkTextSecondary)
+        val coreAccentColor = context.getColor(R.color.bpkCoreAccent)
+        val canvasContrastColor = context.getColor(R.color.bpkCanvasContrast)
+        var primaryInverseColor = context.getColor(R.color.bpkTextPrimaryInverse)
         context.theme.obtainStyledAttributes(attrs, R.styleable.BpkSwitch, defStyleAttr, 0).use {
-            val primaryColor = context.getColor(R.color.bpkCoreAccent)
-            val checkedColor = it.getColor(R.styleable.BpkSwitch_switchPrimaryColor, primaryColor)
-
-            trackTintList = context.getColorStateList(R.color.bpkTextDisabled)
-            thumbTintList = getColorStateList(checkedColor, context.getColor(R.color.bpkTextOnDark))
+            primaryInverseColor = it.getColor(R.styleable.BpkSwitch_switchPrimaryColor, primaryInverseColor)
         }
+
+        thumbTintList = colorStateList(
+            disabledUncheckedColor = textDisabledColor,
+            disabledCheckedColor = textDisabledColor,
+            checkedColor = primaryInverseColor,
+            uncheckedColor = textSecondaryColor,
+        )
+        trackTintList = colorStateList(
+            disabledUncheckedColor = textDisabledColor,
+            disabledCheckedColor = textDisabledColor,
+            checkedColor = coreAccentColor,
+            uncheckedColor = canvasContrastColor,
+        )
+        trackDecorationDrawable = AppCompatResources.getDrawable(context, R.drawable.bpk_switch_decoration)
+        trackDecorationTintList = colorStateList(
+            disabledUncheckedColor = textDisabledColor,
+            disabledCheckedColor = textDisabledColor,
+            checkedColor = coreAccentColor,
+            uncheckedColor = textSecondaryColor,
+        )
+        thumbIconTintList = colorStateList(
+            Color.TRANSPARENT,
+            Color.TRANSPARENT,
+            Color.TRANSPARENT,
+            Color.TRANSPARENT,
+        )
+
         setTextColor(
             ColorStateList(
                 arrayOf(intArrayOf(-android.R.attr.state_enabled), intArrayOf()),
                 intArrayOf(textDisabledColor, textEnabledColor),
             ),
         )
-        switchMinWidth = resources.getDimensionPixelSize(R.dimen.bpk_switch_min_width)
     }
-
-    private fun getColorStateList(checkedColor: Int, uncheckedColor: Int) =
-        ColorStateList(
-            arrayOf(
-                intArrayOf(android.R.attr.state_checked),
-                intArrayOf(-android.R.attr.state_checked),
-            ),
-            intArrayOf(
-                checkedColor,
-                uncheckedColor,
-            ),
-        )
 }

Backpack/src/main/java/net/skyscanner/backpack/util/ColorStateList.kt

@@ -40,3 +40,19 @@ internal fun colorStateList(
     ),
     intArrayOf(disabledColor, pressedColor, focusedColor, activatedColor, color),
 )
+
+internal fun colorStateList(
+    @ColorInt disabledUncheckedColor: Int,
+    @ColorInt disabledCheckedColor: Int,
+    @ColorInt checkedColor: Int,
+    @ColorInt uncheckedColor: Int,
+): ColorStateList =
+    ColorStateList(
+        arrayOf(
+            intArrayOf(-android.R.attr.state_enabled, -android.R.attr.state_checked),
+            intArrayOf(-android.R.attr.state_enabled, android.R.attr.state_checked),
+            intArrayOf(android.R.attr.state_checked),
+            intArrayOf(),
+        ),
+        intArrayOf(disabledUncheckedColor, disabledCheckedColor, checkedColor, uncheckedColor),
+    )

Backpack/src/main/res/drawable/bpk_switch_decoration.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="@dimen/bpkBorderRadiusXl" />
+    <solid android:color="#00000000" />
+    <stroke
+        android:width="2dp"
+        android:color="#000000" />
+</shape>

backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/switch/BpkSwitch.kt

@@ -23,16 +23,17 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.selection.toggleable
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.LocalMinimumTouchTargetEnforcement
-import androidx.compose.material.Switch
-import androidx.compose.material.SwitchDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalMinimumTouchTargetEnforcement
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.invisibleToUser
 import androidx.compose.ui.semantics.semantics
@@ -97,7 +98,7 @@ fun BpkSwitch(
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class, ExperimentalComposeUiApi::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
 @Composable
 private fun BpkSwitchImpl(
     checked: Boolean,
@@ -116,16 +117,22 @@ private fun BpkSwitchImpl(
             enabled = enabled,
             interactionSource = interactionSource,
             colors = SwitchDefaults.colors(
-                checkedThumbColor = BpkTheme.colors.coreAccent,
-                checkedTrackColor = BpkTheme.colors.textDisabled,
-                checkedTrackAlpha = BpkTheme.colors.textDisabled.alpha,
-                uncheckedThumbColor = BpkTheme.colors.textOnDark,
-                uncheckedTrackColor = BpkTheme.colors.textDisabled,
-                uncheckedTrackAlpha = BpkTheme.colors.textDisabled.alpha,
-                disabledCheckedThumbColor = BpkTheme.colors.coreAccent,
+                checkedThumbColor = BpkTheme.colors.textPrimaryInverse,
+                checkedTrackColor = BpkTheme.colors.coreAccent,
+                checkedBorderColor = BpkTheme.colors.coreAccent,
+                checkedIconColor = Color.Transparent,
+                uncheckedThumbColor = BpkTheme.colors.textSecondary,
+                uncheckedTrackColor = BpkTheme.colors.canvasContrast,
+                uncheckedBorderColor = BpkTheme.colors.textSecondary,
+                uncheckedIconColor = Color.Transparent,
+                disabledCheckedThumbColor = BpkTheme.colors.textDisabled,
                 disabledCheckedTrackColor = BpkTheme.colors.textDisabled,
-                disabledUncheckedThumbColor = BpkTheme.colors.textOnDark,
+                disabledCheckedBorderColor = BpkTheme.colors.textDisabled,
+                disabledCheckedIconColor = Color.Transparent,
+                disabledUncheckedThumbColor = BpkTheme.colors.textDisabled,
                 disabledUncheckedTrackColor = BpkTheme.colors.textDisabled,
+                disabledUncheckedBorderColor = BpkTheme.colors.textDisabled,
+                disabledUncheckedIconColor = Color.Transparent,
             ),
         )
     }