angular / angular/components

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

オープン
#28,070 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: theming P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。