angular / angular/components

feat(theming): Mixins for reading component style tokens

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

Description

### Feature Description

Mixins to get values from a component theme that takes a token as parameter, for example:
```
p {
color: @include mat.button-get(text-label-text-color);
}
```
it would generate:
```
p {
color: var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)); // <== Actual value used for text-button
}
```

Ideally, we would have as many mixins as there are components (+core) and we could use the same tokens as the `mat.-overrides` mixins.

> The `mat.-get` mixin name is a proposal, open to suggestions.

### Use Case

I have a custom component and I want to apply the same style as a material component. I also want to make sure that they are always in sync when I change my theme.

For example, I want to have a text `

` with the same font color as my `mat-button` next to it.

For now, I need to rely on private CSS variables to do that, which is not ideal for maintainability.

Contributor guide

Open the contributing guide

Research direction

The issue does not name files or tests. Start by reading the existing `mat.-overrides` mixins and compare their tokens with the proposed `mat.-get` API. Done would mean the desired mixin scope and naming are defined and users can read component theme token values for custom styles.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, sass, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.