bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Is this a regression?
- [x] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
Angular Material v16
### Description
Using Angular Material 17, 18 and 19 (so Material 3) on a _dark theme_ (eg. Cyan & Orange) its **very hard to see that mat-raised-button is actually is a button**...

Link to this example: https://material.angular.io/components/table/examples#table-dynamic-array-data
While on a _light theme_, there is enough contrast and drop-shadow on a light background, that you can easily see its indeed a raised button:

### Reproduction
StackBlitz link: https://stackblitz.com/run?file=src%2Fapp%2Ftable-dynamic-array-data-example.ts
Be sure to select dark theme in the stackblitz. Its basically your official example: https://material.angular.io/components/table/examples#table-dynamic-array-data
### Expected Behavior
I would expect to have more contrast with the raised button on the background using dark mode, so you can see at least the outline better. The drop-shadow is of course not working either in dark mode, so that is not helping.
What about a lighter drop-shadow effect?? Since you can't have a dark drop-shadow on a black background. Could this be `--mdc-protected-button-container-elevation-shadow`?
See for example how it used to be in Angular **Material v16**: https://v16.material.angular.io/components/table/examples#table-dynamic-array-data

### Actual Behavior
No contrast on the dark mat-raised-button on a dark background (aka dark mode), you can not even see that it is a raised button in the first place. See again:

### Environment
- Angular: 19.2.6
- CDK/Material: 19.2.6
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Linux Mint (Ubuntu)
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現から始め、dark-theme における mat-raised-button の動作を Angular Material v16 の例と比較します。再現に関係するボタンのスタイルと elevation の動作を調査し、その後、light theme にリグレッションを生じさせることなく、dark-mode のボタンに視認できるコントラストと elevation があることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, design, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 活発
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 55/100