Is there any guidance available for how large selected items should be colored in M3? From what I ca...

# compose

[Zoltan Demant]

Is there any guidance available for how large selected items should be colored in M3? From what I can tell, secondaryContainer is the go-to for chips, navBar, drawerItems, etc; all of these being smaller elements, I feel like bigger ones should use something different? Screenshots show focused card (using d-pad), and the same thing with secondaryContainer.

[ascii]

Perhaps the new tone-based surface colors are also meant for this?
https://material.io/blog/tone-based-surface-color-m3

[ascii]

Personally, for the "more colorful" theme options (user choice), I overlay surfaceTint with varying opacities, e.g. .04 or .12

[Zoltan Demant]

SurfaceContainerHighest looks similar to the focused state I screenshotted above, but Im not sure if thats the intended use-case? If the absolute elevation is high enough, the card will have this color by default, I think.

As for using surfaceTint, which color do you overlay it over? surfaceTint.copy(alpha = 0.12f).compositeOver(surfaceContainer) looks pretty nice. When using such a strong color as I was in screenshot #2, I just feel like the other colors become washed out and lose their purpose.

[Zoltan Demant]

image.png

[ascii]

I haven't overriden surfaceContainer in my theme yet, so I just use surface

[ascii]

If the absolute elevation is high enough, the card will have this color by default, I think.

From what I've seen so far, I don't think any M3 component uses these new colors yet. Not NavBar, and not even Card.

[ascii]

https://m3.material.io/theme-builder doesn't generate them either

[Zoltan Demant]

I think this looks good, so Ill use it! Thanks for pointing me to it. As for surfaceContainer, Im just using it so that surface != background (its a separate issue 😅 ).

You can generate the themes in reverse by setting the colors/wallpaper, then extracting the colors from the generated dynamicColorScheme, probably not necessary unless you really really want those additional surface colors.