Surface at +(...)% colors in jetpack compose

Question

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.

Figma Design Kit reference:

Answer 1

Update September 2022

With Material 3, if for some reason you need the elevate color surface but you can't use the Surface, now you can use directly:

MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp)

Answer 2

In case anyone need to get it in a non-compose code, use SurfaceColors enums:

int colorSurface1 = SurfaceColors.SURFACE_2.getColor(context);

Documentation can be found here

Answer 3

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
}