Material: Feat: Add `md-danger` to themes

Created on 19 Dec 2014  路  7Comments  路  Source: angular/material

Right now themes only have a primary, accent, and warning color. However the warning color is usually red which I think strikes more a feeling of danger. There is no real warning color only normal/primary and md-warn which acts like danger.

I think it would be nice if we added an md-danger and kept the md-warn so that we can convey both dangerous things and non fatal warnings. This would be similar to bootstraps use of warn and danger colors.

I couldn't find anything in the spec against this and I think it would help because right now you would use something like md-theme="yellow" then add md-primary which feels a bit hacky.

team discussion theme

Most helpful comment

If we have md-warn and md-danger, it'd be nice to also have the option of an md-success as well. I have a few uses for both success and danger colors (positive and negative numbers) in my theme, but my app uses multiple themes so using straight CSS for those elements isn't managable if the themes don't match red or green text well.

All 7 comments

@ajoslin this sounds good to me, what are your thoughts?

@epelc sorry on the delay on this one - the team hans't had time to discuss it yet. Punting to 0.9 for now.

@rschmukler No problem. Thanks for the heads up though!

If we have md-warn and md-danger, it'd be nice to also have the option of an md-success as well. I have a few uses for both success and danger colors (positive and negative numbers) in my theme, but my app uses multiple themes so using straight CSS for those elements isn't managable if the themes don't match red or green text well.

+1

+1 also md-info ala bootstrap and poss. a custom color

After discussing this with the team, we think that md-danger should mostly be covered by hues of md-warn (eg. md-warn md-hue-3). We realize that this deviates from bootstrap, but material design tends to recommend only a few colors in an app. With the addition of $mdColor, this will also be less necessary.

Was this page helpful?
0 / 5 - 0 ratings