angular / angular/components

feat(theming): Add a typesafe like API to get theming tokens CSS var names

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

Description

### Feature Description

Currently there are Sass mixings that allow to, in a typesafe safe way, override theming tokens:

```
mat.snack-bar-overrides(....)
```

When saying typesafe, I mean that if a token is renamed or removed, the compiler will trigger an error. There are no equivalent to generating the CSS custom properties associated with these tokens.

### Use Case

Why this could help?

I have a component to show temporary messages, much like an snack-bar, but it isn't a snack bar, but it uses the same snack bar theming, same colors, for example. So this uses currently `--mat-snack-bar-` prefixed CSS variables. The problem is that migrating from version 19 up to 21, many of these variables names were renamed from `--mdc`- to `--mat`- prefixes thankfully automatically but it missed that for snack bars, the prefixes changed from snackbar to snack-bar.

If instead of using the var named directly we had some kind of:

```
mat.token-var(snack-bar, container-color, white)
```

to generate `var(--mat-snack-bar-container-color, white)` in a typesafe way, triggering an error if a bad component or token name is used, this could have avoided the missed rename.

Contributor guide

Open the contributing guide

Research direction

No file or test entry point is named. Start by examining the existing Sass override mixins, including mat.snack-bar-overrides, and the snack-bar CSS custom-property naming described here. Done would require an agreed typesafe API for generating token variable names and coverage for invalid component or token names.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, sass
Domain
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.