Please support composable RGB color values

[fejesjoco]

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.

[lozandier]

@fejesjoco To be fair, to make it easier for color manipulation (especially with animation), I was wondering if the color values for 2.0 be in HSL; I was actually considering making a PR to make the color values HSLA.

Though admittedly, it's not too much of a problem for Web Creatives these days to use something like Sass to manipulate color with HSLA temporarily before outputting the values back to RGB.

It'll convert HEX version of values to their "raw" RGB values as needed like rgba(#fff, 0.2) becoming rgba(255, 255, 255, 0.2) automatically.

That's what I do these days.

Unfortunately, manipulating color this way natively isn't supported yet.

A way to make HEX values also have transparency values simultaneously—RRGGBBAA—is only beginning to slowly be adopted by modern browsers.

See http://caniuse.com/#feat=css-rrggbbaa for more details.