[mdc-card] Text color is not being set based on current theme color palette

Bug report

Text color is not being set based on current theme color palette

Steps to reproduce

1. Create a custom theme with different values for surface and on-surface colors. In my case i’m creating a dark theme where surface is black and on-surface is white.
2. Compile your scss styles.
3. Check card component styles.

Actual behavior

Text color is set to black instead of white.

Expected behavior

Text color should be white since that is the value that $on-surface has.

Additional context

By looking at the base mdc-card styles i see that background-color is being set to surface but color is inherited:

.mdc-card {
  border-radius: 4px;
  background-color: #212121;
  /* @alternate */
  background-color: var(--mdc-theme-surface, #212121);
  /* @alternate */
  position: relative;
  /* @alternate */
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

Possible solution

@use "@material/theme";

.mdc-card {
 color: theme.$on-surface;
}

[asyncLiz]

This makes sense to us. Adding it to our backlog to add on-surface foreground color to cards. We’ll do some investigating to make sure this doesn’t break anything.

[asyncLiz]

I’ll bring this up with the team this week!