bug(material/theming): get-contrast-color-from-palette doesn't work with pre-defined hue names
- 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
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