Keep inner radii appealing

RoundedCornerSurface.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InnerRadiusTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Column(
                        verticalArrangement = Arrangement.Center
                    ) {
                        var outerRadiusSliderValue by remember { mutableStateOf(0f) }
                        var contentInsetSliderValue by remember { mutableStateOf(0f) }

                        val maxOuterRadius = 48.dp

                        val outerRadius = maxOuterRadius * outerRadiusSliderValue
                        val contentInset = maxOuterRadius * contentInsetSliderValue

                        NestedSurfaces(
                            outerRadius = outerRadius,
                            contentInset = contentInset,
                        )
                        Slider(
                            modifier = Modifier.padding(horizontal = 48.dp),
                            value = outerRadiusSliderValue,
                            onValueChange = { outerRadiusSliderValue = it }
                        )
                        Slider(
                            modifier = Modifier.padding(horizontal = 48.dp),
                            value = contentInsetSliderValue,
                            onValueChange = { contentInsetSliderValue = it }
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun NestedSurfaces(
    outerRadius: Dp,
    contentInset: Dp,
) {
    RoundedCornerSurface(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.3f)
            .padding(48.dp),
        cornerRadius = outerRadius,
        contentInset = contentInset,
        tonalElevation = 4.dp,
        border = BorderStroke(1.dp, Color.White)
    ) {
        Column(verticalArrangement = Arrangement.Bottom) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colorScheme.primary, RoundedCornerShape(LocalInnerRadius.current)),
            )
        }
    }
}

@Composable
@NonRestartableComposable
fun RoundedCornerSurface(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    cornerRadius: Dp = 0.dp,
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    contentInset: Dp = 0.dp,
    content: @Composable () -> Unit
) {
    val innerRadius = (cornerRadius - contentInset).coerceAtLeast(0.dp)

    CompositionLocalProvider(
        LocalInnerRadius provides innerRadius
    ) {
        Surface(
            modifier = modifier,
            color = color,
            contentColor = contentColor,
            shape = RoundedCornerShape(cornerRadius),
            tonalElevation = tonalElevation,
            shadowElevation = shadowElevation,
            border = border,
        ) {
            Box(
                modifier = Modifier.padding(contentInset)
            ) {
                content()
            }
        }
    }
}

val LocalInnerRadius = compositionLocalOf { 0.dp }