angular / angular/components

FR(Theming):Typography override in theme-overrides

Open
#31,920 0 comments 3 reactions 0 assignees View on GitHub
area: theming feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

when using `mat.theme-overrides((` I notice that the css variables created for typography require a one line definition but also each property has to be defined separately.

### Reproduction

```
@include mat.theme-overrides((
body-small: 400 1.125rem/1.6875rem Inter,
))
```
results in css variables

Image

Image

as you can see the one line definition gets replaced by my override but I have to do a one by one property replacement so that other components using body-small are not using the theme's default values.

```
@include mat.theme-overrides((
body-small: 400 1.125rem/1.6875rem Inter,
body-small-size: 1.125rem,
body-small-font: 'Inter Tight',
body-small-line-height: 1.6875rem,
body-small-weight: 400,
))
```

### Expected Behavior

It would be nice if we can just use `body-small: 400 1.125rem/1.6875rem Inter,` and that would also update the separate properties internally in the theme if is possible to extract those values (which I think it is).

### Actual Behavior

I feel like we have to over-define the same properties:

```
@include mat.theme-overrides((
body-small: 400 1.125rem/1.6875rem Inter,
body-small-size: 1.125rem,
body-small-font: 'Inter Tight',
body-small-line-height: 1.6875rem,
body-small-weight: 400,
))
```

### Environment

- Angular: 20.3.2
- CDK/Material: 20.2.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Contributor guide

Open the contributing guide

Research direction

Start by tracing the implementation of mat.theme-overrides and the typography variable generation described in the reproduction. Use the body-small example to check whether a shorthand override can update its separate properties without manual duplication. Done means the shorthand produces the expected typography variables and existing component consumers use the overridden values.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.