IssueTracker

Jetpack Compose version: 1.4.0-beta01

Jetpack Compose component used:

• OutlinedCard|

Android Studio Build:

Android Studio Flamingo | 2022.2.1 Build #AI-222.4459.24.2221.9862592, built on March 31, 2023 Runtime version: 17.0.6+0-17.0.6b802.4-9586694 aarch64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. macOS 12.6.5 Kotlin version: 1.8.0

The Outlined Card Color appears not to be rendered correctly. It seems NOT to be using opacity for the outline. If you look at the examples in the link above, you will see that the outline color is not heavy.

    OutlinedCard(
        enabled = true,
        onClick = { Log.d("HERE", "Card") },
        modifier = Modifier
            .padding(bottom = 8.dp),
        shape = MaterialTheme.shapes.medium,
//        border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(IntrinsicSize.Max)
                .padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            MapThumbnail(maps.elementAt(2).imageResourceId)
            Spacer(modifier = Modifier.width(MaterialTheme.spacing.medium))
            MapName(maps.first().name)
        }
    }

The image attached to this issue includes light and dark mode screenshots to illustrate the issue with the BorderStroke and a comparison with M3 design doc screen from the above link.

It seems the component isn't applying an alpha value to the outline color for outlined cards. Specs images are not matching the component.