diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss index e57aa97da312..67ca7a105eba 100644 --- a/src/material/card/_m2-card.scss +++ b/src/material/card/_m2-card.scss @@ -20,6 +20,7 @@ card-outlined-container-color: inspection.get-theme-color($theme, background, card), card-outlined-container-elevation: elevation.get-box-shadow(0), card-outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12), + card-title-text-color: inspection.get-theme-color($theme, foreground, text), card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text), card-filled-container-color: inspection.get-theme-color($theme, background, card), card-filled-container-elevation: elevation.get-box-shadow(0) diff --git a/src/material/card/_m3-card.scss b/src/material/card/_m3-card.scss index ec943cf682a4..6bf1d9d235d9 100644 --- a/src/material/card/_m3-card.scss +++ b/src/material/card/_m3-card.scss @@ -25,6 +25,7 @@ $prefix: (mat, card); card-outlined-container-elevation: elevation.get-box-shadow(map.get($system, level0)), card-outlined-outline-color: map.get($system, outline-variant), card-subtitle-text-color: map.get($system, on-surface), + card-title-text-color: map.get($system, on-surface), ), typography: ( card-subtitle-text-font: map.get($system, title-medium-font), diff --git a/src/material/card/card.scss b/src/material/card/card.scss index 70a993310db6..6633f93fd337 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -91,6 +91,7 @@ $fallbacks: m3-card.get-tokens(); // Add slots for custom Angular Material card tokens. .mat-mdc-card-title { + color: token-utils.slot(card-title-text-color, $fallbacks); font-family: token-utils.slot(card-title-text-font, $fallbacks); line-height: token-utils.slot(card-title-text-line-height, $fallbacks); font-size: token-utils.slot(card-title-text-size, $fallbacks);