A countdown button's label stays readable before the fill reaches it, like Vela's Start

gearslip/src/main/java/app/seb3thehacker/gearslip/car/TemplateParts.kt

@@ -55,6 +55,8 @@ import androidx.compose.material3.RadioButton
 import androidx.compose.material3.Switch
 import androidx.core.graphics.drawable.toBitmap
 import androidx.core.graphics.drawable.IconCompat
+import androidx.compose.ui.graphics.drawscope.clipRect
+import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.pointer.PointerEventPass
@@ -470,16 +472,30 @@ internal fun AutoStartButton(action: Action, modifier: Modifier = Modifier) {
                         .background(background),
                 )
             }
-            androidx.compose.foundation.layout.Box(
+            // The label twice, each clipped to its own side of the fill: dark on the filled part
-                Modifier.fillMaxWidth().padding(horizontal = 20.dp, vertical = 16.dp),
+            // and light on the empty track. One colour for both was unreadable on the track until
-                contentAlignment = Alignment.Center,
+            // the fill reached it (Vela's Start).
-            ) {
+            val label = action.title.text().ifEmpty { stringResource(R.string.template_start) }
-                if (hasGlyph) CarGlyph(action.icon, Modifier.size(24.dp).align(Alignment.CenterStart))
+            val trackContent = MaterialTheme.colorScheme.onSurface
-                Text(
+            for (filled in listOf(false, true)) {
-                    action.title.text().ifEmpty { stringResource(R.string.template_start) },
+                androidx.compose.foundation.layout.Box(
-                    style = ChromeType.title,
+                    Modifier
-                    maxLines = 1,
+                        .fillMaxWidth()
-                )
+                        .drawWithContent {
+                            val edge = size.width * fraction
+                            if (filled) clipRect(right = edge) { this@drawWithContent.drawContent() }
+                            else clipRect(left = edge) { this@drawWithContent.drawContent() }
+                        }
+                        .padding(horizontal = 20.dp, vertical = 16.dp),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    androidx.compose.runtime.CompositionLocalProvider(
+                        LocalContentColor provides if (filled) content else trackContent,
+                    ) {
+                        if (hasGlyph) CarGlyph(action.icon, Modifier.size(24.dp).align(Alignment.CenterStart))
+                        Text(label, style = ChromeType.title, maxLines = 1, color = LocalContentColor.current)
+                    }
+                }
             }
         }
     }