Skip to content

bug(DIALOG): dialog's container-color does not follow Material 3 design specs #30536

Open
@shhdharmen

Description

@shhdharmen

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

As per Material 3 guidelines, container-color should use value surface-container-high token, but it's using value surface token.

We can override it by using dialog-overrides mixin like below:

@include mat.dialog-overrides((
  container-color: var(--mat-sys-surface-container-high),
));

But, it should be the default behaviour as per Material 3 specs.

Reproduction

Not needed

Expected Behavior

As per Material 3 guidelines, container-color should use value surface-container-high token.

Actual Behavior

Dialog's container-color is using value surface token.

Environment

  • Angular: 19
  • CDK/Material: 19
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2The issue is important to a large percentage of users, with a workaroundarea: material/dialog

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions