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

Viewed 513

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: Colors in the Figma Material Design 3 UI Kit

3 Answers

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
}

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

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)
Related