feat(theming): Add a typesafe like API to get theming tokens CSS var names
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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.
コントリビューションガイド
調査の方向性
ファイルもテストのエントリーポイントも指定されていません。まず、mat.snack-bar-overrides を含む既存の Sass override mixin と、ここで説明されている snack-bar の CSS custom-property の命名を調べてください。完了の条件は、トークン変数名を生成するための合意済みの typesafe API と、無効なコンポーネント名またはトークン名に対するカバレッジです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, sass
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 30/100