icon-button ripple color problem #13232
Description
Bug, feature request, or proposal:
on a toolbar, the icon-button color follow the contrast color from the theme but the ripple do not.
What is the expected behavior?
on a toolbar, the icon-button ripple should follow the contrast color from the theme.
What is the current behavior?
on a toolbar, the icon-button ripple do not follow the contrast color from the theme.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-widrns
template
<mat-toolbar color="primary">
<button mat-icon-button type="button">
<mat-icon>favorite</mat-icon>
</button>
<nav mat-tab-nav-bar backgroundColor="primary">
<a mat-tab-link>First</a>
<a mat-tab-link>Second</a>
<a mat-tab-link>Third</a>
</nav>
</mat-toolbar>
style
@import '~@angular/material/theming';
@include mat-core();
/* Palette generated from mcg.mbitson.com */
$md-primary: (
50 : #fdede4,
100 : #fbd1bd,
200 : #f9b291,
300 : #f69364,
400 : #f47c43,
500 : #f26522, // Main color
600 : #f05d1e,
700 : #ee5319,
800 : #ec4914,
900 : #e8370c,
A100 : #ffffff,
A200 : #ffe5e0,
A400 : #ffbaad,
A700 : #ffa493,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$my-primary: mat-palette($md-primary, 500, 200, 700);
$my-accent: mat-palette($mat-indigo, 700, 300, 900);
$my-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-theme);
What is the use-case or motivation for changing an existing behavior?
Consistency between theme and components
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
test on :
Angular 6.1.7
Material 6.4.7
typescript 2.7.2
Windows 7
Chrome 69.0.3497.100