[css4-color] @color-keyword Color Keywords

While working on a website that is about to suffer a subtle but
wide-reaching color scheme change, I was thinking about how nice it would
have been to be able to create color keywords for my color scheme colors.
Then I recalled that I had read something similar on this list a while back,
so I went and read the relevant thread in the archives[1]. It seems like
there was a lot of discussion but that it didn't go all that far. So I'm
throwing my proposal into the mix. This proposal is exactly what it says on
the tin: a way to define new color keywords.

@color-keyword {
    keyword: ochre;
    color: hsl(6, 82%, 37%);
}

a {
    color: ochre; /* is the same as color: hsl(6, 82%, 37%); */
}

The value for keyword must be a proper CSS keyword. (Which I believe means
it must match /[a-zA-z0-9-]+/.)
The value for color must be a <color>.

While I can see that this is almost exactly a proper subset of the use cases
for CSS variables, there doesn't seem to be a lot of movement on variable
and this is a specific use case that I feel is common enough and simple
enough that a separate treatment is fine. I think that the main practical
use will be to make using color schemes easier (so you don't have to
remember your color's RGB and HSL values) and to make skinning and theming
easier: instead of having to reproduce all the selectors for the whole site
in a different file and override their colors, one can simply name the
colors and swap out the CSS file that defines those colors.

Whether or not the existing color keywords can be redefined is a matter for
debate. On the one hand, there is potential for bad code there. On the other
hand, color keywords are already defined in this way, unless they have some
magic about them. Though it occurs to me when writing this that the
potential for bad code combined with the existence of magical color keywords
means that perhaps not allowing existing color keywords to be used is the
better course of action. That said, the proposal itself gives the
opportunity for some horrible code anyway:

@color-keyword {
    keyword: cerulean;
    color: hsl(6, 82%, 37%);
}

But I am willing to take this as a price, since any variable-like mechanism
can be used for bad code like this.

Thoughts?

- Eli Morris-Heft


[1] http://lists.w3.org/Archives/Public/www-style/2010Sep/0460.html