angular / angular/components

bug(material/theming): get-contrast-color-from-palette doesn't work with pre-defined hue names

Đang mở
#28,016 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: theming 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ả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Using `get-contrast-color-from-palette` is convenient and explicit as it gives you the contrast color without having to add `-contrast` to the hue value. It seems to me as the right thing to choose, even though the theming documentation currently doesn't mention this function.

However the behavior can be confusing because hues such as `default`, `lighter` or `darker` are added only to the outer map, not the inner contrast map, when calling `define-palette`. Therefore you can only use it with hues that are defined in the contrast-palette from the beginning (such as 500).

There is an easy workaround but I also think that it should be fairly easy to add `default`, `lighter`, `darker` etc. to the inner contrast map in `mat.define-palette`.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-egs21k?file=src%2Fstyles.scss
Steps to reproduce:
1. Use `mat.get-contrast-color-from-palette` with a pre-defined hue value such as `default` or `lighter`

### Expected Behavior

I expect `mat.get-contrast-color-from-palette($palette, default)` to return the same color as `mat-get-color-from-palette($palette, default-contrast)` after defining a palette using `mat.define-palette`.

### Actual Behavior

`mat.get-contrast-color-from-palette` looks for a hue called `default` in the inner contrast map but that doesn't get added to the inner contrast map when calling `mat.define-palette`.

### Environment

- Angular: 16.2.6
- CDK/Material: 16.2.9
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

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

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

Hướng nghiên cứu

Bắt đầu với mat.define-palette và get-contrast-color-from-palette, sau đó chạy bản tái hiện StackBlitz được cung cấp bằng cách sử dụng sắc độ mặc định hoặc sáng hơn. Được xem là hoàn tất khi phép tra cứu độ tương phản trả về cùng màu với giá trị default-contrast hoặc lighter-contrast tương ứng, đồng thời có độ bao phủ cho hành vi bị ảnh hưởng.

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
Lĩnh vực
design, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
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
45/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.