The colors in color.html are defined as "#AABBCC" color values. The material design spec specifies a lot of text to have opacity.
What that means is that currently we have to do this:
--google-red-100: #f4c7c3;
--dark-primary-opacity: 0.87;
.mytext {
color: var(--google-red-100);
opacity: var(--dark-primary-opacity);
}
The problem with opacity is that it applies to everything, not just the text color. In any non-trivial scenario this doesn't work (eg. you can't set the color for the whole element like this, you need to be very specific to only target text nodes).
It turns out, CSS allows you to specify "RRR,GGG,BBB" values and then you could do this:
--google-red-100-raw: 244,199,195;
--dark-primary-opacity: 0.87;
.mytext {
color: rgba(var(--google-red-100-raw), var(--dark-primary-opacity));
}
This is compliant with CSS parsing specs and also happens to work with Polymer, POC here: http://jsbin.com/noyewocelo/edit?html,output
See that I added -raw postfix to the new variable, it has to be a new one because it's not backwards compatible. The reason for -raw is that the current colors imply rgb() automatically, the proposed new ones not, that is what allows the user to apply rgb() themselves.
The colors in color.html are defined as "#AABBCC" color values. The material design spec specifies a lot of text to have opacity.
What that means is that currently we have to do this:
The problem with opacity is that it applies to everything, not just the text color. In any non-trivial scenario this doesn't work (eg. you can't set the color for the whole element like this, you need to be very specific to only target text nodes).
It turns out, CSS allows you to specify "RRR,GGG,BBB" values and then you could do this:
This is compliant with CSS parsing specs and also happens to work with Polymer, POC here: http://jsbin.com/noyewocelo/edit?html,output
See that I added -raw postfix to the new variable, it has to be a new one because it's not backwards compatible. The reason for -raw is that the current colors imply rgb() automatically, the proposed new ones not, that is what allows the user to apply rgb() themselves.