Components: Using Hues in html elements from defined color palette

Created on 27 Apr 2017 · 5Comments · Source: angular/components

Feature request

There should be way to use the hues defined in palette theme.
Provision to add color into html element from material design swatches (similar to md-color of previous version of angular material).

What is the expected behavior?

$app-primary: mat-palette($mat-grey, 500, 50, 900);
In html element, I should be able to use hues defined in my palette (above)
something like
color="primary mat-hue-2".

What is the current behavior?

I am able just to use color="primary", there is no way of using hues from defined palette/material design swatches.

What is the use-case or motivation for changing an existing behavior?

If we can get something similar of what angular material have:
<p md-colors="{background: 'purple-600'}>
all the material design color swatches can be used directly through "md-color" attribute.

Which versions of Angular, Material, OS, browsers are affected?

Angular: 4.0.2
Material: 2.0.0-beta.3

feature needs discussion

Source

ajaysattikar

👍6

Most helpful comment

@ajaysattikar in some places (possibly just progress bars - see #4088), they are used as the lighter and darker hues for components. Otherwise, you can consume those colors while theming your own components:

@import 'my-theme-partial'

$primary: map-get($theme, primary);

.light-bg {
  background-color: mat-color($primary, lighter);
}
.dark-bg {
  background-color: mat-color($primary, darker);
}

willshowell on 2 May 2017

👍7

All 5 comments

@jelbourn is this a feature we want to add?

mmalerba on 27 Apr 2017

For now this isn't something that we're going to support because it would balloon the theming styles by a bit. When eventually we're able to use css variables it's something we'll revisit.

jelbourn on 27 Apr 2017

Make sense.
@jelbourn I'm just confuse on having multiple hues in theme (e.g. 500, 50, 900)
$app-primary: mat-palette($mat-grey, 500, 50, 900);
What's these exactly defined for?

ajaysattikar on 2 May 2017

@import 'my-theme-partial'

$primary: map-get($theme, primary);

.light-bg {
  background-color: mat-color($primary, lighter);
}
.dark-bg {
  background-color: mat-color($primary, darker);
}

willshowell on 2 May 2017

👍7

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}