What's the recommended way to deal with apha on text in material 3 that will be easier to migrate later if there's an official way ?

Do you mean deal with alpha in the text color?

Yes, providing the Contentalpha does not work. and it's not documented if it will be added In the same way or something else or not at all

Yes, providing the Contentalpha does not work

Is this in a specific Material3 component or just

Text

?

I mostly only use it for Text with the normal

CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium)

Can you share a code snippet please?

A simple

CompositionLocalProvider(LocalContentColor provides TextContentAlpha.medium) {
            Text(subtitle)
        }

But it's normal I guess. Material Text have:

val textColor = color.takeOrElse {
        style.color.takeOrElse {
            LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
        }
    }

but Material 3 text have

val textColor = color.takeOrElse {
        style.color.takeOrElse {
            LocalContentColor.current
        }
    }

So I guess there's not LocalContentAlpha support at all in material 3. Just wondering if it will be added in the same way or in a new way. If same way I can provide a localcolor and apply the alpha easy to search and replace. If not maybe I need to directly work with typography and TextStyles to supply colors with alpha directly.

cc @Nick Rout @nickbutcher

In M3 I'm using

MatetialTheme.colorScheme.onSurfaceVariant

(which is actually opaque) for medium alpha text. But indeed there doesn't seem to be a good way to set disabled alpha.

@Chris Sinco [G] Yes that what I mostly currently do I use

object ContentColorAlpha {
    val high: Color
        @Composable
        get() = LocalContentColor.current.copy(alpha = ContentAlpha.high)
    val medium: Color
        @Composable
        get() = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
    val disabled: Color
        @Composable
        get() = LocalContentColor.current.copy(alpha = ContentAlpha.disabled)
}

With

CompositionLocalProvider(LocalContentColor provides ContentColorAlpha.medium) {

The advantage is that it works also on other components so I can apply that on a row and it applies to all inside it and it works whatever the current color is. The inconvenient is that it does not work for components with forced color and I must add it there too. I hope you can have some feedback on this, maybe I need to open an issue? @Albert Chang The problem of onSurfaceVariant is that it's only one color for one case, and some non dynamictonal theme may use something that does not work as this use case :(

So I talked to the teams internally and it seems with Material3 the design team decided that using opacity in color for Text is NOT something that will be carried forward. That is why LocalContentAlpha is no longer there. I realize Material3 documentation for both designers and developers haven’t made this clear, so I let the team know that we should note this in our docs going forward of this change.

Thanks for the feedback. Alpha is not only used for lower emphasis but also for the disabled indicator. If alpha is not supposed to be used at all it would be nice to have some docs about colors and custom themes (not tonal) for lower emphasis and disabled state. Including how to derivate those colors from a source color. I'll open an issue to discuss this part.

To be clear, alpha is still used for disabled state and the value is defined on a per-component basis. See here.

Ok thanks for confirming. I'm still a little lost with M3 color system. Like tonal elevation using the primary color but the calculation is not really exposed for custom components. Like if primaryvariant and alpha are used for different emphasis there are color variations between them no? Or should we apply the alpha over the low emphasis for consistency? For example a form with some low emphasis text that have everything disabled when submit that can take some time. What color to apply ?

There is no "low emphasis" even in M2. In M3 only disabled state uses alpha.

In M2 it's

CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium)

no ?

Yeah that's medium emphasis.

Ok so yes sorry I mixed the term talking about medium emphasis then.

In M2 disabled state doesn't differentiate between emphasises. I'm not sure if there's an official guideline for this in M3.

Hum 😞 What would you do? Implementation is different when switching colors and applying alpha depending on state.

I would say using a consistent disabled color is simpler and provides higher contrast (so better a11y).

Ok thanks again. Easier implementation and maintenance so I'll go this road.