In official Material Design 3 resources (e.g. the Figma design kit), there have been many references to colors called "Surface at +x". These colors are the surface color mixed with x% of the primary color.
Now my question:
How can you implement the "Surface at +x" colors in Jetpack Compose? There is no documentation and no property on the MaterialTheme.colorScheme
object.
Surface uses MaterialTheme.colorScheme.surface
by default, they also have a new tonalElevation
property which you can read about here.
The gist of it is that increasing the tonal elevation changes the color automatically, try it yourself:
Surface(tonalElevation = 5.dp) {
// content
}