How does button get ripple color based on it's contents? When using `Card` I always get the gray on...

# compose

[ursus]

How does button get ripple color based on it's contents?

When using Card I always get the gray one

I don't want to change it globally to a certain color, but do what button does, i.e. tint the ripple based on content color automatically

[cah]

Off the top of my head you can provide an indication to clickable or potentially replace the one provided by composition local within your card

[Louis Pullen-Freilich [G]]

It uses the content color provided above it / through a content color parameter, so make sure you are also setting content color

[Stylianos Gakis]

make sure you are also setting content color

Which the Surface composable does for you if you look inside of it, which is why it’s convenient to use for many cases.

[ursus]

but setting the contentColor obviously colors the content texts inside it .. I don't want that, this is what I'm after

[ursus]

so .. black text all the time, just blue ripple

can I only change the ripple color without the content color? i.e. to not have ripple be function of the contnet color?

[Stylianos Gakis]

So, another contentColor needed inside the content, under the place where the ripple is already set to blue perhaps?

[ursus]

not sure what you mean .. basically I want a blue ripple, all the time, on this sort of Card component..lets call it SelectableCard

[Louis Pullen-Freilich [G]]

Yeah, just set content color for the ripple to blue, and then for the text area, provide a different content color

[Stylianos Gakis]

Surface(blue) {
Card(clickable) {
Surface(normal color) { (or just set the composition local itself)
Text

Something like this?

[ursus]

hmm, but I need the contents to be generic ..so you're saying I should put another Surface inside just to override "back" the overriden contentColor?

[ursus]

fun SelectableCard(
    modifier: Modifier = Modifier,
    selected: Boolean,
    onClick: () -> Unit,
    content: @Composable () -> Unit
) {

this is interface I had in mind

[Stylianos Gakis]

You can make this work. You can initially take the existing localcontentcolor and save the val, then provide the blue color in a surface, and inside the lambda of that surface (after the clickable is set) provide the local content color again which you had saved only to the content.
Does that make sense? I can write a little snippet if not.

[ursus]

by provide you mean

CompositionLocalProvider(
            LocalContentColor provides MaterialTheme.colors.onPrimary
        ) {

this?