search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.14k forks source link

[card] m3 Elevated card uses wrong surface color #8203

Closed jamesrkiger closed 2 months ago

jamesrkiger commented 2 months ago

Bug report

According to the M3 specs enabled elevated card container color should be md.sys.color.surface-container-low. Currently, however, the card component seems to use md.sys.color.surface.

From material/core/tokens/m3/definitions/_md-comp-elevated-card.scss

'container-color': map.get($deps, 'md-sys-color', 'surface'),

Steps to reproduce

Not needed

Actual behavior

There is no contrast between an elevated card and the app background color.

Expected behavior

There should be contrast, according to the specs.

Screenshots

Expected: image

Actual: image

Your Environment:

   @angular/cdk: "18.2.3",
   @angular/material: "18.2.3",

Additional context

A user filed this as an issue for Angular/Components a while back, but was told this is the appropriate place to file it. I don't think they ever did that, though, so I am filing it here. Please let me know if you need any more information or if there is somewhere else I should be filing this.

asyncLiz commented 2 months ago

@andrewseguin would it be appropriate to re-open https://github.com/angular/components/issues/29163 now that Angular supplies its own card tokens?

andrewseguin commented 2 months ago

Yeah that makes sense - I re-opened the issue

asyncLiz commented 2 months ago

Thank you!