angular / angular/components

bug(core): define-palette loops on hues and contrast map

Đang mở
#28,070 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

define-palette function from @angular/material/core/theming/_theming.scss is iterating through colors in a palette.
**Issue:** It also iterates on "contrast" map defined in the palette, resulting in a "contrast-contrast: null" entry in the returned value.

https://github.com/angular/components/blob/6057512de333046517c5f64a2ce6cf0a889447e9/src/material/core/theming/_theming.scss#L78-L85

### Reproduction

Reproduction link: https://github.com/guillaumerochelle/scss-exp
Steps to reproduce:
1. Run `npm install`
2. Add `@debug $result` in node_modules/@angular/material/core/theming/_theming.scss line 86
3. Run `npm run build`

### Expected Behavior

Compilation logs show $result variable without `"contrast-contrast": null`

node_modules\@angular\material\core\theming\_theming.scss:87 DEBUG: (50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #f44336, lighter: #ffcdd2, darker: #d32f2f, text: #f44336, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white)

### Actual Behavior

Compilation logs show $result variable with `"contrast-contrast": null`

node_modules\@angular\material\core\theming\_theming.scss:87 DEBUG: (50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #f44336, lighter: #ffcdd2, darker: #d32f2f, text: #f44336, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, **"contrast-contrast": null**)

### Environment

Angular CLI: 16.2.9
Node: 18.15.0
Package Manager: npm 9.7.2
OS: win32 x64

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

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

Hướng nghiên cứu

Kiểm tra src/material/core/theming/_theming.scss, đặc biệt là logic define-palette quanh các dòng 78-85. Sử dụng bản tái hiện được liên kết: chạy npm install, thêm đầu ra debug được báo cáo và chạy npm run build. Được xem là hoàn tất khi kết quả đã biên dịch không còn chứa "contrast-contrast": null.

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, scss
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả 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.