angular / angular/components

feat(mat-card): add title-text-color to card-overrides

Open
#31,080 1 comment 2 reactions 0 assignees View on GitHub
feature P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

It doesn't exactly make sense to allow subtitle-text-color in the override but not title...

Wouldn't we want the title to match the rest of the custom M3 theming?

I'd like to propose adding `title-text-color: color` to the mat.card-overrides

you end up with something like this otherwise:

![Image](https://github.com/user-attachments/assets/8a2350af-acd3-40ea-ac6e-1e51fcaf49dc)

### Use Case

```
@include mat.card-overrides((
title-text-color: var(--mat-sys-on-secondary),
subtitle-text-color: var(--mat-sys-on-secondary),
outlined-container-color: var(--mat-sys-secondary),
));
```
maybe even just a color option:

```
@include mat.card-overrides((
text-color: var(--mat-sys-on-secondary),
outlined-container-color: var(--mat-sys-secondary),
));
```

so that it all matches like this:

![Image](https://github.com/user-attachments/assets/248f6caa-0ebf-4e5d-9dbf-b4f2f1a4fbd4)

Contributor guide

Open the contributing guide

Research direction

Locate the mat.card-overrides definition and the existing subtitle-text-color entry, then inspect how card title styles consume theme tokens. The issue leaves open whether to add title-text-color or a shared text-color option; done when the chosen override makes the title and subtitle colors match in the shown use case.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.