FR(Theming):Typography override in theme-overrides
- 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
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
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