Jetpack Compose 中 +(...)% 颜色的表面

Question

在官方 Material Design 3 资源（例如 Figma 设计工具包）中，有很多参考颜色称为“+x 处的表面”。这些颜色是表面颜色混合x%的原色。

现在我的问题是：

如何在 Jetpack Compose 中实现“Surface at +x”颜色？ MaterialTheme.colorScheme 对象没有文档，也没有 属性 .

Figma 设计套件参考：

Answer 1

Surface 默认使用 MaterialTheme.colorScheme.surface，他们还有一个新的 tonalElevation 属性，您可以阅读 here。

其要点是增加色调高度会自动改变颜色，自己试试看：

Surface(tonalElevation = 5.dp) {
    // content
}

Answer 2

如果有人需要在 non-compose 代码中获取它，请使用 SurfaceColors enums:

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

可以找到文档here