A modern programming language that makes developers happier.

kotlinlang

focused.png

selected.png

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`.

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

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

`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.

image.png

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

&gt;  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.

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

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 :sweat_smile: ).

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.