Provide rgb values to support css custom properties.

[lukasoppermann]

Hey,

css custom properties are close to being supported in all evergreen browsers, yeah 🎉 . However, the color function is not anywhere close to being released. This means, if you want to use a color that has transparency without a pre-processor you need the raw rgb values.

For this I would ask you to add rgb values to the css colors, maybe like so:

--oc-orange-9: #d9480f;
--oc-orange-9-rgb: 217, 72, 15;

It is important that only the three values are specified, NOT rgb because this way you can do the following:

background: rgba(var(--oc-orange-9-rgb), .5);

This would make open-colors work with native css custom properties inside rgba so transparency can be set by the user, which would be awesome.

[sairion]

Hi! That seems to be great idea, even though I'm not familiar with new css custom props. Currently Open color is being automatically generated from configuration file (https://github.com/yeun/open-color/blob/master/open-color.json) and they are described as HEX values, so it needs to be converted while they are generated. (https://github.com/yeun/open-color/blob/master/compile-templates.js) I'll take a look when I'll have time, but of course you can submit PR if you want. Thanks for suggestion :smile:

[lukasoppermann]

Hey, great, it should be pretty easy. This works fine and gives you an array with the rgb values.

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1).match(/.{2}/g)
    .map(x => parseInt(x, 16))

Usage e.g.:

console.log(hexToRgb("#0033ff")) // [0, 51, 255]

source: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

CSS Custom properties is the official name for css variables, as use in https://github.com/yeun/open-color/blob/master/open-color.css

[sairion]

we can use https://github.com/sindresorhus/hex-rgb

[lukasoppermann]

Even better.

[makepanic]

There is already a handelbars helper called hex2rgb which returns the incoming hex string as an {r, g, b} object. (It's nearly the same as the inkscape template)

You basically have to call the helper on each color.hex and put the result where you want it to be (in the .css template file).

I could do it if nobody else wants to take this issue.

[lukasoppermann]

@makepanic I will not get to it soo, so if you could do it that would be great.

[sairion]

@makepanic Oh, I haven't noticed. Please work on, if you don't mind :smile: