Skip to content

Surface: first-class semantic container color API independent of elevation #5119

Description

@hristototov

Is your feature request related to a problem? Please describe.

Surface derives its background color directly from the numeric elevation prop (theme.colors.elevation.levelN), including in mode="flat" and during animated elevation changes. A component cannot express "this container is surfaceContainerLow, and elevation only controls the shadow". The only escape hatch is passing a raw color via backgroundColor, which loses the semantic intent and doesn't track the theme role. As components are modernized to MD3 (e.g. Menu in #5037, which the spec fills with surfaceContainer), each one has to invent its own workaround.

Describe the solution you'd like

A container prop on Surface accepting a semantic surface-family color role (surface, surfaceDim, surfaceBright, surfaceVariant, surfaceContainerLowestsurfaceContainerHighest, inverseSurface), resolved from the theme:

<Surface container="surfaceContainerLow" elevation={2} />

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions