office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
267 lines • 7.1 kB
JavaScript
import { assign } from '../../Utilities';
import { COLOR_VALUES } from './colorValues';
export var MAX_COLOR_SATURATION = 100;
export var MAX_COLOR_HUE = 359;
export var MAX_COLOR_VALUE = 100;
export var MAX_COLOR_RGBA = 255;
export function cssColor(color) {
return (_named(color) ||
_hex3(color) ||
_hex6(color) ||
_rgb(color) ||
_rgba(color) ||
_hsl(color) ||
_hsla(color));
}
export function rgb2hex(r, g, b) {
return [_numberToPaddedHex(r), _numberToPaddedHex(g), _numberToPaddedHex(b)].join('');
}
export function hsv2hex(h, s, v) {
var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b;
return rgb2hex(r, g, b);
}
export function rgb2hsv(r, g, b) {
var h = NaN;
var s;
var v;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
// hue
if (delta === 0) {
h = 0;
}
else if (r === max) {
h = ((g - b) / delta) % 6;
}
else if (g === max) {
h = (b - r) / delta + 2;
}
else if (b === max) {
h = (r - g) / delta + 4;
}
h = Math.round(h * 60);
if (h < 0) {
h += 360;
}
// saturation
s = Math.round((max === 0 ? 0 : delta / max) * 100);
// value
v = Math.round((max / 255) * 100);
return { h: h, s: s, v: v };
}
export function hsl2hsv(h, s, l) {
s *= (l < 50 ? l : 100 - l) / 100;
return {
h: h,
s: ((2 * s) / (l + s)) * 100,
v: l + s
};
}
export function hsv2hsl(h, s, v) {
s /= MAX_COLOR_SATURATION;
v /= MAX_COLOR_VALUE;
var l = (2 - s) * v;
var sl = s * v;
sl /= l <= 1 ? l : 2 - l;
sl = sl || 0;
l /= 2;
return { h: h, s: sl * 100, l: l * 100 };
}
export function hsl2rgb(h, s, l) {
var hsv = hsl2hsv(h, s, l);
return hsv2rgb(hsv.h, hsv.s, hsv.v);
}
export function hsv2rgb(h, s, v) {
s = s / 100;
v = v / 100;
var rgb = [];
var c = v * s;
var hh = h / 60;
var x = c * (1 - Math.abs((hh % 2) - 1));
var m = v - c;
switch (Math.floor(hh)) {
case 0:
rgb = [c, x, 0];
break;
case 1:
rgb = [x, c, 0];
break;
case 2:
rgb = [0, c, x];
break;
case 3:
rgb = [0, x, c];
break;
case 4:
rgb = [x, 0, c];
break;
case 5:
rgb = [c, 0, x];
break;
}
return {
r: Math.round(MAX_COLOR_RGBA * (rgb[0] + m)),
g: Math.round(MAX_COLOR_RGBA * (rgb[1] + m)),
b: Math.round(MAX_COLOR_RGBA * (rgb[2] + m))
};
}
export function getColorFromString(inputColor) {
var color = cssColor(inputColor);
if (!color) {
return;
}
var a = color.a, b = color.b, g = color.g, r = color.r;
var _a = rgb2hsv(r, g, b), h = _a.h, s = _a.s, v = _a.v;
return {
a: a,
b: b,
g: g,
h: h,
hex: rgb2hex(r, g, b),
r: r,
s: s,
str: inputColor,
v: v
};
}
export function getColorFromRGBA(rgba) {
var a = rgba.a, b = rgba.b, g = rgba.g, r = rgba.r;
var _a = rgb2hsv(r, g, b), h = _a.h, s = _a.s, v = _a.v;
var hex = rgb2hex(r, g, b);
return {
a: a,
b: b,
g: g,
h: h,
hex: hex,
r: r,
s: s,
str: a === 100 ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + a / 100 + ")",
v: v
};
}
export function getFullColorString(color) {
return "#" + hsv2hex(color.h, MAX_COLOR_SATURATION, MAX_COLOR_VALUE);
}
export function updateSV(color, s, v) {
var _a = hsv2rgb(color.h, s, v), r = _a.r, g = _a.g, b = _a.b;
var hex = rgb2hex(r, g, b);
return {
a: color.a,
b: b,
g: g,
h: color.h,
hex: hex,
r: r,
s: s,
str: color.a === 100 ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")",
v: v
};
}
export function updateH(color, h) {
var _a = hsv2rgb(h, color.s, color.v), r = _a.r, g = _a.g, b = _a.b;
var hex = rgb2hex(r, g, b);
return {
a: color.a,
b: b,
g: g,
h: h,
hex: hex,
r: r,
s: color.s,
str: color.a === 100 ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")",
v: color.v
};
}
export function updateA(color, a) {
return assign({}, color, {
a: a,
str: a === 100 ? "#" + color.hex : "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a / 100 + ")"
});
}
function _numberToPaddedHex(num) {
var hex = num.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}
function _named(str) {
var c = COLOR_VALUES[str.toLowerCase()];
if (c) {
return {
r: c[0],
g: c[1],
b: c[2],
a: 100
};
}
}
function _rgb(str) {
if (0 === str.indexOf('rgb(')) {
str = str.match(/rgb\(([^)]+)\)/)[1];
var parts = str.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
b: parts[2],
a: 100
};
}
}
function _rgba(str) {
if (str.indexOf('rgba(') === 0) {
str = str.match(/rgba\(([^)]+)\)/)[1];
var parts = str.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
b: parts[2],
a: parts[3] * 100
};
}
}
function _hex6(str) {
if ('#' === str[0] && 7 === str.length) {
return {
r: parseInt(str.slice(1, 3), 16),
g: parseInt(str.slice(3, 5), 16),
b: parseInt(str.slice(5, 7), 16),
a: 100
};
}
}
function _hex3(str) {
if ('#' === str[0] && 4 === str.length) {
return {
r: parseInt(str[1] + str[1], 16),
g: parseInt(str[2] + str[2], 16),
b: parseInt(str[3] + str[3], 16),
a: 100
};
}
}
function _hsl(str) {
if (str.indexOf('hsl(') === 0) {
str = str.match(/hsl\(([^)]+)\)/)[1];
var parts = str.split(/ *, */);
var h = parseInt(parts[0], 10);
var s = parseInt(parts[1], 10);
var l = parseInt(parts[2], 10);
var rgba = hsl2rgb(h, s, l);
rgba.a = 100;
return rgba;
}
}
function _hsla(str) {
if (str.indexOf('hsla(') === 0) {
str = str.match(/hsla\(([^)]+)\)/)[1];
var parts = str.split(/ *, */);
var h = parseInt(parts[0], 10);
var s = parseInt(parts[1], 10);
var l = parseInt(parts[2], 10);
var a = parseInt(parts[3], 10) * 100;
var rgba = hsl2rgb(h, s, l);
rgba.a = a;
return rgba;
}
}
//# sourceMappingURL=colors.js.map