angular / angular/components

feat(theming): Mixins for reading component style tokens

Đang mở
#30,083 0 bình luận 8 reaction 0 người được giao Xem trên GitHub
area: material/core feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Issue không nêu tên các tệp hoặc bài kiểm thử. Hãy bắt đầu bằng cách đọc các mixin `mat.-overrides` hiện có và so sánh các token của chúng với API `mat.-get` được đề xuất. Công việc được xem là hoàn tất khi phạm vi và cách đặt tên mixin mong muốn đã được xác định, đồng thời người dùng có thể đọc các giá trị token theme của component để tạo các style tùy chỉnh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, sass, typescript
Lĩnh vực
design, frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
30/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.