angular / angular/components

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

未关闭
#28,070 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: theming P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

检查 src/material/core/theming/_theming.scss,尤其是第 78-85 行附近的 define-palette 逻辑。使用链接的复现:运行 npm install,添加报告中的调试输出,然后运行 npm run build。当编译结果不再包含 "contrast-contrast": null 时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, scss
领域
frontend
Issue 类型
缺陷
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。