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

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.

Không có tệp hoặc điểm bắt đầu của bài kiểm thử nào được nêu tên. Hãy bắt đầu bằng việc kiểm tra các Sass override mixin hiện có, bao gồm mat.snack-bar-overrides, cùng với quy ước đặt tên CSS custom-property của snack-bar được mô tả ở đây. Công việc được xem là hoàn tất khi có một API typesafe đã được thống nhất để tạo tên biến token và có coverage cho các tên component hoặc token không hợp lệ.